@digigov/form 2.0.0-a32ad9b2 → 2.0.0-a402a664

package/src/inputs/Checkboxes/index.tsx

@@ -85,9 +85,9 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 ...props,
                 reset: undefined,
                 defaultValue: undefined,
+                error: undefined,
                 onBlur: undefined,
                 required: undefined,
-                Field: undefined,
                 'aria-describedby': undefined,
                 type: 'checkbox',
               }}

package/src/inputs/DateInput/DateInput.stories.js

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

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

@@ -14,7 +14,7 @@ const fields = [
   } as const,
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder onSubmit={() => console.log('kati')}>
     {fields.map(({ key, ...field }) => {
       return <Field {...field} name={key} key={key} />;

package/src/inputs/DateInput/index.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useFormContext } from '@digigov/form/FormContext';
 import {
   DateInputContainer,
   DateInputItem,
@@ -16,22 +17,26 @@ export interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   };
 }
 
-function useDate(value, onChange) {
+function useDate(name, value, form) {
   const [year, month, day] = useMemo(() => {
     if (!value || value.length === 0) {
-      onChange('');
+      update('');
       return ['', '', ''];
     }
     const [day, month, year] = value.split('/');
     return [year, month, day];
   }, [value]);
 
+  function update(value) {
+    form.setValue(name, value, { shouldValidate: false });
+  }
+
   function set(year, month, day) {
     const value = `${day || ''}/${month || ''}/${year || ''}`;
     if (!year && !month && !day) {
-      onChange(null);
+      update('');
     } else {
-      onChange(value);
+      update(value);
     }
   }
 
@@ -56,6 +61,12 @@ function useDate(value, onChange) {
     set(year, month, val);
   }
 
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
+
   return {
     day,
     month,
@@ -63,6 +74,7 @@ function useDate(value, onChange) {
     setYear,
     setMonth,
     setDay,
+    trigger,
   };
 }
 
@@ -90,14 +102,15 @@ export const DateInput = ({ name, ...props }) => {
     return props.value;
   }, [props.value, initial]);
 
-  const date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  const form = useFormContext();
+  const date = useDate(name, value || makeDate(props.defaultValue), form);
 
   return (
     <DateInputContainer>
       <DatePart
         label={t('form.label.day')}
         onChange={date.setDay}
-        onBlur={(e) => date.setDay(e, true)}
+        onBlur={date.trigger}
         value={date.day}
         width={2}
         name={`${name}-day`}
@@ -110,7 +123,7 @@ export const DateInput = ({ name, ...props }) => {
       <DatePart
         label={t('form.label.month')}
         onChange={date.setMonth}
-        onBlur={(e) => date.setMonth(e, true)}
+        onBlur={date.trigger}
         value={date.month}
         width={2}
         name={`${name}-month`}
@@ -123,6 +136,7 @@ export const DateInput = ({ name, ...props }) => {
       <DatePart
         label={t('form.label.year')}
         onChange={date.setYear}
+        onBlur={date.trigger}
         value={date.year}
         width={4}
         name={`${name}-year`}

package/src/inputs/DateTimeInput/DateTimeInput.stories.js

@@ -1,8 +1,11 @@
 import { Default } from './__stories__/Default';
+import doc from './doc.mdx?raw';
 
 export default {
   title: 'Form/Inputs/DateTimeInput',
   component: Default,
+  tags: ['autodocs'],
+  markdown: doc,
 };
 
 export { Default };

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

@@ -14,7 +14,7 @@ const fields = [
   } as const,
 ];
 
-export const Default = () => (
+export const Default = (_: any) => (
   <FormBuilder onSubmit={() => console.log('kati')}>
     {fields.map(({ key, ...field }) => {
       return <Field {...field} name={key} key={key} />;

package/src/inputs/DateTimeInput/index.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useFormContext } from '@digigov/form/FormContext';
 import {
   DateInputContainer,
   DateInputItem,
@@ -17,10 +18,10 @@ export interface DateTimeInputProps
   };
 }
 
-function useDateTime(value, onChange) {
+function useDateTime(name, value, form) {
   const [year, month, day, hours, minutes] = useMemo(() => {
     if (!value || value.length === 0) {
-      onChange('');
+      update('');
       return ['', '', '', '', ''];
     }
     const [datePart, timePart] = value.split(' ');
@@ -29,15 +30,19 @@ function useDateTime(value, onChange) {
     return [year, month, day, hours, minutes];
   }, [value]);
 
+  function update(value) {
+    form.setValue(name, value, { shouldValidate: false });
+  }
+
   function set(year, month, day, hours, minutes) {
     const datePart = `${day || ''}/${month || ''}/${year || ''}`;
     const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';
     const value = timePart ? `${datePart} ${timePart}` : datePart;
 
     if (!year && !month && !day && !hours && !minutes) {
-      onChange(null);
+      update('');
     } else {
-      onChange(value);
+      update(value);
     }
   }
 
@@ -78,6 +83,12 @@ function useDateTime(value, onChange) {
     set(year, month, day, hours, val);
   }
 
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
+
   return {
     day,
     month,
@@ -89,6 +100,7 @@ function useDateTime(value, onChange) {
     setDay,
     setHours,
     setMinutes,
+    trigger,
   };
 }
 
@@ -116,9 +128,11 @@ export const DateTimeInput = ({ name, ...props }) => {
     return props.value;
   }, [props.value, initial]);
 
+  const form = useFormContext();
   const datetime = useDateTime(
+    name,
     value || makeDateTime(props.defaultValue),
-    props.onChange
+    form
   );
 
   return (
@@ -126,7 +140,7 @@ export const DateTimeInput = ({ name, ...props }) => {
       <DateTimePart
         label={t('form.label.day')}
         onChange={datetime.setDay}
-        onBlur={(e) => datetime.setDay(e, true)}
+        onBlur={datetime.trigger}
         value={datetime.day}
         width={2}
         name={`${name}-day`}
@@ -139,7 +153,7 @@ export const DateTimeInput = ({ name, ...props }) => {
       <DateTimePart
         label={t('form.label.month')}
         onChange={datetime.setMonth}
-        onBlur={(e) => datetime.setMonth(e, true)}
+        onBlur={datetime.trigger}
         value={datetime.month}
         width={2}
         name={`${name}-month`}
@@ -152,6 +166,7 @@ export const DateTimeInput = ({ name, ...props }) => {
       <DateTimePart
         label={t('form.label.year')}
         onChange={datetime.setYear}
+        onBlur={datetime.trigger}
         value={datetime.year}
         width={4}
         name={`${name}-year`}
@@ -164,7 +179,7 @@ export const DateTimeInput = ({ name, ...props }) => {
       <DateTimePart
         label={t('form.label.hours')}
         onChange={datetime.setHours}
-        onBlur={(e) => datetime.setHours(e, true)}
+        onBlur={datetime.trigger}
         value={datetime.hours}
         width={2}
         name={`${name}-hours`}
@@ -177,7 +192,7 @@ export const DateTimeInput = ({ name, ...props }) => {
       <DateTimePart
         label={t('form.label.minutes')}
         onChange={datetime.setMinutes}
-        onBlur={(e) => datetime.setMinutes(e, true)}
+        onBlur={datetime.trigger}
         value={datetime.minutes}
         width={2}
         name={`${name}-minutes`}

package/src/inputs/FileInput/FileInput.stories.js

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

package/src/inputs/FileInput/__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/FileInput/__stories__/WithBorderAndLink.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const WithBorderAndLink = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="file"
+      type="file"
+      required
+      extra={{
+        containerProps: {
+          variant: 'border',
+        },
+        uploadButtonProps: {
+          variant: 'link',
+        },
+        resetButtonProps: {
+          variant: 'link',
+          color: 'warning',
+        },
+      }}
+      label={{ primary: 'Βιογραφικό σημείωμα' }}
+    />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default WithBorderAndLink;

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

@@ -2,6 +2,7 @@ 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/FileInput/__stories__/Default';
+import { WithBorderAndLink } from '@digigov/form/inputs/FileInput/__stories__/WithBorderAndLink';
 
 test('renders the All FileInput variants', async ({ mount, page }) => {
   await mount(
@@ -10,6 +11,9 @@ test('renders the All FileInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="WithBorderAndLink">
+      <WithBorderAndLink />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);

package/src/inputs/FileInput/index.tsx

@@ -1,10 +1,17 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Button } from '@digigov/ui/form/Button';
-import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
+import { Button, ButtonProps } from '@digigov/ui/form/Button';
+import {
+  FileUpload,
+  FileUploadContainer,
+  FileUploadContainerProps,
+  FileUploadProps,
+} from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -13,9 +20,10 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     limit: {
       maxSize?: number;
     };
-    variant?: 'border' | 'none';
-    buttonVariant?: 'link' | 'button';
-    resetButtonColor?: 'primary' | 'secondary' | 'warning';
+    containerProps?: FileUploadContainerProps;
+    uploadButtonProps?: FileUploadProps;
+    noResetButton?: boolean;
+    resetButtonProps?: ButtonProps;
     locales?: {
       file?: string;
       chooseFile?: string;
@@ -25,30 +33,26 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
-  { name, disabled, reset, onChange, extra, ...props },
+  { name, disabled, resetField, extra, control, onChange, ...props },
   ref: any
 ) {
+  delete props.Field;
+  delete props.reset;
   const { t } = useTranslation();
-  const variant = extra?.variant || 'none';
-  const buttonVariant = extra?.buttonVariant;
-  const resetButtonColor = extra?.resetButtonColor;
-  const [files, setFiles] = useState<string[] | undefined>([]);
-  const handleChange = (e) => {
-    const target = e.target as HTMLInputElement;
-    const selectedFiles = Array.from(
-      target.files as ArrayLike<{ name: string }>
-    ).map(({ name }) => name);
-    setFiles(selectedFiles);
-    // proceed calling the onChange provided
-    // by react-hook-form
-    onChange(e);
-  };
+  const value: any = useWatch({ control, name });
+
+  const [files, setFiles] = useState<string[] | undefined>(
+    Object.values(value || {})?.map?.(({ name }) => name) || []
+  );
+  useEffect(() => {
+    setFiles(Object.values(value || {})?.map?.(({ name }) => name));
+  }, [value]);
+
   return (
     <>
       <FileUploadContainer
-        variant={variant}
+        variant={extra?.containerProps?.variant || 'default'}
         hasFiles={files && files.length > 0}
       >
         {files?.length ? (
@@ -70,24 +74,31 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
           ref={ref}
           hasFiles={!!files?.length}
           name={name}
-          variant={buttonVariant}
+          variant={extra?.uploadButtonProps?.variant}
           disabled={disabled}
-          onChange={handleChange}
           id={name}
-          {...{ ...props, required: undefined, Field: undefined }}
+          onChange={(event) => {
+            event.preventDefault();
+            const target = event?.target as HTMLInputElement;
+            if (target?.files && target?.files.length > 0) {
+              setFiles(Object.values(target?.files)?.map?.(({ name }) => name));
+            }
+            onChange(event);
+          }}
+          {...{ ...props, required: undefined }}
         >
           {files?.length ? t('upload.change_file') : t('upload.choose_file')}
         </FileUpload>
-        {files !== undefined && files.length > 0 && (
+        {files !== undefined && files?.length > 0 && !extra?.noResetButton && (
           <>
             <Button
-              variant="link"
+              variant={extra?.resetButtonProps?.variant || 'link'}
               onClick={(event) => {
                 event.preventDefault();
-                reset({ [name]: '' });
+                resetField(name);
                 setFiles(undefined);
               }}
-              color={resetButtonColor}
+              color={extra?.resetButtonProps?.color || 'secondary'}
             >
               {t('upload.reset_file')}
             </Button>

package/src/inputs/ImageInput/ImageInput.stories.js

@@ -1,9 +1,13 @@
 import ImageInput from '@digigov/form/inputs/ImageInput';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/ImageInput',
   component: ImageInput,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'ImageInput',
 };
 export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
 export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
+export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { WithInitialValues } from '@digigov/form/inputs/ImageInput/__stories__/WithInitialValues';

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

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

package/src/inputs/ImageInput/__stories__/MaxSize.tsx

@@ -9,17 +9,18 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
-      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 10KB.',
+      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 1KB.',
     },
     extra: {
       limit: {
+        // bytes
         maxSize: 1000,
       },
     },
   },
 ];
 
-export const MaxSize = () => (
+export const MaxSize = (_: any) => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

package/src/inputs/ImageInput/__stories__/WithInitialValues.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import logo from '@digigov/form/inputs/ImageInput/__stories__/logo.png';
+import { FieldSpec } from '@digigov/form/types';
+import { Button } from '@digigov/ui/form/Button';
+const FIELDS: FieldSpec[] = [
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανέβασμα φωτογραφίας',
+      secondary:
+        'Οι επιτρεπόμενες διαστάσεις είναι για το ύψος από 100 μέχρι 400 και για το πλάτος από 100 μέχρι 400.',
+    },
+    extra: {
+      limit: {
+        maxHeight: 400,
+        maxWidth: 400,
+        minHeight: 100,
+        minWidth: 100,
+      },
+    },
+  },
+];
+
+export const WithInitialValues = (_: any) => (
+  <FormBuilder
+    fields={FIELDS}
+    initial={{
+      image: { src: logo, filename: 'logo.png' },
+    }}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Fieldset>
+      {FIELDS.map((field) => (
+        <Field key={field.key} name={field.key} />
+      ))}
+    </Fieldset>
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithInitialValues;

package/src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx

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

package/src/inputs/ImageInput/__stories__/logo.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: any;
+  export default value;
+}

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

@@ -1,32 +1,36 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant';
+import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
 import { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
+import { WithInitialValues } from '@digigov/form/inputs/ImageInput/__stories__/WithInitialValues';
 import { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
 
 test('renders the All ImageInput variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-      <TestVariant title="MaxSize">
-        <MaxSize />
-      </TestVariant>
-      <TestVariant title="WithInvalidImageDimension">
-        <WithInvalidImageDimension />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="MaxSize">
+      <MaxSize />
+    </TestVariant>
+    <TestVariant title="WithInitialValues">
+      <WithInitialValues />
+    </TestVariant>
+    <TestVariant title="WithInvalidImageDimension">
+      <WithInvalidImageDimension />
+    </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',
-  });
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+