@digigov/form 2.0.0-07ee8440 → 2.0.0-0b806366

package/src/inputs/ImageInput/index.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useCallback } from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { omit } from '@digigov/form/utils';
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -7,7 +9,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 +23,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 +43,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, defaultValue, value, resetField, ...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,54 +84,78 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
     const handleDeleteImage = useCallback(
       (event) => {
         event.preventDefault();
-        reset({ [name]: '' });
+        resetField(name);
         setSelectedImage(null);
-        setImageUrl('');
+        setImageUrl(null);
       },
-      [selectedImage]
+      [resetField, name]
     );
 
+    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}
-                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}
+              {...{
+                ...omit(props, ['Field', 'reset', 'error']),
+                required: 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,9 @@ 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 { Rate } from '@digigov/form/inputs/Input/__stories__/Rate';
 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__/Rate.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Rate = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key="rate"
+      name="rate"
+      type="rate"
+      label={{
+        primary: 'Συμπληρώστε το ποσοστό παραχώρησης',
+      }}
+      min={0}
+      max={100}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Rate;

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/doc.mdx

@@ -11,46 +11,46 @@ a wide variety of types of input data and control widgets are available, dependi
 
 ### String
 
-<code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/String.tsx" />
 
 ### Boolean
 
-<code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/Boolean.tsx" />
 
 ### AFM
 
-<code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/AFM.tsx" />
 
 
 ### IBAN
 
-<code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/IBAN.tsx" />
 
 
 ### Integer
 
-<code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/Integer.tsx" />
 
 
 ### Landline number
 
-<code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/LandlineNumber.tsx" />
 
 
 ### Mobile phone 
 
-<code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/MobilePhone.tsx" />
 
 
 ### Phone number
 
-<code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/PhoneNumber.tsx" />
 
 
 ### Postal code 
 
-<code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/PostalCode.tsx" />
 
 ### Text with character limit 
 
-<code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />
+<code src="@digigov/form/src/inputs/Input/__stories__/TextWithLimit.tsx" />

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

@@ -2,13 +2,16 @@ 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';
 import { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone';
 import { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
 import { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
+import { Rate } from '@digigov/form/inputs/Input/__stories__/Rate';
 import { String } from '@digigov/form/inputs/Input/__stories__/String';
 import { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
 import { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';
@@ -20,9 +23,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>
@@ -41,6 +50,9 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="PostalCode">
       <PostalCode />
     </TestVariant>
+    <TestVariant title="Rate">
+      <Rate />
+    </TestVariant>
     <TestVariant title="String">
       <String />
     </TestVariant>
@@ -54,6 +66,10 @@ test('renders the All Input variants', async ({ mount, page }) => {
   )
   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/Input/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { UseFormReturn } from 'react-hook-form';
 import { useWatch } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { omit } from '@digigov/form/utils';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -8,12 +10,15 @@ import { Hint } from '@digigov/ui/typography/Hint';
 
 const TYPES_MAP = {
   string: 'text',
+  password: 'password',
   int: 'text',
+  rate: 'number',
   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,6 +30,8 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
       max?: number;
     };
   };
+  Field?: UncontrolledFieldProps['Field'];
+  resetField: UseFormReturn['resetField'];
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
@@ -61,6 +68,8 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
       return remainingText;
     };
 
+    const transformedProps = omit(props, ['Field', 'resetField']);
+
     if (multiline === true) {
       return (
         <>
@@ -68,22 +77,22 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             name={name}
             className={className}
             rows={rows}
-            ref={ref}
+            ref={ref as React.RefObject<HTMLTextAreaElement>}
+            id={name}
             {...{
-              ...props,
+              ...transformedProps,
               reset: undefined,
               required: undefined,
               type: fieldType,
-              Field: undefined,
             }}
           />
           {limit?.max && (
             <Hint display={'flex'}>
               {t('form.info.text.you_have')}
-              <Hint fontWeight="bold">
+              <strong>
                 &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
                 &nbsp;
-              </Hint>
+              </strong>
               {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
@@ -97,12 +106,13 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           type={fieldType}
           data-type={type}
           className={className}
-          ref={ref}
+          ref={ref as React.RefObject<HTMLInputElement>}
           {...{
-            ...props,
+            ...transformedProps,
+            min: undefined,
+            max: undefined,
             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/Label/doc.mdx

@@ -11,4 +11,4 @@ The Label component is used to display descriptive text for form sections or fie
 
 ### Default
 
-<code src="@digigov/form/inputs/Label/__stories__/Default.tsx" />
+<code src="@digigov/form/src/inputs/Label/__stories__/Default.tsx" />

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

@@ -14,6 +14,10 @@ test('renders the All Label variants', async ({ mount, page }) => {
   )
   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/Label/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldLabelProps } from '@digigov/form/types';
+import type { FieldLabelProps } from '@digigov/form/types';
 import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';