Storybook Composition - loading a prebuilt storybook into yours

.circleci/config.yml

@@ -1,5 +1,5 @@
 version: 2.1
-
+  
 aliases:
   - &defaults
     working_directory: /tmp/storybook
@@ -83,6 +83,15 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
+      - run:
+          name: Install Headless Chrome dependencies
+          command: |
+            sudo apt-get install -yq \
+            gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+            libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
+            libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
+            fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
       - run:
           name: examples
           command: |

addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -64,8 +64,7 @@ const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string)
 };
 
 const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
-  const story = api.getData(state.storyId);
-  const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
+  const list = api.getCurrentParameter<Input[]>(PARAM_KEY);
   const selected = state.addons[PARAM_KEY] || null;
 
   return { items: list || [], selected };

addons/cssresources/src/css-resource-panel.test.js

@@ -40,7 +40,7 @@ const defaultProps = {
     emit: jest.fn(),
     on: jest.fn(),
     off: jest.fn(),
-    getParameters: jest.fn(() => defaultParameters),
+    getCurrentParameter: jest.fn(() => defaultParameters),
   },
 };
 
@@ -104,11 +104,13 @@ describe('CSSResourcePanel', () => {
 
     it('should remove STORY_RENDERED listener from the api', () => {
       const apiRemove = jest.fn();
+      const getCurrentParameter = jest.fn(() => newFakeParameters);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
           off: apiRemove,
+          getCurrentParameter,
         },
       });
       const { onStoryChange } = node.instance();
@@ -125,18 +127,18 @@ describe('CSSResourcePanel', () => {
       expect(node.state('list')).toMatchObject(defaultParameters);
     });
 
-    it('should pull default items from getParameters', () => {
-      const apiGetParameters = jest.fn(() => newFakeParameters);
+    it('should pull default items from getCurrentParameter', () => {
+      const getCurrentParameter = jest.fn(() => newFakeParameters);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       expect(node.state('list')).toMatchObject([]);
       node.instance().onStoryChange('fake-story-id');
-      expect(apiGetParameters).toHaveBeenCalledWith('fake-story-id', PARAM_KEY);
+      expect(getCurrentParameter).toHaveBeenCalledWith(PARAM_KEY);
       expect(node.state('list')).toMatchObject(newFakeParameters);
     });
 
@@ -159,12 +161,12 @@ describe('CSSResourcePanel', () => {
 
     it("should not overwrite list when story id hasn't changed", () => {
       const fakeList = [];
-      const apiGetParameters = jest.fn(() => newFakeParameters);
+      const getCurrentParameter = jest.fn(() => newFakeParameters);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       node.setState({ list: fakeList, currentStoryId: 'fake-story-id' });
@@ -175,12 +177,12 @@ describe('CSSResourcePanel', () => {
 
     it('should not overwrite list when default list is undefined', () => {
       const fakeList = [];
-      const apiGetParameters = jest.fn(() => undefined);
+      const getCurrentParameter = jest.fn(() => undefined);
       const node = shallowNode({
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       node.setState({ list: fakeList });
@@ -279,7 +281,7 @@ describe('CSSResourcePanel', () => {
     });
 
     it('should not render code for items without a code', () => {
-      const apiGetParameters = jest.fn(() => [
+      const getCurrentParameter = jest.fn(() => [
         {
           id: 'local-fake-id-1',
           picked: true,
@@ -294,15 +296,15 @@ describe('CSSResourcePanel', () => {
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
       node.instance().onStoryChange('fake-story-id');
       expect(node.find(SyntaxHighlighter).length).toEqual(1);
     });
 
     it('should not render code for items /w the `hideCode` flag', () => {
-      const apiGetParameters = jest.fn(() => [
+      const getCurrentParameter = jest.fn(() => [
         {
           id: 'local-fake-id-1',
           code: 'local-fake-code-1',
@@ -320,7 +322,7 @@ describe('CSSResourcePanel', () => {
         ...defaultProps,
         api: {
           ...defaultProps.api,
-          getParameters: apiGetParameters,
+          getCurrentParameter,
         },
       });
 

addons/cssresources/src/css-resource-panel.tsx

@@ -65,7 +65,7 @@ export class CssResourcePanel extends Component<Props, State> {
   onStoryChange = (id: string) => {
     const { list: currentList, currentStoryId } = this.state;
     const { api } = this.props;
-    const list = api.getParameters(id, PARAM_KEY) as CssResource[];
+    const list = api.getCurrentParameter<CssResource[]>(PARAM_KEY);
 
     if (list && currentStoryId !== id) {
       const existingIds = currentList.reduce((lookup: CssResourceLookup, res) => {

addons/docs/src/register.ts

@@ -1,11 +1,11 @@
 import addons, { types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID } from './shared';
 
-addons.register(ADDON_ID, api => {
+addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     type: types.TAB,
     title: 'Docs',
-    route: ({ storyId }) => `/docs/${storyId}`,
+    route: ({ storyId, refId }) => (refId ? `/docs/${refId}_${storyId}` : `/docs/${storyId}`),
     match: ({ viewMode }) => viewMode === 'docs',
     render: () => null,
   });

addons/graphql/src/manager.tsx

@@ -16,7 +16,14 @@ const GQL: FunctionComponent<GQLProps> = ({ active }) => {
     <Consumer>
       {({ api, state }: Combo) => {
         const story = api.getData(state.storyId);
-        const parameters = story ? api.getParameters(story.id, PARAM_KEY) : null;
+        const parameters = story
+          ? api.getCurrentParameter<{
+              query: string;
+              variables: Record<string, any>;
+              url: string;
+              fetcher: ReturnType<typeof getDefaultFetcher>;
+            }>(PARAM_KEY)
+          : null;
 
         if (parameters) {
           const query = reIndentQuery(parameters.query);

addons/storysource/src/StoryPanel.tsx

@@ -97,7 +97,8 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
     useInlineStyles,
     location,
     id,
-  }: SyntaxHighlighterRendererProps & { location: SourceBlock; id: string }) => {
+    refId,
+  }: SyntaxHighlighterRendererProps & { location: SourceBlock; id: string; refId?: string }) => {
     const first = location.startLoc.line - 1;
     const last = location.endLoc.line;
 
@@ -113,7 +114,7 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       );
     }
     return (
-      <StyledStoryLink to={`/story/${id}`} key={storyKey}>
+      <StyledStoryLink to={refId ? `/story/${refId}_${id}` : `/story/${id}`} key={storyKey}>
         {storySource}
       </StyledStoryLink>
     );
@@ -127,12 +128,12 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
       const location = locationsMap[key];
       const first = location.startLoc.line - 1;
       const last = location.endLoc.line;
-      const { kind } = story;
+      const { kind, refId } = story;
       // source loader ids are different from story id
       const sourceIdParts = key.split('--');
       const id = api.storyId(kind, sourceIdParts[sourceIdParts.length - 1]);
       const start = createPart({ rows: rows.slice(lastRow, first), stylesheet, useInlineStyles });
-      const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id });
+      const storyPart = createStoryPart({ rows, stylesheet, useInlineStyles, location, id, refId });
 
       parts.push(start);
       parts.push(storyPart);

examples/dev-kits/main.js

@@ -1,6 +1,14 @@
 module.exports = {
   stories: ['./stories/*.*'],
-  webpack: async (config, { configType }) => ({
+  refs: {
+    ember: {
+      id: 'ember',
+      title: 'Ember',
+      url: 'https://deploy-preview-9210--storybookjs.netlify.com/ember-cli',
+    },
+    cra: 'https://deploy-preview-9210--storybookjs.netlify.com/cra-ts-kitchen-sink',
+  },
+  webpack: async config => ({
     ...config,
     module: {
       ...config.module,

examples/official-storybook/package.json

@@ -36,6 +36,7 @@
     "@storybook/addon-viewport": "6.0.0-alpha.28",
     "@storybook/addons": "6.0.0-alpha.28",
     "@storybook/components": "6.0.0-alpha.28",
+    "@storybook/cli": "6.0.0-alpha.28",
     "@storybook/core-events": "6.0.0-alpha.28",
     "@storybook/node-logger": "6.0.0-alpha.28",
     "@storybook/react": "6.0.0-alpha.28",

examples/official-storybook/stories/addon-a11y/typography.stories.js

@@ -2,7 +2,7 @@
 import React, { Fragment } from 'react';
 
 const text = 'Testing the a11y addon';
-const href = 'javascript:void 0';
+const href = 'http://example.com';
 
 export default {
   title: 'Addons/A11y/Typography',