Work in progress

HriBB · Aug 16, 2016 · eb29835 · eb29835
1 parent cdf373a
commit eb29835
Show file tree

Hide file tree

Showing 19 changed files with 101 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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 (
-      <div className="example">
-        <SelectField label={'Default'}>
-          <Option value={1}>One</Option>
-          <Option value={2}>Two</Option>
-          <Option value={3}>Three</Option>
-          <Option value={4}>Four</Option>
-          <Option value={5}>Five</Option>
-        </SelectField>
-        <SelectField label={'Editable'} editable>
-          <Option value={1}>One</Option>
-          <Option value={2}>Two</Option>
-          <Option value={3}>Three</Option>
-          <Option value={4}>Four</Option>
-          <Option value={5}>Five</Option>
-        </SelectField>
-        <MultiSelectField label={'Multiselect'}>
-          <Option value={1}>Value One</Option>
-          <Option value={2}>Value Two</Option>
-          <Option value={3}>Value Three</Option>
-          <Option value={4}>Value Four</Option>
-          <Option value={5}>Value Five</Option>
-        </MultiSelectField>
-      </div>
+      <Layout fixedHeader>
+        <Header title={'React MDL SelectField'}>
+          <Navigation>
+            <a href="https://github.com/HriBB/react-mdl-selectfield"><Icon name={'link'}/> GitHub</a>
+          </Navigation>
+        </Header>
+        <Content>
+          <div className={'example'}>
+            <SelectField label={'Default'}>
+              <Option value={1}>One</Option>
+              <Option value={2}>Two</Option>
+              <Option value={3}>Three</Option>
+              <Option value={4}>Four</Option>
+              <Option value={5}>Five</Option>
+            </SelectField>
+            <SelectField label={'Editable'} editable>
+              <Option value={1}>One</Option>
+              <Option value={2}>Two</Option>
+              <Option value={3}>Three</Option>
+              <Option value={4}>Four</Option>
+              <Option value={5}>Five</Option>
+            </SelectField>
+            <MultiSelectField label={'Multiselect'}>
+              <Option value={1}>Value One</Option>
+              <Option value={2}>Value Two</Option>
+              <Option value={3}>Value Three</Option>
+              <Option value={4}>Value Four</Option>
+              <Option value={5}>Value Five</Option>
+            </MultiSelectField>
+          </div>
+        </Content>
+      </Layout>
     )
   }
 }
diff --git a/examples/index.scss → examples/Example.scss b/examples/index.scss → 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
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <title>React MDL Selectfield Component</title>
+    <title>React MDL Selectfield Component Examples</title>
   </head>
   <body>
     <div id="content"></div>
   </body>
-  <script src="./bundle.js"></script>
+  <script src="./examples.js"></script>
 </html>
diff --git 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
@@ -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": "[email protected]",
+    "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 → examples/server.js b/server.js → 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 → examples/webpack.config.dev.js b/webpack.config.dev.js → 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
@@ -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 → examples/webpack.config.prod.js b/webpack.config.prod.js → 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  <script src="./bundle.js"></script>'),
+    new HtmlWebpackPluginRemove('\n  <script src="./examples.js"></script>'),
     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/...ents/MultiSelectField/MultiSelectField.js → src/MultiSelectField/MultiSelectField.js b/...ents/MultiSelectField/MultiSelectField.js → src/MultiSelectField/MultiSelectField.js
diff --git a/...ts/MultiSelectField/MultiSelectField.scss → src/MultiSelectField/MultiSelectField.scss b/...ts/MultiSelectField/MultiSelectField.scss → src/MultiSelectField/MultiSelectField.scss
diff --git a/components/Option/Option.js → src/Option/Option.js b/components/Option/Option.js → src/Option/Option.js
diff --git a/components/SelectField/SelectField.js → src/SelectField/SelectField.js b/components/SelectField/SelectField.js → src/SelectField/SelectField.js
diff --git a/components/SelectField/SelectField.scss → src/SelectField/SelectField.scss b/components/SelectField/SelectField.scss → src/SelectField/SelectField.scss
diff --git a/components/index.js → src/index.js b/components/index.js → src/index.js
diff --git 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
@@ -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', () => (
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ node_modules @@
     .DS_Store
     dist
     lib
+    es
     coverage
     .idea
     examples/bundle.js
@@ Expand Down @@