From 46e2b922c0aeae4dbbfd0e58cb9a04ea9b03dc4e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 24 Nov 2022 15:26:31 +0100 Subject: [PATCH] Fix type issues related to Angular sandbox usage --- code/.eslintrc.js | 6 +++++ code/addons/actions/src/addArgsHelpers.ts | 6 +++-- .../src/components/ActionLogger/index.tsx | 2 +- .../src/containers/ActionLogger/index.tsx | 6 ++--- code/addons/actions/src/decorator.ts | 4 +-- code/lib/core-common/src/presets.ts | 4 +-- code/lib/core-common/src/utils/envs.ts | 11 +++++--- .../src/utils/get-storybook-info.ts | 2 +- code/lib/manager-api/src/modules/url.ts | 6 ++++- code/lib/router/src/index.ts | 1 + code/lib/router/src/router.tsx | 25 +++---------------- code/lib/router/src/types.ts | 24 ++++++++++++++++++ code/lib/router/src/utils.ts | 4 +-- code/lib/types/src/modules/addons.ts | 2 +- code/lib/types/src/modules/api.ts | 2 +- code/renderers/html/src/globals.ts | 3 ++- 16 files changed, 65 insertions(+), 43 deletions(-) create mode 100644 code/lib/router/src/types.ts diff --git a/code/.eslintrc.js b/code/.eslintrc.js index a22b9fd2de0..90b897bd414 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -13,6 +13,12 @@ module.exports = { 'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }], 'react-hooks/rules-of-hooks': 'off', 'jest/no-done-callback': 'off', + '@typescript-eslint/dot-notation': [ + 'error', + { + allowIndexSignaturePropertyAccess: true, + }, + ], }, overrides: [ { diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts index 530cb76c062..7f56922d396 100644 --- a/code/addons/actions/src/addArgsHelpers.ts +++ b/code/addons/actions/src/addArgsHelpers.ts @@ -50,11 +50,13 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => { return {}; } - const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action); + const argTypesWithAction = Object.entries(argTypes).filter( + ([name, argType]) => !!argType['action'] + ); return argTypesWithAction.reduce((acc, [name, argType]) => { if (isInInitialArgs(name, initialArgs)) { - acc[name] = action(typeof argType.action === 'string' ? argType.action : name); + acc[name] = action(typeof argType['action'] === 'string' ? argType['action'] : name); } return acc; }, {} as Args); diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index 5972091cdc1..f4231a8474f 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -20,7 +20,7 @@ export const Wrapper = styled(UnstyledWrapped)({ }); interface InspectorProps { - theme: Theme; + theme: Theme & { addonActionsTheme?: string }; sortObjectKeys: boolean; showNonenumerable: boolean; name: any; diff --git a/code/addons/actions/src/containers/ActionLogger/index.tsx b/code/addons/actions/src/containers/ActionLogger/index.tsx index 4c193972ef7..ab3fc51ab3c 100644 --- a/code/addons/actions/src/containers/ActionLogger/index.tsx +++ b/code/addons/actions/src/containers/ActionLogger/index.tsx @@ -36,7 +36,7 @@ export default class ActionLogger extends Component { - if (parameters?.handles) { - applyEventHandlers(actions, ...parameters.handles); + if (parameters?.['handles']) { + applyEventHandlers(actions, ...parameters['handles']); } return getStory(context); diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts index 167dae9b30c..c17f8c17d41 100644 --- a/code/lib/core-common/src/presets.ts +++ b/code/lib/core-common/src/presets.ts @@ -150,8 +150,8 @@ export const resolveAddonName = ( const map = ({ configDir }: InterPresetOptions) => (item: any) => { - const options = isObject(item) ? item.options || undefined : undefined; - const name = isObject(item) ? item.name : item; + const options = isObject(item) ? item['options'] || undefined : undefined; + const name = isObject(item) ? item['name'] : item; try { const resolved = resolveAddonName(configDir, name, options); return { diff --git a/code/lib/core-common/src/utils/envs.ts b/code/lib/core-common/src/utils/envs.ts index d354a890fca..d8d8105fe26 100644 --- a/code/lib/core-common/src/utils/envs.ts +++ b/code/lib/core-common/src/utils/envs.ts @@ -1,3 +1,5 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - Needed for Angular sandbox running without --no-link option. Do NOT convert to @ts-expect-error! import { getEnvironment } from 'lazy-universal-dotenv'; import { nodePathsToArray } from './paths'; @@ -10,9 +12,10 @@ export function loadEnvs(options: { production?: boolean } = {}): { const defaultNodeEnv = options.production ? 'production' : 'development'; const env: Record = { - NODE_ENV: process.env.NODE_ENV || defaultNodeEnv, - NODE_PATH: process.env.NODE_PATH || '', - STORYBOOK: process.env.STORYBOOK || 'true', + // eslint-disable-next-line @typescript-eslint/dot-notation + NODE_ENV: process.env['NODE_ENV'] || defaultNodeEnv, + NODE_PATH: process.env['NODE_PATH'] || '', + STORYBOOK: process.env['STORYBOOK'] || 'true', // This is to support CRA's public folder feature. // In production we set this to dot(.) to allow the browser to access these assets // even when deployed inside a subpath. (like in GitHub pages) @@ -31,7 +34,7 @@ export function loadEnvs(options: { production?: boolean } = {}): { {} as Record ); - const { stringified, raw } = getEnvironment({ nodeEnv: env.NODE_ENV }); + const { stringified, raw } = getEnvironment({ nodeEnv: env['NODE_ENV'] }); const fullRaw = { ...env, ...raw }; diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index b339fbd72f9..679ab828c03 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -70,7 +70,7 @@ const findConfigFile = (prefix: string, configDir: string) => { const getConfigInfo = (packageJson: PackageJson) => { let configDir = '.storybook'; - const storybookScript = packageJson.scripts?.storybook; + const storybookScript = packageJson.scripts?.['storybook']; if (storybookScript) { const configParam = getStorybookConfiguration(storybookScript, '-c', '--config-dir'); if (configParam) configDir = configParam; diff --git a/code/lib/manager-api/src/modules/url.ts b/code/lib/manager-api/src/modules/url.ts index 4e9e87c4781..c55899ff136 100644 --- a/code/lib/manager-api/src/modules/url.ts +++ b/code/lib/manager-api/src/modules/url.ts @@ -88,7 +88,11 @@ export interface SubAPI { } export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...rest }) => { - const navigateTo = (path: string, queryParams: Record = {}, options = {}) => { + const navigateTo = ( + path: string, + queryParams: Record = {}, + options: NavigateOptions = {} + ) => { const params = Object.entries(queryParams) .filter(([, v]) => v) .sort(([a], [b]) => (a < b ? -1 : 1)) diff --git a/code/lib/router/src/index.ts b/code/lib/router/src/index.ts index fcf12878b6a..1026ffcf03e 100644 --- a/code/lib/router/src/index.ts +++ b/code/lib/router/src/index.ts @@ -3,3 +3,4 @@ export * from './utils'; export * from './router'; +export * from './types'; diff --git a/code/lib/router/src/router.tsx b/code/lib/router/src/router.tsx index 9d6d6c09fb3..413ed5aba6c 100644 --- a/code/lib/router/src/router.tsx +++ b/code/lib/router/src/router.tsx @@ -1,26 +1,14 @@ import global from 'global'; -import type { ReactNode } from 'react'; import React, { useCallback } from 'react'; +import type { ReactNode } from 'react'; import * as R from 'react-router-dom'; import { ToggleVisibility } from './visibility'; -import type { StoryData } from './utils'; import { queryFromString, parsePath, getMatch } from './utils'; +import type { LinkProps, NavigateOptions, RenderData } from './types'; const { document } = global; -interface Other extends StoryData { - path: string; - singleStory?: boolean; -} - -export type RouterData = { - location: Partial; - navigate: ReturnType; -} & Other; - -export type RenderData = Pick & Other; - interface MatchingData { match: null | { path: string }; } @@ -40,22 +28,15 @@ interface RouteProps { children: ReactNode; } -export interface LinkProps { - to: string; - children: ReactNode; -} - const getBase = () => `${document.location.pathname}?`; -export type NavigateOptions = ReturnType & { plain?: boolean }; - // const queryNavigate: NavigateFn = (to: string | number, options?: NavigateOptions<{}>) => // typeof to === 'number' ? navigate(to) : navigate(`${getBase()}path=${to}`, options); export const useNavigate = () => { const navigate = R.useNavigate(); - return useCallback((to: string | number, { plain, ...options } = {} as NavigateOptions) => { + return useCallback((to: R.To | number, { plain, ...options } = {} as NavigateOptions) => { if (typeof to === 'string' && to.startsWith('#')) { document.location.hash = to; return undefined; diff --git a/code/lib/router/src/types.ts b/code/lib/router/src/types.ts new file mode 100644 index 00000000000..c601e68c290 --- /dev/null +++ b/code/lib/router/src/types.ts @@ -0,0 +1,24 @@ +import type * as R from 'react-router-dom'; +import type { ReactNode } from 'react'; +import type { StoryData } from './utils'; + +export interface Other extends StoryData { + path: string; + singleStory?: boolean; +} + +export type NavigateOptions = R.NavigateOptions & { plain?: boolean }; + +export type NavigateFunction = (to: R.To | number, options?: NavigateOptions) => void; + +export type RouterData = { + location: Partial; + navigate: NavigateFunction; +} & Other; + +export type RenderData = Pick & Other; + +export interface LinkProps { + to: string; + children: ReactNode; +} diff --git a/code/lib/router/src/utils.ts b/code/lib/router/src/utils.ts index 916240c8e67..0f0389a991b 100644 --- a/code/lib/router/src/utils.ts +++ b/code/lib/router/src/utils.ts @@ -117,7 +117,7 @@ const QS_OPTIONS: IStringifyOptions = { format: 'RFC1738', // encode spaces using the + sign serializeDate: (date: Date) => `!date(${date.toISOString()})`, }; -export const buildArgsParam = (initialArgs: Args, args: Args): string => { +export const buildArgsParam = (initialArgs: Args | undefined, args: Args): string => { const update = deepDiff(initialArgs, args); if (!update || update === DEEPLY_EQUAL) return ''; @@ -144,7 +144,7 @@ interface Query { } export const queryFromString = memoize(1000)( - (s: string): Query => qs.parse(s, { ignoreQueryPrefix: true }) + (s?: string): Query => (s !== undefined ? qs.parse(s, { ignoreQueryPrefix: true }) : {}) ); export const queryFromLocation = (location: Partial) => queryFromString(location.search); export const stringifyQuery = (query: Query) => diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts index d45ab93d4f6..afd900fcb0b 100644 --- a/code/lib/types/src/modules/addons.ts +++ b/code/lib/types/src/modules/addons.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import type { RenderData as RouterData } from '../../../router/src/router'; +import type { RenderData as RouterData } from '../../../router/src/types'; import type { ThemeVars } from '../../../theming/src/types'; import type { Args, diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts index c168529e958..59043839438 100644 --- a/code/lib/types/src/modules/api.ts +++ b/code/lib/types/src/modules/api.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import type { RenderData } from '../../../router/src/router'; +import type { RenderData } from '../../../router/src/types'; import type { Channel } from '../../../channels/src'; import type { ThemeVars } from '../../../theming/src/types'; import type { ViewMode } from './csf'; diff --git a/code/renderers/html/src/globals.ts b/code/renderers/html/src/globals.ts index e8dbbd88c1c..7d924c74dd1 100644 --- a/code/renderers/html/src/globals.ts +++ b/code/renderers/html/src/globals.ts @@ -1,4 +1,5 @@ -// @ts-expect-error (Converted from ts-ignore) +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - use ts-ignore instead of ts-expect-error to fix type issues in Angular sandbox import global from 'global'; const { window: globalWindow } = global;