@digigov/form 0.10.8 → 0.10.10

package/src/inputs/FileInput/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import CoreHint from '@digigov/react-core/Hint';
+import Button from '@digigov/ui/core/Button';
+import FileUploadContainer from '@digigov/react-core/FileUploadContainer';
+import FileUpload from '@digigov/react-core/FileUpload';
+export interface FileInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    className?: string;
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+  };
+}
+
+// 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 },
+  ref: any
+) {
+  const { t } = useTranslation();
+  const [files, setFiles] = useState<Array<string> | undefined>([]);
+  const handleChange = (e) => {
+    const target = e.target as HTMLInputElement;
+    const selectedFiles = Array.from(
+      target.files as ArrayLike<{ name: string }>
+    ).map(({ name }) => name);
+    setFiles(selectedFiles);
+    // proceed calling the onChange provided
+    // by react-hook-form
+    onChange(e);
+  };
+  return (
+    <>
+      <FileUploadContainer hasUploadedFile={files && files.length > 0}>
+        {files?.length ? (
+          <>
+            <Paragraph>
+              <b>{t('upload.file')}:</b> {`${files.join(', ')}`}
+            </Paragraph>
+          </>
+        ) : (
+          <CoreHint>{t('upload.no_file')}</CoreHint>
+        )}
+        <FileUpload
+          ref={ref}
+          hasFiles={!!files?.length}
+          name={name}
+          disabled={disabled}
+          onChange={handleChange}
+          {...{ ...props, required: undefined }}
+        >
+          {files?.length ? t('upload.change_file') : t('upload.choose_file')}
+        </FileUpload>
+        {files !== undefined && files.length > 0 && (
+          <>
+            <Button
+              variant="link"
+              onClick={(event) => {
+                event.preventDefault();
+                reset({ [name]: '' });
+                setFiles(undefined);
+              }}
+            >
+              {t('upload.reset_file')}
+            </Button>
+          </>
+        )}
+      </FileUploadContainer>
+    </>
+  );
+});
+
+export default FileInput;

package/src/inputs/Input/Input.stories.js

@@ -0,0 +1,14 @@
+import Input from '@digigov/form/inputs/Input';
+export default {
+  title: 'Digigov Form/inputs/Input',
+  component: Input,
+  displayName: 'Input'
+};
+export * from '@digigov/form/inputs/Input/__stories__/Default';
+export * from '@digigov/form/inputs/Input/__stories__/Integer';
+export * from '@digigov/form/inputs/Input/__stories__/Boolean';
+export * from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
+export * from '@digigov/form/inputs/Input/__stories__/MobilePhone';
+export * from '@digigov/form/inputs/Input/__stories__/AFM';
+export * from '@digigov/form/inputs/Input/__stories__/IBAN';
+export * from '@digigov/form/inputs/Input/__stories__/PostalCode';

package/src/inputs/Input/Input.stories.playwright.json

@@ -0,0 +1,376 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-form-inputs-input--integer": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Enter"
+              }
+            }
+          ],
+          "id": "ppNIb7vjFntx",
+          "title": "navigate with tab and submit"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "1.1"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "CWKxXNnOLhtt",
+          "title": "add wrong number and submit"
+        },
+        {
+          "actions": [
+            {
+              "name": "clearInput",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "2"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "d2XTmn_xZito",
+          "title": "Add correct number and submit"
+        }
+      ]
+    },
+    "digigov-form-inputs-input--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "QHGdovoSxdA3",
+          "title": "show validation error"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "aA1@"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "6-b0oP8dmS91",
+          "title": "type and submit"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "WWwt_BZdizHx",
+          "title": "focus"
+        }
+      ]
+    },
+    "digigov-form-inputs-input--phone-number": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "1234567890"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "iE8KCHv68Fb2",
+          "title": "show validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "2105665434"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "5qMVj35xlepo",
+          "title": "focus and add number"
+        }
+      ]
+    },
+    "digigov-form-inputs-input--mobile-phone": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "1234567890"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "a-G51O6gqmv8",
+          "title": "show validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "6976128341"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "i6t6alh2h82C",
+          "title": "focus, type correct phone and submit"
+        }
+      ]
+    },
+    "digigov-form-inputs-input--afm": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "1234567890"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "odbhZlBu8X2W",
+          "title": "show validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "094536469"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "YmmCoFpuTt8c",
+          "title": "add correct afm"
+        }
+      ]
+    },
+    "digigov-form-inputs-input--iban": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "FR5814508000304268743732K61"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "q0W9XfvDT7hB",
+          "title": "add iban"
+        },
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "FR5814508000304268743732K6"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "uiMoCRDxz41F",
+          "title": "show validation errors"
+        }
+      ]
+    },
+    "digigov-form-inputs-input--postal-code": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            },
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "111111"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "M2R-kMnEQxdA",
+          "title": "show validation errors"
+        },
+        {
+          "actions": [
+            {
+              "name": "type",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>div>label>input",
+                "text": "42100"
+              }
+            },
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>form>button"
+              }
+            }
+          ],
+          "id": "IZKORVUoJzQt",
+          "title": "add postal code"
+        }
+      ]
+    }
+  }
+}

package/src/inputs/Input/__stories__/AFM.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const AFM = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="afm"
+      name="afm"
+      type="afm"
+      label={{
+        primary: 'Αριθμός φορολογικού μητρώου',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default AFM;

package/src/inputs/Input/__stories__/Boolean.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Boolean = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="boolean-value"
+      name="boolean-value"
+      type="boolean"
+      label={{
+        primary: 'Ένα απλό true ή false',
+        secondary:
+          'Το πεδίο είναι τύπου boolean, δηλαδή λογικού μηδέν ή ένα. Μπορείτε να εισάγετε true, false, 0, 1.',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Boolean;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Default = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="business-title"
+      name="business-title"
+      type="string"
+      label={{
+        primary: 'Όνομα επιχείρησης',
+        secondary: 'Εισάγετε μια σειρά από χαρακτήρες και αριθμούς',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/Input/__stories__/IBAN.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const IBAN = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="iban"
+      name="iban"
+      type="iban"
+      label={{
+        primary: 'Αριθμός IBAN',
+        secondary:
+          'IBAN σημαίνει Διεθνής Αριθμός Τραπεζικού Λογαριασμού. Είναι ένας διεθνώς συμφωνημένος κωδικός, που αποτελείται από έως και 34 γράμματα και αριθμούς, που βοηθά τις τράπεζες να διεκπεραιώνουν μεταφορές σε όλο τον κόσμο.',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default IBAN;

package/src/inputs/Input/__stories__/Integer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const Integer = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="random-number"
+      name="random-number"
+      type="int"
+      label={{
+        primary: 'Ένας τυχαίος αριθμός',
+        secondary: 'Εισάγετε έναν οποιοδήποτε αριθμό μεγαλύτερο από το μηδέν',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Integer;

package/src/inputs/Input/__stories__/MobilePhone.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const MobilePhone = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="mobile-phone"
+      name="mobile-phone"
+      type="mobile_phone"
+      label={{
+        primary: 'Κινητό τηλέφωνο',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MobilePhone;

package/src/inputs/Input/__stories__/PhoneNumber.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const PhoneNumber = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="phone-number"
+      name="phone-number"
+      type="phone_number"
+      label={{
+        primary: 'Σταθερό τηλέφωνο',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default PhoneNumber;

package/src/inputs/Input/__stories__/PostalCode.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+export const PostalCode = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      debugger;
+      console.log(data);
+    }}
+  >
+    <Field
+      key="postal-code"
+      name="postal-code"
+      type="postal_code"
+      label={{
+        primary: 'Ταχυδρομικός κωδικός',
+      }}
+      required
+      extra={{ countries: ['GR'] }}
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default PostalCode;

package/src/inputs/Input/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Input
+parent: docs/ui/components
+---
+
+## Example
+
+<Input type="text" />