Merge pull request #3 from Tripwire/slcomponents

feat(stories): add initial components and scaffolding for import from…

.gitignore

@@ -13,6 +13,7 @@ npm-debug.log
 
 semantic/src/themes/*
 !semantic/src/themes/default
+!semantic/src/themes/tripwire
 semantic/dist
 # ^ must force add to prevent rev churn.  release process shall force add, perhaps?
 # i forsee this bothering someone in the future.  sorry dude(ette)!
@@ -22,3 +23,5 @@ semantic/dist
 storybook-static
 .nyc_output
 /docs
+.out
+lib

.storybook/config.js

@@ -1,4 +1,5 @@
-import '../lib/styles/semantic.css'
+// import '../lib/styles/semantic.css'
+import '../semantic/dist/semantic.css'
 import './styles.css'
 import { configure } from '@kadira/storybook'
 import { basename } from 'path'

.storybook/webpack.config.js

@@ -0,0 +1,55 @@
+const path = require('path')
+const cssnext = require('postcss-cssnext')
+const autoprefixer = require('autoprefixer')
+const impy = require('postcss-import')
+const neat = require('postcss-neat')
+const rucksack = require('rucksack-css')
+const PATHS = {
+  app: './src/stories/index.js',
+  dist: path.join(__dirname, 'dist')
+}
+module.exports = {
+  entry: {
+    javascript: PATHS.app
+  },
+  output: {
+    path: PATHS.dist,
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  devServer: {
+    contentBase: PATHS.dist
+  },
+  eslint: {
+    emitWarning: true
+  },
+  watchOptions: {
+    poll: true
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        loader: 'file?name=[name].[ext]'
+      },
+      {
+        test: /\.css?$/,
+        loaders: [ 'style-loader', 'css-loader?importLoaders=1', 'postcss-loader' ]
+
+      },
+      {
+        test: /\.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
+        loader: 'file-loader?name=fonts/[name].[ext]'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  postcss: function () {
+    return {
+      defaults: [impy, cssnext, neat, rucksack],
+      cleaner: [autoprefixer({ browsers: ['last 2 version'] })]
+    }
+  }
+}

.vscode/settings.json

@@ -1,4 +1,5 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "eslint.enable": false
-}
+  "standard.enable": true,
+  "javascript.validate.enable": false
+}

README.md

@@ -12,13 +12,14 @@ this package simply applies a custom theme over semantic-ui, re-exports react-se
 
 ## install
 
-`npm install --save octagon`
+`npm install --save octagon` or `yarn add --dev octagon`
 
 ## usage - pattern library / storybook
 
 - clone this repository
-- run `npm install` from the project directory
-- `npm start`
+- run `yarn` from the project directory
+- run `yarn run build` from the /semantic directory
+- `yarn start`
 
 open the url shown to see the latest storybook!
 
@@ -36,15 +37,15 @@ octagon imports, occasionally wraps, and re-exports piece-wise components from [
 ## development
 
 - clone this repository
-- run `npm install`
+- run `yarn`
 
 now you're off to the races :horse_racing:!  this package offers two different development modes, depending on your use case.  you can run both development modes in parallel, if needed.
 
 ### component and styles development
 
 **useful** for when you're developing styles and components for this package only.  in other words, "storybook" development.
 
-`npm run storybook-dev`
+`yarn run storybook-dev`
 
 - watches the styles project for changes and rebuilds styles on changes. refreshes the storybook UI.
 - watches the react component source for changes and rebuilds components & stories on changes. refreshes the storybook UI.
@@ -53,9 +54,9 @@ now you're off to the races :horse_racing:!  this package offers two different d
 
 ### react component api distribution
 
-**useful** if you've `npm link`ed your front-end project with `octagon` and want to iterate on components without suffering the build/publish lifecycle for `octagon`.
+**useful** if you've `yarn link`ed your front-end project with `octagon` and want to iterate on components without suffering the build/publish lifecycle for `octagon`.
 
-`npm run component-api-dev`
+`yarn run component-api-dev`
 
 watches `src/` for react component changes and recompiles the distribution output (e.g. `lib/`).