Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .storybook-s2/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ channel.on(DARK_MODE_EVENT_NAME, isDark => document.documentElement.dataset.colo
/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {},
exclude: ['key', 'ref']
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,25 @@
*/

import {ActionButton, ActionButtonGroup, Text} from '../src';
import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from '../stories/utils';
import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
import Cut from '../s2wf-icons/S2_Icon_Cut_20_N.svg';
import type {Meta, StoryObj} from '@storybook/react';
import Paste from '../s2wf-icons/S2_Icon_Paste_20_N.svg';
import {style} from '../style' with { type: 'macro' };

const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'];

const meta: Meta<typeof ActionButtonGroup> = {
component: ActionButtonGroup,
parameters: {
layout: 'centered'
},
decorators: [StaticColorDecorator],
argTypes: {
...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
...categorizeArgTypes('Events', events)
},
args: {...getActionArgs(events)},
title: 'S2 Chromatic/ActionButtonGroup'
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

import {categorizeArgTypes, StaticColorDecorator, StaticColorProvider} from '../stories/utils';
import {categorizeArgTypes, getActionArgs, StaticColorDecorator, StaticColorProvider} from '../stories/utils';
import {generatePowerset} from '@react-spectrum/story-utils';
import type {Meta, StoryObj} from '@storybook/react';
import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
Expand All @@ -19,15 +19,18 @@ import {shortName} from './utils';
import {style} from '../style' with { type: 'macro' };
import {Text, ToggleButton, ToggleButtonProps} from '../src';

const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'];

const meta: Meta<typeof ToggleButton> = {
component: ToggleButton,
parameters: {
layout: 'centered'
},
decorators: [StaticColorDecorator],
argTypes: {
...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
...categorizeArgTypes('Events', events)
},
args: {...getActionArgs(events)},
title: 'S2 Chromatic/ToggleButton'
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,25 @@
*/

import Bold from '../s2wf-icons/S2_Icon_TextBold_20_N.svg';
import {categorizeArgTypes, StaticColorDecorator} from '../stories/utils';
import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from '../stories/utils';
import Italic from '../s2wf-icons/S2_Icon_TextItalic_20_N.svg';
import type {Meta, StoryObj} from '@storybook/react';
import {style} from '../style' with { type: 'macro' };
import {Text, ToggleButton, ToggleButtonGroup} from '../src';
import Underline from '../s2wf-icons/S2_Icon_TextUnderline_20_N.svg';

const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'];

const meta: Meta<typeof ToggleButtonGroup> = {
component: ToggleButtonGroup,
parameters: {
layout: 'centered'
},
decorators: [StaticColorDecorator],
argTypes: {
...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp', 'onChange'])
...categorizeArgTypes('Events', events)
},
args: {...getActionArgs(events)},
title: 'S2 Chromatic/ToggleButtonGroup'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/ActionButton.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@

import {ActionButton, Avatar, NotificationBadge, Provider, Text} from '../src';
import BellIcon from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
import {categorizeArgTypes, StaticColorDecorator} from './utils';
import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from './utils';
import CommentIcon from '../s2wf-icons/S2_Icon_Comment_20_N.svg';
import type {Meta, StoryObj} from '@storybook/react';
import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
import {style} from '../style' with { type: 'macro' };
import './unsafe.css';
import {useNumberFormatter} from 'react-aria';

const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'];

const meta: Meta<typeof ActionButton> = {
component: ActionButton,
parameters: {
Expand All @@ -28,9 +30,10 @@ const meta: Meta<typeof ActionButton> = {
decorators: [StaticColorDecorator],
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp']),
...categorizeArgTypes('Events', events),
children: {table: {disable: true}}
},
args: {...getActionArgs(events)},
title: 'ActionButton'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,22 @@

import {ActionMenu, MenuItem} from '../src';

import {categorizeArgTypes} from './utils';
import {categorizeArgTypes, getActionArgs} from './utils';
import type {Meta, StoryObj} from '@storybook/react';

const events = ['onAction', 'onOpenChange'];

const meta: Meta<typeof ActionMenu<any>> = {
component: ActionMenu,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onAction', 'onOpenChange']),
...categorizeArgTypes('Events', events),
children: {table: {disable: true}}
},
args: {...getActionArgs(events)},
title: 'ActionMenu'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@

import {action} from '@storybook/addon-actions';
import {Button, Text} from '../src';
import {categorizeArgTypes, StaticColorDecorator} from './utils';
import {categorizeArgTypes, getActionArgs, StaticColorDecorator} from './utils';
import type {Meta, StoryObj} from '@storybook/react';
import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
import {style} from '../style/spectrum-theme' with { type: 'macro' };
import {useEffect, useRef, useState} from 'react';

const events = ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp'];

const meta: Meta<typeof Button> = {
component: Button,
parameters: {
Expand All @@ -26,9 +28,10 @@ const meta: Meta<typeof Button> = {
decorators: [StaticColorDecorator],
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onPress', 'onPressChange', 'onPressEnd', 'onPressStart', 'onPressUp']),
...categorizeArgTypes('Events', events),
children: {table: {disable: true}}
},
args: {...getActionArgs(events)},
title: 'Button'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/Calendar.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,23 @@

import {ActionButton, Calendar, CalendarProps} from '../src';
import {CalendarDate, getLocalTimeZone, today} from '@internationalized/date';
import {CalendarSwitcher, categorizeArgTypes} from './utils';
import {CalendarSwitcher, categorizeArgTypes, getActionArgs} from './utils';
import {Custom454Calendar} from '../../../@internationalized/date/tests/customCalendarImpl';
import {DateValue} from 'react-aria';
import type {Meta, StoryObj} from '@storybook/react';
import {ReactElement, useState} from 'react';
import {style} from '../style' with {type: 'macro'};

const events = ['onChange'];

const meta: Meta<typeof Calendar> = {
component: Calendar,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onChange']),
...categorizeArgTypes('Events', events),
errorMessage: {control: {type: 'text'}},
visibleMonths: {
control: {
Expand All @@ -35,6 +37,7 @@ const meta: Meta<typeof Calendar> = {
options: [1, 2, 3]
}
},
args: {...getActionArgs(events)},
title: 'Calendar',
decorators: [
(Story) => (
Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/ColorArea.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,23 @@
* governing permissions and limitations under the License.
*/

import {categorizeArgTypes} from './utils';
import {categorizeArgTypes, getActionArgs} from './utils';
import {ColorArea} from '../src/ColorArea';
import type {Meta, StoryObj} from '@storybook/react';

const events = ['onChange', 'onChangeEnd'] as const;

const meta: Meta<typeof ColorArea> = {
component: ColorArea,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onChange', 'onChangeEnd']),
...categorizeArgTypes('Events', [...events]),
value: {control: {type: 'text'}}
},
args: {...getActionArgs([...events])},
title: 'ColorArea'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/ColorSlider.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,24 @@
* governing permissions and limitations under the License.
*/

import {categorizeArgTypes} from './utils';
import {categorizeArgTypes, getActionArgs} from './utils';

import {ColorSlider} from '../src/ColorSlider';
import type {Meta, StoryObj} from '@storybook/react';

const events = ['onChange', 'onChangeEnd'];

const meta: Meta<typeof ColorSlider> = {
component: ColorSlider,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onChange', 'onChangeEnd']),
...categorizeArgTypes('Events', events),
contextualHelp: {table: {disable: true}}
},
args: {...getActionArgs(events)},
title: 'ColorSlider'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/ColorWheel.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,23 @@
* governing permissions and limitations under the License.
*/

import {categorizeArgTypes} from './utils';
import {categorizeArgTypes, getActionArgs} from './utils';

import {ColorWheel} from '../src/ColorWheel';
import type {Meta, StoryObj} from '@storybook/react';

const events = ['onChange', 'onChangeEnd'];

const meta: Meta<typeof ColorWheel> = {
component: ColorWheel,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onChange', 'onChangeEnd'])
...categorizeArgTypes('Events', events)
},
args: {...getActionArgs(events)},
title: 'ColorWheel'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/ComboBox.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
*/

import {Button, ComboBox, ComboBoxItem, ComboBoxSection, Content, ContextualHelp, Footer, Form, Header, Heading, Link, Text} from '../src';
import {categorizeArgTypes} from './utils';
import {categorizeArgTypes, getActionArgs} from './utils';
import {ComboBoxProps} from 'react-aria-components';
import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
Expand All @@ -20,20 +20,23 @@ import {ReactElement} from 'react';
import {style} from '../style' with {type: 'macro'};
import {useAsyncList} from 'react-stately';

const events = ['onInputChange', 'onOpenChange', 'onSelectionChange', 'onLoadMore'];

const meta: Meta<typeof ComboBox<any>> = {
component: ComboBox,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onInputChange', 'onOpenChange', 'onSelectionChange', 'onLoadMore']),
...categorizeArgTypes('Events', events),
label: {control: {type: 'text'}},
description: {control: {type: 'text'}},
errorMessage: {control: {type: 'text'}},
children: {table: {disable: true}},
contextualHelp: {table: {disable: true}}
},
args: {...getActionArgs(events)},
title: 'ComboBox'
};

Expand Down
7 changes: 5 additions & 2 deletions packages/@react-spectrum/s2/stories/DateField.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,27 @@
*/

import {Button, Content, ContextualHelp, DateField, Footer, Form, Heading, Link, Text} from '../src';
import {CalendarSwitcher, categorizeArgTypes} from './utils';
import {CalendarSwitcher, categorizeArgTypes, getActionArgs} from './utils';
import type {Meta, StoryObj} from '@storybook/react';
import {parseDate, toZoned} from '@internationalized/date';
import {style} from '../style' with {type: 'macro'};

const events = ['onChange'];

const meta: Meta<typeof DateField> = {
component: DateField,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onChange']),
...categorizeArgTypes('Events', events),
label: {control: {type: 'text'}},
description: {control: {type: 'text'}},
errorMessage: {control: {type: 'text'}},
contextualHelp: {table: {disable: true}}
},
args: {...getActionArgs(events)},
title: 'DateField',
decorators: [
(Story) => (
Expand Down
12 changes: 5 additions & 7 deletions packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,21 @@
*/

import {Button, Content, ContextualHelp, DatePicker, Footer, Form, Heading, Link, Text} from '../src';
import {CalendarSwitcher, categorizeArgTypes} from './utils';
import {fn} from '@storybook/test';
import {CalendarSwitcher, categorizeArgTypes, getActionArgs} from './utils';
import type {Meta, StoryObj} from '@storybook/react';
import {parseDate, toZoned} from '@internationalized/date';
import {style} from '../style' with {type: 'macro'};

const events = ['onChange', 'onOpenChange'];

const meta: Meta<typeof DatePicker> = {
component: DatePicker,
parameters: {
layout: 'centered'
},
tags: ['autodocs'],
argTypes: {
...categorizeArgTypes('Events', ['onChange']),
...categorizeArgTypes('Events', events),
label: {control: {type: 'text'}},
description: {control: {type: 'text'}},
errorMessage: {control: {type: 'text'}},
Expand All @@ -36,10 +37,7 @@ const meta: Meta<typeof DatePicker> = {
options: [1, 2, 3]
}
},
args: {
onOpenChange: fn(),
onChange: fn()
},
args: {...getActionArgs(events)},
title: 'DatePicker',
decorators: [
(Story) => (
Expand Down
Loading