Merge pull request #5402 from storybooks/tech/api-package

Tech/api package
storybookjs · Mar 19, 2019 · 31b8243 · 31b8243
2 parents b657259 + accf970
commit 31b8243
Show file tree

Hide file tree

Showing 105 changed files with 2,364 additions and 1,039 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -264,7 +264,7 @@ jobs:
           at: .
       - run:
           name: Test
-          command: yarn test --coverage --runInBand --core
+          command: yarn test --coverage --w2 --core
       - persist_to_workspace:
           root: .
           paths:

diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Test.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Test.kt
@@ -25,7 +25,7 @@ object OpenSourceProjects_Storybook_Test : BuildType({
                 set -e -x
 
                 yarn
-                yarn test --core --coverage --runInBand --teamcity
+                yarn test --core --coverage --teamcity --w2
             """.trimIndent()
             dockerImage = "node:%docker.node.version%"
         }

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@storybook/addons": "5.1.0-alpha.9",
+    "@storybook/api": "5.1.0-alpha.9",
     "@storybook/client-logger": "5.1.0-alpha.9",
     "@storybook/components": "5.1.0-alpha.9",
     "@storybook/core-events": "5.1.0-alpha.9",

diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
@@ -9,6 +9,7 @@ import { AxeResults, Result } from 'axe-core';
 import { Report } from './Report';
 import { Tabs } from './Tabs';
 import { EVENTS } from '../constants';
+import { API } from '@storybook/api';
 
 const Icon = styled(Icons)(
   {
@@ -57,11 +58,7 @@ interface A11YPanelState {
 
 interface A11YPanelProps {
   active: boolean;
-  api: {
-    on(event: string, callback: (data: any) => void): void;
-    off(event: string, callback: (data: any) => void): void;
-    emit(event: string): void;
-  };
+  api: API;
 }
 
 export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {

diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
@@ -52,7 +52,11 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
     }
   };
 
-  onVisibilityChange = (s: boolean) => this.setState({ expanded: s });
+  onVisibilityChange = (s: boolean) => {
+    if (this.state.expanded !== s) {
+      this.setState({ expanded: s });
+    }
+  };
 
   render() {
     const { filter, expanded } = this.state;

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@storybook/addons": "5.1.0-alpha.9",
+    "@storybook/api": "5.1.0-alpha.9",
     "@storybook/components": "5.1.0-alpha.9",
     "@storybook/core-events": "5.1.0-alpha.9",
     "@storybook/theming": "5.1.0-alpha.9",

diff --git a/addons/actions/src/components/ActionLogger/index.tsx b/addons/actions/src/components/ActionLogger/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme, Theme } from '@storybook/theming';
 
 import Inspector from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';
@@ -16,7 +16,15 @@ export const Wrapper = styled(({ children, className }) => (
   padding: '10px 5px 20px',
 });
 
-const ThemedInspector = withTheme(({ theme, ...props }) => (
+interface InspectorProps {
+  theme: Theme;
+  sortObjectKeys: boolean;
+  showNonenumerable: boolean;
+  name: any;
+  data: any;
+}
+
+const ThemedInspector = withTheme(({ theme, ...props }: InspectorProps) => (
   <Inspector theme={theme.addonActionsTheme || 'chromeLight'} {...props} />
 ));
 

diff --git a/addons/actions/src/containers/ActionLogger/index.tsx b/addons/actions/src/containers/ActionLogger/index.tsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import deepEqual from 'fast-deep-equal';
 
+import { API } from '@storybook/api';
 import { STORY_RENDERED } from '@storybook/core-events';
 
 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
@@ -9,10 +10,7 @@ import { ActionDisplay } from '../../models';
 
 interface ActionLoggerProps {
   active: boolean;
-  api: {
-    on(event: string, callback: (data: any) => void): void;
-    off(event: string, callback: (data: any) => void): void;
-  };
+  api: API;
 }
 
 interface ActionLoggerState {

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -26,12 +26,12 @@
   },
   "dependencies": {
     "@storybook/addons": "5.1.0-alpha.9",
+    "@storybook/api": "5.1.0-alpha.9",
     "@storybook/client-logger": "5.1.0-alpha.9",
     "@storybook/components": "5.1.0-alpha.9",
     "@storybook/core-events": "5.1.0-alpha.9",
     "@storybook/theming": "5.1.0-alpha.9",
     "core-js": "^2.6.5",
-    "global": "^4.3.2",
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",
     "util-deprecate": "^1.0.2"

diff --git a/addons/backgrounds/src/components/index.ts b/addons/backgrounds/src/components/index.ts
diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -1,15 +1,27 @@
 import React, { Component, Fragment } from 'react';
 import memoize from 'memoizerific';
 
+import { Combo, Consumer } from '@storybook/api';
 import { Global, Theme } from '@storybook/theming';
 
-import { SET_STORIES } from '@storybook/core-events';
-
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
-import { BackgroundConfig, BackgroundSelectorItem } from '../models';
+
+interface Item {
+  id: string;
+  title: string;
+  onClick: () => void;
+  value: string;
+  right?: any;
+}
+
+interface Input {
+  name: string;
+  value: string;
+  default?: boolean;
+}
 
 const iframeId = 'storybook-preview-background';
 
@@ -20,7 +32,7 @@ const createBackgroundSelectorItem = memoize(1000)(
     value: string,
     hasSwatch: boolean,
     change: (arg: { selected: string; expanded: boolean }) => void
-  ): BackgroundSelectorItem => ({
+  ): Item => ({
     id: id || name,
     title: name,
     onClick: () => {
@@ -31,10 +43,7 @@ const createBackgroundSelectorItem = memoize(1000)(
   })
 );
 
-const getSelectedBackgroundColor = (
-  list: BackgroundConfig[],
-  currentSelectedValue: string
-): string => {
+const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string): string => {
   if (!list.length) {
     return 'transparent';
   }
@@ -54,119 +63,96 @@ const getSelectedBackgroundColor = (
   return 'transparent';
 };
 
-const getDisplayableState = memoize(10)(
-  (props: BackgroundToolProps, state: BackgroundToolState, change) => {
-    const data = props.api.getCurrentStoryData();
-    const list: BackgroundConfig[] = (data && data.parameters && data.parameters[PARAM_KEY]) || [];
-
-    const selectedBackgroundColor = getSelectedBackgroundColor(list, state.selected);
+const mapper = ({ api, state }: Combo): { items: Input[] } => {
+  const story = state.storiesHash[state.storyId];
+  const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
 
-    let availableBackgroundSelectorItems: BackgroundSelectorItem[] = [];
+  return { items: list || [] };
+};
 
-    if (selectedBackgroundColor !== 'transparent') {
-      availableBackgroundSelectorItems.push(
-        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
-      );
-    }
+const getDisplayedItems = memoize(10)((list: Input[], selected: State['selected'], change) => {
+  let availableBackgroundSelectorItems: Item[] = [];
 
-    if (list.length) {
-      availableBackgroundSelectorItems = [
-        ...availableBackgroundSelectorItems,
-        ...list.map(({ name, value }) =>
-          createBackgroundSelectorItem(null, name, value, true, change)
-        ),
-      ];
-    }
+  if (selected !== 'transparent') {
+    availableBackgroundSelectorItems.push(
+      createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
+    );
+  }
 
-    return {
-      items: availableBackgroundSelectorItems,
-      selectedBackgroundColor,
-    };
+  if (list.length) {
+    availableBackgroundSelectorItems = [
+      ...availableBackgroundSelectorItems,
+      ...list.map(({ name, value }) =>
+        createBackgroundSelectorItem(null, name, value, true, change)
+      ),
+    ];
   }
-);
 
-interface BackgroundToolProps {
-  api: {
-    on(event: string, callback: (data: any) => void): void;
-    off(event: string, callback: (data: any) => void): void;
-    getCurrentStoryData(): any;
-  };
-}
+  return availableBackgroundSelectorItems;
+});
 
-interface BackgroundToolState {
-  items: BackgroundSelectorItem[];
+interface State {
   selected: string;
   expanded: boolean;
 }
 
-export class BackgroundSelector extends Component<BackgroundToolProps, BackgroundToolState> {
-  private listener = () => {
-    this.setState({ selected: null });
+export class BackgroundSelector extends Component<{}, State> {
+  state: State = {
+    selected: null,
+    expanded: false,
   };
 
-  constructor(props: BackgroundToolProps) {
-    super(props);
-
-    this.state = {
-      items: [],
-      selected: null,
-      expanded: false,
-    };
-  }
-
-  componentDidMount() {
-    const { api } = this.props;
-    api.on(SET_STORIES, this.listener);
-  }
+  change = (args: State) => this.setState(args);
 
-  componentWillUnmount() {
-    const { api } = this.props;
-    api.off(SET_STORIES, this.listener);
-  }
-
-  change = (args: { selected: string; expanded: boolean }) => this.setState(args);
+  onVisibilityChange = (s: boolean) => {
+    if (this.state.expanded !== s) {
+      this.setState({ expanded: s });
+    }
+  };
 
   render() {
-    const { expanded } = this.state;
-    const { items, selectedBackgroundColor } = getDisplayableState(
-      this.props,
-      this.state,
-      this.change
+    const { expanded, selected } = this.state;
+
+    return (
+      <Consumer filter={mapper}>
+        {({ items }: { items: Input[] }) => {
+          const selectedBackgroundColor = getSelectedBackgroundColor(items, selected);
+          const links = getDisplayedItems(items, selectedBackgroundColor, this.change);
+
+          return items.length ? (
+            <Fragment>
+              {selectedBackgroundColor ? (
+                <Global
+                  styles={(theme: Theme) => ({
+                    [`#${iframeId}`]: {
+                      background:
+                        selectedBackgroundColor === 'transparent'
+                          ? theme.background.content
+                          : selectedBackgroundColor,
+                    },
+                  })}
+                />
+              ) : null}
+              <WithTooltip
+                placement="top"
+                trigger="click"
+                tooltipShown={expanded}
+                onVisibilityChange={this.onVisibilityChange}
+                tooltip={<TooltipLinkList links={links} />}
+                closeOnClick
+              >
+                <IconButton
+                  key="background"
+                  active={selectedBackgroundColor !== 'transparent'}
+                  title="Change the background of the preview"
+                >
+                  <Icons icon="photo" />
+                </IconButton>
+              </WithTooltip>
+            </Fragment>
+          ) : null;
+        }}
+      </Consumer>
     );
-
-    return items.length ? (
-      <Fragment>
-        {selectedBackgroundColor ? (
-          <Global
-            styles={(theme: Theme) => ({
-              [`#${iframeId}`]: {
-                background:
-                  selectedBackgroundColor === 'transparent'
-                    ? theme.background.content
-                    : selectedBackgroundColor,
-              },
-            })}
-          />
-        ) : null}
-        <WithTooltip
-          placement="top"
-          trigger="click"
-          tooltipShown={expanded}
-          onVisibilityChange={(newVisibility: boolean) =>
-            this.setState({ expanded: newVisibility })
-          }
-          tooltip={<TooltipLinkList links={items} />}
-          closeOnClick
-        >
-          <IconButton
-            key="background"
-            active={selectedBackgroundColor !== 'transparent'}
-            title="Change the background of the preview"
-          >
-            <Icons icon="photo" />
-          </IconButton>
-        </WithTooltip>
-      </Fragment>
-    ) : null;
   }
 }
diff --git a/addons/backgrounds/src/containers/index.ts b/addons/backgrounds/src/containers/index.ts
diff --git a/addons/backgrounds/src/models/BackgroundConfig.ts b/addons/backgrounds/src/models/BackgroundConfig.ts
diff --git a/addons/backgrounds/src/models/BackgroundSelectorItem.ts b/addons/backgrounds/src/models/BackgroundSelectorItem.ts
diff --git a/addons/backgrounds/src/models/index.ts b/addons/backgrounds/src/models/index.ts