Skip to content

Commit af11739

Browse files
SaraVieiraSaraVieira
authored
more storybook (codesandbox#2239)
* more storybook * fix types * Apply suggestions from code review Co-Authored-By: Michaël De Boey <[email protected]> * clean code * Added knobs and additional stories (codesandbox#2247) * Added knobs to sandboxcard stories * Refactored knobbedSandbox * Refactored knobbedSandbox some more * Changes to knobs for author to ensure they're shown even when original prop is not passed * removed bad import * Fixed bad import completely * moved template types to fixtures * Fixed empty string edge case in knobbedAuthor * renamed functions * completed rename * Working on flex stories * Removed position: absolute from content in flex stories. Oops * Refined flex stories: * Added knobs for content sizes * Applied comments from base code review * remove duplicate * upfaqte lock file
1 parent 1c76913 commit af11739

File tree

17 files changed

+580
-75
lines changed

17 files changed

+580
-75
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +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",
27+
"start:storybook": "lerna run start:storybook --scope=@codesandbox/common --stream",
2828
"start:dev_api": "lerna run start:dev_api --scope app --stream",
2929
"test": "lerna run test --ignore codesandbox-browserfs",
3030
"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
@@ -1 +1,2 @@
11
require('@storybook/addon-actions/register');
2+
require('@storybook/addon-knobs/register');

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
1+
import React from 'react';
12
import { configure, addDecorator } from '@storybook/react';
3+
import { addParameters } from '@storybook/react';
4+
import { themes } from '@storybook/theming';
5+
6+
import global from '../src/global.css';
7+
import { createGlobalStyle } from 'styled-components';
8+
9+
const GlobalStyle = createGlobalStyle`
10+
${global}
11+
`;
12+
13+
const withGlobal = cb => (
14+
<React.Fragment>
15+
<GlobalStyle />
16+
{cb()}
17+
</React.Fragment>
18+
);
19+
20+
// Option defaults.
21+
addParameters({
22+
options: {
23+
theme: themes.dark,
24+
},
25+
});
226

327
// automatically import all files ending in *.stories.tsx
428
const req = require.context('../src', true, /.stories.tsx$/);
@@ -8,3 +32,4 @@ function loadStories() {
832
}
933

1034
configure(loadStories, module);
35+
addDecorator(withGlobal);

‎packages/common/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,15 @@
4848
"@babel/cli": "^7.2.3",
4949
"@babel/core": "^7.3.4",
5050
"@storybook/addon-actions": "^5.1.9",
51+
"@storybook/addon-knobs": "^5.1.9",
5152
"@storybook/react": "^5.1.9",
5253
"@types/color": "0.12.1",
5354
"@types/humps": "^1.1.2",
5455
"@types/jest": "^24.0.9",
5556
"@types/lodash": "^4.14.123",
5657
"@types/react": "^16.8.12",
5758
"@types/react-icons": "^2.2.7",
59+
"@types/storybook__addon-knobs": "^5.0.3",
5860
"@types/storybook__react": "^4.0.2",
5961
"@types/styled-components": "^4.1.13",
6062
"babel-jest": "^23.6.0",

‎packages/common/src/components/AutosizeInput/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 AutosizeInput from './';
4+
import { ThemeDecorator } from '../../stories/decorators';
5+
6+
const stories = storiesOf('components/Input', module).addDecorator(
7+
ThemeDecorator
8+
);
9+
10+
stories.add('Basic AutosizeInput', () => <AutosizeInput />);

‎packages/common/src/components/AutosizeTextArea/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 AutosizeTextArea from './';
4+
import { ThemeDecorator } from '../../stories/decorators';
5+
6+
const stories = storiesOf('components/Input', module).addDecorator(
7+
ThemeDecorator
8+
);
9+
10+
stories.add('Basic AutosizeTextArea', () => <AutosizeTextArea />);

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import { action } from '@storybook/addon-actions';
4+
import { Checkbox } from './';
5+
import { ThemeDecorator } from '../../stories/decorators';
6+
7+
const stories = storiesOf('components/Input', module).addDecorator(
8+
ThemeDecorator
9+
);
10+
11+
stories
12+
.add('Basic Checkbox', () => (
13+
<>
14+
<Checkbox
15+
onClick={action('onClick')}
16+
onChange={action('onChange')}
17+
id="hello"
18+
/>
19+
<label htmlFor="checkbox">Hello</label>
20+
</>
21+
))
22+
.add('Checked Checkbox', () => (
23+
<>
24+
<Checkbox
25+
onClick={action('onClick')}
26+
onChange={action('onChange')}
27+
id="hello"
28+
checked
29+
/>
30+
<label htmlFor="checkbox">Hello</label>
31+
</>
32+
));

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import CommunityBadge from './';
4+
import { ThemeDecorator } from '../../stories/decorators';
5+
6+
const templates = [
7+
'create-react-app',
8+
'vue-cli',
9+
'preact-cli',
10+
'svelte',
11+
'create-react-app-typescript',
12+
'angular-cli',
13+
'parcel',
14+
'cxjs',
15+
'@dojo/cli-create-app',
16+
'gatsby',
17+
'nuxt',
18+
'next',
19+
'reason',
20+
'apollo',
21+
'sapper',
22+
'nest',
23+
'static',
24+
'styleguidist',
25+
];
26+
27+
const FrameworkBadge = ({ template, sandboxNumber = 100 }) => (
28+
<div
29+
style={{
30+
width: 64,
31+
height: 50,
32+
}}
33+
>
34+
<CommunityBadge
35+
sandboxesNumber={sandboxNumber}
36+
style={{
37+
width: 64,
38+
height: 50,
39+
}}
40+
template={template}
41+
/>
42+
</div>
43+
);
44+
45+
templates.map(t =>
46+
storiesOf('components/Community Badge/Gold', module)
47+
.addDecorator(ThemeDecorator)
48+
.add(t, () => <FrameworkBadge template={t} />)
49+
);
50+
51+
templates.map(t =>
52+
storiesOf('components/Community Badge/Silver', module)
53+
.addDecorator(ThemeDecorator)
54+
.add(t, () => <FrameworkBadge sandboxNumber={51} template={t} />)
55+
);

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import ContributorsBadge from './';
4+
import { ThemeDecorator } from '../../stories/decorators';
5+
6+
const stories = storiesOf('components/ContributorsBadge', module).addDecorator(
7+
ThemeDecorator
8+
);
9+
stories.add('Default', () => <ContributorsBadge username={'SaraVieira'} />);

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
import GithubBadge from './';
4+
import { ThemeDecorator } from '../../stories/decorators';
5+
6+
const stories = storiesOf('components/GithubBadge', module).addDecorator(
7+
ThemeDecorator
8+
);
9+
10+
stories
11+
.add('Master', () => (
12+
<GithubBadge
13+
username={'CompuIves'}
14+
repo={'codesandbox-client'}
15+
branch={'master'}
16+
/>
17+
))
18+
.add('Other Branch', () => (
19+
<GithubBadge
20+
username={'CompuIves'}
21+
repo={'codesandbox-client'}
22+
branch={'storybook'}
23+
/>
24+
));

0 commit comments

Comments
 (0)