Merge branch 'next'

MIGRATION.md

@@ -9,6 +9,7 @@
     - [Deprecate displayName parameter](#deprecate-displayname-parameter)
     - [Unified docs preset](#unified-docs-preset)
     - [Simplified hierarchy separators](#simplified-hierarchy-separators)
+    - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer)
   - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
     - [Source-loader](#source-loader)
     - [Default viewports](#default-viewports)
@@ -220,6 +221,17 @@ addParameters({
 
 NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behavior, simply add a root called "Others" to all your previously unrooted stories.
 
+### Addon StoryShots Puppeteer uses external puppeteer
+
+To give you more control on the Chrome version used when running StoryShots Puppeteer, `puppeteer` is no more included in the addon dependencies. So you can now pick the version of `puppeteer` you want and set it in your project.
+
+If you want the latest version available just run:
+```sh
+yarn add puppeteer --dev
+OR
+npm install puppeteer --save-dev
+``` 
+
 ## From version 5.1.x to 5.2.x
 
 ### Source-loader

addons/storyshots/storyshots-puppeteer/README.md

@@ -8,9 +8,11 @@ Add the following modules into your app.
 npm install @storybook/addon-storyshots-puppeteer puppeteer --save-dev
 ```
 
+⚠️ As of Storybook 5.3 `puppeteer` is no more included in addon dependencies and must be added to your project directly.
+
 ## Configure Storyshots for Puppeteeer tests
 
-/\*\ **React-native** is **not supported** by this test function.
+⚠️ **React-native** is **not supported** by this test function.
 
 When willing to run Puppeteer tests for your stories, you have two options:
 

docs/src/pages/presets/writing-presets/index.md

@@ -109,7 +109,7 @@ The presets API is also more powerful than the [standard configuration options](
 
 For example, some users want to configure the webpack for Storybook's UI and addons ([issue](https://github.com/storybookjs/storybook/issues/4995)), but this is not possible using [standard webpack configuration](../custom-webpack-config/) (it used to be possible before SB4.1). However, you can achieve this with a private preset.
 
-If it doesn't exists yet, create a file `.storybook/main.js`:
+If it doesn't exist yet, create a file `.storybook/main.js`:
 
 ```js
 module.exports = {
@@ -166,4 +166,4 @@ module.exports = {
 };
 ```
 
-Place your `my-preset.js` file where ever you want, if you want to share if far and wide you'll want to make it it's own package.
+Place your `my-preset.js` file wherever you want, if you want to share it far and wide you'll want to make it its own package.

examples/cra-ts-kitchen-sink/src/stories/Button.tsx

@@ -5,6 +5,11 @@ interface ButtonProps {
    * Simple click handler
    */
   onClick?: () => void;
+
+  /**
+   * Is primary?
+   */
+  primary: boolean;
 }
 
 /**
@@ -15,3 +20,7 @@ export const Button: FC<ButtonProps> = ({ children, onClick }) => (
     {children}
   </button>
 );
+
+Button.defaultProps = {
+  primary: true,
+};

examples/vue-kitchen-sink/src/stories/components/InfoButton.vue

@@ -1,34 +1,37 @@
 <script>
+/**
+ * InfoButton component description
+ */
 export default {
   props: {
     /**
      * Whether to disable button
      */
     disabled: {
-      type: Boolean
+      type: Boolean,
     },
     /**
      * Button type
      */
     type: {
       type: String,
-      default: 'normal'
+      default: 'normal',
     },
     label: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     click(ev) {
       /**
        * Passthrough click event
        * @type {Event}
        */
-      this.$emit('click', ev)
-    }
-  }
-}
+      this.$emit('click', ev);
+    },
+  },
+};
 </script>
 
 <template>
@@ -64,4 +67,4 @@ export default {
   background-color: #eee;
   color: #777;
 }
-</style>
+</style>

lib/client-api/src/story_store.ts

@@ -280,6 +280,18 @@ export default class StoryStore extends EventEmitter {
     }
   }, 0);
 
+  // Unlike a bunch of deprecated APIs below, these lookup functions
+  // use the `_data` member, which is the new data structure. They should
+  // be the preferred way of looking up stories in the future.
+
+  getStoriesForKind(kind: string) {
+    return this.raw().filter(story => story.kind === kind);
+  }
+
+  getRawStory(kind: string, name: string) {
+    return this.getStoriesForKind(kind).find(s => s.name === name);
+  }
+
   // OLD apis
   getRevision() {
     return this._revision;
@@ -339,10 +351,6 @@ export default class StoryStore extends EventEmitter {
       .map(info => info.name);
   }
 
-  getStoriesForKind(kind: string) {
-    return this.raw().filter(story => story.kind === kind);
-  }
-
   getStoryFileName(kind: string) {
     const key = toKey(kind);
     const storiesKind = this._legacydata[key as string];

lib/components/src/blocks/PropsTable/PropValue.tsx

@@ -76,8 +76,12 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
 
   const [isOpen, setIsOpen] = useState(false);
 
+  // summary is used for the default value
+  // below check fixes not displaying default values for boolean typescript vars
+  const summaryAsString =
+    summary && typeof summary.toString === 'function' ? summary.toString() : summary;
   if (isNil(detail)) {
-    return <PropText text={summary} />;
+    return <PropText text={summaryAsString} />;
   }
 
   return (
@@ -98,7 +102,7 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
       }
     >
       <Expandable className="sbdocs-expandable">
-        <span>{summary}</span>
+        <span>{summaryAsString}</span>
         <ArrowIcon icon={isOpen ? 'arrowup' : 'arrowdown'} />
       </Expandable>
     </WithTooltipPure>

lib/components/src/blocks/Source.tsx

@@ -69,4 +69,7 @@ const Source: FunctionComponent<SourceProps> = props => {
   return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
 };
 
+Source.defaultProps = {
+  format: false,
+};
 export { Source };

lib/core/src/client/preview/start.js

@@ -311,7 +311,7 @@ export default function start(render, { decorateStory } = {}) {
   }
 
   storyStore.on(Events.STORY_INIT, () => {
-    const { storyId, viewMode } = initializePath();
+    const { storyId, viewMode } = initializePath(storyStore);
     storyStore.setSelection({ storyId, viewMode });
   });
 

lib/core/src/client/preview/url.js

@@ -22,19 +22,34 @@ export const setPath = ({ storyId, viewMode }) => {
   history.replaceState({}, '', newPath);
 };
 
-export const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
-  (path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
+export const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }, storyStore) => {
+  if (path) {
+    return pathToId(path);
+  }
+  if (selectedKind && selectedStory) {
+    // Look up the story ID inside the story store, since as of 5.3, the
+    // Story ID is not necessarily a direct function of its kind/name.
+    const story = storyStore.getRawStory(selectedKind, selectedStory);
+    if (story) {
+      return story.id;
+    }
+    // this will preserve existing behavior of showing a "not found" screen,
+    // but the inputs will be preserved in the query param to help debugging
+    return toId(selectedKind, selectedStory);
+  }
+  return undefined;
+};
 
 export const parseQueryParameters = search => {
   const { id } = qs.parse(search, { ignoreQueryPrefix: true });
   return id;
 };
 
-export const initializePath = () => {
+export const initializePath = storyStore => {
   const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
   let { id: storyId, viewMode } = query; // eslint-disable-line prefer-const
   if (!storyId) {
-    storyId = getIdFromLegacyQuery(query);
+    storyId = getIdFromLegacyQuery(query, storyStore);
     if (storyId) {
       setPath({ storyId, viewMode });
     }

lib/core/src/client/preview/url.test.js

@@ -42,16 +42,26 @@ describe('url', () => {
   });
 
   describe('getIdFromLegacyQuery', () => {
+    const store = { getRawStory: () => null };
     it('should parse story paths', () => {
-      expect(getIdFromLegacyQuery({ path: '/story/story--id' })).toBe('story--id');
+      expect(getIdFromLegacyQuery({ path: '/story/story--id' }, store)).toBe('story--id');
     });
-    it('should parse legacy queries', () => {
+    it('should use legacy parameters to look up custom story ids', () => {
+      const customStore = {
+        getRawStory: () => ({ id: 'custom--id' }),
+      };
       expect(
-        getIdFromLegacyQuery({ path: null, selectedKind: 'kind', selectedStory: 'story' })
+        getIdFromLegacyQuery({ selectedKind: 'kind', selectedStory: 'story' }, customStore)
+      ).toBe('custom--id');
+    });
+    it('should use fall-back behavior for legacy queries for unknown stories', () => {
+      expect(
+        getIdFromLegacyQuery({ path: null, selectedKind: 'kind', selectedStory: 'story' }, store)
       ).toBe('kind--story');
     });
+
     it('should not parse non-queries', () => {
-      expect(getIdFromLegacyQuery({})).toBeUndefined();
+      expect(getIdFromLegacyQuery({}, store)).toBeUndefined();
     });
   });
 
@@ -65,14 +75,15 @@ describe('url', () => {
   });
 
   describe('initializePath', () => {
+    const store = { getRawStory: () => null };
     it('should handle id queries', () => {
       document.location.search = '?id=story--id';
-      expect(initializePath()).toEqual({ storyId: 'story--id' });
+      expect(initializePath(store)).toEqual({ storyId: 'story--id' });
       expect(history.replaceState).not.toHaveBeenCalled();
     });
     it('should redirect legacy queries', () => {
       document.location.search = '?selectedKind=kind&selectedStory=story';
-      expect(initializePath()).toEqual({ storyId: 'kind--story' });
+      expect(initializePath(store)).toEqual({ storyId: 'kind--story' });
       expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=kind--story');
     });
   });

lib/core/src/server/presets.js

@@ -15,7 +15,7 @@ function parsePackageName(input) {
     throw new TypeError('Expected a string');
   }
 
-  const matched = input.charAt(0) === '@' ? input.match(RE_SCOPED) : input.match(RE_NORMAL);
+  const matched = input.startsWith('@') ? input.match(RE_SCOPED) : input.match(RE_NORMAL);
 
   if (!matched) {
     throw new Error(`[parse-package-name] "${input}" is not a valid string`);

lib/node-logger/package.json

@@ -27,14 +27,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@types/npmlog": "^4.1.2",
     "chalk": "^3.0.0",
     "core-js": "^3.0.1",
     "npmlog": "^4.1.2",
     "pretty-hrtime": "^1.0.3",
     "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
-    "@types/npmlog": "^4.1.1",
     "@types/pretty-hrtime": "^1.0.0"
   },
   "publishConfig": {

package.json

@@ -179,7 +179,7 @@
     "github-release-from-changelog": "^2.1.0",
     "glob": "^7.1.3",
     "http-server": "^0.11.1",
-    "husky": "^3.1.0",
+    "husky": "^4.0.10",
     "inquirer": "^7.0.0",
     "jest": "^24.8.0",
     "jest-cli": "^24.8.0",

yarn.lock

@@ -4333,7 +4333,7 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
-"@types/npmlog@^4.1.1":
+"@types/npmlog@^4.1.2":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.2.tgz#d070fe6a6b78755d1092a3dc492d34c3d8f871c4"
   integrity sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==
@@ -14981,11 +14981,6 @@ get-stdin@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
   integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
-get-stdin@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
-  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
-
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -16367,22 +16362,19 @@ humps@^2.0.1:
   resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
   integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
 
-husky@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
-  integrity sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==
+husky@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-4.0.10.tgz#659b52c404d3163b943a73f6c1d454708c0226d8"
+  integrity sha512-Ptm4k2DqOwxeK/kzu5RaJmNRoGvESrgDXObFcZ8aJZcyXyMBHhM2FqZj6zYKdetadmP3wCwxEHCBuB9xGlRp8A==
   dependencies:
-    chalk "^2.4.2"
+    chalk "^3.0.0"
     ci-info "^2.0.0"
-    cosmiconfig "^5.2.1"
-    execa "^1.0.0"
-    get-stdin "^7.0.0"
+    cosmiconfig "^6.0.0"
     opencollective-postinstall "^2.0.2"
     pkg-dir "^4.2.0"
     please-upgrade-node "^3.2.0"
-    read-pkg "^5.2.0"
-    run-node "^1.0.0"
     slash "^3.0.0"
+    which-pm-runs "^1.0.0"
 
 hyperlinker@^1.0.0:
   version "1.0.0"
@@ -27924,11 +27916,6 @@ run-async@^2.2.0:
   dependencies:
     is-promise "^2.1.0"
 
-run-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
-  integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==
-
 run-parallel@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"