Fix type issues related to Angular sandbox usage

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: [
     {

code/addons/actions/src/addArgsHelpers.ts

@@ -50,11 +50,13 @@ export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (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);

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;

code/addons/actions/src/containers/ActionLogger/index.tsx

@@ -36,15 +36,15 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
     this.state = { actions: [] };
   }
 
-  componentDidMount() {
+  override componentDidMount() {
     this.mounted = true;
     const { api } = this.props;
 
     api.on(EVENT_ID, this.addAction);
     api.on(STORY_CHANGED, this.handleStoryChange);
   }
 
-  componentWillUnmount() {
+  override componentWillUnmount() {
     this.mounted = false;
     const { api } = this.props;
 
@@ -79,7 +79,7 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
     this.setState({ actions: [] });
   };
 
-  render() {
+  override render() {
     const { actions = [] } = this.state;
     const { active } = this.props;
     const props = {

code/addons/actions/src/decorator.ts

@@ -56,8 +56,8 @@ export const withActions = makeDecorator({
   parameterName: PARAM_KEY,
   skipIfNoParametersOrOptions: true,
   wrapper: (getStory, context, { parameters }) => {
-    if (parameters?.handles) {
-      applyEventHandlers(actions, ...parameters.handles);
+    if (parameters?.['handles']) {
+      applyEventHandlers(actions, ...parameters['handles']);
     }
 
     return getStory(context);

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 {

code/lib/core-common/src/utils/envs.ts

@@ -1,3 +1,4 @@
+// @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 +11,9 @@ export function loadEnvs(options: { production?: boolean } = {}): {
   const defaultNodeEnv = options.production ? 'production' : 'development';
 
   const env: Record<string, string | undefined> = {
-    NODE_ENV: process.env.NODE_ENV || defaultNodeEnv,
-    NODE_PATH: process.env.NODE_PATH || '',
-    STORYBOOK: process.env.STORYBOOK || 'true',
+    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 +32,7 @@ export function loadEnvs(options: { production?: boolean } = {}): {
     {} as Record<string, string>
   );
 
-  const { stringified, raw } = getEnvironment({ nodeEnv: env.NODE_ENV });
+  const { stringified, raw } = getEnvironment({ nodeEnv: env['NODE_ENV'] });
 
   const fullRaw = { ...env, ...raw };
 

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;

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<string, string> = {}, options = {}) => {
+  const navigateTo = (
+    path: string,
+    queryParams: Record<string, string> = {},
+    options: NavigateOptions = {}
+  ) => {
     const params = Object.entries(queryParams)
       .filter(([, v]) => v)
       .sort(([a], [b]) => (a < b ? -1 : 1))

code/lib/router/src/index.ts

@@ -3,3 +3,4 @@
 
 export * from './utils';
 export * from './router';
+export * from './types';

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<R.Location>;
-  navigate: ReturnType<typeof useNavigate>;
-} & Other;
-
-export type RenderData = Pick<RouterData, 'location'> & 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<typeof R.useNavigate> & { 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;

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<R.Location>;
+  navigate: NavigateFunction;
+} & Other;
+
+export type RenderData = Pick<RouterData, 'location'> & Other;
+
+export interface LinkProps {
+  to: string;
+  children: ReactNode;
+}

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<Location>) => queryFromString(location.search);
 export const stringifyQuery = (query: Query) =>

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,

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';

code/renderers/html/src/globals.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 
 const { window: globalWindow } = global;