@digigov/form 2.0.0-85c27c19 → 2.0.0-8e254888

package/src/inputs/Radio/index.tsx

@@ -2,17 +2,20 @@ import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import Hint from '@digigov/react-core/Hint';
-import { RadioConditional } from '@digigov/react-core/RadioConditional';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
+import {
+  RadioContainer,
+  RadioItem,
+  RadioConditional,
+} from '@digigov/ui/form/RadioContainer';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 
 export interface RadioButtonsGroupProps
   extends Omit<UncontrolledFieldProps, 'extra'> {
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
     dense?: boolean;
   };
   fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
@@ -24,13 +27,13 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
   register,
   extra: { options, className },
   disabled,
-  fieldComponent: Field,
+  Field,
   ...props
 }) => {
   const currentValue: string | undefined = useWatch({ control, name });
   const { t } = useTranslation();
   return (
-    <RadioContainer className={className} defaultValue={currentValue} id={name}>
+    <RadioContainer className={className} id={name}>
       {options.map(
         ({
           label,
@@ -40,7 +43,7 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
           selected,
           ...option
         }) => (
-          <div key={`${name}.${v}`}>
+          <Base as="div" key={`${name}.${v}`}>
             <RadioItem
               {...register(name)}
               id={`${name}.${v}`}
@@ -56,7 +59,9 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 type: 'radio',
               }}
             >
-              {(label && label.primary && t(label.primary)) || v}
+              {label && label.primary && (
+                <Base as="span">{t(label.primary) || v}</Base>
+              )}
               {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
             </RadioItem>
             {selected && selected()}
@@ -67,7 +72,69 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 ))}
               </RadioConditional>
             )}
-          </div>
+          </Base>
+        )
+      )}
+    </RadioContainer>
+  );
+};
+export const ControlledRadioButtonsGroup: React.FC<
+  RadioButtonsGroupProps & { onChange: (e: any) => void; value: any }
+> = ({
+  name,
+  extra: { options, className },
+  disabled,
+  onChange,
+  value,
+  Field,
+  ...props
+}) => {
+  const currentValue: string | undefined = value;
+  const { t } = useTranslation();
+  return (
+    <RadioContainer className={className} id={name}>
+      {options.map(
+        ({
+          label,
+          value: v,
+          show,
+          disabled: optionDisabled,
+          selected,
+          ...option
+        }) => (
+          <React.Fragment key={`${name}.${v}`}>
+            <RadioItem
+              onChange={(e) => {
+                console.log(e);
+                onChange(e);
+              }}
+              id={`${name}.${v}`}
+              value={v}
+              checked={currentValue === v}
+              disabled={disabled || optionDisabled}
+              {...option}
+              {...{
+                ...props,
+                reset: undefined,
+                required: undefined,
+                error: undefined,
+                Field: undefined,
+                'aria-describedby': undefined,
+                type: 'radio',
+              }}
+            >
+              {(label && label.primary && t(label.primary)) || v}
+              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            </RadioItem>
+            {selected && selected()}
+            {currentValue === v && show && (
+              <RadioConditional>
+                {show.map((fieldName) => (
+                  <Field name={fieldName} key={fieldName} />
+                ))}
+              </RadioConditional>
+            )}
+          </React.Fragment>
         )
       )}
     </RadioContainer>

package/src/inputs/Select/{index.mdx → doc.mdx}

@@ -10,8 +10,4 @@ The select element represents a control that provides a menu of options.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Select"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Select/__stories__/Default.tsx" />

package/src/inputs/Select/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import SelectContainer from '@digigov/react-core/SelectContainer';
-import SelectOption from '@digigov/react-core/SelectOption';
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/form/SelectContainer';
 
 export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
 }
 
@@ -21,8 +23,14 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
         className={className}
         ref={ref}
         name={name}
+        id={name}
         disabled={disabled}
-        {...{ ...props, reset: undefined, required: undefined }}
+        {...{
+          ...props,
+          reset: undefined,
+          required: undefined,
+          Field: undefined,
+        }}
       >
         {options.map(({ value, label }) => (
           <SelectOption key={value} value={value}>

package/src/inputs/inputsScenarios.ts

@@ -1,160 +1,158 @@
 import el from '@digigov/form/locales/el';
 
 export const INPUTS_FIELDS = [
-    {
-      key: 'date-example',
-      type: 'date',
-      required: true,
-      label: {
-        primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
-        secondary:
-          'Για παράδειγμα, 05 11 2020',
-      },
+  {
+    key: 'date-example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
     },
-    {
-      key: 'otp',
-      type: 'otp',
-      maxLength: 6,
-      label: {
-        primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
-      },
-      required: true,
+  },
+  {
+    key: 'otp',
+    type: 'otp',
+    maxLength: 6,
+    label: {
+      primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
     },
-    {
-      key: 'checkbox',
-      type: 'choice:multiple',
-      required: true,
-      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
-      extra: {
-        options: [
-          {
-            label: { primary: 'Έχω συνάχι' },
-            value: 'runny-nose',
-          },
-          {
-            label: { primary: 'Έχω πυρετό' },
-            value: 'fever',
-          },
-          {
-            label: { primary: 'Αισθάνομαι κούραση' },
-            value: 'fatigue',
-          },
-        ],
-      }
+    required: true,
+  },
+  {
+    key: 'checkbox',
+    type: 'choice:multiple',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
     },
-    {
-      key: 'autocomplete_multiple',
-      required: true,
-      type: 'choice:multiple',
-      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
-      extra: {
-        component: 'AutoComplete',
-        multiple: true,
-        options: [
-          {
-            label: { primary: 'Έχω συνάχι' },
-            value: 'runny-nose',
-          },
-          {
-            label: { primary: 'Έχω πυρετό' },
-            value: 'fever',
-          },
-          {
-            label: { primary: 'Αισθάνομαι κούραση' },
-            value: 'fatigue',
-          },
-        ],
-      },
+  },
+  {
+    key: 'autocomplete_multiple',
+    required: true,
+    type: 'choice:multiple',
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'AutoComplete',
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
     },
-    {
-      key: 'radio',
-      type: 'choice:single',
-      required: true,
-      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
-      extra: {
-        options: [
-          {
-            label: { primary: 'Έχω συνάχι' },
-            value: 'runny-nose',
-          },
-          {
-            label: { primary: 'Έχω πυρετό' },
-            value: 'fever',
-          },
-          {
-            label: { primary: 'Αισθάνομαι κούραση' },
-            value: 'fatigue',
-          },
-        ],
-      }
+  },
+  {
+    key: 'radio',
+    type: 'choice:single',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
     },
-    {
-      key: 'select',
-      type: 'choice:single',
-      required: true,
-      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
-      extra: {
-        component: 'Select',
-        options: [
-          {
-            label: { primary: '' },
-            value: '',
-          },
-          {
-            label: { primary: 'Έχω συνάχι' },
-            value: 'runny-nose',
-          },
-          {
-            label: { primary: 'Έχω πυρετό' },
-            value: 'fever',
-          },
-          {
-            label: { primary: 'Αισθάνομαι κούραση' },
-            value: 'fatigue',
-          },
-        ],
-      }
+  },
+  {
+    key: 'select',
+    type: 'choice:single',
+    required: true,
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'Select',
+      options: [
+        {
+          label: { primary: '' },
+          value: '',
+        },
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
     },
-    {
-      key: 'autocomplete_single',
-      required: true,
-      type: 'choice:single',
-      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
-      extra: {
-        component: 'AutoComplete',
-        options: [
-          {
-            label: { primary: 'Έχω συνάχι' },
-            value: 'runny-nose',
-          },
-          {
-            label: { primary: 'Έχω πυρετό' },
-            value: 'fever',
-          },
-          {
-            label: { primary: 'Αισθάνομαι κούραση' },
-            value: 'fatigue',
-          },
-        ],
-      },
+  },
+  {
+    key: 'autocomplete_single',
+    required: true,
+    type: 'choice:single',
+    label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+    extra: {
+      component: 'AutoComplete',
+      options: [
+        {
+          label: { primary: 'Έχω συνάχι' },
+          value: 'runny-nose',
+        },
+        {
+          label: { primary: 'Έχω πυρετό' },
+          value: 'fever',
+        },
+        {
+          label: { primary: 'Αισθάνομαι κούραση' },
+          value: 'fatigue',
+        },
+      ],
     },
-    {
-      key: 'image',
-      type: 'image',
-      required: true,
-      label: {
-        primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
-      },
+  },
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
     },
-    {
-      key: 'file',
-      type: 'file',
-      label: {
-        primary: 'Ανεβάστε το αρχείο της απόδειξης',
-      },
-      required: true,
+  },
+  {
+    key: 'file',
+    type: 'file',
+    label: {
+      primary: 'Ανεβάστε το αρχείο της απόδειξης',
     },
-  ]
+    required: true,
+  },
+];
 
 export const scenarios = [
   {
@@ -167,7 +165,7 @@ export const scenarios = [
         value: {
           day: '22',
           month: '11',
-          year: '2020'
+          year: '2020',
         },
       },
       {
@@ -179,31 +177,27 @@ export const scenarios = [
           '3': '4',
           '4': '4',
           '5': '4',
-        }
+        },
       },
       {
         fieldKey: 'checkbox',
-        value: [
-          'fever', 'fatigue'
-        ]
+        value: ['fever', 'fatigue'],
       },
       {
         fieldKey: 'autocomplete_multiple',
-        value: [
-          'fever', 'fatigue'
-        ]
+        value: ['fever', 'fatigue'],
       },
       {
         fieldKey: 'radio',
-        value: 'fever'
+        value: 'fever',
       },
       {
         fieldKey: 'select',
-        value: 'fatigue'
+        value: 'fatigue',
       },
       {
         fieldKey: 'autocomplete_single',
-        value: 'fatigue'
+        value: 'fatigue',
       },
       {
         fieldKey: 'image',
@@ -211,15 +205,15 @@ export const scenarios = [
           fileName: 'green_image.png',
           width: 500,
           height: 500,
-          size: 3
-        }
+          size: 3,
+        },
       },
       {
         fieldKey: 'file',
         value: {
           fileName: 'file.txt',
-          size: 200
-        }
+          size: 200,
+        },
       },
     ],
     expect: [
@@ -232,7 +226,7 @@ export const scenarios = [
         type: 'success',
         fieldKey: 'otp',
         args: {
-          'maxLength': 6
+          maxLength: 6,
         },
         text: el.form.error.otp.less_than,
       },
@@ -271,7 +265,7 @@ export const scenarios = [
         fieldKey: 'file',
         text: el.form.error.required,
       },
-    ]
+    ],
   },
   {
     title: 'empty fill for inputs',
@@ -324,7 +318,7 @@ export const scenarios = [
         fieldKey: 'file',
         text: el.form.error.required,
       },
-    ]
+    ],
   },
   {
     title: 'incorrect types for DateInput and OtpInput',
@@ -336,8 +330,7 @@ export const scenarios = [
         required: true,
         label: {
           primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
-          secondary:
-            'Για παράδειγμα, 05 11 2020',
+          secondary: 'Για παράδειγμα, 05 11 2020',
         },
       },
       {
@@ -356,7 +349,7 @@ export const scenarios = [
         value: {
           day: 'a2',
           month: '11',
-          year: '2020'
+          year: '2020',
         },
       },
       {
@@ -368,7 +361,7 @@ export const scenarios = [
           '3': '4',
           '4': '4',
           '5': '4',
-        }
+        },
       },
     ],
     expect: [
@@ -381,11 +374,11 @@ export const scenarios = [
         type: 'error',
         fieldKey: 'otp',
         args: {
-          'maxLength': 6
+          maxLength: 6,
         },
         text: el.form.error.otp.less_than,
       },
-    ]
+    ],
   },
   {
     title: 'wrong sizes for ImageInput and FileInput',
@@ -423,15 +416,15 @@ export const scenarios = [
         fieldKey: 'image',
         value: {
           fileName: 'green_image.png',
-          size: 300
-        }
+          size: 300,
+        },
       },
       {
         fieldKey: 'file',
         value: {
           fileName: 'file.txt',
-          size: 200
-        }
+          size: 200,
+        },
       },
     ],
     expect: [
@@ -439,7 +432,7 @@ export const scenarios = [
         type: 'error',
         fieldKey: 'image',
         args: {
-          maxSizeToMb: 0.0003
+          maxSizeToMb: 0.0003,
         },
         text: el.form.error.file_size,
       },
@@ -447,11 +440,11 @@ export const scenarios = [
         type: 'error',
         fieldKey: 'file',
         args: {
-          maxSizeToMb: 0.0003
+          maxSizeToMb: 0.0003,
         },
         text: el.form.error.file_size,
       },
-    ]
+    ],
   },
   {
     title: 'wrong dimensions for ImageInput',
@@ -480,8 +473,8 @@ export const scenarios = [
         value: {
           fileName: 'green_image.png',
           width: 500,
-          height: 500
-        }
+          height: 500,
+        },
       },
     ],
     expect: [
@@ -496,8 +489,8 @@ export const scenarios = [
         },
         text: el.form.error.image.image_dimension_size,
       },
-    ]
+    ],
   },
-]
+];
 
-export default scenarios;
+export default scenarios;