@digigov/form 1.0.0-079f34f3d → 1.0.0-23c81d9f

package/esm/inputs/OtpInput/index.js

@@ -1,157 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["name", "maxLength"];
-import React, { useState, useCallback } from 'react';
-import SingleCharacterInputs, { SingleCharacterInput } from '@digigov/ui/form/SingleCharacterInputs';
-export var RE_DIGIT = new RegExp(/^\d+$/);
-export var REMOVE_SPACES = new RegExp(/\s+/g);
-
-function useOtp(onChange, maxLength) {
-  var _useState = useState(Array(maxLength).fill('')),
-      _useState2 = _slicedToArray(_useState, 2),
-      otpValues = _useState2[0],
-      setOtpValues = _useState2[1];
-
-  var handleChange = useCallback(function (otp) {
-    setOtpValues(otp);
-    var otpValue = otp.join('');
-    onChange(otpValue);
-  }, [onChange]);
-
-  var setOtp = function setOtp(item, idx) {
-    var updatedOTPValues = _toConsumableArray(otpValues);
-
-    if (item.length === 1 || item.length === 0) {
-      updatedOTPValues[idx] = item[0] || '';
-      handleChange(updatedOTPValues);
-    } else if (item.length === maxLength) {
-      var valueArray = item.split('').slice(0, maxLength);
-      handleChange(valueArray);
-    }
-  };
-
-  var setSelectionRange = useCallback(function (target) {
-    return target.setSelectionRange(0, target.value.length);
-  }, []);
-  var focusToNextInput = useCallback(function (target) {
-    var nextElement = target.nextElementSibling;
-
-    if (nextElement) {
-      nextElement.focus();
-    }
-  }, []);
-  var focusToPrevInput = useCallback(function (target) {
-    var previousElement = target.previousElementSibling;
-
-    if (previousElement) {
-      previousElement.focus();
-    }
-  }, []);
-  var handleKeyDown = useCallback(function (e, idx) {
-    var key = e.key;
-    var target = e.target;
-    var targetValue = target.value;
-    setSelectionRange(target);
-
-    if (key === 'ArrowRight' || key === 'ArrowDown') {
-      e.preventDefault();
-      return focusToNextInput(target);
-    }
-
-    if (key === 'ArrowLeft' || key === 'ArrowUp') {
-      e.preventDefault();
-      return focusToPrevInput(target);
-    }
-
-    if (e.key === 'Backspace' || e.key === 'Delete') {
-      if (targetValue !== '') {
-        targetValue = '';
-      } else {
-        focusToPrevInput(target);
-      }
-
-      setOtp(targetValue, idx);
-      return e.preventDefault();
-    }
-  }, [setOtp, focusToPrevInput, focusToNextInput]);
-  var handleFocus = useCallback(function (e) {
-    var target = e.target;
-    setSelectionRange(target);
-  }, [setSelectionRange]);
-  var handleOtpChange = useCallback(function (e, idx) {
-    var target = e.target;
-    var targetValue = target.value;
-    var isTargetValueDigit = RE_DIGIT.test(targetValue); // We want to pass the empty string when the value is deleted
-    // emptry string replaces the deleted value
-
-    if (isTargetValueDigit || targetValue === '') {
-      setOtp(targetValue, idx);
-
-      if (target.value.length > 1) {
-        target.blur();
-      }
-
-      focusToNextInput(target);
-    }
-  }, [setOtp, handleKeyDown, handleFocus]);
-  var handlePaste = useCallback(function (e) {
-    e.preventDefault();
-    var pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
-
-    if (pastedData) {
-      setOtp(pastedData, 0);
-    }
-  }, []);
-  return {
-    otpValues: otpValues,
-    handleOtpChange: handleOtpChange,
-    handleKeyDown: handleKeyDown,
-    handleFocus: handleFocus,
-    handlePaste: handlePaste
-  };
-}
-
-var SingleCharacterInputPart = function SingleCharacterInputPart(_ref) {
-  var props = _extends({}, _ref);
-
-  return /*#__PURE__*/React.createElement(SingleCharacterInput, props);
-};
-
-export var OtpInput = function OtpInput(_ref2) {
-  var name = _ref2.name,
-      _ref2$maxLength = _ref2.maxLength,
-      maxLength = _ref2$maxLength === void 0 ? 6 : _ref2$maxLength,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
-  var otp = useOtp(props.onChange, maxLength);
-  return /*#__PURE__*/React.createElement(SingleCharacterInputs, null, otp.otpValues.map(function (digit, idx) {
-    return /*#__PURE__*/React.createElement(SingleCharacterInputPart, {
-      name: "".concat(name, "-").concat(idx),
-      type: "text",
-      key: idx,
-      autoComplete: "one-time-code",
-      pattern: "\\d{1}",
-      maxLength: maxLength,
-      value: digit,
-      disabled: props.disabled,
-      "aria-required": props['aria-required'],
-      onChange: function onChange(e) {
-        return otp.handleOtpChange(e, idx);
-      },
-      onInput: function onInput(e) {
-        if (e.target.value === digit) {
-          otp.handleOtpChange(e, idx);
-        }
-      },
-      onKeyDown: function onKeyDown(e) {
-        return otp.handleKeyDown(e, idx);
-      },
-      onFocus: otp.handleFocus,
-      onPaste: otp.handlePaste,
-      error: !digit ? props.error : false
-    });
-  }));
-};
-export default OtpInput;

package/esm/inputs/Radio/Radio.stories.js

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

package/esm/inputs/Radio/Radio.stories.playwright.json

@@ -1,73 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form-inputs-radio--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "keMAaO2G4EzT",
-          "title": "validation error"
-        },
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "ArrowDown"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "ArrowDown"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Enter"
-              }
-            }
-          ],
-          "id": "KOjNMdAt5T_R",
-          "title": "select option with keyboard and submit"
-        }
-      ]
-    },
-    "digigov-form-inputs-radio--conditional": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>div>label>input"
-              }
-            }
-          ],
-          "id": "LAUEuHh58XiI",
-          "title": "Radio conditional action"
-        }
-      ]
-    }
-  }
-}

package/esm/inputs/Radio/__stories__/Conditional.js

@@ -1,95 +0,0 @@
-import React from 'react';
-import FormBuilder, { Field } from '@digigov/form';
-import { Button } from '@digigov/ui/form/Button';
-var fields = [{
-  key: 'landline',
-  type: 'phone_number',
-  label: {
-    secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.'
-  },
-  enabled: false,
-  condition: {
-    auth_form: {
-      is: 'via_mobile_phone',
-      then: {
-        enabled: true,
-        required: true
-      }
-    }
-  }
-}, {
-  key: 'mobile_phone',
-  type: 'mobile_phone',
-  label: {
-    secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.'
-  },
-  enabled: false,
-  condition: {
-    auth_form: {
-      is: 'via_mobile_phone',
-      then: {
-        enabled: true,
-        required: true
-      }
-    }
-  }
-}, {
-  key: 'email',
-  type: 'email',
-  label: {
-    secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.'
-  },
-  enabled: false,
-  condition: {
-    auth_form: {
-      is: 'via_email',
-      then: {
-        enabled: true,
-        required: true
-      }
-    }
-  }
-}, {
-  key: 'auth_form',
-  type: 'choice:single',
-  required: true,
-  label: {
-    primary: 'Επιλέξτε μέθοδο πιστοποίησης',
-    secondary: 'Για την ολοκλήρωση της δήλωσης σας, θα χρειαστεί επιπλέον πιστοποίηση. Θα σας στείλουμε ένα κωδικό μιας χρήσης είτε στο τηλέφωνο είτε στην ηλεκτρονική σας διεύθυνση.'
-  },
-  extra: {
-    options: [{
-      key: 'via_mobile_phone',
-      label: {
-        primary: 'Mέσω κινητού τηλεφώνου'
-      },
-      value: 'via_mobile_phone',
-      show: ['mobile_phone', 'landline']
-    }, {
-      key: 'via_email',
-      label: {
-        primary: 'Μέσω διεύθυνσης ηλεκτρονικού ταχυδρομείου (e-mail)'
-      },
-      value: 'via_email',
-      show: ['email']
-    }]
-  }
-}];
-
-var _ref = /*#__PURE__*/React.createElement(Field, {
-  key: "auth_form",
-  name: "auth_form"
-});
-
-var _ref2 = /*#__PURE__*/React.createElement(Button, {
-  type: "submit"
-}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
-
-export var Conditional = function Conditional() {
-  return /*#__PURE__*/React.createElement(FormBuilder, {
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    },
-    fields: fields
-  }, _ref, _ref2);
-};

package/esm/inputs/Radio/__stories__/Default.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import FormBuilder, { Field } from '@digigov/form';
-import { Button } from '@digigov/ui/form/Button';
-
-var _ref = /*#__PURE__*/React.createElement(Button, {
-  type: "submit"
-}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
-
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(FormBuilder, {
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    }
-  }, /*#__PURE__*/React.createElement(Field, {
-    key: 'string',
-    name: "string",
-    type: "choice:single",
-    required: true,
-    label: {
-      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
-    },
-    extra: {
-      options: [{
-        label: {
-          primary: 'Ελλάδα'
-        },
-        value: 'greece'
-      }, {
-        label: {
-          primary: 'Κύπρος'
-        },
-        value: 'cyprus'
-      }, {
-        label: {
-          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
-        },
-        value: 'eu'
-      }, {
-        label: {
-          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
-        },
-        value: 'usa'
-      }]
-    }
-  }), _ref);
-};
-export default Default;

package/esm/inputs/Radio/__stories__/WithDivider.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import FormBuilder, { Field } from '@digigov/form';
-import { Button } from '@digigov/ui/form/Button';
-
-var _ref = /*#__PURE__*/React.createElement(Button, {
-  type: "submit"
-}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
-
-export var WithDivider = function WithDivider() {
-  return /*#__PURE__*/React.createElement(FormBuilder, {
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    }
-  }, /*#__PURE__*/React.createElement(Field, {
-    key: 'string',
-    name: "string",
-    type: "choice:single",
-    required: true,
-    label: {
-      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
-    },
-    extra: {
-      options: [{
-        label: {
-          primary: 'Ελλάδα'
-        },
-        value: 'greece'
-      }, {
-        label: {
-          primary: 'Κύπρος'
-        },
-        value: 'cyprus'
-      }, {
-        label: {
-          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
-        },
-        value: 'eu'
-      }, {
-        label: {
-          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
-        },
-        value: 'usa',
-        dividerText: 'ή'
-      }]
-    }
-  }), _ref);
-};
-export default WithDivider;

package/esm/inputs/Radio/index.js

@@ -1,61 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "register", "extra", "disabled"],
-    _excluded2 = ["label", "value", "show", "disabled", "selected"];
-import React from 'react';
-import { useWatch } from 'react-hook-form';
-import { Field } from '@digigov/form';
-import { RadioConditional } from '@digigov/react-core';
-import Hint from '@digigov/react-core/Hint';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
-import { useTranslation } from '@digigov/ui/i18n';
-export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
-  var name = _ref.name,
-      control = _ref.control,
-      register = _ref.register,
-      _ref$extra = _ref.extra,
-      options = _ref$extra.options,
-      className = _ref$extra.className,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var currentValue = useWatch({
-    control: control,
-    name: name
-  });
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  return /*#__PURE__*/React.createElement(RadioContainer, {
-    className: className,
-    defaultValue: currentValue,
-    id: name
-  }, options.map(function (_ref2) {
-    var label = _ref2.label,
-        v = _ref2.value,
-        show = _ref2.show,
-        optionDisabled = _ref2.disabled,
-        selected = _ref2.selected,
-        option = _objectWithoutProperties(_ref2, _excluded2);
-
-    return /*#__PURE__*/React.createElement("div", {
-      key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
-      value: v,
-      disabled: disabled || optionDisabled
-    }, option, _extends({}, props, {
-      reset: undefined,
-      required: undefined,
-      'aria-describedby': undefined,
-      type: 'radio'
-    })), label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/React.createElement(RadioConditional, null, show.map(function (fieldName) {
-      return /*#__PURE__*/React.createElement(Field, {
-        name: fieldName,
-        key: fieldName
-      });
-    })));
-  }));
-};
-export default RadioButtonsGroup;

package/esm/inputs/Select/Select.stories.js

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

package/esm/inputs/Select/Select.stories.playwright.json

@@ -1,22 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form-inputs-select--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "selectHtmlOption",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>label>select",
-                "values": "greece"
-              }
-            }
-          ],
-          "id": "nGzokC6y1_5m",
-          "title": "select option"
-        }
-      ]
-    }
-  }
-}

package/esm/inputs/Select/index.js

@@ -1,32 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "extra", "disabled"];
-import React from 'react';
-import SelectContainer from '@digigov/react-core/SelectContainer';
-import SelectOption from '@digigov/react-core/SelectOption';
-export var Select = /*#__PURE__*/React.forwardRef(function WrappedSelect(_ref, ref) {
-  var name = _ref.name,
-      _ref$extra = _ref.extra,
-      options = _ref$extra.options,
-      className = _ref$extra.className,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(SelectContainer, _extends({
-    className: className,
-    ref: ref,
-    name: name,
-    disabled: disabled
-  }, _extends({}, props, {
-    reset: undefined,
-    required: undefined
-  })), options.map(function (_ref2) {
-    var value = _ref2.value,
-        label = _ref2.label;
-    return /*#__PURE__*/React.createElement(SelectOption, {
-      key: value,
-      value: value
-    }, label && label.primary ? label.primary : value);
-  }));
-});
-export default Select;

package/esm/inputs/index.js

@@ -1,8 +0,0 @@
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export { default as OtpInput } from '@digigov/form/inputs/OtpInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';

package/esm/installation.mdx

@@ -1,68 +0,0 @@
----
-id: Installation
-title: Installing Digigov Form
-sidebar_label: Installation
----
-
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import CodeBlock from '@theme/CodeBlock';
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  This page will help you install Digigov Form depending on the framework that
-  you use and the application architecture.
-</LeadText>
-
-We assume that your stack uses some of the following tools.
-
-- React v16 or later
-- Nextjs or create-react-app to run your code
-- Digigov CSS, as a CSS import or as Tailwind plugin
-
-## Using create-digigov-app
-
-We highly recommend using `create-digigov-app`. Our scaffolder was created to save development teams time and effort. This way
-everything you need is already configured.
-
-If you choose to use our scaffolder tool, make sure you follow this
-[guide](/docs/building-apps) first, if you haven't already done so.
-
-Then you just install the `@digigov/form` package from NPM.
-
-<Tabs>
-  <TabItem value="npm" label="NPM" default>
-    <CodeBlock>npm install @digigov/form --save</CodeBlock>
-  </TabItem>
-  <TabItem value="yarn" label="Yarn">
-    <CodeBlock>yarn add @digigov/form</CodeBlock>
-  </TabItem>
-</Tabs>
-
-## Using custom configuration
-
-This method is not recommended and you should proceed at your own risk. For
-Digigov Form to work properly, it is essential to do some configuration.
-
-- A working React application, ideally [Nextjs](https://nextjs.org/) or [Create
-  React App](https://create-react-app.dev/)
-- You should already have [installed and configured Digigov
-  CSS](https://guide.services.gov.gr/docs/installation)
-
-If you meet these prerequisites, now it is time to install the dependencies.
-
-Assuming that you have not used any of the Digigov libraries before, go ahead
-and install `@digigov/form` and it's dependencies.
-
-<Tabs>
-  <TabItem value="npm" label="NPM" default>
-    <CodeBlock>
-      npm install @digigov/form @digigov/ui @digigov/react-core --save
-    </CodeBlock>
-  </TabItem>
-  <TabItem value="yarn" label="Yarn">
-    <CodeBlock>
-      yarn add @digigov/form @digigov/ui @digigov/react-core
-    </CodeBlock>
-  </TabItem>
-</Tabs>

package/esm/internal.js

@@ -1,34 +0,0 @@
-export { default as Field } from '@digigov/form/Field';
-export * from '@digigov/form/Field';
-export { default as FieldArray } from '@digigov/form/FieldArray';
-export * from '@digigov/form/FieldArray';
-export { default as FieldConditional } from '@digigov/form/Field/FieldConditional';
-export * from '@digigov/form/Field/FieldConditional';
-export { default as Fieldset } from '@digigov/form/Fieldset';
-export * from '@digigov/form/Fieldset';
-export { default as FormBuilder } from '@digigov/form/FormBuilder';
-export * from '@digigov/form/FormBuilder';
-export { Step } from '@digigov/form/Questions/Step';
-export * from '@digigov/form/Questions/Step';
-export { default as Questions } from '@digigov/form/Questions';
-export * from '@digigov/form/Questions';
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export * from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export * from '@digigov/form/inputs/DateInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export * from '@digigov/form/inputs/FileInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export * from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export * from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export * from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';
-export * from '@digigov/form/FormContext';
-export * from '@digigov/form/inputs/Select';
-export * from '@digigov/form/inputs';
-export * from '@digigov/form/internal';
-export * from '@digigov/form/types';
-export * from '@digigov/form/utils';
-export * from '@digigov/form/validators';

package/esm/types.js

@@ -1 +0,0 @@
-export {};