chore: upgrade Storybook to v8.3.6

.eslintrc.js

@@ -2,4 +2,7 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     extends: [config.eslintReact],
+    rules: {
+        'react/no-unknown-property': ['error', { ignore: ['jsx', 'global'] }],
+    },
 }

.github/workflows/copy-build-to-d2-ci.yml

@@ -27,7 +27,7 @@ jobs:
             - name: Set up Node.js
               uses: actions/setup-node@v1
               with:
-                  node-version: '16.x'
+                  node-version: '20.x'
 
             - name: Install dependencies
               run: yarn install --frozen-lockfile

.github/workflows/node-publish.yml

@@ -32,7 +32,7 @@ jobs:
                   token: ${{env.GH_TOKEN}}
             - uses: actions/setup-node@v1
               with:
-                  node-version: 16.x
+                  node-version: 20.x
 
             - name: Install
               run: yarn install --frozen-lockfile

.github/workflows/node-test.yml

@@ -10,7 +10,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 16.x
+                  node-version: 20.x
 
             - name: Install
               run: yarn install --frozen-lockfile

.storybook/main.js

@@ -2,7 +2,8 @@ const makeBabelConfig = require('@dhis2/cli-app-scripts/config/makeBabelConfig.j
 
 module.exports = {
     addons: ['@storybook/preset-create-react-app'],
-    stories: ['../src/**/*.stories.@(js|mdx)'],
+    stories: ['../src/**/*.stories.@(js)'],
+
     babel: async (config) => {
         // currently styled-jsx is configured the same way for prod and
         // dev so it doesn't matter what the mode is here.
@@ -17,12 +18,27 @@ module.exports = {
         // with the storybook babel configuration.
         return {
             ...config,
-            presets: [...config.presets, ...custom.presets],
-            plugins: [
-                ...config.plugins,
-                ...custom.plugins,
-                ...custom.env[mode].plugins,
-            ],
+            presets: custom.presets,
+            plugins: [...custom.plugins, ...custom.env[mode].plugins].map(
+                (plugin) => {
+                    if (plugin instanceof Array) {
+                        return [plugin[0], { ...plugin[1], loose: true }]
+                    }
+
+                    return [plugin, { loose: true }]
+                }
+            ),
         }
     },
+
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+
+    docs: {},
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript',
+    },
 }

.storybook/preview.js

@@ -1,7 +1,9 @@
 import { CssReset } from '@dhis2/ui'
 import React from 'react'
+const { withJsx } = require('@mihkeleidast/storybook-addon-source')
 
 export const decorators = [
+    withJsx,
     (Story) => (
         <div>
             <CssReset />
@@ -22,3 +24,4 @@ export const decorators = [
         </div>
     ),
 ]
+//export const tags = ['autodocs', 'autodocs'];

package.json

@@ -20,8 +20,8 @@
     },
     "scripts": {
         "build": "d2-app-scripts build",
-        "build-storybook": "build-storybook",
-        "start-storybook": "start-storybook --port 5000",
+        "build-storybook": "storybook build",
+        "start-storybook": "storybook dev --port 5000",
         "start": "yarn start-storybook",
         "test": "d2-app-scripts test",
         "lint": "d2-style check",
@@ -31,21 +31,22 @@
     },
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",
-        "@dhis2/cli-app-scripts": "^9.0.1",
-        "@dhis2/cli-style": "^10.4.1",
+        "@dhis2/cli-app-scripts": "^11.7.4",
+        "@dhis2/cli-style": "^10.7.4",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/ui": "^9.4.4",
-        "@sambego/storybook-state": "^2.0.1",
-        "@storybook/addons": "^6.5.16",
-        "@storybook/preset-create-react-app": "^3.1.7",
-        "@storybook/react": "^6.5.16",
+        "@mihkeleidast/storybook-addon-source": "^1.0.1",
+        "@storybook/preset-create-react-app": "^8.3.6",
+        "@storybook/react": "^8.3.6",
+        "@storybook/react-webpack5": "^8.3.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^12.1.5",
         "enzyme": "^3.9.0",
         "enzyme-adapter-react-16": "^1.15.6",
         "fs-extra": "^10.1.0",
         "jest-enzyme": "^7.0.2",
         "prop-types": "^15",
+        "storybook": "^8.3.6",
         "styled-jsx": "^4.0.1"
     },
     "peerDependencies": {
@@ -75,7 +76,8 @@
         "resize-observer-polyfill": "^1.5.1"
     },
     "resolutions": {
-        "@dhis2/ui": "^9.2.0"
+        "@dhis2/ui": "^9.2.0",
+        "eslint": "^7.32.0"
     },
     "files": [
         "build"

src/__demo__/CalculationModal.stories.js

@@ -1,5 +1,4 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
-import { storiesOf } from '@storybook/react'
 import React from 'react'
 import CalculationModal from '../components/DataDimension/Calculation/CalculationModal.js'
 
@@ -221,102 +220,120 @@ const calculationWithOperand = {
     expression: '#{cYeuwXTCPkU}*10-#{fbfJHSPpUQD.pq2XI5kz2BY}',
 }
 
-storiesOf('CalculationModal', module)
-    .add('Default', () => {
-        return (
-            <CustomDataProvider
-                data={{
-                    dataElements: DATA_ELEMENTS,
-                    dataElementGroups: DATA_ELEMENT_GROUPS,
-                    dataElementOperands: DATA_ELEMENT_OPERANDS,
-                }}
-            >
-                <CalculationModal
-                    displayNameProp="name"
-                    onClose={Function.prototype}
-                    onDelete={Function.prototype}
-                    onSave={Function.prototype}
-                />
-            </CustomDataProvider>
-        )
-    })
-    .add('With calculation', () => {
-        return (
-            <CustomDataProvider
-                data={{
-                    dataElements: DATA_ELEMENTS,
-                    dataElementGroups: DATA_ELEMENT_GROUPS,
-                    dataElementOperands: DATA_ELEMENT_OPERANDS,
-                }}
-            >
-                <CalculationModal
-                    calculation={calculation}
-                    displayNameProp="name"
-                    onClose={Function.prototype}
-                    onDelete={Function.prototype}
-                    onSave={Function.prototype}
-                />
-            </CustomDataProvider>
-        )
-    })
-    .add('With calculation containing operand', () => {
-        return (
-            <CustomDataProvider
-                data={{
-                    dataElements: DATA_ELEMENTS,
-                    dataElementGroups: DATA_ELEMENT_GROUPS,
-                    dataElementOperands: DATA_ELEMENT_OPERANDS,
-                }}
-            >
-                <CalculationModal
-                    calculation={calculationWithOperand}
-                    displayNameProp="name"
-                    onClose={Function.prototype}
-                    onDelete={Function.prototype}
-                    onSave={Function.prototype}
-                />
-            </CustomDataProvider>
-        )
-    })
-    .add('No available data', () => {
-        return (
-            <CustomDataProvider
-                data={{
-                    dataElements: {
-                        pager: {
-                            page: 1,
-                            total: 0,
-                            pageSize: 50,
-                            pageCount: 1,
-                        },
-                        dataElements: [],
+export default {
+    title: 'CalculationModal',
+}
+
+export const Default = () => {
+    return (
+        <CustomDataProvider
+            data={{
+                dataElements: DATA_ELEMENTS,
+                dataElementGroups: DATA_ELEMENT_GROUPS,
+                dataElementOperands: DATA_ELEMENT_OPERANDS,
+            }}
+        >
+            <CalculationModal
+                displayNameProp="name"
+                onClose={Function.prototype}
+                onDelete={Function.prototype}
+                onSave={Function.prototype}
+            />
+        </CustomDataProvider>
+    )
+}
+
+export const WithCalculation = () => {
+    return (
+        <CustomDataProvider
+            data={{
+                dataElements: DATA_ELEMENTS,
+                dataElementGroups: DATA_ELEMENT_GROUPS,
+                dataElementOperands: DATA_ELEMENT_OPERANDS,
+            }}
+        >
+            <CalculationModal
+                calculation={calculation}
+                displayNameProp="name"
+                onClose={Function.prototype}
+                onDelete={Function.prototype}
+                onSave={Function.prototype}
+            />
+        </CustomDataProvider>
+    )
+}
+
+WithCalculation.story = {
+    name: 'With calculation',
+}
+
+export const WithCalculationContainingOperand = () => {
+    return (
+        <CustomDataProvider
+            data={{
+                dataElements: DATA_ELEMENTS,
+                dataElementGroups: DATA_ELEMENT_GROUPS,
+                dataElementOperands: DATA_ELEMENT_OPERANDS,
+            }}
+        >
+            <CalculationModal
+                calculation={calculationWithOperand}
+                displayNameProp="name"
+                onClose={Function.prototype}
+                onDelete={Function.prototype}
+                onSave={Function.prototype}
+            />
+        </CustomDataProvider>
+    )
+}
+
+WithCalculationContainingOperand.story = {
+    name: 'With calculation containing operand',
+}
+
+export const NoAvailableData = () => {
+    return (
+        <CustomDataProvider
+            data={{
+                dataElements: {
+                    pager: {
+                        page: 1,
+                        total: 0,
+                        pageSize: 50,
+                        pageCount: 1,
                     },
-                    dataElementGroups: {
-                        pager: {
-                            page: 1,
-                            total: 0,
-                            pageSize: 50,
-                            pageCount: 1,
-                        },
-                        dataElementGroups: [],
+                    dataElements: [],
+                },
+                dataElementGroups: {
+                    pager: {
+                        page: 1,
+                        total: 0,
+                        pageSize: 50,
+                        pageCount: 1,
                     },
-                    dataElementOperands: {
-                        pager: {
-                            page: 1,
-                            total: 0,
-                            pageSize: 50,
-                            pageCount: 1,
-                        },
-                        dataElementOperands: [],
+                    dataElementGroups: [],
+                },
+                dataElementOperands: {
+                    pager: {
+                        page: 1,
+                        total: 0,
+                        pageSize: 50,
+                        pageCount: 1,
                     },
-                }}
-            >
-                <CalculationModal
-                    displayNameProp="name"
-                    onClose={Function.prototype}
-                    onDelete={Function.prototype}
-                    onSave={Function.prototype}
-                />
-            </CustomDataProvider>
-        )
-    })
+                    dataElementOperands: [],
+                },
+            }}
+        >
+            <CalculationModal
+                displayNameProp="name"
+                onClose={Function.prototype}
+                onDelete={Function.prototype}
+                onSave={Function.prototype}
+            />
+        </CustomDataProvider>
+    )
+}
+
+NoAvailableData.story = {
+    name: 'No available data',
+}