@digigov/form 0.12.6 → 0.13.0

package/src/inputs/Input/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import TextArea from '@digigov/react-core/TextArea';
 import TextInput from '@digigov/react-core/TextInput';
+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';
 
 const TYPES_MAP = {
   string: 'text',
@@ -17,12 +20,17 @@ export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     className?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     rows?: any;
+    limit: {
+      min?: number;
+      max?: number;
+    };
   };
 }
 
 export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
-  function WrappedInput({ name, type, extra, ...props }, ref: never) {
-    let { multiline = false, rows } = extra || {};
+  function WrappedInput({ name, control, type, extra, ...props }, ref: never) {
+    // eslint-disable-next-line prefer-const
+    let { multiline = false, rows, limit } = extra || {};
     const { className } = extra || {};
     // if enforced to multiline use true. Derive from type otherwise.
     multiline = multiline === true || type === 'text';
@@ -30,20 +38,53 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
     rows = rows || (multiline ? 4 : 1);
     // translate dilosi type to HTML Input type
     const fieldType = TYPES_MAP[type || 'text'] || 'text';
+    const { t } = useTranslation();
+    const currentValue: string | '' = useWatch({ control, name });
     if (multiline === true) {
       return (
-        <TextArea
-          name={name}
-          className={className}
-          rows={rows}
-          ref={ref}
-          {...{
-            ...props,
-            reset: undefined,
-            required: undefined,
-            type: fieldType,
-          }}
-        />
+        <>
+          <TextArea
+            name={name}
+            className={className}
+            rows={rows}
+            ref={ref}
+            {...{
+              ...props,
+              reset: undefined,
+              required: undefined,
+              type: fieldType,
+            }}
+          />
+          {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>
+          )}
+        </>
       );
     } else {
       return (

package/src/inputs/Label/index.tsx

@@ -1,14 +1,16 @@
 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 Hint from '@digigov/react-core/Hint';
 import { useTranslation } from '@digigov/ui/app/i18n';
+import { FieldLabelProps } from '@digigov/form/types';
 
 export interface FieldOptionProps {
   label?: FieldLabelProps;
   value: string;
+  show?: string[];
   disabled?: boolean;
   selected?: () => React.FC;
+  divider?: string;
 }
 
 export interface LabelProps {

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

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

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

@@ -5,3 +5,6 @@ export default {
   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/Radio.stories.playwright.json

@@ -52,6 +52,22 @@
           "title": "select option with keyboard and submit"
         }
       ]
+    },
+    "digigov-form-inputs-radio--conditional": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>div>label>input"
+              }
+            }
+          ],
+          "id": "LAUEuHh58XiI",
+          "title": "Radio conditional action"
+        }
+      ]
     }
   }
 }

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import FormBuilder, { Field, FieldSpec } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+const fields: FieldSpec[] = [
+  {
+    key: 'landline',
+    type: 'phone_number',
+    label: {
+      secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.',
+    },
+    enabled: false,
+    condition: {
+      auth_form: {
+        is: 'via_mobile_phone',
+        then: {
+          enabled: true,
+          required: true,
+        },
+      },
+    },
+  },
+  {
+    key: 'mobile_phone',
+    type: 'mobile_phone',
+    label: {
+      secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.',
+    },
+    enabled: false,
+    condition: {
+      auth_form: {
+        is: 'via_mobile_phone',
+        then: {
+          enabled: true,
+          required: true,
+        },
+      },
+    },
+  },
+  {
+    key: 'email',
+    type: 'email',
+    label: {
+      secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.',
+    },
+    enabled: false,
+    condition: {
+      auth_form: {
+        is: 'via_email',
+        then: {
+          enabled: true,
+          required: true,
+        },
+      },
+    },
+  },
+  {
+    key: 'auth_form',
+    type: 'choice:single',
+    required:true,
+    label: {
+      primary: 'Επιλέξτε μέθοδο πιστοποίησης',
+      secondary:
+        'Για την ολοκλήρωση της δήλωσης σας, θα χρειαστεί επιπλέον πιστοποίηση. Θα σας στείλουμε ένα κωδικό μιας χρήσης είτε στο τηλέφωνο είτε στην ηλεκτρονική σας διεύθυνση.',
+    },
+    extra: {
+      options: [
+        {
+          key: 'via_mobile_phone',
+          label: { primary: 'Mέσω κινητού τηλεφώνου' },
+          value: 'via_mobile_phone',
+          show: ['mobile_phone', 'landline'],
+        },
+        {
+          key: 'via_email',
+          label: {
+            primary: 'Μέσω διεύθυνσης ηλεκτρονικού ταχυδρομείου (e-mail)',
+          },
+          value: 'via_email',
+          show: ['email'],
+        },
+      ],
+    },
+  },
+];
+
+export const Conditional = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    fields={fields}
+  >
+    <Field key="auth_form" name="auth_form" />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const WithDivider = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="string"
+      type="choice:single"
+      required
+      label={{ primary: 'Ποια ειναι η χώρα της διαμονής σας;' }}
+      extra={{
+        options: [
+          {
+            label: { primary: 'Ελλάδα' },
+            value: 'greece',
+          },
+          {
+            label: { primary: 'Κύπρος' },
+            value: 'cyprus',
+          },
+          {
+            label: { primary: 'Χώρα της Ευρωπαϊκής Ένωσης' },
+            value: 'eu',
+          },
+          {
+            label: { primary: 'Ηνωμένες Πολιτείες της Αμερικής' },
+            value: 'usa',
+            divider:'ή'
+          },
+        ],
+      }}
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithDivider;

package/src/inputs/Radio/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { useWatch } from 'react-hook-form';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-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/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 { RadioConditional } from '@digigov/react-core';
 
 export interface RadioButtonsGroupProps
   extends Omit<UncontrolledFieldProps, 'extra'> {
@@ -29,12 +31,20 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
   return (
     <RadioContainer className={className} defaultValue={currentValue} id={name}>
       {options.map(
-        ({ label, value: v, disabled: optionDisabled, selected }) => (
+        ({
+          label,
+          value: v,
+          show,
+          disabled: optionDisabled,
+          selected,
+          ...option
+        }) => (
           <div key={`${name}.${v}`}>
             <RadioItem
               {...register(name)}
               value={v}
               disabled={disabled || optionDisabled}
+              {...option}
               {...{
                 ...props,
                 reset: undefined,
@@ -47,6 +57,13 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
               {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
             </RadioItem>
             {selected && selected()}
+            {currentValue === v && show && (
+              <RadioConditional>
+                {show.map((fieldName) => (
+                  <Field name={fieldName} key={fieldName} />
+                ))}
+              </RadioConditional>
+            )}
           </div>
         )
       )}

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/registry.js

@@ -56,8 +56,10 @@ import * as _digigov_form_validators_utils_number from '@digigov/form/validators
 import * as _digigov_form_validators_utils_otp from '@digigov/form/validators/utils/otp';
 import * as _digigov_form_validators_utils_phone from '@digigov/form/validators/utils/phone';
 import * as _digigov_form_validators_utils_postal_code from '@digigov/form/validators/utils/postal_code';
+import * as _digigov_form_validators_utils_text_limit from '@digigov/form/validators/utils/text_limit';
 import * as _digigov_form_validators_utils_uuid4 from '@digigov/form/validators/utils/uuid4'
 function lazyImport(pkgImport) {
+  // eslint-disable-next-line no-undef
   return new Proxy(
     {},
     {
@@ -133,6 +135,7 @@ export default {
   '@digigov/form/validators/utils/otp': lazyImport(_digigov_form_validators_utils_otp),
   '@digigov/form/validators/utils/phone': lazyImport(_digigov_form_validators_utils_phone),
   '@digigov/form/validators/utils/postal_code': lazyImport(_digigov_form_validators_utils_postal_code),
+  '@digigov/form/validators/utils/text_limit': lazyImport(_digigov_form_validators_utils_text_limit),
   '@digigov/form/validators/utils/uuid4': lazyImport(_digigov_form_validators_utils_uuid4)
 };
   

package/src/types.tsx

@@ -1,7 +1,7 @@
 import { UseFormReturn, UseFormProps } from 'react-hook-form';
-import { FieldComponentRegistry } from '@digigov/form/Field/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
 import { GridProps } from '@digigov/ui/layouts/Grid';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldComponentRegistry } from '@digigov/form/Field/types';
 
 export type FieldError = {
   message: string;
@@ -13,7 +13,7 @@ export type FieldLabelProps = {
 };
 
 export interface FieldCondition {
-  is: string;
+  is: string | string[] | number | number[] | boolean | boolean[];
   then?: Partial<FieldSpec>;
   else?: Partial<FieldSpec>;
 }
@@ -43,7 +43,9 @@ export interface FieldSpec {
   condition?: Record<string, FieldCondition>;
   controlled?: boolean;
   label?: FieldLabelProps;
-  extra?: Record<string, any>;
+  extra?: {
+    [key: string]: any;
+  };
   editable?: boolean;
   required?: boolean;
   enabled?: boolean;

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

package/src/validators/index.ts

@@ -12,6 +12,7 @@ import {
   OTP_VALIDATOR,
   MOBILE_PHONE_VALIDATOR,
   PHONE_NUMBER_VALIDATOR,
+  TEXT_LIMIT_VALIDATOR,
   POSTALCODE_VALIDATOR,
   UUID4_VALIDATOR,
 } from '@digigov/form/validators/utils';
@@ -46,7 +47,6 @@ export const getYUPTypeMap = (): Record<string, any> => {
         .test(FILE_MAX_SIZE_VALIDATOR(field));
     },
     string: yup.string,
-    text: yup.string,
     boolean: yup.boolean,
     object: (
       field
@@ -107,6 +107,13 @@ export const getYUPTypeMap = (): Record<string, any> => {
     uuid4: (): yup.StringSchema => yup.string().test(UUID4_VALIDATOR),
     iban: (field): yup.StringSchema => yup.string().test(IBAN_VALIDATOR(field)),
     otp: (field): yup.StringSchema => yup.string().test(OTP_VALIDATOR(field)),
+    text: (field): yup.StringSchema => {
+      if (field?.extra?.limit?.max || !!field?.extra?.limit?.min) {
+        return yup.string().test(TEXT_LIMIT_VALIDATOR(field));
+      } else {
+        return yup.string();
+      }
+    },
     postal_code: (field): yup.StringSchema =>
       yup.string().test(POSTALCODE_VALIDATOR(field)),
     mobile_phone: (): yup.StringSchema =>

package/src/validators/utils/file.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
 import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldSpec } from '@digigov/form/types';
 
 const DEFAULT_FILE_MAX_SIZE = 10000000;
 

package/src/validators/utils/index.ts

@@ -9,6 +9,7 @@ export * from '@digigov/form/validators/utils/otp';
 export * from '@digigov/form/validators/utils/phone';
 export * from '@digigov/form/validators/utils/postal_code';
 export * from '@digigov/form/validators/utils/uuid4';
+export * from '@digigov/form/validators/utils/text_limit';
 
 export function getYupField(field: FieldSpec, yupTypeMap: Record<string, any>) {
   const yupField = yupTypeMap[field?.type || 'string'] || yupTypeMap['string'];
@@ -42,7 +43,15 @@ export function computeShape(
         }
         if (then || otherwise) {
           yupField = yupField.when(key, {
-            is: field.condition[key].is,
+            is: (val) => {
+              //@ts-ignore
+              const is = field.condition[key].is;
+              if (is === val || (Array.isArray(val) && val.includes(is))) {
+                return true;
+              } else {
+                return false;
+              }
+            },
             then,
             otherwise,
           });

package/src/validators/utils/phone.ts

@@ -1,6 +1,6 @@
 import * as gPhoneNumber from 'google-libphonenumber';
-import { FieldSpec } from '@digigov/form/types';
 import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldSpec } from '@digigov/form/types';
 
 export type PhoneNumberType = 'landline' | 'mobile' | null;
 

package/src/validators/utils/postal_code.ts

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
 import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldSpec } from '@digigov/form/types';
 
 const CODE_REGEX = /^[12345678][0-9]{4}$/;
 export function validatePostalCode(

package/src/validators/utils/text_limit.ts

@@ -0,0 +1,44 @@
+import { FieldSpec } from '@digigov/form/types';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+
+export function validateText(value: string, min: number, max: number): boolean {
+  let validator;
+  if (min || max) {
+    if (value.length < min || value.length > max) {
+      return (validator = false);
+    } else {
+      return (validator = true);
+    }
+  }
+  return validator;
+}
+
+export const TEXT_LIMIT_VALIDATOR = (field: FieldSpec): ValidatorSchema => {
+  const min: number = field?.extra?.limit?.min;
+  const max: number = field?.extra?.limit?.max;
+  return {
+    name: 'text-limit-validator',
+    message: (v: any): any => {
+      if (min || max) {
+        if (v.value.length < min) {
+          return {
+            key: 'form.error.text.less_than',
+            context: { min: field?.extra?.limit?.min },
+          };
+        }
+        if (v.value.length > max) {
+          return {
+            key: 'form.error.text.more_than',
+            context: { max: field?.extra?.limit?.max },
+          };
+        }
+      }
+    },
+    test: (value: string): boolean => {
+      if (!value) {
+        return true;
+      }
+      return validateText(value, min as number, max as number);
+    },
+  };
+};

package/types.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { UseFormReturn, UseFormProps } from 'react-hook-form';
-import { FieldComponentRegistry } from '@digigov/form/Field/types';
-import { ValidatorSchema } from '@digigov/form/validators/types';
 import { GridProps } from '@digigov/ui/layouts/Grid';
+import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldComponentRegistry } from '@digigov/form/Field/types';
 export declare type FieldError = {
     message: string;
 };
@@ -11,7 +11,7 @@ export declare type FieldLabelProps = {
     secondary?: string;
 };
 export interface FieldCondition {
-    is: string;
+    is: string | string[] | number | number[] | boolean | boolean[];
     then?: Partial<FieldSpec>;
     else?: Partial<FieldSpec>;
 }
@@ -23,7 +23,9 @@ export interface FieldSpec {
     condition?: Record<string, FieldCondition>;
     controlled?: boolean;
     label?: FieldLabelProps;
-    extra?: Record<string, any>;
+    extra?: {
+        [key: string]: any;
+    };
     editable?: boolean;
     required?: boolean;
     enabled?: boolean;

package/validators/index.js

@@ -51,7 +51,6 @@ var getYUPTypeMap = function getYUPTypeMap() {
       }).nullable().test((0, _utils.FILE_MAX_SIZE_VALIDATOR)(field));
     },
     string: yup.string,
-    text: yup.string,
     "boolean": yup["boolean"],
     object: function object(field) {
       return (0, _utils.getYupObjectShape)(field.extra.fields, yupTypeMap);
@@ -107,6 +106,15 @@ var getYUPTypeMap = function getYUPTypeMap() {
     otp: function otp(field) {
       return yup.string().test((0, _utils.OTP_VALIDATOR)(field));
     },
+    text: function text(field) {
+      var _field$extra, _field$extra$limit, _field$extra2, _field$extra2$limit;
+
+      if (field !== null && field !== void 0 && (_field$extra = field.extra) !== null && _field$extra !== void 0 && (_field$extra$limit = _field$extra.limit) !== null && _field$extra$limit !== void 0 && _field$extra$limit.max || !!(field !== null && field !== void 0 && (_field$extra2 = field.extra) !== null && _field$extra2 !== void 0 && (_field$extra2$limit = _field$extra2.limit) !== null && _field$extra2$limit !== void 0 && _field$extra2$limit.min)) {
+        return yup.string().test((0, _utils.TEXT_LIMIT_VALIDATOR)(field));
+      } else {
+        return yup.string();
+      }
+    },
     postal_code: function postal_code(field) {
       return yup.string().test((0, _utils.POSTALCODE_VALIDATOR)(field));
     },

package/validators/utils/file.d.ts

@@ -1,3 +1,3 @@
-import { FieldSpec } from '@digigov/form/types';
 import { ValidatorSchema } from '@digigov/form/validators/types';
+import { FieldSpec } from '@digigov/form/types';
 export declare const FILE_MAX_SIZE_VALIDATOR: (field: FieldSpec) => ValidatorSchema;

package/validators/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from '@digigov/form/validators/utils/otp';
 export * from '@digigov/form/validators/utils/phone';
 export * from '@digigov/form/validators/utils/postal_code';
 export * from '@digigov/form/validators/utils/uuid4';
+export * from '@digigov/form/validators/utils/text_limit';
 export declare function getYupField(field: FieldSpec, yupTypeMap: Record<string, any>): any;
 export declare function computeShape(fields: FieldSpec[], yupTypeMap: Record<string, ValidatorSchema>, validatorRegistry: Record<string, ValidatorSchema[]> | undefined): {};
 export declare function getYupObjectShape(fields: FieldSpec[] | any, yupTypeMap: Record<string, any>, validatorRegistry?: Record<string, ValidatorSchema[]>): yup.ObjectSchema<{