@digigov/form 0.13.2 → 1.0.0-00643e1d

package/src/index.mdx

@@ -4,12 +4,19 @@ title: Digigov Form
 sidebar_label: Introduction to Digigov Form
 ---
 
-import LeadText from "@site/src/components/LeadText";
+import LeadText from '@site/src/components/LeadText';
 
-<LeadText>Digigov Form is an off-the-shelf solution for managing web forms using Reactjs. It supports flexible and multi-step forms and easy-to-use validation. This page will guide you through everything you need to create accessible and
-dynamic forms that can handle all sorts of user inputs.</LeadText>
- 
-<img src="/img/form.svg" style={{margin: '3rem 0', maxWidth: '450px', width: '60%'}}/>
+<LeadText>
+  Digigov Form is an off-the-shelf solution for managing web forms using
+  Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
+  This page will guide you through everything you need to create accessible and
+  dynamic forms that can handle all sorts of user inputs.
+</LeadText>
+
+<img
+  src="/img/form.svg"
+  style={{ margin: '3rem 0', maxWidth: '450px', width: '60%' }}
+/>
 
 ## Before we start
 
@@ -22,7 +29,7 @@ Finally, we also offer an easy way to spread your forms across multiple pages or
 steps and still be able to gather data in a single serialized object that you
 will be able to save via an JSON API.
 
-## Overview 
+## Overview
 
 The `@digigov/form` NPM package contains React components and validators. The
 library uses basic, semantically correct HTML5 input fields.

package/src/inputs/AutoComplete/__stories__/Default.tsx

@@ -1,9 +1,9 @@
 import React, { Suspense } from 'react';
-import FormBuilder from '@digigov/form/FormBuilder';
 import { Field } from '@digigov/form/Field';
+import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
-import Button from '@digigov/ui/core/Button';
-import { results } from '@digigov/ui/admin/AutoComplete/utils';
+import { results } from '@digigov/ui/form/AutoComplete/utils';
+import Button from '@digigov/ui/form/Button';
 const fields: FieldSpec[] = [
   {
     key: 'autocomplete',

package/src/inputs/AutoComplete/index.tsx

@@ -1,10 +1,10 @@
 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 { FieldOptionProps } from '@digigov/form/inputs/Label';
 import { Hint } from '@digigov/react-core';
+import UIAutoComplete, {
+  AutoCompleteProps as UIAutoCompleteProps,
+} from '@digigov/ui/form/AutoComplete';
 
 export interface AutoCompleteExtra
   extends Omit<

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

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

package/src/inputs/Checkboxes/__stories__/Conditional.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: FieldSpec[] = [
   {
@@ -60,7 +60,7 @@ const fields: FieldSpec[] = [
   {
     key: 'auth_form',
     type: 'choice:multiple',
-    required:true,
+    required: true,
     label: {
       primary: 'Επιλέξτε μέθοδο πιστοποίησης',
       secondary:

package/src/inputs/Checkboxes/__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';
 
 export const Default = () => (
   <FormBuilder

package/src/inputs/Checkboxes/__stories__/WithDivider.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';
 
 export const WithDivider = () => (
   <FormBuilder
@@ -27,7 +27,7 @@ export const WithDivider = () => (
           {
             label: { primary: 'Αισθάνομαι κούραση' },
             value: 'fatigue',
-            divider: 'ή'
+            dividerText: 'ή',
           },
         ],
       }}

package/src/inputs/Checkboxes/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { Field } from '@digigov/form';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
-import { useTranslation } from '@digigov/ui/app/i18n';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { CheckboxConditional } from '@digigov/react-core';
 import CoreCheckboxes from '@digigov/react-core/Checkbox';
 import CheckboxItem from '@digigov/react-core/CheckboxItem';
 import Hint from '@digigov/react-core/Hint';
-import { Field } from '@digigov/form';
-import { CheckboxConditional } from '@digigov/react-core';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export interface CheckboxesProps
   extends Omit<ControlledFieldProps, 'extra' | 'value'> {

package/src/inputs/DateInput/DateInput.stories.js

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

package/src/inputs/DateInput/__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';
 
 export const Default = () => (
   <FormBuilder
@@ -17,22 +17,6 @@ export const Default = () => (
         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>

package/src/inputs/DateInput/index.tsx

@@ -1,10 +1,10 @@
 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 { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import DateInputContainer from '@digigov/react-core/DateInputContainer';
 import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+import { useTranslation } from '@digigov/ui/i18n';
 dayjs.extend(customParseFormat);
 
 export interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {

package/src/inputs/FileInput/FileInput.stories.js

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

package/src/inputs/FileInput/__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';
 
 export const Default = () => (
   <FormBuilder

package/src/inputs/FileInput/index.tsx

@@ -1,11 +1,11 @@
 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';
+import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
+import CoreHint from '@digigov/react-core/Hint';
+import Button from '@digigov/ui/form/Button';
+import { useTranslation } from '@digigov/ui/i18n';
+import Paragraph from '@digigov/ui/typography/Paragraph';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -34,7 +34,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
   };
   return (
     <>
-      <FileUploadContainer hasUploadedFile={files && files.length > 0}>
+      <FileUploadContainer hasFiles={files && files.length > 0}>
         {files?.length ? (
           <>
             <Paragraph>

package/src/inputs/Input/__stories__/AFM.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';
 
 export const AFM = () => (
   <FormBuilder

package/src/inputs/Input/__stories__/Boolean.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';
 
 export const Boolean = () => (
   <FormBuilder

package/src/inputs/Input/__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';
 
 export const Default = () => (
   <FormBuilder

package/src/inputs/Input/__stories__/IBAN.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';
 
 export const IBAN = () => (
   <FormBuilder

package/src/inputs/Input/__stories__/Integer.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';
 
 export const Integer = () => {
   return (

package/src/inputs/Input/__stories__/MobilePhone.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';
 
 export const MobilePhone = () => (
   <FormBuilder

package/src/inputs/Input/__stories__/PhoneNumber.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';
 
 export const PhoneNumber = () => (
   <FormBuilder

package/src/inputs/Input/__stories__/PostalCode.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';
 
 export const PostalCode = () => (
   <FormBuilder

package/src/inputs/Input/__stories__/TextWithCharacterLimit.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';
 
 export const TextWithCharacterLimit = () => (
   <FormBuilder

package/src/inputs/Input/index.tsx

@@ -4,7 +4,7 @@ import TextArea from '@digigov/react-core/TextArea';
 import { Hint } from '@digigov/react-core';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { useWatch } from 'react-hook-form';
-import { useTranslation } from '@digigov/ui/app/i18n';
+import { useTranslation } from '@digigov/ui/i18n';
 
 const TYPES_MAP = {
   string: 'text',
@@ -58,8 +58,8 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           {limit?.max && (
             <Hint>
               {currentValue === undefined ||
-              (currentValue?.length >= 0 &&
-                currentValue?.length <= limit?.max) ? (
+                (currentValue?.length >= 0 &&
+                  currentValue?.length <= limit?.max) ? (
                 <span>
                   {t('form.info.text.you_have')}{' '}
                   <b>

package/src/inputs/Label/Label.stories.js

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

package/src/inputs/Label/__stories__/Default.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, Label } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 export const Default = () => (
   <FormBuilder

package/src/inputs/Label/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import LabelTitle from '@digigov/react-core/LabelTitle';
-import Hint from '@digigov/react-core/Hint';
-import { useTranslation } from '@digigov/ui/app/i18n';
 import { FieldLabelProps } from '@digigov/form/types';
+import Hint from '@digigov/react-core/Hint';
+import LabelTitle from '@digigov/react-core/LabelTitle';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldOptionProps {
   label?: FieldLabelProps;
@@ -31,7 +31,7 @@ export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
   }
   return (
     <>
-      <LabelTitle className={className} size="s">
+      <LabelTitle className={className} size="sm">
         {(label && label.primary && t(label.primary)) || value}
       </LabelTitle>
       {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}

package/src/inputs/OtpInput/__stories__/Default.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import FormBuilder, { Field, Fieldset } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
 import { FieldSpec } from '@digigov/form/types';
+import { Button } from '@digigov/ui/form/Button';
 const FIELDS: FieldSpec[] = [
   {
     key: 'otp',

package/src/inputs/OtpInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import SingleCharacterInputContainer, {
-  SingleCharacterInputItem,
-} from '@digigov/ui/core/SingleCharacterInputContainer';
+import SingleCharacterInputs, {
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 
 export const RE_DIGIT = new RegExp(/^\d+$/);
 export const REMOVE_SPACES = new RegExp(/\s+/g);
@@ -83,7 +83,7 @@ function useOtp(onChange, maxLength) {
   const handleOtpChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, idx: number) => {
       const target = e.target;
-      let targetValue = target.value;
+      const targetValue = target.value;
       const isTargetValueDigit = RE_DIGIT.test(targetValue);
       // We want to pass the empty string when the value is deleted
       // emptry string replaces the deleted value
@@ -119,16 +119,16 @@ function useOtp(onChange, maxLength) {
   };
 }
 
-const SingleCharacterInputItemPart = ({ ...props }) => {
-  return <SingleCharacterInputItem {...props} />;
+const SingleCharacterInputPart = ({ ...props }) => {
+  return <SingleCharacterInput {...props} />;
 };
 
 export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
   const otp = useOtp(props.onChange, maxLength);
   return (
-    <SingleCharacterInputContainer>
+    <SingleCharacterInputs>
       {otp.otpValues.map((digit, idx) => (
-        <SingleCharacterInputItemPart
+        <SingleCharacterInputPart
           name={`${name}-${idx}`}
           type="text"
           key={idx}
@@ -139,14 +139,18 @@ export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
           disabled={props.disabled}
           aria-required={props['aria-required']}
           onChange={(e) => otp.handleOtpChange(e, idx)}
-          onInput={(e) => { if (e.target.value === digit) { otp.handleOtpChange(e, idx) } }}
+          onInput={(e) => {
+            if (e.target.value === digit) {
+              otp.handleOtpChange(e, idx);
+            }
+          }}
           onKeyDown={(e) => otp.handleKeyDown(e, idx)}
           onFocus={otp.handleFocus}
           onPaste={otp.handlePaste}
           error={!digit ? props.error : false}
         />
       ))}
-    </SingleCharacterInputContainer>
+    </SingleCharacterInputs>
   );
 };
 

package/src/inputs/Radio/Radio.stories.js

@@ -2,9 +2,8 @@ import Radio from '@digigov/form/inputs/Radio';
 export default {
   title: 'Digigov Form/inputs/Radio',
   component: Radio,
-  displayName: '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/src/inputs/Radio/__stories__/Conditional.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: FieldSpec[] = [
   {
@@ -57,7 +57,7 @@ const fields: FieldSpec[] = [
   {
     key: 'auth_form',
     type: 'choice:single',
-    required:true,
+    required: true,
     label: {
       primary: 'Επιλέξτε μέθοδο πιστοποίησης',
       secondary:
@@ -94,4 +94,4 @@ export const Conditional = () => (
     <Field key="auth_form" name="auth_form" />
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
-);
+);

package/src/inputs/Radio/__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';
 
 export const Default = () => (
   <FormBuilder
@@ -13,7 +13,7 @@ export const Default = () => (
       name="string"
       type="choice:single"
       required
-      label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
+      label={{ primary: 'Ποιά είναι η χώρα της διαμονής σας;' }}
       extra={{
         options: [
           {

package/src/inputs/Radio/__stories__/WithDivider.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';
 
 export const WithDivider = () => (
   <FormBuilder
@@ -13,7 +13,7 @@ export const WithDivider = () => (
       name="string"
       type="choice:single"
       required
-      label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
+      label={{ primary: 'Ποιά είναι η χώρα της διαμονής σας;' }}
       extra={{
         options: [
           {
@@ -31,7 +31,7 @@ export const WithDivider = () => (
           {
             label: { primary: 'Ηνωμένες Πολιτείες της Αμερικής' },
             value: 'usa',
-            divider:'ή'
+            dividerText: 'ή',
           },
         ],
       }}

package/src/inputs/Radio/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
-import { useTranslation } from '@digigov/ui/app/i18n';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { useWatch } from 'react-hook-form';
-import Hint from '@digigov/react-core/Hint';
 import { Field } from '@digigov/form';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
 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 interface RadioButtonsGroupProps
   extends Omit<UncontrolledFieldProps, 'extra'> {

package/src/inputs/Select/Select.stories.js

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

package/src/inputs/Select/__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';
 
 export const Default = () => (
   <FormBuilder
@@ -13,7 +13,7 @@ export const Default = () => (
       name="string"
       type="choice:single"
       required
-      label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
+      label={{ primary: 'Ποιά είναι η χώρα της διαμονής σας;' }}
       extra={{
         component: 'Select',
         options: [

package/src/inputs/Select/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
 import SelectContainer from '@digigov/react-core/SelectContainer';
 import SelectOption from '@digigov/react-core/SelectOption';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 
 export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra: {