@digigov/form 2.0.0-85c27c19 → 2.0.0-8e254888

package/src/inputs/AutoCompleteInput/index.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { Hint } from '@digigov/react-core/Hint';
-import UIAutoComplete, {
+import {
+  AutoComplete,
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
-
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 export interface AutoCompleteInputExtra
   extends Omit<
     UIAutoCompleteProps,
@@ -16,7 +17,7 @@ export interface AutoCompleteInputExtra
     | 'onConfirm'
     | 'dropdownArrow'
   > {
-  options: Array<FieldOptionProps>;
+  options: FieldOptionProps[];
 }
 
 export interface AutoCompleteInputProps
@@ -28,39 +29,43 @@ export interface AutoCompleteInputProps
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options, multiple },
+  type,
+  extra: { options },
   onChange,
   value,
-  error,
   ...props
 }) => {
-  const suggest = useCallback(function suggest(
-    query: string,
-    syncResults: (options: any[]) => void
-  ): void {
-    syncResults(
-      query
-        ? options.filter(function (option) {
-          return (
-            `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
-              }`
-              .toLowerCase()
-              .indexOf(query.toLowerCase()) !== -1
-          );
-        })
-        : options
-    );
-  },
-    [options]);
+  const suggest = useCallback(
+    function suggest(
+      query: string,
+      syncResults: (options: any[]) => void
+    ): void {
+      syncResults(
+        query
+          ? options.filter(function (option) {
+              return (
+                `${option.value} ${option.label?.primary || ''} ${
+                  option.label?.secondary || ''
+                }`
+                  .toLowerCase()
+                  .indexOf(query.toLowerCase()) !== -1
+              );
+            })
+          : options
+      );
+    },
+    [options]
+  );
 
   return (
-    <UIAutoComplete
-      multiple={multiple}
+    <AutoComplete
+      multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
         if (Array.isArray(value)) {
-          const selectedValues = value.map(item => item.value);
-          selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+          const selectedValues = value.map((item) => item.value);
+          if (selectedValues.length > 0) onChange(selectedValues);
+          else onChange(undefined);
         } else {
           onChange(value.value);
         }
@@ -68,10 +73,10 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
       templates={{
         suggestion({ label, value }) {
           return (
-            <div>
+            <Base as="div">
               {(label && label.primary && label.primary) || value}
               {label && label.secondary && <Hint>{label.secondary}</Hint>}
-            </div>
+            </Base>
           );
         },
         inputValue: (option) => {
@@ -85,6 +90,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
         ...props,
         reset: undefined,
         required: undefined,
+        Field: undefined,
       }}
       name={name}
       id={`${name}-id`}
@@ -93,4 +99,4 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   );
 };
 
-export default AutoCompleteInput;
+export default AutoCompleteInput;

package/src/inputs/Checkboxes/{index.mdx → doc.mdx}

@@ -10,24 +10,14 @@ Checkboxes are used to let a user select one or more options of a limited number
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Default.tsx" />
+
 
 ### Conditional
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Conditional.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Conditional.tsx" />
+
 
 ### With divider
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="WithDivider.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/WithDivider.tsx" />

package/src/inputs/Checkboxes/index.tsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import CoreCheckboxes from '@digigov/react-core/Checkbox';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
-import CheckboxItem from '@digigov/react-core/CheckboxItem';
-import Hint from '@digigov/react-core/Hint';
+import {
+  Checkbox,
+  CheckboxItem,
+  CheckboxConditional,
+} from '@digigov/ui/form/Checkbox';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface CheckboxesProps
   extends Omit<ControlledFieldProps, 'extra' | 'value'> {
   value?: string[];
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
   fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
 }
@@ -23,7 +25,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   value,
   extra: { options, className },
   disabled,
-  fieldComponent: Field,
+  Field,
   ...props
 }) => {
   if (!value) value = [];
@@ -56,7 +58,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
     Array<boolean>(options.length).fill(false)
   );
   return (
-    <CoreCheckboxes className={className}>
+    <Checkbox className={className}>
       {options.map(
         (
           {
@@ -73,6 +75,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
             <CheckboxItem
               key={`${name}.${index}`}
               name={`${name}.${v}`}
+              id={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               checked={value?.includes(v)}
@@ -84,6 +87,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 defaultValue: undefined,
                 onBlur: undefined,
                 required: undefined,
+                Field: undefined,
                 'aria-describedby': undefined,
                 type: 'checkbox',
               }}
@@ -103,7 +107,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
           </React.Fragment>
         )
       )}
-    </CoreCheckboxes>
+    </Checkbox>
   );
 };
 

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

@@ -9,21 +9,16 @@ const fields = [
     required: true,
     label: {
       primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
-      secondary:
-        'Για παράδειγμα, 05 11 2020',
-    }
-  },
-]
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
 
 export const Default = () => (
   <FormBuilder onSubmit={() => console.log('kati')}>
-    {fields.map((field) => {
-      return (
-        // @ts-ignore
-        <Field {...field} name={field.key} />
-      )
-    }
-    )}
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );

package/src/inputs/DateInput/{index.mdx → doc.mdx}

@@ -13,11 +13,4 @@ either with a textbox that validates the input or a special date picker interfac
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/DateInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/DateInput/__stories__/Default.tsx" />

package/src/inputs/DateInput/index.tsx

@@ -2,8 +2,10 @@ 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 from '@digigov/react-core/DateInputContainer';
-import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 dayjs.extend(customParseFormat);
 
@@ -34,12 +36,12 @@ function useDate(value, onChange) {
   }
 
   function setYear(evt) {
-    const val = evt.target.value;
+    const val = evt.target.value.trim();
     set(val, month, day);
   }
 
   function setMonth(evt, cast) {
-    let val = evt.target.value;
+    let val = evt.target.value.trim();
     if (cast && val && val.length === 1) {
       val = '0' + val;
     }
@@ -47,7 +49,7 @@ function useDate(value, onChange) {
   }
 
   function setDay(evt, cast) {
-    let val = evt.target.value;
+    let val = evt.target.value.trim();
     if (cast && val && val.length === 1) {
       val = '0' + val;
     }
@@ -75,10 +77,10 @@ const makeDate = (val) => {
 };
 
 const DatePart = ({ label, ...props }) => {
-  return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
+  return <DateInputItem {...props}>{label}</DateInputItem>;
 };
 
-export const DateInput = ({ name, type, ...props }) => {
+export const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
   const [initial] = useState(props.value);
   const value = useMemo(() => {
@@ -99,6 +101,7 @@ export const DateInput = ({ name, type, ...props }) => {
         value={date.day}
         width={2}
         name={`${name}-day`}
+        id={`${name}-day`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -111,6 +114,7 @@ export const DateInput = ({ name, type, ...props }) => {
         value={date.month}
         width={2}
         name={`${name}-month`}
+        id={`${name}-month`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -122,6 +126,7 @@ export const DateInput = ({ name, type, ...props }) => {
         value={date.year}
         width={4}
         name={`${name}-year`}
+        id={`${name}-year`}
         maxLength="4"
         disabled={props.disabled}
         aria-required={props['aria-required']}

package/src/inputs/DateTimeInput/DateTimeInput.stories.js

@@ -0,0 +1,8 @@
+import { Default } from './__stories__/Default';
+
+export default {
+  title: 'Form/Inputs/DateTimeInput',
+  component: Default,
+};
+
+export { Default };

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'datetime-example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const Default = () => (
+  <FormBuilder onSubmit={() => console.log('kati')}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/DateTimeInput/doc.mdx

@@ -0,0 +1,16 @@
+---
+title: DateTime Input
+---
+ 
+# DateTime input
+
+
+
+Input element of type `datetime` create input fields that let the user enter a date and time, 
+either with a textbox that validates the input or a special date picker interface.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/DateTimeInput/__stories__/Default.tsx" />

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

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

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