Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 731a0d3

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /