@dhis2/ui-forms 10.16.2 → 10.16.3

package/src/FileInputFieldFF/FileInputFieldFF.e2e.stories.js

@@ -0,0 +1,272 @@
+import React from 'react'
+import { Field } from 'react-final-form'
+import { CheckboxFieldFF } from '../CheckboxFieldFF/CheckboxFieldFF.js'
+import { FieldGroupFF } from '../FieldGroupFF/FieldGroupFF.js'
+import { formDecorator } from '../formDecorator.js'
+import { InputFieldFF } from '../InputFieldFF/InputFieldFF.js'
+import { MultiSelectFieldFF } from '../MultiSelectFieldFF/MultiSelectFieldFF.js'
+import { RadioFieldFF } from '../RadioFieldFF/RadioFieldFF.js'
+import { SingleSelectFieldFF } from '../SingleSelectFieldFF/SingleSelectFieldFF.js'
+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 Form = ({ values }) => {
+    return (
+        <div style={{ maxWidth: 830 }}>
+            <Field
+                name="gender"
+                label="Gender"
+                component={SingleSelectFieldFF}
+                initialValue=""
+                options={[
+                    { value: '', label: 'Please choose' },
+                    { value: 'mr', label: 'Mr.' },
+                    { value: 'ms', label: 'Ms.' },
+                    { value: 'other', label: 'Other' },
+                    {
+                        value: 'unknown',
+                        label: "I'd rather not say",
+                    },
+                ]}
+            />
+
+            <Field
+                required
+                label="First name"
+                name="fname"
+                validate={hasValue}
+                component={InputFieldFF}
+                helpText="Please enter your first name, excluding middle names"
+            />
+
+            <Field
+                required
+                label="Last name"
+                name="lname"
+                validate={hasValue}
+                component={InputFieldFF}
+                helpText="Please enter your first name, excluding middle names"
+            />
+
+            <Field
+                name="subscribe"
+                initialValue={true}
+                type="checkbox"
+                label="I want to receive updated and notifications about the latest changes?"
+                component={SwitchFieldFF}
+            />
+
+            {values.subscribe && (
+                <Field
+                    required={values.subscribe}
+                    label="E-mail address"
+                    name="email1"
+                    validate={composeValidators(email, (value) => {
+                        if (values.subscribe && !value) {
+                            return 'You need to provide an e-mail address'
+                        }
+                    })}
+                    component={InputFieldFF}
+                    helpText="Please enter the e-mail address you want us to send the updates to"
+                />
+            )}
+
+            {values.subscribe && (
+                <Field
+                    disabled={!values.subscribe}
+                    required={values.subscribe}
+                    label="E-mail address confirmation"
+                    name="email2"
+                    validate={composeValidators(email, hasValue)}
+                    component={InputFieldFF}
+                    helpText="Please confirm your e-mail address"
+                />
+            )}
+
+            <FieldGroupFF
+                name="food"
+                label="Food"
+                required
+                helpText="If we ever gather for food, what meal type would you like to eat"
+            >
+                <Field
+                    type="radio"
+                    name="food"
+                    required
+                    component={RadioFieldFF}
+                    value="anything"
+                    label="Don't care"
+                    validate={hasValue}
+                />
+
+                <Field
+                    type="radio"
+                    name="food"
+                    component={RadioFieldFF}
+                    required
+                    value="vegan"
+                    label="Vegan"
+                    validate={hasValue}
+                />
+
+                <Field
+                    type="radio"
+                    name="food"
+                    component={RadioFieldFF}
+                    required
+                    value="vegetarian"
+                    label="Vegetarian"
+                    validate={hasValue}
+                />
+
+                <Field
+                    type="radio"
+                    name="food"
+                    component={RadioFieldFF}
+                    required
+                    value="fish"
+                    label="Fish"
+                    validate={hasValue}
+                />
+
+                <Field
+                    type="radio"
+                    name="food"
+                    required
+                    component={RadioFieldFF}
+                    value="Halal"
+                    label="halal"
+                    validate={hasValue}
+                />
+            </FieldGroupFF>
+
+            <FieldGroupFF
+                name="pizzaToppings"
+                label="Pizza toppings"
+                helpText="If we ever order pizza, what ingredients would you like on top"
+            >
+                <Field
+                    type="checkbox"
+                    name="pizzaToppings"
+                    component={CheckboxFieldFF}
+                    label="Everything"
+                    value="everything"
+                />
+
+                <Field
+                    type="checkbox"
+                    name="pizzaToppings"
+                    component={CheckboxFieldFF}
+                    label="Ham"
+                    value="ham"
+                />
+
+                <Field
+                    type="checkbox"
+                    name="pizzaToppings"
+                    component={CheckboxFieldFF}
+                    label="Salami"
+                    value="salami"
+                />
+
+                <Field
+                    type="checkbox"
+                    name="pizzaToppings"
+                    component={CheckboxFieldFF}
+                    label="Pineapple"
+                    value="pineapple"
+                />
+
+                <Field
+                    type="checkbox"
+                    name="pizzaToppings"
+                    component={CheckboxFieldFF}
+                    label="Bellpepper"
+                    value="bellpepper"
+                />
+            </FieldGroupFF>
+
+            <Field
+                label="Sandwich toppings"
+                name="sandwhichToppings"
+                component={MultiSelectFieldFF}
+                options={[
+                    { value: '', label: 'All of the options' },
+                    { value: 'ham', label: 'Ham' },
+                    { value: 'salami', label: 'Salami' },
+                    { value: 'pineapple', label: 'Pineapple' },
+                    { value: 'bellpepper', label: 'Bellpepper' },
+                ]}
+                helpText="If we ever order sandwiches, what ingredients would you like on top"
+            />
+
+            <Field
+                name="message"
+                label="If you want to tell us anything, just add your message here"
+                component={TextAreaFieldFF}
+            />
+
+            <Field
+                name="fileTxt"
+                accept=".txt"
+                label="If you want to send us a txt file, please attach it here"
+                className="fileTxt"
+                validate={(files) => {
+                    if (!files) {
+                        return undefined
+                    }
+
+                    const [file] = files
+                    if (file.type !== 'text/plain') {
+                        return `The file you provided is not a txt file, received "${file.type}"`
+                    }
+                }}
+                component={FileInputFieldFF}
+            />
+
+            <Field
+                multiple
+                accept="image/jpg"
+                name="fileJpgs"
+                label="If you want to send us some picture file, please attach it here"
+                validate={(files) => {
+                    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 "${file.type}"`
+                        }
+                    }, undefined)
+                }}
+                component={FileInputFieldFF}
+            />
+
+            <Field
+                required
+                name="tnc"
+                label="I accept the terms and conditions"
+                validate={hasValue}
+                component={CheckboxFieldFF}
+                type="checkbox"
+                className="checkbox"
+            />
+        </div>
+    )
+}
+
+export default {
+    title: 'Testing:FileInput',
+    decorators: [formDecorator],
+    parameters: { options: { showPanel: false } },
+}
+
+export const StandardForm = (_, { formRenderProps }) => (
+    <Form {...formRenderProps} />
+)

package/src/FileInputFieldFF/FileInputFieldFF.js

@@ -0,0 +1,100 @@
+import { FileListItem, FileInputField } from '@dhis2-ui/file-input'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+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) =>
+    ({ files }) => {
+        // A JavaScript FileList instance is read-only, so we cannot add files to it
+        // FileList also doesn't have a .map method so by destructuring the FileList
+        // instance into an array we can add, remove and map
+        const currentFiles = Array.isArray(input.value) ? input.value : []
+        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 = ({
+    buttonLabel,
+    disabled,
+    error,
+    input,
+    meta,
+    multifile,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+}) => {
+    const files = input.value || []
+
+    return (
+        <FileInputField
+            {...rest}
+            onChange={createChangeHandler(input, multifile)}
+            buttonLabel={buttonLabel || (multifile ? btnLabelMulti : btnLabel)}
+            disabled={disabled || (!multifile && files.length >= 1)}
+            multiple={multifile}
+            name={input.name}
+            error={hasError(meta, error)}
+            valid={isValid(meta, valid, showValidStatus)}
+            validationText={getValidationText(meta, validationText, error)}
+        >
+            {files.map((file) => (
+                <FileListItem
+                    key={file.name}
+                    label={file.name}
+                    onRemove={createRemoveHandler(input, file)}
+                    removeText={i18n.t('Remove')}
+                />
+            ))}
+        </FileInputField>
+    )
+}
+
+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,
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    multifile: PropTypes.bool,
+    showValidStatus: PropTypes.bool,
+    valid: PropTypes.bool,
+    validationText: PropTypes.string,
+    value: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.instanceOf(File)),
+        PropTypes.oneOf(['']),
+    ]),
+}

package/src/FileInputFieldFF/FileInputFieldFF.prod.stories.js

@@ -0,0 +1,95 @@
+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 { FileInputFieldFF } from './FileInputFieldFF.js'
+
+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)',
+    component: FileInputFieldFF,
+    decorators: [formDecorator],
+    parameters: { docs: { description: { component: description } } },
+    argTypes: {
+        input: { ...inputArgType },
+        meta: { ...metaArgType },
+    },
+}
+
+export const Default = () => (
+    <Field
+        component={FileInputFieldFF}
+        name="upload"
+        label="This is a file upload"
+    />
+)
+
+export const Required = () => (
+    <Field
+        component={FileInputFieldFF}
+        name="upload"
+        label="This is a file upload"
+        required
+        validate={hasValue}
+    />
+)
+
+export const Multifile = () => (
+    <Field
+        component={FileInputFieldFF}
+        name="upload"
+        label="This is a file upload"
+        multifile
+    />
+)
+
+export const WithValues = () => (
+    <Field
+        component={FileInputFieldFF}
+        name="upload"
+        label="This is a file upload"
+        required
+        multifile
+        initialValue={files}
+        validate={hasValue}
+    />
+)
+WithValues.storyName = 'With values'
+
+export const PreventPlaceholder = () => (
+    <Field
+        component={FileInputFieldFF}
+        name="upload"
+        label="This is a file upload"
+        placeholder=""
+    />
+)
+PreventPlaceholder.storyName = 'Prevent placeholder'

package/src/FileInputFieldFF/features/accepts_file/index.js

@@ -0,0 +1,40 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a multi-file IputField is rendered', () => {
+    cy.visitStory('Testing:FileInput', 'Standard form')
+})
+
+When('a file is provided', () => {
+    cy.get('[name="fileTxt"]').uploadSingleFile('txt', 'FileInput/file.txt')
+})
+
+When('more than one files are provided', () => {
+    cy.get('[name="fileJpgs"]').uploadMultipleFiles(
+        [
+            { fileType: 'txt', fixture: 'FileInput/file.txt' },
+            { fileType: 'md', fixture: 'FileInput/file.md' },
+        ],
+        true
+    )
+})
+
+Then('the form state contains that file', () => {
+    cy.window().then((win) => {
+        const { fileTxt } = win.formValues
+        expect(fileTxt).to.have.lengthOf(1)
+
+        const [file] = fileTxt
+        expect(file.name).to.equal('file.txt')
+    })
+})
+
+Then('the form state contains those files', () => {
+    cy.window().then((win) => {
+        const { fileJpgs } = win.formValues
+        expect(fileJpgs).to.have.lengthOf(2)
+
+        const [file1, file2] = fileJpgs
+        expect(file1.name).to.equal('file.txt')
+        expect(file2.name).to.equal('file.md')
+    })
+})

package/src/FileInputFieldFF/features/accepts_file.feature

@@ -0,0 +1,13 @@
+Feature: The FileInput accepts files
+
+    Scenario: The user provides a file
+        Given a single-file FileInput is rendered
+        And the InputField does not contain any files
+        When a file is provided
+        Then the form state contains that file
+
+    Scenario: The user provides multiple files
+        Given a multi-file IputField is rendered
+        And the InputField does not contain any files
+        When more than one files are provided
+        Then the form state contains those files

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

@@ -0,0 +1,9 @@
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a single-file FileInput is rendered', () => {
+    cy.visitStory('Testing:FileInput', 'Standard form')
+})
+
+Given('the InputField does not contain any files', () => {
+    cy.verifyFormValue('fileTxt', undefined)
+})

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

@@ -0,0 +1,18 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+When('a file with the wrong file type is provided', () => {
+    cy.get('[name="fileTxt"]').uploadSingleFile('md', 'FileInput/file.md')
+})
+
+When('the user submits the form', () => {
+    cy.get('button[type="submit"]').click()
+})
+
+Then('an error message is shown', () => {
+    cy.get('.fileTxt')
+        .get('[data-test="dhis2-uiwidgets-fileinputfield-validation"]')
+        .should(
+            'contain',
+            'The file you provided is not a txt file, received "md"'
+        )
+})

package/src/FileInputFieldFF/features/displays_error.feature

@@ -0,0 +1,8 @@
+Feature: The FileInput field displays an error when invalid
+
+    Scenario: The user provides files with the wrong file type
+        Given a single-file FileInput is rendered
+        And the InputField does not contain any files
+        When a file with the wrong file type is provided
+        And the user submits the form
+        Then an error message is shown

package/src/InputFieldFF/InputFieldFF.e2e.stories.js

@@ -0,0 +1,19 @@
+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'
+
+export default { title: 'Testing:InputFieldFF', decorators: [formDecorator] }
+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?"
+    />
+)

package/src/InputFieldFF/InputFieldFF.js

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