@dhis2/ui-forms 10.16.1 → 10.16.3-alpha.1

package/src/InputFieldFF/InputFieldFF.prod.stories.js

@@ -0,0 +1,102 @@
+import React from 'react'
+import { Field } from 'react-final-form'
+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 = `
+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: 'Final Form - Input Field ',
+    component: InputFieldFF,
+    decorators: [formDecorator],
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        input: { ...inputArgType },
+        meta: { ...metaArgType },
+    },
+}
+
+export const Default = () => (
+    <Field component={InputFieldFF} name="agree" label="Do you agree?" />
+)
+
+export const Required = () => (
+    <Field
+        name="agree"
+        component={InputFieldFF}
+        required
+        validate={hasValue}
+        label="Do you agree?"
+    />
+)
+
+export const Disabled = () => (
+    <Field
+        name="agree"
+        component={InputFieldFF}
+        disabled
+        label="Do you agree?"
+    />
+)
+
+export const HelpText = () => (
+    <Field
+        name="agree"
+        component={InputFieldFF}
+        label="Do you agree?"
+        helpText="Click to agree"
+    />
+)
+HelpText.storyName = 'Help text'
+
+export const Statuses = () => (
+    <>
+        <Field
+            name="valid"
+            component={InputFieldFF}
+            label="Valid"
+            valid
+            validationText="Validation text"
+        />
+        <Field
+            name="warning"
+            component={InputFieldFF}
+            label="Warning"
+            warning
+            validationText="Validation text"
+        />
+        <Field
+            name="error"
+            component={InputFieldFF}
+            label="Error"
+            error
+            validationText="Validation text"
+        />
+    </>
+)

package/src/InputFieldFF/features/can_set_a_value/index.js

@@ -0,0 +1,14 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a Input with no text is rendered', () => {
+    cy.visitStory('Testing:InputFieldFF', 'Default')
+    cy.verifyFormValue('agree', undefined)
+})
+
+When('the user types something in the Input', () => {
+    cy.get('input').type('something')
+})
+
+Then("the form state's value equals the written text", () => {
+    cy.verifyFormValue('agree', 'something')
+})

package/src/InputFieldFF/features/can_set_a_value.feature

@@ -0,0 +1,6 @@
+Feature: The Input can set a value
+
+    Scenario: The user types some text
+        Given a Input with no text is rendered
+        When the user types something in the Input
+        Then the form state's value equals the written text

package/src/InputFieldFF/features/displays_error/index.js

@@ -0,0 +1,15 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { hasValueMessage } from '../../../validators/hasValue.js'
+
+Given('an empty, required Input is rendered', () => {
+    cy.visitStory('Testing:InputFieldFF', 'Required')
+    cy.verifyFormValue('agree', undefined)
+})
+
+When('the user submits the form', () => {
+    cy.get('button[type="submit"]').click()
+})
+
+Then('an error message is shown', () => {
+    cy.get('.error').should('contain', hasValueMessage)
+})

package/src/InputFieldFF/features/displays_error.feature

@@ -0,0 +1,6 @@
+Feature: The Input field displays an error when invalid
+
+    Scenario: Form is submitted with empty input
+        Given an empty, required Input is rendered
+        When the user submits the form
+        Then an error message is shown

package/src/MultiSelectFieldFF/MultiSelectFieldFF.e2e.stories.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Field } from 'react-final-form'
+import { formDecorator } from '../formDecorator.js'
+import { hasValue } from '../validators/index.js'
+import { MultiSelectFieldFF } from './MultiSelectFieldFF.js'
+
+const defaultOptions = [
+    { value: 'first', label: 'First' },
+    { value: 'second', label: 'Second' },
+]
+
+export default {
+    title: 'MultiSelectFieldFF',
+    component: MultiSelectFieldFF,
+    decorators: [formDecorator],
+}
+
+export const Required = (_, { cypressProps }) => (
+    <Field
+        required
+        name="multiSelect"
+        label="Multi select"
+        component={MultiSelectFieldFF}
+        validate={hasValue}
+        options={cypressProps.options || defaultOptions}
+    />
+)

package/src/MultiSelectFieldFF/MultiSelectFieldFF.js

@@ -0,0 +1,72 @@
+import { MultiSelectOption, MultiSelectField } from '@dhis2-ui/select'
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    createSelectChangeHandler,
+    createFocusHandler,
+    createBlurHandler,
+    hasError,
+    isLoading,
+    isValid,
+    getValidationText,
+} from '../shared/helpers.js'
+import { inputPropType, metaPropType } from '../shared/propTypes.js'
+
+export const MultiSelectFieldFF = ({
+    error,
+    input,
+    loading,
+    meta,
+    onBlur,
+    onFocus,
+    options = [],
+    showLoadingStatus,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+}) => {
+    return (
+        <MultiSelectField
+            {...rest}
+            name={input.name}
+            error={hasError(meta, error)}
+            valid={isValid(meta, valid, showValidStatus)}
+            loading={isLoading(meta, loading, showLoadingStatus)}
+            validationText={getValidationText(meta, validationText, error)}
+            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 */
+        >
+            {options.map((option) => (
+                <MultiSelectOption key={option.value} {...option} />
+            ))}
+        </MultiSelectField>
+    )
+}
+
+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,
+    loading: PropTypes.bool,
+    options: PropTypes.arrayOf(
+        PropTypes.shape({
+            label: PropTypes.string,
+            value: PropTypes.string,
+        })
+    ),
+    showLoadingStatus: PropTypes.bool,
+    showValidStatus: PropTypes.bool,
+    valid: PropTypes.bool,
+    validationText: PropTypes.string,
+
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+}

package/src/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js

@@ -0,0 +1,79 @@
+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 = () => (
+    <Field
+        component={MultiSelectFieldFF}
+        name="agree"
+        label="Do you agree?"
+        options={options}
+    />
+)
+
+export const InitialValue = () => (
+    <Field
+        component={MultiSelectFieldFF}
+        name="agree"
+        label="Do you agree?"
+        options={options}
+        initialValue={initialValue}
+    />
+)
+InitialValue.storyName = 'InitialValue'

package/src/MultiSelectFieldFF/features/can_set_a_value/index.js

@@ -0,0 +1,38 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the MultiSelect has two options', () => {
+    const options = [
+        { value: 'value1', label: 'Label 1' },
+        { value: 'value2', label: 'Label 2' },
+    ]
+
+    cy.wrap(options).as('options')
+    cy.window().then((win) => {
+        win.updateCypressProps({ options })
+    })
+})
+
+When('the user selects the first option', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect"]').click()
+    cy.get('[data-test="dhis2-uicore-checkbox"]').first().click()
+})
+
+When('the user selects the second option', () => {
+    cy.get('[data-test="dhis2-uicore-checkbox"]').last().click()
+})
+
+Then("the form state's value equals the first option's value", () => {
+    cy.getFormValue('multiSelect').then((selected) => {
+        expect(selected).to.have.lengthOf(1)
+        expect(selected).to.deep.equal(['value1'])
+    })
+})
+
+Then("the form state's value contains both options", () => {
+    cy.get('@options').then((options) => {
+        cy.getFormValue('multiSelect').then((selected) => {
+            expect(selected).to.have.lengthOf(options.length)
+            expect(selected).to.deep.equal(['value1', 'value2'])
+        })
+    })
+})

package/src/MultiSelectFieldFF/features/can_set_a_value.feature

@@ -0,0 +1,14 @@
+Feature: The MultiSelect can set a value
+
+    Scenario: The user selects one option
+        Given a required MultiSelect with no selected value
+        And the MultiSelect has two options
+        When the user selects the first option
+        Then the form state's value equals the first option's value
+
+    Scenario: The user selects two options
+        Given a required MultiSelect with no selected value
+        And the MultiSelect has two options
+        When the user selects the first option
+        And the user selects the second option
+        Then the form state's value contains both options

package/src/MultiSelectFieldFF/features/common/index.js

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

package/src/MultiSelectFieldFF/features/displays_error/index.js

@@ -0,0 +1,10 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { hasValueMessage } from '../../../validators/hasValue.js'
+
+When('the user submits the form', () => {
+    cy.get('button[type="submit"]').click()
+})
+
+Then('an error message is shown', () => {
+    cy.get('.error').should('contain', hasValueMessage)
+})

package/src/MultiSelectFieldFF/features/displays_error.feature

@@ -0,0 +1,6 @@
+Feature: The MultiSelect field displays an error when invalid
+
+    Scenario: Form is submitted with none of the options selected
+        Given a required MultiSelect with no selected value
+        When the user submits the form
+        Then an error message is shown

package/src/RadioFieldFF/RadioFieldFF.e2e.stories.js

@@ -0,0 +1,39 @@
+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'
+
+export default { title: 'Testing:RadioFieldFF', decorators: [formDecorator] }
+export const RequiredAndNoSelectedValue = () => (
+    <FieldGroupFF name="choice">
+        <Field
+            type="radio"
+            component={RadioFieldFF}
+            name="choice"
+            label="One"
+            value="one"
+            validate={hasValue}
+            required
+        />
+        <Field
+            type="radio"
+            component={RadioFieldFF}
+            name="choice"
+            label="Two"
+            value="two"
+            validate={hasValue}
+            required
+        />
+        <Field
+            type="radio"
+            component={RadioFieldFF}
+            name="choice"
+            label="Three"
+            value="three"
+            validate={hasValue}
+            required
+        />
+    </FieldGroupFF>
+)

package/src/RadioFieldFF/RadioFieldFF.js

@@ -0,0 +1,52 @@
+import { Radio } from '@dhis2-ui/radio'
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    createToggleChangeHandler,
+    createFocusHandler,
+    createBlurHandler,
+    hasError,
+    isValid,
+    getValidationText,
+} from '../shared/helpers.js'
+import { metaPropType, inputPropType } from '../shared/propTypes.js'
+
+export const RadioFieldFF = ({
+    error,
+    input,
+    meta,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    ...rest
+}) => (
+    <Radio
+        {...rest}
+        name={input.name}
+        checked={input.checked}
+        value={input.value}
+        error={hasError(meta, error)}
+        valid={isValid(meta, valid, showValidStatus)}
+        validationText={getValidationText(meta, validationText, error)}
+        onFocus={createFocusHandler(input, onFocus)}
+        onChange={createToggleChangeHandler(input)}
+        onBlur={createBlurHandler(input, onBlur)}
+    />
+)
+
+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,
+    showValidStatus: PropTypes.bool,
+    valid: PropTypes.bool,
+    validationText: PropTypes.string,
+
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+}

package/src/RadioFieldFF/RadioFieldFF.prod.stories.js

@@ -0,0 +1,104 @@
+import { FieldGroup } from '@dhis2-ui/field'
+import React from 'react'
+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 = `
+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,
+    decorators: [formDecorator],
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        input: { ...inputArgType },
+        meta: { ...metaArgType },
+    },
+}
+
+export const Default = () => (
+    <FieldGroup>
+        <Field
+            type="radio"
+            component={RadioFieldFF}
+            name="choice"
+            label="One"
+            value="one"
+        />
+        <Field
+            type="radio"
+            component={RadioFieldFF}
+            name="choice"
+            label="Two"
+            value="two"
+        />
+        <Field
+            type="radio"
+            component={RadioFieldFF}
+            name="choice"
+            label="Three"
+            value="three"
+        />
+    </FieldGroup>
+)
+
+export const Statuses = () => (
+    <>
+        <FieldGroup label="Valid">
+            <Field
+                type="radio"
+                name="valid"
+                component={RadioFieldFF}
+                label="Valid"
+                value="valid"
+                valid
+            />
+        </FieldGroup>
+        <FieldGroup label="Warning">
+            <Field
+                type="radio"
+                name="warning"
+                component={RadioFieldFF}
+                label="Warning"
+                value="warning"
+                warning
+            />
+        </FieldGroup>
+        <FieldGroup label="Error">
+            <Field
+                type="radio"
+                name="error"
+                component={RadioFieldFF}
+                label="Error"
+                value="error"
+                error
+            />
+        </FieldGroup>
+    </>
+)

package/src/RadioFieldFF/features/can_set_a_value/index.js

@@ -0,0 +1,24 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('there are three options', () => {
+    const options = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ]
+
+    cy.wrap(options).as('options')
+    cy.window().then((win) => {
+        win.updateCypressProps({ options })
+    })
+})
+
+When('the user selects the last option', () => {
+    cy.get('label:last').click()
+})
+
+Then("the form state's value equals the last option's value", () => {
+    cy.get('@options').then((options) => {
+        cy.verifyFormValue('choice', options[2].value)
+    })
+})

package/src/RadioFieldFF/features/can_set_a_value.feature

@@ -0,0 +1,7 @@
+Feature: The RadioFieldFF can set a value
+
+    Scenario: The user clicks the first option
+        Given a FieldGroupFF with required RadioFieldFFs and no selected value
+        And there are three options
+        When the user selects the last option
+        Then the form state's value equals the last option's value

package/src/RadioFieldFF/features/common/index.js

@@ -0,0 +1,9 @@
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a FieldGroupFF with required RadioFieldFFs and no selected value',
+    () => {
+        cy.visitStory('Testing:RadioFieldFF', 'Required and no selected value')
+        cy.verifyFormValue('choice', undefined)
+    }
+)

package/src/RadioFieldFF/features/displays_error/index.js

@@ -0,0 +1,13 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { hasValueMessage } from '../../../validators/hasValue.js'
+
+When('the user submits the form', () => {
+    cy.get('button[type="submit"]').click()
+})
+
+Then('an error message is shown', () => {
+    cy.get('[data-test="dhis2-uicore-field-validation"]').should(
+        'contain',
+        hasValueMessage
+    )
+})

package/src/RadioFieldFF/features/displays_error.feature

@@ -0,0 +1,6 @@
+Feature: The RadioFieldFF field displays an error when invalid
+
+    Scenario: Form is submitted with none of the options selected
+        Given a FieldGroupFF with required RadioFieldFFs and no selected value
+        When the user submits the form
+        Then an error message is shown