@digigov/form 0.8.3 → 0.8.5-alpha

package/inputs/Input/__stories__/MobilePhone.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MobilePhone = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var MobilePhone = function MobilePhone() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: "mobile-phone",
+    name: "mobile-phone",
+    type: "mobile_phone",
+    label: {
+      primary: 'Κινητό τηλέφωνο'
+    },
+    required: true
+  }), _ref);
+};
+
+exports.MobilePhone = MobilePhone;
+var _default = MobilePhone;
+exports["default"] = _default;

package/inputs/Input/__stories__/PhoneNumber.d.ts

@@ -0,0 +1,2 @@
+export declare const PhoneNumber: () => JSX.Element;
+export default PhoneNumber;

package/inputs/Input/__stories__/PhoneNumber.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PhoneNumber = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var PhoneNumber = function PhoneNumber() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: "phone-number",
+    name: "phone-number",
+    type: "phone_number",
+    label: {
+      primary: 'Σταθερό τηλέφωνο'
+    },
+    required: true
+  }), _ref);
+};
+
+exports.PhoneNumber = PhoneNumber;
+var _default = PhoneNumber;
+exports["default"] = _default;

package/inputs/Input/__stories__/PostalCode.d.ts

@@ -0,0 +1,2 @@
+export declare const PostalCode: () => JSX.Element;
+export default PostalCode;

package/inputs/Input/__stories__/PostalCode.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PostalCode = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var PostalCode = function PostalCode() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: "postal-code",
+    name: "postal-code",
+    type: "postal_code",
+    label: {
+      primary: 'Ταχυδρομικός κωδικός'
+    },
+    required: true,
+    extra: {
+      countries: ['GR']
+    }
+  }), _ref);
+};
+
+exports.PostalCode = PostalCode;
+var _default = PostalCode;
+exports["default"] = _default;

package/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/inputs/Label/Label.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export const title: string;
+    export { Label as component };
+}
+export default _default;
+export * from "@digigov/form/inputs/Label/__stories__/Default";
+import Label from "@digigov/form/inputs/Label";

package/inputs/Label/Label.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Label = _interopRequireDefault(require("@digigov/form/inputs/Label"));
+
+var _Default = require("@digigov/form/inputs/Label/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov Form/inputs/Label',
+  component: _Label["default"]
+};
+exports["default"] = _default;

package/inputs/Label/__stories__/Default.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export default Default;

package/inputs/Label/__stories__/Default.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Label, {
+    label: {
+      primary: 'Στοιχεία επιχείρησης',
+      secondary: 'Συμπληρώστε τα στοιχεία'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: "business-title",
+    name: "business-title",
+    type: "string",
+    label: {
+      primary: 'Όνομα επιχείρησης'
+    },
+    required: true
+  }), _ref);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/inputs/Radio/Radio.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export const title: string;
+    export { Radio as component };
+}
+export default _default;
+export * from "@digigov/form/inputs/Radio/__stories__/Default";
+import Radio from "@digigov/form/inputs/Radio";

package/inputs/Radio/Radio.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Radio = _interopRequireDefault(require("@digigov/form/inputs/Radio"));
+
+var _Default = require("@digigov/form/inputs/Radio/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov Form/inputs/Radio',
+  component: _Radio["default"]
+};
+exports["default"] = _default;

package/inputs/Radio/__stories__/Default.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export default Default;

package/inputs/Radio/__stories__/Default.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:single",
+    required: true,
+    label: {
+      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+    },
+    extra: {
+      options: [{
+        label: {
+          primary: 'Ελλάδα'
+        },
+        value: 'greece'
+      }, {
+        label: {
+          primary: 'Κύπρος'
+        },
+        value: 'cyprus'
+      }, {
+        label: {
+          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
+        },
+        value: 'eu'
+      }, {
+        label: {
+          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
+        },
+        value: 'usa'
+      }]
+    }
+  }), _ref);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/inputs/Radio/index.js

@@ -23,11 +23,12 @@ var _reactHookForm = require("react-hook-form");
 
 var _Hint = _interopRequireDefault(require("@digigov/react-core/Hint"));
 
-var _excluded = ["name", "control", "extra", "disabled"];
+var _excluded = ["name", "control", "register", "extra", "disabled"];
 
 var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
   var name = _ref.name,
       control = _ref.control,
+      register = _ref.register,
       _ref$extra = _ref.extra,
       options = _ref$extra.options,
       className = _ref$extra.className,
@@ -52,7 +53,7 @@ var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
         selected = _ref2.selected;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/_react["default"].createElement(_RadioItem["default"], (0, _extends2["default"])({
+    }, /*#__PURE__*/_react["default"].createElement(_RadioItem["default"], (0, _extends2["default"])({}, register(name), {
       value: v,
       disabled: disabled || optionDisabled
     }, (0, _extends2["default"])({}, props, {

package/inputs/Select/Select.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export const title: string;
+    export { Select as component };
+}
+export default _default;
+export * from "@digigov/form/inputs/Select/__stories__/Default";
+import Select from "@digigov/form/inputs/Select";

package/inputs/Select/Select.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
+
+var _Default = require("@digigov/form/inputs/Select/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov Form/inputs/Select',
+  component: _Select["default"]
+};
+exports["default"] = _default;

package/inputs/Select/__stories__/Default.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export default Default;

package/inputs/Select/__stories__/Default.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _form = _interopRequireWildcard(require("@digigov/form"));
+
+var _core = require("@digigov/ui/core");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_core.Button, {
+  type: "submit"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    onSubmit: function onSubmit(data) {
+      debugger;
+      console.log(data);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    key: 'string',
+    name: "string",
+    type: "choice:single",
+    required: true,
+    label: {
+      primary: 'Ποια ειναι η χώρα της διαμονής σας;'
+    },
+    extra: {
+      component: 'Select',
+      options: [{
+        label: {
+          primary: ''
+        },
+        value: ''
+      }, {
+        label: {
+          primary: 'Ελλάδα'
+        },
+        value: 'greece'
+      }, {
+        label: {
+          primary: 'Κύπρος'
+        },
+        value: 'cyprus'
+      }, {
+        label: {
+          primary: 'Χώρα της Ευρωπαϊκής Ένωσης'
+        },
+        value: 'eu'
+      }, {
+        label: {
+          primary: 'Ηνωμένες Πολιτείες της Αμερικής'
+        },
+        value: 'usa'
+      }]
+    }
+  }), _ref);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/installation.mdx

@@ -0,0 +1,72 @@
+---
+id: Installation
+title: Installing Digigov Form
+sidebar_label: Installation
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+import LeadText from "@site/src/components/LeadText";
+
+<LeadText>
+This page will help you install Digigov Form depending on the framework that you
+use and the application architecture.
+</LeadText>
+
+We assume that your stack uses some of the following tools.
+
+* React v16 or later
+* Nextjs or create-react-app to run your code
+* Digigov CSS, as a CSS import or as Tailwind plugin 
+
+## Using create-digigov-app
+
+We highly recommend using `create-digigov-app`. Our scaffolder was created to save development teams time and effort. This way
+everything you need is already configured.
+
+ If you choose to use our scaffolder tool, make sure you follow this
+[guide](/docs/building-apps) first, if you haven't already done so.
+
+Then you just install the `@digigov/form` package from NPM.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    <CodeBlock>
+      npm install @digigov/form --save
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock>
+      yarn add @digigov/form
+    </CodeBlock>
+  </TabItem>
+</Tabs>
+
+## Using custom configuration
+
+This method is not recommended and you should proceed at your own risk. For
+Digigov Form to work properly, it is essential to do some configuration.
+
+* A working React application, ideally [Nextjs](https://nextjs.org/) or [Create
+  React App](https://create-react-app.dev/)
+* You should already have [installed and configured Digigov
+  CSS](https://guide.services.gov.gr/docs/installation)
+
+If you meet these prerequisites, now it is time to install the dependencies.
+
+Assuming that you have not used any of the Digigov libraries before, go ahead
+and install `@digigov/form` and it's dependencies.
+
+<Tabs>
+  <TabItem value="npm" label="NPM" default>
+    <CodeBlock>
+      npm install @digigov/form @digigov/ui @digigov/react-core --save
+    </CodeBlock>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <CodeBlock>
+      yarn add @digigov/form @digigov/ui @digigov/react-core
+    </CodeBlock>
+  </TabItem>
+</Tabs>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/form",
-  "version": "0.8.3",
+  "version": "0.8.5-alpha",
   "description": "@digigov form builder",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -18,11 +18,12 @@
     "@hookform/resolvers": "2.9.6"
   },
   "peerDependencies": {
-    "@digigov/ui": "0.26.3",
-    "@digigov/react-core": "0.16.3",
+    "@digigov/ui": "0.26.5-alpha",
+    "@digigov/react-core": "0.16.4-alpha",
+    "@digigov/react-extensions": "0.18.3-alpha",
     "clsx": "1.1.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react": ">= 16.14.0 <= 18.2.0",
+    "react-dom": ">= 16.14.0 <= 18.2.0"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,