@digigov/form 2.0.0-daaf7bdf → 2.0.0-e20fed09

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

@@ -9,6 +9,8 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
+      secondary:
+        'Οι επιτρεπόμενες διαστάσεις είναι για το ύψος από 100 μέχρι 400 και για το πλάτος από 100 μέχρι 400.',
     },
     extra: {
       limit: {
@@ -21,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/doc.mdx

@@ -0,0 +1,23 @@
+---
+title: Image Input
+---
+ 
+# Image input
+
+
+
+Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/Default.tsx" />
+
+### Display with max size
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/MaxSize.tsx" />
+
+### Display with min and max image dimensions
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx" />

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,14 +1,14 @@
-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 FileUpload from '@digigov/react-core/FileUpload';
-import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
-import CoreHint from '@digigov/react-core/Hint';
-import Button, { ButtonGroup } from '@digigov/ui/form/Button';
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import { Base } from '@digigov/react-core/Base';
+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 {
@@ -20,8 +20,20 @@ export interface Limit {
 }
 
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
-  return <Base as='img' src={src} className="ds-image--ratio" />;
+  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;
@@ -30,28 +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, extra = {}, disabled, onChange, reset, ...props },
+    { 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]
     );
@@ -59,50 +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>
-            </>
-          ) : (
-            <CoreHint className="ds-dashed--border">
-              {t('upload.no_image')}
-            </CoreHint>
-          )}
+      <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, 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);
@@ -12,12 +12,13 @@ export const LandlineNumber = () => (
       key="phone-number"
       name="phone-number"
       type="phone_number"
+      autoComplete="tel"
       label={{
         primary: 'Σταθερό τηλέφωνο',
       }}
       extra={{
         countries: ['gr'],
-        phoneType:'landline',
+        phoneType: 'landline',
       }}
       required
     />

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);
@@ -12,6 +12,7 @@ export const MobilePhone = () => (
       key="mobile-phone"
       name="mobile-phone"
       type="mobile_phone"
+      autoComplete="tel"
       label={{
         primary: 'Κινητό τηλέφωνο',
       }}

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);
@@ -12,6 +12,7 @@ export const PhoneNumber = () => (
       key="phone-number"
       name="phone-number"
       type="phone_number"
+      autoComplete="tel"
       label={{
         primary: 'Tηλέφωνο',
       }}

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);
@@ -12,6 +12,7 @@ export const PostalCode = () => (
       key="postal-code"
       name="postal-code"
       type="postal_code"
+      autoComplete="postal-code"
       label={{
         primary: 'Ταχυδρομικός κωδικός',
       }}

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

@@ -0,0 +1,56 @@
+---
+title: Input
+---
+ 
+# Input
+
+The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user; 
+a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
+
+## How to use
+
+### String
+
+<code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
+
+### Boolean
+
+<code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
+
+### AFM
+
+<code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
+
+
+### IBAN
+
+<code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
+
+
+### Integer
+
+<code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
+
+
+### Landline number
+
+<code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
+
+
+### Mobile phone 
+
+<code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
+
+
+### Phone number
+
+<code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
+
+
+### Postal code 
+
+<code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
+
+### Text with character limit 
+
+<code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />