@digigov/form 0.13.2 → 1.0.0-480e3d97

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

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

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
@@ -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

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: {

package/src/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/src/types.tsx

@@ -1,7 +1,7 @@
 import { UseFormReturn, UseFormProps } from 'react-hook-form';
-import { GridProps } from '@digigov/ui/layouts/Grid';
-import { ValidatorSchema } from '@digigov/form/validators/types';
 import { FieldComponentRegistry } from '@digigov/form/Field/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { GridProps } from '@digigov/ui/layouts/Grid';
 
 export type FieldError = {
   message: string;
@@ -59,6 +59,8 @@ export interface FieldSpec {
   >;
   validators?: ValidatorSchema[];
   wrapper?: 'label' | 'fieldset';
+  maxWidth?: string;
+  width?: string;
 }
 
 export interface FieldsetSpec {

package/src/utils.ts

@@ -1,6 +1,6 @@
-import * as Yup from 'yup';
 import { validateFieldsNatively } from '@hookform/resolvers';
 import { appendErrors, FieldError } from 'react-hook-form';
+import * as Yup from 'yup';
 
 /**
  * Why `path!` ? because it could be `undefined` in some case