diff --git a/addons/actions/.storybook/addons.js b/addons/actions/.storybook/addons.js deleted file mode 100644 index e4f70f25bfa3..000000000000 --- a/addons/actions/.storybook/addons.js +++ /dev/null @@ -1 +0,0 @@ -import '../register'; diff --git a/addons/actions/.storybook/config.js b/addons/actions/.storybook/config.js deleted file mode 100644 index 29599c59b5d2..000000000000 --- a/addons/actions/.storybook/config.js +++ /dev/null @@ -1,2 +0,0 @@ -import * as storybook from '@storybook/react'; -storybook.configure(() => require('./stories'), module); diff --git a/addons/actions/.storybook/stories.js b/addons/actions/.storybook/stories.js deleted file mode 100644 index 05620ab77b5c..000000000000 --- a/addons/actions/.storybook/stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@storybook/react'; -import { action, decorateAction } from '../src'; - -const pickFirst = decorateAction([ - args => args.slice(0, 1) -]); - -storiesOf('Button', module) - .add('Hello World', () => ( - - )) - .add('Decorated Action', () => ( - - )) - .add('Circular Payload', () => { - const circular = {foo: {}}; - circular.foo.circular = circular; - return ; - }) - .add('Function Name', () => { - const fn = action('fnName'); - return - }); diff --git a/addons/actions/package.json b/addons/actions/package.json index bdb281f1a6f3..4a53b6c6b1a6 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -16,9 +16,7 @@ "url": "https://github.com/storybooks/storybook.git" }, "scripts": { - "deploy-storybook": "storybook-to-ghpages", - "prepare": "node ../../scripts/prepare.js", - "storybook": "start-storybook -p 9001" + "prepare": "node ../../scripts/prepare.js" }, "dependencies": { "@storybook/addons": "^3.2.16", diff --git a/addons/actions/src/preview.js b/addons/actions/src/preview.js index f4ed7a3e8b3d..2089cad777cc 100644 --- a/addons/actions/src/preview.js +++ b/addons/actions/src/preview.js @@ -13,9 +13,9 @@ function _format(arg) { } export function action(name) { - // eslint-disable-next-line no-unused-vars, func-names - const handler = function(..._args) { - const args = Array.from(_args).map(_format); + // eslint-disable-next-line no-shadow + const handler = function action(..._args) { + const args = _args.map(_format); const channel = addons.getChannel(); const id = uuid(); channel.emit(EVENT_ID, { @@ -24,8 +24,12 @@ export function action(name) { }); }; - const fnName = name && typeof name === 'string' ? name.replace(/\W+/g, '_') : 'action'; - Object.defineProperty(handler, 'name', { value: fnName }); + // This condition is true in modern browsers that implement Function#name properly + const canConfigureName = Object.getOwnPropertyDescriptor(handler, 'name').configurable; + + if (canConfigureName && name && typeof name === 'string') { + Object.defineProperty(handler, 'name', { value: name }); + } return handler; } diff --git a/addons/jest/README.md b/addons/jest/README.md index 5ccc32d1829c..40555e3ade01 100644 --- a/addons/jest/README.md +++ b/addons/jest/README.md @@ -77,11 +77,11 @@ Assuming that you have created a test files `MyComponent.test.js` and `MyOtherCo In your `story.js` ```js -import jestTestResults from '../.jest-test-results.json'; +import results from '../.jest-test-results.json'; import { withTests } from '@storybook/addon-jest'; storiesOf('MyComponent', module) - .addDecorator(withTests(jestTestResults, { filesExt: '.test.js' })('MyComponent', 'MyOtherComponent')) + .addDecorator(withTests({ results })('MyComponent', 'MyOtherComponent')) .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
Jest results in storybook
)); @@ -90,11 +90,11 @@ storiesOf('MyComponent', module) Or in order to avoid importing `.jest-test-results.json` in each story, you can create a simple file `withTests.js`: ```js -import jestTestResults from '../.jest-test-results.json'; +import results from '../.jest-test-results.json'; import { withTests } from '@storybook/addon-jest'; -export default withTests(jestTestResults, { - filesExt: '.test.js', +export default withTests({ + results, }); ``` @@ -111,6 +111,11 @@ storiesOf('MyComponent', module) )); ``` +### withTests(options) + +- **options.results**: [OBJECT] jest output results. *mandatory* +- **filteExt**: [STRING] test file extention. *optionnal*. This allow you to write "MyComponent" and not "MyComponent.test.js". It will be used as regex to find your file results. Default value is `((\\.specs?)|(\\.tests?))?(\\.js)?$`. That mean it will match: MyComponent.js, MyComponent.test.js, MyComponent.tests.js, MyComponent.spec.js, MyComponent.specs.js... + ## TODO - [ ] Add coverage diff --git a/docs/package.json b/docs/package.json index c016ec817c1c..93437cf00a4b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -30,8 +30,8 @@ "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "bootstrap": "^3.3.7", - "gatsby": "^1.9.125", - "gatsby-link": "^1.6.29", + "gatsby": "^1.9.126", + "gatsby-link": "^1.6.30", "gatsby-plugin-sharp": "^1.6.22", "gatsby-remark-autolink-headers": "^1.4.9", "gatsby-remark-copy-linked-files": "^1.5.22", diff --git a/docs/yarn.lock b/docs/yarn.lock index 51340a27b225..1c39bcbe5c79 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -4196,9 +4196,9 @@ gatsby-cli@^1.1.24: yargs "^8.0.2" yurnalist "^0.2.1" -gatsby-link@^1.6.29: - version "1.6.29" - resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.29.tgz#a3ecedb8a1bd0f9430bda8f193375309ff2e9efa" +gatsby-link@^1.6.30: + version "1.6.30" + resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.30.tgz#d75a7ceaa9e138b5f4f64cc6dbf1e0632876bd09" dependencies: babel-runtime "^6.26.0" prop-types "^15.5.8" @@ -4317,9 +4317,9 @@ gatsby-transformer-remark@^1.7.22: unist-util-select "^1.5.0" unist-util-visit "^1.1.1" -gatsby@^1.9.125: - version "1.9.125" - resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.125.tgz#5674fab6f54c5a635edc8ba1ad6c57431e1ef14d" +gatsby@^1.9.126: + version "1.9.126" + resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.126.tgz#879d9136b179500a7ca0f95b032d1763184e8594" dependencies: async "^2.1.2" babel-code-frame "^6.22.0" diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap index 672616b567aa..eaa3edb12a18 100644 --- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap +++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap @@ -1,5 +1,51 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Addon Actions Circular Payload 1`] = ` + +`; + +exports[`Storyshots Addon Actions Decorated Action 1`] = ` + +`; + +exports[`Storyshots Addon Actions Function Name 1`] = ` + +`; + +exports[`Storyshots Addon Actions Hello World 1`] = ` + +`; + +exports[`Storyshots Addon Actions Reserved keyword as name 1`] = ` + +`; + exports[`Storyshots Addon Backgrounds story 1 1`] = `
`; -exports[`Storyshots Button delete 1`] = ` - -`; - exports[`Storyshots Button with new info 1`] = `
args.slice(0, 1)]); + +storiesOf('Addon Actions', module) + .add('Hello World', () => ) + .add('Decorated Action', () => ) + .add('Circular Payload', () => { + const circular = { foo: {} }; + circular.foo.circular = circular; + return ; + }) + .add('Function Name', () => { + const fn = action('fnName'); + return ; + }) + .add('Reserved keyword as name', () => ); diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js index 47ae4f3a7124..9819fca76307 100644 --- a/examples/cra-kitchen-sink/src/stories/index.stories.js +++ b/examples/cra-kitchen-sink/src/stories/index.stories.js @@ -55,12 +55,6 @@ storiesOf('Button', module) 😀 😎 👍 💯 )) - .add('delete', () => ( - - )) .add('with notes', () => ( // deprecated usage