@digigov/form 2.0.0-85c27c19 → 2.0.0-87b6232d

package/src/inputs/FileInput/index.tsx

@@ -1,11 +1,15 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 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 from '@digigov/ui/form/Button';
+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 Paragraph from '@digigov/ui/typography/Paragraph';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -14,29 +18,39 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     limit: {
       maxSize?: number;
     };
+    containerProps?: FileUploadContainerProps;
+    uploadButtonProps?: FileUploadProps;
+    noResetButton?: boolean;
+    resetButtonProps?: ButtonProps;
+    locales?: {
+      file?: string;
+      chooseFile?: string;
+      changeFile?: string;
+      resetFile?: string;
+    };
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
-  { name, extra = {}, disabled, reset, onChange, ...props },
+  { name, disabled, resetField, extra, onChange, value, ...props },
   ref: any
 ) {
+  delete props.Field;
   const { t } = useTranslation();
-  const [files, setFiles] = useState<Array<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 [files, setFiles] = useState<string[] | undefined>(
+    Object.values(value || {})?.map?.(({ name }) => name) || []
+  );
+  useEffect(() => {
+    setFiles(Object.values(value || {})?.map?.(({ name }) => name));
+  }, [value]);
+
   return (
     <>
-      <FileUploadContainer hasFiles={files && files.length > 0}>
+      <FileUploadContainer
+        variant={extra?.containerProps?.variant || 'default'}
+        hasFiles={files && files.length > 0}
+      >
         {files?.length ? (
           <>
             <Paragraph>
@@ -44,27 +58,45 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
             </Paragraph>
           </>
         ) : (
-          <CoreHint>{t('upload.no_file')}</CoreHint>
+          <Hint>
+            <b>
+              {t('upload.file')}
+              {': '}
+            </b>
+            {t('upload.no_file')}
+          </Hint>
         )}
         <FileUpload
           ref={ref}
           hasFiles={!!files?.length}
           name={name}
+          variant={extra?.uploadButtonProps?.variant}
           disabled={disabled}
-          onChange={handleChange}
-          {...{ ...props, required: undefined }}
+          id={name}
+          value={value.filename}
+          onChange={(event) => {
+            if (event?.target?.files && event?.target?.files.length > 0) {
+              onChange(event.target.files);
+            }
+          }}
+          {...{
+            ...props,
+            required: undefined,
+            error: 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={extra?.resetButtonProps?.color || 'secondary'}
             >
               {t('upload.reset_file')}
             </Button>

package/src/inputs/ImageInput/ImageInput.stories.js

@@ -5,5 +5,5 @@ export default {
   displayName: 'ImageInput',
 };
 export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
 export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';

package/src/inputs/ImageInput/__stories__/{WithInvalidImageSize.tsx → MaxSize.tsx}

@@ -9,16 +9,17 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
+      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 10KB.',
     },
     extra: {
       limit: {
-        maxSize: 300,
+        maxSize: 1000,
       },
     },
   },
 ];
 
-export const WithInvalidImageSize = () => (
+export const MaxSize = () => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {
@@ -33,4 +34,4 @@ export const WithInvalidImageSize = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default WithInvalidImageSize;
+export default MaxSize;

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: {

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

@@ -2,8 +2,8 @@ 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/ImageInput/__stories__/Default';
+import { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
 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(
@@ -12,16 +12,20 @@ test('renders the All ImageInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="MaxSize">
+      <MaxSize />
+    </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,12 +1,11 @@
 import React, { useState, useCallback } from 'react';
 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 { 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;
 }
@@ -20,7 +19,7 @@ export interface Limit {
 }
 
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
-  return <img src={src} className="ds-image--ratio" />;
+  return <Base as="img" src={src} className="ds-image--ratio" />;
 });
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
@@ -34,10 +33,7 @@ export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
 }
 
 export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
-  function ImageInput(
-    { name, extra = {}, disabled, onChange, reset, ...props },
-    ref: any
-  ) {
+  function ImageInput({ name, disabled, onChange, reset, ...props }, ref: any) {
     const { t } = useTranslation();
     const [selectedImage, setSelectedImage] = useState<File | null>(null);
     const [imageUrl, setImageUrl] = useState<string | null>(null);
@@ -72,13 +68,12 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
           {selectedImage !== null ? (
             <>
               <Paragraph>
-                <b>{t('upload.image')}:</b> {`${selectedImage?.name}`}
+                <Base as="b">{t('upload.image')}:</Base>{' '}
+                {`${selectedImage?.name}`}
               </Paragraph>
             </>
           ) : (
-            <CoreHint className="ds-dashed--border">
-              {t('upload.no_image')}
-            </CoreHint>
+            <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
           )}
           <>
             {selectedImage !== null && <Image src={imageUrl} />}
@@ -92,10 +87,16 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
                 ref={ref}
                 hasFiles={selectedImage !== null}
                 name={name}
+                id={name}
                 disabled={disabled}
                 accept="image/*"
                 onChange={handleImageChange}
-                {...{ ...props, required: undefined, type: 'file' }}
+                {...{
+                  ...props,
+                  required: undefined,
+                  Field: undefined,
+                  type: 'file',
+                }}
               >
                 {t('upload.choose_image')}
               </FileUpload>

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

@@ -5,12 +5,14 @@ export default {
   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 { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
 export { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';

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__/LandlineNumber.tsx

@@ -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

@@ -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

@@ -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

@@ -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__/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 = () => (
+  <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

@@ -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" />

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

@@ -10,6 +10,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 }) => {
@@ -43,6 +44,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 +54,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,10 +1,10 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Hint } from '@digigov/react-core/Hint';
-import TextArea from '@digigov/react-core/TextArea';
-import TextInput from '@digigov/react-core/TextInput';
+import { TextArea } from '@digigov/ui/form/TextArea';
+import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 const TYPES_MAP = {
   string: 'text',
@@ -13,7 +13,8 @@ const TYPES_MAP = {
   date: 'date',
 };
 
-export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+export interface InputProps
+  extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
   extra?: {
     fullWidth?: boolean;
     multiline?: boolean;
@@ -25,10 +26,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 || {};
@@ -40,6 +43,27 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
     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 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 (
         <>
@@ -48,6 +72,7 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             className={className}
             rows={rows}
             ref={ref}
+            id={name}
             {...{
               ...props,
               reset: undefined,
@@ -56,32 +81,13 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             }}
           />
           {limit?.max && (
-            <Hint>
-              {currentValue === undefined ||
-              (currentValue?.length >= 0 &&
-                currentValue?.length <= limit?.max) ? (
-                <span>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>
-                    {!currentValue
-                      ? limit.max
-                      : limit?.max - currentValue?.length}
-                  </b>{' '}
-                  {currentValue && limit?.max - currentValue?.length === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.remaining')}.
-                </span>
-              ) : (
-                <span style={{ color: '#b60202' }}>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>{currentValue && currentValue?.length - limit?.max}</b>{' '}
-                  {currentValue?.length - limit?.max === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.too_many')}.
-                </span>
-              )}
+            <Hint display={'flex'}>
+              {t('form.info.text.you_have')}
+              <Hint fontWeight="bold">
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+                &nbsp;
+              </Hint>
+              {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
         </>
@@ -90,10 +96,16 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
       return (
         <TextInput
           name={name}
+          id={name}
           type={fieldType}
+          data-type={type}
           className={className}
           ref={ref}
-          {...{ ...props, reset: undefined, required: undefined }}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+          }}
         />
       );
     }