@digigov/form 2.0.0-rc.21 → 2.0.0-rc.22

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

@@ -50,6 +50,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;

package/src/validators/utils/date.ts

@@ -0,0 +1,107 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { FieldSpec } from '@digigov/form/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+
+dayjs.extend(customParseFormat);
+
+const VALID_DATE_FORMATS = ['DD/MM/YYYY'];
+const DATE_CACHE = {};
+
+const getDate = (v: string) => {
+  return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);
+};
+
+// Function to check partial date completion
+const checkPartialDate = (value: string) => {
+  console.log("value.split('/')", value.split('/'));
+  const [day, month, year] = value.split('/');
+  if (day && !month && !year) {
+    return 'form.error.date.invalid_month_year';
+  }
+  if (!day && month && !year) {
+    return 'form.error.date.invalid_day_year';
+  }
+  if (!day && !month && year) {
+    return 'form.error.date.invalid_day_month';
+  }
+  if (day && month && !year) {
+    return 'form.error.date.invalid_year';
+  }
+  if (day && !month && year) {
+    return 'form.error.date.invalid_month';
+  }
+  if (!day && month && year) {
+    return 'form.error.date.invalid_day';
+  } else {
+    return 'form.error.date.invalid';
+  }
+};
+
+export const LATER_THAN_VALIDATOR = (field: FieldSpec): ValidatorSchema => {
+  let minDate;
+  const params = field.extra || {};
+  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);
+  return {
+    name: 'later-than',
+    message: {
+      key: 'form.error.date.later_than',
+      context: {
+        minDate: minPreviousDate.toLocaleDateString(),
+      },
+    },
+    test: function (value: string) {
+      if (!value) return true;
+      const date = getDate(value);
+      const isValid = +date.toDate() > +minDate;
+      return isValid;
+    },
+  };
+};
+
+export const EARLIER_THAN_VALIDATOR = (field: FieldSpec): ValidatorSchema => {
+  let maxDate;
+  const params = field.extra || {};
+  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);
+  return {
+    name: 'earlier-than',
+    message: {
+      key: 'form.error.date.earlier_than',
+      context: {
+        maxDate: maxNextDate.toLocaleDateString(),
+      },
+    },
+    test: function (value: string) {
+      if (!value) return true;
+      const date = getDate(value);
+      const isValid = +date.toDate() < +maxDate;
+      return isValid;
+    },
+  };
+};
+
+export const DATE_VALIDATOR = {
+  name: 'date-validator',
+  message: (v): string => {
+    return checkPartialDate(v.value);
+  },
+  test: function (value: string) {
+    if (!value) return true;
+    const date = getDate(value);
+    return date.isValid();
+  },
+};

package/src/validators/utils/index.ts

@@ -11,6 +11,7 @@ export * from '@digigov/form/validators/utils/phone';
 export * from '@digigov/form/validators/utils/postal_code';
 export * from '@digigov/form/validators/utils/uuid4';
 export * from '@digigov/form/validators/utils/text_limit';
+export * from '@digigov/form/validators/utils/date';
 
 export function getYupField(field: FieldSpec, yupTypeMap: Record<string, any>) {
   const yupField = yupTypeMap[field?.type || 'string'] || yupTypeMap['string'];

package/validators/index.js

@@ -1,6 +1,4 @@
 import { useMemo } from "react";
-import dayjs from "dayjs";
-import customParseFormat from "dayjs/plugin/customParseFormat";
 import * as yup from "yup";
 import {
   getYupObjectShape,
@@ -13,16 +11,13 @@ import {
   TEXT_LIMIT_VALIDATOR,
   POSTALCODE_VALIDATOR,
   UUID4_VALIDATOR,
-  IMAGE_DIMENSION_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);
-};
 const getYUPTypeMap = () => {
   const yupTypeMap = {
     file: (field) => {
@@ -97,65 +92,14 @@ const getYUPTypeMap = () => {
     "choice:multiple": () => yup.array().of(yup.string()).nullable(),
     "choice:single": () => 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 = /* @__PURE__ */ 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;
-          }
-        });
+      if (field?.extra?.min) {
+        return yup.string().test(LATER_THAN_VALIDATOR(field));
       }
-      if (params.min) {
-        let minDate;
-        if (params.min === "now") {
-          const today = /* @__PURE__ */ 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;