@digigov/form 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

package/src/inputs/DateTimeInput/index.tsx

@@ -0,0 +1,189 @@
+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,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+import { useTranslation } from '@digigov/ui/i18n';
+dayjs.extend(customParseFormat);
+
+export interface DateTimeInputProps
+  extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    max?: string;
+    min?: string;
+  };
+}
+
+function useDateTime(value, onChange) {
+  const [year, month, day, hours, minutes] = useMemo(() => {
+    if (!value || value.length === 0) {
+      onChange('');
+      return ['', '', '', '', ''];
+    }
+    const [datePart, timePart] = value.split(' ');
+    const [day, month, year] = datePart.split('/');
+    const [hours, minutes] = timePart ? timePart.split(':') : ['', ''];
+    return [year, month, day, hours, minutes];
+  }, [value]);
+
+  function set(year, month, day, hours, minutes) {
+    const datePart = `${day || ''}/${month || ''}/${year || ''}`;
+    const timePart = hours || minutes ? `${hours || ''}:${minutes || ''}` : '';
+    const value = timePart ? `${datePart} ${timePart}` : datePart;
+
+    if (!year && !month && !day && !hours && !minutes) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  }
+
+  function setYear(evt) {
+    const val = evt.target.value;
+    set(val, month, day, hours, minutes);
+  }
+
+  function setMonth(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, val, day, hours, minutes);
+  }
+
+  function setDay(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, val, hours, minutes);
+  }
+
+  function setHours(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, day, val, minutes);
+  }
+
+  function setMinutes(evt, cast) {
+    let val = evt.target.value;
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+    set(year, month, day, hours, val);
+  }
+
+  return {
+    day,
+    month,
+    year,
+    hours,
+    minutes,
+    setYear,
+    setMonth,
+    setDay,
+    setHours,
+    setMinutes,
+  };
+}
+
+const VALID_FORMATS = ['DD/MM/YYYY HH:mm', 'DD/MM/YYYY'];
+
+const makeDateTime = (val) => {
+  const date = dayjs(val, VALID_FORMATS, true);
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY HH:mm');
+  }
+  return '';
+};
+
+const DateTimePart = ({ label, ...props }) => {
+  return <DateInputItem {...props}>{label}</DateInputItem>;
+};
+
+export const DateTimeInput = ({ name, ...props }) => {
+  const { t } = useTranslation();
+  const [initial] = useState(props.value);
+  const value = useMemo(() => {
+    if (initial === props.value) {
+      return makeDateTime(props.value);
+    }
+    return props.value;
+  }, [props.value, initial]);
+
+  const datetime = useDateTime(
+    value || makeDateTime(props.defaultValue),
+    props.onChange
+  );
+
+  return (
+    <DateInputContainer>
+      <DateTimePart
+        label={t('form.label.day')}
+        onChange={datetime.setDay}
+        onBlur={(e) => datetime.setDay(e, true)}
+        value={datetime.day}
+        width={2}
+        name={`${name}-day`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.day ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.month')}
+        onChange={datetime.setMonth}
+        onBlur={(e) => datetime.setMonth(e, true)}
+        value={datetime.month}
+        width={2}
+        name={`${name}-month`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.month ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.year')}
+        onChange={datetime.setYear}
+        value={datetime.year}
+        width={4}
+        name={`${name}-year`}
+        maxLength="4"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.year ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.hours')}
+        onChange={datetime.setHours}
+        onBlur={(e) => datetime.setHours(e, true)}
+        value={datetime.hours}
+        width={2}
+        name={`${name}-hours`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.hours ? props.error : false}
+      />
+      <DateTimePart
+        label={t('form.label.minutes')}
+        onChange={datetime.setMinutes}
+        onBlur={(e) => datetime.setMinutes(e, true)}
+        value={datetime.minutes}
+        width={2}
+        name={`${name}-minutes`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!datetime.minutes ? props.error : false}
+      />
+    </DateInputContainer>
+  );
+};
+
+export default DateTimeInput;

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.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}
@@ -52,7 +51,7 @@ export const FileInput: React.FC<any> = React.forwardRef(function FileInput(
           name={name}
           disabled={disabled}
           onChange={handleChange}
-          {...{ ...props, required: undefined }}
+          {...{ ...props, required: undefined, Field: undefined }}
         >
           {files?.length ? t('upload.change_file') : t('upload.choose_file')}
         </FileUpload>

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

@@ -7,4 +7,3 @@ export default {
 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

@@ -15,7 +15,7 @@ const FIELDS: FieldSpec[] = [
       limit: {
         maxSize: 1000,
       },
-    }
+    },
   },
 ];
 
@@ -28,7 +28,7 @@ export const MaxSize = () => (
   >
     <Fieldset>
       {FIELDS.map((field) => (
-        <Field key={field.key} name={field.key}  />
+        <Field key={field.key} name={field.key} />
       ))}
     </Fieldset>
     <Button type="submit">Συνέχεια</Button>

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.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 { Base } from '@digigov/react-core/Base';
+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 <Base as='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>
-                <Base as='b'>{t('upload.image')}:</Base> {`${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} />}
@@ -95,7 +90,12 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
                 disabled={disabled}
                 accept="image/*"
                 onChange={handleImageChange}
-                {...{ ...props, required: undefined, type: 'file' }}
+                {...{
+                  ...props,
+                  required: undefined,
+                  Field: undefined,
+                  type: 'file',
+                }}
               >
                 {t('upload.choose_image')}
               </FileUpload>

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/doc.mdx

@@ -0,0 +1,56 @@
+---
+title: Input
+---
+ 
+# 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
+
+### String
+
+<code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
+
+### Boolean
+
+<code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
+
+### AFM
+
+<code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
+
+
+### IBAN
+
+<code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
+
+
+### Integer
+
+<code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
+
+
+### Landline number
+
+<code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
+
+
+### Mobile phone 
+
+<code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
+
+
+### Phone number
+
+<code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
+
+
+### Postal code 
+
+<code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
+
+### Text with character limit 
+
+<code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />

package/src/inputs/Input/index.tsx

@@ -1,10 +1,11 @@
 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',
   int: 'text',
@@ -42,17 +43,23 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
 
     const getRemainingChars = (currentValue, limit) => {
       if (currentValue) {
-        return limit?.max - currentValue.length
+        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')}.`;
+      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 (
@@ -67,13 +74,15 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
               reset: undefined,
               required: undefined,
               type: fieldType,
+              Field: undefined,
             }}
           />
           {limit?.max && (
             <Hint display={'flex'}>
               {t('form.info.text.you_have')}
-              <Hint fontWeight='bold'>
-                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}&nbsp;
+              <Hint fontWeight="bold">
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+                &nbsp;
               </Hint>
               {constructRemainingText(currentValue, limit)}
             </Hint>
@@ -88,7 +97,12 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
           data-type={type}
           className={className}
           ref={ref}
-          {...{ ...props, reset: undefined, required: undefined }}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+            Field: undefined,
+          }}
         />
       );
     }