@digigov/form 2.0.0-2445d5cb → 2.0.0-264e5fff

package/src/inputs/DateTimeInput/__stories__/WithDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'datetime_example',
+    type: 'datetime',
+    defaultValue: '05/11/2020 13:30',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020 13:30',
+    },
+  } as const,
+];
+
+export const WithDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithDefaultValue;

package/src/inputs/DateTimeInput/__stories__/WithInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '05/01/2020 13:30' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithInitialValue;

package/src/inputs/DateTimeInput/__stories__/WithWrongDefaultValue.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'datetime_example',
+    type: 'datetime',
+    defaultValue: '5/1/2020 3:3',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020 13:30',
+    },
+  } as const,
+];
+
+export const WithWrongDefaultValue = (_: any) => (
+  <FormBuilder onSubmit={(data) => console.log(data)}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithWrongDefaultValue;

package/src/inputs/DateTimeInput/__stories__/WithWrongInitialValue.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'date_example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const WithWrongInitialValue = (_: any) => (
+  <FormBuilder
+    initial={{ date_example: '5/1/2020 3:3' }}
+    onSubmit={(data) => console.log(data)}
+  >
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default WithWrongInitialValue;

package/src/inputs/DateTimeInput/doc.mdx

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/form/inputs/DateTimeInput/__stories__/Default';
+import { WithDefaultValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithDefaultValue';
+import { WithInitialValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithInitialValue';
+import { WithWrongDefaultValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithWrongDefaultValue';
+import { WithWrongInitialValue } from '@digigov/form/inputs/DateTimeInput/__stories__/WithWrongInitialValue';
+
+test('renders the All DateTimeInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithDefaultValue">
+      <WithDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithInitialValue">
+      <WithInitialValue />
+    </TestVariant>
+    <TestVariant title="WithWrongDefaultValue">
+      <WithWrongDefaultValue />
+    </TestVariant>
+    <TestVariant title="WithWrongInitialValue">
+      <WithWrongInitialValue />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/DateTimeInput/index.tsx

@@ -0,0 +1,246 @@
+import React, { useMemo, useEffect } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import type { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useFormContext } from '@digigov/form/FormContext';
+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(name, value, form) {
+  const [year, month, day, hours, minutes] = useMemo(() => {
+    if (!value || value.length === 0) {
+      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 update(value) {
+    form.setValue(name, value, { shouldValidate: false });
+  }
+
+  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) {
+      update('');
+    } else {
+      update(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);
+  }
+
+  function trigger() {
+    if (form.formState.isSubmitted) {
+      form.trigger(name);
+    }
+  }
+
+  return {
+    day,
+    month,
+    year,
+    hours,
+    minutes,
+    setYear,
+    setMonth,
+    setDay,
+    setHours,
+    setMinutes,
+    trigger,
+  };
+}
+
+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 = React.forwardRef<HTMLInputElement, Record<string, any>>(
+  ({ label, ...props }, ref) => {
+    return (
+      <DateInputItem {...props} ref={ref}>
+        {label}
+      </DateInputItem>
+    );
+  }
+);
+DateTimePart.displayName = 'DateTimePart';
+
+export const DateTimeInput = React.forwardRef<
+  HTMLInputElement,
+  Record<string, any>
+>(({ name, ...props }, ref) => {
+  const { t } = useTranslation();
+  const form = useFormContext();
+
+  useEffect(() => {
+    const initialValue = form.getValues(name);
+    // checks if the initial value is undefined and if the default value is valid  date
+    if (initialValue === undefined && props.defaultValue) {
+      form.setValue(name, makeDateTime(props.defaultValue), {
+        shouldValidate: false,
+      });
+    } else {
+      // checks if the initial value is a valid date
+      form.setValue(name, makeDateTime(initialValue), {
+        shouldValidate: false,
+      });
+    }
+  }, []);
+
+  const value = form.getValues(name);
+  const dateTime = useDateTime(name, value, form);
+
+  return (
+    <DateInputContainer>
+      <DateTimePart
+        ref={ref}
+        label={t('form.label.day')}
+        onChange={dateTime.setDay}
+        onBlur={(e) => {
+          if (dateTime.day && dateTime.day.length === 1) {
+            dateTime.setDay(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.day}
+        width={2}
+        name={`${name}-day`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!dateTime.day ? props.error : false}
+        id={`${name}-day`}
+      />
+      <DateTimePart
+        label={t('form.label.month')}
+        onChange={dateTime.setMonth}
+        onBlur={(e) => {
+          if (dateTime.month && dateTime.month.length === 1) {
+            dateTime.setMonth(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.month}
+        width={2}
+        name={`${name}-month`}
+        id={`${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}
+        onBlur={dateTime.trigger}
+        value={dateTime.year}
+        width={4}
+        name={`${name}-year`}
+        id={`${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) => {
+          if (dateTime.hours && dateTime.hours.length === 1) {
+            dateTime.setHours(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.hours}
+        width={2}
+        name={`${name}-hours`}
+        id={`${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) => {
+          if (dateTime.minutes && dateTime.minutes.length === 1) {
+            dateTime.setMinutes(e, true);
+          }
+          dateTime.trigger();
+        }}
+        value={dateTime.minutes}
+        width={2}
+        name={`${name}-minutes`}
+        id={`${name}-minutes`}
+        maxLength="2"
+        disabled={props.disabled}
+        aria-required={props['aria-required']}
+        error={!dateTime.minutes ? props.error : false}
+      />
+    </DateInputContainer>
+  );
+});
+
+DateTimeInput.displayName = 'DateTimeInput';
+
+export default DateTimeInput;

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

@@ -1,7 +1,11 @@
 import FileInput from '@digigov/form/inputs/FileInput';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/FileInput',
   component: FileInput,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'FileInput',
 };
 export { Default } from '@digigov/form/inputs/FileInput/__stories__/Default';
+export { WithBorderAndLink } from '@digigov/form/inputs/FileInput/__stories__/WithBorderAndLink';

package/src/inputs/FileInput/__stories__/Default.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 Default = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/FileInput/__stories__/WithBorderAndLink.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const WithBorderAndLink = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key={'string'}
+      name="file"
+      type="file"
+      required
+      extra={{
+        containerProps: {
+          variant: 'border',
+        },
+        uploadButtonProps: {
+          variant: 'link',
+        },
+        resetButtonProps: {
+          variant: 'link',
+          color: 'warning',
+        },
+      }}
+      label={{ primary: 'Βιογραφικό σημείωμα' }}
+    />
+    <Button>Συνέχεια</Button>
+  </FormBuilder>
+);
+
+export default WithBorderAndLink;

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.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/FileInput/__stories__/Default';
+import { WithBorderAndLink } from '@digigov/form/inputs/FileInput/__stories__/WithBorderAndLink';
 
 test('renders the All FileInput variants', async ({ mount, page }) => {
   await mount(
@@ -10,10 +11,17 @@ test('renders the All FileInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="WithBorderAndLink">
+      <WithBorderAndLink />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });