@dhis2/ui-forms 9.11.0 → 9.11.1-beta.1

package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js}

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Field } from 'react-final-form';
 import { CheckboxFieldFF } from '../CheckboxFieldFF/CheckboxFieldFF.js';
@@ -12,8 +11,7 @@ import { SwitchFieldFF } from '../SwitchFieldFF/SwitchFieldFF.js';
 import { TextAreaFieldFF } from '../TextAreaFieldFF/TextAreaFieldFF.js';
 import { composeValidators, email, hasValue } from '../validators/index.js';
 import { FileInputFieldFF } from './FileInputFieldFF.js';
-
-const StandardForm = _ref => {
+const Form = _ref => {
   let {
     values
   } = _ref;
@@ -194,11 +192,9 @@ const StandardForm = _ref => {
       if (!files) {
         return undefined;
       }
-
       const [file] = files;
-
       if (file.type !== 'text/plain') {
-        return "The file you provided is not a txt file, received \"".concat(file.type, "\"");
+        return `The file you provided is not a txt file, received "${file.type}"`;
       }
     },
     component: FileInputFieldFF
@@ -211,14 +207,12 @@ const StandardForm = _ref => {
       if (!files) {
         return undefined;
       }
-
       return files.reduce((error, file) => {
         if (error) {
           return error;
         }
-
         if (file.type !== 'application/jpg') {
-          return "One of the files is not a jpg, received \"".concat(file.type, "\"");
+          return `One of the files is not a jpg, received "${file.type}"`;
         }
       }, undefined);
     },
@@ -233,14 +227,18 @@ const StandardForm = _ref => {
     className: "checkbox"
   }));
 };
-
-storiesOf('Testing:FileInput', module).addDecorator(formDecorator).addParameters({
-  options: {
-    showPanel: false
+export default {
+  title: 'Testing:FileInput',
+  decorators: [formDecorator],
+  parameters: {
+    options: {
+      showPanel: false
+    }
   }
-}).add('Standard form', (_, _ref2) => {
+};
+export const StandardForm = (_, _ref2) => {
   let {
     formRenderProps
   } = _ref2;
-  return /*#__PURE__*/React.createElement(StandardForm, formRenderProps);
-});
+  return /*#__PURE__*/React.createElement(Form, formRenderProps);
+};

package/build/es/FileInputFieldFF/FileInputFieldFF.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { FileListItem, FileInputField } from '@dhis2-ui/file-input';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,21 +7,18 @@ import { hasError, isValid, getValidationText } from '../shared/helpers.js';
 import { inputPropType, metaPropType } from '../shared/propTypes.js';
 const btnLabel = i18n.t('Upload file');
 const btnLabelMulti = i18n.t('Upload files');
-
 const dedupeAndConcat = (currentFiles, newFileList) => {
   return [...currentFiles, ...newFileList].reduceRight((acc, file) => {
     if (!acc.unique.has(file.name)) {
       acc.unique.add(file.name);
       acc.files.unshift(file);
     }
-
     return acc;
   }, {
     files: [],
     unique: new Set()
   }).files;
 };
-
 const createChangeHandler = (input, multifile) => _ref => {
   let {
     files
@@ -34,13 +30,11 @@ const createChangeHandler = (input, multifile) => _ref => {
   const value = multifile ? dedupeAndConcat(currentFiles, files) : [...files];
   input.onChange(value);
 };
-
 const createRemoveHandler = (input, fileToDelete) => () => {
   const files = input.value.filter(file => file !== fileToDelete);
   const value = files.length > 0 ? files : '';
   input.onChange(value);
 };
-
 export const FileInputFieldFF = _ref2 => {
   let {
     buttonLabel,
@@ -74,7 +68,6 @@ export const FileInputFieldFF = _ref2 => {
 FileInputFieldFF.propTypes = {
   /** `input` props provided by Final Form `Field` */
   input: inputPropType.isRequired,
-
   /** `meta` props provided by Final Form `Field` */
   meta: metaPropType.isRequired,
   buttonLabel: PropTypes.string,

package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js}

@@ -4,7 +4,31 @@ import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { hasValue } from '../validators/index.js';
 import { FileInputFieldFF } from './FileInputFieldFF.js';
-const description = "\nThe `FileInputFieldFF` is a wrapper around a `FileInputField` that enables it to work with Final Form, the preferred library in DHIS 2 apps for form validation and utilities.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={FileInputFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `FileInputFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `FileInputFieldFF`, which passes any extra props to the underlying `FileInputField` using `{...rest}`.\n\nTherefore, to add any props to the `FileInputFieldFF` or `FileInputField`, add those props to the parent Final Form `Field` component.\n\nAlso see `FileInput` and `FileInputField` for notes about props and implementation.\n\n```js\nimport { FileInputFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
+const description = `
+The \`FileInputFieldFF\` is a wrapper around a \`FileInputField\` that enables it to work with Final Form, the preferred library in DHIS 2 apps for form validation and utilities.
+
+#### Final Form
+
+See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
+
+Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={FileInputFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`FileInputFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`FileInputFieldFF\`, which passes any extra props to the underlying \`FileInputField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`FileInputFieldFF\` or \`FileInputField\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`FileInput\` and \`FileInputField\` for notes about props and implementation.
+
+\`\`\`js
+import { FileInputFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+`;
 const files = [new File([], 'file1.txt'), new File([], 'file2.txt')];
 export default {
   title: 'File Input Field (Final Form)',
@@ -18,9 +42,11 @@ export default {
     }
   },
   argTypes: {
-    input: { ...inputArgType
+    input: {
+      ...inputArgType
     },
-    meta: { ...metaArgType
+    meta: {
+      ...metaArgType
     }
   }
 };

package/build/es/InputFieldFF/{InputFieldFF.stories.e2e.js → InputFieldFF.e2e.stories.js}

@@ -1,17 +1,21 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Field } from 'react-final-form';
 import { formDecorator } from '../formDecorator.js';
 import { hasValue } from '../validators/index.js';
 import { InputFieldFF } from './InputFieldFF.js';
-storiesOf('Testing:InputFieldFF', module).addDecorator(formDecorator).add('Default', () => /*#__PURE__*/React.createElement(Field, {
+export default {
+  title: 'Testing:InputFieldFF',
+  decorators: [formDecorator]
+};
+export const Default = () => /*#__PURE__*/React.createElement(Field, {
   component: InputFieldFF,
   name: "agree",
   label: "Do you agree?"
-})).add('Required', () => /*#__PURE__*/React.createElement(Field, {
+});
+export const Required = () => /*#__PURE__*/React.createElement(Field, {
   name: "agree",
   component: InputFieldFF,
   required: true,
   validate: hasValue,
   label: "Do you agree?"
-}));
+});

package/build/es/InputFieldFF/InputFieldFF.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { InputField } from '@dhis2-ui/input';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -35,7 +34,6 @@ export const InputFieldFF = _ref => {
 InputFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: metaPropType.isRequired,
   error: PropTypes.bool,

package/build/es/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js}

@@ -4,7 +4,31 @@ import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { hasValue } from '../validators/index.js';
 import { InputFieldFF } from './InputFieldFF.js';
-const description = "\nThe `InputFieldFF` is a wrapper around a `InputField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={InputFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `InputFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `InputFieldFF`, which passes any extra props to the underlying `InputField` using `{...rest}`.\n\nTherefore, to add any props to the `InputFieldFF` or `InputField`, add those props to the parent Final Form `Field` component.\n\nAlso see `InputField` for notes about props and implementation.\n\n```js\nimport { InputFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
+const description = `
+The \`InputFieldFF\` is a wrapper around a \`InputField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
+
+#### Final Form
+
+See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
+
+Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={InputFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`InputFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`InputFieldFF\`, which passes any extra props to the underlying \`InputField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`InputFieldFF\` or \`InputField\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`InputField\` for notes about props and implementation.
+
+\`\`\`js
+import { InputFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+`;
 export default {
   title: 'Input Field (Final Form)',
   component: InputFieldFF,
@@ -17,9 +41,11 @@ export default {
     }
   },
   argTypes: {
-    input: { ...inputArgType
+    input: {
+      ...inputArgType
     },
-    meta: { ...metaArgType
+    meta: {
+      ...metaArgType
     }
   }
 };

package/build/es/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js}

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Field } from 'react-final-form';
 import { formDecorator } from '../formDecorator.js';
@@ -11,11 +10,12 @@ const defaultOptions = [{
   value: 'second',
   label: 'Second'
 }];
-storiesOf('Testing:MultiSelectFieldFF', module).addDecorator(formDecorator).addParameters({
-  options: {
-    showPanel: false
-  }
-}).add('Required', (_, _ref) => {
+export default {
+  title: 'MultiSelectFieldFF',
+  component: MultiSelectFieldFF,
+  decorators: [formDecorator]
+};
+export const Required = (_, _ref) => {
   let {
     cypressProps
   } = _ref;
@@ -27,4 +27,4 @@ storiesOf('Testing:MultiSelectFieldFF', module).addDecorator(formDecorator).addP
     validate: hasValue,
     options: cypressProps.options || defaultOptions
   });
-});
+};

package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { MultiSelectOption, MultiSelectField } from '@dhis2-ui/select';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -29,9 +28,7 @@ export const MultiSelectFieldFF = _ref => {
     onFocus: createFocusHandler(input, onFocus),
     onChange: createSelectChangeHandler(input),
     onBlur: createBlurHandler(input, onBlur),
-    selected: input.value || []
-    /* input.value is an empty string initially, so we're providing an empty array if falsey */
-
+    selected: input.value || [] /* input.value is an empty string initially, so we're providing an empty array if falsey */
   }), options.map(option => /*#__PURE__*/React.createElement(MultiSelectOption, _extends({
     key: option.value
   }, option))));
@@ -39,7 +36,6 @@ export const MultiSelectFieldFF = _ref => {
 MultiSelectFieldFF.propTypes = {
   /** `input` props provided by Final Form `Field` */
   input: inputPropType.isRequired,
-
   /** `meta` props provided by Final Form `Field` */
   meta: metaPropType.isRequired,
   error: PropTypes.bool,

package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Field } from 'react-final-form';
+import { formDecorator } from '../formDecorator.js';
+import { inputArgType, metaArgType } from '../shared/propTypes.js';
+import { MultiSelectFieldFF } from './MultiSelectFieldFF.js';
+const description = `
+The \`MultiSelectFieldFF\` is a wrapper around a \`MultiSelectField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
+
+#### Final Form
+
+See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
+
+Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={MultiSelectFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`MultiSelectFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`MultiSelectFieldFF\`, which passes any extra props to the underlying \`MultiSelectField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`MultiSelectFieldFF\` or \`MultiSelectField\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`MultiSelect\` and \`MultiSelectField\` for notes about props and implementation.
+
+\`\`\`js
+import { MultiSelectFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+
+_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._
+`;
+const options = [{
+  value: '1',
+  label: 'one'
+}, {
+  value: '2',
+  label: 'two'
+}, {
+  value: '3',
+  label: 'three'
+}, {
+  value: '4',
+  label: 'four'
+}, {
+  value: '5',
+  label: 'five'
+}, {
+  value: '6',
+  label: 'six'
+}, {
+  value: '7',
+  label: 'seven'
+}, {
+  value: '8',
+  label: 'eight'
+}, {
+  value: '9',
+  label: 'nine'
+}, {
+  value: '10',
+  label: 'ten'
+}];
+const initialValue = ['3', '4', '9', '10'];
+export default {
+  title: 'Multi Select Field (Final Form)',
+  component: MultiSelectFieldFF,
+  decorators: [formDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    input: {
+      ...inputArgType
+    },
+    meta: {
+      ...metaArgType
+    }
+  }
+};
+export const Default = () => /*#__PURE__*/React.createElement(Field, {
+  component: MultiSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options
+});
+export const InitialValue = () => /*#__PURE__*/React.createElement(Field, {
+  component: MultiSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options,
+  initialValue: initialValue
+});
+InitialValue.storyName = 'InitialValue';

package/build/es/MultiSelectFieldFF/features/common/index.js

@@ -1,6 +1,6 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor';
 Given('a required MultiSelect with no selected value', () => {
-  cy.visitStory('Testing:MultiSelectFieldFF', 'Required');
+  cy.visitStory('MultiSelectFieldFF', 'Required');
   cy.getFormValue('multiSelect');
   cy.verifyFormValue('multiSelect', undefined);
 });

package/build/es/RadioFieldFF/{RadioFieldFF.stories.e2e.js → RadioFieldFF.e2e.stories.js}

@@ -1,11 +1,14 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Field } from 'react-final-form';
 import { FieldGroupFF } from '../FieldGroupFF/FieldGroupFF.js';
 import { formDecorator } from '../formDecorator.js';
 import { hasValue } from '../validators/index.js';
 import { RadioFieldFF } from './RadioFieldFF.js';
-storiesOf('Testing:RadioFieldFF', module).addDecorator(formDecorator).add('Required and no selected value', () => /*#__PURE__*/React.createElement(FieldGroupFF, {
+export default {
+  title: 'Testing:RadioFieldFF',
+  decorators: [formDecorator]
+};
+export const RequiredAndNoSelectedValue = () => /*#__PURE__*/React.createElement(FieldGroupFF, {
   name: "choice"
 }, /*#__PURE__*/React.createElement(Field, {
   type: "radio",
@@ -31,4 +34,4 @@ storiesOf('Testing:RadioFieldFF', module).addDecorator(formDecorator).add('Requi
   value: "three",
   validate: hasValue,
   required: true
-})));
+}));

package/build/es/RadioFieldFF/RadioFieldFF.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { Radio } from '@dhis2-ui/radio';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -32,7 +31,6 @@ export const RadioFieldFF = _ref => {
 RadioFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: metaPropType.isRequired,
   error: PropTypes.bool,

package/build/es/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js}

@@ -4,7 +4,31 @@ import { Field } from 'react-final-form';
 import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { RadioFieldFF } from './RadioFieldFF.js';
-const description = "\nThe `RadioFieldFF` is a wrapper around a `Radio` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={RadioFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `RadioFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `RadioFieldFF`, which passes any extra props to the underlying `Radio` using `{...rest}`.\n\nTherefore, to add any props to the `RadioFieldFF` or `Radio`, add those props to the parent Final Form `Field` component.\n\nAlso see `Radio` for notes about props and implementation.\n\n```js\nimport { RadioFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
+const description = `
+The \`RadioFieldFF\` is a wrapper around a \`Radio\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
+
+#### Final Form
+
+See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
+
+Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={RadioFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`RadioFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`RadioFieldFF\`, which passes any extra props to the underlying \`Radio\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`RadioFieldFF\` or \`Radio\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`Radio\` for notes about props and implementation.
+
+\`\`\`js
+import { RadioFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+`;
 export default {
   title: 'Radio Field (Final Form)',
   component: RadioFieldFF,
@@ -17,9 +41,11 @@ export default {
     }
   },
   argTypes: {
-    input: { ...inputArgType
+    input: {
+      ...inputArgType
     },
-    meta: { ...metaArgType
+    meta: {
+      ...metaArgType
     }
   }
 };

package/build/es/SingleSelectFieldFF/{SingleSelectFieldFF.stories.e2e.js → SingleSelectFieldFF.e2e.stories.js}

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { Field } from 'react-final-form';
 import { formDecorator } from '../formDecorator.js';
@@ -8,11 +7,16 @@ const defaultOptions = [{
   value: 'initial',
   label: 'Initial'
 }];
-storiesOf('Testing:SingleSelectFieldFF', module).addDecorator(formDecorator).addParameters({
-  options: {
-    showPanel: false
+export default {
+  title: 'Testing:SingleSelectFieldFF',
+  decorators: [formDecorator],
+  parameters: {
+    options: {
+      showPanel: false
+    }
   }
-}).add('Required', (_, _ref) => {
+};
+export const Required = (_, _ref) => {
   let {
     cypressProps
   } = _ref;
@@ -24,4 +28,4 @@ storiesOf('Testing:SingleSelectFieldFF', module).addDecorator(formDecorator).add
     validate: hasValue,
     options: cypressProps.options || defaultOptions
   });
-});
+};

package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { SingleSelectOption, SingleSelectField } from '@dhis2-ui/select';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -37,7 +36,6 @@ export const SingleSelectFieldFF = _ref => {
 SingleSelectFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: metaPropType.isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({

package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Field } from 'react-final-form';
+import { formDecorator } from '../formDecorator.js';
+import { inputArgType, metaArgType } from '../shared/propTypes.js';
+import { SingleSelectFieldFF } from './SingleSelectFieldFF.js';
+const description = `
+The \`SingleSelectFieldFF\` is a wrapper around a \`SingleSelectField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
+
+#### Final Form
+
+See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
+
+Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={SingleSelectFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`SingleSelectFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`SingleSelectFieldFF\`, which passes any extra props to the underlying \`SingleSelectField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`SingleSelectFieldFF\` or \`SingleSelectField\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`SingleSelect\` and \`SingleSelectField\` for notes about props and implementation.
+
+\`\`\`js
+import { SingleSelectFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+
+_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._
+`;
+const options = [{
+  value: '1',
+  label: 'one'
+}, {
+  value: '2',
+  label: 'two'
+}, {
+  value: '3',
+  label: 'three'
+}, {
+  value: '4',
+  label: 'four'
+}, {
+  value: '5',
+  label: 'five'
+}, {
+  value: '6',
+  label: 'six'
+}, {
+  value: '7',
+  label: 'seven'
+}, {
+  value: '8',
+  label: 'eight'
+}, {
+  value: '9',
+  label: 'nine'
+}, {
+  value: '10',
+  label: 'ten'
+}];
+export default {
+  title: 'Single Select Field (Final Form)',
+  component: SingleSelectFieldFF,
+  decorators: [formDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    input: {
+      ...inputArgType
+    },
+    meta: {
+      ...metaArgType
+    }
+  }
+};
+export const Default = () => /*#__PURE__*/React.createElement(Field, {
+  component: SingleSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options
+});
+export const InitialValue = () => /*#__PURE__*/React.createElement(Field, {
+  component: SingleSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options,
+  initialValue: "4"
+});
+InitialValue.storyName = 'InitialValue';