@digigov/form 2.0.0-daaf7bdf → 2.0.0-e20fed09

package/src/inputs/Input/index.test.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+import { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 import { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
+import { Email } from '@digigov/form/inputs/Input/__stories__/Email';
 import { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
 import { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 import { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
@@ -10,6 +12,7 @@ import { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone'
 import { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
 import { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
 import { String } from '@digigov/form/inputs/Input/__stories__/String';
+import { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
 import { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';
 
 test('renders the All Input variants', async ({ mount, page }) => {
@@ -19,9 +22,15 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="AFM">
       <AFM />
     </TestVariant>
+    <TestVariant title="AMKA">
+      <AMKA />
+    </TestVariant>
     <TestVariant title="Boolean">
       <Boolean />
     </TestVariant>
+    <TestVariant title="Email">
+      <Email />
+    </TestVariant>
     <TestVariant title="IBAN">
       <IBAN />
     </TestVariant>
@@ -43,6 +52,9 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="String">
       <String />
     </TestVariant>
+    <TestVariant title="StringWithTrimValidation">
+      <StringWithTrimValidation />
+    </TestVariant>
     <TestVariant title="TextWithLimit">
       <TextWithLimit />
     </TestVariant>
@@ -50,6 +62,10 @@ test('renders the All Input variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Input/index.tsx

@@ -1,18 +1,21 @@
 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',
+  password: 'password',
   int: 'text',
   text: 'text',
   date: 'date',
 };
 
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+export interface InputProps
+  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
   extra?: {
     fullWidth?: boolean;
     multiline?: boolean;
@@ -24,10 +27,12 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
       max?: number;
     };
   };
+  Field?: UncontrolledFieldProps['Field'];
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
   function WrappedInput({ name, control, type, extra, ...props }, ref: never) {
+    delete props['Field'];
     // eslint-disable-next-line prefer-const
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
@@ -42,17 +47,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,6 +73,7 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             className={className}
             rows={rows}
             ref={ref}
+            id={name}
             {...{
               ...props,
               reset: undefined,
@@ -72,8 +84,9 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           {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 +97,16 @@ 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,
+          }}
         />
       );
     }

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);

package/src/inputs/Label/doc.mdx

@@ -0,0 +1,14 @@
+---
+title: Label
+---
+ 
+# Label
+
+
+The Label component is used to display descriptive text for form sections or fields. It supports both primary and secondary text, allowing for a title and optional subtitle.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/Label/__stories__/Default.tsx" />

package/src/inputs/Label/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Label variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Label/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FieldLabelProps } from '@digigov/form/types';
-import Hint from '@digigov/react-core/Hint';
-import LabelTitle from '@digigov/react-core/LabelTitle';
+import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface FieldOptionProps {
   label?: FieldLabelProps;
@@ -16,9 +16,6 @@ export interface FieldOptionProps {
 export interface LabelProps {
   primary?: string;
   secondary?: string;
-}
-
-export interface LabelProps {
   className?: string;
   value?: string;
   label?: FieldLabelProps;
@@ -39,5 +36,4 @@ export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
   );
 };
 
-
 export default Label;

package/src/inputs/OtpInput/OtpInput.stories.js

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

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

@@ -14,7 +14,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

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

@@ -13,11 +13,4 @@ on a computer system or other digital device.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/OtpInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/OtpInput/__stories__/Default.tsx" />

package/src/inputs/OtpInput/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All OtpInput variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/OtpInput/index.tsx

@@ -40,7 +40,8 @@ export function useOtp(onChange, maxLength) {
   }, []);
 
   const focusToPrevInput = useCallback((target: HTMLElement) => {
-    const previousElement = target.previousElementSibling as HTMLInputElement | null;
+    const previousElement =
+      target.previousElementSibling as HTMLInputElement | null;
     if (previousElement) {
       previousElement.focus();
     }
@@ -130,6 +131,7 @@ export const OtpInput = ({ name, maxLength = 6, ...props }) => {
       {otp.otpValues.map((digit, idx) => (
         <SingleCharacterInputPart
           name={`${name}-${idx}`}
+          id={`${name}-${idx}`}
           type="text"
           key={idx}
           autoComplete="one-time-code"

package/src/inputs/Radio/Radio.stories.js

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

package/src/inputs/Radio/__stories__/Conditional.tsx

@@ -85,7 +85,7 @@ const fields: FieldSpec[] = [
   },
 ];
 
-export const Conditional = () => (
+export const Conditional = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

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

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

package/src/inputs/Radio/__stories__/WithDivider.tsx

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

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

@@ -10,24 +10,14 @@ Radios are used to let a user select one option of a limited number of choices.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Radio/__stories__/Default.tsx" />
+
 
 ### Conditional
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="Conditional.tsx"
-/>
+<code src="@digigov/form/inputs/Radio/__stories__/Conditional.tsx" />
+
 
 ### With divider
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="WithDivider.tsx"
-/>
+<code src="@digigov/form/inputs/Radio/__stories__/WithDivider.tsx" />

package/src/inputs/Radio/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All Radio variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Radio/index.tsx

@@ -2,18 +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 { Base } from '@digigov/react-core/Base';
-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'>>;
@@ -87,55 +89,56 @@ export const ControlledRadioButtonsGroup: React.FC<
   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,
-                  '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>
-    );
-  };
+  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>
+  );
+};
 
 export default RadioButtonsGroup;

package/src/inputs/Select/Select.stories.js

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

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

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

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.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Select variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/inputs/Select/index.tsx

@@ -1,14 +1,18 @@
 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'> {
+export interface SelectProps
+  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
+  Field?: UncontrolledFieldProps['Field'];
 }
 
 export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
@@ -16,16 +20,23 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
     { name, extra: { options, className }, disabled, ...props },
     ref: never
   ) {
+    delete props.Field;
     return (
       <SelectContainer
         className={className}
         ref={ref}
         name={name}
+        id={name}
         disabled={disabled}
-        {...{ ...props, reset: undefined, required: undefined }}
+        {...{
+          ...props,
+          reset: undefined,
+          error: undefined,
+          required: undefined,
+        }}
       >
-        {options.map(({ value, label }) => (
-          <SelectOption key={value} value={value}>
+        {options.map(({ value, label }, index) => (
+          <SelectOption key={index} value={value}>
             {label && label.primary ? label.primary : value}
           </SelectOption>
         ))}