@digigov/form 2.0.0-6e3977bc → 2.0.0-76ec20a0

package/src/inputs/Input/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Hint } from '@digigov/react-core/Hint';
-import { TextArea } from '@digigov/react-core/TextArea';
-import { TextInput } from '@digigov/react-core/TextInput';
+import { TextArea } from '@digigov/ui/form/TextArea';
+import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
+
 const TYPES_MAP = {
   string: 'text',
   int: 'text',
@@ -42,17 +43,23 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
 
     const getRemainingChars = (currentValue, limit) => {
       if (currentValue) {
-        return limit?.max - currentValue.length
+        return limit?.max - currentValue.length;
       }
       return limit?.max;
-    }
+    };
 
     const constructRemainingText = (currentValue, limit) => {
       const remainingChars = getRemainingChars(currentValue, limit);
-      let remainingText = Math.abs(remainingChars) === 1 ? t('form.info.text.character') : t('form.info.text.characters');
-      remainingText += remainingChars > 0 ? ` ${t('form.info.text.remaining')}.` : ` ${t('form.info.text.too_many')}.`;
+      let remainingText =
+        Math.abs(remainingChars) === 1
+          ? t('form.info.text.character')
+          : t('form.info.text.characters');
+      remainingText +=
+        remainingChars > 0
+          ? ` ${t('form.info.text.remaining')}.`
+          : ` ${t('form.info.text.too_many')}.`;
       return remainingText;
-    }
+    };
 
     if (multiline === true) {
       return (
@@ -62,18 +69,21 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             className={className}
             rows={rows}
             ref={ref}
+            id={name}
             {...{
               ...props,
               reset: undefined,
               required: undefined,
               type: fieldType,
+              Field: undefined,
             }}
           />
           {limit?.max && (
             <Hint display={'flex'}>
               {t('form.info.text.you_have')}
-              <Hint fontWeight='bold'>
-                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}&nbsp;
+              <Hint fontWeight="bold">
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+                &nbsp;
               </Hint>
               {constructRemainingText(currentValue, limit)}
             </Hint>
@@ -84,11 +94,17 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
       return (
         <TextInput
           name={name}
+          id={name}
           type={fieldType}
           data-type={type}
           className={className}
           ref={ref}
-          {...{ ...props, reset: undefined, required: undefined }}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+            Field: undefined,
+          }}
         />
       );
     }

package/src/inputs/Input/inputsInputScenarios.ts

@@ -38,9 +38,8 @@ const INPUTS_INPUT_FIELDS = [
     type: 'int',
     required: true,
     label: {
-    primary: 'Ποιά είναι η ηλικία σας;',
-    secondary:
-        'Καταχωρίστε την ηλικία σας',
+      primary: 'Ποιά είναι η ηλικία σας;',
+      secondary: 'Καταχωρίστε την ηλικία σας',
     },
   },
   {
@@ -73,9 +72,9 @@ const INPUTS_INPUT_FIELDS = [
     },
     required: true,
     extra: {
-    countries: ['gr'],
+      countries: ['gr'],
       phoneType: 'mobile',
-    }
+    },
   },
   {
     key: 'phone-number',
@@ -86,7 +85,7 @@ const INPUTS_INPUT_FIELDS = [
     required: true,
     extra: {
       countries: ['gr'],
-    }
+    },
   },
   {
     key: 'phone-number-landline',
@@ -98,7 +97,7 @@ const INPUTS_INPUT_FIELDS = [
     extra: {
       countries: ['gr'],
       phoneType: 'landline',
-    }
+    },
   },
   {
     key: 'postal-code',
@@ -106,300 +105,300 @@ const INPUTS_INPUT_FIELDS = [
     label: {
       primary: 'Συμπληρώστε τον ταχυδρομικό σας κώδικα',
     },
-    extra:{ countries: ['GR'] },
+    extra: { countries: ['GR'] },
     required: true,
   },
-]
-  
+];
+
 export const scenarios = [
-{
-  title: 'success fill for inputs Input',
-  describe: 'inputs Input scenario',
-  fields: INPUTS_INPUT_FIELDS,
-  fill: [
-    {
-      fieldKey: 'text',
-      value: 'aaaaaaa',
-    },
-    {
+  {
+    title: 'success fill for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [
+      {
+        fieldKey: 'text',
+        value: 'aaaaaaa',
+      },
+      {
         fieldKey: 'age',
         value: '12',
-    },
-    {
+      },
+      {
         fieldKey: 'email',
         value: 'example@mail.com',
-    },
-    {
+      },
+      {
         fieldKey: 'location',
         value: 'Location1',
-    },
-    {
+      },
+      {
         fieldKey: 'postal-code',
         value: '42100',
-    },
-    {
+      },
+      {
         fieldKey: 'afm',
         value: '094536469',
-    },
-    {
+      },
+      {
         fieldKey: 'desired-mount',
-        value: '12.5'
-    },
-    {
+        value: '12.5',
+      },
+      {
         fieldKey: 'mobile-phone',
-        value: '+306900000000'
-    },
-    {
+        value: '+306900000000',
+      },
+      {
         fieldKey: 'phone-number',
-        value: '6900000000'
-    },
-    {
+        value: '6900000000',
+      },
+      {
         fieldKey: 'phone-number-landline',
-        value: '2100000000'
-    },
-    {
+        value: '2100000000',
+      },
+      {
         fieldKey: 'iban',
-        value: 'GR3201122267115323218375195'
-    },
-    {
+        value: 'GR3201122267115323218375195',
+      },
+      {
         fieldKey: 'uuid4',
         value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',
-    }
-  ],
-  expect: [
-    {
+      },
+    ],
+    expect: [
+      {
         type: 'success',
         fieldKey: 'age',
         text: el.form.error.required,
-    },
-    {
-      type: 'success',
-      fieldKey: 'text',
-      text: el.form.error.required,
-    },
-    {
+      },
+      {
+        type: 'success',
+        fieldKey: 'text',
+        text: el.form.error.required,
+      },
+      {
         type: 'success',
         fieldKey: 'email',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'location',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'postal-code',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'afm',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'desired-mount',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'mobile-phone',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'phone-number',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'phone-number-landline',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'iban',
         text: el.form.error.required,
-    },
-    {
+      },
+      {
         type: 'success',
         fieldKey: 'uuid4',
         text: el.form.error.required,
-    },
-  ]
-},
-{
-  title: 'empty fill for inputs Input',
-  describe: 'inputs Input scenario',
-  fields: INPUTS_INPUT_FIELDS,
-  fill: [],
-  expect: [
-  {
-      type: 'error',
-      fieldKey: 'age',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'email',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'location',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'postal-code',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'afm',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'desired-mount',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'mobile-phone',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'phone-number',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'phone-number-landline',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'iban',
-      text: el.form.error.required,
-  },
-  {
-      type: 'error',
-      fieldKey: 'uuid4',
-      text: el.form.error.required,
-  },
-  ]
-},
-{
-  title: 'incorrect types for inputs Input',
-  describe: 'inputs Input scenario',
-  fields: INPUTS_INPUT_FIELDS,
-  fill: [
-  {
-      fieldKey: 'age',
-      value: 'aa',
-  },
-  {
-      fieldKey: 'email',
-      value: '23232',
-  },
-  {
-      fieldKey: 'location',
-      value: '23232',
-  },
-  {
-      fieldKey: 'postal-code',
-      value: 'aaaaa',
-  },
-  {
-      fieldKey: 'afm',
-      value: 'aaaaaaaaa',
-  },
-  {
-      fieldKey: 'desired-mount',
-      value: 'aaa'
-  },
-  {
-      fieldKey: 'mobile-phone',
-      value: '+33690000000'
-  },
-  {
-      fieldKey: 'phone-number',
-      value: '000000000'
+      },
+    ],
   },
   {
-      fieldKey: 'phone-number-landline',
-      value: '000000000'
-  },
-  {
-      fieldKey: 'iban',
-      value: 'aaaaaa'
-  },
-  {
-      fieldKey: 'uuid4',
-      value: 'aaaaaa',
-  }
-  ],
-  expect: [
-  {
-      type: 'error',
-      fieldKey: 'age',
-      text: el.form.error.number,
-  },
-  {
-      type: 'error',
-      fieldKey: 'email',
-      text: el.form.error.email,
-  },
-  {
-      type: 'success',
-      fieldKey: 'location',
-      text: el.form.error.string,
-  },
-  {
-      type: 'error',
-      fieldKey: 'postal-code',
-      text: el.form.error.postalCode,
-  },
-  {
-      type: 'error',
-      fieldKey: 'afm',
-      text: el.form.error.afm,
-  },
-  {
-      type: 'error',
-      fieldKey: 'desired-mount',
-      text: el.form.error.number,
-  },
-  {
-      type: 'error',
-      fieldKey: 'mobile-phone',
-      text: el.form.error.mobile_phone,
-  },
-  {
-      type: 'error',
-      fieldKey: 'phone-number',
-      text: el.form.error.phone_number,
-  },
-  {
-      type: 'error',
-      fieldKey: 'phone-number-landline',
-      text: el.form.error.landline,
-  },
-  {
-      type: 'error',
-      fieldKey: 'iban',
-      text: el.form.error.iban,
+    title: 'empty fill for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'age',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'email',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'location',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal-code',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'afm',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'desired-mount',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'iban',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'uuid4',
+        text: el.form.error.required,
+      },
+    ],
   },
   {
-      type: 'error',
-      fieldKey: 'uuid4',
-      text: el.form.error.uuid4,
+    title: 'incorrect types for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [
+      {
+        fieldKey: 'age',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'email',
+        value: '23232',
+      },
+      {
+        fieldKey: 'location',
+        value: '23232',
+      },
+      {
+        fieldKey: 'postal-code',
+        value: 'aaaaa',
+      },
+      {
+        fieldKey: 'afm',
+        value: 'aaaaaaaaa',
+      },
+      {
+        fieldKey: 'desired-mount',
+        value: 'aaa',
+      },
+      {
+        fieldKey: 'mobile-phone',
+        value: '+33690000000',
+      },
+      {
+        fieldKey: 'phone-number',
+        value: '000000000',
+      },
+      {
+        fieldKey: 'phone-number-landline',
+        value: '000000000',
+      },
+      {
+        fieldKey: 'iban',
+        value: 'aaaaaa',
+      },
+      {
+        fieldKey: 'uuid4',
+        value: 'aaaaaa',
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'age',
+        text: el.form.error.number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'email',
+        text: el.form.error.email,
+      },
+      {
+        type: 'success',
+        fieldKey: 'location',
+        text: el.form.error.string,
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal-code',
+        text: el.form.error.postalCode,
+      },
+      {
+        type: 'error',
+        fieldKey: 'afm',
+        text: el.form.error.afm,
+      },
+      {
+        type: 'error',
+        fieldKey: 'desired-mount',
+        text: el.form.error.number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.mobile_phone,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number',
+        text: el.form.error.phone_number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.landline,
+      },
+      {
+        type: 'error',
+        fieldKey: 'iban',
+        text: el.form.error.iban,
+      },
+      {
+        type: 'error',
+        fieldKey: 'uuid4',
+        text: el.form.error.uuid4,
+      },
+    ],
   },
-  ]
-},
-]
+];
 
-export default scenarios
+export default scenarios;

package/src/inputs/Label/Label.stories.js

@@ -1,7 +1,10 @@
 import Label from '@digigov/form/inputs/Label';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Label',
   component: Label,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Label',
 };
 export { Default } from '@digigov/form/inputs/Label/__stories__/Default';

package/src/inputs/Label/__stories__/Default.tsx

@@ -4,7 +4,7 @@ import Field from '@digigov/form/Field';
 import Label from '@digigov/form/inputs/Label';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);