collapsible trade/single form (#134)

* collapse transition with default hidden state for seldom used inputs
ed-pilots-network · May 15, 2024 · 90e7b59 · 90e7b59
1 parent ecfaa58
commit 90e7b59
Show file tree

Hide file tree

Showing 15 changed files with 899 additions and 730 deletions.
diff --git a/app/_components/commodities/CommodityFormResponse.tsx b/app/_components/commodities/CommodityFormResponse.tsx
@@ -20,6 +20,7 @@ const CommodityFormResponse: React.FC<ICommodityFormResponseProps> = ({
     'distance' as keyof ICommodityFormResponse,
   );
   const [ascending, setAscending] = useState(false);
+
   const { isDark } = useColorMode();
 
   return (

diff --git a/app/_components/commodities/Form.tsx b/app/_components/commodities/Form.tsx
@@ -15,8 +15,8 @@ import {
   FormErrorMessage,
 } from '@chakra-ui/react';
 import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import GetColor from '@/app/_hooks/colorSelector';
 import {
   CommoditiesField,
@@ -67,6 +67,13 @@ const Form: React.FC<FormProps> = ({
     resolver: zodResolver(CommodityFormSchema),
   });
 
+  const onSubmit: SubmitHandler<SubmitProps> = (data) => {
+    const submitData = data;
+    if (isBuying) submitData.minDemand = 0;
+    if (!isBuying) submitData.minSupply = 0;
+    onSubmitHandler(submitData);
+  };
+
   const numberInputs = (
     label: string,
     registerName: 'minSupply' | 'minDemand',
@@ -95,13 +102,6 @@ const Form: React.FC<FormProps> = ({
     </>
   );
 
-  const onSubmit: SubmitHandler<SubmitProps> = (data) => {
-    const submitData = data;
-    if (isBuying) submitData.minDemand = 0;
-    if (!isBuying) submitData.minSupply = 0;
-    onSubmitHandler(submitData);
-  };
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Flex
@@ -154,7 +154,12 @@ const Form: React.FC<FormProps> = ({
           </FormControl>
         </Stack>
         <Stack
-          direction={{ base: 'column', sm: 'column', md: 'column', lg: 'row' }}
+          direction={{
+            base: 'column',
+            sm: 'column',
+            md: 'column',
+            lg: 'row',
+          }}
           spacing={4}
           width="100%"
           marginTop={4}
@@ -174,7 +179,12 @@ const Form: React.FC<FormProps> = ({
           </FormControl>
         </Stack>
         <Stack
-          direction={{ base: 'column', sm: 'column', md: 'column', lg: 'row' }}
+          direction={{
+            base: 'column',
+            sm: 'column',
+            md: 'column',
+            lg: 'row',
+          }}
           spacing={4}
           width="100%"
           marginTop={4}

diff --git a/app/_components/form/Checkbox.tsx b/app/_components/form/Checkbox.tsx
@@ -1,5 +1,5 @@
 import { UseFormRegisterReturn } from 'react-hook-form';
-import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
+import { Checkbox as ChakraCheckbox, Text } from '@chakra-ui/react';
 
 interface Props {
   register: UseFormRegisterReturn;
@@ -9,7 +9,7 @@ interface Props {
 
 const Checkbox = ({ register, label, checked }: Props) => (
   <ChakraCheckbox {...register} defaultChecked={checked}>
-    {label}
+    <Text fontSize="sm">{label}</Text>
   </ChakraCheckbox>
 );
 

diff --git a/app/_components/form/CheckboxGroup.tsx b/app/_components/form/CheckboxGroup.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react';
 
 const CheckboxGroup = ({ children }: PropsWithChildren<{}>) => (
   <Stack
+    height={{ base: 'inherit', md: '40px', lg: '40px' }}
     borderWidth="1px"
     borderRadius="md"
     borderColor={GetColor('border')}

diff --git a/app/_components/form/Radio.tsx b/app/_components/form/Radio.tsx
@@ -1,6 +1,6 @@
 import GetColor from '@/app/_hooks/colorSelector';
 import { UseFormRegisterReturn } from 'react-hook-form';
-import { Radio as ChakraRadio } from '@chakra-ui/react';
+import { Radio as ChakraRadio, Text } from '@chakra-ui/react';
 
 interface Props {
   register: UseFormRegisterReturn;
@@ -18,7 +18,7 @@ const Radio = ({ register, label, value, checked }: Props) => (
     defaultChecked={checked}
     value={value}
   >
-    {label}
+    <Text fontSize="sm">{label}</Text>
   </ChakraRadio>
 );
 

diff --git a/app/_components/form/RadioGroup.tsx b/app/_components/form/RadioGroup.tsx
@@ -5,12 +5,13 @@ import { PropsWithChildren } from 'react';
 const RadioGroup = ({ children }: PropsWithChildren<{}>) => (
   <ChackraRadioGroup colorScheme="gray">
     <Stack
+      height={{ base: 'inherit', md: '40px', lg: '40px' }}
       borderWidth="1px"
       borderRadius="md"
       borderColor={GetColor('border')}
       padding={3}
       spacing={5}
-      direction="row"
+      direction={{ base: 'column', sm: 'column', md: 'row', lg: 'row' }}
     >
       {children}
     </Stack>

diff --git a/app/_components/inputs/StationTypes.tsx b/app/_components/inputs/StationTypes.tsx
@@ -7,10 +7,10 @@ interface Props {
 }
 
 export const checkboxValues = [
-  { name: 'Orbital Station', value: 'includeOrbital', checked: true },
+  { name: 'Orbital', value: 'includeOrbital', checked: true },
   { name: 'Planetary', value: 'includePlanetary' },
   { name: 'Odyssey', value: 'includeOdyssey' },
-  { name: 'Fleet Carriers', value: 'includeFleetCarriers' },
+  { name: 'Carriers', value: 'includeFleetCarriers' },
 ];
 
 const StationTypesField = ({ register }: Props) => (

diff --git a/app/_components/inputs/tests/StationTypes.test.tsx b/app/_components/inputs/tests/StationTypes.test.tsx
@@ -26,7 +26,7 @@ describe('Station Type Field', () => {
   it('checks only Orbital Station by default', () => {
     expect(screen.getAllByRole('checkbox').length).toEqual(4);
 
-    expect(checkboxValues[0].name === 'Orbital Station').toBeTruthy();
+    expect(checkboxValues[0].name === 'Orbital').toBeTruthy();
 
     expect(screen.getByLabelText(checkboxValues[0].name)).toBeChecked();
     expect(screen.getByLabelText(checkboxValues[1].name)).not.toBeChecked();

diff --git a/app/_components/stations/Form.tsx b/app/_components/stations/Form.tsx
@@ -13,6 +13,7 @@ import {
   Input,
   FormErrorMessage,
   Checkbox,
+  Text,
 } from '@chakra-ui/react';
 
 import { z } from 'zod';
@@ -117,7 +118,17 @@ const Form: React.FC<FormProps> = ({
             </FormErrorMessage>
           </FormControl>
         </GridItem>
+      </Grid>
 
+      <Grid
+        templateColumns={{
+          base: 'repeat(1, 1fr)',
+          md: 'repeat(2, 1fr)',
+          lg: 'repeat(4, 1fr)',
+        }}
+        gap={6}
+        marginBottom="10"
+      >
         <GridItem colSpan={{ base: 1, md: 2 }}>
           <FormControl isInvalid={!!(errors.ships && errors.ships.message)}>
             <FormLabel>Ships</FormLabel>
@@ -324,13 +335,14 @@ const Form: React.FC<FormProps> = ({
                 isInvalid={
                   !!(errors.requiresPermit && errors.requiresPermit.message)
                 }
+                display="flex"
               >
                 <Checkbox
                   colorScheme="orange"
                   {...register('requiresPermit')}
                   borderColor={GetColor('border')}
                 >
-                  Requires Permit
+                  <Text fontSize="sm">Requires Permit</Text>
                 </Checkbox>
                 <FormErrorMessage>
                   {errors.requiresPermit && errors.requiresPermit.message}

diff --git a/app/_components/systems/Form.tsx b/app/_components/systems/Form.tsx
@@ -14,6 +14,7 @@ import {
   Input,
   FormErrorMessage,
   Checkbox,
+  Text,
 } from '@chakra-ui/react';
 
 import { z } from 'zod';
@@ -281,7 +282,7 @@ const Form: React.FC<FormProps> = ({ onSubmitHandler, isLoading }) => {
               {...register('requiresPermit')}
               borderColor={GetColor('border')}
             >
-              Requires Permit
+              <Text fontSize="sm">Requires Permit</Text>
             </Checkbox>
             <FormErrorMessage>
               {errors.requiresPermit && errors.requiresPermit.message}

diff --git a/app/_components/trade-routes/multi/Form.tsx b/app/_components/trade-routes/multi/Form.tsx
@@ -1,19 +1,10 @@
-import powers from '@/app/_lib/power-list';
-import governments from '@/app/_lib/government-list';
-import allegiances from '@/app/_lib/allegiance-list';
-import {
-  Button,
-  FormControl,
-  FormLabel,
-  Grid,
-  GridItem,
-  Input,
-  FormErrorMessage,
-  Checkbox,
-} from '@chakra-ui/react';
+import { useState } from 'react';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm, SubmitHandler } from 'react-hook-form';
+import powers from '@/app/_lib/power-list';
+import governments from '@/app/_lib/government-list';
+import allegiances from '@/app/_lib/allegiance-list';
 import GetColor from '@/app/_hooks/colorSelector';
 import {
   PowersField,
@@ -25,8 +16,18 @@ import {
   SystemsField,
 } from '@/app/_components/inputs';
 import CheckboxGroup from '../../form/CheckboxGroup';
-import { useState } from 'react';
 import Select from '../../inputs/form/Select';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Grid,
+  GridItem,
+  Input,
+  FormErrorMessage,
+  Checkbox,
+  Text,
+} from '@chakra-ui/react';
 import { ICommodity } from '@/app/_types';
 
 export const MultiTradeRouteFormSchema = z.object({
@@ -447,13 +448,14 @@ const Form: React.FC<FormProps> = ({
                 isInvalid={
                   !!(errors.requiresPermit && errors.requiresPermit.message)
                 }
+                display="flex"
               >
                 <Checkbox
                   colorScheme="orange"
                   {...register('requiresPermit')}
                   borderColor={GetColor('border')}
                 >
-                  Requires Permit
+                  <Text fontSize="sm">Requires Permit</Text>
                 </Checkbox>
                 <FormErrorMessage>
                   {errors.requiresPermit && errors.requiresPermit.message}

diff --git a/app/_components/trade-routes/single/Form.test.tsx b/app/_components/trade-routes/single/Form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import Form from './Form';
 import { ChakraProvider } from '@chakra-ui/react';
 
@@ -43,6 +43,20 @@ describe('Stations Form', () => {
       </ChakraProvider>,
     );
 
+    // filter button hides fields at start
+    expect(
+      screen.queryByRole('combobox', { name: 'Commodities' }),
+    ).not.toBeInTheDocument();
+
+    const filtersButton = screen.getByRole('button', { name: 'Options' });
+
+    expect(filtersButton).toBeInTheDocument();
+
+    // @ts-ignore depecated warning relates to PR https://github.com/testing-library/react-testing-library/pull/1319
+    act(() => {
+      filtersButton.click();
+    });
+
     expect(
       screen.getByRole('combobox', { name: 'Buy from Station' }),
     ).toBeInTheDocument();
@@ -55,10 +69,6 @@ describe('Stations Form', () => {
       screen.getByRole('spinbutton', { name: 'Max Route Distance' }),
     ).toBeInTheDocument();
 
-    expect(
-      screen.getByRole('combobox', { name: 'Commodities' }),
-    ).toBeInTheDocument();
-
     expect(
       screen.getByRole('spinbutton', { name: 'Cargo Capacity' }),
     ).toBeInTheDocument();