@digigov/form 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/src/inputs/Checkboxes/index.mdx

@@ -0,0 +1,33 @@
+---
+title: Checkbox
+---
+ 
+# Checkboxes
+Input element of type `checkbox` are rendered by default as boxes that are checked when activated.
+Checkboxes are used to let a user select one or more options of a limited number of choices.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="Default.tsx"
+/>
+
+### Conditional
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="Conditional.tsx"
+/>
+
+### With divider
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Checkboxes"
+  story="WithDivider.tsx"
+/>

package/src/inputs/Checkboxes/index.tsx

@@ -2,7 +2,7 @@ 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';
+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';
@@ -17,14 +17,14 @@ export interface CheckboxesProps
   };
 }
 
-export const Checkboxes: React.FC<CheckboxesProps> = function Checkboxes({
+export const Checkboxes: React.FC<CheckboxesProps> = ({
   name,
   onChange,
   value,
   extra: { options, className },
   disabled,
   ...props
-}) {
+}) => {
   if (!value) value = [];
   const handleChange = (optionValue, idx, show) => (evt): void => {
     let newValue;

package/src/inputs/DateInput/index.mdx

@@ -0,0 +1,23 @@
+---
+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
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/DateInput"
+  story="Default.tsx"
+/>
+
+
+

package/src/inputs/DateInput/index.tsx

@@ -78,7 +78,7 @@ const DatePart = ({ label, ...props }) => {
   return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
 };
 
-export const DateInput = function DateInput({ name, type, ...props }) {
+export const DateInput = ({ name, type, ...props }) => {
   const { t } = useTranslation();
   const [initial] = useState(props.value);
   const value = useMemo(() => {

package/src/inputs/FileInput/index.mdx

@@ -0,0 +1,19 @@
+---
+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
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/FileInput"
+  story="Default.tsx"
+/>

package/src/inputs/ImageInput/index.mdx

@@ -0,0 +1,19 @@
+---
+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
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/ImageInput"
+  story="Default.tsx"
+/>

package/src/inputs/Input/index.mdx

@@ -1,8 +1,95 @@
 ---
 title: Input
-parent: docs/ui/components
 ---
+ 
+# Input
+
+
+
+The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user; 
+a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Default.tsx"
+/>
+
+### Boolean
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Boolean.tsx"
+/>
+### AFM
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="AFM.tsx"
+/>
+
+### IBAN
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="IBAN.tsx"
+/>
+
+### Integer
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Default.tsx"
+/>
+
+### Landline number
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="LandlineNumber.tsx"
+/>
+
+### Mobile phone 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="MobilePhone.tsx"
+/>
+
+### Phone number
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="PhoneNumber.tsx"
+/>
+
+### Postal code 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="PostalCode.tsx"
+/>
+
+### Text with character limit 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="TextWithCharacterLimit.tsx"
+/>
+
+
 
-## Example
 
-<Input type="text" />

package/src/inputs/Input/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Hint } from '@digigov/react-core';
+import { Hint } from '@digigov/react-core/Hint';
 import TextArea from '@digigov/react-core/TextArea';
 import TextInput from '@digigov/react-core/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';

package/src/inputs/OtpInput/index.mdx

@@ -0,0 +1,23 @@
+---
+title: OTP Input
+---
+ 
+# OTP input
+
+
+
+A one-time password (OTP) input element of type `otp`, also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or transaction, 
+on a computer system or other digital device.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/OtpInput"
+  story="Default.tsx"
+/>
+
+
+

package/src/inputs/OtpInput/index.tsx

@@ -6,7 +6,7 @@ import SingleCharacterInputs, {
 export const RE_DIGIT = new RegExp(/^\d+$/);
 export const REMOVE_SPACES = new RegExp(/\s+/g);
 
-function useOtp(onChange, maxLength) {
+export function useOtp(onChange, maxLength) {
   const [otpValues, setOtpValues] = useState(Array<string>(maxLength).fill(''));
   const handleChange = useCallback(
     (otp: string[]) => {
@@ -123,7 +123,7 @@ const SingleCharacterInputPart = ({ ...props }) => {
   return <SingleCharacterInput {...props} />;
 };
 
-export const OtpInput = function OtpInput({ name, maxLength = 6, ...props }) {
+export const OtpInput = ({ name, maxLength = 6, ...props }) => {
   const otp = useOtp(props.onChange, maxLength);
   return (
     <SingleCharacterInputs>

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

@@ -95,3 +95,5 @@ export const Conditional = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
+
+export default Conditional;

package/src/inputs/Radio/index.mdx

@@ -0,0 +1,33 @@
+---
+title: Radio
+---
+ 
+# Radio
+Input element of type `radio` are generally used in radio groups—collections of radio buttons describing a set of related options.
+Radios are used to let a user select one option of a limited number of choices.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Radio"
+  story="Default.tsx"
+/>
+
+### Conditional
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Radio"
+  story="Conditional.tsx"
+/>
+
+### With divider
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Radio"
+  story="WithDivider.tsx"
+/>

package/src/inputs/Radio/index.tsx

@@ -3,7 +3,7 @@ import { useWatch } from 'react-hook-form';
 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 { RadioConditional } from '@digigov/react-core/RadioConditional';
 import Hint from '@digigov/react-core/Hint';
 import RadioContainer from '@digigov/react-core/RadioContainer';
 import RadioItem from '@digigov/react-core/RadioItem';

package/src/inputs/Select/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Select
+---
+ 
+# Select
+
+The select element represents a control that provides a menu of options.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Select"
+  story="Default.tsx"
+/>

package/src/validators/utils/file.ts

@@ -5,17 +5,17 @@ const DEFAULT_FILE_MAX_SIZE = 10000000;
 
 export const FILE_MAX_SIZE_VALIDATOR = (field: FieldSpec): ValidatorSchema => ({
   name: 'file-max-size-validator',
-  message: 'form.error.file_size',
+  message: {
+    key: 'form.error.file_size',
+    context: {
+      maxSizeToMb: (field?.extra?.limit.maxSize || DEFAULT_FILE_MAX_SIZE) / 1000000,
+    },
+  },
   test: (value: File[]): boolean => {
-    if (field?.extra?.limit && field?.extra?.limit.maxSize && value) {
-      for (const file of value) {
-        if (file.size >= field.extra.limit.maxSize) {
-          return false;
-        }
-      }
-    } else if (value) {
+    if (value) {
       for (const file of value) {
-        if (file.size >= DEFAULT_FILE_MAX_SIZE) {
+        const maxSize = field?.extra?.limit?.maxSize || DEFAULT_FILE_MAX_SIZE
+        if (file.size > maxSize) {
           return false;
         }
       }

package/validators/utils/file/index.js

@@ -3,18 +3,25 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var DEFAULT_FILE_MAX_SIZE = 10000000;
 export var FILE_MAX_SIZE_VALIDATOR = function FILE_MAX_SIZE_VALIDATOR(field) {
+  var _field$extra;
   return {
     name: 'file-max-size-validator',
-    message: 'form.error.file_size',
+    message: {
+      key: 'form.error.file_size',
+      context: {
+        maxSizeToMb: ((field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.limit.maxSize) || DEFAULT_FILE_MAX_SIZE) / 1000000
+      }
+    },
     test: function test(value) {
-      var _field$extra, _field$extra2;
-      if (field !== null && field !== void 0 && (_field$extra = field.extra) !== null && _field$extra !== void 0 && _field$extra.limit && field !== null && field !== void 0 && (_field$extra2 = field.extra) !== null && _field$extra2 !== void 0 && _field$extra2.limit.maxSize && value) {
+      if (value) {
         var _iterator = _createForOfIteratorHelper(value),
           _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _field$extra2, _field$extra2$limit;
             var file = _step.value;
-            if (file.size >= field.extra.limit.maxSize) {
+            var maxSize = (field === null || field === void 0 ? void 0 : (_field$extra2 = field.extra) === null || _field$extra2 === void 0 ? void 0 : (_field$extra2$limit = _field$extra2.limit) === null || _field$extra2$limit === void 0 ? void 0 : _field$extra2$limit.maxSize) || DEFAULT_FILE_MAX_SIZE;
+            if (file.size > maxSize) {
               return false;
             }
           }
@@ -23,21 +30,6 @@ export var FILE_MAX_SIZE_VALIDATOR = function FILE_MAX_SIZE_VALIDATOR(field) {
         } finally {
           _iterator.f();
         }
-      } else if (value) {
-        var _iterator2 = _createForOfIteratorHelper(value),
-          _step2;
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var _file = _step2.value;
-            if (_file.size >= DEFAULT_FILE_MAX_SIZE) {
-              return false;
-            }
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
-        }
       }
       return true;
     }