GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2791 from storybooks/ndelangen/add-dirname

Browse Source 
ADD __dirname support
This commit is contained in:
Igor 2018-01-31 09:33:51 +02:00 committed by GitHub
commit 5eca2b3f77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 169 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.babelrc
View File

@ -1,6 +1,7 @@
{
"presets": ["env", "stage-0", "react"],
"plugins": [
"babel-plugin-macros",
["transform-runtime", {
"polyfill": false,
"regenerator": true

4
addons/notes/package.json
View File

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

4
addons/storyshots/package.json
View File

@ -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",

4
addons/viewport/package.json
View File

@ -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",

1
app/angular/package.json
View File

@ -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",

37
app/angular/src/server/config/babel.js vendored
View File

@ -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,
},
],
],
};

1
app/polymer/package.json
View File

@ -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",

1
app/polymer/src/server/config/babel.js
View File

@ -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'),

1
app/react-native/package.json
View File

@ -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",

1
app/react-native/src/server/config/babel.js vendored
View File

@ -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'),

1
app/react/package.json
View File

@ -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",

1
app/react/src/server/config/babel.js
View File

@ -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'),

1
app/vue/package.json
View File

@ -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",

1
app/vue/src/server/config/babel.js
View File

@ -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'),

20
docs/src/pages/basics/writing-stories/index.md
View File

@ -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:

10
examples/angular-cli/package.json
View File

@ -1,17 +1,17 @@
{
"name": "angular-cli",
"version": "3.4.0-alpha.6",
"private": true,
"license": "MIT",
"scripts": {
"build": "ng build",
"build-storybook": "build-storybook -s src",
"e2e": "ng e2e",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"e2e": "ng e2e",
"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",

4
examples/cra-kitchen-sink/package.json
View File

@ -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
}
}

1
examples/official-storybook/README.md
View File

@ -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.

9
examples/official-storybook/package.json
View File

@ -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
}
}

13
examples/official-storybook/stories/__snapshots__/other-dirname.stories.storyshot Normal file
View File

@ -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>
`;

10
examples/official-storybook/stories/other-dirname.stories.js Normal file
View File

@ -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" />);

2
examples/polymer-cli/package.json
View File

@ -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",

20
examples/vue-kitchen-sink/package.json
View File

@ -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"
}
}

4
lib/cli/package.json
View File

@ -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",

4
lib/components/package.json
View File

@ -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",

2
lib/ui/src/modules/ui/libs/hierarchy.js
View File

@ -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) {

1
package.json
View File

@ -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",

0
scripts/netlify-build.sh Normal file → Executable file
View File

59
yarn.lock
View File

@ -1185,6 +1185,12 @@ babel-loader@7.1.2, babel-loader@^7.0.0, babel-loader@^7.1.2:
loader-utils "^1.0.2"
mkdirp "^0.5.1"
babel-macros@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/babel-macros/-/babel-macros-1.2.0.tgz#39e47ed6d286d4a98f1948d8bab45dac17e4e2d4"
dependencies:
cosmiconfig "3.1.0"
babel-messages@^6.23.0:
version "6.23.0"
resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@ -1247,6 +1253,12 @@ babel-plugin-jsx-vue-functional@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/babel-plugin-jsx-vue-functional/-/babel-plugin-jsx-vue-functional-2.1.0.tgz#5630a0c86fe1904d28c30465e6bf1cf71235a239"
babel-plugin-macros@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.0.0.tgz#fd3aee135f7dec0b82898b7c8f1aed6fa75f9af9"
dependencies:
cosmiconfig "3.1.0"
babel-plugin-minify-builtins@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/babel-plugin-minify-builtins/-/babel-plugin-minify-builtins-0.2.0.tgz#317f824b0907210b6348671bb040ca072e2e0c82"
@ -3556,6 +3568,15 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
cosmiconfig@3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-3.1.0.tgz#640a94bf9847f321800403cd273af60665c73397"
dependencies:
is-directory "^0.3.1"
js-yaml "^3.9.0"
parse-json "^3.0.0"
require-from-string "^2.0.1"
cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
version "2.2.2"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
@ -5581,6 +5602,10 @@ find-parent-dir@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
find-root@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
find-up@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@ -9162,6 +9187,10 @@ lodash.defaults@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
lodash.endswith@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/lodash.endswith/-/lodash.endswith-4.2.1.tgz#fed59ac1738ed3e236edd7064ec456448b37bc09"
lodash.escape@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-3.2.0.tgz#995ee0dc18c1b48cc92effae71a10aab5b487698"
@ -9195,6 +9224,10 @@ lodash.isequal@^3.0:
lodash._baseisequal "^3.0.0"
lodash._bindcallback "^3.0.0"
lodash.isfunction@^3.0.8:
version "3.0.8"
resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.8.tgz#4db709fc81bc4a8fd7127a458a5346c5cdce2c6b"
lodash.isobject@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
@ -9203,6 +9236,10 @@ lodash.isplainobject@^4.0.6:
version "4.0.6"
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
lodash.isstring@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
lodash.istypedarray@^3.0.0:
version "3.0.6"
resolved "https://registry.yarnpkg.com/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz#c9a477498607501d8e8494d283b87c39281cef62"
@ -9255,6 +9292,10 @@ lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
lodash.startswith@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c"
lodash.tail@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
@ -10952,6 +10993,15 @@ path@^0.12.7:
process "^0.11.1"
util "^0.10.3"
paths.macro@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/paths.macro/-/paths.macro-2.0.2.tgz#7b7b3930170c9d41f42ec426c987b2df3505fb72"
dependencies:
babel-macros "^1.2.0"
babel-plugin-macros "^2.0.0"
find-root "^1.1.0"
upath "^1.0.2"
pause-stream@0.0.11:
version "0.0.11"
resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
@ -14913,6 +14963,15 @@ unzip-response@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
upath@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/upath/-/upath-1.0.2.tgz#80aaae5395abc5fd402933ae2f58694f0860204c"
dependencies:
lodash.endswith "^4.2.1"
lodash.isfunction "^3.0.8"
lodash.isstring "^4.0.1"
lodash.startswith "^4.2.1"
update-notifier@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"