refactor(storybook): address PR comments

Author: landonreed

Diff for: .storybook/main.js

@@ -9,6 +9,8 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/preset-create-react-app'
   ],
+  // Ensures that, when running storybook, webpack rules (loaders for css, file,
+  // etc.) from the custom config are used.
   webpackFinal: (config) => {
     return { ...config, module: { ...config.module, rules: custom.module.rules } };
   }

Diff for: .storybook/preview.js

@@ -1,88 +1,72 @@
 const path = require('path');
 const webpack = require('webpack');
 
-/*
- * SplitChunksPlugin is enabled by default and replaced
- * deprecated CommonsChunkPlugin. It automatically identifies modules which
- * should be splitted of chunk by heuristics using module duplication count and
- * module category (i. e. node_modules). And splits the chunks…
- *
- * It is safe to remove "splitChunks" from the generated configuration
- * and was added as an educational example.
- *
- * https://webpack.js.org/plugins/split-chunks-plugin/
- *
- */
-
-/*
- * We've enabled TerserPlugin for you! This minifies your app
- * in order to load faster and run less javascript.
- *
- * https://github.com/webpack-contrib/terser-webpack-plugin
- *
+/**
+ * This is a (mostly) auto-generated webpack config that storybook created when
+ * initializing the storybook.
  */
 
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
-	mode: 'development',
-	entry: '../lib/transitive.js',
+  mode: 'development',
+  entry: '../lib/transitive.js',
 
-	output: {
-		path: path.resolve(__dirname, 'build'),
-	},
+  output: {
+    path: path.resolve(__dirname, 'build'),
+  },
 
-	plugins: [new webpack.ProgressPlugin()],
+  plugins: [new webpack.ProgressPlugin()],
 
-	module: {
-		rules: [
-			{
-				test: /\.(js|jsx)$/,
-				include: [path.resolve(__dirname, '../lib'), path.resolve(__dirname, '../stories')],
-				loader: 'babel-loader',
-			},
-			{
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        include: [path.resolve(__dirname, '../lib'), path.resolve(__dirname, '../stories')],
+        loader: 'babel-loader',
+      },
+      {
         test: /\.(png|jpe?g|gif)$/i,
         use: [
           {
             loader: 'file-loader',
           },
         ],
       },
-			{
-				test: /.css$/,
+      {
+        test: /.css$/,
 
-				use: [
-					{
-						loader: 'style-loader',
-					},
-					{
-						loader: 'css-loader',
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
 
-						options: {
-							sourceMap: true,
-						},
-					},
-				],
-			},
-		],
-	},
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
 
-	optimization: {
-		minimizer: [new TerserPlugin()],
+  optimization: {
+    minimizer: [new TerserPlugin()],
 
-		splitChunks: {
-			cacheGroups: {
-				vendors: {
-					priority: -10,
-					test: /[\\/]node_modules[\\/]/,
-				},
-			},
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          priority: -10,
+          test: /[\\/]node_modules[\\/]/,
+        },
+      },
 
-			chunks: 'async',
-			minChunks: 1,
-			minSize: 30000,
-			name: false,
-		},
-	},
+      chunks: 'async',
+      minChunks: 1,
+      minSize: 30000,
+      name: false,
+    },
+  },
 };

Diff for: .storybook/webpack.config.js

@@ -12,6 +12,38 @@ A Transitive map can be embedded as a freestanding web element or overlaid onto
 
 Transitive is supported by the [Mobility Lab](http://mobilitylab.org/) [Transit Tech Initiative](http://mobilitylab.org/tech/transit-tech-initiative/). Read more in [this Mobility Lab article](http://mobilitylab.org/2014/04/16/the-technology-behind-a-new-kind-of-travel-planning/).
 
+## Storybook
+
+To view samples of Transitive in action, follow these steps:
+
+```bash
+git clone https://github.com/conveyal/transitive.js
+cd transitive.js
+yarn start
+# Go to http://localhost:5555 to view the storybook (the web page should open automatically)
+```
+
+### Usage of otp-ui
+
+These stories rely on the [otp-ui](https://github.com/opentripplanner/otp-ui)
+project to render transitive data on a Leaflet map. Specifically, it uses:
+- @opentripplanner/base-map - renders a Leaflet base map
+- @opentripplanner/core-utils - converts an OpenTripPlanner itinerary object into
+  data that Transitive can read.
+- @opentripplanner/transitive-overlay - copied from the otp-ui project and
+  replaces the Transitive import with the local copy (useful for testing local
+  changes)
+
+### BYOD - Bring your own data
+
+To test out how your own data (e.g., an OpenTripPlanner itinerary) would appear in
+Transitive, try replacing the `itinerary` prop in the [Itinerary](http://localhost:5555/?path=/story/example-transitive--itinerary) (for OpenTripPlanner itineraries) story (or `transitiveData`
+in the [Profile](http://localhost:5555/?path=/story/example-transitive--profile)
+story).
+
+You can also override the default style by adding a `style` prop. See a style
+example here: https://github.com/conveyal/transitive-demo/blob/master/styles.js
+
 ## Demo
 
 * [Demo of a freestanding Transitive map](http://conveyal.github.io/transitive.js)