Skip to content

Commit 42a779e

Browse files
tbolgtadhglewis72636c
authored
feat: Support sku 12 and Storybook 7 (#521)
* fix: Use sku 12 and Storybook 7 * Use new storybook syntax * Clean up preview.tsx * Remove unnecessary imports * Apply Tadhg's suggestions * Update .storybook/preview.tsx Co-authored-by: Ryan Ling <ryan@outlook.com.au> * Update .storybook/preview.tsx Co-authored-by: Ryan Ling <ryan@outlook.com.au> * Remove eslintignore addition * Revert "Remove eslintignore addition" This reverts commit 85751c5. * Remove mapping configuration --------- Co-authored-by: Tadhg Lewis <tadhg.lewis@outlook.com> Co-authored-by: Ryan Ling <ryan@outlook.com.au>
1 parent 08e00cf commit 42a779e

18 files changed

+3153
-5948
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
dist-storybook-tmp/
2+
typography.ts
23

34
# managed by sku
45
*.less.d.ts

‎.storybook/preview.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import 'braid-design-system/reset';
2+
3+
import React from 'react';
4+
import { BrowserRouter } from 'react-router-dom';
5+
import { Helmet, HelmetProvider } from 'react-helmet-async';
6+
import { robotoHref, robotoMonoHref } from '../typography';
7+
import type { Preview } from 'sku/@storybook/react';
8+
import { ScoobieLink } from '../src/components/ScoobieLink';
9+
import { BraidProvider, Card, PageBlock } from 'braid-design-system';
10+
import seekJobs from 'braid-design-system/themes/seekJobs';
11+
import docs from 'braid-design-system/themes/docs';
12+
import wireframe from 'braid-design-system/themes/wireframe';
13+
14+
const THEMES = { docs, seekJobs, wireframe };
15+
16+
export type BraidThemeName = 'docs' | 'seekJobs' | 'wireframe';
17+
18+
export default {
19+
globalTypes: {
20+
theme: {
21+
description: 'Braid theme to use',
22+
defaultValue: 'seekJobs',
23+
toolbar: {
24+
title: 'Theme',
25+
icon: 'contrast',
26+
items: ['seekJobs', 'apac', 'docs', 'wireframe'],
27+
},
28+
},
29+
},
30+
decorators: [
31+
(Story, { globals }) => (
32+
<BraidProvider theme={THEMES[globals.theme]} linkComponent={ScoobieLink}>
33+
<BrowserRouter>
34+
<HelmetProvider>
35+
<Helmet>
36+
<link href={robotoHref} rel="stylesheet" />
37+
<link href={robotoMonoHref} rel="stylesheet" />
38+
</Helmet>
39+
<PageBlock>
40+
<Card>
41+
<Story />
42+
</Card>
43+
</PageBlock>
44+
</HelmetProvider>
45+
</BrowserRouter>
46+
</BraidProvider>
47+
),
48+
],
49+
} satisfies Preview;

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
"devDependencies": {
3232
"@mermaid-js/mermaid-cli": "10.0.2",
33-
"@storybook/addon-essentials": "6.5.16",
33+
"@storybook/addon-essentials": "7.0.22",
3434
"@storybook/storybook-deployer": "2.8.16",
3535
"@types/react": "18.2.8",
3636
"@types/react-dom": "18.2.4",
@@ -41,7 +41,7 @@
4141
"react-helmet-async": "1.3.0",
4242
"react-router-dom": "6.9.0",
4343
"semantic-release": "21.0.0",
44-
"sku": "11.12.0",
44+
"sku": "12.0.5",
4545
"webpack": "5.76.3"
4646
},
4747
"files": [
@@ -57,7 +57,7 @@
5757
"braid-design-system": ">= 31.21.0",
5858
"react": ">= 17 < 19",
5959
"react-router-dom": ">= 5.3.0",
60-
"sku": ">= 10.13.4 < 12"
60+
"sku": ">= 10.13.4 < 13"
6161
},
6262
"peerDependenciesMeta": {
6363
"@mermaid-js/mermaid-cli": {

‎src/components/Blockquote.stories.tsx

+18-32
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,28 @@
1-
import 'braid-design-system/reset';
21
import 'loki/configure-react';
32

43
import { List, Text } from 'braid-design-system';
5-
import React, { type ComponentProps } from 'react';
6-
7-
import {
8-
type BraidArgs,
9-
defaultArgTypes,
10-
defaultArgs,
11-
} from '../storybook/controls';
12-
import { BraidStorybookProvider, withRouter } from '../storybook/decorators';
4+
import React from 'react';
5+
import type { Meta, StoryObj } from 'sku/@storybook/react';
136

147
import { Blockquote as Component } from './Blockquote';
158

169
export default {
17-
args: {
18-
braidThemeName: defaultArgs.braidThemeName,
19-
size: defaultArgs.size,
20-
},
21-
argTypes: {
22-
braidThemeName: defaultArgTypes.braidThemeName,
23-
size: defaultArgTypes.size,
24-
},
25-
component: Component,
26-
decorators: [withRouter],
2710
title: 'Standalone/Blockquote',
28-
};
29-
30-
type Args = ComponentProps<typeof Component> & BraidArgs;
11+
component: Component,
12+
} satisfies Meta<typeof Component>;
3113

32-
export const Blockquote = ({ braidThemeName, size, ...args }: Args) => (
33-
<BraidStorybookProvider braidThemeName={braidThemeName}>
34-
<Component {...args} size={size}>
35-
<Text size={size}>This is a paragraph.</Text>
14+
type Story = StoryObj<typeof Component>;
3615

37-
<List size={size}>
38-
<Text size={size}>This is a bullet point.</Text>
39-
</List>
40-
</Component>
41-
</BraidStorybookProvider>
42-
);
16+
export const Blockquote: Story = {
17+
args: {
18+
size: 'standard',
19+
children: (
20+
<>
21+
<Text size={'standard'}>This is a paragraph.</Text>
22+
<List size={'standard'}>
23+
<Text size={'standard'}>This is a bullet point.</Text>
24+
</List>
25+
</>
26+
),
27+
},
28+
};

‎src/components/CodeBlock.stories.tsx

+49-65
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,69 @@
1-
import 'braid-design-system/reset';
21
import 'loki/configure-react';
32

4-
import React, { type ComponentProps } from 'react';
5-
6-
import {
7-
type BraidArgs,
8-
defaultArgTypes,
9-
defaultArgs,
10-
} from '../storybook/controls';
11-
import { BraidStorybookProvider, withRouter } from '../storybook/decorators';
3+
import type { Meta, StoryObj } from 'sku/@storybook/react';
124

135
import { CodeBlock as Component } from './CodeBlock';
146

157
export default {
8+
title: 'Standalone/CodeBlock',
9+
component: Component,
1610
args: {
17-
braidThemeName: defaultArgs.braidThemeName,
1811
graphqlPlayground: 'https://manage.developer.seek.com/graphql-explorer',
1912
language: 'graphql',
20-
size: defaultArgs.size,
13+
size: 'standard',
2114
trim: true,
2215
},
2316
argTypes: {
24-
braidThemeName: defaultArgTypes.braidThemeName,
25-
size: defaultArgTypes.size,
17+
size: {
18+
control: { type: 'radio' },
19+
options: ['standard', 'large'],
20+
},
2621
},
27-
component: Component,
28-
decorators: [withRouter],
29-
title: 'Standalone/CodeBlock',
30-
};
22+
} satisfies Meta<typeof Component>;
3123

32-
type Args = ComponentProps<typeof Component> & BraidArgs;
24+
type Story = StoryObj<typeof Component>;
3325

34-
export const Single = ({ braidThemeName, ...args }: Args) => (
35-
<BraidStorybookProvider braidThemeName={braidThemeName}>
36-
<Component {...args} />
37-
</BraidStorybookProvider>
38-
);
39-
Single.args = {
40-
children: 'query {\n version\n}\n',
41-
};
42-
Single.argTypes = {
43-
children: { control: { type: 'text' } },
26+
export const Single: Story = {
27+
args: {
28+
children: 'query {\n version\n}\n',
29+
},
4430
};
4531

46-
export const Multi = ({ braidThemeName, ...args }: Args) => (
47-
<BraidStorybookProvider braidThemeName={braidThemeName}>
48-
<Component {...args}>
49-
{[
50-
{
51-
code: 'query {\n version\n}\n',
52-
label: 'Operation',
53-
language: 'graphql',
54-
},
55-
{
56-
code: '{}',
57-
label: 'Variables',
58-
language: 'jsonc',
59-
},
60-
{
61-
code: '{\n "data": null\n}\n',
62-
label: 'Response',
63-
language: 'jsonc',
64-
},
65-
]}
66-
</Component>
67-
</BraidStorybookProvider>
68-
);
69-
Multi.parameters = {
70-
docs: {
71-
source: {
72-
/**
73-
* Storybook mangles the children array without this.
74-
*
75-
* ```text
76-
* Objects are not valid as a React child (found: object with keys {code, label, language}).
77-
* If you meant to render a collection of children, use an array instead.
78-
* ```
79-
*
80-
* {@link https://github.com/storybookjs/storybook/issues/11543#issuecomment-684130442}
81-
*/
82-
type: 'code',
32+
export const Multi: Story = {
33+
args: {
34+
children: [
35+
{
36+
code: 'query {\n version\n}\n',
37+
label: 'Operation',
38+
language: 'graphql',
39+
},
40+
{
41+
code: '{}',
42+
label: 'Variables',
43+
language: 'jsonc',
44+
},
45+
{
46+
code: '{\n "data": null\n}\n',
47+
label: 'Response',
48+
language: 'jsonc',
49+
},
50+
],
51+
},
52+
parameters: {
53+
docs: {
54+
source: {
55+
/**
56+
* Storybook mangles the children array without this.
57+
*
58+
* ```text
59+
* Objects are not valid as a React child (found: object with keys {code, label, language}).
60+
* If you meant to render a collection of children, use an array instead.
61+
* ```
62+
*
63+
* {@link https://github.com/storybookjs/storybook/issues/11543#issuecomment-684130442}
64+
*/
65+
type: 'code',
66+
},
8367
},
8468
},
8569
};

‎src/components/CopyableText.stories.tsx

+19-38
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,42 @@
1-
import 'braid-design-system/reset';
21
import 'loki/configure-react';
32

4-
import React, { type ComponentProps } from 'react';
5-
6-
import {
7-
type BraidArgs,
8-
defaultArgTypes,
9-
defaultArgs,
10-
} from '../storybook/controls';
11-
import { BraidStorybookProvider, withRouter } from '../storybook/decorators';
3+
import type { Meta, StoryObj } from 'sku/@storybook/react';
124

135
import { CopyableText as Component } from './CopyableText';
146

157
export default {
16-
args: {
17-
braidThemeName: defaultArgs.braidThemeName,
18-
children: 'copy me',
19-
copiedIcon: 'undefined',
20-
copiedLabel: 'undefined',
21-
copyIcon: 'undefined',
22-
copyLabel: 'undefined',
23-
size: 'standard',
24-
},
8+
title: 'Standalone/CopyableText',
9+
component: Component,
2510
argTypes: {
26-
braidThemeName: defaultArgTypes.braidThemeName,
2711
children: { control: { type: 'text' } },
2812
copiedIcon: {
2913
control: { type: 'radio' },
30-
mapping: { undefined, false: false },
31-
options: ['undefined', 'false'],
14+
options: [undefined, false],
3215
},
3316
copiedLabel: {
3417
control: { type: 'radio' },
35-
mapping: { undefined, custom: 'Custom copied label' },
36-
options: ['undefined', 'custom'],
18+
options: [undefined, 'Custom copied label'],
3719
},
3820
copyIcon: {
3921
control: { type: 'radio' },
40-
mapping: { undefined, false: false },
41-
options: ['undefined', 'false'],
22+
options: [undefined, false],
4223
},
4324
copyLabel: {
4425
control: { type: 'radio' },
45-
mapping: { undefined, custom: 'Custom copy label' },
46-
options: ['undefined', 'custom'],
26+
options: [undefined, 'Custom copy label'],
4727
},
4828
},
49-
component: Component,
50-
decorators: [withRouter],
51-
title: 'Standalone/CopyableText',
52-
};
29+
} satisfies Meta<typeof Component>;
5330

54-
type Args = ComponentProps<typeof Component> & BraidArgs;
31+
type Story = StoryObj<typeof Component>;
5532

56-
export const CopyableText = ({ braidThemeName, ...args }: Args) => (
57-
<BraidStorybookProvider braidThemeName={braidThemeName}>
58-
<Component {...args} />
59-
</BraidStorybookProvider>
60-
);
61-
CopyableText.storyName = 'CopyableText';
33+
export const CopyableText: Story = {
34+
args: {
35+
children: 'copy me',
36+
copiedIcon: undefined,
37+
copiedLabel: undefined,
38+
copyIcon: undefined,
39+
copyLabel: undefined,
40+
size: 'standard',
41+
},
42+
};

0 commit comments

Comments
 (0)