refactor：isolate stories for various components (#5651)

refactor：isolate stories for various components
adobe · Jan 4, 2024 · 0c31321 · 0c31321 · rspbot · Jan 4, 2024
1 parent f914372
commit 0c31321
Show file tree

Hide file tree

Showing 13 changed files with 726 additions and 518 deletions.
diff --git a/packages/react-aria-components/stories/Calendar.stories.tsx b/packages/react-aria-components/stories/Calendar.stories.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, Calendar, CalendarCell, CalendarGrid, Heading, RangeCalendar} from 'react-aria-components';
+import React from 'react';
+
+export default {
+  title: 'React Aria Components'
+};
+
+export const CalendarExample = () => (
+  <Calendar style={{width: 220}}>
+    <div style={{display: 'flex', alignItems: 'center'}}>
+      <Button slot="previous">&lt;</Button>
+      <Heading style={{flex: 1, textAlign: 'center'}} />
+      <Button slot="next">&gt;</Button>
+    </div>
+    <CalendarGrid style={{width: '100%'}}>
+      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+    </CalendarGrid>
+  </Calendar>
+);
+
+export const CalendarMultiMonth = () => (
+  <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
+    <div style={{display: 'flex', alignItems: 'center'}}>
+      <Button slot="previous">&lt;</Button>
+      <Heading style={{flex: 1, textAlign: 'center'}} />
+      <Button slot="next">&gt;</Button>
+    </div>
+    <div style={{display: 'flex', gap: 20}}>
+      <CalendarGrid style={{flex: 1}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+      </CalendarGrid>
+      <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+      </CalendarGrid>
+    </div>
+  </Calendar>
+);
+
+export const RangeCalendarExample = () => (
+  <RangeCalendar style={{width: 220}}>
+    <div style={{display: 'flex', alignItems: 'center'}}>
+      <Button slot="previous">&lt;</Button>
+      <Heading style={{flex: 1, textAlign: 'center'}} />
+      <Button slot="next">&gt;</Button>
+    </div>
+    <CalendarGrid style={{width: '100%'}}>
+      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+    </CalendarGrid>
+  </RangeCalendar>
+);
diff --git a/packages/react-aria-components/stories/DateField.stories.tsx b/packages/react-aria-components/stories/DateField.stories.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import clsx from 'clsx';
+import {DateField, DateInput, DateSegment, Label} from 'react-aria-components';
+import React from 'react';
+import styles from '../example/index.css';
+
+export default {
+  title: 'React Aria Components'
+};
+
+export const DateFieldExample = () => (
+  <DateField data-testid="date-field-example">
+    <Label style={{display: 'block'}}>Date</Label>
+    <DateInput className={styles.field} data-testid2="date-input">
+      {segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
+    </DateInput>
+  </DateField>
+);
diff --git a/packages/react-aria-components/stories/DatePicker.stories.tsx b/packages/react-aria-components/stories/DatePicker.stories.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, Group, Heading, Label, Popover, RangeCalendar} from 'react-aria-components';
+import clsx from 'clsx';
+import React from 'react';
+import styles from '../example/index.css';
+
+export default {
+  title: 'React Aria Components'
+};
+
+export const DatePickerExample = () => (
+  <DatePicker data-testid="date-picker-example">
+    <Label style={{display: 'block'}}>Date</Label>
+    <Group style={{display: 'inline-flex'}}>
+      <DateInput className={styles.field}>
+        {segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
+      </DateInput>
+      <Button>🗓</Button>
+    </Group>
+    <Popover
+      placement="bottom start"
+      style={{
+        background: 'Canvas',
+        color: 'CanvasText',
+        border: '1px solid gray',
+        padding: 20
+      }}>
+      <Dialog>
+        <Calendar style={{width: 220}}>
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <Button slot="previous">&lt;</Button>
+            <Heading style={{flex: 1, textAlign: 'center'}} />
+            <Button slot="next">&gt;</Button>
+          </div>
+          <CalendarGrid style={{width: '100%'}}>
+            {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+          </CalendarGrid>
+        </Calendar>
+      </Dialog>
+    </Popover>
+  </DatePicker>
+);
+
+export const DateRangePickerExample = () => (
+  <DateRangePicker data-testid="date-range-picker-example">
+    <Label style={{display: 'block'}}>Date</Label>
+    <Group style={{display: 'inline-flex'}}>
+      <div className={styles.field}>
+        <DateInput data-testid="date-range-picker-date-input" slot="start" style={{display: 'inline-flex'}}>
+          {segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
+        </DateInput>
+        <span aria-hidden="true" style={{padding: '0 4px'}}>–</span>
+        <DateInput slot="end" style={{display: 'inline-flex'}}>
+          {segment => <DateSegment segment={segment} className={clsx(styles.segment, {[styles.placeholder]: segment.isPlaceholder})} />}
+        </DateInput>
+      </div>
+      <Button>🗓</Button>
+    </Group>
+    <Popover
+      placement="bottom start"
+      style={{
+        background: 'Canvas',
+        color: 'CanvasText',
+        border: '1px solid gray',
+        padding: 20
+      }}>
+      <Dialog>
+        <RangeCalendar style={{width: 220}}>
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <Button slot="previous">&lt;</Button>
+            <Heading style={{flex: 1, textAlign: 'center'}} />
+            <Button slot="next">&gt;</Button>
+          </div>
+          <CalendarGrid style={{width: '100%'}}>
+            {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+          </CalendarGrid>
+        </RangeCalendar>
+      </Dialog>
+    </Popover>
+  </DateRangePicker>
+);
diff --git a/packages/react-aria-components/stories/ListBox.stories.tsx b/packages/react-aria-components/stories/ListBox.stories.tsx
@@ -10,10 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Header, ListBox, Section, Separator, Text} from 'react-aria-components';
+import {Header, ListBox, ListBoxItem, ListBoxProps, Section, Separator, Text, useDragAndDrop} from 'react-aria-components';
 import {MyListBoxItem} from './utils';
 import React from 'react';
 import styles from '../example/index.css';
+import {useListData} from 'react-stately';
 
 export default {
   title: 'React Aria Components'
@@ -90,3 +91,88 @@ export const ListBoxComplex = () => (
     </MyListBoxItem>
   </ListBox>
 );
+
+
+let albums = [
+  {
+    id: 1,
+    image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
+    title: 'Euphoric Echoes',
+    artist: 'Luna Solstice'
+  },
+  {
+    id: 2,
+    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',
+    title: 'Neon Dreamscape',
+    artist: 'Electra Skyline'
+  },
+  {
+    id: 3,
+    image: 'https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHNwYWNlfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&q=60',
+    title: 'Cosmic Serenade',
+    artist: 'Orion\'s Symphony'
+  },
+  {
+    id: 4,
+    image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bXVzaWN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
+    title: 'Melancholy Melodies',
+    artist: 'Violet Mistral'
+  },
+  {
+    id: 5,
+    image: 'https://images.unsplash.com/photo-1608433319511-dfe8ea4cbd3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJlYXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
+    title: 'Rhythmic Illusions',
+    artist: 'Mirage Beats'
+  }
+];
+
+export const ListBoxDnd = (props: ListBoxProps<typeof albums[0]>) => {
+  let list = useListData({
+    initialItems: albums
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems: (keys) => [...keys].map(key => ({'text/plain': list.getItem(key).title})),
+    onReorder(e) {
+      if (e.target.dropPosition === 'before') {
+        list.moveBefore(e.target.key, e.keys);
+      } else if (e.target.dropPosition === 'after') {
+        list.moveAfter(e.target.key, e.keys);
+      }
+    }
+  });
+
+  return (
+    <ListBox
+      {...props}
+      aria-label="Albums"
+      items={list.items}
+      selectionMode="multiple"
+      dragAndDropHooks={dragAndDropHooks}>
+      {item => (
+        <ListBoxItem>
+          <img src={item.image} alt="" />
+          <Text slot="label">{item.title}</Text>
+          <Text slot="description">{item.artist}</Text>
+        </ListBoxItem>
+      )}
+    </ListBox>
+  );
+};
+
+ListBoxDnd.story = {
+  args: {
+    layout: 'stack',
+    orientation: 'horizontal'
+  },
+  argTypes: {
+    layout: {
+      control: 'radio',
+      options: ['stack', 'grid']
+    },
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical']
+    }
+  }
+};
diff --git a/packages/react-aria-components/stories/Menu.stories.tsx b/packages/react-aria-components/stories/Menu.stories.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {Button, Header, Keyboard, Menu, MenuTrigger, Popover, Section, Separator, Text} from 'react-aria-components';
+import {MyMenuItem} from './utils';
+import React from 'react';
+import styles from '../example/index.css';
+
+export default {
+  title: 'React Aria Components'
+};
+
+export const MenuExample = () => (
+  <MenuTrigger>
+    <Button aria-label="Menu">☰</Button>
+    <Popover>
+      <Menu className={styles.menu} onAction={action('onAction')}>
+        <Section className={styles.group}>
+          <Header style={{fontSize: '1.2em'}}>Section 1</Header>
+          <MyMenuItem>Foo</MyMenuItem>
+          <MyMenuItem>Bar</MyMenuItem>
+          <MyMenuItem>Baz</MyMenuItem>
+          <MyMenuItem href="https://google.com">Google</MyMenuItem>
+        </Section>
+        <Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
+        <Section className={styles.group}>
+          <Header style={{fontSize: '1.2em'}}>Section 2</Header>
+          <MyMenuItem>Foo</MyMenuItem>
+          <MyMenuItem>Bar</MyMenuItem>
+          <MyMenuItem>Baz</MyMenuItem>
+        </Section>
+      </Menu>
+    </Popover>
+  </MenuTrigger>
+);
+
+export const MenuComplex = () => (
+  <MenuTrigger>
+    <Button aria-label="Menu">☰</Button>
+    <Popover>
+      <Menu className={styles.menu}>
+        <MyMenuItem>
+          <Text slot="label">Copy</Text>
+          <Text slot="description">Description</Text>
+          <Keyboard>⌘C</Keyboard>
+        </MyMenuItem>
+        <MyMenuItem>
+          <Text slot="label">Cut</Text>
+          <Text slot="description">Description</Text>
+          <Keyboard>⌘X</Keyboard>
+        </MyMenuItem>
+        <MyMenuItem>
+          <Text slot="label">Paste</Text>
+          <Text slot="description">Description</Text>
+          <Keyboard>⌘V</Keyboard>
+        </MyMenuItem>
+      </Menu>
+    </Popover>
+  </MenuTrigger>
+);