Skip to content

Commit ac2af14

Browse files
zoltantothcomzoltantothcom
committed
Added Storybook with a Button story
1 parent 48f81c1 commit ac2af14

File tree

13 files changed

+3173
-134
lines changed

13 files changed

+3173
-134
lines changed

Diff for: ‎.babelrc

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
{
22
"presets": ["@babel/preset-env", "@babel/preset-react"],
3-
"plugins": ["@babel/plugin-proposal-class-properties"]
3+
"plugins": ["@babel/plugin-proposal-class-properties"],
4+
"env": {
5+
"test": {
6+
"plugins": ["require-context-hook"]
7+
}
8+
}
49
}

Diff for: ‎.eslintrc

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"extends": "react",
44
"env": {
55
"browser": true,
6+
"node": true,
67
"jest": true
78
},
89
"settings": {

Diff for: ‎.storybook/Storyshots.test.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import initStoryshots from '@storybook/addon-storyshots';
2+
import 'jest-styled-components';
3+
4+
initStoryshots();

Diff for: ‎.storybook/__snapshots__/Storyshots.test.js.snap

+250
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Storyshots Button custom style 1`] = `
4+
.c0 {
5+
height: 36px;
6+
outline: none;
7+
padding: 0 20px;
8+
border-radius: 4px;
9+
}
10+
11+
.c0.primary {
12+
background-color: #1585d8;
13+
}
14+
15+
.c0.primary span {
16+
color: white;
17+
}
18+
19+
.c0.secondary {
20+
background-color: #eff3f6;
21+
}
22+
23+
.c0.secondary span {
24+
color: grey;
25+
}
26+
27+
<button
28+
className="primary c0"
29+
onClick={[Function]}
30+
style={
31+
Object {
32+
"backgroundColor": "orange",
33+
"border": "2px solid crimson",
34+
}
35+
}
36+
>
37+
<span>
38+
Custom style
39+
</span>
40+
</button>
41+
`;
42+
43+
exports[`Storyshots Button playground 1`] = `
44+
.c0 {
45+
height: 46px;
46+
outline: none;
47+
padding: 0 20px;
48+
border-radius: 4px;
49+
}
50+
51+
.c0.primary {
52+
background-color: #1585d8;
53+
}
54+
55+
.c0.primary span {
56+
color: white;
57+
}
58+
59+
.c0.secondary {
60+
background-color: #eff3f6;
61+
}
62+
63+
.c0.secondary span {
64+
color: grey;
65+
}
66+
67+
<button
68+
className="primary c0"
69+
onClick={[Function]}
70+
style={Object {}}
71+
>
72+
<span>
73+
Hello Button
74+
</span>
75+
</button>
76+
`;
77+
78+
exports[`Storyshots Button with big 1`] = `
79+
.c0 {
80+
height: 46px;
81+
outline: none;
82+
padding: 0 20px;
83+
border-radius: 4px;
84+
}
85+
86+
.c0.primary {
87+
background-color: #1585d8;
88+
}
89+
90+
.c0.primary span {
91+
color: white;
92+
}
93+
94+
.c0.secondary {
95+
background-color: #eff3f6;
96+
}
97+
98+
.c0.secondary span {
99+
color: grey;
100+
}
101+
102+
<button
103+
className="primary c0"
104+
onClick={[Function]}
105+
style={Object {}}
106+
>
107+
<span>
108+
Big Button
109+
</span>
110+
</button>
111+
`;
112+
113+
exports[`Storyshots Button with label 1`] = `
114+
.c0 {
115+
height: 36px;
116+
outline: none;
117+
padding: 0 20px;
118+
border-radius: 4px;
119+
}
120+
121+
.c0.primary {
122+
background-color: #1585d8;
123+
}
124+
125+
.c0.primary span {
126+
color: white;
127+
}
128+
129+
.c0.secondary {
130+
background-color: #eff3f6;
131+
}
132+
133+
.c0.secondary span {
134+
color: grey;
135+
}
136+
137+
<button
138+
className="primary c0"
139+
onClick={[Function]}
140+
style={Object {}}
141+
>
142+
<span>
143+
Hello Button
144+
</span>
145+
</button>
146+
`;
147+
148+
exports[`Storyshots Button with no prop 1`] = `
149+
.c0 {
150+
height: 36px;
151+
outline: none;
152+
padding: 0 20px;
153+
border-radius: 4px;
154+
}
155+
156+
.c0.primary {
157+
background-color: #1585d8;
158+
}
159+
160+
.c0.primary span {
161+
color: white;
162+
}
163+
164+
.c0.secondary {
165+
background-color: #eff3f6;
166+
}
167+
168+
.c0.secondary span {
169+
color: grey;
170+
}
171+
172+
<button
173+
className="primary c0"
174+
onClick={[Function]}
175+
style={Object {}}
176+
>
177+
<span>
178+
Save
179+
</span>
180+
</button>
181+
`;
182+
183+
exports[`Storyshots Button with theme 1`] = `
184+
Array [
185+
.c0 {
186+
height: 36px;
187+
outline: none;
188+
padding: 0 20px;
189+
border-radius: 4px;
190+
}
191+
192+
.c0.primary {
193+
background-color: #1585d8;
194+
}
195+
196+
.c0.primary span {
197+
color: white;
198+
}
199+
200+
.c0.secondary {
201+
background-color: #eff3f6;
202+
}
203+
204+
.c0.secondary span {
205+
color: grey;
206+
}
207+
208+
<button
209+
className="primary c0"
210+
onClick={[Function]}
211+
style={Object {}}
212+
>
213+
<span>
214+
Button with primary theme
215+
</span>
216+
</button>,
217+
.c0 {
218+
height: 36px;
219+
outline: none;
220+
padding: 0 20px;
221+
border-radius: 4px;
222+
}
223+
224+
.c0.primary {
225+
background-color: #1585d8;
226+
}
227+
228+
.c0.primary span {
229+
color: white;
230+
}
231+
232+
.c0.secondary {
233+
background-color: #eff3f6;
234+
}
235+
236+
.c0.secondary span {
237+
color: grey;
238+
}
239+
240+
<button
241+
className="secondary c0"
242+
onClick={[Function]}
243+
style={Object {}}
244+
>
245+
<span>
246+
Button with secondary theme
247+
</span>
248+
</button>,
249+
]
250+
`;

Diff for: ‎.storybook/addons.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import '@storybook/addon-actions/register';
2+
import '@storybook/addon-knobs/register';
3+
import '@storybook/addon-links/register';

Diff for: ‎.storybook/config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from '@storybook/react';
2+
3+
const req = require.context('../stories', true, /.stories.js$/);
4+
5+
function loadStories() {
6+
req.keys().forEach(filename => req(filename));
7+
}
8+
9+
configure(loadStories, module);

Diff for: ‎.storybook/webpack.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// you can use this file to add your custom webpack plugins, loaders and anything you like.
2+
// This is just the basic way to add additional webpack configurations.
3+
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
4+
5+
// IMPORTANT
6+
// When you add this file, we won't add the default configurations which is similar
7+
// to "React Create App". This only has babel loader to load JavaScript.
8+
9+
module.exports = {
10+
plugins: [
11+
// your custom plugins
12+
],
13+
module: {
14+
rules: [
15+
// add your custom rules.
16+
],
17+
},
18+
};

Diff for: ‎__tests__/config/test.config.js renamed to ‎__tests__/config/configure-enzyme.js

File renamed without changes.

Diff for: ‎__tests__/config/register-context.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
2+
3+
registerRequireContextHook();

Diff for: ‎package.json

+13-2
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@
1818
"build": "webpack --mode production",
1919
"test": "jest",
2020
"test:watch": "jest --watch",
21-
"test:coverage": "jest --coverage"
21+
"test:coverage": "jest --coverage",
22+
"storybook": "start-storybook -p 6006",
23+
"build-storybook": "build-storybook"
2224
},
2325
"jest": {
2426
"setupFiles": [
25-
"<rootDir>__tests__/config/test.config.js"
27+
"<rootDir>__tests__/config/configure-enzyme.js",
28+
"<rootDir>__tests__/config/register-context.js"
2629
],
2730
"snapshotSerializers": [
2831
"enzyme-to-json/serializer"
@@ -36,9 +39,16 @@
3639
"@babel/plugin-proposal-class-properties": "^7.3.0",
3740
"@babel/preset-env": "^7.3.1",
3841
"@babel/preset-react": "^7.0.0",
42+
"@storybook/addon-actions": "^4.1.11",
43+
"@storybook/addon-knobs": "^4.1.11",
44+
"@storybook/addon-links": "^4.1.11",
45+
"@storybook/addon-storyshots": "^4.1.11",
46+
"@storybook/addons": "^4.1.11",
47+
"@storybook/react": "^4.1.11",
3948
"babel-eslint": "^10.0.1",
4049
"babel-jest": "^24.0.0",
4150
"babel-loader": "^8.0.5",
51+
"babel-plugin-require-context-hook": "^1.0.0",
4252
"babel-preset-env": "^1.7.0",
4353
"babel-preset-react": "^6.24.1",
4454
"enzyme": "^3.8.0",
@@ -50,6 +60,7 @@
5060
"eslint-plugin-react": "^7.12.4",
5161
"html-webpack-plugin": "^3.2.0",
5262
"jest": "^24.0.0",
63+
"jest-styled-components": "^6.3.1",
5364
"prettier": "1.16.2",
5465
"react-test-renderer": "^16.7.0",
5566
"webpack": "^4.29.0",

0 commit comments

Comments
 (0)