@digigov/form 2.0.0-8e254888 → 2.0.0-a402a664

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,10 +11,17 @@ 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);
 
+  // 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/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__/{WithInvalidImageSize.tsx → WithInitialValues.tsx}

@@ -1,5 +1,6 @@
 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[] = [
@@ -9,18 +10,26 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
+      secondary:
+        'Οι επιτρεπόμενες διαστάσεις είναι για το ύψος από 100 μέχρι 400 και για το πλάτος από 100 μέχρι 400.',
     },
     extra: {
       limit: {
-        maxSize: 300,
+        maxHeight: 400,
+        maxWidth: 400,
+        minHeight: 100,
+        minWidth: 100,
       },
     },
   },
 ];
 
-export const WithInvalidImageSize = () => (
+export const WithInitialValues = (_: any) => (
   <FormBuilder
     fields={FIELDS}
+    initial={{
+      image: { src: logo, filename: 'logo.png' },
+    }}
     onSubmit={(data) => {
       console.log(data);
     }}
@@ -33,4 +42,4 @@ export const WithInvalidImageSize = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default WithInvalidImageSize;
+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

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/experimental-ct-react';
 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';
-import { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
 
 test('renders the All ImageInput variants', async ({ mount, page }) => {
   await mount(
@@ -16,16 +16,20 @@ test('renders the All ImageInput variants', async ({ mount, page }) => {
     <TestVariant title="MaxSize">
       <MaxSize />
     </TestVariant>
+    <TestVariant title="WithInitialValues">
+      <WithInitialValues />
+    </TestVariant>
     <TestVariant title="WithInvalidImageDimension">
       <WithInvalidImageDimension />
     </TestVariant>
-    <TestVariant title="WithInvalidImageSize">
-      <WithInvalidImageSize />
-    </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/ImageInput/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { UseFormReturn } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
@@ -7,7 +8,7 @@ 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;
+  src: string;
 }
 
 export interface Limit {
@@ -21,6 +22,18 @@ export interface Limit {
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
   return <Base as="img" src={src} className="ds-image--ratio" />;
 });
+
+interface ImageInputDefaultValue {
+  filename: string;
+  src: string;
+}
+
+const blobToFileList = (blob: Blob, fileName: string): FileList => {
+  const file = new File([blob], fileName, { type: 'image/jpeg' });
+  const dataTransfer = new DataTransfer();
+  dataTransfer.items.add(file);
+  return dataTransfer.files;
+};
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -29,25 +42,40 @@ export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     limit?: Limit;
   };
   reset: (values?: any) => void;
+  resetField: UseFormReturn['resetField'];
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  defaultValue?: ImageInputDefaultValue | null;
+  value: any;
 }
 
 export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
-  function ImageInput({ name, disabled, onChange, reset, ...props }, ref: any) {
+  function ImageInput(
+    { name, disabled, onChange, resetField, defaultValue, value, ...props },
+    ref: any
+  ) {
+    const imageRef = useRef(ref?.current);
     const { t } = useTranslation();
-    const [selectedImage, setSelectedImage] = useState<File | null>(null);
-    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const currentValue: ImageInputDefaultValue | null =
+      defaultValue || value || null;
+    const [selectedImage, setSelectedImage] = useState<
+      File | ImageInputDefaultValue | null
+    >(currentValue);
+    const [imageUrl, setImageUrl] = useState<string | null>(
+      currentValue?.src || null
+    );
+
     const handleImageChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         e.preventDefault();
         const target = e.target as HTMLInputElement;
         const selectedFile = target.files?.[0];
-
         if (selectedFile) {
           setSelectedImage(selectedFile);
           setImageUrl(URL.createObjectURL(selectedFile));
         }
-        onChange(e);
+        onChange(
+          target.files as unknown as React.ChangeEvent<HTMLInputElement>
+        );
       },
       [selectedImage]
     );
@@ -55,55 +83,79 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
     const handleDeleteImage = useCallback(
       (event) => {
         event.preventDefault();
-        reset({ [name]: '' });
+        resetField(name);
         setSelectedImage(null);
-        setImageUrl('');
+        setImageUrl(null);
       },
       [selectedImage]
     );
 
+    useEffect(() => {
+      // This is to fill the input with the default value (image)
+      if (defaultValue?.src && imageRef.current) {
+        fetch(defaultValue?.src)
+          .then((response) => response.blob())
+          .then((blob) => {
+            const fileList = blobToFileList(blob, defaultValue.filename);
+            imageRef.current.files = fileList;
+            const fileChangeEvent = new Event('change', { bubbles: true });
+            imageRef.current.dispatchEvent(fileChangeEvent);
+            return;
+          })
+          .catch((error) => console.error('Error fetching image:', error));
+      }
+    }, [defaultValue, imageRef]);
+
     return (
-      <>
-        <FileUploadContainer>
-          {selectedImage !== null ? (
-            <>
-              <Paragraph>
-                <Base as="b">{t('upload.image')}:</Base>{' '}
-                {`${selectedImage?.name}`}
-              </Paragraph>
-            </>
-          ) : (
-            <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
-          )}
+      <FileUploadContainer>
+        {selectedImage !== null ? (
           <>
-            {selectedImage !== null && <Image src={imageUrl} />}
-            <ButtonGroup marginTop={2}>
-              {selectedImage !== null && (
-                <Button variant="link" onClick={handleDeleteImage}>
-                  {t('upload.reset_file')}
-                </Button>
-              )}
-              <FileUpload
-                ref={ref}
-                hasFiles={selectedImage !== null}
-                name={name}
-                id={name}
-                disabled={disabled}
-                accept="image/*"
-                onChange={handleImageChange}
-                {...{
-                  ...props,
-                  required: undefined,
-                  Field: undefined,
-                  type: 'file',
-                }}
-              >
-                {t('upload.choose_image')}
-              </FileUpload>
-            </ButtonGroup>
+            <Paragraph>
+              <Base as="b">{t('upload.image')}:</Base>{' '}
+              <em>
+                {`${(selectedImage as File)?.name || (selectedImage as ImageInputDefaultValue)?.filename}`}
+              </em>
+            </Paragraph>
           </>
-        </FileUploadContainer>
-      </>
+        ) : (
+          <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
+        )}
+        {imageUrl !== null && selectedImage !== null && (
+          <Image src={imageUrl} />
+        )}
+        {!disabled && (
+          <ButtonGroup marginTop={2}>
+            <FileUpload
+              ref={imageRef}
+              hasFiles={selectedImage !== null}
+              name={name}
+              id={name}
+              disabled={disabled}
+              accept="image/*"
+              onChange={handleImageChange}
+              {...{
+                ...(props as any),
+                required: undefined,
+                Field: undefined,
+                type: 'file',
+              }}
+            >
+              {selectedImage
+                ? t('upload.change_image')
+                : t('upload.choose_image')}
+            </FileUpload>
+            {selectedImage !== null && (
+              <Button
+                color="warning"
+                variant="link"
+                onClick={handleDeleteImage}
+              >
+                {t('upload.reset_file')}
+              </Button>
+            )}
+          </ButtonGroup>
+        )}
+      </FileUploadContainer>
     );
   }
 );

package/src/inputs/Input/Input.stories.js

@@ -1,7 +1,10 @@
 import Input from '@digigov/form/inputs/Input';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Input',
   component: Input,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Input',
 };
 export { String } from '@digigov/form/inputs/Input/__stories__/String';
@@ -12,6 +15,8 @@ export { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber'
 export { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
 export { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone';
 export { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+export { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 export { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
+export { Email } from '@digigov/form/inputs/Input/__stories__/Email';
 export { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
 export { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';

package/src/inputs/Input/__stories__/AFM.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const AFM = () => (
+export const AFM = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/AMKA.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const AMKA = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key="amka"
+      name="amka"
+      type="amka"
+      label={{
+        primary: 'Αριθμός μητρώου κοινωνικής ασφάλισης',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default AMKA;

package/src/inputs/Input/__stories__/Boolean.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Boolean = () => (
+export const Boolean = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/Email.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Email = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key="email"
+      name="email"
+      type="email"
+      label={{
+        primary: 'Δ/νση Ηλεκτρ. Ταχυδρομείου (Ε-mail)',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Email;

package/src/inputs/Input/__stories__/IBAN.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const IBAN = () => (
+export const IBAN = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/Integer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Integer = () => {
+export const Integer = (_: any) => {
   return (
     <FormBuilder
       onSubmit={(data) => {

package/src/inputs/Input/__stories__/LandlineNumber.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const LandlineNumber = () => (
+export const LandlineNumber = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/MobilePhone.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const MobilePhone = () => (
+export const MobilePhone = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Input/__stories__/PhoneNumber.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const PhoneNumber = () => (
+export const PhoneNumber = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);