Skip to content

Commit e677260

Browse files
snowystingersnowystinger
authored
chore: S2 storybook standardisation updates, treeview generics fix (#8397)
* chore: TS explicit module S2 * fix any types in story * accidentally checked in tsconfig * tidy up * fix types for s2 TreeView * make two implementations align * fix types again * add pure * fix lint * undo changes to source * undo tsconfig change * fix story
1 parent 6d2fe6a commit e677260

File tree

104 files changed

+2596
-2254
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+2596
-2254
lines changed

‎packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {ActionButton, Avatar, Text} from '../src';
13+
import {ActionButton, ActionButtonProps, Avatar, Text} from '../src';
1414
import {Fonts, NotificationBadges, UnsafeClassName} from '../stories/ActionButton.stories';
1515
import {generatePowerset} from '@react-spectrum/story-utils';
16-
import type {Meta} from '@storybook/react';
16+
import type {Meta, StoryObj} from '@storybook/react';
1717
import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
18+
import {ReactElement} from 'react';
1819
import {shortName} from './utils';
1920
import {StaticColorProvider} from '../stories/utils';
2021
import {style} from '../style' with { type: 'macro' };
@@ -29,6 +30,8 @@ const meta: Meta<typeof ActionButton> = {
2930

3031
export default meta;
3132

33+
type ActionButtonStory = StoryObj<typeof ActionButton>;
34+
3235
let states = [
3336
{isQuiet: true},
3437
{isDisabled: true},
@@ -38,7 +41,7 @@ let states = [
3841

3942
let combinations = generatePowerset(states);
4043

41-
const Template = (args) => {
44+
const Template = (args: ActionButtonProps): ReactElement => {
4245
let {children, ...otherArgs} = args;
4346
return (
4447
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
@@ -64,33 +67,33 @@ const Template = (args) => {
6467
);
6568
};
6669

67-
export const Default = {
68-
render: Template
70+
export const Default: ActionButtonStory = {
71+
render: (args) => <Template {...args} />
6972
};
7073

71-
export const WithIcon = {
72-
render: Template,
74+
export const WithIcon: ActionButtonStory = {
75+
render: (args) => <Template {...args} />,
7376
args: {
7477
children: <><NewIcon /><Text>Press me</Text></>
7578
}
7679
};
7780

78-
export const IconOnly = {
79-
render: Template,
81+
export const IconOnly: ActionButtonStory = {
82+
render: (args) => <Template {...args} />,
8083
args: {
8184
children: <NewIcon />
8285
}
8386
};
8487

85-
export const WithAvatar = {
86-
render: Template,
88+
export const WithAvatar: ActionButtonStory = {
89+
render: (args) => <Template {...args} />,
8790
args: {
8891
children: <><Avatar src="https://i.imgur.com/xIe7Wlb.png" /><Text>Press me</Text></>
8992
}
9093
};
9194

92-
export const AvatarOnly = {
93-
render: Template,
95+
export const AvatarOnly: ActionButtonStory = {
96+
render: (args) => <Template {...args} />,
9497
args: {
9598
children: <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
9699
}

‎packages/@react-spectrum/s2/chromatic/ActionButtonGroup.stories.tsx

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {ActionButton, ActionButtonGroup, Text} from '../src';
1414
import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
1515
import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
1616
import Cut from '../s2wf-icons/S2_Icon_Cut_20_N.svg';
17-
import type {Meta, StoryFn} from '@storybook/react';
17+
import type {Meta, StoryObj} from '@storybook/react';
1818
import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
1919
import {style} from '../style' with { type: 'macro' };
2020

@@ -46,26 +46,32 @@ let justifiedStyle = style({
4646
}
4747
});
4848

49-
export const Example: StoryFn<typeof ActionButtonGroup> = (args) => (
50-
<ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
51-
<ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
52-
<ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
53-
<ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
54-
</ActionButtonGroup>
55-
);
49+
export const Example: StoryObj<typeof ActionButtonGroup> = {
50+
render: (args) => (
51+
<ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
52+
<ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
53+
<ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
54+
<ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
55+
</ActionButtonGroup>
56+
)
57+
};
5658

57-
export const IconOnly: StoryFn<typeof ActionButtonGroup> = (args) => (
58-
<ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
59-
<ActionButton aria-label="Cut"><Cut /></ActionButton>
60-
<ActionButton aria-label="Copy"><Copy /></ActionButton>
61-
<ActionButton aria-label="Paste"><Paste /></ActionButton>
62-
</ActionButtonGroup>
63-
);
59+
export const IconOnly: StoryObj<typeof ActionButtonGroup> = {
60+
render: (args) => (
61+
<ActionButtonGroup {...args} styles={args.isJustified ? justifiedStyle(args) : undefined}>
62+
<ActionButton aria-label="Cut"><Cut /></ActionButton>
63+
<ActionButton aria-label="Copy"><Copy /></ActionButton>
64+
<ActionButton aria-label="Paste"><Paste /></ActionButton>
65+
</ActionButtonGroup>
66+
)
67+
};
6468

65-
export const Justified: StoryFn<typeof ActionButtonGroup> = (args) => (
66-
<ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
67-
<ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
68-
<ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
69-
<ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
70-
</ActionButtonGroup>
71-
);
69+
export const Justified: StoryObj<typeof ActionButtonGroup> = {
70+
render: (args) => (
71+
<ActionButtonGroup {...args} isJustified styles={justifiedStyle(args)}>
72+
<ActionButton><Cut /><Text slot="label">Cut</Text></ActionButton>
73+
<ActionButton><Copy /><Text slot="label">Copy</Text></ActionButton>
74+
<ActionButton><Paste /><Text slot="label">Paste</Text></ActionButton>
75+
</ActionButtonGroup>
76+
)
77+
};

‎packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,22 @@ const meta: Meta<typeof ActionMenu<any>> = {
2626
export default meta;
2727
type Story = StoryObj<typeof ActionMenu<any>>;
2828

29-
export const Static: Story = {...Example};
30-
31-
Static.play = async ({canvasElement}) => {
32-
await userEvent.tab();
33-
await userEvent.keyboard('[Enter]');
34-
let body = canvasElement.ownerDocument.body;
35-
await within(body).findByRole('menu');
29+
export const Static: Story = {
30+
...Example,
31+
play: async ({canvasElement}) => {
32+
await userEvent.tab();
33+
await userEvent.keyboard('[Enter]');
34+
let body = canvasElement.ownerDocument.body;
35+
await within(body).findByRole('menu');
36+
}
3637
};
3738

38-
export const Dynamic = {...DynamicExample};
39-
40-
Dynamic.play = async ({canvasElement}) => {
41-
await userEvent.tab();
42-
await userEvent.keyboard('[Enter]');
43-
let body = canvasElement.ownerDocument.body;
44-
await within(body).findByRole('menu');
39+
export const Dynamic: Story = {
40+
...DynamicExample,
41+
play: async ({canvasElement}) => {
42+
await userEvent.tab();
43+
await userEvent.keyboard('[Enter]');
44+
let body = canvasElement.ownerDocument.body;
45+
await within(body).findByRole('menu');
46+
}
4547
};

‎packages/@react-spectrum/s2/chromatic/AlertDialog.stories.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@ const meta: Meta<typeof AlertDialog> = {
2626

2727
export default meta;
2828

29-
export const Example = {...Base} as StoryObj;
30-
31-
Example.play = async ({canvasElement}) => {
32-
await userEvent.tab();
33-
await userEvent.keyboard('[Enter]');
34-
let body = canvasElement.ownerDocument.body;
35-
await within(body).findByRole('alertdialog');
29+
export const Example: StoryObj<typeof AlertDialog> = {
30+
...Base,
31+
play: async ({canvasElement}) => {
32+
await userEvent.tab();
33+
await userEvent.keyboard('[Enter]');
34+
let body = canvasElement.ownerDocument.body;
35+
await within(body).findByRole('alertdialog');
36+
}
3637
};

‎packages/@react-spectrum/s2/chromatic/Avatar.stories.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {Avatar} from '../src';
14-
import type {Meta} from '@storybook/react';
14+
import type {Meta, StoryObj} from '@storybook/react';
1515
import {style} from '../style' with { type: 'macro' };
1616

1717
const meta: Meta<typeof Avatar> = {
@@ -23,12 +23,13 @@ const meta: Meta<typeof Avatar> = {
2323
};
2424

2525
export default meta;
26+
type Story = StoryObj<typeof Avatar>;
2627

27-
export const Default = {
28+
export const Default: Story = {
2829
render: () => <Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />
2930
};
3031

31-
export const OverBackground = {
32+
export const OverBackground: Story = {
3233
render: () => (
3334
<div className={style({backgroundColor: 'indigo-800', padding: 40})}>
3435
<Avatar alt="design provided" src="https://i.imgur.com/xIe7Wlb.png" />

‎packages/@react-spectrum/s2/chromatic/Badge.stories.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Badge} from '../src';
13+
import {Badge, BadgeProps} from '../src';
1414
import {Example} from '../stories/Badge.stories';
1515
import {generatePowerset} from '@react-spectrum/story-utils';
16-
import type {Meta} from '@storybook/react';
16+
import type {Meta, StoryObj} from '@storybook/react';
17+
import {ReactNode} from 'react';
1718
import {shortName} from './utils';
1819
import {style} from '../style' with { type: 'macro' };
1920

@@ -26,6 +27,7 @@ const meta: Meta<typeof Badge> = {
2627
};
2728

2829
export default meta;
30+
type Story = StoryObj<typeof Template>;
2931

3032
let states = [
3133
{size: ['S', 'M', 'L', 'XL']},
@@ -36,7 +38,7 @@ let states = [
3638
let combinations = generatePowerset(states);
3739
let chunkSize = Math.ceil(combinations.length / 3);
3840

39-
const Template = ({combos, ...args}) => {
41+
const Template = ({combos, ...args}: {combos: any[], args: BadgeProps}): ReactNode => {
4042
return (
4143
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4244
{combos.map(c => {
@@ -52,20 +54,20 @@ const Template = ({combos, ...args}) => {
5254
);
5355
};
5456

55-
export const Default = {
56-
render: Template,
57+
export const Default: Story = {
58+
render: (args) => <Template {...args} />,
5759
name: 'all visual option combos 1 of 3',
5860
args: {combos: combinations.slice(0, chunkSize)}
5961
};
6062

61-
export const ComboPt2 = {
62-
render: Template,
63+
export const ComboPt2: Story = {
64+
render: (args) => <Template {...args} />,
6365
args: {combos: combinations.slice(chunkSize, chunkSize * 2)},
6466
name: 'all visual option combos 2 of 3'
6567
};
6668

67-
export const ComboPt3 = {
68-
render: Template,
69+
export const ComboPt3: Story = {
70+
render: (args) => <Template {...args} />,
6971
args: {combos: combinations.slice(chunkSize * 2, chunkSize * 3)},
7072
name: 'all visual option combos 3 of 3'
7173
};

‎packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {Breadcrumb, Breadcrumbs} from '../src';
1414
import {generatePowerset} from '@react-spectrum/story-utils';
1515
import {Many} from '../stories/Breadcrumbs.stories';
1616
import type {Meta, StoryObj} from '@storybook/react';
17+
import {ReactNode} from 'react';
1718
import {shortName} from './utils';
1819
import {style} from '../style' with { type: 'macro' };
1920
import {userEvent, within} from '@storybook/test';
@@ -26,19 +27,19 @@ const meta: Meta<typeof Breadcrumbs> = {
2627

2728
export default meta;
2829

29-
export const Dynamic = Many as StoryObj;
30-
31-
Dynamic.parameters = {
32-
// TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
33-
chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
34-
};
35-
36-
Dynamic.play = async ({canvasElement}) => {
37-
// This uses click because using .tab twice didn't move focus to the menu
38-
let trigger = await within(canvasElement).findByRole('button');
39-
await userEvent.click(trigger);
40-
let body = canvasElement.ownerDocument.body;
41-
await within(body).findByRole('menu');
30+
export const Dynamic: StoryObj<typeof Breadcrumbs> = {
31+
...Many,
32+
parameters: {
33+
// TODO: move these options back to meta above once we get strings for ar-AE. This is just to prevent the RTL story's config from actually applying
34+
chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}
35+
},
36+
play: async ({canvasElement}) => {
37+
// This uses click because using .tab twice didn't move focus to the menu
38+
let trigger = await within(canvasElement).findByRole('button');
39+
await userEvent.click(trigger);
40+
let body = canvasElement.ownerDocument.body;
41+
await within(body).findByRole('menu');
42+
}
4243
};
4344

4445
let states = [
@@ -48,7 +49,7 @@ let states = [
4849

4950
let combinations = generatePowerset(states);
5051

51-
const Template = () => {
52+
const Template = (): ReactNode => {
5253
return (
5354
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
5455
{combinations.map(c => {
@@ -76,8 +77,8 @@ const Template = () => {
7677
);
7778
};
7879

79-
export const Powerset = {
80-
render: Template,
80+
export const Powerset: StoryObj<typeof Template> = {
81+
render: () => <Template />,
8182
parameters: {
8283
chromaticProvider: {locales: ['en-US'], disableAnimations: true}
8384
}

‎packages/@react-spectrum/s2/chromatic/Button.stories.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {Button, Text} from '../src';
13+
import {Button, ButtonProps, Text} from '../src';
1414
import {generatePowerset} from '@react-spectrum/story-utils';
15-
import type {Meta} from '@storybook/react';
15+
import type {Meta, StoryObj} from '@storybook/react';
1616
import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
17+
import {ReactNode} from 'react';
1718
import {shortName} from './utils';
1819
import {StaticColorProvider} from '../stories/utils';
1920
import {style} from '../style' with { type: 'macro' };
@@ -39,7 +40,7 @@ let states = [
3940

4041
let combinations = generatePowerset(states);
4142

42-
const Template = (args) => {
43+
const Template = (args: ButtonProps): ReactNode => {
4344
let {children, ...otherArgs} = args;
4445
return (
4546
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
@@ -65,19 +66,19 @@ const Template = (args) => {
6566
);
6667
};
6768

68-
export const Default = {
69-
render: Template
69+
export const Default: StoryObj<typeof Button> = {
70+
render: (args) => <Template {...args} />
7071
};
7172

72-
export const WithIcon = {
73-
render: Template,
73+
export const WithIcon: StoryObj<typeof Button> = {
74+
render: (args) => <Template {...args} />,
7475
args: {
7576
children: <><NewIcon /><Text>Press me</Text></>
7677
}
7778
};
7879

79-
export const IconOnly = {
80-
render: Template,
80+
export const IconOnly: StoryObj<typeof Button> = {
81+
render: (args) => <Template {...args} />,
8182
args: {
8283
children: <NewIcon />
8384
}

0 commit comments

Comments
 (0)