Skip to content

Commit 0c31321

Browse files
ryo-manbaryo-manba
authored
refactor：isolate stories for various components (#5651)
refactor：isolate stories for various components
1 parent f914372 commit 0c31321

13 files changed

+726
-518
lines changed

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Button, Calendar, CalendarCell, CalendarGrid, Heading, RangeCalendar} from 'react-aria-components';
14+
import React from 'react';
15+
16+
export default {
17+
title: 'React Aria Components'
18+
};
19+
20+
export const CalendarExample = () => (
21+
<Calendar style={{width: 220}}>
22+
<div style={{display: 'flex', alignItems: 'center'}}>
23+
<Button slot="previous">&lt;</Button>
24+
<Heading style={{flex: 1, textAlign: 'center'}} />
25+
<Button slot="next">&gt;</Button>
26+
</div>
27+
<CalendarGrid style={{width: '100%'}}>
28+
{date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
29+
</CalendarGrid>
30+
</Calendar>
31+
);
32+
33+
export const CalendarMultiMonth = () => (
34+
<Calendar style={{width: 500}} visibleDuration={{months: 2}}>
35+
<div style={{display: 'flex', alignItems: 'center'}}>
36+
<Button slot="previous">&lt;</Button>
37+
<Heading style={{flex: 1, textAlign: 'center'}} />
38+
<Button slot="next">&gt;</Button>
39+
</div>
40+
<div style={{display: 'flex', gap: 20}}>
41+
<CalendarGrid style={{flex: 1}}>
42+
{date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
43+
</CalendarGrid>
44+
<CalendarGrid style={{flex: 1}} offset={{months: 1}}>
45+
{date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
46+
</CalendarGrid>
47+
</div>
48+
</Calendar>
49+
);
50+
51+
export const RangeCalendarExample = () => (
52+
<RangeCalendar style={{width: 220}}>
53+
<div style={{display: 'flex', alignItems: 'center'}}>
54+
<Button slot="previous">&lt;</Button>
55+
<Heading style={{flex: 1, textAlign: 'center'}} />
56+
<Button slot="next">&gt;</Button>
57+
</div>
58+
<CalendarGrid style={{width: '100%'}}>
59+
{date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
60+
</CalendarGrid>
61+
</RangeCalendar>
62+
);

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import clsx from 'clsx';
14+
import {DateField, DateInput, DateSegment, Label} from 'react-aria-components';
15+
import React from 'react';
16+
import styles from '../example/index.css';
17+
18+
export default {
19+
title: 'React Aria Components'
20+
};
21+
22+
export const DateFieldExample = () => (
23+
<DateField data-testid="date-field-example">
24+
<Label style={{display: 'block'}}>Date</Label>
25+
<DateInput className={styles.field} data-testid2="date-input">
26+
{segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
27+
</DateInput>
28+
</DateField>
29+
);

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, Group, Heading, Label, Popover, RangeCalendar} from 'react-aria-components';
14+
import clsx from 'clsx';
15+
import React from 'react';
16+
import styles from '../example/index.css';
17+
18+
export default {
19+
title: 'React Aria Components'
20+
};
21+
22+
export const DatePickerExample = () => (
23+
<DatePicker data-testid="date-picker-example">
24+
<Label style={{display: 'block'}}>Date</Label>
25+
<Group style={{display: 'inline-flex'}}>
26+
<DateInput className={styles.field}>
27+
{segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
28+
</DateInput>
29+
<Button>🗓</Button>
30+
</Group>
31+
<Popover
32+
placement="bottom start"
33+
style={{
34+
background: 'Canvas',
35+
color: 'CanvasText',
36+
border: '1px solid gray',
37+
padding: 20
38+
}}>
39+
<Dialog>
40+
<Calendar style={{width: 220}}>
41+
<div style={{display: 'flex', alignItems: 'center'}}>
42+
<Button slot="previous">&lt;</Button>
43+
<Heading style={{flex: 1, textAlign: 'center'}} />
44+
<Button slot="next">&gt;</Button>
45+
</div>
46+
<CalendarGrid style={{width: '100%'}}>
47+
{date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
48+
</CalendarGrid>
49+
</Calendar>
50+
</Dialog>
51+
</Popover>
52+
</DatePicker>
53+
);
54+
55+
export const DateRangePickerExample = () => (
56+
<DateRangePicker data-testid="date-range-picker-example">
57+
<Label style={{display: 'block'}}>Date</Label>
58+
<Group style={{display: 'inline-flex'}}>
59+
<div className={styles.field}>
60+
<DateInput data-testid="date-range-picker-date-input" slot="start" style={{display: 'inline-flex'}}>
61+
{segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
62+
</DateInput>
63+
<span aria-hidden="true" style={{padding: '0 4px'}}>–</span>
64+
<DateInput slot="end" style={{display: 'inline-flex'}}>
65+
{segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
66+
</DateInput>
67+
</div>
68+
<Button>🗓</Button>
69+
</Group>
70+
<Popover
71+
placement="bottom start"
72+
style={{
73+
background: 'Canvas',
74+
color: 'CanvasText',
75+
border: '1px solid gray',
76+
padding: 20
77+
}}>
78+
<Dialog>
79+
<RangeCalendar style={{width: 220}}>
80+
<div style={{display: 'flex', alignItems: 'center'}}>
81+
<Button slot="previous">&lt;</Button>
82+
<Heading style={{flex: 1, textAlign: 'center'}} />
83+
<Button slot="next">&gt;</Button>
84+
</div>
85+
<CalendarGrid style={{width: '100%'}}>
86+
{date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
87+
</CalendarGrid>
88+
</RangeCalendar>
89+
</Dialog>
90+
</Popover>
91+
</DateRangePicker>
92+
);

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

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

13-
import {Header, ListBox, Section, Separator, Text} from 'react-aria-components';
13+
import {Header, ListBox, ListBoxItem, ListBoxProps, Section, Separator, Text, useDragAndDrop} from 'react-aria-components';
1414
import {MyListBoxItem} from './utils';
1515
import React from 'react';
1616
import styles from '../example/index.css';
17+
import {useListData} from 'react-stately';
1718

1819
export default {
1920
title: 'React Aria Components'
@@ -90,3 +91,88 @@ export const ListBoxComplex = () => (
9091
</MyListBoxItem>
9192
</ListBox>
9293
);
94+
95+
96+
let albums = [
97+
{
98+
id: 1,
99+
image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
100+
title: 'Euphoric Echoes',
101+
artist: 'Luna Solstice'
102+
},
103+
{
104+
id: 2,
105+
image: 'https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmVvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=900&q=60',
106+
title: 'Neon Dreamscape',
107+
artist: 'Electra Skyline'
108+
},
109+
{
110+
id: 3,
111+
image: 'https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHNwYWNlfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&q=60',
112+
title: 'Cosmic Serenade',
113+
artist: 'Orion\'s Symphony'
114+
},
115+
{
116+
id: 4,
117+
image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bXVzaWN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
118+
title: 'Melancholy Melodies',
119+
artist: 'Violet Mistral'
120+
},
121+
{
122+
id: 5,
123+
image: 'https://images.unsplash.com/photo-1608433319511-dfe8ea4cbd3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJlYXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
124+
title: 'Rhythmic Illusions',
125+
artist: 'Mirage Beats'
126+
}
127+
];
128+
129+
export const ListBoxDnd = (props: ListBoxProps<typeof albums[0]>) => {
130+
let list = useListData({
131+
initialItems: albums
132+
});
133+
134+
let {dragAndDropHooks} = useDragAndDrop({
135+
getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).title})),
136+
onReorder(e) {
137+
if (e.target.dropPosition === 'before') {
138+
list.moveBefore(e.target.key, e.keys);
139+
} else if (e.target.dropPosition === 'after') {
140+
list.moveAfter(e.target.key, e.keys);
141+
}
142+
}
143+
});
144+
145+
return (
146+
<ListBox
147+
{...props}
148+
aria-label="Albums"
149+
items={list.items}
150+
selectionMode="multiple"
151+
dragAndDropHooks={dragAndDropHooks}>
152+
{item => (
153+
<ListBoxItem>
154+
<img src={item.image} alt="" />
155+
<Text slot="label">{item.title}</Text>
156+
<Text slot="description">{item.artist}</Text>
157+
</ListBoxItem>
158+
)}
159+
</ListBox>
160+
);
161+
};
162+
163+
ListBoxDnd.story = {
164+
args: {
165+
layout: 'stack',
166+
orientation: 'horizontal'
167+
},
168+
argTypes: {
169+
layout: {
170+
control: 'radio',
171+
options: ['stack', 'grid']
172+
},
173+
orientation: {
174+
control: 'radio',
175+
options: ['horizontal', 'vertical']
176+
}
177+
}
178+
};

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/*
2+
* Copyright 2022 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {action} from '@storybook/addon-actions';
14+
import {Button, Header, Keyboard, Menu, MenuTrigger, Popover, Section, Separator, Text} from 'react-aria-components';
15+
import {MyMenuItem} from './utils';
16+
import React from 'react';
17+
import styles from '../example/index.css';
18+
19+
export default {
20+
title: 'React Aria Components'
21+
};
22+
23+
export const MenuExample = () => (
24+
<MenuTrigger>
25+
<Button aria-label="Menu">☰</Button>
26+
<Popover>
27+
<Menu className={styles.menu} onAction={action('onAction')}>
28+
<Section className={styles.group}>
29+
<Header style={{fontSize: '1.2em'}}>Section 1</Header>
30+
<MyMenuItem>Foo</MyMenuItem>
31+
<MyMenuItem>Bar</MyMenuItem>
32+
<MyMenuItem>Baz</MyMenuItem>
33+
<MyMenuItem href="https://google.com">Google</MyMenuItem>
34+
</Section>
35+
<Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
36+
<Section className={styles.group}>
37+
<Header style={{fontSize: '1.2em'}}>Section 2</Header>
38+
<MyMenuItem>Foo</MyMenuItem>
39+
<MyMenuItem>Bar</MyMenuItem>
40+
<MyMenuItem>Baz</MyMenuItem>
41+
</Section>
42+
</Menu>
43+
</Popover>
44+
</MenuTrigger>
45+
);
46+
47+
export const MenuComplex = () => (
48+
<MenuTrigger>
49+
<Button aria-label="Menu">☰</Button>
50+
<Popover>
51+
<Menu className={styles.menu}>
52+
<MyMenuItem>
53+
<Text slot="label">Copy</Text>
54+
<Text slot="description">Description</Text>
55+
<Keyboard>⌘C</Keyboard>
56+
</MyMenuItem>
57+
<MyMenuItem>
58+
<Text slot="label">Cut</Text>
59+
<Text slot="description">Description</Text>
60+
<Keyboard>⌘X</Keyboard>
61+
</MyMenuItem>
62+
<MyMenuItem>
63+
<Text slot="label">Paste</Text>
64+
<Text slot="description">Description</Text>
65+
<Keyboard>⌘V</Keyboard>
66+
</MyMenuItem>
67+
</Menu>
68+
</Popover>
69+
</MenuTrigger>
70+
);

0 commit comments

Comments
 (0)