@digigov/form 2.0.0-aefd0709 → 2.0.0-b15d5d44

package/src/inputs/DateTimeInput/index.tsx

@@ -0,0 +1,189 @@
+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}
+      />
+      <DateTimePart
+        label={t('form.label.month')}
+        onChange={datetime.setMonth}
+        onBlur={(e) => datetime.setMonth(e, true)}
+        value={datetime.month}
+        width={2}
+        name={`${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`}
+        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`}
+        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`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.minutes ? props.error : false}
+      />
+    </DateInputContainer>
+  );
+};
+
+export default DateTimeInput;

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

@@ -1,21 +1,20 @@
 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';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All FileInput variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/FileInput/index.tsx

@@ -51,7 +51,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
           name={name}
           disabled={disabled}
           onChange={handleChange}
-          {...{ ...props, required: undefined }}
+          {...{ ...props, required: undefined, Field: undefined }}
         >
           {files?.length ? t('upload.change_file') : t('upload.choose_file')}
         </FileUpload>

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

@@ -1,33 +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';
 import { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 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>
-      <TestVariant title="WithInvalidImageSize">
-        <WithInvalidImageSize />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <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);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/ImageInput/index.tsx

@@ -90,7 +90,12 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
                 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,6 +5,7 @@ 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';

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/index.test.tsx

@@ -1,5 +1,6 @@
 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 { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
 import { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
@@ -9,49 +10,51 @@ 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';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Input variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="AFM">
-        <AFM />
-      </TestVariant>
-      <TestVariant title="Boolean">
-        <Boolean />
-      </TestVariant>
-      <TestVariant title="IBAN">
-        <IBAN />
-      </TestVariant>
-      <TestVariant title="Integer">
-        <Integer />
-      </TestVariant>
-      <TestVariant title="LandlineNumber">
-        <LandlineNumber />
-      </TestVariant>
-      <TestVariant title="MobilePhone">
-        <MobilePhone />
-      </TestVariant>
-      <TestVariant title="PhoneNumber">
-        <PhoneNumber />
-      </TestVariant>
-      <TestVariant title="PostalCode">
-        <PostalCode />
-      </TestVariant>
-      <TestVariant title="String">
-        <String />
-      </TestVariant>
-      <TestVariant title="TextWithLimit">
-        <TextWithLimit />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="AFM">
+      <AFM />
+    </TestVariant>
+    <TestVariant title="Boolean">
+      <Boolean />
+    </TestVariant>
+    <TestVariant title="IBAN">
+      <IBAN />
+    </TestVariant>
+    <TestVariant title="Integer">
+      <Integer />
+    </TestVariant>
+    <TestVariant title="LandlineNumber">
+      <LandlineNumber />
+    </TestVariant>
+    <TestVariant title="MobilePhone">
+      <MobilePhone />
+    </TestVariant>
+    <TestVariant title="PhoneNumber">
+      <PhoneNumber />
+    </TestVariant>
+    <TestVariant title="PostalCode">
+      <PostalCode />
+    </TestVariant>
+    <TestVariant title="String">
+      <String />
+    </TestVariant>
+    <TestVariant title="StringWithTrimValidation">
+      <StringWithTrimValidation />
+    </TestVariant>
+    <TestVariant title="TextWithLimit">
+      <TextWithLimit />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/Input/index.tsx

@@ -74,6 +74,7 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
               reset: undefined,
               required: undefined,
               type: fieldType,
+              Field: undefined,
             }}
           />
           {limit?.max && (
@@ -92,11 +93,17 @@ 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,
+            Field: undefined,
+          }}
         />
       );
     }

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

@@ -1,21 +1,20 @@
 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/Label/__stories__/Default';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Label variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

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

@@ -1,21 +1,20 @@
 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/OtpInput/__stories__/Default';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All OtpInput variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

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

@@ -1,29 +1,28 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Conditional } from '@digigov/form/inputs/Radio/__stories__/Conditional';
 import { Default } from '@digigov/form/inputs/Radio/__stories__/Default';
 import { WithDivider } from '@digigov/form/inputs/Radio/__stories__/WithDivider';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Radio variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Conditional">
-        <Conditional />
-      </TestVariant>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-      <TestVariant title="WithDivider">
-        <WithDivider />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Conditional">
+      <Conditional />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithDivider">
+      <WithDivider />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/Radio/index.tsx

@@ -118,6 +118,7 @@ export const ControlledRadioButtonsGroup: React.FC<
                 reset: undefined,
                 required: undefined,
                 error: undefined,
+                Field: undefined,
                 'aria-describedby': undefined,
                 type: 'radio',
               }}

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

@@ -1,21 +1,20 @@
 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/Select/__stories__/Default';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Select variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/Select/index.tsx

@@ -24,7 +24,12 @@ export const Select: React.ExoticComponent<SelectProps> = React.forwardRef(
         ref={ref}
         name={name}
         disabled={disabled}
-        {...{ ...props, reset: undefined, required: undefined }}
+        {...{
+          ...props,
+          reset: undefined,
+          required: undefined,
+          Field: undefined,
+        }}
       >
         {options.map(({ value, label }) => (
           <SelectOption key={value} value={value}>