feat: add simple transfer component

collections/forms/i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-11T07:36:10.587Z\n"
-"PO-Revision-Date: 2024-11-11T07:36:10.588Z\n"
+"POT-Creation-Date: 2024-11-12T09:49:07.571Z\n"
+"PO-Revision-Date: 2024-11-12T09:49:07.571Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

collections/ui/API.md

@@ -2871,6 +2871,7 @@ import { Tooltip } from '@dhis2/ui'
 |openDelay|number|`200`||Time (in ms) until tooltip open after mouse over|
 |placement|'top' │ 'right' │ 'bottom' │ 'left'|`'top'`||Where to place the tooltip relative to its reference|
 
+
 ### TransferOption
 
 #### Usage
@@ -2908,6 +2909,19 @@ import { Transfer } from '@dhis2/ui'
 ```
 
 
+### SimpleTransfer
+
+#### Usage
+
+To use `SimpleTransfer`, you can import the component from the `@dhis2/ui` library
+
+
+```js
+import { SimpleTransfer } from '@dhis2/ui'
+```
+
+
+
 #### Props
 
 |Name|Type|Default|Required|Description|

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),
+        }),
+    ],
+}