Merge branch 'release/3.3' into addons-channel-disable-owner-check

CHANGELOG.md

@@ -1,3 +1,23 @@
+# 3.2.9
+
+2017-August-26
+
+#### Bug Fixes
+
+-   Fix getstorybook CLI for React Native projects [#1741](https://github.com/storybooks/storybook/pull/1741)
+
+#### Documentation
+
+-   Improve `addon-info` README options documentation [#1732](https://github.com/storybooks/storybook/pull/1732)
+
+#### Maintenance
+
+-   ADD a CLI for bootstrapping [#1216](https://github.com/storybooks/storybook/pull/1216)
+
+#### Dependency Upgrades
+
+-   Update lerna to the latest version 🚀 [#1727](https://github.com/storybooks/storybook/pull/1727)
+
 # 3.2.8
 
 2017-August-23

addons/info/README.md

@@ -41,7 +41,7 @@ storiesOf('Component', module)
 
 ## Usage with options
 
-`withInfo` can also take an options object in case you want to configure how
+`withInfo` can also take an [options object](#global-options) in case you want to configure how
 the info panel looks on a per-story basis:
 
 ```js
@@ -50,10 +50,8 @@ import { withInfo } from '@storybook/addon-info';
 storiesOf('Component', module)
   .add('simple info',
     withInfo({
-      text: 'doc string about my component',
-      maxPropsIntoLine: 1,
-      maxPropObjectKeys: 10,
-      maxPropArrayLength: 10,
+      text: 'String or React Element with docs about my component', // Warning! This option's name will be likely renamed to "summary" in 3.3 release. Follow this PR #1501 for details
+      // other possible options see in Global options section below
     )(() =>
       <Component>Click the "?" mark at top-right to view the info.</Component>
     )
@@ -78,8 +76,14 @@ import { setDefaults } from '@storybook/addon-info';
 
 // addon-info
 setDefaults({
-  inline: true,
-  maxPropsIntoLine: 1,
+  header: false, // Toggles display of header with component name and description
+  inline: true, // Displays info inline vs click button to view
+  source: true, // Displays the source of story Component
+  propTables: [/* Components used in story */], // displays Prop Tables with this components
+  propTablesExclude: [], // Exclude Components from being shoun in Prop Tables section
+  styles: {}, // Overrides styles of addon
+  marksyConf: {}, // Overrides components used to display markdown. Warning! This option's name will be likely deprecated in favor to "components" with the same API in 3.3 release. Follow this PR #1501 for details
+  maxPropsIntoLine: 1, // Max props to display per line in source code
   maxPropObjectKeys: 10,
   maxPropArrayLength: 10,
   maxPropStringLength: 100,

addons/info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "3.2.7",
+  "version": "3.2.9",
   "description": "A Storybook addon to show additional information for your stories.",
   "license": "MIT",
   "main": "dist/index.js",

addons/storyshots/README.md

@@ -145,6 +145,10 @@ Just render the story, don't check the output at all (useful if you just want to
 
 Like the default, but allows you to specify a set of options for the test renderer. [See for example here](https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16).
 
+### `multiSnapshotWithOptions(options)`
+
+Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes.
+
 ### `shallowSnapshot`
 
 Take a snapshot of a shallow-rendered version of the component.

addons/storyshots/package.json

@@ -11,11 +11,14 @@
   "scripts": {
     "build-storybook": "build-storybook",
     "prepublish": "babel ./src --out-dir ./dist",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "example": "jest storyshot.test"
   },
   "dependencies": {
     "babel-runtime": "^6.23.0",
+    "glob": "^7.1.2",
     "global": "^4.3.2",
+    "jest-specific-snapshot": "^0.2.0",
     "prop-types": "^15.5.10",
     "read-pkg-up": "^2.0.0"
   },
@@ -24,11 +27,14 @@
     "@storybook/channels": "^3.2.0",
     "@storybook/react": "^3.2.8",
     "babel-cli": "^6.24.1",
+    "babel-jest": "^20.0.3",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "jest": "^20.0.4",
+    "jest-cli": "^20.0.4"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.2.6",

addons/storyshots/src/index.js

@@ -1,13 +1,22 @@
 import path from 'path';
+import fs from 'fs';
+import glob from 'glob';
 import global, { describe, it } from 'global';
 import readPkgUp from 'read-pkg-up';
 import addons from '@storybook/addons';
 
 import runWithRequireContext from './require_context';
 import createChannel from './storybook-channel-mock';
 import { snapshot } from './test-bodies';
+import { getPossibleStoriesFiles } from './utils';
 
-export { snapshotWithOptions, snapshot, shallowSnapshot, renderOnly } from './test-bodies';
+export {
+  snapshot,
+  multiSnapshotWithOptions,
+  snapshotWithOptions,
+  shallowSnapshot,
+  renderOnly,
+} from './test-bodies';
 
 let storybook;
 let configPath;
@@ -48,6 +57,7 @@ export default function testStorySnapshots(options = {}) {
     runWithRequireContext(content, contextOpts);
   } else if (isRNStorybook) {
     storybook = require.requireActual('@storybook/react-native');
+
     configPath = path.resolve(options.configPath || 'storybook');
     require.requireActual(configPath);
   } else {
@@ -70,13 +80,15 @@ export default function testStorySnapshots(options = {}) {
 
   // eslint-disable-next-line
   for (const group of stories) {
-    if (options.storyKindRegex && !group.kind.match(options.storyKindRegex)) {
+    const { fileName, kind } = group;
+
+    if (options.storyKindRegex && !kind.match(options.storyKindRegex)) {
       // eslint-disable-next-line
       continue;
     }
 
     describe(suite, () => {
-      describe(group.kind, () => {
+      describe(kind, () => {
         // eslint-disable-next-line
         for (const story of group.stories) {
           if (options.storyNameRegex && !story.name.match(options.storyNameRegex)) {
@@ -85,11 +97,24 @@ export default function testStorySnapshots(options = {}) {
           }
 
           it(story.name, () => {
-            const context = { kind: group.kind, story: story.name };
+            const context = { fileName, kind, story: story.name };
             options.test({ story, context });
           });
         }
       });
     });
   }
 }
+
+describe('Storyshots Integrity', () => {
+  describe('Abandoned Storyshots', () => {
+    const storyshots = glob.sync('**/*.storyshot');
+
+    const abandonedStoryshots = storyshots.filter(fileName => {
+      const possibleStoriesFiles = getPossibleStoriesFiles(fileName);
+      return !possibleStoriesFiles.some(fs.existsSync);
+    });
+
+    expect(abandonedStoryshots).toHaveLength(0);
+  });
+});

addons/storyshots/src/test-bodies.js

@@ -1,12 +1,40 @@
 import renderer from 'react-test-renderer';
 import shallow from 'react-test-renderer/shallow';
+import 'jest-specific-snapshot';
+import { getStoryshotFile } from './utils';
 
-export const snapshotWithOptions = options => ({ story, context }) => {
+function getRenderedTree(story, context, options) {
   const storyElement = story.render(context);
-  const tree = renderer.create(storyElement, options).toJSON();
+  return renderer.create(storyElement, options).toJSON();
+}
+
+function getSnapshotFileName(context) {
+  const fileName = context.fileName;
+
+  if (!fileName) {
+    return null;
+  }
+
+  return getStoryshotFile(fileName);
+}
+
+export const snapshotWithOptions = options => ({ story, context }) => {
+  const tree = getRenderedTree(story, context, options);
   expect(tree).toMatchSnapshot();
 };
 
+export const multiSnapshotWithOptions = options => ({ story, context }) => {
+  const tree = getRenderedTree(story, context, options);
+  const snapshotFileName = getSnapshotFileName(context);
+
+  if (!snapshotFileName) {
+    expect(tree).toMatchSnapshot();
+    return;
+  }
+
+  expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+};
+
 export const snapshot = snapshotWithOptions({});
 
 export function shallowSnapshot({ story, context }) {

addons/storyshots/src/utils.js

@@ -0,0 +1,15 @@
+import path from 'path';
+
+export function getStoryshotFile(fileName) {
+  const { dir, name } = path.parse(fileName);
+  return path.format({ dir: path.join(dir, '__snapshots__'), name, ext: '.storyshot' });
+}
+
+export function getPossibleStoriesFiles(storyshotFile) {
+  const { dir, name } = path.parse(storyshotFile);
+
+  return [
+    path.format({ dir: path.dirname(dir), name, ext: '.js' }),
+    path.format({ dir: path.dirname(dir), name, ext: '.jsx' }),
+  ];
+}

addons/storyshots/stories/directly_required/__snapshots__/index.storyshot

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;

addons/storyshots/stories/required_with_context/__snapshots__/Button.stories.storyshot

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;

addons/storyshots/stories/required_with_context/__snapshots__/Welcome.stories.storyshot

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<article
+  className="css-1fqbdip"
+>
+  <h1
+    className="css-nil"
+  >
+    Welcome to storybook
+  </h1>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We've added some basic stories inside the
+
+    <code
+      className="css-mteq83"
+    >
+      src/stories
+    </code>
+
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample
+
+    <a
+      className="css-ca0824"
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </a>
+
+    for a component called
+
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <code
+      className="css-mteq83"
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      className="css-mteq83"
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+
+    <a
+      className="css-ca0824"
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+
+    section in our documentation.
+  </p>
+  <p
+    className="css-bwdon3"
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+
+    <code
+      className="css-mteq83"
+    >
+      .storybook/webpack.config.js
+    </code>
+
+    to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;