Skip to content

Commit 805fa34

Browse files
snowystingersnowystinger
authored
chore: RAC storybook updates, Loader api fix (#8381)
* chore: make module boundaries explicit * fix s2 illustrations * fix lint and ts for React 18/19 * fix 16, 17 * fix return types to work with isolated modules for renderOverrides * fix inference * chore: ts explicit module boundary RAC * remove the harder to deal with satisfies * revert changes to source * fix story * add back in loader fixes * fix copy-pasta * fix lint * review comments * fix lint * fix story types
1 parent 00fce14 commit 805fa34

Some content is hidden

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

50 files changed

+1476
-1181
lines changed

‎packages/react-aria-components/src/GridList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,7 @@ export interface GridListLoadMoreItemProps extends Omit<LoadMoreSentinelProps, '
513513
isLoading?: boolean
514514
}
515515

516-
export const GridListLoadMoreItem = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
516+
export const GridListLoadMoreItem = createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
517517
let state = useContext(ListStateContext)!;
518518
let {isVirtualized} = useContext(CollectionRendererContext);
519519
let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;

‎packages/react-aria-components/src/ListBox.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,7 @@ export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'c
483483
isLoading?: boolean
484484
}
485485

486-
export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
486+
export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
487487
let state = useContext(ListStateContext)!;
488488
let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
489489

@@ -525,7 +525,7 @@ export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBo
525525
// aria-selected isn't needed here since this option is not selectable.
526526
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
527527
role="option"
528-
ref={ref}>
528+
ref={ref as ForwardedRef<HTMLDivElement>}>
529529
{renderProps.children}
530530
</div>
531531
)}

‎packages/react-aria-components/src/Table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1359,7 +1359,7 @@ export interface TableLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'col
13591359
isLoading?: boolean
13601360
}
13611361

1362-
export const TableLoadMoreItem = createLeafComponent('loader', function TableLoadingIndicator<T extends object>(props: TableLoadMoreItemProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<T>) {
1362+
export const TableLoadMoreItem = createLeafComponent('loader', function TableLoadingIndicator(props: TableLoadMoreItemProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<object>) {
13631363
let state = useContext(TableStateContext)!;
13641364
let {isVirtualized} = useContext(CollectionRendererContext);
13651365
let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -1411,7 +1411,7 @@ export const TableLoadMoreItem = createLeafComponent('loader', function TableLoa
14111411
{...mergeProps(filterDOMProps(props, {global: true}), rowProps)}
14121412
{...renderProps}
14131413
role="row"
1414-
ref={ref as any}>
1414+
ref={ref as ForwardedRef<HTMLTableRowElement>}>
14151415
<TD role="rowheader" {...rowHeaderProps} style={style}>
14161416
{renderProps.children}
14171417
</TD>

‎packages/react-aria-components/stories/Autocomplete.stories.tsx

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
*/
1212

1313
import {action} from '@storybook/addon-actions';
14-
import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
15-
import {Menu, MenuItem, MenuSection, MenuTrigger} from '../src/Menu';
14+
import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
15+
import {Meta, StoryObj} from '@storybook/react';
1616
import {MyListBoxItem, MyMenuItem} from './utils';
1717
import React from 'react';
1818
import styles from '../example/index.css';
@@ -21,6 +21,7 @@ import {useFilter} from 'react-aria';
2121

2222
export default {
2323
title: 'React Aria Components/Autocomplete',
24+
component: Autocomplete,
2425
args: {
2526
onAction: action('onAction'),
2627
selectionMode: 'multiple',
@@ -46,7 +47,11 @@ export default {
4647
options: ['clearSelection', 'none']
4748
}
4849
}
49-
};
50+
} as Meta<typeof Autocomplete>;
51+
52+
export type AutocompleteStory = StoryObj<typeof Autocomplete>;
53+
export type MenuStory = StoryObj<typeof Menu>;
54+
export type ListBoxStory = StoryObj<typeof ListBox>;
5055

5156
let StaticMenu = (props) => {
5257
return (
@@ -113,7 +118,7 @@ function AutocompleteWrapper(props) {
113118
);
114119
}
115120

116-
export const AutocompleteExample = {
121+
export const AutocompleteExample: AutocompleteStory = {
117122
render: (args) => {
118123
return (
119124
<AutocompleteWrapper>
@@ -131,7 +136,7 @@ export const AutocompleteExample = {
131136
name: 'Autocomplete complex static with textfield'
132137
};
133138

134-
export const AutocompleteSearchfield = {
139+
export const AutocompleteSearchfield: AutocompleteStory = {
135140
render: (args) => {
136141
return (
137142
<AutocompleteWrapper defaultInputValue="Ba">
@@ -289,7 +294,7 @@ let dynamicRenderFuncSections = (item: ItemNode) => {
289294
}
290295
};
291296

292-
export const AutocompleteMenuDynamic = {
297+
export const AutocompleteMenuDynamic: AutocompleteStory = {
293298
render: (args) => {
294299
return (
295300
<>
@@ -313,7 +318,7 @@ export const AutocompleteMenuDynamic = {
313318
name: 'Autocomplete, dynamic menu'
314319
};
315320

316-
export const AutocompleteOnActionOnMenuItems = {
321+
export const AutocompleteOnActionOnMenuItems: AutocompleteStory = {
317322
render: (args) => {
318323
return (
319324
<AutocompleteWrapper>
@@ -342,7 +347,7 @@ interface AutocompleteItem {
342347

343348
let items: AutocompleteItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
344349

345-
export const AutocompleteDisabledKeys = {
350+
export const AutocompleteDisabledKeys: AutocompleteStory = {
346351
render: (args) => {
347352
return (
348353
<AutocompleteWrapper>
@@ -362,7 +367,7 @@ export const AutocompleteDisabledKeys = {
362367
name: 'Autocomplete, disabled key'
363368
};
364369

365-
const AsyncExample = (args) => {
370+
const AsyncExample = (args: any): React.ReactElement => {
366371
let list = useAsyncList<AutocompleteItem>({
367372
async load({filterText}) {
368373
let json = await new Promise(resolve => {
@@ -413,7 +418,7 @@ const AsyncExample = (args) => {
413418
);
414419
};
415420

416-
export const AutocompleteAsyncLoadingExample = {
421+
export const AutocompleteAsyncLoadingExample: StoryObj<typeof AsyncExample> = {
417422
render: (args) => {
418423
return <AsyncExample {...args} />;
419424
},
@@ -445,14 +450,14 @@ const CaseSensitiveFilter = (args) => {
445450
);
446451
};
447452

448-
export const AutocompleteCaseSensitive = {
453+
export const AutocompleteCaseSensitive: AutocompleteStory = {
449454
render: (args) => {
450455
return <CaseSensitiveFilter {...args} />;
451456
},
452457
name: 'Autocomplete, case sensitive filter'
453458
};
454459

455-
export const AutocompleteWithListbox = {
460+
export const AutocompleteWithListbox: AutocompleteStory = {
456461
render: (args) => {
457462
return (
458463
<DialogTrigger>
@@ -529,7 +534,7 @@ function VirtualizedListBox(props) {
529534
);
530535
}
531536

532-
export const AutocompleteWithVirtualizedListbox = {
537+
export const AutocompleteWithVirtualizedListbox: AutocompleteStory = {
533538
render: (args) => {
534539
return (
535540
<DialogTrigger>
@@ -615,7 +620,7 @@ function ShellExample() {
615620
);
616621
}
617622

618-
export const AutocompleteInPopover = {
623+
export const AutocompleteInPopover: MenuStory = {
619624
render: () => {
620625
return (
621626
<MenuTrigger>
@@ -660,7 +665,7 @@ export const AutocompleteInPopover = {
660665
}
661666
};
662667

663-
export const AutocompleteInPopoverDialogTrigger = {
668+
export const AutocompleteInPopoverDialogTrigger: MenuStory = {
664669
render: () => {
665670
return (
666671
<DialogTrigger>
@@ -771,7 +776,7 @@ const MyMenu2 = () => {
771776
);
772777
};
773778

774-
export function AutocompleteWithExtraButtons() {
779+
export function AutocompleteWithExtraButtons(): React.ReactElement {
775780
return (
776781
<div>
777782
<input />
@@ -787,7 +792,7 @@ export function AutocompleteWithExtraButtons() {
787792
// TODO: note that Space is used to select an item in a multiselect menu but that is also reserved for the
788793
// autocomplete input field. Should we add logic to allow Space to select menu items when focus is in the Menu
789794
// or is that a rare/unlikely use case for menus in general?
790-
export const AutocompleteMenuInPopoverDialogTrigger = {
795+
export const AutocompleteMenuInPopoverDialogTrigger: MenuStory = {
791796
render: (args) => {
792797
return (
793798
<DialogTrigger>
@@ -831,7 +836,7 @@ export const AutocompleteMenuInPopoverDialogTrigger = {
831836

832837
let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
833838

834-
export const AutocompleteSelect = () => (
839+
export const AutocompleteSelect = (): React.ReactElement => (
835840
<Select style={{marginBottom: 40, position: 'relative'}}>
836841
<Label style={{display: 'block'}}>Test</Label>
837842
<Button>

‎packages/react-aria-components/stories/Breadcrumbs.stories.tsx

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,31 @@
1111
*/
1212

1313
import {Breadcrumb, Breadcrumbs, Link} from 'react-aria-components';
14+
import {Meta, StoryObj} from '@storybook/react';
1415
import React from 'react';
1516

1617
export default {
1718
title: 'React Aria Components/Breadcrumbs',
1819
component: Breadcrumbs
19-
};
20+
} as Meta<typeof Breadcrumbs>;
21+
22+
export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
2023

21-
export const BreadcrumbsExample = (args: any) => (
22-
<Breadcrumbs {...args}>
23-
<Breadcrumb>
24-
<Link href="/">Home</Link>
25-
</Breadcrumb>
26-
<Breadcrumb>
27-
<Link href="/react-aria">React Aria</Link>
28-
</Breadcrumb>
29-
<Breadcrumb>
30-
<Link href="/react-aria">Breadcrumbs</Link>
31-
</Breadcrumb>
32-
</Breadcrumbs>
33-
);
24+
export const BreadcrumbsExample: BreadcrumbsStory = {
25+
render: (args: any) => (
26+
<Breadcrumbs {...args}>
27+
<Breadcrumb>
28+
<Link href="/">Home</Link>
29+
</Breadcrumb>
30+
<Breadcrumb>
31+
<Link href="/react-aria">React Aria</Link>
32+
</Breadcrumb>
33+
<Breadcrumb>
34+
<Link href="/react-aria">Breadcrumbs</Link>
35+
</Breadcrumb>
36+
</Breadcrumbs>
37+
)
38+
};
3439

3540
interface ItemValue {
3641
id: string,
@@ -42,12 +47,14 @@ let items: Array<ItemValue> = [
4247
{id: 'Breadcrumbs', url: '/react-aria/breadcrumbs'}
4348
];
4449

45-
export const DynamicBreadcrumbsExample = (args: any) => (
46-
<Breadcrumbs {...args} items={items}>
47-
{(item: ItemValue) => (
48-
<Breadcrumb>
49-
<Link href={item.url}>{item.id}</Link>
50-
</Breadcrumb>
51-
)}
52-
</Breadcrumbs>
53-
);
50+
export const DynamicBreadcrumbsExample: BreadcrumbsStory = {
51+
render: (args: any) => (
52+
<Breadcrumbs {...args} items={items}>
53+
{(item: ItemValue) => (
54+
<Breadcrumb>
55+
<Link href={item.url}>{item.id}</Link>
56+
</Breadcrumb>
57+
)}
58+
</Breadcrumbs>
59+
)
60+
};

‎packages/react-aria-components/stories/Button.stories.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,25 @@
1313
import {action} from '@storybook/addon-actions';
1414
import {Button, ProgressBar, Text} from 'react-aria-components';
1515
import {mergeProps} from '@react-aria/utils';
16+
import {Meta, StoryObj} from '@storybook/react';
1617
import React, {useEffect, useRef, useState} from 'react';
1718
import * as styles from './button-ripple.css';
1819
import * as styles2 from './button-pending.css';
1920

2021
export default {
21-
title: 'React Aria Components/Button'
22-
};
22+
title: 'React Aria Components/Button',
23+
component: Button
24+
} as Meta<typeof Button>;
2325

24-
export const ButtonExample = () => {
25-
return (
26+
export type ButtonStory = StoryObj<typeof Button>;
27+
28+
export const ButtonExample: ButtonStory = {
29+
render: () => (
2630
<Button data-testid="button-example" onPress={action('onPress')} onClick={action('onClick')}>Press me</Button>
27-
);
31+
)
2832
};
2933

30-
export const PendingButton = {
34+
export const PendingButton: ButtonStory = {
3135
render: (args) => <PendingButtonExample {...args} />,
3236
args: {
3337
children: 'Press me'
@@ -79,10 +83,10 @@ function PendingButtonExample(props) {
7983
);
8084
}
8185

82-
export const RippleButtonExample = () => {
83-
return (
86+
export const RippleButtonExample: ButtonStory = {
87+
render: () => (
8488
<RippleButton data-testid="button-example">Press me</RippleButton>
85-
);
89+
)
8690
};
8791

8892
function RippleButton(props) {
@@ -148,7 +152,7 @@ function ButtonPerformanceExample() {
148152
);
149153
}
150154

151-
export const ButtonPerformance = {
155+
export const ButtonPerformance: ButtonStory = {
152156
render: (args) => <ButtonPerformanceExample {...args} />,
153157
parameters: {
154158
description: {

0 commit comments

Comments
 (0)