@digigov/form 0.10.8 → 0.10.10

package/src/inputs/AutoComplete/index.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+import UIAutoComplete, {
+  AutoCompleteProps as UIAutoCompleteProps,
+} from '@digigov/ui/admin/AutoComplete';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
+import { Hint } from '@digigov/react-core';
+
+export interface AutoCompleteExtra
+  extends Omit<
+    UIAutoCompleteProps,
+    | 'source'
+    | 'id'
+    | 'templates'
+    | 'defaultValue'
+    | 'onConfirm'
+    | 'dropdownArrow'
+  > {
+  options: Array<FieldOptionProps>;
+}
+
+export interface AutoCompleteProps
+  extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'extra'> {
+  extra: AutoCompleteExtra;
+  value: string;
+  onChange: (v: string) => void;
+}
+
+export const AutoComplete: React.FC<AutoCompleteProps> = ({
+  name,
+  extra: { options },
+  onChange,
+  value,
+  ...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
+            );
+          })
+        : []
+    );
+  },
+  []);
+
+  return (
+    <UIAutoComplete
+      source={suggest}
+      onConfirm={(value) => {
+        onChange(value.value);
+      }}
+      templates={{
+        suggestion({ label, value }) {
+          return (
+            <div>
+              {(label && label.primary && label.primary) || value}
+              {label && label.secondary && <Hint>{label.secondary}</Hint>}
+            </div>
+          );
+        },
+        inputValue: (option) => {
+          if (!option) {
+            return '';
+          }
+          return option.label.primary || option.value;
+        },
+      }}
+      {...props}
+      id={`${name}-id`}
+      defaultValue={value}
+    />
+  );
+};
+
+export default AutoComplete;

package/src/inputs/Checkboxes/Checkboxes.stories.js

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

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,7 @@
+import DateInput from '@digigov/form/inputs/DateInput';
+export default {
+  title: 'Digigov Form/inputs/DateInput',
+  component: DateInput,
+  displayName: '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,7 @@
+import FileInput from '@digigov/form/inputs/FileInput';
+export default {
+  title: 'Digigov Form/inputs/FileInput',
+  component: FileInput,
+  displayName: '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;