Skip to content

Commit 0e7b8f3

Browse files
edoardoHendrikThePendric
edoardo
and
HendrikThePendric
authored
chore: upgrade Storybook to v8.3.6 (#1724)
* chore: upgrade to Storybook 8.3.6 * chore: use named functions for default exports too * chore: tweak ESLint config so that jsx property is allowed * chore: add resolution for eslint package * chore: upgrade gha node versions * chore: upgrade used github action versions * fix: update instance endpoint, use ConfigProvider --------- Co-authored-by: HendrikThePendric <hendrik@dhis2.org>
1 parent 5df09e2 commit 0e7b8f3

27 files changed

+6814
-12257
lines changed

‎.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ const { config } = require('@dhis2/cli-style')
22

33
module.exports = {
44
extends: [config.eslintReact],
5+
rules: {
6+
'react/no-unknown-property': ['error', { ignore: ['jsx', 'global'] }],
7+
},
58
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ jobs:
2020
runs-on: ubuntu-latest
2121
steps:
2222
- name: Checkout code
23-
uses: actions/checkout@v3
23+
uses: actions/checkout@v4
2424
with:
2525
token: ${{env.GH_TOKEN}}
2626

2727
- name: Set up Node.js
28-
uses: actions/setup-node@v1
28+
uses: actions/setup-node@v4
2929
with:
30-
node-version: '16.x'
30+
node-version: '20.x'
3131

3232
- name: Install dependencies
3333
run: yarn install --frozen-lockfile

‎.github/workflows/dhis2-verify-commits.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ jobs:
88
lint-pr-title:
99
runs-on: ubuntu-latest
1010
steps:
11-
- uses: actions/checkout@v2
12-
- uses: c-hive/gha-yarn-cache@v1
11+
- uses: actions/checkout@v4
12+
- uses: c-hive/gha-yarn-cache@v2
1313
- run: yarn install --frozen-lockfile
1414
- id: commitlint
1515
run: echo ::set-output name=config_path::$(node -e "process.stdout.write(require('@dhis2/cli-style').config.commitlint)")

‎.github/workflows/node-publish.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ jobs:
2727
runs-on: ubuntu-latest
2828
if: "!contains(github.event.head_commit.message, '[skip ci]')"
2929
steps:
30-
- uses: actions/checkout@v2
30+
- uses: actions/checkout@v4
3131
with:
3232
token: ${{env.GH_TOKEN}}
33-
- uses: actions/setup-node@v1
33+
- uses: actions/setup-node@v4
3434
with:
35-
node-version: 16.x
35+
node-version: 20.x
3636

3737
- name: Install
3838
run: yarn install --frozen-lockfile

‎.github/workflows/node-test.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ jobs:
77
runs-on: ubuntu-latest
88
if: "!contains(github.event.head_commit.message, '[skip ci]')"
99
steps:
10-
- uses: actions/checkout@v2
11-
- uses: actions/setup-node@v1
10+
- uses: actions/checkout@v4
11+
- uses: actions/setup-node@v4
1212
with:
13-
node-version: 16.x
13+
node-version: 20.x
1414

1515
- name: Install
1616
run: yarn install --frozen-lockfile

‎.storybook/main.js‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ const makeBabelConfig = require('@dhis2/cli-app-scripts/config/makeBabelConfig.j
22

33
module.exports = {
44
addons: ['@storybook/preset-create-react-app'],
5-
stories: ['../src/**/*.stories.@(js|mdx)'],
5+
stories: ['../src/**/*.stories.@(js)'],
6+
67
babel: async (config) => {
78
// currently styled-jsx is configured the same way for prod and
89
// dev so it doesn't matter what the mode is here.
@@ -17,12 +18,27 @@ module.exports = {
1718
// with the storybook babel configuration.
1819
return {
1920
...config,
20-
presets: [...config.presets, ...custom.presets],
21-
plugins: [
22-
...config.plugins,
23-
...custom.plugins,
24-
...custom.env[mode].plugins,
25-
],
21+
presets: custom.presets,
22+
plugins: [...custom.plugins, ...custom.env[mode].plugins].map(
23+
(plugin) => {
24+
if (plugin instanceof Array) {
25+
return [plugin[0], { ...plugin[1], loose: true }]
26+
}
27+
28+
return [plugin, { loose: true }]
29+
}
30+
),
2631
}
2732
},
33+
34+
framework: {
35+
name: '@storybook/react-webpack5',
36+
options: {},
37+
},
38+
39+
docs: {},
40+
41+
typescript: {
42+
reactDocgen: 'react-docgen-typescript',
43+
},
2844
}

‎.storybook/preview.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { CssReset } from '@dhis2/ui'
22
import React from 'react'
3+
const { withJsx } = require('@mihkeleidast/storybook-addon-source')
34

45
export const decorators = [
6+
withJsx,
57
(Story) => (
68
<div>
79
<CssReset />
@@ -22,3 +24,4 @@ export const decorators = [
2224
</div>
2325
),
2426
]
27+
//export const tags = ['autodocs', 'autodocs'];

‎package.json‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
},
2121
"scripts": {
2222
"build": "d2-app-scripts build",
23-
"build-storybook": "build-storybook",
24-
"start-storybook": "start-storybook --port 5000",
23+
"build-storybook": "storybook build",
24+
"start-storybook": "storybook dev --port 5000",
2525
"start": "yarn start-storybook",
2626
"test": "d2-app-scripts test",
2727
"lint": "d2-style check",
@@ -31,21 +31,22 @@
3131
},
3232
"devDependencies": {
3333
"@dhis2/app-runtime": "^3.9.0",
34-
"@dhis2/cli-app-scripts": "^9.0.1",
35-
"@dhis2/cli-style": "^10.4.1",
34+
"@dhis2/cli-app-scripts": "^11.7.4",
35+
"@dhis2/cli-style": "^10.7.4",
3636
"@dhis2/d2-i18n": "^1.1.0",
3737
"@dhis2/ui": "^9.4.4",
38-
"@sambego/storybook-state": "^2.0.1",
39-
"@storybook/addons": "^6.5.16",
40-
"@storybook/preset-create-react-app": "^3.1.7",
41-
"@storybook/react": "^6.5.16",
38+
"@mihkeleidast/storybook-addon-source": "^1.0.1",
39+
"@storybook/preset-create-react-app": "^8.3.6",
40+
"@storybook/react": "^8.3.6",
41+
"@storybook/react-webpack5": "^8.3.6",
4242
"@testing-library/jest-dom": "^5.16.5",
4343
"@testing-library/react": "^12.1.5",
4444
"enzyme": "^3.9.0",
4545
"enzyme-adapter-react-16": "^1.15.6",
4646
"fs-extra": "^10.1.0",
4747
"jest-enzyme": "^7.0.2",
4848
"prop-types": "^15",
49+
"storybook": "^8.3.6",
4950
"styled-jsx": "^4.0.1"
5051
},
5152
"peerDependencies": {
@@ -75,7 +76,8 @@
7576
"resize-observer-polyfill": "^1.5.1"
7677
},
7778
"resolutions": {
78-
"@dhis2/ui": "^9.2.0"
79+
"@dhis2/ui": "^9.2.0",
80+
"eslint": "^7.32.0"
7981
},
8082
"files": [
8183
"build"

‎src/__demo__/CalculationModal.stories.js‎

Lines changed: 114 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { CustomDataProvider } from '@dhis2/app-runtime'
2-
import { storiesOf } from '@storybook/react'
32
import React from 'react'
43
import CalculationModal from '../components/DataDimension/Calculation/CalculationModal.js'
54

@@ -221,102 +220,120 @@ const calculationWithOperand = {
221220
expression: '#{cYeuwXTCPkU}*10-#{fbfJHSPpUQD.pq2XI5kz2BY}',
222221
}
223222

224-
storiesOf('CalculationModal', module)
225-
.add('Default', () => {
226-
return (
227-
<CustomDataProvider
228-
data={{
229-
dataElements: DATA_ELEMENTS,
230-
dataElementGroups: DATA_ELEMENT_GROUPS,
231-
dataElementOperands: DATA_ELEMENT_OPERANDS,
232-
}}
233-
>
234-
<CalculationModal
235-
displayNameProp="name"
236-
onClose={Function.prototype}
237-
onDelete={Function.prototype}
238-
onSave={Function.prototype}
239-
/>
240-
</CustomDataProvider>
241-
)
242-
})
243-
.add('With calculation', () => {
244-
return (
245-
<CustomDataProvider
246-
data={{
247-
dataElements: DATA_ELEMENTS,
248-
dataElementGroups: DATA_ELEMENT_GROUPS,
249-
dataElementOperands: DATA_ELEMENT_OPERANDS,
250-
}}
251-
>
252-
<CalculationModal
253-
calculation={calculation}
254-
displayNameProp="name"
255-
onClose={Function.prototype}
256-
onDelete={Function.prototype}
257-
onSave={Function.prototype}
258-
/>
259-
</CustomDataProvider>
260-
)
261-
})
262-
.add('With calculation containing operand', () => {
263-
return (
264-
<CustomDataProvider
265-
data={{
266-
dataElements: DATA_ELEMENTS,
267-
dataElementGroups: DATA_ELEMENT_GROUPS,
268-
dataElementOperands: DATA_ELEMENT_OPERANDS,
269-
}}
270-
>
271-
<CalculationModal
272-
calculation={calculationWithOperand}
273-
displayNameProp="name"
274-
onClose={Function.prototype}
275-
onDelete={Function.prototype}
276-
onSave={Function.prototype}
277-
/>
278-
</CustomDataProvider>
279-
)
280-
})
281-
.add('No available data', () => {
282-
return (
283-
<CustomDataProvider
284-
data={{
285-
dataElements: {
286-
pager: {
287-
page: 1,
288-
total: 0,
289-
pageSize: 50,
290-
pageCount: 1,
291-
},
292-
dataElements: [],
223+
export default {
224+
title: 'CalculationModal',
225+
}
226+
227+
export const Default = () => {
228+
return (
229+
<CustomDataProvider
230+
data={{
231+
dataElements: DATA_ELEMENTS,
232+
dataElementGroups: DATA_ELEMENT_GROUPS,
233+
dataElementOperands: DATA_ELEMENT_OPERANDS,
234+
}}
235+
>
236+
<CalculationModal
237+
displayNameProp="name"
238+
onClose={Function.prototype}
239+
onDelete={Function.prototype}
240+
onSave={Function.prototype}
241+
/>
242+
</CustomDataProvider>
243+
)
244+
}
245+
246+
export const WithCalculation = () => {
247+
return (
248+
<CustomDataProvider
249+
data={{
250+
dataElements: DATA_ELEMENTS,
251+
dataElementGroups: DATA_ELEMENT_GROUPS,
252+
dataElementOperands: DATA_ELEMENT_OPERANDS,
253+
}}
254+
>
255+
<CalculationModal
256+
calculation={calculation}
257+
displayNameProp="name"
258+
onClose={Function.prototype}
259+
onDelete={Function.prototype}
260+
onSave={Function.prototype}
261+
/>
262+
</CustomDataProvider>
263+
)
264+
}
265+
266+
WithCalculation.story = {
267+
name: 'With calculation',
268+
}
269+
270+
export const WithCalculationContainingOperand = () => {
271+
return (
272+
<CustomDataProvider
273+
data={{
274+
dataElements: DATA_ELEMENTS,
275+
dataElementGroups: DATA_ELEMENT_GROUPS,
276+
dataElementOperands: DATA_ELEMENT_OPERANDS,
277+
}}
278+
>
279+
<CalculationModal
280+
calculation={calculationWithOperand}
281+
displayNameProp="name"
282+
onClose={Function.prototype}
283+
onDelete={Function.prototype}
284+
onSave={Function.prototype}
285+
/>
286+
</CustomDataProvider>
287+
)
288+
}
289+
290+
WithCalculationContainingOperand.story = {
291+
name: 'With calculation containing operand',
292+
}
293+
294+
export const NoAvailableData = () => {
295+
return (
296+
<CustomDataProvider
297+
data={{
298+
dataElements: {
299+
pager: {
300+
page: 1,
301+
total: 0,
302+
pageSize: 50,
303+
pageCount: 1,
293304
},
294-
dataElementGroups: {
295-
pager: {
296-
page: 1,
297-
total: 0,
298-
pageSize: 50,
299-
pageCount: 1,
300-
},
301-
dataElementGroups: [],
305+
dataElements: [],
306+
},
307+
dataElementGroups: {
308+
pager: {
309+
page: 1,
310+
total: 0,
311+
pageSize: 50,
312+
pageCount: 1,
302313
},
303-
dataElementOperands: {
304-
pager: {
305-
page: 1,
306-
total: 0,
307-
pageSize: 50,
308-
pageCount: 1,
309-
},
310-
dataElementOperands: [],
314+
dataElementGroups: [],
315+
},
316+
dataElementOperands: {
317+
pager: {
318+
page: 1,
319+
total: 0,
320+
pageSize: 50,
321+
pageCount: 1,
311322
},
312-
}}
313-
>
314-
<CalculationModal
315-
displayNameProp="name"
316-
onClose={Function.prototype}
317-
onDelete={Function.prototype}
318-
onSave={Function.prototype}
319-
/>
320-
</CustomDataProvider>
321-
)
322-
})
323+
dataElementOperands: [],
324+
},
325+
}}
326+
>
327+
<CalculationModal
328+
displayNameProp="name"
329+
onClose={Function.prototype}
330+
onDelete={Function.prototype}
331+
onSave={Function.prototype}
332+
/>
333+
</CustomDataProvider>
334+
)
335+
}
336+
337+
NoAvailableData.story = {
338+
name: 'No available data',
339+
}

0 commit comments

Comments
 (0)