Merge branch 'master' into angular-custom-styles

storybookjs · Jan 31, 2018 · 9fb1a16 · 9fb1a16
2 parents 511e892 + 5eca2b3
commit 9fb1a16
Show file tree

Hide file tree

Showing 29 changed files with 169 additions and 49 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,7 @@
 {
   "presets": ["env", "stage-0", "react"],
   "plugins": [
+    "babel-plugin-macros",
     ["transform-runtime", {
       "polyfill": false,
       "regenerator": true

diff --git a/addons/notes/package.json b/addons/notes/package.json
@@ -4,8 +4,8 @@
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
-    "storybook",
-    "notes"
+    "notes",
+    "storybook"
   ],
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
@@ -11,9 +11,9 @@
   },
   "scripts": {
     "build-storybook": "build-storybook",
+    "example": "jest storyshot.test",
     "prepare": "node ../../scripts/prepare.js",
-    "storybook": "start-storybook -p 6006",
-    "example": "jest storyshot.test"
+    "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
     "@storybook/channels": "^3.4.0-alpha.6",

diff --git a/addons/viewport/package.json b/addons/viewport/package.json
@@ -2,14 +2,14 @@
   "name": "@storybook/addon-viewport",
   "version": "3.4.0-alpha.6",
   "description": "Storybook addon to change the viewport size to mobile",
-  "main": "register.js",
   "keywords": [
     "storybook"
   ],
+  "license": "MIT",
+  "main": "register.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
-  "license": "MIT",
   "dependencies": {
     "@storybook/components": "^3.4.0-alpha.6",
     "global": "^4.3.2",

diff --git a/app/angular/package.json b/app/angular/package.json
@@ -35,6 +35,7 @@
     "autoprefixer": "^7.2.5",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-macros": "^2.0.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",

diff --git a/app/angular/src/server/config/babel.js b/app/angular/src/server/config/babel.js
@@ -1,24 +1,29 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-const findCacheDir = require('find-cache-dir');
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables a cache directory for faster-rebuilds
-  // `find-cache-dir` will create the cache directory under the node_modules directory.
-  cacheDirectory: findCacheDir({ name: 'react-storybook' }),
   presets: [
-    require.resolve('babel-preset-env'),
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
   ],
+  plugins: [
+    require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
 };
diff --git a/app/polymer/package.json b/app/polymer/package.json
@@ -33,6 +33,7 @@
     "autoprefixer": "^7.1.6",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.0.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",

diff --git a/app/polymer/src/server/config/babel.js b/app/polymer/src/server/config/babel.js
@@ -15,6 +15,7 @@ module.exports = {
     require.resolve('babel-preset-react'),
   ],
   plugins: [
+    require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-transform-regenerator'),
     [
       require.resolve('babel-plugin-transform-runtime'),

diff --git a/app/react-native/package.json b/app/react-native/package.json
@@ -33,6 +33,7 @@
     "@storybook/ui": "^3.4.0-alpha.6",
     "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.0.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",

diff --git a/app/react-native/src/server/config/babel.js b/app/react-native/src/server/config/babel.js
@@ -11,6 +11,7 @@ module.exports = {
     require.resolve('babel-preset-react'),
   ],
   plugins: [
+    require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-syntax-trailing-function-commas'),
     require.resolve('babel-plugin-syntax-async-functions'),
     require.resolve('babel-plugin-transform-class-properties'),

diff --git a/app/react/package.json b/app/react/package.json
@@ -34,6 +34,7 @@
     "airbnb-js-shims": "^1.4.1",
     "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.0.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",

diff --git a/app/react/src/server/config/babel.js b/app/react/src/server/config/babel.js
@@ -15,6 +15,7 @@ module.exports = {
     require.resolve('babel-preset-react'),
   ],
   plugins: [
+    require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-transform-regenerator'),
     [
       require.resolve('babel-plugin-transform-runtime'),

diff --git a/app/vue/package.json b/app/vue/package.json
@@ -32,6 +32,7 @@
     "airbnb-js-shims": "^1.4.1",
     "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.0.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",

diff --git a/app/vue/src/server/config/babel.js b/app/vue/src/server/config/babel.js
@@ -15,6 +15,7 @@ module.exports = {
     require.resolve('babel-preset-react'),
   ],
   plugins: [
+    require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-transform-regenerator'),
     [
       require.resolve('babel-plugin-transform-runtime'),

diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md
@@ -143,6 +143,26 @@ storiesOf('My App/Buttons/Emoji', module)
   ));
 ```
 
+## Generating nesting path based on __dirname
+
+The name is just a javascript string, by using a template literal, you can easily interpolate data.
+
+One example would be to use `base` from [`paths.macro`](https://github.com/storybooks/paths.macro):
+```js
+import React from 'react';
+import base from 'paths.macro';
+
+import { storiesOf } from '@storybook/react';
+
+import BaseButton from '../components/BaseButton';
+
+storiesOf(`Other|${base}/Dirname Example`, module)
+  .add('story 1', () => <BaseButton label="Story 1" />)
+  .add('story 2', () => <BaseButton label="Story 2" />);
+```
+
+*This uses [babel-plugin-macros](https://github.com/kentcdodds/babel-plugin-macros)*.
+
 ## Run multiple storybooks
 
 You can run multiple storybooks for different kinds of stories (or components). To do that, you can create different NPM scripts to start different stories. See:

diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
@@ -1,17 +1,17 @@
 {
   "name": "angular-cli",
   "version": "3.4.0-alpha.6",
+  "private": true,
   "license": "MIT",
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "build-storybook": "build-storybook -s src",
     "e2e": "ng e2e",
+    "ng": "ng",
+    "start": "ng serve",
     "storybook": "start-storybook -p 9008 -s src/assets",
-    "build-storybook": "build-storybook -s src"
+    "test": "ng test"
   },
-  "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.2",
     "@angular/common": "^5.2.2",

diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,7 @@
 {
   "name": "cra-kitchen-sink",
   "version": "3.4.0-alpha.6",
+  "private": true,
   "scripts": {
     "build": "react-scripts build",
     "build-storybook": "build-storybook -s public",
@@ -41,6 +42,5 @@
     "enzyme-to-json": "^3.3.1",
     "jest": "^22.1.4",
     "react-scripts": "^1.1.0"
-  },
-  "private": true
+  }
 }
diff --git a/examples/official-storybook/README.md b/examples/official-storybook/README.md
@@ -5,3 +5,4 @@ This storybook includes stories for:
  - `@storybook/components` - reusable UI components for addon authors
  - `@storybook/ui` - the UI of storybook itself
  - `@storybook/addon-*` - various addons.
+ - `@storybook/other-*` - various examples.
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
@@ -1,12 +1,13 @@
 {
   "name": "official-storybook",
   "version": "3.4.0-alpha.6",
+  "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./",
-    "storybook": "start-storybook -p 9010 -c ./",
     "chromatic": "chromatic test --storybook-addon --exit-zero-on-changes --app-code ab7m45tp9p",
     "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
-    "image-snapshots": "yarn run build-storybook && jest --projects=./image-snapshots"
+    "image-snapshots": "yarn run build-storybook && jest --projects=./image-snapshots",
+    "storybook": "start-storybook -p 9010 -c ./"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^3.4.0-alpha.6",
@@ -33,11 +34,11 @@
     "format-json": "^1.0.3",
     "global": "^4.3.2",
     "jest": "^21.2.1",
+    "paths.macro": "^2.0.2",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-chromatic": "^0.7.9",
     "react-dom": "^16.2.0",
     "uuid": "^3.2.1"
-  },
-  "private": true
+  }
 }
diff --git a/examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot b/examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Other|/stories//Dirname Example story 1 1`] = `
+<button>
+  Story 1
+</button>
+`;
+
+exports[`Storyshots Other|/stories//Dirname Example story 2 1`] = `
+<button>
+  Story 2
+</button>
+`;
diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import base from 'paths.macro';
+
+import { storiesOf } from '@storybook/react';
+
+import BaseButton from '../components/BaseButton';
+
+storiesOf(`Other|${base}/Dirname Example`, module)
+  .add('story 1', () => <BaseButton label="Story 1" />)
+  .add('story 2', () => <BaseButton label="Story 2" />);
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
@@ -1,11 +1,11 @@
 {
   "name": "polymer-cli",
   "version": "3.4.0-alpha.6",
+  "private": true,
   "scripts": {
     "start": "webpack-dev-server",
     "storybook": "start-storybook -p 9001 -c .storybook"
   },
-  "private": true,
   "dependencies": {
     "@polymer/polymer": "^2.4.0",
     "@storybook/addon-actions": "^3.4.0-alpha.6",

diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
@@ -2,6 +2,16 @@
   "name": "vue-example",
   "version": "3.4.0-alpha.6",
   "private": true,
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build-storybook": "build-storybook -s public",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "storybook": "start-storybook -p 9009 -s public"
+  },
+  "dependencies": {
+    "vue": "^2.5.13",
+    "vuex": "^3.0.0"
+  },
   "devDependencies": {
     "@storybook/addon-actions": "^3.4.0-alpha.6",
     "@storybook/addon-centered": "^3.4.0-alpha.6",
@@ -25,15 +35,5 @@
     "vue-template-compiler": "^2.5.13",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.11.1"
-  },
-  "dependencies": {
-    "vue": "^2.5.13",
-    "vuex": "^3.0.0"
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
   }
 }
diff --git a/lib/cli/package.json b/lib/cli/package.json
@@ -21,8 +21,8 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "scripts": {
-    "test-latest-cra": "cd test && ./test_latest_cra.sh",
-    "test": "cd test && ./run_tests.sh"
+    "test": "cd test && ./run_tests.sh",
+    "test-latest-cra": "cd test && ./test_latest_cra.sh"
   },
   "dependencies": {
     "@storybook/codemod": "^3.4.0-alpha.6",

diff --git a/lib/components/package.json b/lib/components/package.json
@@ -10,9 +10,9 @@
     "url": "https://github.com/storybooks/storybook.git"
   },
   "scripts": {
+    "build-storybook": "build-storybook",
     "prepare": "node ../../scripts/prepare.js",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
     "glamor": "^2.20.40",

diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -105,7 +105,7 @@ export function resolveStoryHierarchy(storyName = '', hierarchySeparator) {
     return [storyName];
   }
 
-  return storyName.split(new RegExp(hierarchySeparator));
+  return storyName.split(new RegExp(hierarchySeparator)).filter(segment => !!segment);
 }
 
 export function prepareStoriesForHierarchy(stories, hierarchySeparator, hierarchyRootSeparator) {

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
+    "babel-plugin-macros": "^2.0.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "chalk": "^2.3.0",

diff --git a/scripts/netlify-build.sh b/scripts/netlify-build.sh