@digigov/form 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/src/inputs/ImageInput/index.tsx

@@ -1,5 +1,6 @@
-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 { Button, ButtonGroup } from '@digigov/ui/form/Button';
 import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -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,54 +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}
-                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,16 +1,22 @@
 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';
+export { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
 export { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 export { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
 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

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const StringWithTrimValidation = (_: any) => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key="business-title"
+      name="business-title"
+      type="string"
+      trim={true}
+      label={{
+        primary: 'Όνομα επιχείρησης',
+        secondary:
+          'Εισάγετε μια σειρά από χαρακτήρες και αριθμούς (το πειδίο δεν δέχεται κενά στην αρχή της πρότασης)',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default StringWithTrimValidation;

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);
@@ -12,6 +12,7 @@ export const TextWithLimit = () => (
       key="text"
       name="text"
       type="text"
+      trim
       label={{
         primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;',
       }}

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';
@@ -10,6 +12,7 @@ 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 { 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';
 
 test('renders the All Input variants', async ({ mount, page }) => {
@@ -19,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>
@@ -43,6 +52,9 @@ test('renders the All Input variants', async ({ mount, page }) => {
     <TestVariant title="String">
       <String />
     </TestVariant>
+    <TestVariant title="StringWithTrimValidation">
+      <StringWithTrimValidation />
+    </TestVariant>
     <TestVariant title="TextWithLimit">
       <TextWithLimit />
     </TestVariant>
@@ -50,6 +62,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,6 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -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,88 +27,91 @@ 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) {
-    // eslint-disable-next-line prefer-const
-    let { multiline = false, rows, limit } = extra || {};
-    const { className } = extra || {};
-    // if enforced to multiline use true. Derive from type otherwise.
-    multiline = multiline === true || type === 'text';
-    // use explicit rows value if set. Derive from multiline otherwise.
-    rows = rows || (multiline ? 4 : 1);
-    // translate dilosi type to HTML Input type
-    const fieldType = TYPES_MAP[type || 'text'] || 'text';
-    const { t } = useTranslation();
-    const currentValue: string | '' = useWatch({ control, name });
+export const Input = React.forwardRef<
+  HTMLInputElement | HTMLTextAreaElement,
+  InputProps
+>(function WrappedInput({ name, control, type, extra, ...props }, ref) {
+  delete props['Field'];
+  // eslint-disable-next-line prefer-const
+  let { multiline = false, rows, limit } = extra || {};
+  const { className } = extra || {};
+  // if enforced to multiline use true. Derive from type otherwise.
+  multiline = multiline === true || type === 'text';
+  // use explicit rows value if set. Derive from multiline otherwise.
+  rows = rows || (multiline ? 4 : 1);
+  // translate dilosi type to HTML Input type
+  const fieldType = TYPES_MAP[type || 'text'] || 'text';
+  const { t } = useTranslation();
+  const currentValue: string | '' = useWatch({ control, name });
 
-    const getRemainingChars = (currentValue, limit) => {
-      if (currentValue) {
-        return limit?.max - currentValue.length;
-      }
-      return limit?.max;
-    };
+  const getRemainingChars = (currentValue, limit) => {
+    if (currentValue) {
+      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')}.`;
-      return remainingText;
-    };
+  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')}.`;
+    return remainingText;
+  };
 
-    if (multiline === true) {
-      return (
-        <>
-          <TextArea
-            name={name}
-            className={className}
-            rows={rows}
-            ref={ref}
-            {...{
-              ...props,
-              reset: undefined,
-              required: undefined,
-              type: fieldType,
-              Field: undefined,
-            }}
-          />
-          {limit?.max && (
-            <Hint display={'flex'}>
-              {t('form.info.text.you_have')}
-              <Hint fontWeight="bold">
-                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
-                &nbsp;
-              </Hint>
-              {constructRemainingText(currentValue, limit)}
-            </Hint>
-          )}
-        </>
-      );
-    } else {
-      return (
-        <TextInput
+  if (multiline === true) {
+    return (
+      <>
+        <TextArea
           name={name}
-          type={fieldType}
-          data-type={type}
           className={className}
-          ref={ref}
+          rows={rows}
+          ref={ref as React.RefObject<HTMLTextAreaElement>}
+          id={name}
           {...{
             ...props,
             reset: undefined,
             required: undefined,
-            Field: undefined,
+            type: fieldType,
           }}
         />
-      );
-    }
+        {limit?.max && (
+          <Hint display={'flex'}>
+            {t('form.info.text.you_have')}
+            <Hint fontWeight="bold">
+              &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+              &nbsp;
+            </Hint>
+            {constructRemainingText(currentValue, limit)}
+          </Hint>
+        )}
+      </>
+    );
+  } else {
+    return (
+      <TextInput
+        name={name}
+        id={name}
+        type={fieldType}
+        data-type={type}
+        className={className}
+        ref={ref as React.RefObject<HTMLInputElement>}
+        {...{
+          ...props,
+          reset: undefined,
+          required: undefined,
+        }}
+      />
+    );
   }
-);
+});
 
 export default Input;

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