feat: add simple transfer component

API.md

@@ -37,6 +37,7 @@
 - [@dhis2-ui/select](components/select/API.md)
 - [@dhis2-ui/selector-bar](components/selector-bar/API.md)
 - [@dhis2-ui/sharing-dialog](components/sharing-dialog/API.md)
+- [@dhis2-ui/simple-transfer](components/simple-transfer/API.md)
 - [@dhis2-ui/status-icon](components/status-icon/API.md)
 - [@dhis2-ui/switch](components/switch/API.md)
 - [@dhis2-ui/tab](components/tab/API.md)

components/simple-transfer/README.md

@@ -0,0 +1,8 @@
+> :warning:
+> This is currently considered internal, please use `@dhis2/ui`.
+>
+> See the [Getting started
+> guide](https://github.com/dhis2/ui/blob/master/docs/getting-started.md)
+> for more information.
+
+For usage instructions see [the documentation for this component](https://ui.dhis2.nu/components/simple-transfer).

components/simple-transfer/d2.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    type: 'lib',
+    entryPoints: {
+        lib: 'src/index.js',
+    },
+}

components/simple-transfer/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@dhis2-ui/simple-transfer",
+    "version": "9.12.0",
+    "description": "UI Simple Transfer",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dhis2/ui.git",
+        "directory": "components/simple-transfer"
+    },
+    "homepage": "https://github.com/dhis2/ui#readme",
+    "license": "BSD-3-Clause",
+    "private": false,
+    "main": "./build/cjs/index.js",
+    "module": "./build/es/index.js",
+    "exports": {
+        "types": "./types/index.d.ts",
+        "import": "./build/es/index.js",
+        "require": "./build/cjs/index.js"
+    },
+    "sideEffects": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "start": "storybook dev -c ../../storybook/config --port 5000",
+        "build": "d2-app-scripts build",
+        "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
+    },
+    "peerDependencies": {
+        "react": "^16.13 || ^18",
+        "react-dom": "^16.13 || ^18",
+        "styled-jsx": "^4"
+    },
+    "dependencies": {
+        "@dhis2/prop-types": "^3.1.2",
+        "@dhis2-ui/button": "9.14.1",
+        "@dhis2-ui/field": "9.14.1",
+        "@dhis2-ui/input": "9.14.1",
+        "@dhis2-ui/intersection-detector": "9.14.1",
+        "@dhis2-ui/loader": "9.14.1",
+        "@dhis2/ui-constants": "9.14.1",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.7.2"
+    },
+    "files": [
+        "build",
+        "types"
+    ],
+    "devDependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "styled-jsx": "^4.0.1"
+    },
+    "types": "types"
+}

components/simple-transfer/src/__e2e__/common/options.js

@@ -0,0 +1,90 @@
+export const options = [
+    {
+        label: 'ANC 1st visit',
+        value: 'anc_1st_visit',
+    },
+    {
+        label: 'ANC 2nd visit',
+        value: 'anc_2nd_visit',
+    },
+    {
+        label: 'ANC 3rd visit',
+        value: 'anc_3rd_visit',
+    },
+    {
+        label: 'ANC 4th or more visits',
+        value: 'anc_4th_or_more_visits',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) follow-up',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_follow-up',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) new',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_new',
+    },
+    {
+        label: 'ARI treated with antibiotics (pneumonia) referrals',
+        value: 'ari_treated_with_antibiotics_(pneumonia)_referrals',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) follow-up',
+        value: 'ari_treated_without_antibiotics_(cough)_follow-up',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) new',
+        value: 'ari_treated_without_antibiotics_(cough)_new',
+    },
+    {
+        label: 'ARI treated without antibiotics (cough) referrals',
+        value: 'ari_treated_without_antibiotics_(cough)_referrals',
+    },
+    {
+        label: 'ART No clients who stopped TRT due to TRT failure',
+        value: 'art_no_clients_who_stopped_trt_due_to_trt_failure',
+    },
+    {
+        label: 'ART No clients who stopped TRT due to adverse clinical status/event',
+        value: 'art_no_clients_who_stopped_trt_due_to_adverse_clinical_status/event',
+    },
+    {
+        label: 'ART No clients with change of regimen due to drug toxicity',
+        value: 'art_no_clients_with_change_of_regimen_due_to_drug_toxicity',
+    },
+    {
+        label: 'ART No clients with new adverse drug reaction',
+        value: 'art_no_clients_with_new_adverse_drug_reaction',
+    },
+    {
+        label: 'ART No started Opportunist Infection prophylaxis',
+        value: 'art_no_started_opportunist_infection_prophylaxis',
+    },
+    {
+        label: 'ART clients with new adverse clinical event',
+        value: 'art_clients_with_new_adverse_clinical_event',
+    },
+    {
+        label: 'ART defaulters',
+        value: 'art_defaulters',
+    },
+    {
+        label: 'ART enrollment stage 1',
+        value: 'art_enrollment_stage_1',
+    },
+    {
+        label: 'ART enrollment stage 2',
+        value: 'art_enrollment_stage_2',
+    },
+    {
+        label: 'ART enrollment stage 3',
+        value: 'art_enrollment_stage_3',
+    },
+    {
+        label: 'ART enrollment stage 4',
+        value: 'art_enrollment_stage_4',
+    },
+    {
+        label: 'ART entry point: No PMTCT',
+        value: 'art_entry_point:_no_pmtct',
+    },
+]

components/simple-transfer/src/__e2e__/common/stateful-decorator.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/display-name */
+
+import React, { useState } from 'react'
+
+const WithState = ({ fn, initialState, initialSearchTerm, controlFilter }) => {
+    const [selected, setSelected] = useState(initialState)
+    const [searchTerm, setSearchTerm] = useState(initialSearchTerm)
+
+    return fn({
+        selected,
+        searchTerm: controlFilter ? searchTerm : undefined,
+        onChange: (payload) => setSelected(payload.selected),
+        onFilterChange: controlFilter
+            ? ({ value }) => setSearchTerm(value)
+            : undefined,
+    })
+}
+
+export const statefulDecorator =
+    ({
+        initialState = [],
+        controlFilter = false,
+        initialSearchTerm = '',
+    } = {}) =>
+    (fn) =>
+        (
+            <WithState
+                initialState={initialState}
+                initialSearchTerm={initialSearchTerm}
+                controlFilter={controlFilter}
+                fn={fn}
+            />
+        )

components/simple-transfer/src/__e2e__/disabled-transfer-buttons.e2e.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import { SimpleTransfer } from '../simple-transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'SimpleTransfer Disabled SimpleTransfer Buttons',
+    decorators: [statefulDecorator()],
+}
+
+export const NoOptions = (_, { selected, onChange }) => (
+    <SimpleTransfer selected={selected} onChange={onChange} options={[]} />
+)
+
+export const HasOptions = (_, { selected, onChange }) => (
+    <SimpleTransfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const SomeOptionsSelected = (_, { selected, onChange }) => (
+    <SimpleTransfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const OnlyDisabledSourceOptions = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        selected={selected}
+        onChange={onChange}
+        options={[{ ...options[0], disabled: true }]}
+    />
+)
+
+SomeOptionsSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}
+
+export const AllOptionsSelected = (_, { selected, onChange }) => (
+    <SimpleTransfer selected={selected} onChange={onChange} options={options} />
+)
+
+AllOptionsSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.map(({ value }) => value),
+        }),
+    ],
+}

components/simple-transfer/src/__e2e__/disabled-transfer-options.e2e.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { SimpleTransfer } from '../simple-transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'SimpleTransfer Disabled Source Options',
+    decorators: [statefulDecorator()],
+}
+
+export const OneDisabled = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        selected={selected}
+        onChange={onChange}
+        options={[
+            ...options.slice(0, 3),
+            { ...options[3], disabled: true },
+            ...options.slice(4),
+        ]}
+    />
+)

components/simple-transfer/src/__e2e__/display-order.e2e.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { SimpleTransfer } from '../simple-transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default { title: 'SimpleTransfer Display Order' }
+
+window.options = options
+
+export const NoSelection = (_, { selected, onChange }) => (
+    <SimpleTransfer selected={selected} onChange={onChange} options={options} />
+)
+
+export const SomeSelected = (_, { selected, onChange }) => (
+    <SimpleTransfer selected={selected} onChange={onChange} options={options} />
+)
+
+SomeSelected.story = {
+    decorators: [
+        statefulDecorator({
+            initialState: options.slice(0, 4).map(({ value }) => value),
+        }),
+    ],
+}

components/simple-transfer/src/__e2e__/filter-options-list.e2e.stories.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import { SimpleTransfer } from '../simple-transfer.js'
+import { options } from './common/options.js'
+import { statefulDecorator } from './common/stateful-decorator.js'
+
+export default {
+    title: 'SimpleTransfer filtering',
+    decorators: [statefulDecorator()],
+}
+
+export const EmptyResult = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        filterable
+        initialSearchTerm="Foobarbaz"
+        selected={selected}
+        onChange={onChange}
+        sourceEmptyPlaceholder={<span data-test="no-results">No results</span>}
+        options={options}
+    />
+)
+
+export const SomeResults = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        selected={selected}
+        filterable
+        initialSearchTerm="ANC"
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const UppercaseSearch = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        selected={selected}
+        filterable
+        initialSearchTerm="ANC"
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const LowercaseSearch = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        filterable
+        initialSearchTerm="anc"
+        selected={selected}
+        onChange={onChange}
+        options={options}
+    />
+)
+
+export const AncCustomFilter = (_, { selected, onChange }) => (
+    <SimpleTransfer
+        filterable
+        selected={selected}
+        onChange={onChange}
+        filterCallback={(options, filter) =>
+            options.filter(({ label }) => label.match(`(^| )ANC .*${filter}`))
+        }
+        options={options}
+    />
+)
+
+window.customFilterCallback = (options, filter) => {
+    return options.filter(({ label }) => label.indexOf(filter) !== -1)
+}
+
+window.Cypress && window.Cypress.cy.spy(window, 'customFilterCallback')
+
+export const ControlledFilter = (
+    _,
+    { filter, onChange, onFilterChange, selected }
+) => (
+    <SimpleTransfer
+        selected={selected}
+        onChange={onChange}
+        filterable
+        filterCallback={window.customFilterCallback}
+        searchTerm={filter}
+        onFilterChange={onFilterChange}
+        options={options}
+    />
+)
+
+ControlledFilter.story = {
+    decorators: [statefulDecorator()],
+}