Skip to content

Commit 32b350f

Browse files
MichaelDeBoeySaraVieira
MichaelDeBoey
and
SaraVieira
authored
🔨 Cleanup components package (codesandbox#4506)
Co-authored-by: Sara Vieira <hey@iamsaravieira.com>
1 parent 557249c commit 32b350f

File tree

15 files changed

+103
-81
lines changed

15 files changed

+103
-81
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.2",
79+
"@codesandbox/components": "^0.0.3",
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.2",
48+
"@codesandbox/components": "^0.0.3",
4949
"@codesandbox/notifications": "^1.0.6",
5050
"@sentry/browser": "^5.19.0",
5151
"@styled-system/css": "^5.0.23",

‎packages/components/.eslintignore‎

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

‎packages/components/.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
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';
23
import '@storybook/addon-knobs/register';
34
import '@storybook/addon-storysource/register';
45
import '@storybook/addon-viewport/register';
5-
import '@storybook/addon-a11y/register';
6-
import './storybook-addon-styled-component-theme/register.js';
6+
import './storybook-addon-styled-component-theme/register';

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

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

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

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

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

85-
const rest = vsCodeThemes.filter(
86-
(theme: Theme) => theme.name !== 'CodeSandbox Black'
81+
{story()}
82+
</ThemeProvider>
8783
);
84+
8885
addDecorator(withGlobal);
89-
addDecorator(withThemesProvider([blackCodesandbox, ...rest]));
9086
} else {
91-
const withGlobal = (cb: any) => (
92-
<ThemeProvider theme={makeTheme(blackCodesandbox, 'default')}>
87+
const withGlobal = (story: any) => (
88+
<>
9389
<GlobalStyle />
94-
{cb()}
95-
</ThemeProvider>
90+
91+
{story()}
92+
</>
9693
);
9794

95+
const rest = vsCodeThemes.filter(({ name }) => name !== 'CodeSandbox Black');
9896
addDecorator(withGlobal);
97+
addDecorator(withThemesProvider([CodeSandboxBlack, ...rest]));
9998
}
10099
addDecorator(withA11y);
101100
addDecorator(withKnobs);
102-
addParameters({ viewport: { viewports } });
103101

104-
// Option defaults.
102+
addParameters({ viewport: { viewports } });
105103
addParameters({ options: { theme: themes.dark } });
106104

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

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import addons from '@storybook/addons';
2-
import { List } from 'immutable';
32
import * as React from 'react';
43
import {
54
branch,

‎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 { ThemesProvider } from './ThemesProvider';
21
export { Themes } from './Themes';
2+
export { ThemesProvider } from './ThemesProvider';
33
export { withThemesProvider } from './withThemesProvider';

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

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

56
addons.register('storybook/themes', api => {
67
// Also need to set a unique name to the panel.
78
addons.addPanel('storybook/themes/panel', {
89
title: 'Themes',
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-
},
10+
render: ({ active }) => (
11+
<Themes
12+
key="storybook-theme-addon"
13+
channel={addons.getChannel()}
14+
api={api}
15+
active={active}
16+
/>
17+
),
1918
});
2019
});

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

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,35 @@
1-
module.exports = ({ config }) => {
2-
config.module.rules.push({
3-
test: /\.(ts|tsx)$/,
4-
use: [
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,
513
{
6-
loader: require.resolve('babel-loader'),
7-
options: {
8-
presets: [require.resolve('babel-preset-react-app')],
9-
},
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',
1028
},
1129
],
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-
};
30+
},
31+
resolve: {
32+
...resolve,
33+
extensions: [...extensions, '.ts', '.tsx'],
34+
},
35+
});

0 commit comments

Comments
 (0)