@digigov/form 2.0.0-0edebf87 → 2.0.0-2177f152

package/src/inputs/Input/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Hint } from '@digigov/react-core/Hint';
-import TextArea from '@digigov/react-core/TextArea';
-import TextInput from '@digigov/react-core/TextInput';
+import { TextArea } from '@digigov/ui/form/TextArea';
+import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 const TYPES_MAP = {
   string: 'text',
@@ -40,6 +40,27 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
     const fieldType = TYPES_MAP[type || 'text'] || 'text';
     const { t } = useTranslation();
     const currentValue: string | '' = useWatch({ control, name });
+
+    const getRemainingChars = (currentValue, limit) => {
+      if (currentValue) {
+        return limit?.max - currentValue.length;
+      }
+      return limit?.max;
+    };
+
+    const constructRemainingText = (currentValue, limit) => {
+      const remainingChars = getRemainingChars(currentValue, limit);
+      let remainingText =
+        Math.abs(remainingChars) === 1
+          ? t('form.info.text.character')
+          : t('form.info.text.characters');
+      remainingText +=
+        remainingChars > 0
+          ? ` ${t('form.info.text.remaining')}.`
+          : ` ${t('form.info.text.too_many')}.`;
+      return remainingText;
+    };
+
     if (multiline === true) {
       return (
         <>
@@ -56,32 +77,13 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             }}
           />
           {limit?.max && (
-            <Hint>
-              {currentValue === undefined ||
-              (currentValue?.length >= 0 &&
-                currentValue?.length <= limit?.max) ? (
-                <span>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>
-                    {!currentValue
-                      ? limit.max
-                      : limit?.max - currentValue?.length}
-                  </b>{' '}
-                  {currentValue && limit?.max - currentValue?.length === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.remaining')}.
-                </span>
-              ) : (
-                <span style={{ color: '#b60202' }}>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>{currentValue && currentValue?.length - limit?.max}</b>{' '}
-                  {currentValue?.length - limit?.max === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.too_many')}.
-                </span>
-              )}
+            <Hint display={'flex'}>
+              {t('form.info.text.you_have')}
+              <Hint fontWeight="bold">
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+                &nbsp;
+              </Hint>
+              {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
         </>
@@ -91,6 +93,7 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
         <TextInput
           name={name}
           type={fieldType}
+          data-type={type}
           className={className}
           ref={ref}
           {...{ ...props, reset: undefined, required: undefined }}

package/src/inputs/Input/inputsInputScenarios.ts

@@ -0,0 +1,404 @@
+import el from '@digigov/form/locales/el';
+
+const INPUTS_INPUT_FIELDS = [
+  {
+    key: 'location',
+    type: 'string',
+    label: {
+      primary: 'Συμπληρώστε τον τόπο κατοικίας σας',
+    },
+    required: true,
+  },
+  {
+    key: 'text',
+    type: 'text',
+    required: true,
+    label: {
+      primary: 'Συμπληρώστε το αίτημά σας',
+    },
+  },
+  {
+    key: 'email',
+    type: 'email',
+    label: {
+      primary: 'Διεύθυνση ηλεκτρονικού ταχυδρομείου (email)',
+    },
+    required: true,
+  },
+  {
+    key: 'desired-mount',
+    type: 'number',
+    label: {
+      primary: 'Συμπληρώστε το ποσό που σας ενδιαφέρει',
+    },
+    required: true,
+  },
+  {
+    key: 'age',
+    type: 'int',
+    required: true,
+    label: {
+      primary: 'Ποιά είναι η ηλικία σας;',
+      secondary: 'Καταχωρίστε την ηλικία σας',
+    },
+  },
+  {
+    key: 'afm',
+    type: 'afm',
+    required: true,
+    label: { primary: 'ΑΦΜ' },
+  },
+  {
+    key: 'iban',
+    type: 'iban',
+    label: {
+      primary: 'Συμπληρώστε το αριθμό του τραπεζικού σας λογαριασμού',
+    },
+    required: true,
+  },
+  {
+    key: 'uuid4',
+    type: 'uuid4',
+    label: {
+      primary: 'Συμπληρώστε το uuid4',
+    },
+    required: true,
+  },
+  {
+    key: 'mobile-phone',
+    type: 'mobile_phone',
+    label: {
+      primary: 'Συμπληρώστε το κινητό σας τηλέφωνο',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+      phoneType: 'mobile',
+    },
+  },
+  {
+    key: 'phone-number',
+    type: 'phone_number',
+    label: {
+      primary: 'Συμπληρώστε το τηλέφωνό σας',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+    },
+  },
+  {
+    key: 'phone-number-landline',
+    type: 'phone_number',
+    label: {
+      primary: 'Συμπληρώστε το σταθερό σας τηλέφωνό',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+      phoneType: 'landline',
+    },
+  },
+  {
+    key: 'postal-code',
+    type: 'postal_code',
+    label: {
+      primary: 'Συμπληρώστε τον ταχυδρομικό σας κώδικα',
+    },
+    extra: { countries: ['GR'] },
+    required: true,
+  },
+];
+
+export const scenarios = [
+  {
+    title: 'success fill for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [
+      {
+        fieldKey: 'text',
+        value: 'aaaaaaa',
+      },
+      {
+        fieldKey: 'age',
+        value: '12',
+      },
+      {
+        fieldKey: 'email',
+        value: 'example@mail.com',
+      },
+      {
+        fieldKey: 'location',
+        value: 'Location1',
+      },
+      {
+        fieldKey: 'postal-code',
+        value: '42100',
+      },
+      {
+        fieldKey: 'afm',
+        value: '094536469',
+      },
+      {
+        fieldKey: 'desired-mount',
+        value: '12.5',
+      },
+      {
+        fieldKey: 'mobile-phone',
+        value: '+306900000000',
+      },
+      {
+        fieldKey: 'phone-number',
+        value: '6900000000',
+      },
+      {
+        fieldKey: 'phone-number-landline',
+        value: '2100000000',
+      },
+      {
+        fieldKey: 'iban',
+        value: 'GR3201122267115323218375195',
+      },
+      {
+        fieldKey: 'uuid4',
+        value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',
+      },
+    ],
+    expect: [
+      {
+        type: 'success',
+        fieldKey: 'age',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'text',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'email',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'location',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'postal-code',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'afm',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'desired-mount',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'phone-number',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'iban',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'uuid4',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'empty fill for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'age',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'email',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'location',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal-code',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'afm',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'desired-mount',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'iban',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'uuid4',
+        text: el.form.error.required,
+      },
+    ],
+  },
+  {
+    title: 'incorrect types for inputs Input',
+    describe: 'inputs Input scenario',
+    fields: INPUTS_INPUT_FIELDS,
+    fill: [
+      {
+        fieldKey: 'age',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'email',
+        value: '23232',
+      },
+      {
+        fieldKey: 'location',
+        value: '23232',
+      },
+      {
+        fieldKey: 'postal-code',
+        value: 'aaaaa',
+      },
+      {
+        fieldKey: 'afm',
+        value: 'aaaaaaaaa',
+      },
+      {
+        fieldKey: 'desired-mount',
+        value: 'aaa',
+      },
+      {
+        fieldKey: 'mobile-phone',
+        value: '+33690000000',
+      },
+      {
+        fieldKey: 'phone-number',
+        value: '000000000',
+      },
+      {
+        fieldKey: 'phone-number-landline',
+        value: '000000000',
+      },
+      {
+        fieldKey: 'iban',
+        value: 'aaaaaa',
+      },
+      {
+        fieldKey: 'uuid4',
+        value: 'aaaaaa',
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'age',
+        text: el.form.error.number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'email',
+        text: el.form.error.email,
+      },
+      {
+        type: 'success',
+        fieldKey: 'location',
+        text: el.form.error.string,
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal-code',
+        text: el.form.error.postalCode,
+      },
+      {
+        type: 'error',
+        fieldKey: 'afm',
+        text: el.form.error.afm,
+      },
+      {
+        type: 'error',
+        fieldKey: 'desired-mount',
+        text: el.form.error.number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.mobile_phone,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number',
+        text: el.form.error.phone_number,
+      },
+      {
+        type: 'error',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.landline,
+      },
+      {
+        type: 'error',
+        fieldKey: 'iban',
+        text: el.form.error.iban,
+      },
+      {
+        type: 'error',
+        fieldKey: 'uuid4',
+        text: el.form.error.uuid4,
+      },
+    ],
+  },
+];
+
+export default scenarios;

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

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

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

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

package/src/inputs/Label/doc.mdx

@@ -0,0 +1,14 @@
+---
+title: Label
+---
+ 
+# Label
+
+
+The Label component is used to display descriptive text for form sections or fields. It supports both primary and secondary text, allowing for a title and optional subtitle.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/Label/__stories__/Default.tsx" />

package/src/inputs/Label/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/Label/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All Label 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/Label/index.tsx

@@ -1,24 +1,21 @@
 import React from 'react';
 import { FieldLabelProps } from '@digigov/form/types';
-import Hint from '@digigov/react-core/Hint';
-import LabelTitle from '@digigov/react-core/LabelTitle';
+import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface FieldOptionProps {
   label?: FieldLabelProps;
   value: string;
   show?: string[];
   disabled?: boolean;
-  selected?: () => React.FC;
+  selected?: () => React.ReactNode;
   divider?: string;
 }
 
 export interface LabelProps {
   primary?: string;
   secondary?: string;
-}
-
-export interface LabelProps {
   className?: string;
   value?: string;
   label?: FieldLabelProps;
@@ -39,8 +36,4 @@ export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
   );
 };
 
-Label.defaultProps = {
-  label: {},
-};
-
 export default Label;

package/src/inputs/OtpInput/OtpInput.stories.js

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

package/{cjs/inputs/OtpInput/index.mdx → src/inputs/OtpInput/doc.mdx}

@@ -13,11 +13,4 @@ on a computer system or other digital device.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/OtpInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/OtpInput/__stories__/Default.tsx" />

package/src/inputs/OtpInput/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/OtpInput/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All OtpInput 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/OtpInput/index.tsx

@@ -40,7 +40,8 @@ export function useOtp(onChange, maxLength) {
   }, []);
 
   const focusToPrevInput = useCallback((target: HTMLElement) => {
-    const previousElement = target.previousElementSibling as HTMLInputElement | null;
+    const previousElement =
+      target.previousElementSibling as HTMLInputElement | null;
     if (previousElement) {
       previousElement.focus();
     }

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

@@ -4,6 +4,6 @@ export default {
   component: 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';
+export { Default } from '@digigov/form/inputs/Radio/__stories__/Default';
+export { WithDivider } from '@digigov/form/inputs/Radio/__stories__/WithDivider';
+export { Conditional } from '@digigov/form/inputs/Radio/__stories__/Conditional';

package/src/inputs/Radio/__stories__/Conditional.tsx

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

package/{cjs/inputs/Radio/index.mdx → src/inputs/Radio/doc.mdx}

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