@digigov/form 0.10.5 → 0.10.7

package/src/inputs/Checkboxes/Checkboxes.stories.playwright.json

@@ -0,0 +1,69 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-checkboxes--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "6mm9fbbYacA3",
+          "title": "show validation error"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Space"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Space"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "hBiOJ8xaQSWv",
+          "title": "Focus and check using keyboard, click box and submit"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="string"
+      type="choice:multiple"
+      required
+      label={{ primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' }}
+      extra={{
+        options: [
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      }}
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default Default;

package/src/inputs/Checkboxes/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import CoreCheckboxes from '@digigov/react-core/Checkbox';
+import CheckboxItem from '@digigov/react-core/CheckboxItem';
+import Hint from '@digigov/react-core/Hint';
+
+export interface CheckboxesProps
+  extends Omit<ControlledFieldProps, 'extra' | 'value'> {
+  value?: string[];
+  extra: {
+    className?: string;
+    options: Array<FieldOptionProps>;
+  };
+}
+
+export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
+  name,
+  onChange,
+  value,
+  extra: { options, className },
+  disabled,
+  ...props
+}) {
+  if (!value) value = [];
+  const handleChange = (optionValue) => (evt): void => {
+    let newValue;
+    if (evt.currentTarget.checked) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      newValue = value.concat([optionValue]);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      newValue = value.filter((val) => val !== optionValue);
+    }
+    // reset value to undefined instead of an empty array
+    // so the error state mechanism can throw validation errors
+    if (newValue.length === 0) newValue = undefined;
+    onChange(newValue);
+  };
+  const { t } = useTranslation();
+  return (
+    <CoreCheckboxes className={className}>
+      {options.map((option, key) => (
+        <CheckboxItem
+          name={name}
+          disabled={disabled}
+          key={key}
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          checked={value.includes(option.value)}
+          onChange={handleChange(option.value)}
+          {...option}
+          {...{
+            ...props,
+            reset: undefined,
+            defaultValue: undefined,
+            onBlur: undefined,
+            required: undefined,
+            'aria-describedby': undefined,
+            type: 'checkbox',
+          }}
+        >
+          {(option.label && option.label.primary && t(option.label.primary)) ||
+            value}
+          {option.label && option.label.secondary && (
+            <Hint>{t(option.label.secondary)}</Hint>
+          )}
+        </CheckboxItem>
+      ))}
+    </CoreCheckboxes>
+  );
+};
+
+export default Checkboxes;

package/src/inputs/DateInput/DateInput.stories.js

@@ -0,0 +1,6 @@
+import DateInput from '@digigov/form/inputs/DateInput';
+export default {
+  title: 'Digigov Form/inputs/DateInput',
+  component: DateInput,
+};
+export * from '@digigov/form/inputs/DateInput/__stories__/Default';

package/src/inputs/DateInput/DateInput.stories.playwright.json

@@ -0,0 +1,72 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-dateinput--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "n5PFnx7RcuJV",
+          "title": "navigate with keyboard"
+        },
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input",
+                "text": "33"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(2)>label>input",
+                "text": "33"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(3)>label>input",
+                "text": "3333"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "Ck7_BFdgITMe",
+          "title": "show validation errors"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="string"
+      type="date"
+      required
+      label={{
+        primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+        secondary: 'Για παράδειγμα, 05 11 2020',
+      }}
+      extra={{
+        options: [
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      }}
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/DateInput/index.tsx

@@ -0,0 +1,130 @@
+import React, { useMemo, useState } from 'react';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import DateInputContainer from '@digigov/react-core/DateInputContainer';
+import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+dayjs.extend(customParseFormat);
+
+export interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    max?: string;
+    min?: string;
+  };
+}
+
+function useDate(value, onChange) {
+  const [year, month, day] = useMemo(() => {
+    if (!value || value.length === '') {
+      return ['', '', ''];
+    }
+    const [day, month, year] = value.split('/');
+    return [year, month, day];
+  }, [value]);
+
+  function set(year, month, day) {
+    const value = `${day || ''}/${month || ''}/${year || ''}`;
+    if (!year && !month && !day) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  }
+
+  function setYear(evt) {
+    const val = evt.target.value;
+    set(val, month, day);
+  }
+
+  function setMonth(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, val, day);
+  }
+
+  function setDay(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, val);
+  }
+
+  return {
+    day,
+    month,
+    year,
+    setYear,
+    setMonth,
+    setDay,
+  };
+}
+
+const VALID_FORMATS = ['DD/MM/YYYY'];
+
+const makeDate = (val) => {
+  const date = dayjs(val, VALID_FORMATS, true);
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY');
+  }
+  return '';
+};
+
+const DatePart = ({ label, ...props }) => {
+  return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
+};
+
+export const DateInput = function DateInput({ name, type, ...props }) {
+  const { t } = useTranslation();
+  const [initial] = useState(props.value);
+  const value = useMemo(() => {
+    if (initial === props.value) {
+      return makeDate(props.value);
+    }
+    return props.value;
+  }, [props.value, initial]);
+
+  const date = useDate(value || makeDate(props.defaultValue), props.onChange);
+
+  return (
+    <DateInputContainer>
+      <DatePart
+        label={t('form.label.day')}
+        onChange={date.setDay}
+        onBlur={(e) => date.setDay(e, true)}
+        value={date.day}
+        width={2}
+        name={`${name}-day`}
+        maxlength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+      />
+      <DatePart
+        label={t('form.label.month')}
+        onChange={date.setMonth}
+        onBlur={(e) => date.setMonth(e, true)}
+        value={date.month}
+        width={2}
+        name={`${props.name}-month`}
+        maxlength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+      />
+      <DatePart
+        label={t('form.label.year')}
+        onChange={date.setYear}
+        value={date.year}
+        width={4}
+        name={`${props.name}-year`}
+        maxlength="4"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+      />
+    </DateInputContainer>
+  );
+};
+
+export default DateInput;

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

@@ -0,0 +1,6 @@
+import FileInput from '@digigov/form/inputs/FileInput';
+export default {
+  title: 'Digigov Form/inputs/FileInput',
+  component: FileInput,
+};
+export * from '@digigov/form/inputs/FileInput/__stories__/Default';

package/src/inputs/FileInput/FileInput.stories.playwright.json

@@ -0,0 +1,75 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-fileinput--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "c4Jhtju9oCJZ",
+          "title": "show validation error"
+        },
+        {
+          "actions": [
+            {
+              "name": "setFiles",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>label",
+                "file": {
+                  "name": "arxeio.txt",
+                  "size": 200
+                }
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>button"
+              }
+            }
+          ],
+          "id": "WPIcVVWz-299",
+          "title": "add file and remove"
+        },
+        {
+          "actions": [
+            {
+              "name": "setFiles",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>label",
+                "file": {
+                  "name": "arxeio.txt",
+                  "size": 200
+                }
+              }
+            },
+            {
+              "name": "setFiles",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>label",
+                "file": {
+                  "name": "neo_arxeio.txt",
+                  "size": 200
+                }
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "inSBFd25dzkC",
+          "title": "add file, replace and remove"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="file"
+      type="file"
+      required
+      label={{ primary: 'Βιογραφικό σημείωμα' }}
+    />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default Default;

package/src/inputs/FileInput/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import CoreHint from '@digigov/react-core/Hint';
+import Button from '@digigov/ui/core/Button';
+import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
+import FileUpload from '@digigov/react-core/FileUpload';
+export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    className?: string;
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+  };
+}
+
+// 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 },
+  ref: any
+) {
+  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);
+  };
+  return (
+    <>
+      <FileUploadContainer hasUploadedFile={files && files.length > 0}>
+        {files?.length ? (
+          <>
+            <Paragraph>
+              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}
+            </Paragraph>
+          </>
+        ) : (
+          <CoreHint>{t('upload.no_file')}</CoreHint>
+        )}
+        <FileUpload
+          ref={ref}
+          hasFiles={!!files?.length}
+          name={name}
+          disabled={disabled}
+          onChange={handleChange}
+          {...{ ...props, required: undefined }}
+        >
+          {files?.length ? t('upload.change_file') : t('upload.choose_file')}
+        </FileUpload>
+        {files !== undefined && files.length > 0 && (
+          <>
+            <Button
+              variant="link"
+              onClick={(event) => {
+                event.preventDefault();
+                reset({ [name]: '' });
+                setFiles(undefined);
+              }}
+            >
+              {t('upload.reset_file')}
+            </Button>
+          </>
+        )}
+      </FileUploadContainer>
+    </>
+  );
+});
+
+export default FileInput;

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

@@ -0,0 +1,13 @@
+import Input from '@digigov/form/inputs/Input';
+export default {
+  title: 'Digigov Form/inputs/Input',
+  component: 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__/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';