Skip to content

Merge S1 and S2 chromatic storybooks #6965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
snowystinger merged 15 commits into from
Sep 24, 2024
Merged

Merge S1 and S2 chromatic storybooks #6965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7525e66
roughly got the chromatic stories for S1 and S2 working
LFDanLu Aug 27, 2024
838482b
Add variable font and update titles
LFDanLu Aug 28, 2024
64731a0
updating FC storybook too
LFDanLu Aug 28, 2024
391f2d4
move s2 stories into s2 sub category for chromatic merge
LFDanLu Aug 29, 2024
1df6f3d
update chromatic forced colors storybook order too
LFDanLu Aug 29, 2024
72b86e1
use S2 provider for s2 chromatic
LFDanLu Aug 30, 2024
2105607
remove s2 storys that dont have finished components yet from snapshots
LFDanLu Aug 30, 2024
1efa254
Merge branch 'main' into combine_chromatic
LFDanLu Sep 5, 2024
6c9fb4b
Merge branch 'main' of github.com:adobe/react-spectrum into combine_c…
LFDanLu Sep 6, 2024
28ffdae
test delay
LFDanLu Sep 6, 2024
058e425
longer delay
LFDanLu Sep 6, 2024
1cee66f
remove non implemented stories, opt into layers, fix breadcrumb story…
LFDanLu Sep 9, 2024
99b388e
remove test delay
LFDanLu Sep 17, 2024
06be29b
Improve S2 chromatic story coverage (#6999)
LFDanLu Sep 23, 2024
46fc929
Merge branch 'main' into combine_chromatic
snowystinger Sep 24, 2024
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
8 changes: 7 additions & 1 deletion .chromatic-fc/.parcelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,16 @@
"extends": "@parcel/config-default",
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
"transformers": {
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
// Disable PostCSS from running over style macro output
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"@parcel/transformer-js",
"@parcel/transformer-react-refresh-wrap"
]
],
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
}
}
3 changes: 3 additions & 0 deletions .chromatic-fc/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ for (let key in themes) {
};
}

export let S2ColorThemes = ['light', 'dark'];
export let S2Backgrounds = ['base', 'layer-1', 'layer-2'];

// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
export let locales = [
{label: 'Auto', value: ''},
Expand Down
94 changes: 62 additions & 32 deletions .chromatic-fc/custom-addons/chromatic/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {expressThemes, locales, scales, themes} from '../../constants';
import {expressThemes, locales, S2ColorThemes, scales, themes} from '../../constants';
import {makeDecorator} from '@storybook/preview-api';
import {Provider, View} from '@adobe/react-spectrum';
import {Provider as S2Provider} from '@react-spectrum/s2';
import React, {useEffect} from 'react';
import './disableAnimations.css';

Expand All @@ -15,8 +16,7 @@ export const withChromaticProvider = makeDecorator({
} else {
selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US'];
}
let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
let scalesToRender = options.scales || ['medium'];

let height;
let minHeight;
if(isNaN(options.height)) {
Expand All @@ -25,40 +25,70 @@ export const withChromaticProvider = makeDecorator({
height = options.height;
}

let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
if (context.title.includes('S2/')) {
return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
} else {
return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
}
}
});

function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
let colorSchemes = options.colorSchemes || S2ColorThemes;

// do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
return (
<DisableAnimations disableAnimations={options.disableAnimations}>
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
{colorSchemes.map(colorScheme =>
scalesToRender.map(scale =>
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
{getStory(context)}
</View>
</Provider>
)
)
)}
{options.express !== false &&
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
return (
<DisableAnimations disableAnimations={options.disableAnimations}>
<div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
{colorSchemes.map(colorScheme =>
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
<S2Provider key={`${colorScheme}_${locale}`} colorScheme={colorScheme} background="base" locale={locale}>
<div style={{margin: '8px'}}>
<h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, base, ${locale}`}</h1>
{getStory(context)}
</div>
</S2Provider>
)
)}
</div>
</DisableAnimations>
)
}

function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) {
let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
let scalesToRender = options.scales || ['medium'];
let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';

return (
<DisableAnimations disableAnimations={options.disableAnimations}>
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
{colorSchemes.map(colorScheme =>
scalesToRender.map(scale =>
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
{getStory(context)}
</View>
</Provider>
}
</div>
</DisableAnimations>
)
}
});
)
)
)}
{options.express !== false &&
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
{getStory(context)}
</View>
</Provider>
}
</div>
</DisableAnimations>
)
}

function DisableAnimations({children, disableAnimations}) {
useEffect(() => {
Expand Down
5 changes: 4 additions & 1 deletion .chromatic-fc/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ module.exports = {
name: "storybook-react-parcel",
options: {},
},
stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
stories: [
'../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}',
'../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
],
addons: process.env.NODE_ENV === 'production' ? [] : [
'@storybook/addon-actions',
'@storybook/addon-a11y'
Expand Down
6 changes: 6 additions & 0 deletions .chromatic-fc/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,12 @@
<link rel="preload" href="https://use.typekit.net/af/838a89/00000000000000007735dab9/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />
<link rel="preload" href="https://use.typekit.net/af/758ab2/00000000000000007735dabe/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />

<!--
Load S2 adobe clean VF
-->
<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">

<!--
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
Expand Down
7 changes: 3 additions & 4 deletions .chromatic-fc/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ configureActions({

export const parameters = {
options: {
storySort: (a, b) => {
return a.title === b.title
? 0
: a.id.localeCompare(b.id, undefined, { numeric: true });
storySort: {
method: 'alphabetical',
order: ['*', 'S2']
}
},
a11y: {},
Expand Down
8 changes: 7 additions & 1 deletion .chromatic/.parcelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,16 @@
"extends": "@parcel/config-default",
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
"transformers": {
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
// Disable PostCSS from running over style macro output
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
"@parcel/transformer-js",
"@parcel/transformer-react-refresh-wrap"
]
],
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
}
}
2 changes: 2 additions & 0 deletions .chromatic/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ for (let key in themes) {
};
}

export let S2ColorThemes = ['light', 'dark'];

// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
export let locales = [
{label: 'Auto', value: ''},
Expand Down
108 changes: 73 additions & 35 deletions .chromatic/custom-addons/chromatic/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import {expressThemes, locales, scales, themes} from '../../constants';
import {expressThemes, locales, S2Backgrounds, S2ColorThemes, scales, themes} from '../../constants';
import {makeDecorator} from '@storybook/preview-api';
import {Provider, View} from '@adobe/react-spectrum';
import {Provider as S2Provider} from '@react-spectrum/s2';
import React, {useEffect} from 'react';
// TODO: can't seem to use the style macro here...
// import {style} from '../../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
Comment on lines +6 to +7
Copy link
Copy Markdown
Member Author

@LFDanLu LFDanLu Aug 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not exactly sure why the macro doesn't work here, ideally I'd use if for some of the divs below

Copy link
Copy Markdown
Member

@snowystinger snowystinger Sep 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can't import directly from @react-spectrum/s2 either? instead of the relative path?

Copy link
Copy Markdown
Member Author

@LFDanLu LFDanLu Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep, doing that returns an error of

@parcel/transformer-js: Error loading macro: Could not resolve module "@react-spectrum/s2/style" from 
"/Users/danilu/dev/react-spectrum/.chromatic/custom-addons/chromatic/index.js"

The relative path way returns an error of

@parcel/core: Failed to resolve '0' from './.chromatic/custom-addons/chromatic/index.js'
@parcel/resolver-default: Cannot find module '0'

I haven't had time to dig into too deeply but its not a huge deal IMO since it is just some padding/div wrappers for story layout

Copy link
Copy Markdown
Member

@snowystinger snowystinger Sep 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

o, maybe this is loaded through another bundler, storybook UI has one vs the one used for stories

import './disableAnimations.css';

export const withChromaticProvider = makeDecorator({
Expand All @@ -15,8 +18,7 @@ export const withChromaticProvider = makeDecorator({
} else {
selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
}
let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
let scalesToRender = options.scales || Object.keys(scales);

let height;
let minHeight;
if(isNaN(options.height)) {
Expand All @@ -25,41 +27,77 @@ export const withChromaticProvider = makeDecorator({
height = options.height;
}

let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';

// do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
return (
<DisableAnimations disableAnimations={options.disableAnimations}>
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
{colorSchemes.map(colorScheme =>
scalesToRender.map(scale =>
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
{getStory(context)}
</View>
</Provider>
)
)
)}
{options.express !== false &&
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
{getStory(context)}
</View>
</Provider>
}
</div>
</DisableAnimations>
)
if (context.title.includes('S2')) {
return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
} else {
return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
}
}
});

function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
Copy link
Copy Markdown
Collaborator

@ktabors ktabors Sep 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you make this into a shared component that .chromatic-fc and .chromatic both use? I assume there is no way you could make this general enough to make it not specific to s2 or RSPv3, the s2 or RSP3 parts are passed in, or toggles between them based on a property? It's just a big ugly block of code getting repeated. It's probably not worth the effort to refactor it this way.

As part of this, I was wondering if making it a component would move the style macro import out of this file and into another file where it might work.

Copy link
Copy Markdown
Member Author

@LFDanLu LFDanLu Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for now I'll leave it as its own block until I figure out the full set of differences when I add the powerset prop combination stories for s2, but yeah it would be nice to unify this

let colorSchemes = options.colorSchemes || S2ColorThemes;
let backgrounds = options.backgrounds || ['base'];

// TODO: there is perhaps some things that can still be shared between the two renders but figured it be easiest to just split them out for the most part
Copy link
Copy Markdown
Member

@snowystinger snowystinger Sep 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can remove todo

return (
<DisableAnimations disableAnimations={options.disableAnimations}>
<div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
{colorSchemes.map(colorScheme =>
backgrounds.map(background =>
(colorScheme === 'light' || context.title.includes('RTL') ? selectedLocales : ['en-US']).map(locale =>
<S2Provider key={`${colorScheme}_${background}_${locale}`} background={background} colorScheme={colorScheme} locale={locale}>
<div style={{margin: '8px'}}>
<h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, ${background}, ${locale}`}</h1>
{getStory(context)}
</div>
</S2Provider>
)
)
)}
</div>
</DisableAnimations>
)
}

function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) {
let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
let scalesToRender = options.scales || Object.keys(scales);

let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';

// do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other
return (
<DisableAnimations disableAnimations={options.disableAnimations}>
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
{colorSchemes.map(colorScheme =>
scalesToRender.map(scale =>
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
{getStory(context)}
</View>
</Provider>
)
)
)}
{options.express !== false &&
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
<View margin="size-100">
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
{getStory(context)}
</View>
</Provider>
}
</div>
</DisableAnimations>
)
}

function DisableAnimations({children, disableAnimations}) {
useEffect(() => {
if (disableAnimations) {
Expand Down
6 changes: 5 additions & 1 deletion .chromatic/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ module.exports = {
name: "storybook-react-parcel",
options: {},
},
stories: ['../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)'],
stories: [
'../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
'../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)',
'../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
],
addons: process.env.NODE_ENV === 'production' ? [] : [
'@storybook/addon-actions',
'@storybook/addon-a11y'
Expand Down
7 changes: 7 additions & 0 deletions .chromatic/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,13 @@
<link rel="preload" href="https://use.typekit.net/af/838a89/00000000000000007735dab9/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />
<link rel="preload" href="https://use.typekit.net/af/758ab2/00000000000000007735dabe/30/m?features=ALL&v=4&chunks=511&order=0" as="font" crossorigin="anonymous" />


<!--
Load S2 adobe clean VF
-->
<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">

<!--
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.
Expand Down
7 changes: 3 additions & 4 deletions .chromatic/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ configureActions({

export const parameters = {
options: {
storySort: (a, b) => {
return a.title === b.title
? 0
: a.id.localeCompare(b.id, undefined, { numeric: true });
storySort: {
method: 'alphabetical',
order: ['*', 'S2', 'S2 Chromatic']
}
},
a11y: {},
Expand Down
Loading