Skip to content

Commit 703cad3

Browse files
shiftypSaraVieira
shiftyp
authored and
SaraVieira
committed
Added @storybook/react dependency to common with basic story ex… (codesandbox#2227)
* Added @storybook/react dependency to common with basic story examples * Additional stories for @codesandbox/common
1 parent 79a0369 commit 703cad3

File tree

10 files changed

+257
-1
lines changed

10 files changed

+257
-1
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"start:home": "yarn build:deps && yarn start:home:fast",
2525
"start:home:fast": "cd packages/homepage && yarn start",
2626
"start:test": "lerna run start:test --scope app --stream",
27+
"start:storybook:common": "lerna run start:storybook --scope=@codesandbox/common --stream",
2728
"start:dev_api": "lerna run start:dev_api --scope app --stream",
2829
"test": "lerna run test --ignore codesandbox-browserfs",
2930
"test:integrations": "lerna exec --scope app --stream -- yarn test:integrations",

‎packages/common/.storybook/addons.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('@storybook/addon-actions/register');

‎packages/common/.storybook/config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { configure, addDecorator } from '@storybook/react';
2+
3+
// automatically import all files ending in *.stories.tsx
4+
const req = require.context('../src', true, /.stories.tsx$/);
5+
6+
function loadStories() {
7+
req.keys().forEach(req);
8+
}
9+
10+
configure(loadStories, module);

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = ({ config }) => {
2+
config.module.rules.push({
3+
test: /\.(ts|tsx)$/,
4+
use: [
5+
{
6+
loader: require.resolve('babel-loader'),
7+
options: {
8+
presets: [require.resolve('babel-preset-react-app')],
9+
},
10+
},
11+
],
12+
});
13+
config.resolve.extensions.push('.ts', '.tsx');
14+
return config;
15+
};

‎packages/common/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"test": "jest",
1515
"clean": "rimraf lib && yarn rimraf node_modules/@types/react-native",
1616
"start": "(yarn tsc --watch & yarn babel src --out-dir lib --watch & yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib --watch)",
17+
"start:storybook": "start-storybook",
1718
"build": "yarn clean && yarn tsc && yarn babel src --out-dir lib && yarn cpx \"src/**/*.{css,svg,png,jpg}\" lib",
1819
"build:dev": "yarn build",
1920
"prepublish": "yarn build"
@@ -46,14 +47,18 @@
4647
"devDependencies": {
4748
"@babel/cli": "^7.2.3",
4849
"@babel/core": "^7.3.4",
50+
"@storybook/addon-actions": "^5.1.9",
51+
"@storybook/react": "^5.1.9",
4952
"@types/color": "0.12.1",
5053
"@types/humps": "^1.1.2",
5154
"@types/jest": "^24.0.9",
5255
"@types/lodash": "^4.14.123",
5356
"@types/react": "^16.8.12",
5457
"@types/react-icons": "^2.2.7",
58+
"@types/storybook__react": "^4.0.2",
5559
"@types/styled-components": "^4.1.13",
5660
"babel-jest": "^23.6.0",
61+
"babel-loader": "^8.0.6",
5762
"cpx": "^1.5.0",
5863
"jest": "^21.2.1",
5964
"rimraf": "^2.6.3",

‎packages/common/src/components/Button/index.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import { action } from '@storybook/addon-actions';
4+
import { Button } from './';
5+
6+
const stories = storiesOf('components/Button', module);
7+
8+
stories.add('Basic button with text', () => (
9+
<Button onClick={action('onClick')}>Text</Button>
10+
));

‎packages/common/src/components/SandboxCard/fixtures.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { Sandbox } from './';
2+
3+
export const sandbox = (config: Partial<Sandbox> = {}): Sandbox => ({
4+
id: '1234',
5+
title: 'Test Sandbox',
6+
description: 'A test sandbox',
7+
author: {
8+
username: 'Test User',
9+
avatar_url: 'https://placekitten.com/g/200/200',
10+
},
11+
tags: ['Tag 1', 'Tag 2', 'Tag 3'],
12+
template: 'create-react-app-typescript',
13+
screenshot_url: 'https://placekitten.com/g/1200/300',
14+
view_count: 100,
15+
fork_count: 100,
16+
like_count: 100,
17+
...config,
18+
});
19+
20+
export const popularSandbox = (config: Partial<Sandbox> = {}): Sandbox =>
21+
sandbox({
22+
view_count: 999999999,
23+
fork_count: 999999999,
24+
like_count: 999999999,
25+
...config,
26+
});
27+
28+
export const sandboxWithManyTags = (config: Partial<Sandbox> = {}): Sandbox =>
29+
sandbox({
30+
tags: [
31+
'tag1',
32+
'tag2',
33+
'tag3',
34+
'tag4',
35+
'tag5',
36+
'tag6',
37+
'tag7',
38+
'tag8',
39+
'tag9',
40+
'tag10',
41+
'tag11',
42+
'tag12',
43+
'tag13',
44+
'tag14',
45+
'tag16',
46+
'tag17',
47+
'tag18',
48+
'tag19',
49+
'tag20',
50+
'tag21',
51+
'tag22',
52+
'tag23',
53+
'tag24',
54+
'tag25',
55+
'tag26',
56+
'tag27',
57+
'tag28',
58+
'tag29',
59+
'tag30',
60+
'tag31',
61+
'tag32',
62+
'tag33',
63+
'tag34',
64+
'tag35',
65+
'tag36',
66+
'tag37',
67+
'tag38',
68+
'tag39',
69+
'tag40',
70+
'tag41',
71+
'tag42',
72+
'tag43',
73+
'tag44',
74+
'tag45',
75+
'tag46',
76+
'tag47',
77+
'tag48',
78+
'tag49',
79+
],
80+
});
81+
82+
export const sandboxWithLongTitle = (config: Partial<Sandbox> = {}): Sandbox =>
83+
sandbox({
84+
title:
85+
'This is a really really really really really really really really really really really really really really long title',
86+
...config,
87+
});
88+
89+
export const sandboxWithLongDescription = (
90+
config: Partial<Sandbox> = {}
91+
): Sandbox =>
92+
sandbox({
93+
description:
94+
'This is a really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long description',
95+
...config,
96+
});
97+
98+
export const sandboxWithNullAuthor = (config: Partial<Sandbox> = {}): Sandbox =>
99+
sandbox({
100+
author: null,
101+
});
102+
103+
export const sandboxWithUndefinedAuthor = (
104+
config: Partial<Sandbox> = {}
105+
): Sandbox =>
106+
sandbox({
107+
author: undefined,
108+
});
109+
110+
export const sandboxWithNullScreenshotUrl = (
111+
config: Partial<Sandbox> = {}
112+
): Sandbox =>
113+
sandbox({
114+
screenshot_url: null,
115+
});
116+
117+
export const sandboxWithUndefinedScreenshotUrl = (
118+
config: Partial<Sandbox> = {}
119+
): Sandbox =>
120+
sandbox({
121+
screenshot_url: undefined,
122+
});

‎packages/common/src/components/SandboxCard/index.stories.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import { action } from '@storybook/addon-actions';
4+
import SandboxCard, { Props } from './';
5+
import * as fake from './fixtures';
6+
import { ThemeDecorator } from '../../stories/decorators';
7+
8+
const stories = storiesOf('components/SandboxCard', module).addDecorator(
9+
ThemeDecorator
10+
);
11+
12+
const createSandboxStory = ({
13+
sandbox = fake.sandbox(),
14+
selectSandbox = action('selectSandbox'),
15+
small,
16+
noHeight,
17+
defaultHeight,
18+
noMargin,
19+
}: Partial<Props>) => () => (
20+
<SandboxCard
21+
sandbox={sandbox}
22+
selectSandbox={selectSandbox}
23+
small={small}
24+
noHeight={noHeight}
25+
defaultHeight={defaultHeight}
26+
noMargin={noMargin}
27+
/>
28+
);
29+
30+
stories.add('basic', createSandboxStory({}));
31+
32+
stories.add('small', createSandboxStory({ small: true }));
33+
34+
stories.add('no height', createSandboxStory({ noHeight: true }));
35+
36+
stories.add('default height', createSandboxStory({ defaultHeight: 500 }));
37+
38+
stories.add('no margin', createSandboxStory({ noMargin: true }));
39+
40+
stories.add('popular', createSandboxStory({ sandbox: fake.popularSandbox() }));
41+
42+
stories.add(
43+
'many tags',
44+
createSandboxStory({ sandbox: fake.sandboxWithManyTags() })
45+
);
46+
47+
stories.add(
48+
'long title',
49+
createSandboxStory({ sandbox: fake.sandboxWithLongTitle() })
50+
);
51+
52+
stories.add(
53+
'long description',
54+
createSandboxStory({
55+
sandbox: fake.sandboxWithLongDescription(),
56+
})
57+
);
58+
59+
stories.add(
60+
'null author',
61+
createSandboxStory({
62+
sandbox: fake.sandboxWithNullAuthor(),
63+
})
64+
);
65+
66+
stories.add(
67+
'undefined author',
68+
createSandboxStory({
69+
sandbox: fake.sandboxWithUndefinedAuthor(),
70+
})
71+
);
72+
73+
stories.add(
74+
'null screenshot url',
75+
createSandboxStory({
76+
sandbox: fake.sandboxWithNullScreenshotUrl(),
77+
})
78+
);
79+
80+
stories.add(
81+
'undefined screenshot url',
82+
createSandboxStory({
83+
sandbox: fake.sandboxWithUndefinedScreenshotUrl(),
84+
})
85+
);

‎packages/common/src/components/SandboxCard/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import Tags from '../Tags';
2727
const getScreenshot = (id: string) =>
2828
`https://codesandbox.io/api/v1/sandboxes/${id}/screenshot.png`;
2929

30-
interface Sandbox {
30+
export interface Sandbox {
3131
title: string;
3232
description: string;
3333
tags: string[];

‎packages/common/src/stories/decorators.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
import { ThemeProvider } from 'styled-components';
3+
import theme from '../theme';
4+
5+
export const ThemeDecorator = (fn: () => JSX.Element) => (
6+
<ThemeProvider theme={theme}>{fn()}</ThemeProvider>
7+
);

0 commit comments

Comments
 (0)