@digigov/form 0.8.3 → 0.8.5-alpha

package/Questions/index.mdx

@@ -3,198 +3,11 @@ title: Questions
 parent: docs/ui/components
 ---
 
-import Questions, {
-  Step,
-  StepForm,
-  StepQuote,
-  StepTitle,
-} from '@digigov/form/Questions';
-import { Field } from '@digigov/form';
-const steps = [
-  {
-    name: 'intro',
-    caption: 'intro.caption',
-    title: 'intro.title',
-    description: 'intro.description',
-    fields: [
-      {
-        key: 'name',
-        label: {
-          primary: 'name.field.primary',
-          secondary: 'name.field.secondary',
-        },
-        required: true,
-        type: 'string',
-      },
-    ],
-  },
-  {
-    name: 'time',
-    nextStep: (data) => {
-      if (data.time.age < 26) {
-        return 'review';
-      }
-    },
-    caption: 'time.caption',
-    title: 'time.title',
-    description: 'time.description',
-    fields: [
-      {
-        key: 'age',
-        label: {
-          primary: 'age.field.primary',
-          secondary: 'age.field.secondary',
-        },
-        required: true,
-        type: 'int',
-      },
-    ],
-  },
-  {
-    name: 'boomer',
-    show: (data) => {
-      return data.time.age >= 56;
-    },
-    caption: 'boomer.caption',
-    title: 'boomer.title',
-    description: 'boomer.description',
-    fields: [
-      {
-        key: 'adult',
-        label: {
-          primary: 'adult.field.primary',
-          secondary: 'adult.field.secondary',
-        },
-        required: true,
-        type: 'string',
-      },
-    ],
-  },
-  {
-    name: 'genx',
-    show: (data) => {
-      return data.time.age >= 41 && data.time.age < 56;
-    },
-    caption: 'genx.caption',
-    title: 'genx.title',
-    description: 'genx.description',
-    fields: [
-      {
-        key: 'adult',
-        label: {
-          primary: 'adult.field.primary',
-          secondary: 'adult.field.secondary',
-        },
-        required: true,
-        type: 'string',
-      },
-    ],
-  },
-  {
-    name: 'millenial',
-    show: (data) => {
-      return data.time.age >= 26 && data.time.age < 41;
-    },
-    caption: 'millenial.caption',
-    title: 'millenial.title',
-    description: 'millenial.description',
-    fields: [
-      {
-        key: 'adult',
-        label: {
-          primary: 'adult.field.primary',
-          secondary: 'adult.field.secondary',
-        },
-        required: true,
-        type: 'string',
-      },
-    ],
-  },
-  {
-    name: 'generic',
-    caption: 'generic.caption',
-    title: 'generic.title',
-    description: 'generic.description',
-    fields: [
-      {
-        key: 'info',
-        label: {
-          primary: 'info.field.primary',
-          secondary: 'info.field.secondary',
-        },
-        required: true,
-        type: 'string',
-      },
-    ],
-  },
-];
-
 ## Example
 
-<Questions
-  steps={steps}
-  onActiveStep={(step) => {
-    console.log(step);
-  }}
-  initialData={{ intro: { name: 'Νίκος Παπαδόπουλος' }, time: { age: 33 } }}
-  initialStep={steps[0]}
-  onChange={(data) => {
-    console.log(data);
-  }}
-  onSubmit={(data) => {
-    console.log(data, 'submit');
-  }}
->
-  <Step name="intro">
-    <StepTitle />
-    <StepQuote>This is the intro</StepQuote>
-    <StepForm submitButton={true}>
-      <Field name="name" />
-    </StepForm>
-  </Step>
-  <Step name="time">
-    <StepTitle />
-    <StepQuote>This is the age</StepQuote>
-    <StepForm submitButton={true}>
-      <Field name="age" />
-    </StepForm>
-  </Step>
-  <Step name="boomer">
-    <StepTitle />
-    <StepQuote>This is the conditioned step </StepQuote>
-    <StepForm submitButton={true}>
-      <Field name="adult" />
-    </StepForm>
-  </Step>
-  <Step name="genx">
-    <StepTitle />
-    <StepQuote>This is the conditioned step </StepQuote>
-    <StepForm submitButton={true}>
-      <Field name="adult" />
-    </StepForm>
-  </Step>
-  <Step name="millenial">
-    <StepTitle />
-    <StepQuote>This is the conditioned step </StepQuote>
-    <StepForm submitButton={true}>
-      <Field name="adult" />
-    </StepForm>
-  </Step>
-  <Step name="generic">
-    <StepTitle />
-    <StepQuote>This is a normal step </StepQuote>
-    <StepForm submitButton={true}>
-      <Field name="info" />
-    </StepForm>
-  </Step>
-</Questions>
 
 ## API
 
 ### Properties
 
-<PropsDoc data={Questions.__doc__} />
-
 ### Styles
-
-<StylesDoc data={Questions.__doc__} />

package/__stories__/AutoCompleteField.d.ts

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

package/__stories__/AutoCompleteField.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoCompleteField = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
+
+var _Field = require("@digigov/form/Field");
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+var _utils = require("@digigov/ui/admin/AutoComplete/__stories__/utils");
+
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'An autocomplete field'
+  },
+  required: true,
+  type: 'choice:single',
+  extra: {
+    component: 'AutoComplete',
+    options: _utils.results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "Country: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  type: "submit"
+}, "Submit");
+
+var AutoCompleteField = function AutoCompleteField() {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};
+
+exports.AutoCompleteField = AutoCompleteField;

package/__stories__/IntField.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,13 +9,11 @@ exports.IntField = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _form = _interopRequireWildcard(require("@digigov/form/"));
-
-var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
 
-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); }
+var _Field = require("@digigov/form/Field");
 
-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 _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
 var fields = [{
   key: 'number_required',
@@ -43,14 +39,14 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
 }, "Submit");
 
 var IntField = function IntField() {
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
     fields: fields,
     onSubmit: function onSubmit(data) {
       console.log(data);
     },
     initial: initialValues
   }, fields.map(function (field) {
-    return /*#__PURE__*/_react["default"].createElement(_form.Field, {
+    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
       key: field.key,
       name: field.key
     });