@digigov/form 0.10.5 → 0.10.7

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" />

package/src/inputs/Input/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import TextInput from '@digigov/react-core/TextInput';
+import TextArea from '@digigov/react-core/TextArea';
+import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+
+const TYPES_MAP = {
+  string: 'text',
+  int: 'text',
+  text: 'text',
+  date: 'date',
+};
+
+export interface InputProps extends Omit<UncontrolledFieldProps, 'extra'> {
+  extra?: {
+    fullWidth?: boolean;
+    multiline?: boolean;
+    className?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    rows?: any;
+  };
+}
+
+export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
+  function WrappedInput({ name, type, extra, ...props }, ref: never) {
+    let { multiline = false, rows } = extra || {};
+    const { className } = extra || {};
+    // if enforced to multiline use true. Derive from type otherwise.
+    multiline = multiline === true || type === 'text';
+    // use explicit rows value if set. Derive from multiline otherwise.
+    rows = rows || (multiline ? 4 : 1);
+    // translate dilosi type to HTML Input type
+    const fieldType = TYPES_MAP[type || 'text'] || 'text';
+    if (multiline === true) {
+      return (
+        <TextArea
+          name={name}
+          className={className}
+          rows={rows}
+          ref={ref}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+            type: fieldType,
+          }}
+        />
+      );
+    } else {
+      return (
+        <TextInput
+          name={name}
+          type={fieldType}
+          className={className}
+          ref={ref}
+          {...{ ...props, reset: undefined, required: undefined }}
+        />
+      );
+    }
+  }
+);
+
+export default Input;

package/src/inputs/Label/Label.stories.js

@@ -0,0 +1,6 @@
+import Label from '@digigov/form/inputs/Label';
+export default {
+  title: 'Digigov Form/inputs/Label',
+  component: Label,
+};
+export * from '@digigov/form/inputs/Label/__stories__/Default';