@digigov/form 2.0.0-6e3977bc → 2.0.0-6eea4edb

package/src/inputs/Input/doc.mdx

@@ -0,0 +1,56 @@
+---
+title: Input
+---
+ 
+# Input
+
+The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user; 
+a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
+
+## How to use
+
+### String
+
+<code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
+
+### Boolean
+
+<code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
+
+### AFM
+
+<code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
+
+
+### IBAN
+
+<code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
+
+
+### Integer
+
+<code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
+
+
+### Landline number
+
+<code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
+
+
+### Mobile phone 
+
+<code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
+
+
+### Phone number
+
+<code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
+
+
+### Postal code 
+
+<code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
+
+### Text with character limit 
+
+<code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />

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,23 @@
 import React from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 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 type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { omit } from '@digigov/form/utils';
+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,6 +29,8 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
       max?: number;
     };
   };
+  Field?: UncontrolledFieldProps['Field'];
+  resetField: UseFormReturn['resetField'];
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
@@ -42,17 +49,25 @@ 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;
-    }
+    };
+
+    const transformedProps = omit(props, ['Field', 'resetField']);
 
     if (multiline === true) {
       return (
@@ -61,9 +76,10 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             name={name}
             className={className}
             rows={rows}
-            ref={ref}
+            ref={ref as React.RefObject<HTMLTextAreaElement>}
+            id={name}
             {...{
-              ...props,
+              ...transformedProps,
               reset: undefined,
               required: undefined,
               type: fieldType,
@@ -72,9 +88,10 @@ 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>
+              <strong>
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+                &nbsp;
+              </strong>
               {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
@@ -84,11 +101,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 }}
+          ref={ref as React.RefObject<HTMLInputElement>}
+          {...{
+            ...transformedProps,
+            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 type { FieldLabelProps } from '@digigov/form/types';
+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();
     }
@@ -119,39 +120,49 @@ export function useOtp(onChange, maxLength) {
   };
 }
 
-const SingleCharacterInputPart = ({ ...props }) => {
-  return <SingleCharacterInput {...props} />;
-};
+const SingleCharacterInputPart = React.forwardRef<
+  HTMLInputElement,
+  Record<string, any>
+>(({ ...props }, ref) => {
+  return <SingleCharacterInput {...props} ref={ref} />;
+});
+SingleCharacterInputPart.displayName = 'SingleCharacterInputPart';
 
-export const OtpInput = ({ name, maxLength = 6, ...props }) => {
-  const otp = useOtp(props.onChange, maxLength);
-  return (
-    <SingleCharacterInputs>
-      {otp.otpValues.map((digit, idx) => (
-        <SingleCharacterInputPart
-          name={`${name}-${idx}`}
-          type="text"
-          key={idx}
-          autoComplete="one-time-code"
-          pattern="\d{1}"
-          maxLength={maxLength}
-          value={digit}
-          disabled={props.disabled}
-          aria-required={props['aria-required']}
-          onChange={(e) => otp.handleOtpChange(e, idx)}
-          onInput={(e) => {
-            if (e.target.value === digit) {
-              otp.handleOtpChange(e, idx);
-            }
-          }}
-          onKeyDown={(e) => otp.handleKeyDown(e, idx)}
-          onFocus={otp.handleFocus}
-          onPaste={otp.handlePaste}
-          error={!digit ? props.error : false}
-        />
-      ))}
-    </SingleCharacterInputs>
-  );
-};
+export const OtpInput = React.forwardRef<HTMLInputElement, Record<string, any>>(
+  ({ name, maxLength = 6, ...props }, ref) => {
+    const otp = useOtp(props.onChange, maxLength);
+    return (
+      <SingleCharacterInputs>
+        {otp.otpValues.map((digit, idx) => (
+          <SingleCharacterInputPart
+            ref={idx === 0 ? ref : null}
+            name={`${name}-${idx}`}
+            id={`${name}-${idx}`}
+            type="text"
+            key={idx}
+            autoComplete="one-time-code"
+            pattern="\d{1}"
+            maxLength={maxLength}
+            value={digit}
+            disabled={props.disabled}
+            aria-required={props['aria-required']}
+            onChange={(e) => otp.handleOtpChange(e, idx)}
+            onInput={(e) => {
+              if (e.target.value === digit) {
+                otp.handleOtpChange(e, idx);
+              }
+            }}
+            onKeyDown={(e) => otp.handleKeyDown(e, idx)}
+            onFocus={otp.handleFocus}
+            onPaste={otp.handlePaste}
+            error={!digit ? props.error : false}
+          />
+        ))}
+      </SingleCharacterInputs>
+    );
+  }
+);
+
+OtpInput.displayName = 'OtpInput';
 
 export default OtpInput;

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