@digigov/form 2.0.0-a32ad9b2 → 2.0.0-abd768eb

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();
 });
+  

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);

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,9 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+import { AMKA } from '@digigov/form/inputs/Input/__stories__/AMKA';
 import { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
+import { Email } from '@digigov/form/inputs/Input/__stories__/Email';
 import { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
 import { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 import { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
@@ -20,9 +22,15 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="AFM">
       <AFM />
     </TestVariant>
+    <TestVariant title="AMKA">
+      <AMKA />
+    </TestVariant>
     <TestVariant title="Boolean">
       <Boolean />
     </TestVariant>
+    <TestVariant title="Email">
+      <Email />
+    </TestVariant>
     <TestVariant title="IBAN">
       <IBAN />
     </TestVariant>

package/src/inputs/Input/index.tsx

@@ -8,12 +8,14 @@ import { Hint } from '@digigov/ui/typography/Hint';
 
 const TYPES_MAP = {
   string: 'text',
+  password: 'password',
   int: 'text',
   text: 'text',
   date: 'date',
 };
 
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+export interface InputProps
+  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
   extra?: {
     fullWidth?: boolean;
     multiline?: boolean;
@@ -25,10 +27,12 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
       max?: number;
     };
   };
+  Field?: UncontrolledFieldProps['Field'];
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
   function WrappedInput({ name, control, type, extra, ...props }, ref: never) {
+    delete props['Field'];
     // eslint-disable-next-line prefer-const
     let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
@@ -75,7 +79,6 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
               reset: undefined,
               required: undefined,
               type: fieldType,
-              Field: undefined,
             }}
           />
           {limit?.max && (
@@ -103,7 +106,6 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             ...props,
             reset: undefined,
             required: undefined,
-            Field: undefined,
           }}
         />
       );

package/src/inputs/Label/Label.stories.js

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

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

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

package/src/inputs/OtpInput/OtpInput.stories.js

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

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

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

package/src/inputs/Radio/Radio.stories.js

@@ -1,7 +1,10 @@
 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 { Default } from '@digigov/form/inputs/Radio/__stories__/Default';

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

@@ -85,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/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 { 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.tsx

@@ -6,11 +6,13 @@ import {
   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: FieldOptionProps[];
   };
+  Field?: UncontrolledFieldProps['Field'];
 }
 
 export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
@@ -18,6 +20,7 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
     { name, extra: { options, className }, disabled, ...props },
     ref: never
   ) {
+    delete props.Field;
     return (
       <SelectContainer
         className={className}
@@ -28,12 +31,12 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
         {...{
           ...props,
           reset: undefined,
+          error: undefined,
           required: undefined,
-          Field: 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>
         ))}