Merge pull request #38 from Tripwire/fix/storybook-builds

chore(pkg): kick storybook

README.md

@@ -2,7 +2,7 @@
 
 <img src="https://raw.githubusercontent.com/cdaringe/octagon/master/img/octagon.png" height="80px" />
 
-[ ![Codeship Status for Tripwire/octagon](https://app.codeship.com/projects/de913c80-aab0-0134-4a1e-5ab626077bc6/status?branch=master)](https://app.codeship.com/projects/192040) [![Coverage Status](https://coveralls.io/repos/github/Tripwire/octagon/badge.svg?branch=master)](https://coveralls.io/github/Tripwire/octagon?branch=master) ![](https://img.shields.io/badge/standardjs-%E2%9C%93-brightgreen.svg) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+[ ![Codeship Status for Tripwire/octagon](https://app.codeship.com/projects/de913c80-aab0-0134-4a1e-5ab626077bc6/status?branch=master)](https://app.codeship.com/projects/192040)  ![](https://img.shields.io/badge/standardjs-%E2%9C%93-brightgreen.svg) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 pattern library (storybook) & react component api
 

package.json

@@ -6,13 +6,8 @@
     "lib"
   ],
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
-    "@kadira/storybook-addon-knobs": "^1.4.1",
-    "@kadira/storybook-addon-notes": "^1.0.1",
-    "@kadira/storybook-addons": "^1.6.1",
     "@semantic-release/condition-codeship": "^1.1.0",
     "@semantic-release/release-notes-generator": "^2.0.0",
-    "autoprefixer": "^6.5.2",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
     "babel-jest": "^19.0.0",
@@ -30,8 +25,10 @@
     "coveralls": "^2.11.15",
     "cross-spawn-promise": "^0.9.2",
     "faker": "^4.1.0",
+    "file-loader": "^0.10.1",
     "fs-extra": "^2.0.0",
     "gh-pages": "^0.12.0",
+    "glob": "^7.1.1",
     "gulp": "^3.9.1",
     "html-loader": "^0.4.4",
     "javascript-natural-sort": "^0.7.1",
@@ -53,29 +50,28 @@
     "semantic-release-cli": "^3.0.2",
     "semantic-ui": "^2.2.6",
     "standard": "^9.0.0",
-    "storybook-host": "^1.0.7",
-    "url": "^0.11.0"
+    "style-loader": "^0.13.2",
+    "url": "^0.11.0",
+    "webpack": "^1.13.1"
   },
   "dependencies": {
-    "d3": "^4.4.0",
+    "d3": "^4.7.1",
     "elegant-icons": "^0.0.1",
-    "flexbox-react": "^4.1.0",
-    "glob": "^7.1.1",
+    "flexbox-react": "^4.2.1",
     "lato-font": "^2.0.0",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
     "semantic-ui-react": "^0.66.0"
   },
   "scripts": {
     "build": "node scripts/build",
-    "build-storybook": "node scripts/build storybook",
-    "storybook": "start-storybook -p 6007",
     "secure": "nsp check",
     "lint": "standard 'src/**/*.js' '.storybook/**/*.js' 'scripts/**/*.js' 'test/**/*.js' 'stories/**/*.js'",
     "test": "echo 'TBD'",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
     "styleguide": "styleguidist server",
     "styleguide:build": "styleguidist build",
+    "styleguide:server": "styleguidist server",
     "start": "node scripts/start"
   },
   "ripcord": {

scripts/builder.js

@@ -10,7 +10,6 @@ const pify = require('pify')
 const os = require('os')
 
 const exec = pify(cp.exec, { multiArgs: true })
-const spawn = require('cross-spawn-promise')
 const copy = pify(fs.copy)
 const mkdirp = pify(fs.mkdirp)
 const remove = pify(fs.remove)
@@ -27,11 +26,9 @@ module.exports = {
   get semanticCSSFilename () { return path.join(this.stylesDist, 'semantic.css') },
   get stylesDist () { return path.join(this.distDir, 'styles') },
   get styleguidistDist () { return path.join(this.projectRoot, 'styleguide') },
-  get staticStorybookDist () { return path.join(this.projectRoot, 'storybook-static') },
   get assetsDist () { return path.join(this.distDir, 'assets') },
   /**
    * Build full lib.
-   * @NOTE, does not build storybook. {@see this.storybook}
    * @returns {Promise}
    */
   build () {
@@ -48,7 +45,6 @@ module.exports = {
       remove(this.coverageDir),
       remove(this.distDir),
       remove(this.semanticDist),
-      remove(this.staticStorybookDist),
       remove(this.styleguidistDist)
     ])
   },
@@ -60,7 +56,7 @@ module.exports = {
   },
   octagonComponentJs (opts) {
     opts = opts || {}
-    const args = [this.getBin('babel'), 'src', '-d', this.componentDist, '--ignore', '*.stories.js', '--source-maps']
+    const args = [this.getBin('babel'), 'src', '-d', this.componentDist, '--source-maps']
     if (opts.watch) args.push('--watch')
     return Promise.resolve()
     .then(() => mkdirp(this.componentDist))
@@ -98,16 +94,5 @@ module.exports = {
     // ref: https://github.com/Semantic-Org/Semantic-UI/issues/2171
     return this.semanticBuild()
     .then(() => this.copySemanticAssets())
-  },
-  storybook () {
-    return this.build()
-    .then(() => Promise.all([
-      spawn(this.getBin('build-storybook'), { cwd: this.projectRoot, stdio: 'inherit' }),
-      spawn('npm', ['run', 'styleguide:build'], { cwd: this.projectRoot, stdio: 'inherit' })
-    ]))
-    .then(() => copy(
-      this.styleguidistDist,
-      path.join(this.staticStorybookDist, path.basename(this.styleguidistDist))
-    ))
   }
 }

src/components/charts/AreaChart/AreaChart.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PlotArea from './PlotArea'
-import Immutable from 'immutable'
 import Axis from './Axis'
 import ToolTip from './ToolTip'
 import Dots from '../Chart/Dots'
@@ -105,7 +104,7 @@ class AreaChart extends React.Component {
     const margin = { top: 5, right: 50, bottom: 20, left: 50 }
     const innerWidth = width - (margin.left + margin.right)
     const innerHeight = height - (margin.top + margin.bottom)
-    const data = Immutable.fromJS(this.props.data).toJS() // copy data from props
+    const data = this.props.data
     let xAxis = null
     let xScale = null
     let xScaleAxis = null

src/components/charts/BarChart/BarChart.jsx

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react'
 import Rect from './Rect'
-import Immutable from 'immutable'
 import ToolTip from './BarChartTooltip'
 import * as ChartUtils from '../Chart/utils'
 var d3 = Object.assign({}, require('d3-time-format'))
@@ -53,7 +52,7 @@ class BarChart extends React.Component {
     const innerWidth = width - (margin.left + margin.right)
     const innerHeight = height - (margin.top + margin.bottom)
     const transform = `translate(-${margin.left}, ${margin.top})`
-    const data = Immutable.fromJS(this.props.data).toJS() // copy data from props
+    const data = this.props.data
     let xScale = null
 
     // const xScale = ChartUtils.xScaleBand(data, innerWidth, barPadding);

src/components/suir/SUI.examples.md

@@ -0,0 +1,5 @@
+## CSS Theme
+
+This is a dummy component just to import our CSS!
+
+    require('../../../lib/styles/semantic.css')

src/components/suir/radio/Radio.examples.md

@@ -2,8 +2,8 @@
 
 Radio toggle
 
-     const Radio = require('semantic-ui-react').Radio;
-     <Radio toggle />
+    const Radio = require('semantic-ui-react').Radio;
+    <Radio toggle />
 
 Standard Radio
 

styleguide.config.js

@@ -10,12 +10,6 @@ const glob = require('glob')
 const fs = require('fs')
 const builder = require('./scripts/builder')
 
-const componentStyles = glob
-  .sync(`${__dirname}/src/**/*.css`)
-  .filter(filename => !filename.match(/components.suir/))
-  .filter(filename => !filename.match(/variables.css/))
-  .concat([builder.semanticCSSFilename])
-
 const suirExamples = glob.sync(`${__dirname}/src/components/suir/**/*.examples.md`)
 
 var semanticCSSStat = fs.lstatSync(builder.semanticCSSFilename)
@@ -48,12 +42,12 @@ module.exports = {
   },
   skipComponentsWithoutExample: true,
   webpackConfig: {
-    entry: componentStyles,
     output: {
       path: PATHS.dist,
       publicPath: '/',
       filename: 'bundle.js'
     },
+    devtool: 'eval',
     module: {
       preLoaders: [
         {
@@ -65,7 +59,7 @@ module.exports = {
       loaders: [
         {
           test: /\.(jpe?g|png|gif|svg)$/i,
-          loader: 'file?name=[name].[ext]'
+          loader: 'file-loader?name=[name].[ext]'
         },
         {
           test: /\.css?$/,