Skip to content

Commit f085aa5

Browse files
author
Clauderic Demers
committed
Initial commit of react-storybook config and stories
1 parent 53be0a8 commit f085aa5

File tree

7 files changed

+394
-3
lines changed

7 files changed

+394
-3
lines changed

‎.gitignore‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,4 @@ dist
44
styles.min.css
55
styles.min.css.map
66
coverage
7-
.stories
8-
.storybook
97
npm-debug.log

‎.storybook/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { configure } from '@kadira/storybook';
2+
3+
function loadStories() {
4+
require('../src/.stories/index.js');
5+
}
6+
7+
configure(loadStories, module);

‎.storybook/head.html‎

Whitespace-only changes.

‎.storybook/webpack.config.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var autoprefixer = require('autoprefixer');
2+
var webpack = require('webpack');
3+
var path = require('path');
4+
5+
module.exports = {
6+
plugins: [
7+
new webpack.NormalModuleReplacementPlugin(/^\.\/layout$/, 'custom-layout')
8+
],
9+
resolve: {
10+
alias: {
11+
'custom-layout': path.resolve('.storybook/layout/index.js')
12+
}
13+
},
14+
module: {
15+
loaders: [
16+
{
17+
test: /(\.scss)$/,
18+
loaders: ['style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]!postcss!sass?sourceMap']
19+
},
20+
{
21+
test: /(\.css)$/,
22+
loaders: ['style', 'css']
23+
}
24+
]
25+
},
26+
postcss: [autoprefixer]
27+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
"react-dom": "^0.14.0 || ^15.0.0"
5454
},
5555
"devDependencies": {
56-
"@kadira/storybook": "git+https://github.com/kadirahq/react-storybook.git",
56+
"@kadira/storybook": "^1.36.0",
5757
"@kadira/storybook-deployer": "^1.0.0",
5858
"autoprefixer": "^6.3.6",
5959
"babel-cli": "^6.9.0",

‎src/.stories/Storybook.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
2+
3+
.root {
4+
display: flex;
5+
height: 100%;
6+
box-sizing: border-box;
7+
flex-direction: column;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
12+
// Base styles
13+
.list {
14+
width: 400px;
15+
height: 600px;
16+
overflow: auto;
17+
-webkit-overflow-scrolling: touch;
18+
border: 1px solid #999;
19+
}
20+
21+
.item {
22+
position: relative;
23+
border-bottom: 1px solid #999;
24+
}
25+
26+
// Stylized
27+
.stylizedList {
28+
position: relative;
29+
z-index: 0;
30+
background-color: #F3F3F3;
31+
border: 1px solid #EFEFEF;
32+
border-radius: 3px;
33+
outline: none;
34+
}
35+
.stylizedItem {
36+
display: flex;
37+
align-items: center;
38+
width: 100%;
39+
padding: 0 20px;
40+
background-color: #FFF;
41+
border-bottom: 1px solid #EFEFEF;
42+
box-sizing: border-box;
43+
user-select: none;
44+
45+
color: #333;
46+
font-weight: 400;
47+
}
48+
49+
// Drag handle
50+
.handle {
51+
display: block;
52+
width: 18px;
53+
height: 18px;
54+
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 L 0 7.5 z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 L 0 22.5 z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 L 0 37.5 z" color="#000"></path></svg>');
55+
background-size: contain;
56+
background-repeat: no-repeat;
57+
opacity: 0.25;
58+
margin-right: 20px;
59+
cursor: row-resize;
60+
}
61+
62+
// Horizontal list
63+
.horizontalList {
64+
display: flex;
65+
width: 600px;
66+
height: 300px;
67+
white-space: nowrap;
68+
}
69+
70+
.horizontalItem {
71+
display: flex;
72+
flex-shrink: 0;
73+
align-items: center;
74+
justify-content: center;
75+
width: 200px;
76+
border-right: 1px solid #EFEFEF;
77+
border-bottom: 0;
78+
}
79+
80+
// Divider
81+
.divider {
82+
padding: 10px 20px;
83+
background: #F9F9F9;
84+
border-bottom: 1px solid #EFEFEF;
85+
text-transform: uppercase;
86+
font-size: 14px;
87+
color: #333;
88+
}
89+
90+
91+
// Helper styles
92+
.helper {
93+
box-shadow: 0 5px 5px -5px rgba(0,0,0,0.2), 0 -5px 5px -5px rgba(0,0,0,0.2);
94+
}
95+
.stylizedHelper {
96+
box-shadow: 0 5px 5px -5px rgba(0,0,0,0.2), 0 -5px 5px -5px rgba(0,0,0,0.2);
97+
background-color: rgba(255,255,255,0.8);
98+
cursor: row-resize;
99+
100+
&.horizontalItem {
101+
cursor: col-resize;
102+
}
103+
}
104+
105+
106+
:global {
107+
body {
108+
font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', arial, sans-serif;
109+
-webkit-font-smoothing: antialiased;
110+
-moz-osx-font-smoothing: grayscale;
111+
background-color: rgba(#F4F5F9, 0.7);
112+
}
113+
html, body, #root {
114+
height: 100%;
115+
margin: 0;
116+
}
117+
}

0 commit comments

Comments
 (0)