@digigov/form 2.0.0-0edebf87 → 2.0.0-13876dba

package/src/inputs/DateTimeInput/index.tsx

@@ -0,0 +1,194 @@
+import React, { useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+import { useTranslation } from '@digigov/ui/i18n';
+dayjs.extend(customParseFormat);
+
+export interface DateTimeInputProps
+  extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    max?: string;
+    min?: string;
+  };
+}
+
+function useDateTime(value, onChange) {
+  const [year, month, day, hours, minutes] = useMemo(() => {
+    if (!value || value.length === 0) {
+      onChange('');
+      return ['', '', '', '', ''];
+    }
+    const [datePart, timePart] = value.split(' ');
+    const [day, month, year] = datePart.split('/');
+    const [hours, minutes] = timePart ? timePart.split(':') : ['', ''];
+    return [year, month, day, hours, minutes];
+  }, [value]);
+
+  function set(year, month, day, hours, minutes) {
+    const datePart = `${day || ''}/${month || ''}/${year || ''}`;
+    const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';
+    const value = timePart ? `${datePart} ${timePart}` : datePart;
+
+    if (!year && !month && !day && !hours && !minutes) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  }
+
+  function setYear(evt) {
+    const val = evt.target.value;
+    set(val, month, day, hours, minutes);
+  }
+
+  function setMonth(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, val, day, hours, minutes);
+  }
+
+  function setDay(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, val, hours, minutes);
+  }
+
+  function setHours(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, day, val, minutes);
+  }
+
+  function setMinutes(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, day, hours, val);
+  }
+
+  return {
+    day,
+    month,
+    year,
+    hours,
+    minutes,
+    setYear,
+    setMonth,
+    setDay,
+    setHours,
+    setMinutes,
+  };
+}
+
+const VALID_FORMATS = ['DD/MM/YYYY HH:mm', 'DD/MM/YYYY'];
+
+const makeDateTime = (val) => {
+  const date = dayjs(val, VALID_FORMATS, true);
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY HH:mm');
+  }
+  return '';
+};
+
+const DateTimePart = ({ label, ...props }) => {
+  return <DateInputItem {...props}>{label}</DateInputItem>;
+};
+
+export const DateTimeInput = ({ name, ...props }) => {
+  const { t } = useTranslation();
+  const [initial] = useState(props.value);
+  const value = useMemo(() => {
+    if (initial === props.value) {
+      return makeDateTime(props.value);
+    }
+    return props.value;
+  }, [props.value, initial]);
+
+  const datetime = useDateTime(
+    value || makeDateTime(props.defaultValue),
+    props.onChange
+  );
+
+  return (
+    <DateInputContainer>
+      <DateTimePart
+        label={t('form.label.day')}
+        onChange={datetime.setDay}
+        onBlur={(e) => datetime.setDay(e, true)}
+        value={datetime.day}
+        width={2}
+        name={`${name}-day`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.day ? props.error : false}
+        id={`${name}-day`}
+      />
+      <DateTimePart
+        label={t('form.label.month')}
+        onChange={datetime.setMonth}
+        onBlur={(e) => datetime.setMonth(e, true)}
+        value={datetime.month}
+        width={2}
+        name={`${name}-month`}
+        id={`${name}-month`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.month ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.year')}
+        onChange={datetime.setYear}
+        value={datetime.year}
+        width={4}
+        name={`${name}-year`}
+        id={`${name}-year`}
+        maxLength="4"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.year ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.hours')}
+        onChange={datetime.setHours}
+        onBlur={(e) => datetime.setHours(e, true)}
+        value={datetime.hours}
+        width={2}
+        name={`${name}-hours`}
+        id={`${name}-hours`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.hours ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.minutes')}
+        onChange={datetime.setMinutes}
+        onBlur={(e) => datetime.setMinutes(e, true)}
+        value={datetime.minutes}
+        width={2}
+        name={`${name}-minutes`}
+        id={`${name}-minutes`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.minutes ? props.error : false}
+      />
+    </DateInputContainer>
+  );
+};
+
+export default DateTimeInput;

package/src/inputs/FileInput/FileInput.stories.js

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

package/src/inputs/FileInput/__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/FileInput/{index.mdx → doc.mdx}

@@ -12,8 +12,4 @@ Input element of type `file` let the user choose one or more files from their de
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/FileInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/FileInput/__stories__/Default.tsx" />

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

@@ -0,0 +1,24 @@
+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/FileInput/__stories__/Default';
+
+test('renders the All FileInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </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/FileInput/index.tsx

@@ -1,11 +1,10 @@
 import React, { 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 } 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';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -14,16 +13,28 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     limit: {
       maxSize?: number;
     };
+    variant?: 'border' | 'none';
+    buttonVariant?: 'link' | 'button';
+    resetButtonColor?: 'primary' | 'secondary' | 'warning';
+    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, reset, onChange, extra, ...props },
   ref: any
 ) {
   const { t } = useTranslation();
-  const [files, setFiles] = useState<Array<string> | undefined>([]);
+  const variant = extra?.variant || 'none';
+  const buttonVariant = extra?.buttonVariant;
+  const resetButtonColor = extra?.resetButtonColor;
+  const [files, setFiles] = useState<string[] | undefined>([]);
   const handleChange = (e) => {
     const target = e.target as HTMLInputElement;
     const selectedFiles = Array.from(
@@ -36,7 +47,10 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
   };
   return (
     <>
-      <FileUploadContainer hasFiles={files && files.length > 0}>
+      <FileUploadContainer
+        variant={variant}
+        hasFiles={files && files.length > 0}
+      >
         {files?.length ? (
           <>
             <Paragraph>
@@ -44,15 +58,23 @@ 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={buttonVariant}
           disabled={disabled}
           onChange={handleChange}
-          {...{ ...props, required: undefined }}
+          id={name}
+          {...{ ...props, required: undefined, Field: undefined }}
         >
           {files?.length ? t('upload.change_file') : t('upload.choose_file')}
         </FileUpload>
@@ -65,6 +87,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
                 reset({ [name]: '' });
                 setFiles(undefined);
               }}
+              color={resetButtonColor}
             >
               {t('upload.reset_file')}
             </Button>

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

@@ -1,9 +1,12 @@
 import ImageInput from '@digigov/form/inputs/ImageInput';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/ImageInput',
   component: ImageInput,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'ImageInput',
 };
-export * from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export * from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
-export * from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
+export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';

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

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

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 = (_: any) => (
   <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: {
@@ -21,7 +23,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const WithInvalidImageDimension = () => (
+export const WithInvalidImageDimension = (_: any) => (
   <FormBuilder
     fields={FIELDS}
     onSubmit={(data) => {

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

@@ -0,0 +1,32 @@
+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';
+
+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>
+  );
+  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

@@ -1,16 +1,20 @@
 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 * from '@digigov/form/inputs/Input/__stories__/Default';
-export * from '@digigov/form/inputs/Input/__stories__/Integer';
-export * from '@digigov/form/inputs/Input/__stories__/Boolean';
-export * from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
-export * from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
-export * from '@digigov/form/inputs/Input/__stories__/MobilePhone';
-export * from '@digigov/form/inputs/Input/__stories__/AFM';
-export * from '@digigov/form/inputs/Input/__stories__/IBAN';
-export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
-export * from '@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit';
+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 { 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__/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__/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__/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: 'Κινητό τηλέφωνο',
       }}