Skip to content

Commit 0dd8bbe

Browse files
anttimakianttimaki
authored
Merge pull request #289 from thunderstore-io/storybook-rework
Use Storybook to create reusable UI components in isolation
2 parents 37ede8c + 2938095 commit 0dd8bbe

21 files changed

+7232
-181
lines changed

‎README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,24 @@ VS Code may have problem detecting installed packages in this monorepo/workspace
7676
setup. Installing
7777
[Monorepo Workspace extension](https://marketplace.visualstudio.com/items?itemName=folke.vscode-monorepo-workspace)
7878
may solve them.
79+
80+
## Storybook
81+
82+
[Storybook](https://storybook.js.org/docs/react/get-started/introduction)
83+
provides a sandbox to build UI components in isolation, without having to start
84+
up the whole service stack. Additionally it showcases the existing components,
85+
promoting reusability.
86+
87+
To start Storybook, run `yarn workspace @thunderstore/storybook storybook`.
88+
Storybook can then be accessed at [http://localhost:6006/].
89+
90+
When creating new components for `@thunderstore/components`, add stories for
91+
them by creating files under `apps/storybook/stories/components`. See the
92+
existing files for examples.
93+
94+
To add stories for other packages, first edit the `stories` setting specified
95+
at `apps/storybook/.storybook/main.js` so Storybook is aware of your story
96+
files.
97+
98+
To upgrade Storybook when it informs you about new version being available, run
99+
the given `npx sb@latest upgrade` command in `apps/storybook` directory.

‎apps/storybook/.babelrc.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"shippedProposals": true,
8+
"loose": true
9+
}
10+
],
11+
"@babel/preset-typescript"
12+
],
13+
"plugins": [
14+
"@babel/plugin-transform-shorthand-properties",
15+
"@babel/plugin-transform-block-scoping",
16+
[
17+
"@babel/plugin-proposal-decorators",
18+
{
19+
"legacy": true
20+
}
21+
],
22+
[
23+
"@babel/plugin-proposal-class-properties",
24+
{
25+
"loose": true
26+
}
27+
],
28+
[
29+
"@babel/plugin-proposal-private-methods",
30+
{
31+
"loose": true
32+
}
33+
],
34+
"@babel/plugin-proposal-export-default-from",
35+
"@babel/plugin-syntax-dynamic-import",
36+
[
37+
"@babel/plugin-proposal-object-rest-spread",
38+
{
39+
"loose": true,
40+
"useBuiltIns": true
41+
}
42+
],
43+
"@babel/plugin-transform-classes",
44+
"@babel/plugin-transform-arrow-functions",
45+
"@babel/plugin-transform-parameters",
46+
"@babel/plugin-transform-destructuring",
47+
"@babel/plugin-transform-spread",
48+
"@babel/plugin-transform-for-of",
49+
"babel-plugin-macros",
50+
"@babel/plugin-proposal-optional-chaining",
51+
"@babel/plugin-proposal-nullish-coalescing-operator",
52+
[
53+
"babel-plugin-polyfill-corejs3",
54+
{
55+
"method": "usage-global",
56+
"absoluteImports": "core-js",
57+
"version": "3.19.1"
58+
}
59+
]
60+
]
61+
}

‎apps/storybook/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules/

‎apps/storybook/.storybook/main.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
"stories": [
3+
"../stories/**/*.stories.mdx",
4+
{
5+
"directory": "../stories/components",
6+
"files": "*.stories.*",
7+
"titlePrefix": "@thunderstore/components"
8+
},
9+
],
10+
"addons": [
11+
"@storybook/addon-links",
12+
"@storybook/addon-essentials",
13+
"@storybook/addon-interactions",
14+
"@snek-at/storybook-addon-chakra-ui", // Must come after @storybook addons
15+
],
16+
"framework": "@storybook/react",
17+
};

‎apps/storybook/.storybook/preview.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export const parameters = {
2+
actions: { argTypesRegex: "^on[A-Z].*" },
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/,
7+
},
8+
},
9+
backgrounds: {
10+
default: "thunderstore",
11+
values: [
12+
{ name: "thunderstore", value: "#242e48" },
13+
{ name: "light", value: "#f8f8f8" },
14+
{ name: "dark", value: "#333" },
15+
],
16+
},
17+
}

‎apps/storybook/package.json

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "@thunderstore/storybook",
3+
"version": "0.0.0",
4+
"private": true,
5+
"main": "index.js",
6+
"license": "MIT",
7+
"devDependencies": {
8+
"@babel/plugin-proposal-class-properties": "^7.16.0",
9+
"@babel/plugin-proposal-decorators": "^7.16.4",
10+
"@babel/plugin-proposal-export-default-from": "^7.16.0",
11+
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
12+
"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
13+
"@babel/plugin-proposal-optional-chaining": "^7.16.0",
14+
"@babel/plugin-proposal-private-methods": "^7.16.0",
15+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
16+
"@babel/plugin-transform-arrow-functions": "^7.16.0",
17+
"@babel/plugin-transform-block-scoping": "^7.16.0",
18+
"@babel/plugin-transform-classes": "^7.16.0",
19+
"@babel/plugin-transform-destructuring": "^7.16.0",
20+
"@babel/plugin-transform-for-of": "^7.16.0",
21+
"@babel/plugin-transform-parameters": "^7.16.3",
22+
"@babel/plugin-transform-shorthand-properties": "^7.16.0",
23+
"@babel/plugin-transform-spread": "^7.16.0",
24+
"@storybook/addon-actions": "^6.4.3",
25+
"@storybook/addon-essentials": "^6.4.3",
26+
"@storybook/addon-interactions": "^6.4.3",
27+
"@storybook/addon-links": "^6.4.3",
28+
"@storybook/jest": "^0.0.5",
29+
"@storybook/react": "^6.4.3",
30+
"@storybook/testing-library": "^0.0.7",
31+
"babel-loader": "^8.2.3",
32+
"babel-plugin-macros": "^3.1.0",
33+
"babel-plugin-polyfill-corejs3": "^0.4.0",
34+
"core-js": "^3.19.1"
35+
},
36+
"dependencies": {
37+
"@babel/core": "^7.16.0",
38+
"@babel/preset-env": "^7.16.4",
39+
"@babel/preset-typescript": "^7.16.0",
40+
"@chakra-ui/icons": "^1.1.1",
41+
"@chakra-ui/system": "^1.8.2",
42+
"@emotion/react": "^11.7.0",
43+
"@emotion/styled": "^11.6.0",
44+
"@snek-at/storybook-addon-chakra-ui": "^1.0.0-beta.1",
45+
"@thunderstore/components": "^0.1.0",
46+
"react": "^17.0.2",
47+
"react-dom": "^17.0.2",
48+
"webpack": "^4.46.0"
49+
},
50+
"scripts": {
51+
"storybook": "start-storybook -p 6006",
52+
"build-storybook": "build-storybook"
53+
}
54+
}

‎apps/storybook/stories/Introduction.stories.mdx

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
import Code from './assets/code-brackets.svg';
3+
import Colors from './assets/colors.svg';
4+
import Comments from './assets/comments.svg';
5+
import Direction from './assets/direction.svg';
6+
import Flow from './assets/flow.svg';
7+
import Plugin from './assets/plugin.svg';
8+
import Repo from './assets/repo.svg';
9+
import StackAlt from './assets/stackalt.svg';
10+
11+
<Meta title="Example/Introduction" />
12+
13+
<style>{`
14+
.subheading {
15+
--mediumdark: '#999999';
16+
font-weight: 900;
17+
font-size: 13px;
18+
color: #999;
19+
letter-spacing: 6px;
20+
line-height: 24px;
21+
text-transform: uppercase;
22+
margin-bottom: 12px;
23+
margin-top: 40px;
24+
}
25+
26+
.link-list {
27+
display: grid;
28+
grid-template-columns: 1fr;
29+
grid-template-rows: 1fr 1fr;
30+
row-gap: 10px;
31+
}
32+
33+
@media (min-width: 620px) {
34+
.link-list {
35+
row-gap: 20px;
36+
column-gap: 20px;
37+
grid-template-columns: 1fr 1fr;
38+
}
39+
}
40+
41+
@media all and (-ms-high-contrast:none) {
42+
.link-list {
43+
display: -ms-grid;
44+
-ms-grid-columns: 1fr 1fr;
45+
-ms-grid-rows: 1fr 1fr;
46+
}
47+
}
48+
49+
.link-item {
50+
display: block;
51+
padding: 20px 30px 20px 15px;
52+
border: 1px solid #00000010;
53+
border-radius: 5px;
54+
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
55+
color: #333333;
56+
display: flex;
57+
align-items: flex-start;
58+
}
59+
60+
.link-item:hover {
61+
border-color: #1EA7FD50;
62+
transform: translate3d(0, -3px, 0);
63+
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
64+
}
65+
66+
.link-item:active {
67+
border-color: #1EA7FD;
68+
transform: translate3d(0, 0, 0);
69+
}
70+
71+
.link-item strong {
72+
font-weight: 700;
73+
display: block;
74+
margin-bottom: 2px;
75+
}
76+
77+
.link-item img {
78+
height: 40px;
79+
width: 40px;
80+
margin-right: 15px;
81+
flex: none;
82+
}
83+
84+
.link-item span {
85+
font-size: 14px;
86+
line-height: 20px;
87+
}
88+
89+
.tip {
90+
display: inline-block;
91+
border-radius: 1em;
92+
font-size: 11px;
93+
line-height: 12px;
94+
font-weight: 700;
95+
background: #E7FDD8;
96+
color: #66BF3C;
97+
padding: 4px 12px;
98+
margin-right: 10px;
99+
vertical-align: top;
100+
}
101+
102+
.tip-wrapper {
103+
font-size: 13px;
104+
line-height: 20px;
105+
margin-top: 40px;
106+
margin-bottom: 40px;
107+
}
108+
109+
.tip-wrapper code {
110+
font-size: 12px;
111+
display: inline-block;
112+
}
113+
`}</style>
114+
115+
# Welcome to Storybook
116+
117+
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
118+
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
119+
120+
Browse example stories now by navigating to them in the sidebar.
121+
View their code in the `src/stories` directory to learn how they work.
122+
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
123+
124+
<div className="subheading">Configure</div>
125+
126+
<div className="link-list">
127+
<a
128+
className="link-item"
129+
href="https://storybook.js.org/docs/react/addons/addon-types"
130+
target="_blank"
131+
>
132+
<img src={Plugin} alt="plugin" />
133+
<span>
134+
<strong>Presets for popular tools</strong>
135+
Easy setup for TypeScript, SCSS and more.
136+
</span>
137+
</a>
138+
<a
139+
className="link-item"
140+
href="https://storybook.js.org/docs/react/configure/webpack"
141+
target="_blank"
142+
>
143+
<img src={StackAlt} alt="Build" />
144+
<span>
145+
<strong>Build configuration</strong>
146+
How to customize webpack and Babel
147+
</span>
148+
</a>
149+
<a
150+
className="link-item"
151+
href="https://storybook.js.org/docs/react/configure/styling-and-css"
152+
target="_blank"
153+
>
154+
<img src={Colors} alt="colors" />
155+
<span>
156+
<strong>Styling</strong>
157+
How to load and configure CSS libraries
158+
</span>
159+
</a>
160+
<a
161+
className="link-item"
162+
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
163+
target="_blank"
164+
>
165+
<img src={Flow} alt="flow" />
166+
<span>
167+
<strong>Data</strong>
168+
Providers and mocking for data libraries
169+
</span>
170+
</a>
171+
</div>
172+
173+
<div className="subheading">Learn</div>
174+
175+
<div className="link-list">
176+
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
177+
<img src={Repo} alt="repo" />
178+
<span>
179+
<strong>Storybook documentation</strong>
180+
Configure, customize, and extend
181+
</span>
182+
</a>
183+
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
184+
<img src={Direction} alt="direction" />
185+
<span>
186+
<strong>In-depth guides</strong>
187+
Best practices from leading teams
188+
</span>
189+
</a>
190+
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
191+
<img src={Code} alt="code" />
192+
<span>
193+
<strong>GitHub project</strong>
194+
View the source and add issues
195+
</span>
196+
</a>
197+
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
198+
<img src={Comments} alt="comments" />
199+
<span>
200+
<strong>Discord chat</strong>
201+
Chat with maintainers and the community
202+
</span>
203+
</a>
204+
</div>
205+
206+
<div className="tip-wrapper">
207+
<span className="tip">Tip</span>Edit the Markdown in{' '}
208+
<code>src/stories/Introduction.stories.mdx</code>
209+
</div>

‎apps/storybook/stories/assets/code-brackets.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)