Skip to content

Commit 731a0d3

Browse files
jscottsmithjscottsmith
committed
add storybook
1 parent ef3e619 commit 731a0d3

File tree

12 files changed

+2194
-185
lines changed

12 files changed

+2194
-185
lines changed

‎.storybook/addons.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Addons go here
2+
3+
// import '@storybook/addon-knobs/register';

‎.storybook/config.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { configure, addDecorator } from '@storybook/react';
2+
// import { action } from '@storybook/addon-actions';
3+
// import { linkTo } from '@storybook/addon-links';
4+
import { withKnobs } from '@storybook/addon-knobs';
5+
import { ParallaxProvider } from 'react-scroll-parallax';
6+
import React from 'react';
7+
8+
// Decorate all stories with ParallaxProvider and center styles
9+
const CenterDecorator = storyFn => (
10+
<div className="center elements">
11+
<ParallaxProvider>{storyFn()}</ParallaxProvider>
12+
</div>
13+
);
14+
15+
addDecorator(CenterDecorator);
16+
addDecorator(withKnobs);
17+
18+
const req = require.context('../stories', true, /\.stories\.js$/);
19+
20+
function loadStories() {
21+
req.keys().forEach(filename => req(filename));
22+
}
23+
24+
configure(loadStories, module);

‎.storybook/webpack.config.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
const path = require('path');
10+
const SRC = path.resolve('./src');
11+
const STORIES = path.resolve('./stories');
12+
13+
module.exports = {
14+
plugins: [
15+
// your custom plugins
16+
],
17+
18+
resolve: {
19+
alias: {
20+
'react-scroll-parallax': SRC,
21+
components: path.resolve(SRC + 'components'),
22+
},
23+
},
24+
25+
module: {
26+
rules: [
27+
{
28+
test: /\.js$/,
29+
include: SRC,
30+
loader: 'babel-loader',
31+
},
32+
{
33+
test: /\.scss$/,
34+
include: STORIES,
35+
loaders: [
36+
'style-loader',
37+
{
38+
loader: 'css-loader',
39+
query: {
40+
localIdentName: '[name]_[local]_[hash:base64:3]',
41+
importLoaders: 1,
42+
},
43+
},
44+
'postcss-loader',
45+
{
46+
loader: 'sass-loader',
47+
query: {
48+
outputStyle: 'expanded',
49+
},
50+
},
51+
],
52+
},
53+
],
54+
},
55+
};

‎.travis.yml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,11 @@ node_js:
44
cache:
55
directories:
66
- "node_modules"
7-
script: yarn test && codecov
7+
script: yarn test && codecov && yarn storybook:export
8+
deploy:
9+
provider: pages
10+
skip-cleanup: true
11+
github-token: $GITHUB_TOKEN
12+
keep-history: true
13+
on:
14+
branch: dev

‎package.json‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@
88
},
99
"main": "lib/index.js",
1010
"scripts": {
11-
"dev": "yarn test && webpack --progress --colors --watch",
12-
"dev-server": "node ./example/dist/server",
13-
"gh-pages": "NODE_ENV=production webpack --progress --colors",
11+
"start": "yarn storybook",
1412
"test": "BABEL_ENV=test jest",
1513
"test:watch": "BABEL_ENV=test jest --watch",
1614
"prettier": "prettier --tab-width 4 --single-quote --trailing-comma es5 --print-width 80 --write \"{src,examples,__tests__}/**/**/**/*.js\"",
17-
"prepublish": "babel ./src --out-dir ./lib --presets es2015,react,stage-0 --plugins babel-plugin-add-module-exports"
15+
"prepublish": "babel ./src --out-dir ./lib --presets es2015,react,stage-0 --plugins babel-plugin-add-module-exports",
16+
"storybook": "start-storybook -p 3000",
17+
"storybook:build": "build-storybook",
18+
"storybook:export": "build-storybook -c .storybook -o build",
19+
"deploy": "yarn run storybook:export"
1820
},
1921
"jest": {
2022
"modulePaths": [
@@ -39,6 +41,11 @@
3941
"react": "^15.0.0-0 || ^16.0.0-0"
4042
},
4143
"devDependencies": {
44+
"@storybook/addon-actions": "^3.3.9",
45+
"@storybook/addon-knobs": "^3.3.9",
46+
"@storybook/addon-links": "^3.3.9",
47+
"@storybook/addons": "^3.3.9",
48+
"@storybook/react": "^3.3.9",
4249
"babel-cli": "^6.24.1",
4350
"babel-core": "^6.23.1",
4451
"babel-jest": "^20.0.3",
@@ -61,8 +68,6 @@
6168
"regenerator-runtime": "^0.10.5",
6269
"sass-loader": "^6.0.3",
6370
"style-loader": "^0.16.1",
64-
"webpack": "^2.2.1",
65-
"webpack-merge": "^4.1.0",
66-
"webpack-node-externals": "^1.5.4"
71+
"webpack": "^2.2.1"
6772
}
6873
}

‎stories/Element/Element.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import styles from './Element.scss';
3+
4+
export default function Element(props) {
5+
return (
6+
<div className={styles.ratio}>
7+
<div className={styles.inner}>
8+
<div className={styles.box}>{props.name}</div>
9+
{props.children}
10+
</div>
11+
</div>
12+
);
13+
}

‎stories/Element/Element.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
:local(.ratio) {
2+
display: flex;
3+
position: relative;
4+
width: 100%;
5+
height: 0;
6+
padding-top: 100%;
7+
background: slateblue;
8+
}
9+
10+
:local(.inner) {
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
width: 100%;
15+
height: 100%;
16+
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
22+
:local(.box) {
23+
width: 3rem;
24+
height: 3rem;
25+
border-radius: 1.5rem;
26+
text-align: center;
27+
line-height: 3rem;
28+
color: #333;
29+
font-weight: bold;
30+
background: lightgreen;
31+
}

‎stories/Parallax/Parallax.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
:local(.parallax) {
2+
margin: 6rem;
3+
width: 200px;
4+
}
5+
6+
:local(.small) {
7+
margin: 6rem;
8+
width: 10%;
9+
}

‎stories/Parallax/Parallax.stories.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import {
3+
withKnobs,
4+
text,
5+
boolean,
6+
number,
7+
array,
8+
} from '@storybook/addon-knobs';
9+
import { storiesOf } from '@storybook/react';
10+
import { ParallaxProvider, Parallax } from 'react-scroll-parallax';
11+
import Element from '../Element/Element';
12+
13+
import styles from './Parallax.scss';
14+
import '../styles.scss';
15+
16+
storiesOf('<Parallax>', module)
17+
.add('with vertical offsets', () => (
18+
<div className="elements">
19+
<Parallax
20+
offsetYMin="-50%"
21+
offsetYMax="50%"
22+
className={styles.parallax}
23+
>
24+
<Element name="A" />
25+
</Parallax>
26+
<Parallax
27+
offsetYMin="-50%"
28+
offsetYMax="50%"
29+
slowerScrollRate
30+
className={styles.parallax}
31+
>
32+
<Element name="B" />
33+
</Parallax>
34+
</div>
35+
))
36+
.add('with horizontal offsets', () => (
37+
<div className="elements">
38+
<Parallax
39+
offsetXMin="-50%"
40+
offsetXMax="50%"
41+
className={styles.parallax}
42+
>
43+
<Element name="A" />
44+
</Parallax>
45+
<Parallax
46+
offsetXMin="-50%"
47+
offsetXMax="50%"
48+
slowerScrollRate
49+
className={styles.parallax}
50+
>
51+
<Element name="B" />
52+
</Parallax>
53+
</div>
54+
))
55+
.add('on a 100 elements', () => {
56+
const amount = number('Number of Elements', 100);
57+
const offset = number('Offset %', 50);
58+
const elements = new Array(amount).fill(null).map((x, i) => i);
59+
60+
return (
61+
<div className="elements">
62+
{elements.map((number, i) => {
63+
const odd = i % 2;
64+
65+
const props = {
66+
offsetXMin: -offset + '%',
67+
offsetXMax: offset + '%',
68+
offsetYMin: -offset * odd + '%',
69+
offsetYMax: offset * odd + '%',
70+
slowerScrollRate: !!odd,
71+
};
72+
73+
return (
74+
<Parallax key={i} className={styles.small} {...props}>
75+
<Element name={i} />
76+
</Parallax>
77+
);
78+
})}
79+
</div>
80+
);
81+
});

‎stories/styles.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700');
2+
3+
$bg1: #ececec;
4+
$bg2: #d6d6d6;
5+
6+
body {
7+
padding: 0;
8+
margin: 0;
9+
background-color: $bg1;
10+
background-image: linear-gradient(
11+
0deg,
12+
transparent 24%,
13+
$bg2 25%,
14+
$bg2 26%,
15+
transparent 27%,
16+
transparent 74%,
17+
$bg2 75%,
18+
$bg2 76%,
19+
transparent 77%,
20+
transparent
21+
),
22+
linear-gradient(
23+
90deg,
24+
transparent 24%,
25+
$bg2 25%,
26+
$bg2 26%,
27+
transparent 27%,
28+
transparent 74%,
29+
$bg2 75%,
30+
$bg2 76%,
31+
transparent 77%,
32+
transparent
33+
);
34+
35+
background-size: 50px 50px;
36+
font-size: 16px;
37+
font-family: 'Roboto Mono', monsopace;
38+
font-style: normal;
39+
40+
&:before {
41+
content: '↑ Scroll ↓';
42+
position: fixed;
43+
top: 10px;
44+
width: 100%;
45+
text-align: center;
46+
letter-spacing: 0.05em;
47+
text-transform: uppercase;
48+
color: tomato;
49+
z-index: 1000;
50+
}
51+
}
52+
53+
:global(.center) {
54+
min-height: 300vh;
55+
}
56+
57+
:global(.elements) {
58+
width: 100%;
59+
display: flex;
60+
flex-flow: row wrap;
61+
align-items: center;
62+
justify-content: center;
63+
}
64+
65+
:local(.parallax) {
66+
margin: 6rem;
67+
width: 200px;
68+
}
69+
70+
:local(.small) {
71+
margin: 6rem;
72+
width: 10%;
73+
}
74+
75+
:local(.portal) {
76+
position: fixed;
77+
bottom: 2rem;
78+
left: 2rem;
79+
right: 2rem;
80+
color: black;
81+
z-index: 100;
82+
border-radius: 3px;
83+
background-color: rgba(#eee, 0.8);
84+
85+
> * {
86+
margin: 0.5rem;
87+
}
88+
}

0 commit comments

Comments
 (0)