@digigov/form 2.0.0-rc.7 → 2.0.2

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,9 +1,12 @@
 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 * from '@digigov/form/inputs/Radio/__stories__/Default';
-export * from '@digigov/form/inputs/Radio/__stories__/WithDivider';
-export * from '@digigov/form/inputs/Radio/__stories__/Conditional';
+export { Default } from '@digigov/form/inputs/Radio/__stories__/Default';
+export { WithDivider } from '@digigov/form/inputs/Radio/__stories__/WithDivider';
+export { Conditional } from '@digigov/form/inputs/Radio/__stories__/Conditional';

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import FormBuilder, { Field } from '@digigov/form';
+import { FieldSpec } from '@digigov/form/types';
 import { Button } from '@digigov/ui/form/Button';
 
 const fields: FieldSpec[] = [
@@ -84,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/{cjs/inputs/Radio/index.mdx → src/inputs/Radio/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/src/inputs/Radio/__stories__/Default.tsx" />
+
 
 ### Conditional
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="Conditional.tsx"
-/>
+<code src="@digigov/form/src/inputs/Radio/__stories__/Conditional.tsx" />
+
 
 ### With divider
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="WithDivider.tsx"
-/>
+<code src="@digigov/form/src/inputs/Radio/__stories__/WithDivider.tsx" />

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Conditional } from '@digigov/form/inputs/Radio/__stories__/Conditional';
+import { Default } from '@digigov/form/inputs/Radio/__stories__/Default';
+import { WithDivider } from '@digigov/form/inputs/Radio/__stories__/WithDivider';
+
+test('renders the All Radio variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Conditional">
+      <Conditional />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithDivider">
+      <WithDivider />
+    </TestVariant>
+  </div>
+  )
+  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

@@ -1,21 +1,27 @@
 import React from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 import { useWatch } from 'react-hook-form';
-import { Field } from '@digigov/form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { RadioConditional } from '@digigov/react-core/RadioConditional';
-import Hint from '@digigov/react-core/Hint';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { omit } from '@digigov/form/utils';
+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'>>;
+  resetField: UseFormReturn['resetField'];
 }
 
 export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
@@ -24,12 +30,13 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
   register,
   extra: { options, className },
   disabled,
+  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,
@@ -39,16 +46,90 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
           selected,
           ...option
         }) => (
-          <div key={`${name}.${v}`}>
+          <Base as="div" key={`${name}.${v}`}>
             <RadioItem
               {...register(name)}
+              id={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               {...option}
+              {...{
+                ...omit(props, ['resetField']),
+                reset: undefined,
+                required: undefined,
+                error: undefined,
+                'aria-describedby': undefined,
+                type: 'radio',
+              }}
+            >
+              {label && label.primary && (
+                <Base as="span">{t(label.primary) || v}</Base>
+              )}
+              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            </RadioItem>
+            {selected && selected()}
+            {currentValue === v && show && Field && (
+              <RadioConditional>
+                {show.map((fieldName) => (
+                  <Field name={fieldName} key={fieldName} />
+                ))}
+              </RadioConditional>
+            )}
+          </Base>
+        )
+      )}
+    </RadioContainer>
+  );
+};
+export const ControlledRadioButtonsGroup = React.forwardRef<
+  HTMLInputElement,
+  RadioButtonsGroupProps & { onChange: (e: any) => void; value: any }
+>(function ControlledRadioButtonsGroup(
+  {
+    name,
+    extra: { options, className },
+    disabled,
+    onChange,
+    value,
+    Field,
+    ...props
+  },
+  ref
+) {
+  const currentValue: string | undefined = value;
+  const { t } = useTranslation();
+  return (
+    <RadioContainer className={className} id={name}>
+      {options.map(
+        (
+          {
+            label,
+            value: v,
+            show,
+            disabled: optionDisabled,
+            selected,
+            ...option
+          },
+          index
+        ) => (
+          <React.Fragment key={`${name}.${v}`}>
+            <RadioItem
+              ref={index === 0 ? ref : undefined}
+              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',
               }}
@@ -64,11 +145,11 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 ))}
               </RadioConditional>
             )}
-          </div>
+          </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 * from '@digigov/form/inputs/Select/__stories__/Default';
+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/src/inputs/Select/__stories__/Default.tsx" />

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/form/inputs/Select/__stories__/Default';
+
+test('renders the All Select variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  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,21 @@
 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 type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { omit } from '@digigov/form/utils';
+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'];
+  resetField: UseFormReturn['resetField'];
 }
 
 export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
@@ -21,11 +28,17 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
         className={className}
         ref={ref}
         name={name}
+        id={name}
         disabled={disabled}
-        {...{ ...props, reset: undefined, required: undefined }}
+        {...{
+          ...omit(props, ['Field', 'resetField']),
+          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>
         ))}

package/src/inputs/registry.ts

@@ -0,0 +1,86 @@
+import { type FieldComponentItem } from '@digigov/form/Field/types';
+import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
+import Checkboxes from '@digigov/form/inputs/Checkboxes';
+import DateInput from '@digigov/form/inputs/DateInput';
+import DateTimeInput from '@digigov/form/inputs/DateTimeInput';
+import FileInput from '@digigov/form/inputs/FileInput';
+import ImageInput from '@digigov/form/inputs/ImageInput';
+import Input from '@digigov/form/inputs/Input';
+import OtpInput from '@digigov/form/inputs/OtpInput';
+import Radio, { ControlledRadioButtonsGroup } from '@digigov/form/inputs/Radio';
+import Select from '@digigov/form/inputs/Select';
+
+export type FieldComponentRegistry = Record<string, FieldComponentItem>;
+
+export const FIELD_COMPONENTS: FieldComponentRegistry = {
+  text: {
+    component: Input,
+  },
+  string: {
+    component: Input,
+  },
+  file: {
+    wrapper: 'fieldset',
+    component: FileInput,
+    // controlled: true,
+  },
+  image: {
+    wrapper: 'fieldset',
+    component: ImageInput,
+    controlled: true,
+  },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput,
+  },
+  datetime: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateTimeInput,
+  },
+  otp: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: OtpInput,
+  },
+  'choice:multiple': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: Checkboxes,
+  },
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: false,
+    component: Radio,
+  },
+};
+
+export const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
+  Select: {
+    component: Select,
+    controlled: false,
+  },
+  AutoComplete: {
+    component: AutoCompleteInput,
+    controlled: true,
+    wrapper: 'fieldset',
+  },
+};
+
+export const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry = {
+  ...FIELD_COMPONENTS,
+  'choice:single': {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: ControlledRadioButtonsGroup,
+  },
+  text: {
+    component: Input,
+    controlled: true,
+  },
+  string: {
+    component: Input,
+    controlled: true,
+  },
+};

package/src/installation.mdx

@@ -7,12 +7,9 @@ sidebar_label: Installation
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
-import LeadText from '@site/src/components/LeadText';
 
-<LeadText>
-  This page will help you install Digigov Form depending on the framework that
-  you use and the application architecture.
-</LeadText>
+This page will help you install Digigov Form depending on the framework that
+you use and the application architecture.
 
 We assume that your stack uses some of the following tools.
 

package/src/internal.ts

@@ -1,34 +1,5 @@
-export { default as Field } from '@digigov/form/Field';
-export * from '@digigov/form/Field';
-export { default as FieldArray } from '@digigov/form/FieldArray';
-export * from '@digigov/form/FieldArray';
-export { default as FieldConditional } from '@digigov/form/Field/FieldConditional';
-export * from '@digigov/form/Field/FieldConditional';
-export { default as Fieldset } from '@digigov/form/Fieldset';
-export * from '@digigov/form/Fieldset';
-export { default as FormBuilder } from '@digigov/form/FormBuilder';
-export * from '@digigov/form/FormBuilder';
-export { Step } from '@digigov/form/Questions/Step';
-export * from '@digigov/form/Questions/Step';
-export { default as Questions } from '@digigov/form/Questions';
-export * from '@digigov/form/Questions';
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export * from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export * from '@digigov/form/inputs/DateInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export * from '@digigov/form/inputs/FileInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export * from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export * from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export * from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';
+export { Field } from '@digigov/form/Field';
+export { Fieldset } from '@digigov/form/Fieldset';
 export * from '@digigov/form/FormContext';
-export * from '@digigov/form/inputs/Select';
-export * from '@digigov/form/inputs';
-export * from '@digigov/form/internal';
 export * from '@digigov/form/types';
-export * from '@digigov/form/utils';
 export * from '@digigov/form/validators';