Skip to content

Commit b6505be

Browse files
snowystingersnowystinger
committed
renders v3 and s2
1 parent 7814a35 commit b6505be

File tree

21 files changed

+68
-128
lines changed

21 files changed

+68
-128
lines changed

‎.storybook-s2/custom-addons/provider/index.js

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import React, {useEffect, useState} from 'react';
22
import {addons} from '@storybook/preview-api';
33
import {makeDecorator} from '@storybook/preview-api';
4-
import {getQueryParams} from '@storybook/preview-api';
54
// Importing from src so that HMR works.
6-
// Without this, all HMR updates will bubble through the index.ts and up
5+
// Without this, all HMR updates will bubble through the index.ts and up
76
// to the root instead of stopping at the story files.
8-
import {Provider} from '@react-spectrum/s2/src/Provider';
7+
import {Provider} from '../../../packages/@react-spectrum/s2/src/Provider';
98

109
document.body.style.margin = '0';
1110

12-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
13-
if (k.includes('providerSwitcher-')) {
14-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
15-
}
16-
return acc;
17-
}, {});
18-
1911
function ProviderUpdater(props) {
20-
let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
12+
let params = new URLSearchParams(document.location.search);
13+
let localeParam = params.get('providerSwitcher-locale') || undefined;
14+
let [localeValue, setLocale] = useState(localeParam);
2115

2216
useEffect(() => {
2317
let channel = addons.getChannel();

‎.storybook-s2/custom-addons/provider/register.js

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11

22
import {addons, types} from '@storybook/manager-api';
3-
import {getQueryParams} from '@storybook/preview-api';
43
import {locales} from '../../constants';
54
import React, {useEffect, useState} from 'react';
65

7-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
8-
if (k.includes('providerSwitcher-')) {
9-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
10-
}
11-
return acc;
12-
}, {});
13-
146
function ProviderFieldSetter({api}) {
15-
let [values, setValues] = useState({locale: providerValuesFromUrl.locale || undefined});
7+
let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
8+
let [values, setValues] = useState({locale: localeParam});
169
let channel = addons.getChannel();
1710
let onLocaleChange = (e) => {
1811
let newValue = e.target.value || undefined;

‎.storybook-s2/docs/Illustrations.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import linearIllustrations from '@react-spectrum/s2/spectrum-illustrations/linear/*.tsx';
22
import gradientIllustrations from '@react-spectrum/s2/spectrum-illustrations/gradient/*/*.tsx';
3-
import Paste from '@react-spectrum/s2/s2wf-icons/S2_Icon_Paste_20_N.svg';
3+
import Paste from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Paste_20_N.svg';
44
import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
5-
import {ActionButton, Text} from '@react-spectrum/s2';
5+
import {ActionButton, Radio, RadioGroup} from '@react-spectrum/s2';
66
import {H2, H3, P, Code, Pre, Link} from './typography';
77
import {highlight} from './highlight' with {type: 'macro'};
8-
import { Radio, RadioGroup } from '../../packages/@react-spectrum/s2/src';
98
import { useState } from 'react';
109

1110
export function Illustrations() {

‎.storybook-s2/docs/Intro.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
2-
import {Button, LinkButton, ButtonGroup, Checkbox, Content, Dialog, DialogTrigger, Footer, Header, Heading, Image, InlineAlert, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Switch, Text} from '@react-spectrum/s2';
3-
import NewIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_New_20_N.svg';
4-
import ImgIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Image_20_N.svg';
5-
import CopyIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Copy_20_N.svg';
6-
import CommentTextIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_CommentText_20_N.svg';
7-
import ClockPendingIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_ClockPending_20_N.svg';
8-
import CommunityIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_Community_20_N.svg';
9-
import DeviceTabletIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
10-
import DeviceDesktopIcon from '@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
2+
import {Button, ButtonGroup, Checkbox, Content, Dialog, DialogTrigger, Footer, Header, Heading, Image, InlineAlert, Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger, Switch, Text} from '@react-spectrum/s2';
3+
import NewIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_New_20_N.svg';
4+
import ImgIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Image_20_N.svg';
5+
import CopyIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Copy_20_N.svg';
6+
import CommentTextIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_CommentText_20_N.svg';
7+
import ClockPendingIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_ClockPending_20_N.svg';
8+
import CommunityIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_Community_20_N.svg';
9+
import DeviceTabletIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
10+
import DeviceDesktopIcon from '../../packages/@react-spectrum/s2/s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
1111
import {highlight} from './highlight' with {type: 'macro'};
1212
import {H2, H3, H4, P, Pre, Code, Strong, Link} from './typography';
1313

‎.storybook-s2/preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import '@react-spectrum/s2/src/page';
1+
import '../packages/@react-spectrum/s2/src/page';
22
import { themes } from '@storybook/theming';
33
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
44
import { store } from 'storybook-dark-mode/dist/esm/Tool';

‎.storybook/custom-addons/provider/index.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
import React, {useEffect, useState} from 'react';
22
import {addons} from '@storybook/preview-api';
33
import {makeDecorator} from '@storybook/preview-api';
4-
import {getQueryParams} from '@storybook/preview-api';
54
import {Provider} from '@react-spectrum/provider';
65
import {expressThemes, themes, defaultTheme} from '../../constants';
76

87
document.body.style.margin = '0';
98

10-
const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
11-
if (k.includes('providerSwitcher-')) {
12-
return { ...acc, [k.replace('providerSwitcher-', '')]: v };
13-
}
14-
return acc;
15-
}, {});
16-
179
function ProviderUpdater(props) {
18-
let [localeValue, setLocale] = useState(providerValuesFromUrl.locale || undefined);
19-
let [themeValue, setTheme] = useState(providerValuesFromUrl.theme || undefined);
20-
let [scaleValue, setScale] = useState(providerValuesFromUrl.scale || undefined);
21-
let [expressValue, setExpress] = useState(providerValuesFromUrl.express === 'true');
10+
let params = new URLSearchParams(document.location.search);
11+
let localeParam = params.get("providerSwitcher-locale") || undefined;
12+
let [localeValue, setLocale] = useState(localeParam);
13+
let themeParam = params.get("providerSwitcher-theme") || undefined;
14+
let [themeValue, setTheme] = useState(themeParam);
15+
let scaleParam = params.get("providerSwitcher-scale") || undefined;
16+
let [scaleValue, setScale] = useState(scaleParam);
17+
let expressParam = params.get("providerSwitcher-express") || undefined;
18+
let [expressValue, setExpress] = useState(expressParam === 'true');
2219
let [storyReady, setStoryReady] = useState(window.parent === window || window.parent !== window.top); // reduce content flash because it takes a moment to get the provider details
2320
// Typically themes are provided with both light + dark, and both scales.
2421
// To build our selector to see all themes, we need to hack it a bit.
@@ -27,6 +24,7 @@ function ProviderUpdater(props) {
2724
useEffect(() => {
2825
let channel = addons.getChannel();
2926
let providerUpdate = (event) => {
27+
console.log('providerUpdate', event);
3028
setLocale(event.locale);
3129
setTheme(event.theme === 'Auto' ? undefined : event.theme);
3230
setScale(event.scale === 'Auto' ? undefined : event.scale);
@@ -42,6 +40,7 @@ function ProviderUpdater(props) {
4240
}, []);
4341

4442
if (props.options.mainElement == null) {
43+
console.log('mainElement is null', storyReady);
4544
return (
4645
<Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
4746
<main>
@@ -50,6 +49,7 @@ function ProviderUpdater(props) {
5049
</Provider>
5150
);
5251
} else {
52+
console.log('mainElement is not null');
5353
return (
5454
<Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue}>
5555
{storyReady && props.children}

‎.storybook/custom-addons/provider/register.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {addons, types} from '@storybook/manager-api';
2-
import {useParameter} from '@storybook/preview-api';
32
import {locales} from '../../constants';
43
import React, {useEffect, useState} from 'react';
54

@@ -30,12 +29,16 @@ let TOAST_POSITIONS = [
3029
];
3130

3231
function ProviderFieldSetter({api}) {
32+
let localeParam = api.getQueryParam('providerSwitcher-locale') || undefined;
33+
let themeParam = api.getQueryParam('providerSwitcher-theme') || undefined;
34+
let scaleParam = api.getQueryParam('providerSwitcher-scale') || undefined;
35+
let expressParam = api.getQueryParam('providerSwitcher-express') || undefined;
3336

3437
let [values, setValues] = useState({
35-
locale: useParameter('providerSwitcher-locale') || undefined,
36-
theme: useParameter('providerSwitcher-theme') || undefined,
37-
scale: useParameter('providerSwitcher-scale') || undefined,
38-
express: useParameter('providerSwitcher-express') === 'true'
38+
locale: localeParam,
39+
theme: themeParam,
40+
scale: scaleParam,
41+
express: expressParam === 'true'
3942
});
4043
let channel = addons.getChannel();
4144
let onLocaleChange = (e) => {
@@ -72,6 +75,7 @@ function ProviderFieldSetter({api}) {
7275
};
7376
useEffect(() => {
7477
let storySwapped = () => {
78+
console.log('storySwapped', values);
7579
channel.emit('provider/updated', values);
7680
};
7781
channel.on('rsp/ready-for-update', storySwapped);
@@ -118,6 +122,7 @@ function ProviderFieldSetter({api}) {
118122
}
119123

120124
addons.register('ProviderSwitcher', (api) => {
125+
console.log('ProviderSwitcher registering');
121126
addons.add('ProviderSwitcher', {
122127
title: 'viewport',
123128
type: types.TOOL,

‎.storybook/custom-addons/scrolling/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {addons} from '@storybook/preview-api';
22
import clsx from 'clsx';
3-
import {getQueryParams} from '@storybook/preview-api';
43
import React, {useEffect, useState} from 'react';
54

65
function ScrollingDecorator(props) {
76
let {children} = props;
8-
let [isScrolling, setScrolling] = useState(getQueryParams()?.scrolling === 'true' || false);
7+
let params = new URLSearchParams(document.location.search);
8+
let scrolling = params.get('scrolling') || undefined;
9+
let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
910

1011
useEffect(() => {
1112
let channel = addons.getChannel();

‎.storybook/custom-addons/scrolling/register.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import {addons, types} from '@storybook/manager-api';
2-
import {useParameter} from '@storybook/preview-api';
32
import React, {useEffect, useState} from 'react';
43

54
const ScrollingToolbar = ({api}) => {
65
let channel = addons.getChannel();
7-
let scrolling = useParameter('scrolling');
6+
let scrolling = api.getQueryParam('scrolling');
87
let [isScrolling, setScrolling] = useState(scrolling === 'true' || false);
98
let onChange = () => {
109
setScrolling((old) => {

‎.storybook/custom-addons/strictmode/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import {addons, makeDecorator} from '@storybook/preview-api';
2-
import {getQueryParams} from '@storybook/preview-api';
32
import React, {StrictMode, useEffect, useState} from 'react';
43

54
function StrictModeDecorator(props) {
65
let {children} = props;
7-
let [isStrict, setStrict] = useState(getQueryParams()?.strict !== 'false');
6+
let params = new URLSearchParams(document.location.search);
7+
let strictParam = params.get("strict") || undefined;
8+
let [isStrict, setStrict] = useState(strictParam !== 'false');
89

910
useEffect(() => {
1011
let channel = addons.getChannel();

0 commit comments

Comments
 (0)