Skip to content

Commit 5a0b4fa

Browse files
LFDanLuLFDanLu
authored
Merge S1 and S2 chromatic storybooks (#6965)
Merge S1 and S2 chromatic storybooks
1 parent e87ee28 commit 5a0b4fa

File tree

92 files changed

+2015
-422
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+2015
-422
lines changed

‎.chromatic-fc/.parcelrc

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@
22
"extends": "@parcel/config-default",
33
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
44
"transformers": {
5+
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
6+
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
7+
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
58
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
9+
// Disable PostCSS from running over style macro output
10+
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
611
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
712
"@parcel/transformer-js",
813
"@parcel/transformer-react-refresh-wrap"
9-
]
14+
],
15+
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
1016
}
1117
}

‎.chromatic-fc/constants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ for (let key in themes) {
6262
};
6363
}
6464

65+
export let S2ColorThemes = ['light', 'dark'];
66+
export let S2Backgrounds = ['base', 'layer-1', 'layer-2'];
67+
6568
// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
6669
export let locales = [
6770
{label: 'Auto', value: ''},

‎.chromatic-fc/custom-addons/chromatic/index.js

Lines changed: 62 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import {expressThemes, locales, scales, themes} from '../../constants';
1+
import {expressThemes, locales, S2ColorThemes, scales, themes} from '../../constants';
22
import {makeDecorator} from '@storybook/preview-api';
33
import {Provider, View} from '@adobe/react-spectrum';
4+
import {Provider as S2Provider} from '@react-spectrum/s2';
45
import React, {useEffect} from 'react';
56
import './disableAnimations.css';
67

@@ -15,8 +16,7 @@ export const withChromaticProvider = makeDecorator({
1516
} else {
1617
selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US'];
1718
}
18-
let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
19-
let scalesToRender = options.scales || ['medium'];
19+
2020
let height;
2121
let minHeight;
2222
if(isNaN(options.height)) {
@@ -25,40 +25,70 @@ export const withChromaticProvider = makeDecorator({
2525
height = options.height;
2626
}
2727

28-
let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
29-
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
30-
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
31-
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
28+
if (context.title.includes('S2/')) {
29+
return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
30+
} else {
31+
return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
32+
}
33+
}
34+
});
35+
36+
function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
37+
let colorSchemes = options.colorSchemes || S2ColorThemes;
3238

33-
// 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
34-
return (
35-
<DisableAnimations disableAnimations={options.disableAnimations}>
36-
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
37-
{colorSchemes.map(colorScheme =>
38-
scalesToRender.map(scale =>
39-
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
40-
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
41-
<View margin="size-100">
42-
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
43-
{getStory(context)}
44-
</View>
45-
</Provider>
46-
)
47-
)
48-
)}
49-
{options.express !== false &&
50-
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
39+
return (
40+
<DisableAnimations disableAnimations={options.disableAnimations}>
41+
<div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
42+
{colorSchemes.map(colorScheme =>
43+
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
44+
<S2Provider key={`${colorScheme}_${locale}`} colorScheme={colorScheme} background="base" locale={locale}>
45+
<div style={{margin: '8px'}}>
46+
<h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, base, ${locale}`}</h1>
47+
{getStory(context)}
48+
</div>
49+
</S2Provider>
50+
)
51+
)}
52+
</div>
53+
</DisableAnimations>
54+
)
55+
}
56+
57+
function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) {
58+
let colorSchemes = options.express ? [] : (options.colorSchemes || ['light']);
59+
let scalesToRender = options.scales || ['medium'];
60+
let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
61+
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
62+
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
63+
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
64+
65+
return (
66+
<DisableAnimations disableAnimations={options.disableAnimations}>
67+
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
68+
{colorSchemes.map(colorScheme =>
69+
scalesToRender.map(scale =>
70+
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
71+
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
5172
<View margin="size-100">
52-
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
73+
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
5374
{getStory(context)}
5475
</View>
5576
</Provider>
56-
}
57-
</div>
58-
</DisableAnimations>
59-
)
60-
}
61-
});
77+
)
78+
)
79+
)}
80+
{options.express !== false &&
81+
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
82+
<View margin="size-100">
83+
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
84+
{getStory(context)}
85+
</View>
86+
</Provider>
87+
}
88+
</div>
89+
</DisableAnimations>
90+
)
91+
}
6292

6393
function DisableAnimations({children, disableAnimations}) {
6494
useEffect(() => {

‎.chromatic-fc/main.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ module.exports = {
44
name: "storybook-react-parcel",
55
options: {},
66
},
7-
stories: ['../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}'],
7+
stories: [
8+
'../packages/**/chromatic-fc/**/*.stories.{js,jsx,ts,tsx}',
9+
'../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)'
10+
],
811
addons: process.env.NODE_ENV === 'production' ? [] : [
912
'@storybook/addon-actions',
1013
'@storybook/addon-a11y'

‎.chromatic-fc/preview-head.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,12 @@
134134
<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" />
135135
<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" />
136136

137+
<!--
138+
Load S2 adobe clean VF
139+
-->
140+
<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
141+
<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
142+
137143
<!--
138144
This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
139145
adobe-clean-han-korean, adobe-clean-han-simplified-c, and adobe-clean-han-traditional.

‎.chromatic-fc/preview.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@ configureActions({
1212

1313
export const parameters = {
1414
options: {
15-
storySort: (a, b) => {
16-
return a.title === b.title
17-
? 0
18-
: a.id.localeCompare(b.id, undefined, { numeric: true });
15+
storySort: {
16+
method: 'alphabetical',
17+
order: ['*', 'S2']
1918
}
2019
},
2120
a11y: {},

‎.chromatic/.parcelrc

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@
22
"extends": "@parcel/config-default",
33
"resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
44
"transformers": {
5+
"packages/@react-spectrum/s2/{src,stories}/*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": ["parcel-transformer-react-docgen-typescript", "..."],
6+
"illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
7+
"packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"],
58
"packages/*/*/intl/*.json": ["parcel-transformer-intl"],
9+
// Disable PostCSS from running over style macro output
10+
"packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"],
611
"*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
712
"@parcel/transformer-js",
813
"@parcel/transformer-react-refresh-wrap"
9-
]
14+
],
15+
"packages/@react-spectrum/s2/**/*.svg": ["@parcel/transformer-svg-react"],
1016
}
1117
}

‎.chromatic/constants.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,8 @@ for (let key in themes) {
6262
};
6363
}
6464

65+
export let S2ColorThemes = ['light', 'dark'];
66+
6567
// Based on https://adobe.sharepoint.com/sites/global/SitePages/Languages%20Supported.aspx
6668
export let locales = [
6769
{label: 'Auto', value: ''},

‎.chromatic/custom-addons/chromatic/index.js

Lines changed: 73 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import {expressThemes, locales, scales, themes} from '../../constants';
1+
import {expressThemes, locales, S2Backgrounds, S2ColorThemes, scales, themes} from '../../constants';
22
import {makeDecorator} from '@storybook/preview-api';
33
import {Provider, View} from '@adobe/react-spectrum';
4+
import {Provider as S2Provider} from '@react-spectrum/s2';
45
import React, {useEffect} from 'react';
6+
// TODO: can't seem to use the style macro here...
7+
// import {style} from '../../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
58
import './disableAnimations.css';
69

710
export const withChromaticProvider = makeDecorator({
@@ -15,8 +18,7 @@ export const withChromaticProvider = makeDecorator({
1518
} else {
1619
selectedLocales = options.locales ? locales.map(l => l.value).slice(1) : ['en-US', 'ar-AE'];
1720
}
18-
let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
19-
let scalesToRender = options.scales || Object.keys(scales);
21+
2022
let height;
2123
let minHeight;
2224
if(isNaN(options.height)) {
@@ -25,41 +27,77 @@ export const withChromaticProvider = makeDecorator({
2527
height = options.height;
2628
}
2729

28-
let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
29-
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
30-
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
31-
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
32-
33-
// 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
34-
return (
35-
<DisableAnimations disableAnimations={options.disableAnimations}>
36-
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
37-
{colorSchemes.map(colorScheme =>
38-
scalesToRender.map(scale =>
39-
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
40-
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
41-
<View margin="size-100">
42-
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
43-
{getStory(context)}
44-
</View>
45-
</Provider>
46-
)
47-
)
48-
)}
49-
{options.express !== false &&
50-
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
51-
<View margin="size-100">
52-
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
53-
{getStory(context)}
54-
</View>
55-
</Provider>
56-
}
57-
</div>
58-
</DisableAnimations>
59-
)
30+
if (context.title.includes('S2')) {
31+
return <RenderS2 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
32+
} else {
33+
return <RenderV3 getStory={getStory} context={context} options={options} selectedLocales={selectedLocales} height={height} minHeight={minHeight} />
34+
}
6035
}
6136
});
6237

38+
function RenderS2({getStory, context, options, selectedLocales, height, minHeight}) {
39+
let colorSchemes = options.colorSchemes || S2ColorThemes;
40+
let backgrounds = options.backgrounds || ['base'];
41+
42+
// 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
43+
return (
44+
<DisableAnimations disableAnimations={options.disableAnimations}>
45+
<div style={{display: 'flex', flexDirection: 'column', height, minHeight, width: '90vw'}}>
46+
{colorSchemes.map(colorScheme =>
47+
backgrounds.map(background =>
48+
(colorScheme === 'light' || context.title.includes('RTL') ? selectedLocales : ['en-US']).map(locale =>
49+
<S2Provider key={`${colorScheme}_${background}_${locale}`} background={background} colorScheme={colorScheme} locale={locale}>
50+
<div style={{margin: '8px'}}>
51+
<h1 style={{margin: 0, padding: 0, color: colorScheme === 'dark' ? 'white' : 'black'}}>{`${colorScheme}, ${background}, ${locale}`}</h1>
52+
{getStory(context)}
53+
</div>
54+
</S2Provider>
55+
)
56+
)
57+
)}
58+
</div>
59+
</DisableAnimations>
60+
)
61+
}
62+
63+
function RenderV3({getStory, context, options, selectedLocales, height, minHeight}) {
64+
let colorSchemes = options.express ? [] : (options.colorSchemes || Object.keys(themes));
65+
let scalesToRender = options.scales || Object.keys(scales);
66+
67+
let expressTheme = colorSchemes.length === 1 ? expressThemes[colorSchemes[0]] : expressThemes.light;
68+
let expressColorScheme = colorSchemes.length === 1 ? colorSchemes[0].replace(/est$/, '') : 'light';
69+
let expressScale = scalesToRender.length === 1 ? scalesToRender[0] : 'medium';
70+
let expressLocale = selectedLocales.length === 1 ? selectedLocales[0] : 'en-US';
71+
72+
// 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
73+
return (
74+
<DisableAnimations disableAnimations={options.disableAnimations}>
75+
<div style={{display: 'flex', flexDirection: 'column', height, minHeight}}>
76+
{colorSchemes.map(colorScheme =>
77+
scalesToRender.map(scale =>
78+
(colorScheme === 'light' ? selectedLocales : ['en-US']).map(locale =>
79+
<Provider key={`${colorScheme}_${scale}_${locale}`} theme={themes[colorScheme]} colorScheme={colorScheme.replace(/est$/, '')} scale={scale} locale={locale} typekitId="pbi5ojv">
80+
<View margin="size-100">
81+
<h1 style={{margin: 0, padding: 0}}>{`${colorScheme}, ${scale}, ${locale}`}</h1>
82+
{getStory(context)}
83+
</View>
84+
</Provider>
85+
)
86+
)
87+
)}
88+
{options.express !== false &&
89+
<Provider key="express" theme={expressTheme} colorScheme={expressColorScheme} scale={expressScale} locale={expressLocale} typekitId="pbi5ojv">
90+
<View margin="size-100">
91+
<h1 style={{margin: 0, padding: 0}}>express, {expressColorScheme}, {expressScale}, {expressLocale}</h1>
92+
{getStory(context)}
93+
</View>
94+
</Provider>
95+
}
96+
</div>
97+
</DisableAnimations>
98+
)
99+
}
100+
63101
function DisableAnimations({children, disableAnimations}) {
64102
useEffect(() => {
65103
if (disableAnimations) {

‎.chromatic/main.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ module.exports = {
44
name: "storybook-react-parcel",
55
options: {},
66
},
7-
stories: ['../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)'],
7+
stories: [
8+
'../packages/**/chromatic/**/*.stories.@(js|jsx|ts|tsx)',
9+
'../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)',
10+
'../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
11+
],
812
addons: process.env.NODE_ENV === 'production' ? [] : [
913
'@storybook/addon-actions',
1014
'@storybook/addon-a11y'

0 commit comments

Comments
 (0)