From 409f0e2ec0a3119bb8b71f0a0665446fee2a30ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1ssio=20Zen?= Date: Tue, 5 Jul 2016 15:48:18 -0300 Subject: [PATCH] Added storybook stories --- .storybook/config.js | 7 +++++ .storybook/webpack.config.js | 34 ++++++++++++++++++++++ package.json | 5 +++- src/components/stories/Card.js | 50 +++++++++++++++++++++++++++++++++ src/components/stories/index.js | 2 ++ src/index.css | 7 ++++- src/index.js | 2 +- webpack.config.js | 5 ++-- 8 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 .storybook/config.js create mode 100644 .storybook/webpack.config.js create mode 100644 src/components/stories/Card.js create mode 100644 src/components/stories/index.js diff --git a/.storybook/config.js b/.storybook/config.js new file mode 100644 index 00000000..3d286cee --- /dev/null +++ b/.storybook/config.js @@ -0,0 +1,7 @@ +import {configure} from '@kadira/storybook'; + +function loadStories() { + require('../src/components/stories/'); +} + +configure(loadStories, module); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 00000000..08191f16 --- /dev/null +++ b/.storybook/webpack.config.js @@ -0,0 +1,34 @@ +/* global module, __dirname, require */ +var webpack = require("webpack"); +const path = require("path"); + +module.exports = { + module: { + loaders: [ + { + test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, + loader: 'url-loader?limit=100000' + }, + { test: /\.json$/, loader: 'json-loader' }, + { + test: /\.css$/, + loader: 'style!css?modules&importLoaders=1!postcss' + }, + { + loader: 'babel', + test: /\.js?$/, + exclude: /(node_modules|bower_components)/, + query: { + cacheDirectory: true, + presets: ['react', 'es2015'], + plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread'] + } + } + ] + }, + + postcss: [ + require("postcss-import")({addDependencyTo: webpack}), + require("postcss-cssnext")() + ], +}; diff --git a/package.json b/package.json index e5bac462..bca67151 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "start": "webpack-dev-server -d --inline --config webpack.config.js", "test": "NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js", "test:watch": "npm test -- --watch", - "build": "webpack --config webpack.config.js" + "build": "webpack --config webpack.config.js", + "storybook": "start-storybook -p 9001" }, "keywords": [ "netlify", @@ -16,6 +17,7 @@ "author": "Netlify", "license": "MIT", "devDependencies": { + "@kadira/storybook": "^1.36.0", "autoprefixer": "^6.3.3", "babel-core": "^6.5.1", "babel-eslint": "^4.1.8", @@ -41,6 +43,7 @@ "moment": "^2.11.2", "normalizr": "^2.0.0", "postcss-cssnext": "^2.7.0", + "postcss-import": "^8.1.2", "postcss-loader": "^0.9.1", "react": "^15.1.0", "react-dom": "^15.1.0", diff --git a/src/components/stories/Card.js b/src/components/stories/Card.js new file mode 100644 index 00000000..a791f268 --- /dev/null +++ b/src/components/stories/Card.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { Card } from '../UI'; +import { storiesOf } from '@kadira/storybook'; + +const styles = { + fixedWidth: { width: 280 }, + footer: { + color: '#aaa', + backgroundColor: '#555', + textAlign: 'center', + marginTop: 5, + padding: 10 + } + +} + +storiesOf('Card', module) + .add('Default View', () => ( +
+ +

A Card

+

Subtitle

+

+ Margins are applied to all elements inside a card.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. lobortis vel. Nulla porttitor enim at tellus eget + malesuada eleifend. Nunc tellus turpis, tincidunt sed felis facilisis, lacinia condimentum quam. Cras quis + tortor fermentum, aliquam tortor eu, consequat ligula. Nulla eget nulla act odio varius ullamcorper turpis. + In consequat egestas nulla condimentum faucibus. Donec scelerisque convallis est nec fringila. Suspendisse + non lorem non erat congue consequat. +

+ +
+ )).add('Full width content', () => ( +
+ + +

Card & cat

+

Media Elements such as video, img (and iFrame for embeds) don't have margin

+ +
+ )).add('Footer', () => ( +
+ + +

Now with footer.

+

header and footer elements are also not subject to margin

+ + +
+ )) diff --git a/src/components/stories/index.js b/src/components/stories/index.js new file mode 100644 index 00000000..0226a0fa --- /dev/null +++ b/src/components/stories/index.js @@ -0,0 +1,2 @@ +import '../../index.css'; +import './Card'; diff --git a/src/index.css b/src/index.css index 737595ab..a51b545d 100644 --- a/src/index.css +++ b/src/index.css @@ -2,11 +2,16 @@ html { box-sizing: border-box; } -html, body, #appRoot, #appRoot > * { +body { + font-family: sans-serif; margin: 0; height: 100%; } +:global #root, :global #root > * { + height: 100%; +} + h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, ol, ul { margin: 0; padding: 0; diff --git a/src/index.js b/src/index.js index dafc5977..16646c25 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ const store = configureStore(); window.store = store; const el = document.createElement('div'); -el.id = 'appRoot'; +el.id = 'root'; document.body.appendChild(el); render(( diff --git a/webpack.config.js b/webpack.config.js index 5b6a093c..08a6a3ff 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,12 +7,12 @@ module.exports = { loaders: [ { test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/, - loader: 'file?name=/[hash].[ext]' + loader: 'url-loader?limit=100000' }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, - loader: 'style!css?modules!postcss' + loader: 'style!css?modules&importLoaders=1!postcss' }, { loader: 'babel', @@ -28,6 +28,7 @@ module.exports = { }, postcss: [ + require('postcss-import')({ addDependencyTo: webpack }), require('postcss-cssnext') ],