@digigov/form 2.0.0-6e3977bc → 2.0.0-834daea4

package/src/inputs/ImageInput/doc.mdx

@@ -0,0 +1,23 @@
+---
+title: Image Input
+---
+ 
+# Image input
+
+
+
+Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/Default.tsx" />
+
+### Display with max size
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/MaxSize.tsx" />
+
+### Display with min and max image dimensions
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx" />

package/src/inputs/ImageInput/index.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useCallback } from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import FileUpload from '@digigov/react-core/FileUpload';
-import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
-import CoreHint from '@digigov/react-core/Hint';
-import Button, { ButtonGroup } from '@digigov/ui/form/Button';
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import { Base } from '@digigov/react-core/Base';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { Base } from '@digigov/ui/utils/Base';
 export interface ImageProps {
   src?: any;
 }
@@ -20,7 +19,7 @@ export interface Limit {
 }
 
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
-  return <Base as='img' src={src} className="ds-image--ratio" />;
+  return <Base as="img" src={src} className="ds-image--ratio" />;
 });
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
@@ -72,13 +71,12 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
           {selectedImage !== null ? (
             <>
               <Paragraph>
-                <Base as='b'>{t('upload.image')}:</Base> {`${selectedImage?.name}`}
+                <Base as="b">{t('upload.image')}:</Base>{' '}
+                {`${selectedImage?.name}`}
               </Paragraph>
             </>
           ) : (
-            <CoreHint className="ds-dashed--border">
-              {t('upload.no_image')}
-            </CoreHint>
+            <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
           )}
           <>
             {selectedImage !== null && <Image src={imageUrl} />}

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.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',
@@ -27,7 +28,7 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
-  function WrappedInput({ name, control, type, extra, ...props }, ref: never) {
+  function WrappedInput({ name, control, type, extra, Field, ...props }, ref: never) {
     // eslint-disable-next-line prefer-const
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
@@ -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 (
@@ -72,8 +79,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>

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.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;
@@ -39,5 +39,4 @@ export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
   );
 };
 
-
 export default Label;

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

@@ -2,12 +2,14 @@ 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'> {
@@ -87,55 +89,55 @@ 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,
+                '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/{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,8 +1,7 @@
 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: {

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/lazy.js

@@ -29,6 +29,7 @@ export default {
   'Radio': lazy(() => import('@digigov/form/inputs').then((module)=> ({default: module['Radio']}))),
   'Select': lazy(() => import('@digigov/form/inputs/Select').then((module)=> ({default: module['Select']}))),
   'INPUTS_FIELDS': lazy(() => import('@digigov/form/inputs/inputsScenarios').then((module)=> ({default: module['INPUTS_FIELDS']}))),
+  'MultipleInput': lazy(() => import('@digigov/form/inputs/MultipleInput').then((module)=> ({default: module['MultipleInput']}))),
   'REMOVE_SPACES': lazy(() => import('@digigov/form/inputs/OtpInput').then((module)=> ({default: module['REMOVE_SPACES']}))),
   'RE_DIGIT': lazy(() => import('@digigov/form/inputs/OtpInput').then((module)=> ({default: module['RE_DIGIT']}))),
   'ControlledRadioButtonsGroup': lazy(() => import('@digigov/form/inputs/Radio').then((module)=> ({default: module['ControlledRadioButtonsGroup']}))),
@@ -50,6 +51,9 @@ export default {
   'Questions': lazy(() => import('@digigov/form/Questions/Questions').then((module)=> ({default: module['Questions']}))),
   'QuestionsContext': lazy(() => import('@digigov/form/Questions/QuestionsContext').then((module)=> ({default: module['QuestionsContext']}))),
   'AFM_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/afm').then((module)=> ({default: module['AFM_VALIDATOR']}))),
+  'DATE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/date').then((module)=> ({default: module['DATE_VALIDATOR']}))),
+  'EARLIER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/date').then((module)=> ({default: module['EARLIER_THAN_VALIDATOR']}))),
+  'LATER_THAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/date').then((module)=> ({default: module['LATER_THAN_VALIDATOR']}))),
   'FILE_MAX_SIZE_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/file').then((module)=> ({default: module['FILE_MAX_SIZE_VALIDATOR']}))),
   'IBAN_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/iban').then((module)=> ({default: module['IBAN_VALIDATOR']}))),
   'IMAGE_DIMENSION_VALIDATOR': lazy(() => import('@digigov/form/validators/utils/image').then((module)=> ({default: module['IMAGE_DIMENSION_VALIDATOR']}))),

package/src/registry.js

@@ -55,6 +55,7 @@ import * as _digigov_form_utils from '@digigov/form/utils';
 import * as _digigov_form_validators from '@digigov/form/validators';
 import * as _digigov_form_validators_types from '@digigov/form/validators/types';
 import * as _digigov_form_validators_utils_afm from '@digigov/form/validators/utils/afm';
+import * as _digigov_form_validators_utils_date from '@digigov/form/validators/utils/date';
 import * as _digigov_form_validators_utils_file from '@digigov/form/validators/utils/file';
 import * as _digigov_form_validators_utils_iban from '@digigov/form/validators/utils/iban';
 import * as _digigov_form_validators_utils_image from '@digigov/form/validators/utils/image';
@@ -142,6 +143,7 @@ export default {
   '@digigov/form/validators': lazyImport(_digigov_form_validators),
   '@digigov/form/validators/types': lazyImport(_digigov_form_validators_types),
   '@digigov/form/validators/utils/afm': lazyImport(_digigov_form_validators_utils_afm),
+  '@digigov/form/validators/utils/date': lazyImport(_digigov_form_validators_utils_date),
   '@digigov/form/validators/utils/file': lazyImport(_digigov_form_validators_utils_file),
   '@digigov/form/validators/utils/iban': lazyImport(_digigov_form_validators_utils_iban),
   '@digigov/form/validators/utils/image': lazyImport(_digigov_form_validators_utils_image),

package/src/validators/index.ts

@@ -1,6 +1,4 @@
 import { MutableRefObject, useMemo } from 'react';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import * as yup from 'yup';
 import { AnyObjectSchema, StringSchema } from 'yup';
 import { RequiredArraySchema } from 'yup/lib/array';
@@ -22,16 +20,12 @@ import {
   POSTALCODE_VALIDATOR,
   UUID4_VALIDATOR,
   IMAGE_DIMENSION_VALIDATOR,
+  DATE_VALIDATOR,
+  LATER_THAN_VALIDATOR,
+  EARLIER_THAN_VALIDATOR,
 } from '@digigov/form/validators/utils';
 import { INT_VALIDATOR } from '@digigov/form/validators/utils/int';
 import { NUMBER_VALIDATOR } from '@digigov/form/validators/utils/number';
-dayjs.extend(customParseFormat);
-
-const VALID_DATE_FORMATS = ['DD/MM/YYYY'];
-const DATE_CACHE = {};
-const getDate = (v) => {
-  return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);
-};
 
 export const getYUPTypeMap = (): Record<string, any> => {
   const yupTypeMap = {
@@ -150,69 +144,15 @@ export const getYUPTypeMap = (): Record<string, any> => {
       AnyObject,
       string | null | undefined
     > => yup.string().nullable(),
-    date: (field) => {
-      let simpleDate = yup
-        .string()
-        .nullable(true)
-        .test('date', 'form.error.date.invalid', function (value) {
-          if (!value) return true;
-          const date = getDate(value);
-          return date.isValid();
-        });
-      const params = field.extra || {};
-      if (params.max) {
-        let maxDate;
-        if (params.max === 'now') {
-          const today = new Date();
-          maxDate = new Date(today);
-        } else {
-          maxDate = getDate(params.max).toDate();
-        }
-        const maxNextDate = new Date(maxDate);
-        maxNextDate.setDate(maxDate.getDate() + 1);
-        simpleDate = simpleDate.test({
-          name: 'earlier-than',
-          message: {
-            key: 'form.error.date.earlier_than',
-            context: {
-              maxDate: maxNextDate.toLocaleDateString(),
-            },
-          },
-          test: function (value) {
-            if (!value) return true;
-            const date = getDate(value);
-            const isValid = +date.toDate() < +maxDate;
-            return isValid;
-          },
-        });
+    date: (field): yup.StringSchema => {
+      if (field?.extra?.min) {
+        return yup.string().test(LATER_THAN_VALIDATOR(field));
       }
-      if (params.min) {
-        let minDate;
-        if (params.min === 'now') {
-          const today = new Date();
-          minDate = new Date(today);
-        } else {
-          minDate = getDate(params.min).toDate();
-        }
-        const minPreviousDate = new Date(minDate);
-        minPreviousDate.setDate(minDate.getDate() - 1);
-        simpleDate = simpleDate.test({
-          name: 'later-than',
-          message: {
-            key: 'form.error.date.later_than',
-            context: {
-              minDate: minPreviousDate.toLocaleDateString(),
-            },
-          },
-          test: function (value) {
-            if (!value) return true;
-            const date = getDate(value);
-            const isValid = +date.toDate() > +minDate;
-            return isValid;
-          },
-        });
+      if (field?.extra?.max) {
+        return yup.string().test(EARLIER_THAN_VALIDATOR(field));
+      } else {
+        return yup.string().test(DATE_VALIDATOR);
       }
-      return simpleDate;
     },
   };
   return yupTypeMap;