Skip to content

Commit d2ae781

Browse files
gnapsegnapse
committed
refactor: Refactor modal stories, new modal prop portalElement
1 parent a23551e commit d2ae781

17 files changed

Lines changed: 3731 additions & 1791 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
node_modules
44
.cache
55
.eslintcache
6+
.env
67
dist/
78
es/
89
lib/

‎.storybook/main.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@ const customWebpack = require('./webpack.config.js')
33
module.exports = {
44
stories: ['../src/**/*.stories.@(tsx|mdx)', '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
55
siteUrl: 'https://github.com/Doist/reactist',
6+
features: {
7+
// See https://storybook.js.org/docs/react/writing-tests/interaction-testing
8+
interactionsDebugger: true,
9+
},
610
addons: [
711
'@storybook/addon-postcss',
812
'@storybook/addon-actions',
913
{
1014
name: '@storybook/addon-docs',
11-
options: {
12-
configureJSX: true,
13-
},
15+
options: { configureJSX: true },
1416
},
1517
'@storybook/addon-controls',
1618
'@geometricpanda/storybook-addon-badges',
19+
'@storybook/addon-interactions',
1720
],
1821
typescript: {
1922
check: true,

‎jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ module.exports = {
33
'src/**/*.{ts,tsx,js,jsx}',
44
'!**/*.stories.{js,jsx,ts,tsx}',
55
'!**/*storybook*.{js,jsx,ts,tsx}',
6+
'!**/*-stories-components.{js,jsx,ts,tsx}',
67
],
78
setupFilesAfterEnv: ['./scripts/jestSetup.ts'],
89
moduleNameMapper: {

‎package-lock.json‎

Lines changed: 3293 additions & 1087 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
{
22
"name": "@doist/reactist",
33
"description": "Open source React components by Doist",
4-
"author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
4+
"author": {
5+
"name": "Henning Muszynski",
6+
"email": "henning@doist.com",
7+
"url": "http://doist.com"
8+
},
59
"version": "17.6.0",
610
"license": "MIT",
711
"homepage": "https://github.com/Doist/reactist#readme",
8-
"repository": "git+https://github.com/Doist/reactist.git",
12+
"repository": {
13+
"type": "git",
14+
"url": "git+https://github.com/Doist/reactist.git"
15+
},
916
"prettier": "@doist/prettier-config",
1017
"main": "lib/index.js",
1118
"module": "es/index.js",
@@ -66,11 +73,14 @@
6673
"@storybook/addon-actions": "^6.5.3",
6774
"@storybook/addon-controls": "^6.5.3",
6875
"@storybook/addon-docs": "^6.5.3",
76+
"@storybook/addon-interactions": "^6.5.15",
6977
"@storybook/addon-knobs": "^6.3.1",
7078
"@storybook/addon-links": "^6.5.3",
7179
"@storybook/addon-postcss": "^2.0.0",
7280
"@storybook/addons": "^6.5.3",
81+
"@storybook/jest": "^0.0.10",
7382
"@storybook/react": "^6.5.3",
83+
"@storybook/testing-library": "^0.0.13",
7484
"@testing-library/jest-dom": "^5.14.1",
7585
"@testing-library/react": "^12.0.0",
7686
"@testing-library/user-event": "^13.2.1",
@@ -142,5 +152,8 @@
142152
"tsdx": {
143153
"typescript": "^4.6.4"
144154
}
155+
},
156+
"bugs": {
157+
"url": "https://github.com/Doist/reactist/issues"
145158
}
146159
}

‎src/new-components/alert/alert.stories.mdx‎

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,61 @@ import { Alert } from './alert'
1212
}}
1313
/>
1414

15+
export function getContent(content) {
16+
return content === 'long' ? (
17+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non gravida lacus. Sed sit amet congue diam, ac ultrices elit.'
18+
) : content === 'short' ? (
19+
'Lorem ipsum dolor sit amet.'
20+
) : (
21+
<Stack space="medium">
22+
<Text>
23+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non gravida lacus.
24+
Sed sit amet congue diam, ac ultrices elit.
25+
</Text>
26+
<Text>
27+
Suspendisse at neque leo. Duis facilisis nulla non lectus malesuada, vitae
28+
scelerisque massa hendrerit. Nulla lacinia luctus risus, dapibus semper turpis
29+
vestibulum eu.
30+
</Text>
31+
</Stack>
32+
)
33+
}
34+
1535
# Alert
1636

37+
export function AlertWrapper({ tone, content }) {
38+
return (
39+
<Alert tone={tone} closeLabel="Close" onClose={() => undefined}>
40+
{getContent(content)}
41+
</Alert>
42+
)
43+
}
44+
1745
A simple Alert component.
1846

19-
export function Template({ tone, content, closeLabel }) {
20-
const text =
21-
content === 'long' ? (
22-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non gravida lacus. Sed sit amet congue diam, ac ultrices elit.'
23-
) : content === 'short' ? (
24-
'Lorem ipsum dolor sit amet.'
25-
) : (
26-
<Stack space="medium">
27-
<Text>
28-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non gravida
29-
lacus. Sed sit amet congue diam, ac ultrices elit.
30-
</Text>
31-
<Text>
32-
Suspendisse at neque leo. Duis facilisis nulla non lectus malesuada, vitae
33-
scelerisque massa hendrerit. Nulla lacinia luctus risus, dapibus semper turpis
34-
vestibulum eu.
35-
</Text>
47+
<Canvas>
48+
<Story
49+
name="Main demo"
50+
parameters={{
51+
docs: { source: { type: 'code' } },
52+
}}
53+
>
54+
<Stack space="xxlarge">
55+
<Stack space="large">
56+
{['info', 'positive', 'caution', 'critical'].map((tone) => (
57+
<AlertWrapper tone={tone} content="longer" />
58+
))}
3659
</Stack>
37-
)
60+
</Stack>
61+
</Story>
62+
</Canvas>
63+
64+
## Playground
65+
66+
export function Template({ tone, content, closeLabel }) {
67+
const text = getContent(content)
3868
return (
39-
<Stack space="xxlarge" maxWidth="medium">
69+
<Stack space="large" maxWidth="medium">
4070
<Alert tone={tone}>{text}</Alert>
4171
<Alert tone={tone} closeLabel={closeLabel} onClose={() => undefined}>
4272
{text}
@@ -47,6 +77,7 @@ export function Template({ tone, content, closeLabel }) {
4777

4878
<Canvas>
4979
<Story
80+
name="Playground"
5081
parameters={{ docs: { source: { type: 'code' } } }}
5182
argTypes={{
5283
content: {
@@ -66,7 +97,6 @@ export function Template({ tone, content, closeLabel }) {
6697
id: { control: false },
6798
onClose: { control: false },
6899
}}
69-
name="Playground"
70100
>
71101
{Template.bind({})}
72102
</Story>

‎src/new-components/badge/badge.stories.mdx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@ A badge used to bring attention to a particular UI element or functionality.
1818
The use of variants does not provide extra semantic meaning and is strictly visual. Ensure your content provides the necessary context for users by using the `aria-label` prop if needed.
1919

2020
<Canvas>
21-
<Story parameters={{ docs: { source: { type: 'code' } } }} name="Main demo">
21+
<Story
22+
parameters={{
23+
docs: { source: { type: 'code' } },
24+
}}
25+
name="Main demo"
26+
>
2227
<Columns space="large">
2328
<Column width="content">
2429
<Badge variant="neutral">Neutral</Badge>

‎src/new-components/button/button.stories.mdx‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,12 @@ A semantic button that provides all the necessary visual variants. It follows th
3232
[WAI-ARIA Button Pattern](https://www.w3.org/TR/wai-aria-practices/#button).
3333

3434
<Canvas>
35-
<Story parameters={{ docs: { source: { type: 'code' } } }} name="Main demo">
35+
<Story
36+
name="Main demo"
37+
parameters={{
38+
docs: { source: { type: 'code' } },
39+
}}
40+
>
3641
<Stack space="xxlarge">
3742
<Stack space="large">
3843
<pre>tone="normal"</pre>
@@ -144,7 +149,12 @@ Nothing prevents you from passing both a `startIcon` and an `endIcon` at the sam
144149
this is discouraged, and not guaranteed to be supported in the future.
145150

146151
<Canvas>
147-
<Story parameters={{ docs: { source: { type: 'code' } } }} name="With label and icon">
152+
<Story
153+
name="With label and icon"
154+
parameters={{
155+
docs: { source: { type: 'code' } },
156+
}}
157+
>
148158
<Stack space="xxlarge">
149159
<Stack space="large">
150160
<Text>Icon before the label</Text>
@@ -209,7 +219,12 @@ Icon-only buttons do not support receiving the `children` prop, or any of the `s
209219
as a tooltip if no tooltip is provided.
210220

211221
<Canvas>
212-
<Story parameters={{ docs: { source: { type: 'code' } } }} name="Icon-only buttons">
222+
<Story
223+
name="Icon-only buttons"
224+
parameters={{
225+
docs: { source: { type: 'code' } },
226+
}}
227+
>
213228
<Stack space="large">
214229
<Inline space="large">
215230
<Box>
@@ -249,7 +264,12 @@ Buttons have a default `normal` size, but they can also be larger or smaller. Us
249264
for this purpose.
250265

251266
<Canvas>
252-
<Story parameters={{ docs: { source: { type: 'code' } } }} name="With different size">
267+
<Story
268+
name="With different size"
269+
parameters={{
270+
docs: { source: { type: 'code' } },
271+
}}
272+
>
253273
<Stack space="xxlarge">
254274
<Stack space="large">
255275
<pre>size="small"</pre>
@@ -508,7 +528,10 @@ export function FullWidthTemplate({ label, ...otherProps }) {
508528

509529
<Canvas>
510530
<Story
511-
parameters={{ docs: { source: { type: 'code' } } }}
531+
name="Full-width"
532+
parameters={{
533+
docs: { source: { type: 'code' } },
534+
}}
512535
argTypes={{
513536
label: {
514537
control: { type: 'select' },
@@ -555,7 +578,6 @@ export function FullWidthTemplate({ label, ...otherProps }) {
555578
tooltip: { control: false },
556579
exceptionallySetClassName: { control: false },
557580
}}
558-
name="Full-width"
559581
>
560582
{FullWidthTemplate.bind({})}
561583
</Story>

‎src/new-components/checkbox-field/checkbox-field.stories.mdx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { PartialProps } from '../storybook-helper'
66
import { CheckboxField } from '.'
77
import { Stack } from '../stack'
88
import { Text } from '../text'
9-
import { Inline } from '../inline'
109

1110
<Meta
1211
title="Design system/CheckboxField"
@@ -128,8 +127,15 @@ A checkbox field with a `ReactNode` as label.
128127
### Indeterminate Example
129128

130129
<Canvas>
131-
<Story parameters={{ docs: { source: { type: 'dynamic' } } }} name="Indeterminate Example">
130+
<Story
131+
name="Indeterminate Example"
132+
parameters={{
133+
docs: { source: { type: 'dynamic' } },
134+
}}
135+
>
132136
{() => {
137+
const labels = ['One', 'Two', 'Three', 'Four', 'Five']
138+
const icons = ['1️⃣', '2️⃣', '3️⃣', '4️⃣', '5️⃣']
133139
const [state, setState] = useState([false, true, false, false, false])
134140
const checkedCount = state.filter(Boolean).length
135141
const indeterminate = checkedCount > 0 && checkedCount < state.length
@@ -144,11 +150,12 @@ A checkbox field with a `ReactNode` as label.
144150
indeterminate={indeterminate}
145151
label={`Check/uncheck all (${checkedCount} / ${state.length})`}
146152
/>
147-
<Inline space="medium">
153+
<Stack space="medium">
148154
{state.map((checked, index) => (
149155
<CheckboxField
150156
key={`${index}-${String(checked)}`}
151-
label={String(index + 1)}
157+
label={labels[index]}
158+
icon={icons[index]}
152159
checked={checked}
153160
onChange={(event) => {
154161
const { checked } = event.currentTarget
@@ -160,7 +167,7 @@ A checkbox field with a `ReactNode` as label.
160167
}}
161168
/>
162169
))}
163-
</Inline>
170+
</Stack>
164171
<Text tone="secondary">
165172
Mark some (but not all) numbered checkboxes to see the one at the top as
166173
indeterminate.

0 commit comments

Comments
 (0)