@digigov/form 0.8.3 → 0.8.5-alpha

package/esm/index.mdx

@@ -1,206 +1,44 @@
 ---
-title: Form
-parent: docs/ui/components
+id: Introduction
+title: Digigov Form
+sidebar_label: Introduction to Digigov Form
 ---
 
-import FormBuilder from '@digigov/form/';
+import LeadText from "@site/src/components/LeadText";
 
-export const fields = [
-  {
-    key: 'custom_object.attribute1',
-    type: 'string',
-    required: true,
-    label: {
-      primary: 'Custom object Attribute 1',
-    },
-    layout: {
-      xs: 5,
-      sm: 6,
-    },
-  },
-  {
-    key: 'custom_object.attribute2',
-    type: 'int',
-    required: true,
-    label: {
-      primary: 'Custom object Attribute 2',
-    },
-    layout: {
-      xs: 5,
-      sm: 6,
-    },
-  },
-  {
-    key: 'phone',
-    label: {
-      primary: 'Mobile phone',
-      secondary: 'A valid mobile number, eg. +306988848888',
-    },
-    required: true,
-    type: 'mobile_phone',
-  },
-  {
-    key: 'choice_single',
-    label: { primary: 'Is this true or not' },
-    type: 'choice:single',
-    extra: {
-      options: [
-        {
-          label: { primary: 'Yes' },
-          value: 'yes',
-        },
-        {
-          label: { primary: 'No', secondary: 'Explanation about no option' },
-          value: 'no',
-        },
-      ],
-    },
-  },
-  {
-    key: 'choice_single_notitle',
-    type: 'choice:single',
-    editable: false,
-    extra: {
-      options: [
-        {
-          label: { primary: 'One' },
-          value: '1',
-        },
-        {
-          label: { primary: 'Two' },
-          value: '2',
-        },
-      ],
-    },
-  },
-  {
-    key: 'choice_multiple',
-    label: { primary: 'Select multiple choices' },
-    type: 'choice:multiple',
-    condition: {
-      choice_single: {
-        is: 'no',
-        then: {
-          enabled: true,
-          required: true,
-        },
-        else: {
-          enabled: false,
-          required: false,
-        },
-      },
-    },
-    extra: {
-      options: [
-        {
-          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
-          value: 'choice_1',
-        },
-        {
-          label: { primary: 'Choice 2' },
-          value: 'choice_2',
-        },
-      ],
-    },
-  },
-  {
-    key: 'choice_single_select',
-    label: { primary: 'Select one choice' },
-    type: 'choice:single',
-    extra: {
-      options: [
-        {
-          label: { primary: 'Choice 1', secondary: 'Choice 1 explanation' },
-          value: 'choice_1',
-        },
-        {
-          label: { primary: 'Choice 2 lenghty explanation without reason' },
-          value: 'choice_2',
-        },
-        {
-          label: { primary: 'Choice 3 ' },
-          value: 'choice_3',
-        },
-      ],
-      component: 'Select',
-    },
-  },
-  {
-    key: 'number',
-    label: { primary: 'A positive number' },
-    required: true,
-    width: '100px',
-    type: 'int',
-    condition: {
-      choice_single: {
-        is: 'no',
-        then: {
-          display: true,
-          required: true,
-        },
-        else: {
-          display: false,
-          required: false,
-        },
-      },
-    },
-  },
-  {
-    key: 'file',
-    label: { primary: 'A file upload field' },
-    required: false,
-    extra: {
-      accept: '.pdf,.jpeg,.png',
-      multiple: true,
-      maxSize: 1000,
-    },
-    width: '100px',
-    type: 'file',
-  },
-];
-export const fieldsets = [
-  {
-    key: 'group1',
-    label: {
-      primary: 'This is group 1',
-      secondary: 'And some more info',
-    },
-    body: `and here is the text
-    that describes more for this`,
-    fields: ['custom_object.attribute1', 'custom_object.attribute2'],
-  },
-  {
-    key: 'rest',
-    fields: fields
-      .map(({ key }) => key)
-      .filter((key) => !key.startsWith('custom_object')),
-  },
-];
-export const initialValues = {
-  phone: '6988888888',
-  choice_multiple: ['choice_2'],
-  choice_single: 'yes',
-  choice_single_select: 'choice_3',
-};
+<LeadText>Digigov Form is an off-the-shelf solution for managing web forms using Reactjs. It supports flexible and multi-step forms and easy-to-use validation. This page will guide you through everything you need to create accessible and
+dynamic forms that can handle all sorts of user inputs.</LeadText>
+ 
+<img src="/img/form.svg" style={{margin: '3rem 0', maxWidth: '450px', width: '60%'}}/>
 
-## Example
+## Before we start
 
-<FormBuilder
-  fields={fields}
-  fieldsets={fieldsets}
-  onSubmit={(data) => {
-    console.log(data);
-  }}
-  initial={initialValues}
-  auto={true}
->
-  {/* <Fieldset>
-    <FieldsetLabel>This is a fieldset</FieldsetLabel>
-    {fields.map((field) => (
-      <Field key={field.key} name={field.key} />
-    ))}
-  </Fieldset> */}
-  <button type="submit">Submit</button>
-</FormBuilder>
+Forms are essential for any modern application. We have done the heavy lifting of
+creating a library that will help you increase the productivity and the quality
+of your forms. You can choose from a variety of input types and validations and
+describe how form fields behave and restrict data input.
 
-## API
+Finally, we also offer an easy way to spread your forms across multiple pages or
+steps and still be able to gather data in a single serialized object that you
+will be able to save via an JSON API.
+
+## Overview 
+
+The `@digigov/form` NPM package contains React components and validators. The
+library uses basic, semantically correct HTML5 input fields.
+
+It adds dynamic control, interactivity and validations to the core input
+components implemented in `@digigov/react-core`. Styling is provided by
+`@digigov/css` library following the [GOV.GR design
+system](https://guide.services.gov.gr).
+
+Digigov Form uses two main libraries internally. The first is [React Hook
+Form](https://www.react-hook-form.com/) which helps us manage the form state and
+perform actions and mutations on it. The second is
+[Yup](https://github.com/jquense/yup) and it is used to validate form data. It
+interfaces with React Hook Form right out of the box, but also enables us to
+define custom validation types such as AMKA, AFM etc.
+
+Some basic functionalites of `@digigov/form` will be presented in the following
+sections and also we are going to guide you through some more advanced topics
+such as internationalisation, custom data validation etc.

package/esm/inputs/AutoComplete/index.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "extra", "onChange", "value"];
+import React, { useCallback } from 'react';
+import UIAutoComplete from '@digigov/ui/admin/AutoComplete';
+import { Hint } from '@digigov/react-core';
+export var AutoComplete = function AutoComplete(_ref) {
+  var name = _ref.name,
+      options = _ref.extra.options,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var suggest = useCallback(function suggest(query, syncResults) {
+    syncResults(query ? options.filter(function (option) {
+      var _option$label, _option$label2;
+
+      return "".concat(option.value, " ").concat(((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.primary) || '', " ").concat(((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.secondary) || '').toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    }) : []);
+  }, []);
+  return /*#__PURE__*/React.createElement(UIAutoComplete, _extends({
+    source: suggest,
+    onConfirm: function onConfirm(value) {
+      onChange(value.value);
+    },
+    templates: {
+      suggestion: function suggestion(_ref2) {
+        var label = _ref2.label,
+            value = _ref2.value;
+        return /*#__PURE__*/React.createElement("div", null, label && label.primary && label.primary || value, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, label.secondary));
+      },
+      inputValue: function inputValue(option) {
+        if (!option) {
+          return '';
+        }
+
+        return option.label.primary || option.value;
+      }
+    }
+  }, props, {
+    id: "".concat(name, "-id"),
+    defaultValue: value
+  }));
+};
+export default AutoComplete;

package/esm/inputs/Checkboxes/Checkboxes.stories.js

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

package/esm/inputs/Checkboxes/__stories__/Default.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:multiple",
+    required: true,
+    label: {
+      primary: 'Πώς αισθάνεστε αυτή τη στιγμή;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Έχω συνάχι'
+        },
+        value: 'runny-nose'
+      }, {
+        label: {
+          primary: 'Έχω πυρετό'
+        },
+        value: 'fever'
+      }, {
+        label: {
+          primary: 'Αισθάνομαι κούραση'
+        },
+        value: 'fatigue'
+      }]
+    }
+  }), _ref);
+};
+export default Default;

package/esm/inputs/DateInput/DateInput.stories.js

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

package/esm/inputs/DateInput/__stories__/Default.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: 'string',
+    name: "string",
+    type: "date",
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Έχω συνάχι'
+        },
+        value: 'runny-nose'
+      }, {
+        label: {
+          primary: 'Έχω πυρετό'
+        },
+        value: 'fever'
+      }, {
+        label: {
+          primary: 'Αισθάνομαι κούραση'
+        },
+        value: 'fatigue'
+      }]
+    }
+  }), _ref);
+};
+export default Default;

package/esm/inputs/Input/Input.stories.js

@@ -0,0 +1,13 @@
+import Input from '@digigov/form/inputs/Input';
+export default {
+  title: 'Digigov Form/inputs/Input',
+  component: 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/esm/inputs/Input/__stories__/AFM.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var AFM = function AFM() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "afm",
+    name: "afm",
+    type: "afm",
+    label: {
+      primary: 'Αριθμός φορολογικού μητρώου'
+    },
+    required: true
+  }), _ref);
+};
+export default AFM;

package/esm/inputs/Input/__stories__/Boolean.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Boolean = function Boolean() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "boolean-value",
+    name: "boolean-value",
+    type: "boolean",
+    label: {
+      primary: 'Ένα απλό true ή false',
+      secondary: 'Το πεδίο είναι τύπου boolean, δηλαδή λογικού μηδέν ή ένα. Μπορείτε να εισάγετε true, false, 0, 1.'
+    },
+    required: true
+  }), _ref);
+};
+export default Boolean;

package/esm/inputs/Input/__stories__/Default.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "business-title",
+    name: "business-title",
+    type: "string",
+    label: {
+      primary: 'Όνομα επιχείρησης',
+      secondary: 'Εισάγετε μια σειρά από χαρακτήρες και αριθμούς'
+    },
+    required: true
+  }), _ref);
+};
+export default Default;

package/esm/inputs/Input/__stories__/IBAN.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var IBAN = function IBAN() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "iban",
+    name: "iban",
+    type: "iban",
+    label: {
+      primary: 'Αριθμός IBAN',
+      secondary: 'IBAN σημαίνει Διεθνής Αριθμός Τραπεζικού Λογαριασμού. Είναι ένας διεθνώς συμφωνημένος κωδικός, που αποτελείται από έως και 34 γράμματα και αριθμούς, που βοηθά τις τράπεζες να διεκπεραιώνουν μεταφορές σε όλο τον κόσμο.'
+    },
+    required: true
+  }), _ref);
+};
+export default IBAN;

package/esm/inputs/Input/__stories__/Integer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Integer = function Integer() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "random-number",
+    name: "random-number",
+    type: "int",
+    label: {
+      primary: 'Ένας τυχαίος αριθμός',
+      secondary: 'Εισάγετε έναν οποιοδήποτε αριθμό μεγαλύτερο από το μηδέν'
+    },
+    required: true
+  }), _ref);
+};
+export default Integer;

package/esm/inputs/Input/__stories__/MobilePhone.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var MobilePhone = function MobilePhone() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "mobile-phone",
+    name: "mobile-phone",
+    type: "mobile_phone",
+    label: {
+      primary: 'Κινητό τηλέφωνο'
+    },
+    required: true
+  }), _ref);
+};
+export default MobilePhone;

package/esm/inputs/Input/__stories__/PhoneNumber.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var PhoneNumber = function PhoneNumber() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "phone-number",
+    name: "phone-number",
+    type: "phone_number",
+    label: {
+      primary: 'Σταθερό τηλέφωνο'
+    },
+    required: true
+  }), _ref);
+};
+export default PhoneNumber;

package/esm/inputs/Input/__stories__/PostalCode.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var PostalCode = function PostalCode() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Field, {
+    key: "postal-code",
+    name: "postal-code",
+    type: "postal_code",
+    label: {
+      primary: 'Ταχυδρομικός κωδικός'
+    },
+    required: true,
+    extra: {
+      countries: ['GR']
+    }
+  }), _ref);
+};
+export default PostalCode;

package/esm/inputs/Input/index.mdx

@@ -3,8 +3,6 @@ title: Input
 parent: docs/ui/components
 ---
 
-import Input from '@digigov/form/inputs/Input';
-
 ## Example
 
 <Input type="text" />

package/esm/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';

package/esm/inputs/Label/__stories__/Default.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import FormBuilder, { Field, Label } from '@digigov/form';
+import { Button } from '@digigov/ui/core';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/React.createElement(Label, {
+    label: {
+      primary: 'Στοιχεία επιχείρησης',
+      secondary: 'Συμπληρώστε τα στοιχεία'
+    }
+  }), /*#__PURE__*/React.createElement(Field, {
+    key: "business-title",
+    name: "business-title",
+    type: "string",
+    label: {
+      primary: 'Όνομα επιχείρησης'
+    },
+    required: true
+  }), _ref);
+};
+export default Default;

package/esm/inputs/Radio/Radio.stories.js

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