Tech/api package

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

@@ -2,13 +2,11 @@ import React, { Component, Fragment } from 'react';
 import { SyntaxHighlighter } from '@storybook/components';
 import events, { STORY_CHANGED } from '@storybook/core-events';
 import { EVENTS, PARAM_KEY } from './constants';
-import { Channel } from '@storybook/channels';
 import { CssResource } from './CssResource';
 import { bool, func, shape } from 'prop-types';
 
-interface CssResourcePanelProps {
+interface Props {
   active: boolean;
-  channel: Channel;
   api: {
     emit: (event: any, data: any) => void;
     on: (event: events, callback: (data: any) => void) => void;
@@ -19,12 +17,12 @@ interface CssResourcePanelProps {
   };
 }
 
-interface CssResourcePanelState {
+interface State {
   list: CssResource[];
 }
 
-export class CssResourcePanel extends Component<CssResourcePanelProps, CssResourcePanelState> {
-  constructor(props: CssResourcePanelProps) {
+export class CssResourcePanel extends Component<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -90,17 +88,3 @@ export class CssResourcePanel extends Component<CssResourcePanelProps, CssResour
     );
   }
 }
-
-(CssResourcePanel as any).propTypes = {
-  active: bool.isRequired,
-  channel: shape({
-    on: func,
-    emit: func,
-    removeListener: func,
-  }).isRequired,
-  api: shape({
-    on: func,
-    getQueryParam: func,
-    setQueryParams: func,
-  }).isRequired,
-};

addons/cssresources/src/register.tsx

@@ -5,14 +5,9 @@ import { ADDON_ID, PANEL_ID } from './constants';
 import { CssResourcePanel } from './css-resource-panel';
 
 addons.register(ADDON_ID, api => {
-  const channel = addons.getChannel();
-  // Need to cast as any as it's not matching Addon type, to investigate
   addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'CSS resources',
-    // eslint-disable-next-line react/prop-types
-    render: ({ active, key }: any) => (
-      <CssResourcePanel key={key} channel={channel} api={api} active={active} />
-    ),
-  } as any);
+    render: ({ active }) => <CssResourcePanel api={api} active={active} />,
+  });
 });

lib/addons/src/experimental.tsx

@@ -0,0 +1,30 @@
+// import React from 'react';
+// import { addons, types } from '@storybook/addons';
+// import { Consumer } from '@storybook/api';
+
+// import { ADDON_ID, PANEL_ID } from './constants';
+
+// {
+//   /*
+// <Consumer filter={({ state, api }) => [state.storyId]}>
+//   {(storyId) => <h1>Current story = {storyId}</h1>}
+// </Consumer>
+// */
+// }
+
+// addons.register(ADDON_ID, api => {
+//   addons.add(PANEL_ID, {
+//     type: types.PANEL,
+//     title: 'My Addon',
+//     render: ({ active }) => <Consumer>{({ state }) => <h1>Current story = {state.storyId}</h1>}</Consumer>,
+//   });
+// });
+
+// addons.register(ADDON_ID, api => {
+//   addons.add(PANEL_ID, {
+//     type: types.PANEL,
+//     title: 'My Addon',
+//     connect: ({ state: { storyId }, api }) => ({ storyId }),
+//     render: ({ active, storyId }) => <h1>Current story = {storyId}</h1>,
+//   });
+// });

lib/addons/src/index.ts

@@ -4,7 +4,6 @@ import { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import logger from '@storybook/client-logger';
 import { types, Types, isSupportedType } from './types';
-import deprecate from 'util-deprecate';
 
 export interface RenderOptions {
   active: boolean;
@@ -20,19 +19,19 @@ export interface Addon {
   title: string;
   type?: Types;
   id?: string;
-  route: (routeOptions: RouteOptions) => string;
-  match: (matchOptions: MatchOptions) => boolean;
+  route?: (routeOptions: RouteOptions) => string;
+  match?: (matchOptions: MatchOptions) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
 }
 
 export type Loader = (callback: (api: any) => void) => void;
 
-export { types, isSupportedType };
+export { types, Types, isSupportedType };
 
 interface Loaders {
   [key: string]: Loader;
 }
-interface Collection {
+export interface Collection {
   [key: string]: Addon;
 }
 interface Elements {

lib/api/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@storybook/api",
+  "version": "5.0.0-alpha.10",
+  "description": "Core Storybook API & Context",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/lib/api",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
+  "scripts": {
+    "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.0.0-alpha.10",
+    "@storybook/core-events": "5.0.0-alpha.10",
+    "@storybook/theming": "5.0.0-alpha.10",
+    "@storybook/client-logger": "5.0.0-alpha.10",
+    "@storybook/router": "5.0.0-alpha.10",
+    "@types/lodash.isequal": "^4.5.3",
+    "@types/lodash.mergewith": "^4.6.4",
+    "@types/lodash.pick": "^4.4.4",
+    "global": "^4.3.2",
+    "lodash.isequal": "^4.5.0",
+    "lodash.mergewith": "^4.6.1",
+    "lodash.pick": "^4.4.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.7.0",
+    "util-deprecate": "^1.0.2"
+  },
+  "devDependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
+}

lib/api/scripts/generateVersion.js

@@ -0,0 +1,9 @@
+const fs = require('fs');
+const path = require('path');
+
+const output = version => `export const version = '${version}';\n`;
+
+const text = fs.readFileSync(path.join(__dirname, '../package.json'), 'utf8');
+const json = JSON.parse(text);
+
+fs.writeFileSync(path.join(__dirname, '../src/version.ts'), output(json.version), 'utf8');

lib/api/src/index.tsx

@@ -0,0 +1,211 @@
+import React, { Component } from 'react';
+
+import Events from '@storybook/core-events';
+import { Collection, Types } from '@storybook/addons';
+import initProviderApi from './init-provider-api';
+
+import Store from './store';
+import getInitialState from './initial-state';
+
+import initAddons from './modules/addons';
+import initChannel from './modules/channel';
+import initNotifications, { Notification } from './modules/notifications';
+import initStories, { StoriesHash } from './modules/stories';
+import initLayout from './modules/layout';
+import initShortcuts, { Shortcuts } from './modules/shortcuts';
+import initURL, { QueryParams } from './modules/url';
+import initVersions from './modules/versions';
+
+const ManagerContext = React.createContext({ api: undefined, state: getInitialState({}) });
+
+const { STORY_CHANGED, SET_STORIES, SELECT_STORY } = Events;
+
+interface RouterData {
+  location: Location;
+  path: string;
+  viewMode: 'story' | 'info' | string | undefined;
+  storyId: string;
+}
+
+export type Module = StoreData & RouterData & ProviderData & Navigate;
+
+interface Theme {
+  [key: string]: any;
+}
+
+export interface State extends RouterData {
+  layout: {
+    isFullscreen: boolean;
+    showPanel: boolean;
+    panelPosition: 'bottom' | 'right';
+    showNav: boolean;
+    isToolshown: boolean;
+  };
+
+  ui: {
+    name: string;
+    url: string;
+    enableShortcuts: boolean;
+    sortStoriesByKind: boolean;
+    sidebarAnimations: boolean;
+    theme: Theme;
+  };
+
+  storiesHash: StoriesHash;
+
+  shortcuts: Shortcuts;
+
+  customQueryParams: QueryParams;
+
+  notifications: Notification[];
+
+  versions: {
+    latest: any;
+    current: any;
+  };
+  lastVersionCheck: any;
+  dismissedVersionNotification: any;
+
+  [key: string]: any;
+}
+
+export interface API {
+  [key: string]: any;
+}
+interface Combo {
+  api: API;
+  state: State;
+}
+
+interface Provider {
+  handleAPI(api: API): void;
+  renderPreview(): void;
+  getElements(type: Types): Collection;
+  [key: string]: any;
+}
+
+interface ProviderData {
+  provider: Provider;
+}
+
+interface StoreData {
+  store: Store;
+}
+
+interface Children {
+  children: React.Component | (({ api, state }: Combo) => React.Component);
+}
+
+interface Navigate {
+  navigate(to: string, options?: { replace: boolean }): void;
+}
+
+type Props = Children & RouterData & ProviderData & Navigate;
+
+export class ManagerProvider extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    const { provider, location, path, viewMode, storyId, navigate } = props;
+
+    const store = new Store({
+      getState: () => this.state,
+      setState: (a: any, b: any) => this.setState(a, b),
+    });
+
+    // Initialize the state to be the initial (persisted) state of the store.
+    // This gives the modules the chance to read the persisted state, apply their defaults
+    // and override if necessary
+    this.state = store.getInitialState();
+
+    const apiData = {
+      navigate,
+      store,
+      provider,
+      location,
+      path,
+      viewMode,
+      storyId,
+    };
+
+    this.modules = [initChannel, initAddons, initLayout, initNotifications, initShortcuts, initStories, initURL, initVersions].map(
+      initModule => initModule(apiData)
+    );
+
+    // Create our initial state by combining the initial state of all modules, then overlaying any saved state
+    const state = getInitialState(...this.modules.map(m => m.state));
+
+    // Get our API by combining the APIs exported by each module
+    const combo = Object.assign({ navigate }, ...this.modules.map(m => m.api));
+
+    const api = initProviderApi({ provider, store, api: combo });
+
+    api.on(STORY_CHANGED, (id: string) => {
+      const options = api.getParameters(id, 'options');
+
+      api.setOptions(options);
+    });
+
+    api.on(SET_STORIES, (data: any) => {
+      api.setStories(data.stories);
+    });
+    api.on(SELECT_STORY, ({ kind, story, ...rest }: { [k: string]: any }) => {
+      api.selectStory(kind, story, rest);
+    });
+
+    this.state = state;
+    this.api = api;
+  }
+
+  static displayName = 'Manager';
+  api: API;
+  modules: any[];
+
+  static getDerivedStateFromProps = (props: Props, state: State) => {
+    if (state.path !== props.path) {
+      return {
+        ...state,
+        location: props.location,
+        path: props.path,
+        viewMode: props.viewMode,
+        storyId: props.storyId,
+      };
+    }
+    return null;
+  };
+
+  componentDidMount() {
+    // Now every module has had a chance to set its API, call init on each module which gives it
+    // a chance to do things that call other modules' APIs.
+    this.modules.forEach(({ init }) => {
+      if (init) {
+        init({ api: this.api });
+      }
+    });
+  }
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    const { state: prevState, props: prevProps } = this;
+
+    if (prevState !== nextState) {
+      return true;
+    }
+    if (prevProps.path !== nextProps.path) {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    const { children } = this.props;
+    const value = {
+      state: this.state,
+      api: this.api,
+    };
+
+    return <ManagerContext.Provider value={value}>{typeof children === 'function' ? children(value) : children}</ManagerContext.Provider>;
+  }
+}
+
+const ManagerConsumer = ManagerContext.Consumer;
+
+export { ManagerConsumer as Consumer, ManagerProvider as Provider };