Skip to content

Commit 58c88f1

Browse files
waynevansonwaynevanson
committed
chore(storybook): adds storybook
re #175
1 parent b474343 commit 58c88f1

23 files changed

+6194
-192
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@
33
node_modules
44
temp
55
dist
6+
# todo - get story book only when releasing.
7+
storybook-static

‎.storybook/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
stories: ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
3+
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
4+
};

‎.storybook/preview.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
}

‎package.json‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,32 +19,34 @@
1919
"start": "parcel examples/index.html --out-dir temp/server --cache-dir temp/cache ",
2020
"build": "yarn build:rollup && yarn build:tsc",
2121
"build:rollup": " rollup --config config/rollup.config.js",
22-
"build:tsc": "ts-node config/move-files.ts"
22+
"build:tsc": "ts-node config/move-files.ts",
23+
"storybook": "start-storybook -p 6006",
24+
"build-storybook": "build-storybook"
2325
},
2426
"release": {
25-
"plugins": [
26-
"@semantic-release/commit-analyzer",
27-
"@semantic-release/release-notes-generator",
28-
"@semantic-release/changelog",
29-
[
30-
"@semantic-release/github",
31-
{
32-
"assets": [
33-
"dist/**"
34-
]
35-
}
36-
],
37-
"@semantic-release/npm",
38-
"@semantic-release/git",
39-
[
27+
"plugins": [
28+
"@semantic-release/commit-analyzer",
29+
"@semantic-release/release-notes-generator",
30+
"@semantic-release/changelog",
31+
[
32+
"@semantic-release/github",
33+
{
34+
"assets": [
35+
"dist/**"
36+
]
37+
}
38+
],
39+
"@semantic-release/npm",
4040
"@semantic-release/git",
41-
{
42-
"assets": [
43-
"package.json"
44-
],
45-
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
46-
}
47-
]
41+
[
42+
"@semantic-release/git",
43+
{
44+
"assets": [
45+
"package.json"
46+
],
47+
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
48+
}
49+
]
4850
]
4951
},
5052
"husky": {
@@ -75,26 +77,34 @@
7577
"tiny-invariant": "^1.1.0"
7678
},
7779
"devDependencies": {
80+
"@babel/core": "^7.11.6",
7881
"@commitlint/cli": "^11.0.0",
7982
"@commitlint/config-conventional": "^11.0.0",
8083
"@semantic-release/git": "^9.0.0",
84+
"@storybook/addon-actions": "^6.0.21",
85+
"@storybook/addon-essentials": "^6.0.21",
86+
"@storybook/addon-links": "^6.0.21",
87+
"@storybook/react": "^6.0.21",
8188
"@types/classnames": "^2.2.10",
8289
"@types/node": "14.11.2",
8390
"@types/react": "16.9.49",
8491
"@types/react-dom": "16.9.8",
8592
"@types/sortablejs": "^1.10.0",
93+
"babel-loader": "^8.1.0",
8694
"commitizen": "^4.2.1",
8795
"copy-dir": "^1.3.0",
8896
"cz-conventional-changelog": "^3.3.0",
8997
"husky": "^4.3.0",
9098
"parcel-bundler": "^1.12.4",
9199
"react": "^16.13.1",
92100
"react-dom": "^16.13.1",
101+
"react-is": "^16.13.1",
93102
"rollup": "^2.28.2",
94103
"rollup-plugin-commonjs": "^10.1.0",
95104
"rollup-plugin-typescript2": "^0.27.2",
96105
"semantic-release": "^17.1.2",
97106
"sortablejs": "^1.10.0",
107+
"storybook": "^6.0.21",
98108
"ts-node": "^9.0.0",
99109
"typescript": "^4.0.3"
100110
}

‎stories/Button.stories.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
3+
import { Story, Meta } from '@storybook/react/types-6-0';
4+
5+
import { Button, ButtonProps } from './Button';
6+
7+
export default {
8+
title: 'Example/Button',
9+
component: Button,
10+
argTypes: {
11+
backgroundColor: { control: 'color' },
12+
},
13+
} as Meta;
14+
15+
const Template: Story<ButtonProps> = (args) => <Button {...args} />;
16+
17+
export const Primary = Template.bind({});
18+
Primary.args = {
19+
primary: true,
20+
label: 'Button',
21+
};
22+
23+
export const Secondary = Template.bind({});
24+
Secondary.args = {
25+
label: 'Button',
26+
};
27+
28+
export const Large = Template.bind({});
29+
Large.args = {
30+
size: 'large',
31+
label: 'Button',
32+
};
33+
34+
export const Small = Template.bind({});
35+
Small.args = {
36+
size: 'small',
37+
label: 'Button',
38+
};

‎stories/Button.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import './button.css';
3+
4+
export interface ButtonProps {
5+
/**
6+
* Is this the principal call to action on the page?
7+
*/
8+
primary?: boolean;
9+
/**
10+
* What background color to use
11+
*/
12+
backgroundColor?: string;
13+
/**
14+
* How large should the button be?
15+
*/
16+
size?: 'small' | 'medium' | 'large';
17+
/**
18+
* Button contents
19+
*/
20+
label: string;
21+
/**
22+
* Optional click handler
23+
*/
24+
onClick?: () => void;
25+
}
26+
27+
/**
28+
* Primary UI component for user interaction
29+
*/
30+
export const Button: React.FC<ButtonProps> = ({
31+
primary = false,
32+
size = 'medium',
33+
backgroundColor,
34+
label,
35+
...props
36+
}) => {
37+
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
38+
return (
39+
<button
40+
type="button"
41+
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
42+
style={{ backgroundColor }}
43+
{...props}
44+
>
45+
{label}
46+
</button>
47+
);
48+
};

‎stories/Header.stories.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
3+
import { Story, Meta } from '@storybook/react/types-6-0';
4+
5+
import { Header, HeaderProps } from './Header';
6+
7+
export default {
8+
title: 'Example/Header',
9+
component: Header,
10+
} as Meta;
11+
12+
const Template: Story<HeaderProps> = (args) => <Header {...args} />;
13+
14+
export const LoggedIn = Template.bind({});
15+
LoggedIn.args = {
16+
user: {},
17+
};
18+
19+
export const LoggedOut = Template.bind({});
20+
LoggedOut.args = {};

‎stories/Header.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
3+
import { Button } from './Button';
4+
import './header.css';
5+
6+
export interface HeaderProps {
7+
user?: {};
8+
onLogin: () => void;
9+
onLogout: () => void;
10+
onCreateAccount: () => void;
11+
}
12+
13+
export const Header: React.FC<HeaderProps> = ({ user, onLogin, onLogout, onCreateAccount }) => (
14+
<header>
15+
<div className="wrapper">
16+
<div>
17+
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
18+
<g fill="none" fillRule="evenodd">
19+
<path
20+
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
21+
fill="#FFF"
22+
/>
23+
<path
24+
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
25+
fill="#555AB9"
26+
/>
27+
<path
28+
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
29+
fill="#91BAF8"
30+
/>
31+
</g>
32+
</svg>
33+
<h1>Acme</h1>
34+
</div>
35+
<div>
36+
{user ? (
37+
<Button size="small" onClick={onLogout} label="Log out" />
38+
) : (
39+
<>
40+
<Button size="small" onClick={onLogin} label="Log in" />
41+
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
42+
</>
43+
)}
44+
</div>
45+
</div>
46+
</header>
47+
);

0 commit comments

Comments
 (0)