Skip to content

Commit 2328b58

Browse files
ganderzzganderzz
committed
Improve Storybook styling
1 parent 4c1d275 commit 2328b58

File tree

10 files changed

+1749
-2742
lines changed

10 files changed

+1749
-2742
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
77
.DS_Store
8+
.cache
89

910
# Runtime data
1011
pids

‎.storybook/config.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { configure } from '@storybook/react';
1+
import { configure } from "@storybook/react";
22

33
function loadStories() {
4-
require("../stories/index.jsx");
5-
// You can require as many stories as you need.
4+
require("../stories/Default.jsx");
5+
require("../stories/HigherOrderComponent.jsx");
6+
require("../stories/ScrollByRef.jsx");
7+
require("../stories/WithScrollArea.jsx");
68
}
79

8-
configure(loadStories, module);
10+
configure(loadStories, module);

‎.storybook/preview-head.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
2+
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
3+
4+
<style>
5+
button {
6+
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
7+
transition: box-shadow 0.1s;
8+
}
9+
10+
button:hover {
11+
box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.4);
12+
}
13+
</style>

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,28 +39,28 @@
3939
"@babel/plugin-proposal-class-properties": "7.1.0",
4040
"@babel/preset-env": "7.1.0",
4141
"@babel/preset-react": "7.0.0",
42-
"@storybook/react": "3.4.11",
43-
"all-contributors-cli": "5.4.0",
42+
"@storybook/react": "4.0.2",
43+
"all-contributors-cli": "5.4.1",
4444
"babel-core": "7.0.0-bridge.0",
4545
"babel-jest": "23.6.0",
4646
"babel-loader": "8.0.4",
47-
"copy-webpack-plugin": "4.5.2",
47+
"copy-webpack-plugin": "4.6.0",
4848
"enzyme": "3.7.0",
4949
"enzyme-adapter-react-16": "1.6.0",
50-
"eslint": "5.6.1",
50+
"eslint": "5.8.0",
5151
"eslint-config-airbnb": "17.1.0",
5252
"eslint-config-prettier": "3.1.0",
5353
"eslint-plugin-import": "2.14.0",
5454
"eslint-plugin-jsx-a11y": "6.1.2",
5555
"eslint-plugin-react": "7.11.1",
56-
"husky": "1.1.1",
56+
"husky": "1.1.3",
5757
"jest": "23.6.0",
58-
"lint-staged": "7.3.0",
58+
"lint-staged": "8.0.4",
5959
"prettier": "1.14.3",
6060
"react": "16.6.0",
6161
"react-dom": "16.6.0",
62-
"react-testing-library": "5.2.0",
63-
"webpack": "4.20.2",
62+
"react-testing-library": "5.2.3",
63+
"webpack": "4.24.0",
6464
"webpack-cli": "3.1.2"
6565
},
6666
"jest": {

‎stories/Default.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import { ScrollStory } from "./";
3+
import { ScrollTo } from "../src";
4+
5+
ScrollStory.add("Default", () => (
6+
<div
7+
style={{
8+
height: "150vh",
9+
position: "relative",
10+
padding: 20,
11+
backgroundImage: "linear-gradient(#FFF, #111)"
12+
}}
13+
>
14+
<ScrollTo>
15+
{({ scrollTo }) => (
16+
<React.Fragment>
17+
<button type="button" onClick={() => scrollTo({ y: 500 })}>
18+
Scroll Down!
19+
</button>
20+
21+
<button
22+
type="button"
23+
style={{ position: "absolute", left: 20, bottom: 20 }}
24+
onClick={() => scrollTo({ y: 0, smooth: true })}
25+
>
26+
Scroll Up!
27+
</button>
28+
</React.Fragment>
29+
)}
30+
</ScrollTo>
31+
</div>
32+
));

‎stories/HigherOrderComponent.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import { ScrollStory } from "./";
3+
import { ScrollToHOC } from "../src";
4+
5+
ScrollStory.add("Higher Order Component", () => {
6+
const YButton = ScrollToHOC(props => (
7+
<button
8+
type="button"
9+
onClick={() => props.scrollTo({ x: 0, y: props.y || 0 })}
10+
style={props.style}
11+
>
12+
{props.children}
13+
</button>
14+
));
15+
16+
return (
17+
<div
18+
style={{
19+
height: "2000px",
20+
padding: 20,
21+
position: "relative",
22+
backgroundImage: "linear-gradient(#FFF, #111)"
23+
}}
24+
>
25+
<YButton y={2000}>Scroll Down</YButton>
26+
27+
<YButton y={0} style={{ position: "absolute", bottom: 20, left: 20 }}>
28+
Scroll Up
29+
</YButton>
30+
</div>
31+
);
32+
});

‎stories/ScrollByRef.jsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react";
2+
import { ScrollStory } from "./";
3+
import { ScrollTo } from "../src/index";
4+
import { Object } from "es6-shim";
5+
6+
const refDOM = React.createRef();
7+
const mockData = {
8+
region: ["East", "West", "Central"],
9+
color: ["red", "green", "blue"],
10+
item: ["pencil", "paper", "pen", "globe", "cup", "candy"],
11+
qty: [1, 200, 3.2, 4, 5, 6.55, 7, 8]
12+
};
13+
14+
ScrollStory.add("Scroll by Ref", () => {
15+
return (
16+
<div style={{ overflow: "auto", padding: 20 }}>
17+
<ScrollTo>
18+
{({ scrollTo }) => (
19+
<React.Fragment>
20+
<button
21+
type="button"
22+
onClick={() => scrollTo({ ref: refDOM, y: 700, smooth: true })}
23+
>
24+
Scroll Ref Down
25+
</button>
26+
27+
<button
28+
type="button"
29+
style={{ marginLeft: 5 }}
30+
onClick={() => scrollTo({ ref: refDOM, y: 0, smooth: true })}
31+
>
32+
Scroll Ref Up
33+
</button>
34+
</React.Fragment>
35+
)}
36+
</ScrollTo>
37+
38+
<div
39+
ref={refDOM}
40+
style={{
41+
marginTop: 20,
42+
background: "#F1F1F1",
43+
height: 1000,
44+
maxHeight: 300,
45+
overflow: "auto",
46+
position: "relative"
47+
}}
48+
>
49+
<div style={{ height: 1000, padding: 20 }}>
50+
<table>
51+
<thead>
52+
<tr>
53+
{Object.keys(mockData).map(key => (
54+
<th key={key}>{key}</th>
55+
))}
56+
</tr>
57+
</thead>
58+
<tbody>
59+
{Array.from({ length: 40 }).map((_, i) => {
60+
return (
61+
<tr key={i}>
62+
{Object.keys(mockData).map(key => (
63+
<td key={key + i}>
64+
{mockData[key][i % mockData[key].length]}
65+
</td>
66+
))}
67+
</tr>
68+
);
69+
})}
70+
</tbody>
71+
</table>
72+
</div>
73+
</div>
74+
</div>
75+
);
76+
});

‎stories/WithScrollArea.jsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from "react";
2+
import { ScrollStory } from "./";
3+
import { ScrollTo, ScrollArea } from "../src";
4+
5+
ScrollStory.add("With ScrollArea", () => (
6+
<div style={{ padding: 20 }}>
7+
<ScrollTo>
8+
{({ scrollTo }) => (
9+
<React.Fragment>
10+
<button
11+
type="button"
12+
onClick={() => scrollTo({ x: 0, y: 1000, smooth: true })}
13+
>
14+
Scroll area down
15+
</button>
16+
17+
<ScrollArea
18+
id="my-scroll-area"
19+
style={{
20+
height: "50vh",
21+
overflow: "auto",
22+
background: "#222",
23+
padding: 20,
24+
position: "relative"
25+
}}
26+
>
27+
<span style={{ color: "#FFF", fontSize: "2rem" }}>
28+
^ Click the button
29+
</span>
30+
<div style={{ height: "1000px" }} />
31+
<span style={{ color: "#FFF", fontSize: "2rem" }}>
32+
HELLO!
33+
<button
34+
type="button"
35+
style={{ marginLeft: 5 }}
36+
onClick={() =>
37+
scrollTo({ id: "my-scroll-area", x: 0, y: 0, smooth: true })
38+
}
39+
>
40+
Scroll area up
41+
</button>
42+
</span>
43+
</ScrollArea>
44+
45+
<div
46+
style={{
47+
height: "50vh",
48+
padding: 20,
49+
overflow: "auto",
50+
background: "#888"
51+
}}
52+
>
53+
<span style={{ color: "#FFF", fontSize: "2rem" }}>
54+
I don't move.
55+
</span>
56+
<div style={{ height: "200vh" }} />
57+
</div>
58+
</React.Fragment>
59+
)}
60+
</ScrollTo>
61+
</div>
62+
));

0 commit comments

Comments
 (0)