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.build.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "strict": true,
-    "skipDefaultLibCheck": true,
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "rootDir": ".",
-    "target": "ES2022",
-    "module": "ES2022"
-  },
-  "include": ["src/**/*"]
-}

code/core/tsconfig.check.json

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

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"]
 }

code/frameworks/ember/tsconfig.json

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

code/frameworks/html-vite/tsconfig.json

@@ -1,11 +1,12 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "resolveJsonModule": true,
-    "strict": true
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"],
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"]
 }

code/frameworks/html-webpack5/tsconfig.json

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

code/frameworks/nextjs/tsconfig.json

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

code/frameworks/preact-vite/tsconfig.json

@@ -1,12 +1,13 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "resolveJsonModule": true,
+    "baseUrl": ".",
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
-    "strict": true
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/frameworks/preact-webpack5/tsconfig.json

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

code/frameworks/react-vite/tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "resolveJsonModule": true,
-    "strict": true
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/frameworks/react-webpack5/tsconfig.json

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

code/frameworks/server-webpack5/tsconfig.json

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

code/frameworks/svelte-vite/tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "resolveJsonModule": true,
-    "strict": true
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/frameworks/svelte-webpack5/tsconfig.json

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

code/frameworks/sveltekit/tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "resolveJsonModule": true,
-    "strict": true
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/frameworks/vue3-vite/tsconfig.json

@@ -1,11 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "strict": true
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/frameworks/vue3-webpack5/tsconfig.json

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

code/frameworks/web-components-vite/tsconfig.json

@@ -1,10 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["node"],
-    "resolveJsonModule": true,
-    "strict": true
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/frameworks/web-components-webpack5/tsconfig.json

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

code/lib/blocks/package.json

@@ -61,6 +61,7 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "workspace:*",
+    "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
     "@types/color-convert": "^2.0.0",
     "tocbot": "^4.20.1"

code/lib/blocks/src/controls/Number.tsx

@@ -62,7 +62,9 @@ export const NumberControl: FC<NumberProps> = ({
 
   const htmlElRef = useRef(null);
   useEffect(() => {
-    if (forceVisible && htmlElRef.current) htmlElRef.current.select();
+    if (forceVisible && htmlElRef.current) {
+      htmlElRef.current.select();
+    }
   }, [forceVisible]);
 
   useEffect(() => {

code/lib/blocks/src/controls/Object.tsx

@@ -249,12 +249,15 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
   const [showRaw, setShowRaw] = useState(!hasData);
+
   const [parseError, setParseError] = useState<Error>(null);
   const readonly = !!argType?.table?.readonly;
   const updateRaw: (raw: string) => void = useCallback(
     (raw) => {
       try {
-        if (raw) onChange(JSON.parse(raw));
+        if (raw) {
+          onChange(JSON.parse(raw));
+        }
         setParseError(undefined);
       } catch (e) {
         setParseError(e);
@@ -271,7 +274,9 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
 
   const htmlElRef = useRef(null);
   useEffect(() => {
-    if (forceVisible && htmlElRef.current) htmlElRef.current.select();
+    if (forceVisible && htmlElRef.current) {
+      htmlElRef.current.select();
+    }
   }, [forceVisible]);
 
   if (!hasData) {

code/lib/blocks/tsconfig.json

@@ -1,10 +1,12 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "baseUrl": ".",
     "module": "esnext",
-    "skipLibCheck": true,
-    "rootDir": "./src",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
     "strict": false
   },
+  "extends": "../../tsconfig.json",
   "include": ["src/**/*"]
 }

code/lib/cli/tsconfig.json

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

code/lib/codemod/tsconfig.json

@@ -1,10 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "skipLibCheck": true,
     "allowJs": true,
-    "strict": true
+    "strict": false
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "__testfixtures__", "__tests__"]
+  "exclude": ["node_modules", "__testfixtures__", "__tests__"],
+  "include": ["src/**/*"]
 }

code/lib/core-webpack/tsconfig.json

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

code/lib/csf-plugin/tsconfig.json

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

code/lib/instrumenter/tsconfig.json

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

code/lib/react-dom-shim/tsconfig.json

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

code/lib/source-loader/tsconfig.json

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

code/lib/test/tsconfig.json

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

code/presets/create-react-app/tsconfig.json

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

code/presets/html-webpack/tsconfig.json

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

code/presets/preact-webpack/tsconfig.json

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

code/presets/react-webpack/tsconfig.json

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

code/presets/server-webpack/tsconfig.json

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

code/presets/svelte-webpack/tsconfig.json

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

code/presets/vue3-webpack/tsconfig.json

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

code/renderers/html/tsconfig.json

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

code/renderers/preact/tsconfig.json

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

code/renderers/react/package.json

@@ -83,7 +83,6 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/blocks": "workspace:*",
     "@storybook/test": "workspace:*",
     "@types/babel-plugin-react-docgen": "^4",
     "@types/semver": "^7.3.4",

code/renderers/react/template/stories/docgen-components/ts-function-component-inline-defaults/input.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore-error (importing a js file)
 import { imported } from '../imported';
 
 const local = 'local-value';

code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore (js import not supported in TS)
 import { imported } from '../imported';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore (css import not supported in TS)

code/renderers/react/tsconfig.json

@@ -1,10 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "allowJs": true
+    "baseUrl": ".",
+    "paths": {
+      "@storybook/react": ["./"],
+      "@storybook/blocks": ["../../lib/blocks"]
+    }
   },
   "include": ["src/**/*", "template/**/*"]
 }

code/renderers/server/tsconfig.json

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

code/renderers/svelte/tsconfig.json

@@ -1,10 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "strict": true,
-    "resolveJsonModule": true
+    "module": "ESNext"
   },
   "include": ["src/**/*", "src/**/*.svelte", "template/**/*", "template/**/*.svelte"]
 }

code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts

@@ -1,5 +1,5 @@
 import { TypeSystem } from 'storybook/internal/docs-tools';
-import type { VueDocgenInfo } from 'frameworks/vue3-vite/src';
+import type { VueDocgenInfo } from '../../../../../frameworks/vue3-vite/src';
 
 type TestComponent = { __docgenInfo: VueDocgenInfo<'vue-component-meta'> };
 

code/renderers/vue3/tsconfig.json

@@ -1,13 +1,10 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
     "allowJs": true
   },
+  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"],
   "vueCompilerOptions": {
     "target": 3
-  },
-  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"]
+  }
 }

code/renderers/web-components/tsconfig.json

@@ -1,8 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "baseUrl": ".",
     "resolveJsonModule": true,
-    "strict": true
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    }
   },
   "include": ["src/**/*", "template/**/*"]
 }

code/tsconfig.json

@@ -1,23 +1,23 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "ignoreDeprecations": "5.0",
-    "baseUrl": ".",
-    "incremental": false,
-    "noImplicitAny": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react",
-    "moduleResolution": "Node",
-    "target": "ES2020",
-    "module": "CommonJS",
-    "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
     "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "ignoreDeprecations": "5.0",
+    "incremental": false,
     "isolatedModules": true,
-    "strictBindCallApply": true,
+    "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "noUnusedLocals": true,
-    "strict": true
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictBindCallApply": true,
+    "target": "ES2020"
   },
   "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"]
 }

code/yarn.lock

@@ -5496,6 +5496,7 @@ __metadata:
     "@storybook/csf": "npm:0.1.11"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
+    "@storybook/react": "workspace:*"
     "@storybook/test": "workspace:*"
     "@types/color-convert": "npm:^2.0.0"
     "@types/lodash": "npm:^4.14.167"
@@ -6400,7 +6401,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:renderers/react"
   dependencies:
-    "@storybook/blocks": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/react-dom-shim": "workspace:*"
     "@storybook/test": "workspace:*"

scripts/eslint-plugin-local-rules/index.js

@@ -2,5 +2,6 @@ module.exports = {
   rules: {
     'no-uncategorized-errors': require('./no-uncategorized-errors'),
     'no-duplicated-error-codes': require('./no-duplicated-error-codes'),
+    'storybook-monorepo-imports': require('./storybook-monorepo-imports'),
   },
 };

scripts/eslint-plugin-local-rules/storybook-monorepo-imports.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const cache = {};
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ensure the imports-paths of packages in the monorepo is correct',
+      category: 'Best Practices',
+      recommended: true,
+      url: 'https://github.com/storybookjs/storybook/blob/next/code/core/README.md',
+    },
+    fixable: 'code',
+  },
+  create(context) {
+    return {
+      ImportDeclaration: (node) => {
+        const fileName = context.getPhysicalFilename();
+        const isInCLI = !!fileName.includes(path.join('code', 'lib', 'cli'));
+        const isInCodeod = !!fileName.includes(path.join('code', 'lib', 'codemod'));
+        const isInCore = !!fileName.includes(path.join('code', 'core'));
+
+        if (
+          node.source.value.startsWith('@storybook/core/') &&
+          !isInCLI &&
+          !isInCore &&
+          !isInCodeod
+        ) {
+          const newPath = node.source.value
+            .replace('@storybook/core', 'storybook/internal')
+            .replace('/src', '');
+          context.report({
+            node: node,
+            message: `Cannot import from @storybook/core in this package. Use storybook/internal instead.`,
+            fix: (fixer) => {
+              return fixer.replaceText(node.source, `'${newPath}'`);
+            },
+          });
+        }
+
+        if (node.source.value.startsWith('storybook/internal/') && isInCore) {
+          const newPath = node.source.value
+            .replace('storybook/internal', '@storybook/core')
+            .replace('/src', '');
+          context.report({
+            node: node,
+            message: `Cannot import from storybook/internal in this package. Use @storybook/core instead.`,
+            fix: (fixer) => {
+              return fixer.replaceText(node.source, `'${newPath}'`);
+            },
+          });
+        }
+      },
+    };
+  },
+};

test-storybooks/portable-stories-kitchen-sink/vue3/package.json

@@ -16,66 +16,66 @@
   },
   "resolutions": {
     "@playwright/test": "1.42.1",
-    "@storybook/addon-a11y": "portal:../../../code/addons/a11y",
-    "@storybook/addon-actions": "portal:../../../code/addons/actions",
-    "@storybook/addon-backgrounds": "portal:../../../code/addons/backgrounds",
-    "@storybook/addon-controls": "portal:../../../code/addons/controls",
-    "@storybook/addon-docs": "portal:../../../code/addons/docs",
-    "@storybook/addon-essentials": "portal:../../../code/addons/essentials",
-    "@storybook/addon-highlight": "portal:../../../code/addons/highlight",
-    "@storybook/addon-interactions": "portal:../../../code/addons/interactions",
-    "@storybook/addon-jest": "portal:../../../code/addons/jest",
-    "@storybook/addon-links": "portal:../../../code/addons/links",
-    "@storybook/addon-measure": "portal:../../../code/addons/measure",
-    "@storybook/addon-mgx-gfm": "portal:../../../code/addons/mgx-gfm",
-    "@storybook/addon-outline": "portal:../../../code/addons/outline",
-    "@storybook/addon-storysource": "portal:../../../code/addons/storysource",
-    "@storybook/addon-themes": "portal:../../../code/addons/themes",
-    "@storybook/addon-toolbars": "portal:../../../code/addons/toolbars",
-    "@storybook/addon-viewport": "portal:../../../code/addons/viewport",
-    "@storybook/angular": "portal:../../../code/frameworks/angular",
-    "@storybook/blocks": "portal:../../../code/lib/blocks",
-    "@storybook/builder-vite": "portal:../../../code/builders/builder-vite",
-    "@storybook/builder-webpack5": "portal:../../../code/builders/builder-webpack5",
-    "@storybook/codemod": "portal:../../../code/lib/codemod",
-    "@storybook/core": "portal:../../../code/core",
-    "@storybook/core-webpack": "portal:../../../code/lib/core-webpack",
-    "@storybook/csf-plugin": "portal:../../../code/lib/csf-plugin",
-    "@storybook/ember": "portal:../../../code/frameworks/ember",
-    "@storybook/html": "portal:../../../code/renderers/html",
-    "@storybook/html-webpack5": "portal:../../../code/frameworks/html-webpack5",
-    "@storybook/instrumenter": "portal:../../../code/lib/instrumenter",
-    "@storybook/nextjs": "portal:../../../code/frameworks/nextjs",
-    "@storybook/preact": "portal:../../../code/renderers/preact",
-    "@storybook/preact-vite": "portal:../../../code/frameworks/preact-vite",
-    "@storybook/preact-webpack5": "portal:../../../code/frameworks/preact-webpack5",
-    "@storybook/preset-create-react-app": "portal:../../../code/presets/create-react-app",
-    "@storybook/preset-html-webpack": "portal:../../../code/presets/html-webpack",
-    "@storybook/preset-preact-webpack": "portal:../../../code/presets/preact-webpack",
-    "@storybook/preset-react-webpack": "portal:../../../code/presets/react-webpack",
-    "@storybook/preset-server-webpack": "portal:../../../code/presets/server-webpack",
-    "@storybook/preset-svelte-webpack": "portal:../../../code/presets/svelte-webpack",
-    "@storybook/preset-vue3-webpack": "portal:../../../code/presets/vue3-webpack",
-    "@storybook/react": "portal:../../../code/renderers/react",
-    "@storybook/react-dom-shim": "portal:../../../code/lib/react-dom-shim",
-    "@storybook/react-vite": "portal:../../../code/frameworks/react-vite",
-    "@storybook/react-webpack5": "portal:../../../code/frameworks/react-webpack5",
-    "@storybook/server": "portal:../../../code/renderers/server",
-    "@storybook/server-webpack5": "portal:../../../code/frameworks/server-webpack5",
-    "@storybook/source-loader": "portal:../../../code/lib/source-loader",
-    "@storybook/svelte": "portal:../../../code/renderers/svelte",
-    "@storybook/svelte-vite": "portal:../../../code/frameworks/svelte-vite",
-    "@storybook/svelte-webpack5": "portal:../../../code/frameworks/svelte-webpack5",
-    "@storybook/sveltekit": "portal:../../../code/frameworks/sveltekit",
-    "@storybook/test": "portal:../../../code/lib/test",
-    "@storybook/vue3": "portal:../../../code/renderers/vue3",
-    "@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite",
-    "@storybook/vue3-webpack5": "portal:../../../code/frameworks/vue3-webpack5",
-    "@storybook/web-components": "portal:../../../code/renderers/web-components",
-    "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite",
-    "@storybook/web-components-webpack5": "portal:../../../code/frameworks/web-components-webpack5",
+    "@storybook/addon-a11y": "file:../../../code/addons/a11y",
+    "@storybook/addon-actions": "file:../../../code/addons/actions",
+    "@storybook/addon-backgrounds": "file:../../../code/addons/backgrounds",
+    "@storybook/addon-controls": "file:../../../code/addons/controls",
+    "@storybook/addon-docs": "file:../../../code/addons/docs",
+    "@storybook/addon-essentials": "file:../../../code/addons/essentials",
+    "@storybook/addon-highlight": "file:../../../code/addons/highlight",
+    "@storybook/addon-interactions": "file:../../../code/addons/interactions",
+    "@storybook/addon-jest": "file:../../../code/addons/jest",
+    "@storybook/addon-links": "file:../../../code/addons/links",
+    "@storybook/addon-measure": "file:../../../code/addons/measure",
+    "@storybook/addon-mgx-gfm": "file:../../../code/addons/mgx-gfm",
+    "@storybook/addon-outline": "file:../../../code/addons/outline",
+    "@storybook/addon-storysource": "file:../../../code/addons/storysource",
+    "@storybook/addon-themes": "file:../../../code/addons/themes",
+    "@storybook/addon-toolbars": "file:../../../code/addons/toolbars",
+    "@storybook/addon-viewport": "file:../../../code/addons/viewport",
+    "@storybook/angular": "file:../../../code/frameworks/angular",
+    "@storybook/blocks": "file:../../../code/lib/blocks",
+    "@storybook/builder-vite": "file:../../../code/builders/builder-vite",
+    "@storybook/builder-webpack5": "file:../../../code/builders/builder-webpack5",
+    "@storybook/codemod": "file:../../../code/lib/codemod",
+    "@storybook/core": "file:../../../code/core",
+    "@storybook/core-webpack": "file:../../../code/lib/core-webpack",
+    "@storybook/csf-plugin": "file:../../../code/lib/csf-plugin",
+    "@storybook/ember": "file:../../../code/frameworks/ember",
+    "@storybook/html": "file:../../../code/renderers/html",
+    "@storybook/html-webpack5": "file:../../../code/frameworks/html-webpack5",
+    "@storybook/instrumenter": "file:../../../code/lib/instrumenter",
+    "@storybook/nextjs": "file:../../../code/frameworks/nextjs",
+    "@storybook/preact": "file:../../../code/renderers/preact",
+    "@storybook/preact-vite": "file:../../../code/frameworks/preact-vite",
+    "@storybook/preact-webpack5": "file:../../../code/frameworks/preact-webpack5",
+    "@storybook/preset-create-react-app": "file:../../../code/presets/create-react-app",
+    "@storybook/preset-html-webpack": "file:../../../code/presets/html-webpack",
+    "@storybook/preset-preact-webpack": "file:../../../code/presets/preact-webpack",
+    "@storybook/preset-react-webpack": "file:../../../code/presets/react-webpack",
+    "@storybook/preset-server-webpack": "file:../../../code/presets/server-webpack",
+    "@storybook/preset-svelte-webpack": "file:../../../code/presets/svelte-webpack",
+    "@storybook/preset-vue3-webpack": "file:../../../code/presets/vue3-webpack",
+    "@storybook/react": "file:../../../code/renderers/react",
+    "@storybook/react-dom-shim": "file:../../../code/lib/react-dom-shim",
+    "@storybook/react-vite": "file:../../../code/frameworks/react-vite",
+    "@storybook/react-webpack5": "file:../../../code/frameworks/react-webpack5",
+    "@storybook/server": "file:../../../code/renderers/server",
+    "@storybook/server-webpack5": "file:../../../code/frameworks/server-webpack5",
+    "@storybook/source-loader": "file:../../../code/lib/source-loader",
+    "@storybook/svelte": "file:../../../code/renderers/svelte",
+    "@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite",
+    "@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5",
+    "@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
+    "@storybook/test": "file:../../../code/lib/test",
+    "@storybook/vue3": "file:../../../code/renderers/vue3",
+    "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite",
+    "@storybook/vue3-webpack5": "file:../../../code/frameworks/vue3-webpack5",
+    "@storybook/web-components": "file:../../../code/renderers/web-components",
+    "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
+    "@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5",
     "playwright": "1.42.1",
-    "storybook": "portal:../../../code/lib/cli"
+    "storybook": "file:../../../code/lib/cli"
   },
   "dependencies": {
     "vue": "^3.4.19"