Merge pull request #1560 from dhis2/update-storybook

chore: update storybook

.github/workflows/dhis2-deploy-netlify.yml

@@ -31,7 +31,7 @@ jobs:
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
 
-            - run: yarn build:legacy
+            - run: yarn build
 
             - uses: nwtgck/[email protected]
               with:

.github/workflows/dhis2-preview-pr.yml

@@ -29,7 +29,7 @@ jobs:
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
 
-            - run: yarn build:legacy
+            - run: yarn build
 
             - name: Deploy
               id: netlify-deploy

.github/workflows/dhis2-verify-lib.yml

@@ -44,7 +44,7 @@ jobs:
                   NODE_OPTIONS=--openssl-legacy-provider yarn setup
 
             - name: Build
-              run: yarn build:legacy
+              run: yarn build
 
             - run: ./scripts/create-artifact.sh
 
@@ -147,7 +147,8 @@ jobs:
             - name: End-to-End tests
               uses: cypress-io/github-action@v6
               with:
-                  start: 'yarn cy:start:legacy'
+                  # This should be a command that starts the server to test against.
+                  start: 'yarn cy:start'
                   wait-on: 'http://localhost:5000'
                   wait-on-timeout: 300
                   record: ${{ env.SHOULD_RECORD }}
@@ -185,9 +186,6 @@ jobs:
             # ensure that d2-app-scripts is available
             - run: yarn install --frozen-lockfile
 
-            # FIXME: Add legacy npm to allow our broken peerdeps for now.
-            # This should be addressed properly by fixing our peerdeps.
-            - run: npm i -g npm@6
             - uses: dhis2/action-semantic-release@master
               with:
                   publish-npm: true

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-04-18T04:00:14.144Z\n"
-"PO-Revision-Date: 2024-04-18T04:00:14.144Z\n"
+"POT-Creation-Date: 2024-07-17T14:10:05.852Z\n"
+"PO-Revision-Date: 2024-07-17T14:10:05.853Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

collections/forms/package.json

@@ -26,12 +26,12 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8"
+        "react": "^16.13",
+        "react-dom": "^16.13"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",

collections/forms/src/CheckboxFieldFF/CheckboxFieldFF.e2e.stories.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Field } from 'react-final-form'
+import { formDecorator } from '../formDecorator.js'
+import { hasValue } from '../validators/index.js'
+import { CheckboxFieldFF } from './CheckboxFieldFF.js'
+
+// https://github.com/final-form/react-final-form-arrays/issues/111
+const initialValue = ['yes']
+
+export default { title: 'Testing:Checkbox', decorators: [formDecorator] }
+export const Unchecked = () => (
+    <Field
+        type="checkbox"
+        component={CheckboxFieldFF}
+        className="checkbox"
+        name="checkbox"
+        label="Label text"
+        validate={hasValue}
+        required
+    />
+)
+export const Checked = () => (
+    <Field
+        type="checkbox"
+        component={CheckboxFieldFF}
+        className="checkbox"
+        name="checkbox"
+        label="Label text"
+        initialValue={true}
+    />
+)
+export const UncheckedWithValue = () => (
+    <Field
+        type="checkbox"
+        component={CheckboxFieldFF}
+        className="checkbox"
+        name="checkbox"
+        label="Label text"
+        value="yes"
+    />
+)
+export const CheckedWithValue = () => (
+    <Field
+        type="checkbox"
+        component={CheckboxFieldFF}
+        className="checkbox"
+        name="checkbox"
+        label="Label text"
+        value="yes"
+        initialValue={initialValue}
+    />
+)

collections/forms/src/FileInputFieldFF/FileInputFieldFF.stories.e2e.js → collections/forms/src/FileInputFieldFF/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'
@@ -13,7 +12,7 @@ import { TextAreaFieldFF } from '../TextAreaFieldFF/TextAreaFieldFF.js'
 import { composeValidators, email, hasValue } from '../validators/index.js'
 import { FileInputFieldFF } from './FileInputFieldFF.js'
 
-const StandardForm = ({ values }) => {
+const Form = ({ values }) => {
     return (
         <div style={{ maxWidth: 830 }}>
             <Field
@@ -262,9 +261,12 @@ const StandardForm = ({ values }) => {
     )
 }
 
-storiesOf('Testing:FileInput', module)
-    .addDecorator(formDecorator)
-    .addParameters({ options: { showPanel: false } })
-    .add('Standard form', (_, { formRenderProps }) => (
-        <StandardForm {...formRenderProps} />
-    ))
+export default {
+    title: 'Testing:FileInput',
+    decorators: [formDecorator],
+    parameters: { options: { showPanel: false } },
+}
+
+export const StandardForm = (_, { formRenderProps }) => (
+    <Form {...formRenderProps} />
+)

collections/forms/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?"
+    />
+)

collections/forms/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}
+    />
+)

collections/forms/src/MultiSelectFieldFF/features/common/index.js

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

collections/forms/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>
+)