2.0 release, take two (sam-silv#81)

* WIP * Bump dependencies * Remove log statements * Bump react-scripts * Add built storybook * 2.0.0 * Update docs, WIP * 2.0.1 * Use stories for testing * Add storybook to docs dir * Fix event listener cleanup * Use offsetX for positioning * Update snapshots * 2.0.2 * Clean up storybooks * Build scripts * 2.0.3
HVF · Jun 13, 2017 · 5804f0c · 5804f0c
1 parent d4f2b0b
commit 5804f0c
Show file tree

Hide file tree

Showing 17 changed files with 3,913 additions and 1,844 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,8 @@
+src
+test
+*.test.js
+stories
+public
+docs
+.storybook
+circle.yml
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,7 +1,11 @@
-import { configure } from '@kadira/storybook';
+import { configure, addDecorator } from "@storybook/react";
+import { setOptions } from "@storybook/addon-options";
+import centered from "@storybook/addon-centered";
 
-function loadStories() {
-  require('../src/stories');
-}
+addDecorator(centered);
 
-configure(loadStories, module);
+setOptions({
+  name: "Histoslider"
+});
+
+configure(() => require("../src/stories"), module);
diff --git a/README.md b/README.md
@@ -6,36 +6,37 @@ A D3 based histogram slider component for React. Useful for exploring distributi
 
 ## Usage
 
-`npm install --save histoslider`
+`yarn add histoslider`
 
 Yay, glad we got that out of the way.
 
 ### Component
 ```JSX
   <Histoslider
-    // An array of data to show on the slider
-    data={[0, 1, 2, 2, 3, 4, 4, 5, 5, 5, 6, 6, 7]}
-    // The start of the histogram, defaults to the minimum value in the array
-    start={0}
-    // The end of the histogram, defaults to the maximum value in the array
-    end={10}
-    // The size of the histogram buckets, defaults 1
-    bucketSize={1}
+    // An array of objects to create the histogram
+    data={[
+      {
+        x0: 0,    // Start of the bucket
+        x: 1,     // End of the bucket
+        y: 100    // Value
+      },
+      {
+        x0: 1,    // Start of the bucket
+        x: 2,     // End of the bucket
+        y: 120    // Value
+      },
+      ...
+    ]}
     // How much to pad the slider and histogram by, defaults to 20
     padding={20}
     // The extent of the selection, this doesn't have to be sorted (and you shouldn't sort it to store it)
     selection={[number, number]}
     // A function to handle a change in the selection
     onChange={array => { console.log(array) }}
-    // Set showOnDrag to enable slide up behavior
-    showOnDrag
   />
 ```
-
-A few things in the works, including just passing buckets to Histoslider, and tests.
-
 ## Development
 
-`npm run dev`
+`yarn start`
 
-I'm using [Standard]() for this project, although if that gets in the way I'm more than happy to consider other options.
+Hack away :)
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -0,0 +1,22 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script>
+          if (window.parent !== window) {
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+          }
+        </script>
+        <title>Storybook</title>
+
+
+      </head>
+      <body>
+        <div id="root"></div>
+        <div id="error-display"></div>
+        <script src="static/preview.2d9886a93f54c3943f43.bundle.js"></script>
+      </body>
+    </html>
+
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,46 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="storybook-version" content="3.1.3">
+        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+        <title>Storybook</title>
+        <style>
+          /*
+            When resizing panels, the drag event breaks if the cursor
+            moves over the iframe. Add the 'dragging' class to the body
+            at drag start and remove it when the drag ends.
+           */
+          .dragging iframe {
+            pointer-events: none;
+          }
+
+          /* Styling the fuzzy search box placeholders */
+          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox::-moz-placeholder { /* Firefox 19+ */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox:focus{
+            border-color: #EEE !important;
+          }
+
+          .btn:hover{
+            background-color: #eee
+          }
+        </style>
+
+      </head>
+      <body style="margin: 0;">
+        <div id="root"></div>
+        <script src="static/manager.202bc8670616981e4d71.bundle.js"></script>
+      </body>
+    </html>
+
diff --git a/docs/static/manager.202bc8670616981e4d71.bundle.js b/docs/static/manager.202bc8670616981e4d71.bundle.js
diff --git a/docs/static/preview.2d9886a93f54c3943f43.bundle.js b/docs/static/preview.2d9886a93f54c3943f43.bundle.js
diff --git a/package.json b/package.json
@@ -1,20 +1,36 @@
 {
   "name": "histoslider",
-  "version": "1.0.1",
+  "version": "2.0.3",
+  "main": "./lib/index.js",
   "devDependencies": {
-    "@kadira/storybook": "^2.35.3",
-    "react-scripts": "^1.0.0"
+    "@storybook/addon-actions": "^3.1.2",
+    "@storybook/addon-centered": "^3.1.2",
+    "@storybook/addon-options": "^3.1.2",
+    "@storybook/addon-storyshots": "^3.1.2",
+    "@storybook/react": "3.1.3",
+    "babel-cli": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "d3-array": "^1.2.0",
+    "d3-format": "^1.2.0",
+    "d3-scale": "^1.0.6",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-scripts": "^1.0.7",
+    "react-test-renderer": "^15.5.4"
   },
   "peerDependencies": {
-    "d3-array": "^1.0.2",
-    "d3-format": "^1.0.2",
-    "d3-scale": "^1.0.4",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "d3-array": "^1.2.0",
+    "d3-format": "^1.2.0",
+    "d3-scale": "^1.0.6",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
   },
   "scripts": {
     "test": "react-scripts test --env=jsdom",
     "start": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public -o docs",
+    "build": "babel src --out-dir lib",
+    "prepublish": "npm run build"
   }
 }