Skip to content

Commit 022b45b

Browse files
ryo-manbaryo-manba
authored
refactor: isolate stories for rest components (#5657)
* refactor: isolate Dropzone stories * refactor: isolate FileTrigger stories * refactor: isolate RadioGroup stories * refactor: isolate SearchField stories * refactor: isolate Button stories * refactor: isolate Switch stories * refactor: isolate TextField stories * refactor: isolate Link stories * refactor: isolate Toolbar stories * fix: lint
1 parent 0c31321 commit 022b45b

11 files changed

+400
-226
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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} from 'react-aria-components';
14+
import React from 'react';
15+
16+
export default {
17+
title: 'React Aria Components'
18+
};
19+
20+
export const ButtonExample = () => {
21+
return (
22+
<Button data-testid="button-example" onPress={() => alert('Hello world!')}>Press me</Button>
23+
);
24+
};

‎packages/react-aria-components/stories/index.stories.tsx renamed to ‎packages/react-aria-components/stories/Dropzone.stories.tsx

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

1313
import {action} from '@storybook/addon-actions';
14-
import {Button, Checkbox, Dialog, DialogTrigger, DropZone, FileTrigger, Input, Label, Link, Modal, ModalOverlay, Radio, RadioGroup, SearchField, Switch, Text, TextField, ToggleButton, Toolbar} from 'react-aria-components';
14+
import {Button, DropZone, FileTrigger, Link, Text} from 'react-aria-components';
1515
import {classNames} from '@react-spectrum/utils';
1616
import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
1717
import React, {useRef} from 'react';
@@ -21,51 +21,6 @@ export default {
2121
title: 'React Aria Components'
2222
};
2323

24-
function Draggable() {
25-
let buttonRef = useRef(null);
26-
let {dragProps, isDragging} = useDrag({
27-
getItems() {
28-
return [{
29-
'text/plain': 'hello world'}];
30-
}
31-
});
32-
let {buttonProps} = useButton({elementType: 'div'}, buttonRef);
33-
34-
return (
35-
<FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
36-
<div
37-
{...mergeProps(buttonProps, dragProps)}
38-
ref={buttonRef}
39-
className={classNames(styles, 'draggable', {['dragging']: isDragging})}>
40-
Drag me
41-
</div>
42-
</FocusRing>
43-
);
44-
}
45-
46-
function Copyable() {
47-
let {clipboardProps} = useClipboard({
48-
getItems() {
49-
return [{
50-
'text/plain': 'hello world'
51-
}];
52-
}
53-
});
54-
55-
return (
56-
<FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
57-
<div
58-
{...clipboardProps}
59-
role="textbox"
60-
aria-label="copyable element"
61-
tabIndex={0}
62-
className={styles.copyable}>
63-
Copy me
64-
</div>
65-
</FocusRing>
66-
);
67-
}
68-
6924
export const DropzoneExampleWithFileTriggerLink = (props) => (
7025
<div>
7126
<DropZone
@@ -207,191 +162,47 @@ export const DropzoneWithRenderProps = (props) => (
207162
</div>
208163
);
209164

210-
export const FileTriggerButton = (props) => (
211-
<FileTrigger
212-
onSelect={action('onSelect')}
213-
data-testid="filetrigger-example"
214-
{...props} >
215-
<Button>Upload</Button>
216-
</FileTrigger>
217-
);
218-
219-
export const FileTriggerDirectories = (props) => {
220-
let [files, setFiles] = React.useState<string[]>([]);
221-
222-
return (
223-
<>
224-
<FileTrigger
225-
{...props}
226-
acceptDirectory
227-
onSelect={(e) => {
228-
if (e) {
229-
let fileList = [...e].map(file => file.webkitRelativePath !== '' ? file.webkitRelativePath : file.name);
230-
setFiles(fileList);
231-
}
232-
}} >
233-
<Button>Upload</Button>
234-
</FileTrigger>
235-
{files && <ul>
236-
{files.map((file, index) => (
237-
<li key={index}>{file}</li>
238-
))}
239-
</ul>}
240-
</>
241-
);
242-
};
243-
244-
export const FileTriggerLinkAllowsMultiple = (props) => (
245-
<FileTrigger
246-
{...props}
247-
onSelect={action('onSelect')}
248-
allowsMultiple >
249-
<Link>Select a file</Link>
250-
</FileTrigger>
251-
);
252-
export const RadioGroupExample = () => {
253-
return (
254-
<RadioGroup
255-
data-testid="radio-group-example"
256-
className={styles.radiogroup}>
257-
<Label>Favorite pet</Label>
258-
<Radio className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
259-
<Radio className={styles.radio} value="cats">Cat</Radio>
260-
<Radio className={styles.radio} value="dragon">Dragon</Radio>
261-
</RadioGroup>
262-
);
263-
};
264-
265-
export const RadioGroupInDialogExample = () => {
266-
return (
267-
<DialogTrigger>
268-
<Button>Open dialog</Button>
269-
<ModalOverlay
270-
style={{
271-
position: 'fixed',
272-
zIndex: 100,
273-
top: 0,
274-
left: 0,
275-
bottom: 0,
276-
right: 0,
277-
background: 'rgba(0, 0, 0, 0.5)',
278-
display: 'flex',
279-
alignItems: 'center',
280-
justifyContent: 'center'
281-
}}>
282-
<Modal
283-
style={{
284-
background: 'Canvas',
285-
color: 'CanvasText',
286-
border: '1px solid gray',
287-
padding: 30
288-
}}>
289-
<Dialog
290-
style={{
291-
outline: '2px solid transparent',
292-
outlineOffset: '2px',
293-
position: 'relative'
294-
}}>
295-
{({close}) => (
296-
<>
297-
<div>
298-
<RadioGroupExample />
299-
</div>
300-
<div>
301-
<Button onPress={close} style={{marginTop: 10}}>
302-
Close
303-
</Button>
304-
</div>
305-
</>
306-
)}
307-
</Dialog>
308-
</Modal>
309-
</ModalOverlay>
310-
</DialogTrigger>
311-
);
312-
};
313-
314-
export const SearchFieldExample = () => {
315-
return (
316-
<SearchField className={classNames(styles, 'searchFieldExample')} data-testid="search-field-example">
317-
<Label>Search</Label>
318-
<Input />
319-
<Button>✕</Button>
320-
</SearchField>
321-
);
322-
};
323-
324-
export const ButtonExample = () => {
325-
return (
326-
<Button data-testid="button-example" onPress={() => alert('Hello world!')}>Press me</Button>
327-
);
328-
};
329-
330-
export const ToggleButtonExample = () => {
331-
return (
332-
<ToggleButton className={classNames(styles, 'toggleButtonExample')} data-testid="toggle-button-example">Toggle</ToggleButton>
333-
);
334-
};
335-
336-
export const SwitchExample = () => {
337-
return (
338-
<Switch className={classNames(styles, 'switchExample')} data-testid="switch-example">
339-
<div className={classNames(styles, 'switchExample-indicator')} />
340-
Switch me
341-
</Switch>
342-
);
343-
};
165+
const Draggable = () => {
166+
let buttonRef = useRef(null);
167+
let {dragProps, isDragging} = useDrag({
168+
getItems() {
169+
return [{
170+
'text/plain': 'hello world'}];
171+
}
172+
});
173+
let {buttonProps} = useButton({elementType: 'div'}, buttonRef);
344174

345-
export const TextfieldExample = () => {
346175
return (
347-
<TextField data-testid="textfield-example">
348-
<Label>First name</Label>
349-
<Input />
350-
</TextField>
176+
<FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
177+
<div
178+
{...mergeProps(buttonProps, dragProps)}
179+
ref={buttonRef}
180+
className={classNames(styles, 'draggable', {['dragging']: isDragging})}>
181+
Drag me
182+
</div>
183+
</FocusRing>
351184
);
352185
};
353186

354-
export const LinkExample = () => {
355-
return (
356-
<Link data-testid="link-example"href="https://www.imdb.com/title/tt6348138/" target="_blank">
357-
The missing link
358-
</Link>
359-
);
360-
};
187+
const Copyable = () => {
188+
let {clipboardProps} = useClipboard({
189+
getItems() {
190+
return [{
191+
'text/plain': 'hello world'
192+
}];
193+
}
194+
});
361195

362-
export const ToolbarExample = (props) => {
363196
return (
364-
<div>
365-
<label htmlFor="before">Input Before Toolbar</label>
366-
<input id="before" type="text" />
367-
<Toolbar {...props}>
368-
<div role="group" aria-label="Text style">
369-
<ToggleButton className={classNames(styles, 'toggleButtonExample')}><strong>B</strong></ToggleButton>
370-
<ToggleButton className={classNames(styles, 'toggleButtonExample')}><div style={{textDecoration: 'underline'}}>U</div></ToggleButton>
371-
<ToggleButton className={classNames(styles, 'toggleButtonExample')}><i>I</i></ToggleButton>
372-
</div>
373-
<Checkbox>
374-
<div className="checkbox">
375-
<svg viewBox="0 0 18 18" aria-hidden="true">
376-
<polyline points="1 9 7 14 15 4" />
377-
</svg>
378-
</div>
379-
Night Mode
380-
</Checkbox>
381-
<Link href="https://google.com">Help</Link>
382-
</Toolbar>
383-
<label htmlFor="after">Input After Toolbar</label>
384-
<input id="after" type="text" />
385-
</div>
197+
<FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
198+
<div
199+
{...clipboardProps}
200+
role="textbox"
201+
aria-label="copyable element"
202+
tabIndex={0}
203+
className={styles.copyable}>
204+
Copy me
205+
</div>
206+
</FocusRing>
386207
);
387208
};
388-
389-
ToolbarExample.args = {
390-
orientation: 'horizontal'
391-
};
392-
ToolbarExample.argTypes = {
393-
orientation: {
394-
control: 'radio',
395-
options: ['horizontal', 'vertical']
396-
}
397-
};

‎packages/react-aria-components/stories/FileTrigger.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 {action} from '@storybook/addon-actions';
14+
import {Button, FileTrigger, Link} from 'react-aria-components';
15+
import React from 'react';
16+
17+
export default {
18+
title: 'React Aria Components'
19+
};
20+
21+
export const FileTriggerButton = (props) => (
22+
<FileTrigger
23+
onSelect={action('onSelect')}
24+
data-testid="filetrigger-example"
25+
{...props} >
26+
<Button>Upload</Button>
27+
</FileTrigger>
28+
);
29+
30+
export const FileTriggerDirectories = (props) => {
31+
let [files, setFiles] = React.useState<string[]>([]);
32+
33+
return (
34+
<>
35+
<FileTrigger
36+
{...props}
37+
acceptDirectory
38+
onSelect={(e) => {
39+
if (e) {
40+
let fileList = [...e].map(file => file.webkitRelativePath !== '' ? file.webkitRelativePath : file.name);
41+
setFiles(fileList);
42+
}
43+
}} >
44+
<Button>Upload</Button>
45+
</FileTrigger>
46+
{files && <ul>
47+
{files.map((file, index) => (
48+
<li key={index}>{file}</li>
49+
))}
50+
</ul>}
51+
</>
52+
);
53+
};
54+
55+
export const FileTriggerLinkAllowsMultiple = (props) => (
56+
<FileTrigger
57+
{...props}
58+
onSelect={action('onSelect')}
59+
allowsMultiple >
60+
<Link>Select a file</Link>
61+
</FileTrigger>
62+
);

0 commit comments

Comments
 (0)