From b1500abff1f4febfa35ecbe8c298159feba79400 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 17 Feb 2020 11:16:50 +0100 Subject: [PATCH] A few TS improvements I found whilst working on inception --- lib/addons/package.json | 1 + lib/addons/src/index.ts | 21 +++------------------ lib/api/src/init-provider-api.ts | 7 ++++++- lib/api/src/lib/stories.ts | 12 ++++++++++-- lib/api/src/modules/layout.ts | 28 +++++++++++++++------------- lib/router/src/router.tsx | 10 +++++++--- 6 files changed, 42 insertions(+), 37 deletions(-) diff --git a/lib/addons/package.json b/lib/addons/package.json index 48d9ed6f3365..657dc86bf9d3 100644 --- a/lib/addons/package.json +++ b/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" diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts index a8b450e6e26f..193df1bbc798 100644 --- a/lib/addons/src/index.ts +++ b/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; paramKey?: string; disabled?: boolean; diff --git a/lib/api/src/init-provider-api.ts b/lib/api/src/init-provider-api.ts index c55f4163d9fb..012da3f06836 100644 --- a/lib/api/src/init-provider-api.ts +++ b/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; + getConfig(): { + theme?: ThemeVars; + [k: string]: any; + } & Partial; [key: string]: any; } diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts index e458327e15bb..f90a9083efb7 100644 --- a/lib/api/src/lib/stories.ts +++ b/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; diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts index fa4557589871..b731c16db828 100644 --- a/lib/api/src/modules/layout.ts +++ b/lib/api/src/modules/layout.ts @@ -54,9 +54,8 @@ export interface SubAPI { type PartialSubState = Partial; type PartialThemeVars = Partial; type PartialLayout = Partial; -type PartialUI = Partial; -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): PartialLayout => { +const applyDeprecatedLayoutOptions = deprecate((options: Partial): PartialLayout => { const layoutUpdate: PartialLayout = {}; ['goFullScreen', 'showStoriesPanel', 'showAddonPanel'].forEach( @@ -123,14 +125,14 @@ const applyDeprecatedLayoutOptions = deprecate((options: Partial): 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) => { +const checkDeprecatedLayoutOptions = (options: Partial) => { if (Object.keys(deprecatedLayoutOptions).find(v => v in options)) { return applyDeprecatedLayoutOptions(options); } diff --git a/lib/router/src/router.tsx b/lib/router/src/router.tsx index 923e0f3b3145..4de7cd402746 100644 --- a/lib/router/src/router.tsx +++ b/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 & + Partial> & + Other; interface MatchingData { match: null | { path: string };