@digigov/form 0.13.2 → 1.0.0-00643e1d

package/inputs/Select/__stories__/Default.js

@@ -13,13 +13,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _form = _interopRequireWildcard(require("@digigov/form"));
 
-var _core = require("@digigov/ui/core");
+var _Button = require("@digigov/ui/form/Button");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
   type: "submit"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
@@ -34,7 +34,7 @@ var Default = function Default() {
     type: "choice:single",
     required: true,
     label: {
-      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+      primary: 'Ποιά είναι η χώρα της διαμονής σας;'
     },
     extra: {
       component: 'Select',

package/inputs/Select/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
 export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra: {
         className?: string;

package/installation.mdx

@@ -7,39 +7,35 @@ 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";
+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.
+  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 
+- 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
+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>
+    <CodeBlock>npm install @digigov/form --save</CodeBlock>
   </TabItem>
   <TabItem value="yarn" label="Yarn">
-    <CodeBlock>
-      yarn add @digigov/form
-    </CodeBlock>
+    <CodeBlock>yarn add @digigov/form</CodeBlock>
   </TabItem>
 </Tabs>
 
@@ -48,9 +44,9 @@ Then you just install the `@digigov/form` package from NPM.
 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
+- 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
+- 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.
@@ -69,4 +65,4 @@ and install `@digigov/form` and it's dependencies.
       yarn add @digigov/form @digigov/ui @digigov/react-core
     </CodeBlock>
   </TabItem>
-</Tabs>
+</Tabs>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/form",
-  "version": "0.13.2",
+  "version": "1.0.0-00643e1d",
   "description": "@digigov form builder",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -16,12 +16,12 @@
     "google-libphonenumber": "3.2.8",
     "dayjs": "1.10.4",
     "@hookform/resolvers": "2.9.6",
-    "publint": "0.1.8"
+    "publint": "0.1.8",
+    "@digigov/react-icons": "1.0.0-00643e1d"
   },
   "peerDependencies": {
-    "@digigov/ui": "0.35.5",
-    "@digigov/react-core": "0.26.0",
-    "@digigov/react-extensions": "0.23.5",
+    "@digigov/ui": "1.0.0-00643e1d",
+    "@digigov/react-core": "1.0.0-00643e1d",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/src/Field/FieldBase.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { Controller } from 'react-hook-form';
 import FieldBaseContainer from '@digigov/form/Field/FieldBaseContainer';
 import { FieldBaseProps } from '@digigov/form/Field/types';
-import { Controller } from 'react-hook-form';
 
 export const FieldBase: React.FC<FieldBaseProps> = (props) => {
   const {

package/src/Field/FieldBaseContainer.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
+import { FieldContainerProps } from '@digigov/form/Field/types';
+import Label from '@digigov/form/inputs/Label';
+import ErrorMessage from '@digigov/react-core/ErrorMessage';
 import FieldContainer from '@digigov/react-core/FieldContainer';
-import LabelContainer from '@digigov/react-core/LabelContainer';
 import CoreFieldset from '@digigov/react-core/Fieldset';
-import Hint from '@digigov/react-core/Hint';
 import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import ErrorMessage from '@digigov/react-core/ErrorMessage';
-import { useTranslation } from '@digigov/ui/app/i18n';
-import { FieldContainerProps } from '@digigov/form/Field/types';
-import Label from '@digigov/form/inputs/Label';
+import Hint from '@digigov/react-core/Hint';
+import LabelContainer from '@digigov/react-core/LabelContainer';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
   name,
@@ -26,7 +26,7 @@ export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
     return (
       <FieldContainer error={!!error} {...layout}>
         <CoreFieldset>
-          <FieldsetLegend size="s">{label && label.primary}</FieldsetLegend>
+          <FieldsetLegend size="sm">{label && label.primary}</FieldsetLegend>
           {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
           {error && (
             <ErrorMessage id={`${name}-error`}>

package/src/Field/FieldConditional.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
-import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
 import {
   ChildFieldMemoProps,
   FieldConditionalProps,
 } from '@digigov/form/Field/types';
+import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
 
 const ChildFieldMemo = React.memo(
   function ChildField({

package/src/Field/index.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
+import FieldConditional from '@digigov/form/Field/FieldConditional';
 import {
   FieldWithCondition,
   CalculatedField,
   FieldProps,
 } from '@digigov/form/Field/types';
-import FieldConditional from '@digigov/form/Field/FieldConditional';
 import { useField, calculateField } from '@digigov/form/Field/utils';
 import FieldArray from '@digigov/form/FieldArray';
 import Multiplicity from '@digigov/form/MultiplicityField';

package/src/Field/utils.ts

@@ -6,16 +6,16 @@ import {
   FieldWithCondition,
   UseFieldProps,
 } from '@digigov/form/Field/types';
-import { FieldSpec } from '@digigov/form/types';
-
-import Input from '@digigov/form/inputs/Input';
+import { FormContext } from '@digigov/form/FormContext';
 import Checkboxes from '@digigov/form/inputs/Checkboxes';
-import Radio from '@digigov/form/inputs/Radio';
-import Select from '@digigov/form/inputs/Select';
-import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
+import FileInput from '@digigov/form/inputs/FileInput';
+import Input from '@digigov/form/inputs/Input';
 import OtpInput from '@digigov/form/inputs/OtpInput';
-import { FormContext } from '@digigov/form/FormContext';
+import Radio from '@digigov/form/inputs/Radio';
+import Select from '@digigov/form/inputs/Select';
+import { FieldSpec } from '@digigov/form/types';
+
 const AutoComplete = lazy(() => import('@digigov/form/inputs/AutoComplete'));
 
 const FIELD_COMPONENTS: FieldComponentRegistry = {

package/src/FieldArray/FieldArray.stories.js

@@ -2,7 +2,7 @@ import FieldArray from '@digigov/form/FieldArray';
 export default {
   title: 'Digigov Form/FieldArray',
   component: FieldArray,
-  displayName: 'FieldArray'
+  displayName: 'FieldArray',
 };
 export * from '@digigov/form/FieldArray/__stories__/Default';
 export * from '@digigov/form/FieldArray/__stories__/WithExactLength';

package/src/FieldArray/__stories__/Default.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/FieldArray/__stories__/WithExactLength.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/FieldArray/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+import { FieldProps } from '@digigov/form/Field/types';
 import FieldObject from '@digigov/form/FieldObject';
-import { Button, Card, Hint } from '@digigov/ui';
 import { FieldsetLabel } from '@digigov/form/Fieldset';
 import Fieldset from '@digigov/react-core/Fieldset';
-import { FieldProps } from '@digigov/form/Field/types';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
+import { Button, Card, Hint } from '@digigov/ui';
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];

package/src/FieldObject/index.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
-import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
-import { useTranslation } from '@digigov/ui/app/i18n';
+import { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
+import { CalculatedField, FieldProps } from '@digigov/form/Field/types';
 import { calculateField } from '@digigov/form/Field/utils';
-import { FieldsetLegend } from '@digigov/react-core';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
+import { FieldsetLegend } from '@digigov/react-core';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   control: UseFormReturn['control'];
@@ -30,7 +30,7 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   return (
     <Fieldset>
       {label?.primary && (
-        <FieldsetLegend size="s">{t(label.primary)}</FieldsetLegend>
+        <FieldsetLegend size="sm">{t(label.primary)}</FieldsetLegend>
       )}
       {label?.secondary && (
         <FieldsetCaption>{t(label.secondary)}</FieldsetCaption>

package/src/Fieldset/FieldsetWithContext.tsx

@@ -1,14 +1,14 @@
 import React, { useContext, useMemo } from 'react';
-import { FormContext } from '@digigov/form/FormContext';
-import { FieldsetSpec } from '@digigov/form/types';
 import Field from '@digigov/form/Field';
-import { useTranslation } from '@digigov/ui/app/i18n';
 import {
   Fieldset,
   FieldsetLabel,
   FieldsetCaption,
   FieldsetBody,
 } from '@digigov/form/Fieldset/';
+import { FormContext } from '@digigov/form/FormContext';
+import { FieldsetSpec } from '@digigov/form/types';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export const FieldsetWithContext: React.FC<{ name: string }> = ({ name }) => {
   const { label, body, fields } = useFieldset(name);

package/src/Fieldset/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import Grid from '@digigov/ui/layouts/Grid';
-import Fieldset from '@digigov/react-core/Fieldset';
-import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
-import NormalText from '@digigov/ui/typography/NormalText';
 import {
   FieldsetLabelProps,
   FieldsetCaptionProps,
   FieldsetBodyProps,
 } from '@digigov/form/Fieldset/types';
+import Fieldset from '@digigov/react-core/Fieldset';
+import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
+import Hint from '@digigov/react-core/Hint';
+import Grid from '@digigov/ui/layouts/Grid';
+import NormalText from '@digigov/ui/typography/NormalText';
 
 export const FieldsetLabel: React.FC<FieldsetLabelProps> = ({
   children,

package/src/Fieldset/types.tsx

@@ -1,6 +1,6 @@
-import { FieldsetLegendProps } from "@digigov/react-core/FieldsetLegend";
-import { HintProps } from "@digigov/react-core/Hint";
+import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
+import { HintProps } from '@digigov/react-core/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
-export interface FieldsetCaptionProps extends HintProps{}
+export interface FieldsetCaptionProps extends HintProps {}
 export interface FieldsetBodyProps {}

package/src/FormBuilder/FormBuilder.mdx

@@ -4,23 +4,25 @@ title: FormBuilder
 sidebar_label: FormBuilder
 ---
 
-`FormBuilder` is a React component that provides an easy way to efficiently create reusable form page. Forms are a flexible mechanism for collecting user input because there are suitable widgets for entering many different types of data, including text boxes, checkboxes, radio buttons, dropdowns and so on  for submission to a server. Actually when we use `stepForm` for building step-forms all we do is to render `FormBuilder` component.
+`FormBuilder` is a React component that provides an easy way to efficiently create reusable form page. Forms are a flexible mechanism for collecting user input because there are suitable widgets for entering many different types of data, including text boxes, checkboxes, radio buttons, dropdowns and so on for submission to a server. Actually when we use `stepForm` for building step-forms all we do is to render `FormBuilder` component.
 
-`stepForm` component: 
+`stepForm` component:
 
-<Story packageName="@digigov/form" component="FormBuilder" story="Default.tsx" />
+<Story
+  packageName="@digigov/form"
+  component="FormBuilder"
+  story="Default.tsx"
+/>
 
 ### Importing and using FormBuilder Component
 
 To import `FormBuilder` component simply import it from `'@digigov/form`.
 
 ```javascript
-
-import {FormBuilder} from '@digigov/form';
-
+import { FormBuilder } from '@digigov/form';
 ```
-Now you can use the current component inisde of your component
 
+Now you can use the current component inisde of your component
 
 ```javascript
 import BasicLayout, {
@@ -59,33 +61,29 @@ export default function MyComponent({ props }) {
 
 `FormBuilder` component accepts several arguments as input props.
 
-| Name          |      Type     |  Default      | Description |
-| ------------- | :-----------: | :-----------: | :-----------: | 
-| children      | node |        |      allow you to pass components as data.  |
-| steps      | array |        |      an array which includes each step-form format data |
-| name      | string |        |      the name of the step.  |
-| title      | string |        |     the title from each step   |
-| fields      | array |        |     an array of object fields which they describe each field for each step-form |
-| key      | string |        |     the key value of the input field |
-| label      | object |        |    an object prop which describes the label primary and the secondary name of the field   |
-| primary      | string |        |    the name of te field |
-| required      | boolean |   false     |   describes the validation of the field  |
-| submitButton      | boolean |     false   |  if true, it creates a button to continue to the next step   |
-| type      | string |        |    describes the format of each field, e.x  `type:'string'` is a simple input format field |
-
-
+| Name         |  Type   | Default |                                      Description                                       |
+| ------------ | :-----: | :-----: | :------------------------------------------------------------------------------------: |
+| children     |  node   |         |                         allow you to pass components as data.                          |
+| steps        |  array  |         |                   an array which includes each step-form format data                   |
+| name         | string  |         |                                 the name of the step.                                  |
+| title        | string  |         |                                the title from each step                                |
+| fields       |  array  |         |      an array of object fields which they describe each field for each step-form       |
+| key          | string  |         |                            the key value of the input field                            |
+| label        | object  |         |  an object prop which describes the label primary and the secondary name of the field  |
+| primary      | string  |         |                                  the name of te field                                  |
+| required     | boolean |  false  |                         describes the validation of the field                          |
+| submitButton | boolean |  false  |               if true, it creates a button to continue to the next step                |
+| type         | string  |         | describes the format of each field, e.x `type:'string'` is a simple input format field |
 
 ### Field types
 
 Below are demostrated some examples for each type of field
 
-
 ### FormBuilder implementation
 
 The examples above are implemented by using the code below
 
 ```javascript
-
 import React, { useState } from 'react';
 import BasicLayout, {
   Top,
@@ -96,15 +94,14 @@ import BasicLayout, {
 import Header, { HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
-import Button from '@digigov/ui/core/Button';
-import PageTitle, {
-  PageTitleSection,
+import Button from '@digigov/ui/form/Button';
+import PageTitleContainer, {
   PageTitleCaption,
   PageTitleHeading,
-} from '@digigov/ui/app/PageTitle';
-import BackButton from '@digigov/ui/core/Button/BackButton';
+} from '@digigov/ui/app/PageTitleContainer';
+import BackButton from '@digigov/ui/form/Button/BackButton';
 import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
-import { useTranslation } from '@digigov/ui/app';
+import { useTranslation } from '@digigov/ui/i18n';
 
 const FIELDS = [
   {
@@ -230,12 +227,10 @@ export default function Index() {
       <Content>
         <Main className={styles.main}>
           <BackButton>{t('button.back')}</BackButton>
-          <PageTitle>
-            <PageTitleSection>
+          <PageTitleContainer>
               <PageTitleCaption>Before we start</PageTitleCaption>
-            </PageTitleSection>
             <PageTitleHeading>Submit a form</PageTitleHeading>
-          </PageTitle>
+          </PageTitleContainer>
           <FormBuilder
             fields={FIELDS}
             onSubmit={setData}
@@ -258,14 +253,4 @@ export default function Index() {
     </BasicLayout>
   );
 }
-
 ```
-
-
-
-
-
-
-
-
-

package/src/FormBuilder/FormBuilder.stories.js

@@ -2,6 +2,6 @@ import FormBuilder from '@digigov/form/FormBuilder';
 export default {
   title: 'Digigov Form/FormBuilder',
   component: FormBuilder,
-  displayName: 'FormBuilder'
+  displayName: 'FormBuilder',
 };
 export * from '@digigov/form/FormBuilder/__stories__/Default';

package/src/FormBuilder/FormBuilder.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import { yupResolver } from '@digigov/form/utils';
-import { useValidationSchema } from '@digigov/form/validators';
-import Fieldset from '@digigov/form/Fieldset';
 import Field from '@digigov/form/Field';
-import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import Fieldset from '@digigov/form/Fieldset';
 import { FormContext } from '@digigov/form/FormContext';
+import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import { yupResolver } from '@digigov/form/utils';
+import { useValidationSchema } from '@digigov/form/validators';
 import { Form } from '@digigov/react-core/Form';
 
 export const FormBase = React.forwardRef(function FormBase(

package/src/FormBuilder/__stories__/Default.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const initialValues = {
   'business-title': null,