@digigov/form 2.0.0-113e6661 → 2.0.0-2177f152

package/src/Questions/index.test.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/Questions/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Questions variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/create-simple-form.mdx

@@ -4,12 +4,8 @@ title: Create a simple Digigov Form
 sidebar_label: Creating simple forms
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  This guide walks through building a simple form page, complete with validation
-  and data serialisation.
-</LeadText>
+This guide walks through building a simple form page, complete with validation
+and data serialisation.
 
 ## What we are building
 

package/src/{index.mdx → doc.mdx}

@@ -4,14 +4,10 @@ title: Digigov Form
 sidebar_label: Introduction to Digigov Form
 ---
 
-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>
+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.
 
 <img
   src="/img/form.svg"

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

@@ -4,13 +4,7 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 
-const results = [
-  'Αμερική',
-  'Ασία',
-  'Αυστραλία',
-  'Αφρική',
-  'Ευρώπη',
-];
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 
 const fields: FieldSpec[] = [
   {
@@ -36,7 +30,6 @@ const fields: FieldSpec[] = [
 const initialValues = {};
 
 export const Default = () => (
-
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {
@@ -49,6 +42,5 @@ export const Default = () => (
     ))}
     <Button type="submit">Submit</Button>
   </FormBuilder>
-
 );
-export default Default;
+export default Default;

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -4,13 +4,7 @@ import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
 import Button from '@digigov/ui/form/Button';
 
-const results = [
-  'Αμερική',
-  'Ασία',
-  'Αυστραλία',
-  'Αφρική',
-  'Ευρώπη',
-];
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
 
 const fields: FieldSpec[] = [
   {
@@ -20,7 +14,6 @@ const fields: FieldSpec[] = [
     type: 'choice:multiple',
     extra: {
       component: 'AutoComplete',
-      multiple: true,
       options: results.map((r) => {
         return {
           label: {

package/src/inputs/AutoCompleteInput/{index.mdx → doc.mdx}

@@ -11,19 +11,8 @@ options as the users type and also let them select an option from the list.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Default.tsx" />
 
 ### Display multiple values
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Multiple.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple.tsx" />

package/src/inputs/AutoCompleteInput/index.test.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
 import { Multiple } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All AutoCompleteInput variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Multiple">
-      <Multiple />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Multiple">
+        <Multiple />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/inputs/AutoCompleteInput/index.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { Hint } from '@digigov/react-core/Hint';
-import UIAutoComplete, {
+import {
+  AutoComplete,
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
-import { Base } from '@digigov/react-core/Base';
-
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 export interface AutoCompleteInputExtra
   extends Omit<
     UIAutoCompleteProps,
@@ -17,7 +17,7 @@ export interface AutoCompleteInputExtra
     | 'onConfirm'
     | 'dropdownArrow'
   > {
-  options: Array<FieldOptionProps>;
+  options: FieldOptionProps[];
 }
 
 export interface AutoCompleteInputProps
@@ -29,39 +29,43 @@ export interface AutoCompleteInputProps
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options, multiple },
+  type,
+  extra: { options },
   onChange,
   value,
-  error,
   ...props
 }) => {
-  const suggest = useCallback(function suggest(
-    query: string,
-    syncResults: (options: any[]) => void
-  ): void {
-    syncResults(
-      query
-        ? options.filter(function (option) {
-          return (
-            `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''
-              }`
-              .toLowerCase()
-              .indexOf(query.toLowerCase()) !== -1
-          );
-        })
-        : options
-    );
-  },
-    [options]);
+  const suggest = useCallback(
+    function suggest(
+      query: string,
+      syncResults: (options: any[]) => void
+    ): void {
+      syncResults(
+        query
+          ? options.filter(function (option) {
+              return (
+                `${option.value} ${option.label?.primary || ''} ${
+                  option.label?.secondary || ''
+                }`
+                  .toLowerCase()
+                  .indexOf(query.toLowerCase()) !== -1
+              );
+            })
+          : options
+      );
+    },
+    [options]
+  );
 
   return (
-    <UIAutoComplete
-      multiple={multiple}
+    <AutoComplete
+      multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
         if (Array.isArray(value)) {
-          const selectedValues = value.map(item => item.value);
-          selectedValues.length > 0 ? onChange(selectedValues) : onChange(undefined);
+          const selectedValues = value.map((item) => item.value);
+          if (selectedValues.length > 0) onChange(selectedValues);
+          else onChange(undefined);
         } else {
           onChange(value.value);
         }
@@ -94,4 +98,4 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   );
 };
 
-export default AutoCompleteInput;
+export default AutoCompleteInput;

package/src/inputs/Checkboxes/{index.mdx → doc.mdx}

@@ -10,24 +10,14 @@ Checkboxes are used to let a user select one or more options of a limited number
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Default.tsx" />
+
 
 ### Conditional
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="Conditional.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Conditional.tsx" />
+
 
 ### With divider
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Checkboxes"
-  story="WithDivider.tsx"
-/>
+<code src="@digigov/form/inputs/Checkboxes/__stories__/WithDivider.tsx" />

package/src/inputs/Checkboxes/index.test.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Conditional } from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';
 import { Default } from '@digigov/form/inputs/Checkboxes/__stories__/Default';
 import { WithDivider } from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Checkboxes variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Conditional">
-      <Conditional />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="WithDivider">
-      <WithDivider />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Conditional">
+        <Conditional />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithDivider">
+        <WithDivider />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/inputs/Checkboxes/index.tsx

@@ -1,18 +1,20 @@
 import React, { useState } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import CoreCheckboxes from '@digigov/react-core/Checkbox';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
-import CheckboxItem from '@digigov/react-core/CheckboxItem';
-import Hint from '@digigov/react-core/Hint';
+import {
+  Checkbox,
+  CheckboxItem,
+  CheckboxConditional,
+} from '@digigov/ui/form/Checkbox';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface CheckboxesProps
   extends Omit<ControlledFieldProps, 'extra' | 'value'> {
   value?: string[];
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
   fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
 }
@@ -29,34 +31,34 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   if (!value) value = [];
   const handleChange =
     (optionValue, idx, show) =>
-      (evt): void => {
-        let newValue;
-        if (evt.currentTarget.checked) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          newValue = value.concat([optionValue]);
-        } else {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          newValue = value.filter((val) => val !== optionValue);
-        }
-        if (show && show.length > 0) {
-          setChecked((items) =>
-            items.map((item, index) => (index === idx ? !item : item))
-          );
-        }
+    (evt): void => {
+      let newValue;
+      if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        newValue = value.concat([optionValue]);
+      } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        newValue = value.filter((val) => val !== optionValue);
+      }
+      if (show && show.length > 0) {
+        setChecked((items) =>
+          items.map((item, index) => (index === idx ? !item : item))
+        );
+      }
 
-        // reset value to undefined instead of an empty array
-        // so the error state mechanism can throw validation errors
-        if (newValue.length === 0) newValue = undefined;
-        onChange(newValue);
-      };
+      // reset value to undefined instead of an empty array
+      // so the error state mechanism can throw validation errors
+      if (newValue.length === 0) newValue = undefined;
+      onChange(newValue);
+    };
   const { t } = useTranslation();
   const [checked, setChecked] = useState(
     Array<boolean>(options.length).fill(false)
   );
   return (
-    <CoreCheckboxes className={className}>
+    <Checkbox className={className}>
       {options.map(
         (
           {
@@ -103,7 +105,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
           </React.Fragment>
         )
       )}
-    </CoreCheckboxes>
+    </Checkbox>
   );
 };
 

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

@@ -9,21 +9,16 @@ const fields = [
     required: true,
     label: {
       primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
-      secondary:
-        'Για παράδειγμα, 05 11 2020',
-    }
-  },
-]
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
 
 export const Default = () => (
   <FormBuilder onSubmit={() => console.log('kati')}>
-    {fields.map((field) => {
-      return (
-        // @ts-ignore
-        <Field {...field} name={field.key} />
-      )
-    }
-    )}
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );

package/src/inputs/DateInput/{index.mdx → doc.mdx}

@@ -13,11 +13,4 @@ either with a textbox that validates the input or a special date picker interfac
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/DateInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/DateInput/__stories__/Default.tsx" />

package/src/inputs/DateInput/index.test.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/DateInput/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All DateInput variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/inputs/DateInput/index.tsx

@@ -2,8 +2,10 @@ import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import DateInputContainer from '@digigov/react-core/DateInputContainer';
-import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 dayjs.extend(customParseFormat);
 
@@ -75,10 +77,10 @@ const makeDate = (val) => {
 };
 
 const DatePart = ({ label, ...props }) => {
-  return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
+  return <DateInputItem {...props}>{label}</DateInputItem>;
 };
 
-export const DateInput = ({ name, type, ...props }) => {
+export const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
   const [initial] = useState(props.value);
   const value = useMemo(() => {

package/src/inputs/FileInput/{index.mdx → doc.mdx}

@@ -12,8 +12,4 @@ Input element of type `file` let the user choose one or more files from their de
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/FileInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/FileInput/__stories__/Default.tsx" />

package/src/inputs/FileInput/index.test.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/FileInput/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All FileInput variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/inputs/FileInput/index.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-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 { Button } from '@digigov/ui/form/Button';
+import { FileUpload, FileUploadContainer } from '@digigov/ui/form/FileUpload';
 import { useTranslation } from '@digigov/ui/i18n';
-import Paragraph from '@digigov/ui/typography/Paragraph';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
 export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
     className?: string;
@@ -19,11 +18,11 @@ export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
-  { name, extra = {}, disabled, reset, onChange, ...props },
+  { name, disabled, reset, onChange, ...props },
   ref: any
 ) {
   const { t } = useTranslation();
-  const [files, setFiles] = useState<Array<string> | undefined>([]);
+  const [files, setFiles] = useState<string[] | undefined>([]);
   const handleChange = (e) => {
     const target = e.target as HTMLInputElement;
     const selectedFiles = Array.from(
@@ -44,7 +43,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
             </Paragraph>
           </>
         ) : (
-          <CoreHint>{t('upload.no_file')}</CoreHint>
+          <Hint>{t('upload.no_file')}</Hint>
         )}
         <FileUpload
           ref={ref}

package/src/inputs/ImageInput/ImageInput.stories.js

@@ -5,5 +5,5 @@ export default {
   displayName: 'ImageInput',
 };
 export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
 export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';