From eb298356f31e3d2904808f0b244fc99bf87fe16f Mon Sep 17 00:00:00 2001 From: Bojan Hribernik Date: Tue, 16 Aug 2016 07:25:16 +0200 Subject: [PATCH] Work in progress --- .gitignore | 1 + .storybook/webpack.config.js | 25 ++++---- examples/Example.js | 61 +++++++++++-------- examples/{index.scss => Example.scss} | 4 ++ examples/index.html | 4 +- examples/index.js | 1 - examples/package.json | 28 +++++++++ server.js => examples/server.js | 2 +- .../webpack.config.dev.js | 13 ++-- examples/webpack.config.js | 5 ++ .../webpack.config.prod.js | 15 ++--- .../MultiSelectField/MultiSelectField.js | 0 .../MultiSelectField/MultiSelectField.scss | 0 {components => src}/Option/Option.js | 0 .../SelectField/SelectField.js | 0 .../SelectField/SelectField.scss | 0 {components => src}/index.js | 0 stories/MultiSelectField.story.js | 2 +- stories/SelectField.story.js | 2 +- 19 files changed, 101 insertions(+), 62 deletions(-) rename examples/{index.scss => Example.scss} (73%) create mode 100644 examples/package.json rename server.js => examples/server.js (90%) rename webpack.config.dev.js => examples/webpack.config.dev.js (71%) create mode 100644 examples/webpack.config.js rename webpack.config.prod.js => examples/webpack.config.prod.js (75%) rename {components => src}/MultiSelectField/MultiSelectField.js (100%) rename {components => src}/MultiSelectField/MultiSelectField.scss (100%) rename {components => src}/Option/Option.js (100%) rename {components => src}/SelectField/SelectField.js (100%) rename {components => src}/SelectField/SelectField.scss (100%) rename {components => src}/index.js (100%) diff --git a/.gitignore b/.gitignore index a499a93..e3b86d0 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ node_modules .DS_Store dist lib +es coverage .idea examples/bundle.js diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 2198e51..69af1f6 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,20 +1,17 @@ const path = require('path'); module.exports = { + devtool: 'cheap-module-eval-source-map', module: { - loaders: [ - { - test : /\.(scss|css)$/, - loader: 'style!css?sourceMap!postcss!sass?sourceMap' - }, - { - test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: "url-loader?limit=10000&mimetype=application/font-woff" - }, - { - test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: "file-loader" - } - ] + loaders: [{ + test : /\.(scss|css)$/, + loader: 'style!css?sourceMap!postcss!sass?sourceMap' + },{ + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "url-loader?limit=10000&mimetype=application/font-woff" + },{ + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "file-loader" + }] } }; diff --git a/examples/Example.js b/examples/Example.js index ef64eaa..9dd11d6 100644 --- a/examples/Example.js +++ b/examples/Example.js @@ -1,33 +1,46 @@ import React, { Component } from 'react'; -import { SelectField, MultiSelectField, Option } from '../components'; +import { Layout, Header, Navigation, Content, Icon } from 'react-mdl' + +import { SelectField, MultiSelectField, Option } from '../src'; + +import './Example.scss'; export default class Example extends Component { render() { return ( -
- - - - - - - - - - - - - - - - - - - - - -
+ +
+ + GitHub + +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ + ) } } diff --git a/examples/index.scss b/examples/Example.scss similarity index 73% rename from examples/index.scss rename to examples/Example.scss index 2ff8022..cf214e9 100644 --- a/examples/index.scss +++ b/examples/Example.scss @@ -1,5 +1,9 @@ @import url("https://fonts.googleapis.com/icon?family=Material+Icons"); +.mdl-layout__header-row { + padding-left: 24px; +} + .example { margin: 0 auto; padding: 20px 0; diff --git a/examples/index.html b/examples/index.html index 263e43e..9835492 100644 --- a/examples/index.html +++ b/examples/index.html @@ -2,10 +2,10 @@ - React MDL Selectfield Component + React MDL Selectfield Component Examples
- + diff --git a/examples/index.js b/examples/index.js index 9eb9f50..4800630 100644 --- a/examples/index.js +++ b/examples/index.js @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom'; import 'react-mdl/extra/material.js'; import 'react-mdl/extra/material.css'; -import './index.scss'; import Example from './Example' diff --git a/examples/package.json b/examples/package.json new file mode 100644 index 0000000..55d6fd6 --- /dev/null +++ b/examples/package.json @@ -0,0 +1,28 @@ +{ + "name": "react-mdl-selectfield", + "description": "React MDL SelectField Component Examples", + "main": "index.js", + "scripts": { + "start": "node ./server.js", + "build": "../node_modules/.bin/cross-env NODE_ENV=production ../node_modules/.bin/webpack --progress --verbose --colors" + }, + "repository": { + "type": "git", + "url": "https://github.com/HriBB/react-mdl-selectfield.git" + }, + "author": { + "name": "Bojan Hribernik", + "email": "bojan.hribernik@gmail.com", + "url": "http://climbuddy.com/" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/HriBB/react-mdl-selectfield/issues" + }, + "homepage": "https://hribb.github.io/react-mdl-selectfield/", + "devDependencies": { + "webpack-dev-middleware": "^1.6.1", + "webpack-hot-middleware": "^2.12.2" + }, + "dependencies": {} +} diff --git a/server.js b/examples/server.js similarity index 90% rename from server.js rename to examples/server.js index 3723940..0ebfe68 100644 --- a/server.js +++ b/examples/server.js @@ -18,7 +18,7 @@ app.use(require('webpack-hot-middleware')(compiler, { })); app.get('*', function(req, res) { - res.sendFile(path.join(__dirname, 'examples', 'index.html')); + res.sendFile(path.join(__dirname, 'index.html')); }); app.listen(3000, 'localhost', function(err) { diff --git a/webpack.config.dev.js b/examples/webpack.config.dev.js similarity index 71% rename from webpack.config.dev.js rename to examples/webpack.config.dev.js index 22559e3..9d7d142 100644 --- a/webpack.config.dev.js +++ b/examples/webpack.config.dev.js @@ -1,21 +1,16 @@ -'use strict'; - var path = require('path'); var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var HtmlWebpackPluginRemove = require('html-webpack-plugin-remove'); module.exports = { devtool: 'cheap-module-eval-source-map', entry: [ 'eventsource-polyfill', 'webpack-hot-middleware/client?path=/__webpack_hmr', - path.resolve(__dirname, 'examples', 'index') + path.resolve(__dirname, 'index') ], output: { - path: path.resolve(__dirname, 'examples', 'dist'), - filename: 'bundle.js' + path: path.resolve(__dirname, 'dist'), + filename: 'examples.js' }, resolve: { extensions: ['', '.js'] @@ -36,8 +31,8 @@ module.exports = { }] }, plugins: [ - new webpack.HotModuleReplacementPlugin(), new webpack.optimize.OccurenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) diff --git a/examples/webpack.config.js b/examples/webpack.config.js new file mode 100644 index 0000000..f16f771 --- /dev/null +++ b/examples/webpack.config.js @@ -0,0 +1,5 @@ +if (process.env.NODE_ENV === 'production') { + module.exports = require('./webpack.config.prod') +} else { + module.exports = require('./webpack.config.dev') +} diff --git a/webpack.config.prod.js b/examples/webpack.config.prod.js similarity index 75% rename from webpack.config.prod.js rename to examples/webpack.config.prod.js index c306213..bd71876 100644 --- a/webpack.config.prod.js +++ b/examples/webpack.config.prod.js @@ -1,5 +1,3 @@ -'use strict'; - var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); @@ -8,11 +6,11 @@ var HtmlWebpackPluginRemove = require('html-webpack-plugin-remove'); module.exports = { entry: [ - path.resolve(__dirname, 'examples', 'index') + path.resolve(__dirname, 'index') ], output: { - path: path.resolve(__dirname, 'examples', 'dist'), - filename: 'example.js' + path: path.resolve(__dirname, 'dist'), + filename: 'examples.js' }, resolve: { extensions: ['', '.js'] @@ -33,15 +31,14 @@ module.exports = { }] }, plugins: [ - new HtmlWebpackPluginRemove('\n '), + new HtmlWebpackPluginRemove('\n '), new HtmlWebpackPlugin({ - template: path.resolve(__dirname, 'examples', 'index.html'), + template: path.resolve(__dirname, 'index.html'), filename: 'index.html', inject: 'body', hash: true, xhtml: true, }), - new webpack.HotModuleReplacementPlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) @@ -59,6 +56,6 @@ module.exports = { screw_ie8: true } }), - new ExtractTextPlugin('example.css', { allChunks: true }) + new ExtractTextPlugin('examples.css') ], }; diff --git a/components/MultiSelectField/MultiSelectField.js b/src/MultiSelectField/MultiSelectField.js similarity index 100% rename from components/MultiSelectField/MultiSelectField.js rename to src/MultiSelectField/MultiSelectField.js diff --git a/components/MultiSelectField/MultiSelectField.scss b/src/MultiSelectField/MultiSelectField.scss similarity index 100% rename from components/MultiSelectField/MultiSelectField.scss rename to src/MultiSelectField/MultiSelectField.scss diff --git a/components/Option/Option.js b/src/Option/Option.js similarity index 100% rename from components/Option/Option.js rename to src/Option/Option.js diff --git a/components/SelectField/SelectField.js b/src/SelectField/SelectField.js similarity index 100% rename from components/SelectField/SelectField.js rename to src/SelectField/SelectField.js diff --git a/components/SelectField/SelectField.scss b/src/SelectField/SelectField.scss similarity index 100% rename from components/SelectField/SelectField.scss rename to src/SelectField/SelectField.scss diff --git a/components/index.js b/src/index.js similarity index 100% rename from components/index.js rename to src/index.js diff --git a/stories/MultiSelectField.story.js b/stories/MultiSelectField.story.js index 2876ffe..dc41a04 100644 --- a/stories/MultiSelectField.story.js +++ b/stories/MultiSelectField.story.js @@ -1,7 +1,7 @@ import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; -import { MultiSelectField, Option } from '../components'; +import { MultiSelectField, Option } from '../src'; storiesOf('MultiSelectField', module) .add('default', () => ( diff --git a/stories/SelectField.story.js b/stories/SelectField.story.js index 4a5d3cb..3efaca4 100644 --- a/stories/SelectField.story.js +++ b/stories/SelectField.story.js @@ -1,7 +1,7 @@ import React from 'react'; import { storiesOf, action } from '@kadira/storybook'; -import { SelectField, Option } from '../components'; +import { SelectField, Option } from '../src'; storiesOf('SelectField', module) .add('default', () => (