Merge pull request #28424 from storybookjs/norbert/auto-import-monorepo

Build: Auto-import correction

.vscode/settings.json

@@ -18,8 +18,8 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "editor.tabSize": 2,
   "editor.formatOnSave": true,
+  "editor.tabSize": 2,
   "eslint.format.enable": true,
   "eslint.options": {
     "cache": true,
@@ -49,7 +49,15 @@
   "files.associations": {
     "*.js": "javascriptreact"
   },
+  "javascript.preferences.importModuleSpecifier": "relative",
+  "javascript.preferences.quoteStyle": "single",
+  "js/ts.implicitProjectConfig.target": "ESNext",
   "prettier.ignorePath": "./code/.prettierignore",
-  "typescript.tsdk": "./code/node_modules/typescript/lib",
-  "storyExplorer.storybookConfigDir": "./code/ui/.storybook"
+  "storyExplorer.storybookConfigDir": "./code/.storybook",
+  "typescript.format.enable": false,
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.preferGoToSourceDefinition": true,
+  "typescript.tsdk": "./code/node_modules/typescript/lib"
 }

code/.eslintrc.js

@@ -208,6 +208,13 @@ module.exports = {
         'local-rules/no-uncategorized-errors': 'warn',
       },
     },
+    {
+      files: ['**/*.ts', '!**/*.test.*', '!**/*.spec.*'],
+      excludedFiles: ['**/*.test.*'],
+      rules: {
+        'local-rules/storybook-monorepo-imports': 'error',
+      },
+    },
     {
       files: ['./core/src/preview-errors.ts'],
       excludedFiles: ['**/*.test.*'],

code/addons/a11y/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

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

@@ -26,7 +26,6 @@ const safeDeepEqual = (a: any, b: any): boolean => {
 };
 
 export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
-  // @ts-expect-error Unused, possibly remove, leaving, because it could be accessed even though it is private
   private mounted: boolean;
 
   constructor(props: ActionLoggerProps) {

code/addons/actions/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/backgrounds/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "compilerOptions": {
-    "strict": true
-  }
+  "compilerOptions": {},
+  "include": ["src/**/*"]
 }

code/addons/controls/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/docs/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/essentials/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/gfm/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/highlight/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "types": ["webpack-env"],
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/interactions/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "skipLibCheck": true,
     "strict": false
   },
   "include": ["src/**/*"]

code/addons/jest/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/links/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/measure/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "compilerOptions": {
-    "strict": true
-  }
+  "compilerOptions": {},
+  "include": ["src/**/*"]
 }

code/addons/onboarding/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/outline/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "compilerOptions": {
-    "strict": true
-  }
+  "compilerOptions": {},
+  "include": ["src/**/*"]
 }

code/addons/storysource/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/themes/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "compilerOptions": {
-    "strict": true
-  }
+  "compilerOptions": {},
+  "include": ["src/**/*"]
 }

code/addons/toolbars/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/addons/viewport/tsconfig.json

@@ -1,7 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "compilerOptions": {
-    "strict": true
-  }
+  "compilerOptions": {},
+  "include": ["src/**/*"]
 }

code/builders/builder-vite/tsconfig.json

@@ -1,9 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/builders/builder-webpack5/tsconfig.json

@@ -1,8 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true
-  },
+  "compilerOptions": {},
   "include": ["src/**/*"]
 }

code/core/README.md

@@ -24,3 +24,28 @@ import { addons } from 'storybook/internal/manager-api';
 ```
 
 Importing from `@storybook/core` is explicitly NOT supported; it WILL break in a future version of storybook, very likely in a non-major version bump.
+
+# For maintainers
+
+## When to use `@storybook/core`
+
+In the following packages you should import from `@storybook/core` (and ONLY from `@storybook/core`):
+
+- `@storybook/core`
+- `@storybook/codemod`
+
+To prevent cyclical dependencies, these packages cannot depend on the `storybook` package.
+
+## When to use `storybook/internal`
+
+In every other package you should import from `storybook/internal` (and ONLY from `storybook/internal`).
+
+The heuristic is simple:
+
+> If you see a peerDependency on `storybook` in the `package.json` of the package you are working on, you should import from `storybook/internal`.
+
+## The 1 exception: the `storybook` package itself
+
+The sole exception is the `storybook` package itself.
+
+Obviously, the `storybook` package cannot depend on itself, so it must import from `@storybook/core`.

code/core/scripts/check.ts

@@ -1,6 +1,6 @@
 import { getTSFilesAndConfig, getTSProgramAndHost, getTSDiagnostics } from './helpers/typescript';
 
-const tsconfigPath = 'tsconfig.check.json';
+const tsconfigPath = 'tsconfig.json';
 
 const { options, fileNames } = getTSFilesAndConfig(tsconfigPath);
 const { program, host } = getTSProgramAndHost(fileNames, options);

code/core/scripts/dts.ts

@@ -43,7 +43,7 @@ await Promise.all(
     await dts(
       i.file,
       [...external, ...i.externals],
-      join(import.meta.dirname, '..', 'tsconfig.build.json')
+      join(import.meta.dirname, '..', 'tsconfig.json')
     );
   })
 );

code/core/src/common/js-package-manager/Yarn2Proxy.ts

@@ -38,7 +38,6 @@ const CRITICAL_YARN2_ERROR_CODES = {
   YN0083: 'AUTOMERGE_GIT_ERROR',
 };
 
-// @ts-expect-error If we want a code to be parsed, we move from the list below to the list above
 // Keep the codes here, they might be helpful in the future
 const YARN2_ERROR_CODES = {
   ...CRITICAL_YARN2_ERROR_CODES,

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -59,7 +59,7 @@ const Notification = styled.div<{ duration?: number }>(
     }
 );
 
-const NotificationWithInteractiveStates = styled(Notification)(() => ({
+const NotificationWithInteractiveStates = styled(Notification)({
   cursor: 'pointer',
   border: 'none',
   outline: 'none',
@@ -80,7 +80,7 @@ const NotificationWithInteractiveStates = styled(Notification)(() => ({
     boxShadow:
       'rgba(2,156,253,1) 0 0 0 1px inset, 0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)',
   },
-}));
+});
 const NotificationButton = NotificationWithInteractiveStates.withComponent('div');
 const NotificationLink = NotificationWithInteractiveStates.withComponent(Link);
 

code/core/src/manager/components/sidebar/SearchResults.tsx

@@ -53,10 +53,10 @@ const IconWrapper = styled.div({
   marginTop: 2,
 });
 
-const ResultRowContent = styled.div(() => ({
+const ResultRowContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
-}));
+});
 
 const NoResults = styled.div(({ theme }) => ({
   marginTop: 20,

code/core/src/manager/globals-runtime.ts

@@ -20,9 +20,12 @@ global.sendTelemetryError = (error) => {
 
 // handle all uncaught errors at the root of the application and log to telemetry
 global.addEventListener('error', (args) => {
+  // @ts-expect-error (not Event)
   const error = args.error || args;
   global.sendTelemetryError(error);
 });
+
+// @ts-expect-error (not Event)
 global.addEventListener('unhandledrejection', ({ reason }) => {
   global.sendTelemetryError(reason);
 });

code/core/tsconfig.json

@@ -1,12 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "skipLibCheck": true,
-    "strict": true,
-    "skipDefaultLibCheck": true,
-    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
-    "target": "ES2022",
     "module": "ES2022"
   },
   "include": ["src/**/*", "scripts/**/*", "*.d.ts"]

code/frameworks/angular/tsconfig.build.json

@@ -16,7 +16,11 @@
     "pretty": true,
     "noErrorTruncation": true,
     "listEmittedFiles": false,
-    "noUnusedLocals": false
+    "noUnusedLocals": false,
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    }
   },
   "include": ["src/**/*", "src/**/*.json"]
 }