@digigov/form 0.8.3 → 0.8.4

package/CHANGELOG.md

@@ -1,6 +1,15 @@
 # Change Log - @digigov/form
 
-This log was last generated on Wed, 14 Sep 2022 12:03:44 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Sep 2022 14:27:06 GMT and should not be manually modified.
+
+## 0.8.4
+Wed, 21 Sep 2022 14:27:06 GMT
+
+### Patches
+
+- add autocomplete as a select alternative
+- Update storybook example for AutoCompleteField
+- Fix bug in Radio input after refactoring the FieldBase API
 
 ## 0.8.3
 Wed, 14 Sep 2022 12:03:44 GMT

package/Field/FieldBase.js

@@ -86,6 +86,7 @@ var FieldBase = function FieldBase(props) {
     required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, register(name), {
+    register: register,
     control: control,
     error: !!error,
     extra: extra,

package/Field/utils.js

@@ -27,6 +27,8 @@ var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"
 
 var _FormContext = require("@digigov/form/FormContext");
 
+var _AutoComplete = _interopRequireDefault(require("@digigov/form/inputs/AutoComplete"));
+
 var FIELD_COMPONENTS = {
   text: {
     component: _Input["default"]
@@ -58,6 +60,10 @@ var ALTERNATIVE_COMPONENTS = {
   Select: {
     component: _Select["default"],
     controlled: false
+  },
+  AutoComplete: {
+    component: _AutoComplete["default"],
+    controlled: true
   }
 };
 

package/{libs/form/src/Form.stories.d.ts → Form.stories.d.ts}

@@ -3,3 +3,4 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/form/__stories__/IntField";
+export * from "@digigov/form/__stories__/AutoCompleteField";

package/Form.stories.js

@@ -19,6 +19,20 @@ Object.keys(_IntField).forEach(function (key) {
     }
   });
 });
+
+var _AutoCompleteField = require("@digigov/form/__stories__/AutoCompleteField");
+
+Object.keys(_AutoCompleteField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _AutoCompleteField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _AutoCompleteField[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov Form'
 };

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
     });

package/es/Field/FieldBase.js

@@ -71,6 +71,7 @@ export var FieldBase = function FieldBase(props) {
     required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({}, register(name), {
+    register: register,
     control: control,
     error: !!error,
     extra: extra,

package/es/Field/utils.js

@@ -7,6 +7,7 @@ import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
 import { FormContext } from '@digigov/form/FormContext';
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -38,6 +39,10 @@ var ALTERNATIVE_COMPONENTS = {
   Select: {
     component: Select,
     controlled: false
+  },
+  AutoComplete: {
+    component: AutoComplete,
+    controlled: true
   }
 };
 export function calculateField(children, field, componentRegistry) {

package/es/Form.stories.js

@@ -1,4 +1,5 @@
 export default {
   title: 'Digigov Form'
 };
-export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/AutoCompleteField';

package/es/__stories__/AutoCompleteField.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
+import Button from '@digigov/ui/core/Button';
+import { results } from '@digigov/ui/admin/AutoComplete/__stories__/utils';
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'An autocomplete field'
+  },
+  required: true,
+  type: 'choice:single',
+  extra: {
+    component: 'AutoComplete',
+    options: results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "Country: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "Submit");
+
+export var AutoCompleteField = function AutoCompleteField() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};

package/es/__stories__/IntField.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import FormBuilder, { Field } from '@digigov/form/';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
 import Button from '@digigov/ui/core/Button';
 var fields = [{
   key: 'number_required',

package/es/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/es/inputs/Radio/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "extra", "disabled"];
+var _excluded = ["name", "control", "register", "extra", "disabled"];
 import React from 'react';
 import Radio from '@digigov/react-core/Radio';
 import RadioItem from '@digigov/react-core/RadioItem';
@@ -10,6 +10,7 @@ import Hint from '@digigov/react-core/Hint';
 export 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,
@@ -35,7 +36,7 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
         selected = _ref2.selected;
     return /*#__PURE__*/React.createElement("div", {
       key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/React.createElement(RadioItem, _extends({
+    }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
       value: v,
       disabled: disabled || optionDisabled
     }, _extends({}, props, {

package/esm/Field/FieldBase.js

@@ -71,6 +71,7 @@ export var FieldBase = function FieldBase(props) {
     required: required,
     disabled: editable === false
   }, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({}, register(name), {
+    register: register,
     control: control,
     error: !!error,
     extra: extra,

package/esm/Field/utils.js

@@ -7,6 +7,7 @@ import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
 import DateInput from '@digigov/form/inputs/DateInput';
 import { FormContext } from '@digigov/form/FormContext';
+import AutoComplete from '@digigov/form/inputs/AutoComplete';
 var FIELD_COMPONENTS = {
   text: {
     component: Input
@@ -38,6 +39,10 @@ var ALTERNATIVE_COMPONENTS = {
   Select: {
     component: Select,
     controlled: false
+  },
+  AutoComplete: {
+    component: AutoComplete,
+    controlled: true
   }
 };
 export function calculateField(children, field, componentRegistry) {

package/esm/Form.stories.js

@@ -1,4 +1,5 @@
 export default {
   title: 'Digigov Form'
 };
-export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/IntField';
+export * from '@digigov/form/__stories__/AutoCompleteField';

package/esm/__stories__/AutoCompleteField.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
+import Button from '@digigov/ui/core/Button';
+import { results } from '@digigov/ui/admin/AutoComplete/__stories__/utils';
+var fields = [{
+  key: 'autocomplete',
+  label: {
+    primary: 'An autocomplete field'
+  },
+  required: true,
+  type: 'choice:single',
+  extra: {
+    component: 'AutoComplete',
+    options: results.map(function (r) {
+      return {
+        label: {
+          primary: r,
+          secondary: "Country: ".concat(r)
+        },
+        value: r.toLowerCase()
+      };
+    })
+  }
+}];
+var initialValues = {};
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+}, "Submit");
+
+export var AutoCompleteField = function AutoCompleteField() {
+  return /*#__PURE__*/React.createElement(FormBuilder, {
+    fields: fields,
+    onSubmit: function onSubmit(data) {
+      console.log(data);
+    },
+    initial: initialValues
+  }, fields.map(function (field) {
+    return /*#__PURE__*/React.createElement(Field, {
+      key: field.key,
+      name: field.key
+    });
+  }), _ref);
+};

package/esm/__stories__/IntField.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import FormBuilder, { Field } from '@digigov/form/';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
 import Button from '@digigov/ui/core/Button';
 var fields = [{
   key: 'number_required',

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.8.3
+/** @license Digigov v0.8.4
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

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/Radio/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "control", "extra", "disabled"];
+var _excluded = ["name", "control", "register", "extra", "disabled"];
 import React from 'react';
 import Radio from '@digigov/react-core/Radio';
 import RadioItem from '@digigov/react-core/RadioItem';
@@ -10,6 +10,7 @@ import Hint from '@digigov/react-core/Hint';
 export 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,
@@ -35,7 +36,7 @@ export var RadioButtonsGroup = function RadioButtonsGroup(_ref) {
         selected = _ref2.selected;
     return /*#__PURE__*/React.createElement("div", {
       key: "".concat(name, ".").concat(v)
-    }, /*#__PURE__*/React.createElement(RadioItem, _extends({
+    }, /*#__PURE__*/React.createElement(RadioItem, _extends({}, register(name), {
       value: v,
       disabled: disabled || optionDisabled
     }, _extends({}, props, {

package/inputs/AutoComplete/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AutoCompleteProps as UIAutoCompleteProps } from '@digigov/ui/admin/AutoComplete';
+import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import { ControlledFieldProps } from '@digigov/form/Field/types';
+export interface AutoCompleteExtra extends Omit<UIAutoCompleteProps, 'source' | 'id' | 'templates' | 'defaultValue' | 'onConfirm' | 'dropdownArrow'> {
+    options: Array<FieldOptionProps>;
+}
+export interface AutoCompleteProps extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'extra'> {
+    extra: AutoCompleteExtra;
+    value: string;
+    onChange: (v: string) => void;
+}
+export declare const AutoComplete: React.FC<AutoCompleteProps>;
+export default AutoComplete;