@digigov/form 0.10.7 → 0.10.8

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

@@ -1,69 +0,0 @@
-{
-  "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

@@ -1,39 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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.playwright.json

@@ -1,72 +0,0 @@
-{
-  "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

@@ -1,41 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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.playwright.json

@@ -1,75 +0,0 @@
-{
-  "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

@@ -1,23 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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;