Merge pull request #9879 from storybookjs/ts/improvements

TS improvements

lib/addons/package.json

@@ -31,6 +31,7 @@
     "@storybook/channels": "6.0.0-alpha.13",
     "@storybook/client-logger": "6.0.0-alpha.13",
     "@storybook/core-events": "6.0.0-alpha.13",
+    "@storybook/router": "6.0.0-alpha.13",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"

lib/addons/src/index.ts

@@ -3,36 +3,21 @@ import global from 'global';
 import { ReactElement } from 'react';
 import { Channel } from '@storybook/channels';
 import { API } from '@storybook/api';
+import { RenderData as RouterData } from '@storybook/router';
 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;
 }
-export interface RouteOptions {
-  storyId: string;
-  viewMode: ViewMode;
-  location: WindowLocation;
-  path: string;
-}
-export interface MatchOptions {
-  storyId: string;
-  viewMode: ViewMode;
-  location: WindowLocation;
-  path: string;
-}
 
 export interface Addon {
   title: string;
   type?: Types;
   id?: string;
-  route?: (routeOptions: RouteOptions) => string;
-  match?: (matchOptions: MatchOptions) => boolean;
+  route?: (routeOptions: RouterData) => string;
+  match?: (matchOptions: RouterData) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
   paramKey?: string;
   disabled?: boolean;

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

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { Channel } from '@storybook/channels';
+import { ThemeVars } from '@storybook/theming';
 
 import { API, State } from './index';
 import Store from './store';
+import { UIOptions } from './modules/layout';
 
 type IframeRenderer = (
   storyId: string,
@@ -17,7 +19,10 @@ export interface Provider {
   channel?: Channel;
   renderPreview?: IframeRenderer;
   handleAPI(api: API): void;
-  getConfig(): Record<string, any>;
+  getConfig(): {
+    theme?: ThemeVars;
+    [k: string]: any;
+  } & Partial<UIOptions>;
   [key: string]: any;
 }
 

lib/api/src/lib/stories.ts

@@ -14,7 +14,10 @@ export interface Root {
   isRoot: true;
   isLeaf: false;
   // MDX stories are "Group" type
-  parameters?: any;
+  parameters?: {
+    docsOnly?: boolean;
+    [k: string]: any;
+  };
 }
 
 export interface Group {
@@ -27,7 +30,10 @@ export interface Group {
   isRoot: false;
   isLeaf: false;
   // MDX stories are "Group" type
-  parameters?: any;
+  parameters?: {
+    docsOnly?: boolean;
+    [k: string]: any;
+  };
 }
 
 export interface Story {
@@ -48,6 +54,7 @@ export interface Story {
       showRoots?: boolean;
       [k: string]: any;
     };
+    docsOnly?: boolean;
     [k: string]: any;
   };
 }
@@ -65,6 +72,7 @@ export interface StoryInput {
       showRoots?: boolean;
       [key: string]: any;
     };
+    docsOnly?: boolean;
     [parameterName: string]: any;
   };
   isLeaf: boolean;

lib/api/src/modules/layout.ts

@@ -54,9 +54,8 @@ export interface SubAPI {
 type PartialSubState = Partial<SubState>;
 type PartialThemeVars = Partial<ThemeVars>;
 type PartialLayout = Partial<Layout>;
-type PartialUI = Partial<UI>;
 
-interface Options extends ThemeVars {
+export interface UIOptions {
   name?: string;
   url?: string;
   goFullScreen: boolean;
@@ -96,16 +95,19 @@ const deprecationMessage = (optionsMap: OptionsMap, prefix = '') =>
     prefix ? `${prefix}'s` : ''
   } { ${Object.values(optionsMap).join(', ')} } instead.`;
 
-const applyDeprecatedThemeOptions = deprecate(({ name, url, theme }: Options): PartialThemeVars => {
-  const { brandTitle, brandUrl, brandImage }: PartialThemeVars = theme || {};
-  return {
-    brandTitle: brandTitle || name,
-    brandUrl: brandUrl || url,
-    brandImage: brandImage || null,
-  };
-}, deprecationMessage(deprecatedThemeOptions));
+const applyDeprecatedThemeOptions = deprecate(
+  ({ name, url, theme }: UIOptions): PartialThemeVars => {
+    const { brandTitle, brandUrl, brandImage }: PartialThemeVars = theme || {};
+    return {
+      brandTitle: brandTitle || name,
+      brandUrl: brandUrl || url,
+      brandImage: brandImage || null,
+    };
+  },
+  deprecationMessage(deprecatedThemeOptions)
+);
 
-const applyDeprecatedLayoutOptions = deprecate((options: Partial<Options>): PartialLayout => {
+const applyDeprecatedLayoutOptions = deprecate((options: Partial<UIOptions>): PartialLayout => {
   const layoutUpdate: PartialLayout = {};
 
   ['goFullScreen', 'showStoriesPanel', 'showAddonPanel'].forEach(
@@ -123,14 +125,14 @@ const applyDeprecatedLayoutOptions = deprecate((options: Partial<Options>): Part
   return layoutUpdate;
 }, deprecationMessage(deprecatedLayoutOptions));
 
-const checkDeprecatedThemeOptions = (options: Options) => {
+const checkDeprecatedThemeOptions = (options: UIOptions) => {
   if (Object.keys(deprecatedThemeOptions).find(v => v in options)) {
     return applyDeprecatedThemeOptions(options);
   }
   return {};
 };
 
-const checkDeprecatedLayoutOptions = (options: Partial<Options>) => {
+const checkDeprecatedLayoutOptions = (options: Partial<UIOptions>) => {
   if (Object.keys(deprecatedLayoutOptions).find(v => v in options)) {
     return applyDeprecatedLayoutOptions(options);
   }

lib/router/src/router.tsx

@@ -7,17 +7,21 @@ import {
   navigate,
   LocationProvider,
   RouteComponentProps,
+  LocationContext,
   NavigateFn,
 } from '@reach/router';
 import { ToggleVisibility } from './visibility';
 import { queryFromString, parsePath, getMatch } from './utils';
 
 interface Other {
-  viewMode?: string;
-  storyId?: string;
+  viewMode: string;
+  storyId: string;
+  path: string;
 }
 
-export type RenderData = RouteComponentProps & Other;
+export type RenderData = Pick<LocationContext, 'location'> &
+  Partial<Pick<LocationContext, 'navigate'>> &
+  Other;
 
 interface MatchingData {
   match: null | { path: string };