Merge pull request #9791 from storybookjs/ts/ui-slow

MIGRATE lib/ui to Typescript

Self-merge @gaetanmaisse @kroeder

addons/a11y/src/register.tsx

@@ -93,7 +93,7 @@ addons.register(ADDON_ID, api => {
   addons.add(PANEL_ID, {
     title: 'Accessibility',
     type: types.PANEL,
-    render: ({ active, key }) => <A11YPanel key={key} api={api} active={active} />,
+    render: ({ active = true, key }) => <A11YPanel key={key} api={api} active={active} />,
     paramKey: PARAM_KEY,
   });
 

addons/docs/src/frameworks/react/lib/inspection/acornParser.ts

@@ -1,6 +1,7 @@
 import { Parser } from 'acorn';
 // @ts-ignore
 import jsx from 'acorn-jsx';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import estree from 'estree';
 // @ts-ignore
 import * as acornWalk from 'acorn-walk';

app/riot/src/client/preview/rendering/stringified.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import { mount, unregister, tag2 as tag } from 'riot';
 import * as riot from 'riot';
 import compiler from 'riot-compiler';

examples/angular-cli/package.json

@@ -5,14 +5,14 @@
   "license": "MIT",
   "scripts": {
     "build": "ng build",
-    "prebuild-storybook": "npm run storybook:prebuild",
+    "prebuild-storybook": "yarn storybook:prebuild",
     "build-storybook": "build-storybook -s src/assets",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "npm run storybook:prebuild && start-storybook -p 9008 -s src/assets",
-    "storybook:prebuild": "npm run test:generate-output && npm run docs:json",
+    "storybook": "yarn storybook:prebuild && start-storybook -p 9008 -s src/assets",
+    "storybook:prebuild": "yarn test:generate-output && yarn docs:json",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",

examples/marko-cli/package.json

@@ -16,7 +16,7 @@
     "serve-static": "NODE_ENV=production marko-starter serve-static",
     "start": "marko-starter server",
     "storybook": "start-storybook -p 9005",
-    "test": "npm run lint"
+    "test": "yarn lint"
   },
   "dependencies": {
     "marko": "^4.18.39",

examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot

@@ -5,7 +5,7 @@ Object {
   "__": null,
   "__b": 0,
   "__c": null,
-  "__d": null,
+  "__d": undefined,
   "__e": null,
   "__k": null,
   "constructor": undefined,
@@ -15,7 +15,7 @@ Object {
       "__": null,
       "__b": 0,
       "__c": null,
-      "__d": null,
+      "__d": undefined,
       "__e": null,
       "__k": null,
       "constructor": undefined,

lib/addons/package.json

@@ -36,6 +36,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
+    "@reach/router": "^1.2.1",
     "@types/util-deprecate": "^1.0.0"
   },
   "peerDependencies": {

lib/addons/src/index.ts

@@ -4,17 +4,27 @@ import { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import { API } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { WindowLocation } from '@reach/router';
 import { types, Types } from './types';
 
+export type ViewMode = 'story' | 'info' | 'settings' | undefined | string;
+
 export interface RenderOptions {
-  active: boolean;
-  key: string;
+  active?: boolean;
+  key?: string;
 }
 export interface RouteOptions {
   storyId: string;
+  viewMode: ViewMode;
+  location: WindowLocation;
+  path: string;
 }
 export interface MatchOptions {
-  viewMode: string;
+  storyId: string;
+  viewMode: ViewMode;
+  location: WindowLocation;
+  path: string;
 }
 
 export interface Addon {
@@ -25,6 +35,8 @@ export interface Addon {
   match?: (matchOptions: MatchOptions) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
   paramKey?: string;
+  disabled?: boolean;
+  hidden?: boolean;
 }
 
 export type Loader = (api: API) => void;

lib/addons/src/types.ts

@@ -5,6 +5,7 @@ export enum types {
   TAB = 'tab',
   PANEL = 'panel',
   TOOL = 'tool',
+  TOOLEXTRA = 'toolextra',
   PREVIEW = 'preview',
   NOTES_ELEMENT = 'notes-element',
 }

lib/api/src/index.tsx

@@ -1,4 +1,12 @@
-import React, { ReactElement, Component, useContext, useEffect, useMemo, useRef } from 'react';
+import React, {
+  ReactElement,
+  Component,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  ReactNode,
+} from 'react';
 import memoize from 'memoizerific';
 // @ts-ignore shallow-equal is not in DefinitelyTyped
 import shallowEqualObjects from 'shallow-equal/objects';
@@ -104,7 +112,7 @@ interface StoreData {
 }
 
 interface Children {
-  children: Component | ((props: Combo) => Component);
+  children: ReactNode | ((props: Combo) => ReactNode);
 }
 
 type StatePartial = Partial<State>;
@@ -248,11 +256,10 @@ class ManagerProvider extends Component<Props, State> {
       api: this.api,
     };
 
-    return (
-      <ManagerContext.Provider value={value}>
-        {typeof children === 'function' ? children(value) : children}
-      </ManagerContext.Provider>
-    );
+    // @ts-ignore
+    const content: ReactNode = typeof children === 'function' ? children(value) : children;
+
+    return <ManagerContext.Provider value={value}>{content}</ManagerContext.Provider>;
   }
 }
 

lib/api/src/init-provider-api.ts

@@ -1,12 +1,21 @@
-import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import { Channel } from '@storybook/channels';
 
-import { API } from './index';
+import { API, State } from './index';
 import Store from './store';
 
+type IframeRenderer = (
+  storyId: string,
+  viewMode: State['viewMode'],
+  id: string,
+  baseUrl: string,
+  scale: number,
+  queryParams: Record<string, any>
+) => ReactNode;
+
 export interface Provider {
   channel?: Channel;
-  renderPreview?: () => ReactElement;
+  renderPreview?: IframeRenderer;
   handleAPI(api: API): void;
   [key: string]: any;
 }

lib/api/src/modules/addons.ts

@@ -1,8 +1,11 @@
 import { ReactElement } from 'react';
 
+import { WindowLocation } from '@reach/router';
 import { Module } from '../index';
 import { Options } from '../store';
 
+export type ViewMode = 'story' | 'info' | 'settings' | undefined | string;
+
 export enum types {
   TAB = 'tab',
   PANEL = 'panel',
@@ -19,9 +22,15 @@ export interface RenderOptions {
 
 export interface RouteOptions {
   storyId: string;
+  viewMode: ViewMode;
+  location: WindowLocation;
+  path: string;
 }
 export interface MatchOptions {
-  viewMode: string;
+  storyId: string;
+  viewMode: ViewMode;
+  location: WindowLocation;
+  path: string;
 }
 
 export interface Addon {
@@ -32,6 +41,8 @@ export interface Addon {
   match?: (matchOptions: MatchOptions) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
   paramKey?: string;
+  disabled?: boolean;
+  hidden?: boolean;
 }
 export interface Collection {
   [key: string]: Addon;

lib/api/src/modules/notifications.ts

@@ -2,6 +2,8 @@ import { Module } from '../index';
 
 export interface Notification {
   id: string;
+  link: string;
+  content: string;
   onClear?: () => void;
 }
 

lib/api/src/modules/stories.ts

@@ -9,7 +9,7 @@ type Direction = -1 | 1;
 type StoryId = string;
 type ParameterName = string;
 
-type ViewMode = 'story' | 'info' | 'settings' | undefined;
+type ViewMode = 'story' | 'info' | 'settings' | undefined | string;
 
 export interface SubState {
   storiesHash: StoriesHash;

lib/api/src/modules/versions.ts

@@ -8,7 +8,7 @@ import { Module, API } from '../index';
 
 export interface Version {
   version: string;
-  info?: string;
+  info?: { plain: string };
   [key: string]: any;
 }
 

lib/components/src/tabs/tabs.tsx

@@ -139,7 +139,7 @@ export interface TabsProps {
   selected?: string;
   actions?: {
     onSelect: (id: string) => void;
-  };
+  } & Record<string, any>;
   backgroundColor?: string;
   absolute?: boolean;
   bordered?: boolean;

lib/core-events/src/index.test.ts

@@ -1,5 +1,4 @@
-/* eslint-disable import/no-duplicates */
-import * as EventsPackageExport from '.';
+import * as EventsPackageExport from './index';
 import EventsDefaultExport, { CHANNEL_CREATED } from './index';
 
 describe('Core Events', () => {

lib/router/src/router.tsx

@@ -33,12 +33,12 @@ interface QueryMatchProps {
 }
 interface RouteProps {
   path: string;
-  startsWith: boolean;
-  hideOnly: boolean;
-  children: (renderData: RenderData) => ReactNode;
+  startsWith?: boolean;
+  hideOnly?: boolean;
+  children: ReactNode;
 }
 
-interface QueryLinkProps {
+export interface QueryLinkProps {
   to: string;
   children: ReactNode;
 }

lib/ui/package.json

@@ -36,6 +36,7 @@
     "@storybook/core-events": "6.0.0-alpha.9",
     "@storybook/router": "6.0.0-alpha.9",
     "@storybook/theming": "6.0.0-alpha.9",
+    "@types/markdown-to-jsx":"^6.9.1",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "core-js-pure": "^3.0.1",
@@ -63,6 +64,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
+    "@storybook/react": "6.0.0-alpha.9",
     "@storybook/addon-actions": "6.0.0-alpha.9",
     "@storybook/addon-knobs": "6.0.0-alpha.9",
     "corejs-upgrade-webpack-plugin": "^3.0.1",

lib/ui/src/app.js → lib/ui/src/app.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import { Global, createGlobal, styled } from '@storybook/theming';
 import memoize from 'memoizerific';
 import sizeMe from 'react-sizeme';
 
 import { Route } from '@storybook/router';
 
+import { State } from '@storybook/api';
 import { Mobile } from './components/layout/mobile';
 import { Desktop } from './components/layout/desktop';
 import Nav from './containers/nav';
@@ -24,12 +24,11 @@ const createProps = memoize(1)(() => ({
     {
       key: 'settings',
       render: () => <SettingsPages />,
-      // eslint-disable-next-line react/prop-types
-      route: ({ children }) => (
+      route: (({ children }) => (
         <Route path="/settings" startsWith>
           {children}
         </Route>
-      ),
+      )) as FunctionComponent,
     },
   ],
 }));
@@ -41,7 +40,16 @@ const View = styled.div({
   width: '100vw',
 });
 
-const App = React.memo(({ viewMode, docsOnly, layout, panelCount, size: { width, height } }) => {
+const App = React.memo<{
+  viewMode: State['viewMode'];
+  docsOnly: boolean;
+  layout: State['layout'];
+  panelCount: number;
+  size: {
+    width: number;
+    height: number;
+  };
+}>(({ viewMode, docsOnly, layout, panelCount, size: { width, height } }) => {
   const props = createProps();
 
   let content;
@@ -53,7 +61,7 @@ const App = React.memo(({ viewMode, docsOnly, layout, panelCount, size: { width,
       </div>
     );
   } else if (width < 600) {
-    content = <Mobile {...props} viewMode={viewMode} options={layout} panelCount={panelCount} />;
+    content = <Mobile {...props} viewMode={viewMode} options={layout} />;
   } else {
     content = (
       <Desktop
@@ -74,20 +82,6 @@ const App = React.memo(({ viewMode, docsOnly, layout, panelCount, size: { width,
     </View>
   );
 });
-App.propTypes = {
-  viewMode: PropTypes.string,
-  panelCount: PropTypes.number.isRequired,
-  layout: PropTypes.shape({}).isRequired,
-  size: PropTypes.shape({
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }).isRequired,
-  docsOnly: PropTypes.bool,
-};
-App.defaultProps = {
-  viewMode: undefined,
-  docsOnly: false,
-};
 
 const SizedApp = sizeMe({ monitorHeight: true })(App);
 

lib/ui/src/components/layout/Root.tsx

@@ -0,0 +1,10 @@
+import { styled } from '@storybook/theming';
+
+export const Root = styled.div({
+  position: 'fixed',
+  left: 0,
+  top: 0,
+  width: '100vw',
+  height: '100vh',
+  overflow: 'hidden',
+});