@digigov/form 1.2.0-dcbd7ded → 2.0.0-0c4be34e

package/src/inputs/Checkboxes/index.tsx

@@ -1,59 +1,64 @@
 import React, { useState } from 'react';
-import { Field } from '@digigov/form';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
-import CoreCheckboxes from '@digigov/react-core/Checkbox';
-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'>>;
 }
 
-export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
+export const Checkboxes: React.FC<CheckboxesProps> = ({
   name,
   onChange,
   value,
   extra: { options, className },
   disabled,
+  Field,
   ...props
-}) {
+}) => {
   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))
-      );
-    }
+  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))
+        );
+      }
 
-    // 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(
         (
           {
@@ -69,7 +74,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
           <React.Fragment key={index}>
             <CheckboxItem
               key={`${name}.${index}`}
-              name={name}
+              name={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               checked={value?.includes(v)}
@@ -89,7 +94,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
               {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
             </CheckboxItem>
 
-            {!!checked[index] && show && (
+            {!!checked[index] && show && Field && (
               <CheckboxConditional>
                 {show.map((fieldName) => (
                   <Field name={fieldName} key={fieldName} />
@@ -100,7 +105,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
           </React.Fragment>
         )
       )}
-    </CoreCheckboxes>
+    </Checkbox>
   );
 };
 

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

@@ -4,4 +4,4 @@ export default {
   component: DateInput,
   displayName: 'DateInput',
 };
-export * from '@digigov/form/inputs/DateInput/__stories__/Default';
+export { Default } from '@digigov/form/inputs/DateInput/__stories__/Default';

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

@@ -2,22 +2,23 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
+const fields = [
+  {
+    key: 'date-example',
+    type: 'date',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
 export const Default = () => (
-  <FormBuilder
-    onSubmit={(data) => {
-      console.log(data);
-    }}
-  >
-    <Field
-      key={'string'}
-      name="string"
-      type="date"
-      required
-      label={{
-        primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
-        secondary: 'Για παράδειγμα, 05 11 2020',
-      }}
-    />
+  <FormBuilder onSubmit={() => console.log('kati')}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );

package/src/inputs/DateInput/doc.mdx

@@ -0,0 +1,16 @@
+---
+title: Date Input
+---
+ 
+# Date input
+
+
+
+Input element of type `date` create input fields that let the user enter a date, 
+either with a textbox that validates the input or a special date picker interface.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/DateInput/__stories__/Default.tsx" />

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+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>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  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 = function DateInput({ name, type, ...props }) {
+export const DateInput = ({ name, ...props }) => {
   const { t } = useTranslation();
   const [initial] = useState(props.value);
   const value = useMemo(() => {
@@ -110,7 +112,7 @@ export const DateInput = function DateInput({ name, type, ...props }) {
         onBlur={(e) => date.setMonth(e, true)}
         value={date.month}
         width={2}
-        name={`${props.name}-month`}
+        name={`${name}-month`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -121,7 +123,7 @@ export const DateInput = function DateInput({ name, type, ...props }) {
         onChange={date.setYear}
         value={date.year}
         width={4}
-        name={`${props.name}-year`}
+        name={`${name}-year`}
         maxLength="4"
         disabled={props.disabled}
         aria-required={props['aria-required']}

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

@@ -4,4 +4,4 @@ export default {
   component: FileInput,
   displayName: 'FileInput',
 };
-export * from '@digigov/form/inputs/FileInput/__stories__/Default';
+export { Default } from '@digigov/form/inputs/FileInput/__stories__/Default';

package/src/inputs/FileInput/doc.mdx

@@ -0,0 +1,15 @@
+---
+title: File Input
+---
+ 
+# File input
+
+
+
+Input element of type `file` let the user choose one or more files from their device storage.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/FileInput/__stories__/Default.tsx" />

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+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>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  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

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

package/src/inputs/ImageInput/__stories__/MaxSize.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import { FieldSpec } from '@digigov/form/types';
+import { Button } from '@digigov/ui/form/Button';
+const FIELDS: FieldSpec[] = [
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανέβασμα φωτογραφίας',
+      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 10KB.',
+    },
+    extra: {
+      limit: {
+        maxSize: 1000,
+      },
+    },
+  },
+];
+
+export const MaxSize = () => (
+  <FormBuilder
+    fields={FIELDS}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Fieldset>
+      {FIELDS.map((field) => (
+        <Field key={field.key} name={field.key} />
+      ))}
+    </Fieldset>
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MaxSize;

package/src/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx

@@ -9,6 +9,8 @@ const FIELDS: FieldSpec[] = [
     required: true,
     label: {
       primary: 'Ανέβασμα φωτογραφίας',
+      secondary:
+        'Οι επιτρεπόμενες διαστάσεις είναι για το ύψος από 100 μέχρι 400 και για το πλάτος από 100 μέχρι 400.',
     },
     extra: {
       limit: {

package/src/inputs/ImageInput/doc.mdx

@@ -0,0 +1,23 @@
+---
+title: Image Input
+---
+ 
+# Image input
+
+
+
+Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/Default.tsx" />
+
+### Display with max size
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/MaxSize.tsx" />
+
+### Display with min and max image dimensions
+
+<code src="@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension.tsx" />

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

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

package/src/inputs/ImageInput/index.tsx

@@ -1,12 +1,11 @@
 import React, { useState, useCallback } 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, { ButtonGroup } from '@digigov/ui/form/Button';
+import { Button, ButtonGroup } 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';
+import { Base } from '@digigov/ui/utils/Base';
 export interface ImageProps {
   src?: any;
 }
@@ -20,7 +19,7 @@ export interface Limit {
 }
 
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
-  return <img src={src} className="ds-image--ratio" />;
+  return <Base as="img" src={src} className="ds-image--ratio" />;
 });
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
@@ -34,10 +33,7 @@ export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
 }
 
 export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
-  function ImageInput(
-    { name, extra = {}, disabled, onChange, reset, ...props },
-    ref: any
-  ) {
+  function ImageInput({ name, disabled, onChange, reset, ...props }, ref: any) {
     const { t } = useTranslation();
     const [selectedImage, setSelectedImage] = useState<File | null>(null);
     const [imageUrl, setImageUrl] = useState<string | null>(null);
@@ -72,13 +68,12 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
           {selectedImage !== null ? (
             <>
               <Paragraph>
-                <b>{t('upload.image')}:</b> {`${selectedImage?.name}`}
+                <Base as="b">{t('upload.image')}:</Base>{' '}
+                {`${selectedImage?.name}`}
               </Paragraph>
             </>
           ) : (
-            <CoreHint className="ds-dashed--border">
-              {t('upload.no_image')}
-            </CoreHint>
+            <Hint className="ds-dashed--border">{t('upload.no_image')}</Hint>
           )}
           <>
             {selectedImage !== null && <Image src={imageUrl} />}

package/src/inputs/Input/Input.stories.js

@@ -4,13 +4,13 @@ export default {
   component: Input,
   displayName: 'Input',
 };
-export * from '@digigov/form/inputs/Input/__stories__/Default';
-export * from '@digigov/form/inputs/Input/__stories__/Integer';
-export * from '@digigov/form/inputs/Input/__stories__/Boolean';
-export * from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
-export * from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
-export * from '@digigov/form/inputs/Input/__stories__/MobilePhone';
-export * from '@digigov/form/inputs/Input/__stories__/AFM';
-export * from '@digigov/form/inputs/Input/__stories__/IBAN';
-export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
-export * from '@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit';
+export { String } from '@digigov/form/inputs/Input/__stories__/String';
+export { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
+export { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
+export { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
+export { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
+export { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone';
+export { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+export { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
+export { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
+export { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';

package/src/inputs/Input/__stories__/LandlineNumber.tsx

@@ -12,12 +12,13 @@ export const LandlineNumber = () => (
       key="phone-number"
       name="phone-number"
       type="phone_number"
+      autoComplete="tel"
       label={{
         primary: 'Σταθερό τηλέφωνο',
       }}
       extra={{
         countries: ['gr'],
-        phoneType:'landline',
+        phoneType: 'landline',
       }}
       required
     />

package/src/inputs/Input/__stories__/MobilePhone.tsx

@@ -12,6 +12,7 @@ export const MobilePhone = () => (
       key="mobile-phone"
       name="mobile-phone"
       type="mobile_phone"
+      autoComplete="tel"
       label={{
         primary: 'Κινητό τηλέφωνο',
       }}

package/src/inputs/Input/__stories__/PhoneNumber.tsx

@@ -12,6 +12,7 @@ export const PhoneNumber = () => (
       key="phone-number"
       name="phone-number"
       type="phone_number"
+      autoComplete="tel"
       label={{
         primary: 'Tηλέφωνο',
       }}

package/src/inputs/Input/__stories__/PostalCode.tsx

@@ -12,6 +12,7 @@ export const PostalCode = () => (
       key="postal-code"
       name="postal-code"
       type="postal_code"
+      autoComplete="postal-code"
       label={{
         primary: 'Ταχυδρομικός κωδικός',
       }}

package/src/inputs/Input/__stories__/{Default.tsx → String.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const String = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -21,4 +21,4 @@ export const Default = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default Default;
+export default String;

package/src/inputs/Input/__stories__/{TextWithCharacterLimit.tsx → TextWithLimit.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form';
 
-export const TextWithCharacterLimit = () => (
+export const TextWithLimit = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -21,4 +21,4 @@ export const TextWithCharacterLimit = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default TextWithCharacterLimit;
+export default TextWithLimit;