@digigov/form 2.0.0-0edebf87 → 2.0.0-2445d5cb

package/inputs/Input/__stories__/Default/index.js

@@ -1,23 +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: "business-title",
-    name: "business-title",
-    type: "string",
-    label: {
-      primary: 'Όνομα επιχείρησης',
-      secondary: 'Εισάγετε μια σειρά από χαρακτήρες και αριθμούς'
-    },
-    required: true
-  }), _ref);
-};
-export default Default;

package/inputs/Input/__stories__/Default.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
-export default Default;

package/inputs/Input/__stories__/TextWithCharacterLimit/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import FormBuilder, { Field } from '@digigov/form';
-import { Button } from '@digigov/ui/form';
-var _ref = /*#__PURE__*/React.createElement(Button, {
-  type: "submit"
-}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
-export var TextWithCharacterLimit = function TextWithCharacterLimit() {
-  return /*#__PURE__*/React.createElement(FormBuilder, {
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    }
-  }, /*#__PURE__*/React.createElement(Field, {
-    key: "text",
-    name: "text",
-    type: "text",
-    label: {
-      primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;'
-    },
-    required: true,
-    extra: {
-      limit: {
-        min: 3,
-        max: 10
-      },
-      multiline: true
-    }
-  }), _ref);
-};
-export default TextWithCharacterLimit;

package/inputs/Input/__stories__/TextWithCharacterLimit/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../../../cjs/inputs/Input/__stories__/TextWithCharacterLimit/index.js"
-}

package/inputs/Input/__stories__/TextWithCharacterLimit.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const TextWithCharacterLimit: () => JSX.Element;
-export default TextWithCharacterLimit;

package/inputs/Input/index.mdx

@@ -1,95 +0,0 @@
----
-title: Input
----
- 
-# Input
-
-
-
-The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user; 
-a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="Default.tsx"
-/>
-
-### Boolean
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="Boolean.tsx"
-/>
-### AFM
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="AFM.tsx"
-/>
-
-### IBAN
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="IBAN.tsx"
-/>
-
-### Integer
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="Default.tsx"
-/>
-
-### Landline number
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="LandlineNumber.tsx"
-/>
-
-### Mobile phone 
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="MobilePhone.tsx"
-/>
-
-### Phone number
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="PhoneNumber.tsx"
-/>
-
-### Postal code 
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="PostalCode.tsx"
-/>
-
-### Text with character limit 
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Input"
-  story="TextWithCharacterLimit.tsx"
-/>
-
-
-
-

package/inputs/Label/Label.stories.playwright.json

@@ -1,40 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form-inputs-label--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "ooEeQHqEWAfT",
-          "title": "Validation"
-        },
-        {
-          "actions": [
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>label>input",
-                "text": "Hello"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "q4WekeUxbs0v",
-          "title": "add text"
-        }
-      ]
-    }
-  }
-}

package/inputs/OtpInput/index.mdx

@@ -1,23 +0,0 @@
----
-title: OTP Input
----
- 
-# OTP input
-
-
-
-A one-time password (OTP) input element of type `otp`, also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or transaction, 
-on a computer system or other digital device.
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/OtpInput"
-  story="Default.tsx"
-/>
-
-
-

package/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/inputs/Radio/index.mdx

@@ -1,33 +0,0 @@
----
-title: Radio
----
- 
-# Radio
-Input element of type `radio` are generally used in radio groups—collections of radio buttons describing a set of related options.
-Radios are used to let a user select one option of a limited number of choices.
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="Default.tsx"
-/>
-
-### Conditional
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="Conditional.tsx"
-/>
-
-### With divider
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Radio"
-  story="WithDivider.tsx"
-/>

package/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/inputs/Select/index.mdx

@@ -1,17 +0,0 @@
----
-title: Select
----
- 
-# Select
-
-The select element represents a control that provides a menu of options.
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/Select"
-  story="Default.tsx"
-/>

package/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/src/Field/utils.ts

@@ -1,191 +0,0 @@
-import { useContext, useMemo } from 'react';
-import {
-  CalculatedField,
-  FieldComponentRegistry,
-  FieldProps,
-  FieldWithCondition,
-  UseFieldProps,
-} from '@digigov/form/Field/types';
-import { FormContext } from '@digigov/form/FormContext';
-import Checkboxes from '@digigov/form/inputs/Checkboxes';
-import DateInput from '@digigov/form/inputs/DateInput';
-import FileInput from '@digigov/form/inputs/FileInput';
-import ImageInput from '@digigov/form/inputs/ImageInput';
-import Input from '@digigov/form/inputs/Input';
-import OtpInput from '@digigov/form/inputs/OtpInput';
-import Radio from '@digigov/form/inputs/Radio';
-import Select from '@digigov/form/inputs/Select';
-import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
-import { FieldSpec } from '@digigov/form/types';
-
-
-const FIELD_COMPONENTS: FieldComponentRegistry = {
-  text: {
-    component: Input,
-  },
-  string: {
-    component: Input,
-  },
-  file: {
-    wrapper: 'fieldset',
-    component: FileInput,
-  },
-  image: {
-    wrapper: 'fieldset',
-    component: ImageInput,
-  },
-  date: {
-    wrapper: 'fieldset',
-    controlled: true,
-    component: DateInput,
-  },
-  otp: {
-    wrapper: 'fieldset',
-    controlled: true,
-    component: OtpInput,
-  },
-  'choice:multiple': {
-    wrapper: 'fieldset',
-    controlled: true,
-    component: Checkboxes,
-  },
-  'choice:single': {
-    wrapper: 'fieldset',
-    controlled: false,
-    component: Radio,
-  },
-};
-
-const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {
-  Select: {
-    component: Select,
-    controlled: false,
-  },
-  AutoComplete: {
-    component: AutoCompleteInput,
-    controlled: true,
-    wrapper: 'fieldset'
-  },
-};
-
-export function calculateField(
-  children: FieldProps['children'],
-  field: FieldSpec,
-  componentRegistry?: FieldComponentRegistry
-): CalculatedField {
-  const calculatedField = { ...field };
-  const fieldComponentRegistry = { ...FIELD_COMPONENTS, ...componentRegistry };
-  if (children) {
-    calculatedField.component = children;
-    calculatedField.controlled = true;
-  } else if (typeof field.component === 'function') {
-    // leave as is
-  } else if (!field.component && !field.type) {
-    calculatedField.component = fieldComponentRegistry.string.component;
-    calculatedField.controlled =
-      fieldComponentRegistry.string?.controlled || false;
-  } else if (
-    typeof field?.extra?.component === 'string' &&
-    ALTERNATIVE_COMPONENTS[field.extra.component]
-  ) {
-    calculatedField.controlled =
-      ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;
-    calculatedField.component =
-      ALTERNATIVE_COMPONENTS[field.extra.component].component;
-      calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
-  } else if (
-    !field.component &&
-    field.type &&
-    fieldComponentRegistry[field.type]
-  ) {
-    calculatedField.component = fieldComponentRegistry[field.type].component;
-    calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
-    calculatedField.controlled =
-      fieldComponentRegistry[field.type]?.controlled || false;
-  } else {
-    calculatedField.component = fieldComponentRegistry.string.component;
-    calculatedField.controlled =
-      fieldComponentRegistry.string?.controlled || false;
-  }
-  return calculatedField as CalculatedField;
-}
-
-export const useField = (
-  name: string,
-  customField: FieldSpec | null
-): UseFieldProps => {
-  const {
-    fieldsMap,
-    control,
-    register,
-    reset,
-    trigger,
-    clearErrors,
-    errors,
-    registerField,
-    watch,
-    componentRegistry,
-    getFieldState,
-    setValue,
-    getValues,
-    unregister,
-    formState,
-  } = useContext(FormContext);
-
-  if (!registerField) {
-    throw new Error(`
-      You can't use the Field component without wrapping it in FormBuilder.
-      https://devs.pages.grnet.gr/digigov/digigov-sdk/sdk-docs/forms/create-simple-form/
-    `);
-  }
-
-  useMemo(
-    () => customField?.type && registerField({ ...customField, key: name }),
-    [customField, name, registerField]
-  );
-  return {
-    field: customField || fieldsMap[name],
-    control,
-    register,
-    reset,
-    trigger,
-    watch,
-    componentRegistry,
-    getFieldState,
-    setValue,
-    clearErrors,
-    getValues,
-    unregister,
-    formState,
-    error: errors[name],
-  };
-};
-
-export function evaluateFieldWithConditions(
-  field: FieldWithCondition,
-  variables: FormData
-): CalculatedField {
-  const newField = { ...field };
-  if (variables) {
-    for (const key in variables) {
-      if (field.condition[key] && field.condition[key].is) {
-        const is = field.condition[key].is;
-        if (
-          is === variables[key] ||
-          (Array.isArray(variables[key]) && variables[key].includes(is))
-        ) {
-          const then = field.condition[key].then || {};
-          for (const attr in then) {
-            newField[attr] = then[attr];
-          }
-        }
-      } else if (field.condition[key]) {
-        const otherwise = field.condition[key].else || {};
-        for (const attr in otherwise) {
-          newField[attr] = otherwise[attr];
-        }
-      }
-    }
-  }
-  return newField;
-}