Skip to content

Commit d1efa8d

Browse files
LFDanLuLFDanLu
committed
prep stories
1 parent 6eb1753 commit d1efa8d

File tree

5 files changed

+202
-54
lines changed

5 files changed

+202
-54
lines changed

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

Lines changed: 146 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,19 @@
1111
*/
1212

1313
import {action} from '@storybook/addon-actions';
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';
14+
import {Autocomplete, Button, Cell, Collection, Column, DialogTrigger, GridList, Header, Input, Keyboard, Label, Link, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, OverlayArrow, Popover, Row, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Table, TableBody, TableHeader, TagGroup, TagList, Text, TextField, Tooltip, TooltipTrigger, Virtualizer} from 'react-aria-components';
1515
import {Meta, StoryObj} from '@storybook/react';
16+
import {MyCheckbox} from './Table.stories';
1617
import {MyListBoxItem, MyMenuItem} from './utils';
1718
import {MyListBoxLoaderIndicator, renderEmptyState} from './ListBox.stories';
19+
import {MyTag} from './TagGroup.stories';
1820
import React from 'react';
1921
import styles from '../example/index.css';
22+
import {TreeExampleStaticRender} from './Tree.stories';
2023
import {useAsyncList, useListData, useTreeData} from 'react-stately';
2124
import {useFilter} from 'react-aria';
2225
import './styles.css';
26+
import {MyGridListItem} from './GridList.stories';
2327

2428
export default {
2529
title: 'React Aria Components/Autocomplete',
@@ -939,3 +943,144 @@ AutocompleteWithAsyncListBox.story = {
939943
delay: 50
940944
}
941945
};
946+
947+
// TODO: I'm skipping Breadcrumbs, Tabs for now, not sure it makes sense to filter that via Autocomplete
948+
// Filtering the Taggroup might make sense
949+
950+
export const AutocompleteWithGridList = () => {
951+
return (
952+
<AutocompleteWrapper>
953+
<div>
954+
<TextField autoFocus data-testid="autocomplete-example">
955+
<Label style={{display: 'block'}}>Test</Label>
956+
<Input />
957+
</TextField>
958+
<GridList
959+
className={styles.menu}
960+
style={{height: 200}}
961+
aria-label="test gridlist">
962+
<MyGridListItem>1,1 <Button>Actions</Button></MyGridListItem>
963+
<MyGridListItem>1,2 <Button>Actions</Button></MyGridListItem>
964+
<MyGridListItem>1,3 <Button>Actions</Button></MyGridListItem>
965+
<MyGridListItem>2,1 <Button>Actions</Button></MyGridListItem>
966+
<MyGridListItem>2,2 <Button>Actions</Button></MyGridListItem>
967+
<MyGridListItem>2,3 <Button>Actions</Button></MyGridListItem>
968+
<MyGridListItem>3,1 <Button>Actions</Button></MyGridListItem>
969+
<MyGridListItem>3,2 <Button>Actions</Button></MyGridListItem>
970+
<MyGridListItem>3,3 <Button>Actions</Button></MyGridListItem>
971+
</GridList>
972+
</div>
973+
</AutocompleteWrapper>
974+
);
975+
};
976+
977+
export const AutocompleteWithTable = () => {
978+
return (
979+
<AutocompleteWrapper>
980+
<div>
981+
<TextField autoFocus data-testid="autocomplete-example">
982+
<Label style={{display: 'block'}}>Test</Label>
983+
<Input />
984+
</TextField>
985+
<Table aria-label="Files" selectionMode="multiple" style={{height: 300, width: 300}}>
986+
<TableHeader>
987+
<Column>
988+
<MyCheckbox slot="selection" />
989+
</Column>
990+
<Column isRowHeader>Name</Column>
991+
<Column>Type</Column>
992+
<Column>Date Modified</Column>
993+
</TableHeader>
994+
<TableBody>
995+
<Row>
996+
<Cell>
997+
<MyCheckbox slot="selection" />
998+
</Cell>
999+
<Cell>Games</Cell>
1000+
<Cell>File folder</Cell>
1001+
<Cell>6/7/2020</Cell>
1002+
</Row>
1003+
<Row>
1004+
<Cell>
1005+
<MyCheckbox slot="selection" />
1006+
</Cell>
1007+
<Cell>Program Files</Cell>
1008+
<Cell>File folder</Cell>
1009+
<Cell>4/7/2021</Cell>
1010+
</Row>
1011+
<Row>
1012+
<Cell>
1013+
<MyCheckbox slot="selection" />
1014+
</Cell>
1015+
<Cell>bootmgr</Cell>
1016+
<Cell>System file</Cell>
1017+
<Cell>11/20/2010</Cell>
1018+
</Row>
1019+
<Row>
1020+
<Cell>
1021+
<MyCheckbox slot="selection" />
1022+
</Cell>
1023+
<Cell>log.txt</Cell>
1024+
<Cell>Text Document</Cell>
1025+
<Cell>1/18/2016</Cell>
1026+
</Row>
1027+
</TableBody>
1028+
</Table>
1029+
</div>
1030+
</AutocompleteWrapper>
1031+
);
1032+
};
1033+
1034+
export const AutocompleteWithTagGroup = () => {
1035+
return (
1036+
<AutocompleteWrapper>
1037+
<div>
1038+
<TextField autoFocus data-testid="autocomplete-example">
1039+
<Label style={{display: 'block'}}>Test</Label>
1040+
<Input />
1041+
</TextField>
1042+
<TagGroup>
1043+
<Label>Categories</Label>
1044+
<TagList style={{display: 'flex', gap: 4}}>
1045+
<MyTag href="https://nytimes.com">News</MyTag>
1046+
<MyTag>Travel</MyTag>
1047+
<MyTag>Gaming</MyTag>
1048+
<TooltipTrigger>
1049+
<MyTag>Shopping</MyTag>
1050+
<Tooltip
1051+
offset={5}
1052+
style={{
1053+
background: 'Canvas',
1054+
color: 'CanvasText',
1055+
border: '1px solid gray',
1056+
padding: 5,
1057+
borderRadius: 4
1058+
}}>
1059+
<OverlayArrow style={{transform: 'translateX(-50%)'}}>
1060+
<svg width="8" height="8" style={{display: 'block'}}>
1061+
<path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
1062+
</svg>
1063+
</OverlayArrow>
1064+
I am a tooltip
1065+
</Tooltip>
1066+
</TooltipTrigger>
1067+
</TagList>
1068+
</TagGroup>
1069+
</div>
1070+
</AutocompleteWrapper>
1071+
);
1072+
};
1073+
1074+
export const AutocompleteWithTree = () => {
1075+
return (
1076+
<AutocompleteWrapper>
1077+
<div>
1078+
<TextField autoFocus data-testid="autocomplete-example">
1079+
<Label style={{display: 'block'}}>Test</Label>
1080+
<Input />
1081+
</TextField>
1082+
<TreeExampleStaticRender />
1083+
</div>
1084+
</AutocompleteWrapper>
1085+
);
1086+
};

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,8 @@ import './styles.css';
4848

4949
export default {
5050
title: 'React Aria Components/GridList',
51-
component: GridList
51+
component: GridList,
52+
excludeStories: ['MyGridListItem']
5253
} as Meta<typeof GridList>;
5354

5455
export type GridListStory = StoryFn<typeof GridList>;
@@ -77,7 +78,7 @@ export const GridListExample: GridListStory = (args) => (
7778
</GridList>
7879
);
7980

80-
const MyGridListItem = (props: GridListItemProps) => {
81+
export const MyGridListItem = (props: GridListItemProps) => {
8182
return (
8283
<GridListItem
8384
{...props}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import './styles.css';
2424
export default {
2525
title: 'React Aria Components/Table',
2626
component: Table,
27-
excludeStories: ['DndTable', 'makePromise']
27+
excludeStories: ['DndTable', 'makePromise', 'MyCheckbox']
2828
} as Meta<typeof Table>;
2929

3030
export type TableStory = StoryFn<typeof Table>;
@@ -529,7 +529,7 @@ DndTableExample.args = {
529529
isLoading: false
530530
};
531531

532-
const MyCheckbox = ({children, ...props}: CheckboxProps) => {
532+
export const MyCheckbox = ({children, ...props}: CheckboxProps) => {
533533
return (
534534
<Checkbox {...props}>
535535
{({isIndeterminate}) => (

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ const meta: Meta<typeof TagGroup> = {
3232
control: 'inline-radio',
3333
options: ['toggle', 'replace']
3434
}
35-
}
35+
},
36+
excludeStories: ['MyTag']
3637
};
3738

3839
export default meta;
@@ -70,16 +71,14 @@ export const TagGroupExample: Story = {
7071
)
7172
};
7273

73-
74-
function MyTag(props: TagProps) {
74+
export function MyTag(props: TagProps) {
7575
return (
7676
<Tag
7777
{...props}
7878
style={({isSelected}) => ({border: '1px solid gray', borderRadius: 4, padding: '0 4px', background: isSelected ? 'black' : '', color: isSelected ? 'white' : '', cursor: props.href ? 'pointer' : 'default'})} />
7979
);
8080
}
8181

82-
8382
export const TagGroupExampleWithRemove: Story = {
8483
render: (props: TagGroupProps) => (
8584
<TagGroup {...props} onRemove={action('onRemove')}>

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

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ import './styles.css';
2323

2424
export default {
2525
title: 'React Aria Components/Tree',
26-
component: Tree
26+
component: Tree,
27+
excludeStories: ['TreeExampleStaticRender']
2728
} as Meta<typeof Tree>;
2829

2930
export type TreeStory = StoryFn<typeof Tree>;
@@ -143,52 +144,54 @@ const StaticTreeItemNoActions = (props: StaticTreeItemProps) => {
143144
);
144145
};
145146

146-
const TreeExampleStaticRender = <T extends object>(args: TreeProps<T>): JSX.Element => (
147-
<Tree className={styles.tree} {...args} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
148-
<StaticTreeItem id="Photos" textValue="Photos">Photos</StaticTreeItem>
149-
<StaticTreeItem id="projects" textValue="Projects" title="Projects">
150-
<StaticTreeItem id="projects-1" textValue="Projects-1" title="Projects-1">
151-
<StaticTreeItem id="projects-1A" textValue="Projects-1A">
152-
Projects-1A
147+
export function TreeExampleStaticRender(props: TreeProps<T>) {
148+
return (
149+
<Tree className={styles.tree} {...props} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
150+
<StaticTreeItem id="Photos" textValue="Photos">Photos</StaticTreeItem>
151+
<StaticTreeItem id="projects" textValue="Projects" title="Projects">
152+
<StaticTreeItem id="projects-1" textValue="Projects-1" title="Projects-1">
153+
<StaticTreeItem id="projects-1A" textValue="Projects-1A">
154+
Projects-1A
155+
</StaticTreeItem>
156+
</StaticTreeItem>
157+
<StaticTreeItem id="projects-2" textValue="Projects-2">
158+
Projects-2
159+
</StaticTreeItem>
160+
<StaticTreeItem id="projects-3" textValue="Projects-3">
161+
Projects-3
153162
</StaticTreeItem>
154163
</StaticTreeItem>
155-
<StaticTreeItem id="projects-2" textValue="Projects-2">
156-
Projects-2
157-
</StaticTreeItem>
158-
<StaticTreeItem id="projects-3" textValue="Projects-3">
159-
Projects-3
160-
</StaticTreeItem>
161-
</StaticTreeItem>
162-
<TreeItem
163-
id="reports"
164-
textValue="Reports"
165-
className={({isFocused, isSelected, isHovered, isFocusVisible}) => classNames(styles, 'tree-item', {
166-
focused: isFocused,
167-
'focus-visible': isFocusVisible,
168-
selected: isSelected,
169-
hovered: isHovered
170-
})}>
171-
<TreeItemContent>
172-
Reports
173-
</TreeItemContent>
174-
</TreeItem>
175-
<TreeItem
176-
id="Tests"
177-
textValue="Tests"
178-
className={({isFocused, isSelected, isHovered, isFocusVisible}) => classNames(styles, 'tree-item', {
179-
focused: isFocused,
180-
'focus-visible': isFocusVisible,
181-
selected: isSelected,
182-
hovered: isHovered
183-
})}>
184-
<TreeItemContent>
185-
{({isFocused}) => (
186-
<Text>{`${isFocused} Tests`}</Text>
187-
)}
188-
</TreeItemContent>
189-
</TreeItem>
190-
</Tree>
191-
);
164+
<TreeItem
165+
id="reports"
166+
textValue="Reports"
167+
className={({isFocused, isSelected, isHovered, isFocusVisible}) => classNames(styles, 'tree-item', {
168+
focused: isFocused,
169+
'focus-visible': isFocusVisible,
170+
selected: isSelected,
171+
hovered: isHovered
172+
})}>
173+
<TreeItemContent>
174+
Reports
175+
</TreeItemContent>
176+
</TreeItem>
177+
<TreeItem
178+
id="Tests"
179+
textValue="Tests"
180+
className={({isFocused, isSelected, isHovered, isFocusVisible}) => classNames(styles, 'tree-item', {
181+
focused: isFocused,
182+
'focus-visible': isFocusVisible,
183+
selected: isSelected,
184+
hovered: isHovered
185+
})}>
186+
<TreeItemContent>
187+
{({isFocused}) => (
188+
<Text>{`${isFocused} Tests`}</Text>
189+
)}
190+
</TreeItemContent>
191+
</TreeItem>
192+
</Tree>
193+
);
194+
}
192195

193196
const TreeExampleStaticNoActionsRender = <T extends object>(args: TreeProps<T>): JSX.Element => (
194197
<Tree className={styles.tree} {...args} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>

0 commit comments

Comments
 (0)