Skip to content

Commit 81dd689

Browse files
langermanklangermank
authored
basic storybook config (#1678)
1 parent 9d14ed5 commit 81dd689

File tree

8 files changed

+3835
-167
lines changed

8 files changed

+3835
-167
lines changed

‎docs/.storybook/main.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
3+
addons: [
4+
'@storybook/addon-a11y',
5+
'@storybook/addon-links',
6+
'@storybook/addon-essentials',
7+
'@storybook/preset-scss',
8+
'@whitespace/storybook-addon-html',
9+
'storybook-addon-designs'
10+
]
11+
}

‎docs/.storybook/preview-head.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<style>
2+
.story-wrap {
3+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
4+
Helvetica Neue, sans-serif;
5+
color: var(--color-fg-default);
6+
background-color: var(--color-canvas-default);
7+
padding: 1rem;
8+
}
9+
10+
.theme-wrap {
11+
display: grid;
12+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
13+
height: 100vh;
14+
}
15+
</style>

‎docs/.storybook/preview.js

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import '../../src/docs.scss'
2+
import '../../src/index.scss'
3+
import '../../src/base/index.scss'
4+
5+
export const parameters = {
6+
actions: {argTypesRegex: '^on[A-Z].*'},
7+
controls: {
8+
matchers: {
9+
color: /(background|color)$/i,
10+
date: /Date$/
11+
},
12+
expanded: true
13+
},
14+
15+
layout: 'fullscreen',
16+
html: {
17+
root: '#story' // target id for html tab (should be direct parent of <Story /> for easy copy/paste)
18+
}
19+
}
20+
21+
export const globalTypes = {
22+
theme: {
23+
name: 'Theme',
24+
description: 'Switch themes',
25+
defaultValue: 'light',
26+
toolbar: {
27+
icon: 'circlehollow',
28+
items: ['light', 'light_protanopia', 'dark', 'dark_dimmed', 'dark_high_contrast', 'dark_protanopia', 'all'],
29+
showName: true
30+
}
31+
}
32+
}
33+
34+
export const decorators = [
35+
(Story, context) => {
36+
if (context.globals.theme === 'all') {
37+
return (
38+
<div class="theme-wrap">
39+
<div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
40+
<Story {...context} />
41+
</div>
42+
43+
<div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story">
44+
<Story {...context} />
45+
</div>
46+
47+
<div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
48+
<Story {...context} />
49+
</div>
50+
51+
<div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
52+
<Story {...context} />
53+
</div>
54+
55+
<div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
56+
<Story {...context} />
57+
</div>
58+
59+
<div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story">
60+
<Story {...context} />
61+
</div>
62+
</div>
63+
)
64+
}
65+
66+
if (context.globals.theme === 'light') {
67+
return (
68+
<div data-color-mode="light" data-light-theme="light" className="story-wrap" id="story">
69+
<Story {...context} />
70+
</div>
71+
)
72+
}
73+
74+
if (context.globals.theme === 'light_protanopia') {
75+
return (
76+
<div data-color-mode="light" data-light-theme="light_protanopia" className="story-wrap" id="story">
77+
<Story {...context} />
78+
</div>
79+
)
80+
}
81+
82+
if (context.globals.theme === 'dark') {
83+
return (
84+
<div data-color-mode="dark" data-dark-theme="dark" className="story-wrap" id="story">
85+
<Story {...context} />
86+
</div>
87+
)
88+
}
89+
90+
if (context.globals.theme === 'dark_dimmed') {
91+
return (
92+
<div data-color-mode="dark" data-dark-theme="dark_dimmed" className="story-wrap" id="story">
93+
<Story {...context} />
94+
</div>
95+
)
96+
}
97+
98+
if (context.globals.theme === 'dark_high_contrast') {
99+
return (
100+
<div data-color-mode="dark" data-dark-theme="dark_high_contrast" className="story-wrap" id="story">
101+
<Story {...context} />
102+
</div>
103+
)
104+
}
105+
106+
if (context.globals.theme === 'dark_protanopia') {
107+
return (
108+
<div data-color-mode="dark" data-dark-theme="dark_protanopia" className="story-wrap" id="story">
109+
<Story {...context} />
110+
</div>
111+
)
112+
}
113+
114+
return (
115+
<div className="story-wrap" id="story">
116+
<Story {...context} />
117+
</div>
118+
)
119+
}
120+
]

‎docs/package.json

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
"clean": "gatsby clean",
77
"develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
88
"build-content": "gatsby build --prefix-paths",
9-
"build": "./script/now-build.sh"
9+
"build": "./script/now-build.sh",
10+
"storybook": "start-storybook -p 6006",
11+
"build-storybook": "build-storybook"
1012
},
1113
"dependencies": {
1214
"@babel/preset-react": "^7.10.4",
@@ -20,6 +22,7 @@
2022
"autoprefixer": "10.3.7",
2123
"babel-preset-gatsby": "^1.14.0",
2224
"chroma-js": "^2.1.2",
25+
"clsx": "^1.1.1",
2326
"core-js": "^3.18.2",
2427
"gatsby": "2.32.13",
2528
"gatsby-plugin-alias-imports": "^1.0.5",
@@ -43,5 +46,18 @@
4346
},
4447
"engines": {
4548
"node": ">= 10.x"
49+
},
50+
"devDependencies": {
51+
"@babel/core": "^7.15.8",
52+
"@storybook/addon-a11y": "6.3.10",
53+
"@storybook/addon-actions": "^6.3.12",
54+
"@storybook/addon-essentials": "^6.3.12",
55+
"@storybook/addon-links": "^6.3.12",
56+
"@storybook/addon-postcss": "2.0.0",
57+
"@storybook/preset-scss": "^1.0.3",
58+
"@storybook/react": "6.3.12",
59+
"@whitespace/storybook-addon-html": "^5.0.0",
60+
"babel-loader": "^8.2.2",
61+
"storybook-addon-designs": "6.2.0"
4662
}
4763
}

‎docs/src/stories/Button.stories.jsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
4+
export default {
5+
title: 'Components/Button',
6+
parameters: {
7+
design: {
8+
type: 'figma',
9+
url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
10+
}
11+
},
12+
argTypes: {
13+
variant: {
14+
options: [0, 1, 2, 3], // iterator
15+
mapping: [null, 'btn-primary', 'btn-outline', 'btn-danger'], // values
16+
control: {
17+
type: 'select',
18+
labels: ['default', 'primary', 'outline', 'danger']
19+
},
20+
defaultValue: ''
21+
},
22+
label: {
23+
defaultValue: 'Button',
24+
type: 'string',
25+
name: 'label',
26+
description: 'string'
27+
}
28+
}
29+
}
30+
31+
const Template = ({label, variant}) => (
32+
<>
33+
<button className={clsx('btn', variant && `${variant}`)}>{label}</button>
34+
</>
35+
)
36+
37+
export const Button = Template.bind({})

‎docs/src/stories/GettingStarted.stories.mdx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Meta} from '@storybook/addon-docs'
2+
3+
<Meta title="Getting Started" />
4+
5+
# Local development
6+
7+
Run `yarn storybook` from root. A local server will run, and any changes made to CSS and/or stories will auto-reload the page.
8+
9+
# Storybook config
10+
11+
Config files live in [.storybook](docs/.storybook)
12+
13+
[main.js](docs/.storybook/main.js): addons
14+
15+
[preview.js](docs/.storybook/preview.js): customizations, decorators, global CSS imports
16+
17+
[preview-head.html](docs/.storybook/preview-head.html): story-level "global" styles (within the story iframe)

0 commit comments

Comments
 (0)