Tech/improvements extracted from composition

addons/backgrounds/src/containers/BackgroundSelector.tsx

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

addons/events/src/components/Event.tsx

@@ -1,5 +1,4 @@
 import React, { ChangeEvent, Component } from 'react';
-import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
 import isEqual from 'lodash/isEqual';
 
@@ -109,19 +108,7 @@ interface ItemState {
 }
 
 class Item extends Component<ItemProps, ItemState> {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    onEmit: PropTypes.func.isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
-    payload: PropTypes.any,
-  };
-
-  static defaultProps = {
-    payload: {},
-  };
-
-  static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => {
+  static getDerivedStateFromProps = ({ payload = {} }: ItemProps, { prevPayload }: ItemState) => {
     if (!isEqual(payload, prevPayload)) {
       const payloadString = json.plain(payload);
       const refinedPayload = getJSONFromString(payloadString);

addons/events/src/components/Panel.tsx

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
 import { API } from '@storybook/api';
@@ -24,15 +23,6 @@ interface EventsPanelState {
 }
 
 export default class EventsPanel extends Component<EventsPanelProps, EventsPanelState> {
-  static propTypes = {
-    active: PropTypes.bool.isRequired,
-    api: PropTypes.shape({
-      emit: PropTypes.func,
-      off: PropTypes.func,
-      on: PropTypes.func,
-    }).isRequired,
-  };
-
   state: EventsPanelState = {
     events: [],
   };

addons/graphql/src/components/FullScreen/index.tsx

@@ -1,10 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
 import { style } from './style';
 
 export const FullScreen: FunctionComponent = ({ children }) => {
   return <div style={style.wrapper}>{children}</div>;
 };
-
-FullScreen.defaultProps = { children: null };
-FullScreen.propTypes = { children: PropTypes.node };

addons/graphql/src/manager.tsx

@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
 import GraphiQL from 'graphiql';
 import 'graphiql/graphiql.css';
 
@@ -16,7 +15,7 @@ const GQL: FunctionComponent<GQLProps> = ({ active }) => {
   return active ? (
     <Consumer>
       {({ api, state }: Combo) => {
-        const story = state.storiesHash[state.storyId];
+        const story = api.getData(state.storyId);
         const parameters = story ? api.getParameters(story.id, PARAM_KEY) : null;
 
         if (parameters) {
@@ -32,8 +31,5 @@ const GQL: FunctionComponent<GQLProps> = ({ active }) => {
     </Consumer>
   ) : null;
 };
-GQL.propTypes = {
-  active: PropTypes.bool.isRequired,
-};
 
 export default GQL;

app/react/src/demo/Welcome.tsx

@@ -5,7 +5,6 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
 } from 'react';
-import PropTypes from 'prop-types';
 
 type MainProps = Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'style'>;
 const Main: FunctionComponent<MainProps> = props => (
@@ -25,12 +24,6 @@ type TitleProps = DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHead
 const Title: FunctionComponent<TitleProps> = ({ children, ...props }) => (
   <h1 {...props}>{children}</h1>
 );
-Title.propTypes = {
-  children: PropTypes.node,
-};
-Title.defaultProps = {
-  children: undefined,
-};
 
 type NoteProps = Omit<
   DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>,
@@ -85,14 +78,6 @@ const Link: FunctionComponent<LinkProps> = ({ children, href, target, rel, ...pr
     {children}
   </a>
 );
-Link.propTypes = {
-  href: PropTypes.string,
-  children: PropTypes.node,
-};
-Link.defaultProps = {
-  href: undefined,
-  children: undefined,
-};
 
 type NavButtonProps = Omit<
   DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
@@ -120,12 +105,6 @@ const NavButton: FunctionComponent<NavButtonProps> = ({ children, onClick, ...pr
     {children}
   </button>
 );
-NavButton.propTypes = {
-  children: PropTypes.node,
-};
-NavButton.defaultProps = {
-  children: undefined,
-};
 
 type WelcomeProps = {
   showApp: () => void;
@@ -176,8 +155,5 @@ const Welcome: FunctionComponent<WelcomeProps> = ({ showApp }) => (
   </Main>
 );
 Welcome.displayName = 'Welcome';
-Welcome.defaultProps = {
-  showApp: null,
-};
 
 export { Welcome as default };

examples/dev-kits/manager.js

@@ -13,6 +13,7 @@ addons.setConfig({
     brandImage: logo,
     brandTitle: 'Custom - Storybook',
     ...themes.dark,
+    appContentBg: 'white',
   },
   panelPosition: 'bottom',
   selectedPanel: 'storybook/roundtrip',

lib/addons/package.json

@@ -33,6 +33,7 @@
     "@storybook/client-logger": "6.0.0-alpha.20",
     "@storybook/core-events": "6.0.0-alpha.20",
     "@storybook/router": "6.0.0-alpha.20",
+    "@storybook/theming": "6.0.0-alpha.20",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "regenerator-runtime": "^0.13.3",

lib/addons/src/index.ts

@@ -4,6 +4,7 @@ import { Channel } from '@storybook/channels';
 import { API } from '@storybook/api';
 import { RenderData as RouterData } from '@storybook/router';
 import { logger } from '@storybook/client-logger';
+import { ThemeVars } from '@storybook/theming';
 import { types, Types } from './types';
 
 export { Channel };
@@ -38,6 +39,7 @@ interface Elements {
 }
 
 interface Config {
+  theme?: ThemeVars;
   [key: string]: any;
 }
 

lib/api/src/index.tsx

@@ -68,6 +68,7 @@ export type Module = StoreData &
   ProviderData & {
     mode?: 'production' | 'development';
     state: State;
+    fullAPI: API;
   };
 
 export type State = Other &
@@ -124,7 +125,7 @@ type StatePartial = Partial<State>;
 export type ManagerProviderProps = Children & RouterData & ProviderData & DocsModeData;
 
 class ManagerProvider extends Component<ManagerProviderProps, State> {
-  api: API;
+  api: API = {} as API;
 
   modules: any[];
 
@@ -178,15 +179,17 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       initStories,
       initURL,
       initVersions,
-    ].map(initModule => initModule({ ...routeData, ...apiData, state: this.state }));
+    ].map(initModule =>
+      initModule({ ...routeData, ...apiData, state: this.state, fullAPI: this.api })
+    );
 
     // 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: API = Object.assign(this.api, { navigate }, ...this.modules.map(m => m.api));
 
-    const api = initProviderApi({ provider, store, api: combo });
+    initProviderApi({ provider, store, api });
 
     api.on(STORY_CHANGED, (id: string) => {
       const options = api.getParameters(id, 'options');
@@ -223,7 +226,8 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
         ...state,
         location: props.location,
         path: props.path,
-        viewMode: props.viewMode,
+        // if its a docsOnly page, even the 'story' view mode is considered 'docs'
+        viewMode: (props.docsMode && props.viewMode) === 'story' ? 'docs' : props.viewMode,
         storyId: props.storyId,
       };
     }

lib/api/src/lib/stories.ts

@@ -247,7 +247,7 @@ export const transformStoriesRawToStoriesHash = (
     return acc;
   }
 
-  return Object.values(storiesHashOutOfOrder).reduce(addItem, base);
+  return Object.values(storiesHashOutOfOrder).reduce(addItem, { ...base });
 };
 
 export type Item = StoriesHash[keyof StoriesHash];

lib/api/src/modules/addons.ts

@@ -85,20 +85,20 @@ export function ensurePanel(panels: Panels, selectedPanel?: string, currentPanel
   return currentPanel;
 }
 
-export default ({ provider, store }: Module) => {
+export default ({ provider, store, fullAPI }: Module) => {
   const api: SubAPI = {
     getElements: type => provider.getElements(type),
     getPanels: () => api.getElements(types.PANEL),
     getStoryPanels: () => {
       const allPanels = api.getPanels();
-      const { storyId, storiesHash } = store.getState();
-      const storyInput = storyId && (storiesHash[storyId] as StoryInput);
+      const { storyId } = store.getState();
+      const story = fullAPI.getData(storyId);
 
-      if (!allPanels || !storyInput) {
+      if (!allPanels || !story) {
         return allPanels;
       }
 
-      const { parameters } = storyInput;
+      const { parameters } = story;
 
       const filteredPanels: Collection = {};
       Object.entries(allPanels).forEach(([id, panel]) => {

lib/api/src/tests/addons.test.js

@@ -61,7 +61,7 @@ describe('Addons API', () => {
   describe('#getStoryPanels', () => {
     it('should return all panels by default', () => {
       // given
-      const { api } = initAddons({ provider, store });
+      const { api } = initAddons({ provider, store, fullAPI: { getData: () => undefined } });
 
       // when
       const filteredPanels = api.getStoryPanels();
@@ -73,21 +73,27 @@ describe('Addons API', () => {
     it('should filter disabled addons', () => {
       // given
       const storyId = 'story 1';
+      const storiesHash = {
+        [storyId]: {
+          parameters: {
+            a11y: { disabled: true },
+          },
+        },
+      };
+
       const storeWithStory = {
         getState: () => ({
           storyId,
-          storiesHash: {
-            [storyId]: {
-              parameters: {
-                a11y: { disabled: true },
-              },
-            },
-          },
+          storiesHash,
         }),
         setState: jest.fn(),
       };
 
-      const { api } = initAddons({ provider, store: storeWithStory });
+      const { api } = initAddons({
+        provider,
+        store: storeWithStory,
+        fullAPI: { getData: id => storiesHash[id] },
+      });
 
       // when
       const filteredPanels = api.getStoryPanels();

lib/channel-postmessage/src/index.ts

@@ -4,10 +4,6 @@ import { logger } from '@storybook/client-logger';
 
 import { isJSON, parse, stringify } from 'telejson';
 
-interface RawEvent {
-  data: string;
-}
-
 interface Config {
   page: 'manager' | 'preview';
 }
@@ -106,7 +102,7 @@ export class PostmsgTransport {
     return window.parent;
   }
 
-  private handleEvent(rawEvent: RawEvent): void {
+  private handleEvent(rawEvent: MessageEvent): void {
     try {
       const { data } = rawEvent;
       const { key, event } = typeof data === 'string' && isJSON(data) ? parse(data) : data;

lib/channels/src/index.ts

@@ -138,7 +138,7 @@ export class Channel {
   private handleEvent(event: ChannelEvent, isPeer = false) {
     const listeners = this.listeners(event.type);
     if (listeners && (isPeer || event.from !== this.sender)) {
-      listeners.forEach(fn => !(isPeer && fn.ignorePeer) && fn(...event.args));
+      listeners.forEach(fn => !(isPeer && fn.ignorePeer) && fn.apply(event, event.args));
     }
     this.data[event.type] = event.args;
   }

lib/components/src/icon/icon.tsx

@@ -1,14 +1,14 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 import icons, { IconKey } from './icons';
 
-import Svg, { SvgProps } from './svg';
+import Svg from './svg';
 
 const Path = styled.path({
   fill: 'currentColor',
 });
 
-export interface IconsProps extends SvgProps {
+export interface IconsProps extends ComponentProps<typeof Svg> {
   icon: IconKey;
 }
 

lib/components/src/icon/svg.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@storybook/theming';
 
-export interface SvgProps {
+interface SvgProps {
   inline?: boolean;
 }
 

lib/components/src/tooltip/WithTooltip.tsx

@@ -121,12 +121,12 @@ const WithToolTipState: FunctionComponent<WithTooltipPureProps & {
               try {
                 iframe.contentWindow.document.removeEventListener('click', hide);
               } catch (e) {
-                logger.warn('Removing a click listener from iframe failed: ', e);
+                logger.debug('Removing a click listener from iframe failed: ', e);
               }
             });
           }
         } catch (e) {
-          logger.warn('Adding a click listener to iframe failed: ', e);
+          logger.debug('Adding a click listener to iframe failed: ', e);
         }
       };