Skip to content

Commit 96375f4

Browse files
MichaelDeBoeyMichaelDeBoey
committed
Revert "🔨 Cleanup components package (codesandbox#4506)"
This reverts commit 32b350f
1 parent 40d7518 commit 96375f4

File tree

15 files changed

+90
-118
lines changed

15 files changed

+90
-118
lines changed

‎packages/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"@apollo/react-hooks": "^3.1.3",
7777
"@babel/plugin-transform-destructuring": "^7.5.0",
7878
"@babel/preset-env": "^7.5.5",
79-
"@codesandbox/components": "^0.0.3",
79+
"@codesandbox/components": "0.0.2",
8080
"@codesandbox/executors": "^0.1.0",
8181
"@emmetio/codemirror-plugin": "^0.3.5",
8282
"@sentry/webpack-plugin": "^1.8.0",

‎packages/common/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"dependencies": {
4646
"@babel/plugin-transform-flow-strip-types": "^7.0.0",
4747
"@babel/polyfill": "^7.4.4",
48-
"@codesandbox/components": "^0.0.3",
48+
"@codesandbox/components": "^0.0.2",
4949
"@codesandbox/notifications": "^1.0.6",
5050
"@sentry/browser": "^5.19.0",
5151
"@styled-system/css": "^5.0.23",

‎packages/components/.eslintignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
lib
2-
1+
src/stories

‎packages/components/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
lib
2+
public

‎packages/components/.storybook/addons.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '@storybook/addon-actions/register';
2-
import '@storybook/addon-a11y/register';
32
import '@storybook/addon-knobs/register';
43
import '@storybook/addon-storysource/register';
54
import '@storybook/addon-viewport/register';
6-
import './storybook-addon-styled-component-theme/register';
5+
import '@storybook/addon-a11y/register';
6+
import './storybook-addon-styled-component-theme/register.js';

‎packages/components/.storybook/config.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1+
import React from 'react';
2+
import isChromatic from 'chromatic/isChromatic';
13
import { withKnobs } from '@storybook/addon-knobs';
24
import { withA11y } from '@storybook/addon-a11y';
35
import { addDecorator, addParameters, configure } from '@storybook/react';
46
import { themes } from '@storybook/theming';
5-
import isChromatic from 'chromatic/isChromatic';
6-
import React from 'react';
77
import { createGlobalStyle, ThemeProvider } from 'styled-components';
8-
98
import { makeTheme, getThemes } from '../src/components/ThemeProvider';
10-
119
import { withThemesProvider } from './storybook-addon-styled-component-theme';
1210

1311
type Theme = {
@@ -37,6 +35,8 @@ const viewports = {
3735
// new globals based on theme?
3836
// using sidebar as the styles for body for now 🤷
3937
const GlobalStyle = createGlobalStyle`
38+
39+
4040
html body {
4141
font-family: 'Inter', sans-serif;
4242
-webkit-font-smoothing: auto;
@@ -64,43 +64,45 @@ const GlobalStyle = createGlobalStyle`
6464
a {
6565
color: #40a9f3;
6666
}
67+
6768
}
6869
`;
69-
const allThemes: Theme[] = getThemes();
70-
const vsCodeThemes: Theme[] = allThemes.map(b => makeTheme(b, b.name));
70+
const allThemes = getThemes();
71+
const vsCodeThemes = allThemes.map((b) => makeTheme(b, b.name));
7172

72-
const CodeSandboxBlack = vsCodeThemes.find(
73-
({ name }) => name === 'CodeSandbox Black'
73+
const blackCodesandbox = vsCodeThemes.find(
74+
(theme: Theme) => theme.name === 'CodeSandbox Black'
7475
);
7576

76-
if (isChromatic()) {
77-
const withGlobal = (story: any) => (
78-
<ThemeProvider theme={makeTheme(CodeSandboxBlack, 'default')}>
77+
if (!isChromatic()) {
78+
const withGlobal = (cb: any) => (
79+
<>
7980
<GlobalStyle />
80-
81-
{story()}
82-
</ThemeProvider>
81+
{cb()}
82+
</>
8383
);
8484

85+
const rest = vsCodeThemes.filter(
86+
(theme: Theme) => theme.name !== 'CodeSandbox Black'
87+
);
8588
addDecorator(withGlobal);
89+
addDecorator(withThemesProvider([blackCodesandbox, ...rest]));
8690
} else {
87-
const withGlobal = (story: any) => (
88-
<>
91+
const withGlobal = (cb: any) => (
92+
<ThemeProvider theme={makeTheme(blackCodesandbox, 'default')}>
8993
<GlobalStyle />
90-
91-
{story()}
92-
</>
94+
{cb()}
95+
</ThemeProvider>
9396
);
9497

95-
const rest = vsCodeThemes.filter(({ name }) => name !== 'CodeSandbox Black');
9698
addDecorator(withGlobal);
97-
addDecorator(withThemesProvider([CodeSandboxBlack, ...rest]));
9899
}
99100
addDecorator(withA11y);
100101
addDecorator(withKnobs);
101-
102102
addParameters({ viewport: { viewports } });
103+
104+
// Option defaults.
103105
addParameters({ options: { theme: themes.dark } });
104106

105-
// automatically import all files ending in *.stories.tsx
107+
// automatically import all files ending in *.stories.js
106108
configure(require.context('../src', true, /\.stories\.tsx$/), module);

‎packages/components/.storybook/storybook-addon-styled-component-theme/ThemesProvider.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import addons from '@storybook/addons';
2+
import { List } from 'immutable';
23
import * as React from 'react';
34
import {
45
branch,
@@ -16,15 +17,15 @@ const BaseComponent = ({ theme, Provider, children }) => (
1617
);
1718

1819
export const ThemesProvider = compose(
19-
mapProps(props => {
20+
mapProps((props) => {
2021
const { CustomThemeProvider } = props;
2122
const Provider = CustomThemeProvider ? CustomThemeProvider : ThemeProvider;
2223
return { ...props, Provider };
2324
}),
2425
withState('theme', 'setTheme', null),
2526
withHandlers({
26-
onSelectTheme: ({ setTheme, themes }) => name => {
27-
const theme = themes.find(th => th.name === name);
27+
onSelectTheme: ({ setTheme, themes }) => (name) => {
28+
const theme = themes.find((th) => th.name === name);
2829
setTheme(theme);
2930
},
3031
}),
@@ -41,5 +42,5 @@ export const ThemesProvider = compose(
4142
channel.removeListener('selectTheme', onSelectTheme);
4243
},
4344
}),
44-
branch(props => !props.theme, renderNothing)
45+
branch((props) => !props.theme, renderNothing)
4546
)(BaseComponent);

‎packages/components/.storybook/storybook-addon-styled-component-theme/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export { Themes } from './Themes';
21
export { ThemesProvider } from './ThemesProvider';
2+
export { Themes } from './Themes';
33
export { withThemesProvider } from './withThemesProvider';

‎packages/components/.storybook/storybook-addon-styled-component-theme/register.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import addons from '@storybook/addons';
22
import React from 'react';
3-
43
import { Themes } from './Themes';
54

6-
addons.register('storybook/themes', api => {
5+
addons.register('storybook/themes', (api) => {
76
// Also need to set a unique name to the panel.
87
addons.addPanel('storybook/themes/panel', {
98
title: 'Themes',
10-
render: ({ active }) => (
11-
<Themes
12-
key="storybook-theme-addon"
13-
channel={addons.getChannel()}
14-
api={api}
15-
active={active}
16-
/>
17-
),
9+
render: ({ active }) => {
10+
return (
11+
<Themes
12+
key="storybook-theme-addon"
13+
channel={addons.getChannel()}
14+
api={api}
15+
active={active}
16+
/>
17+
);
18+
},
1819
});
1920
});

‎packages/components/.storybook/webpack.config.js‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,20 @@
1-
module.exports = ({
2-
config: {
3-
module: { rules, ...module },
4-
resolve: { extensions, ...resolve },
5-
...config
6-
},
7-
}) => ({
8-
...config,
9-
module: {
10-
...module,
11-
rules: [
12-
...rules,
1+
module.exports = ({ config }) => {
2+
config.module.rules.push({
3+
test: /\.(ts|tsx)$/,
4+
use: [
135
{
14-
test: /\.(ts|tsx)$/,
15-
use: [
16-
{
17-
loader: require.resolve('babel-loader'),
18-
options: {
19-
presets: [require.resolve('babel-preset-react-app')],
20-
},
21-
},
22-
],
23-
},
24-
{
25-
test: /\.stories\.jsx?$/,
26-
loaders: [require.resolve('@storybook/addon-storysource/loader')],
27-
enforce: 'pre',
6+
loader: require.resolve('babel-loader'),
7+
options: {
8+
presets: [require.resolve('babel-preset-react-app')],
9+
},
2810
},
2911
],
30-
},
31-
resolve: {
32-
...resolve,
33-
extensions: [...extensions, '.ts', '.tsx'],
34-
},
35-
});
12+
});
13+
config.module.rules.push({
14+
test: /\.stories\.jsx?$/,
15+
loaders: [require.resolve('@storybook/addon-storysource/loader')],
16+
enforce: 'pre',
17+
});
18+
config.resolve.extensions.push('.ts', '.tsx');
19+
return config;
20+
};

0 commit comments

Comments
 (0)