Add docs setup

jxnblk · jxnblk · commit 267a45a4d3d4 · 2017-08-29T07:54:35.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 dist
-.site
 .nyc_output
 coverage
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,7 @@
 src
+docs
 storybook
-.site
+webpack.config.js
 .nyc_output
 coverage
 test.js*
diff --git a/docs/App.js b/docs/App.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import Grid from 'react-css-grid'
+import { Box } from 'grid-styled'
+import Col from './Col'
+
+const App = props => (
+  <Box p={3}>
+    <Grid>
+      <Col>
+        <h1>React CSS Grid</h1>
+      </Col>
+      <Col>
+        <p>
+          React layout component based on CSS Grid Layout and built with styled-components
+        </p>
+      </Col>
+    </Grid>
+  </Box>
+)
+
+export default App
diff --git a/docs/Col.js b/docs/Col.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export default styled.div`
+  box-shadow: 0 0 0 1px rgba(0, 127, 255, .5);
+`
diff --git a/docs/entry.js b/docs/entry.js
@@ -0,0 +1,5 @@
+import React from 'react'
+import { render } from 'react-dom'
+import App from './App'
+
+render(<App />, app)
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset='utf-8'>
+<meta name='viewport' content='width=device-width, initial-scale=1'>
+<style>*{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;margin:0}</style>
+<div id=app></div>
+<script src=bundle.js></script>
diff --git a/package.json b/package.json
@@ -1,13 +1,12 @@
 {
   "name": "react-css-grid",
   "version": "1.0.0",
-  "description": "React layout component based on CSS Grid Layout",
+  "description": "React layout component based on CSS Grid Layout and built with styled-components",
   "main": "dist/index.js",
   "scripts": {
     "prepublish": "babel src -d dist",
-    "start": "start-storybook -c storybook -p 8000",
-    "build": "build-storybook -c storybook -o .site",
-    "deploy": "storybook-to-ghpages",
+    "start": "webpack-dev-server",
+    "build": "webpack -p",
     "test": "nyc ava"
   },
   "keywords": [
@@ -27,17 +26,22 @@
   },
   "devDependencies": {
     "@storybook/react": "^3.2.8",
-    "@storybook/storybook-deployer": "^2.0.0",
     "ava": "^0.22.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.26.0",
+    "grid-styled": "^2.0.0-10",
     "nyc": "^11.1.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "react-live": "^1.7.0",
+    "react-test-renderer": "^15.6.1",
+    "react-x-ray": "^1.0.0-2",
+    "refunk": "^1.0.0-2",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
   },
   "ava": {
     "require": [
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,37 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  entry: './docs/entry.js',
+
+  output: {
+    path: path.join(__dirname, 'docs'),
+    filename: 'bundle.js'
+  },
+
+  resolve: {
+    alias: {
+      'react-css-grid': path.join(__dirname, 'src')
+    }
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    })
+  ],
+
+  devServer: {
+    contentBase: 'docs/'
+  }
+}

-Original file line number
+Diff line change
@@ @@ -1,4 +1,3 @@ @@
 dist
 -.site
 .nyc_output
 coverage