Sandboxes: Typecheck check production storybook packages

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -278,7 +278,7 @@ export const baseTemplates = {
     },
     modifications: {
       useCsfFactory: true,
-      extraDependencies: ['prop-types'],
+      extraDependencies: ['prop-types', '@types/prop-types'],
       mainConfig: {
         features: {
           developmentModeForBuild: true,

code/renderers/react/template/stories/csf4.stories.tsx

@@ -1,4 +1,5 @@
-// @ts-expect-error this will be part of the package.json of the sandbox
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it is an error in development but it isn't sandbox
+// @ts-ignore only present in sandbox
 import preview from '#.storybook/preview';
 
 const meta = preview.meta({

code/renderers/react/template/stories/decorators.stories.tsx

@@ -43,7 +43,7 @@ export const Context: StoryObj<typeof Component> = {
       </TestContext.Provider>
     ),
   ],
-  render: function Render(args, context) {
+  render: function Render() {
     const value = useContext(TestContext);
 
     if (!value) {

code/renderers/react/template/stories/docgen-components/10278-ts-multiple-components/input.tsx

@@ -10,12 +10,12 @@ interface IBProps {
 }
 
 /** A component */
-const A = (props: IAProps): JSX.Element => {
+const A = (props: IAProps): React.JSX.Element => {
   return <>Hi {props.aProperty}</>;
 };
 
 /** B component */
-const B = (props: IBProps): JSX.Element => {
+const B = (props: IBProps): React.JSX.Element => {
   return <>Hi {props.bProperty}</>;
 };
 

code/renderers/react/template/stories/docgen-components/8143-ts-react-fc-generics/input.tsx

@@ -5,6 +5,8 @@ interface Props {
   margin: number;
 }
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it isn't an error in development but it is in sandbox
+// @ts-ignore unused props
 export const Text: React.FC<Props> = ({ padding = '0', margin }) => <>Text</>;
 
 export const component = Text;

code/renderers/react/template/stories/docgen-components/8740-ts-multi-props/input.tsx

@@ -18,6 +18,8 @@ export const Paragraph: React.FC<ElemBProps> = ({ size, children }) => (
   <div className={size}>{children}</div>
 );
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it isn't an error in 18 (development) but it is in 19 (sandbox)
+// @ts-ignore not present on react 19
 Paragraph.defaultProps = { size: 'md' };
 
 export const component = Header;

code/renderers/react/template/stories/docgen-components/9575-ts-camel-case/input.tsx

@@ -8,7 +8,7 @@ export interface IProps {
   color?: string;
 }
 
-const iconButton: FC<IProps> = function IconButton(props) {
+const iconButton: FC<IProps> = function IconButton() {
   return <div className="icon-button">icon-button</div>;
 };
 
@@ -17,6 +17,8 @@ iconButton.propTypes = {
   color: PropTypes.string,
 };
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it isn't an error in 18 (development) but it is in 19 (sandbox)
+// @ts-ignore not present on react 19
 iconButton.defaultProps = {
   color: 'primary',
 };

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { imported } from '../imported';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore (css import not supported in TS)
-import * as styles from '../imported.module.css';
+import styles from '../imported.module.css';
 
 const local = 'local-value';
 
@@ -37,6 +37,8 @@ export const PropsWriter: React.FC<PropsWriterProps> = (props: PropsWriterProps)
   <pre>{JSON.stringify(props)}</pre>
 );
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it isn't an error in 18 (development) but it is in 19 (sandbox)
+// @ts-ignore not present on react 19
 PropsWriter.defaultProps = {
   numberOptional: 1,
   stringOptional: 'stringOptional',

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

@@ -88,6 +88,6 @@ interface TypeScriptPropsProps {
   inlinedNumericLiteralUnion: 0 | 1 | 2;
 }
 
-export const TypeScriptProps: FC<TypeScriptPropsProps> = (props) => <div>TypeScript!</div>;
+export const TypeScriptProps: FC<TypeScriptPropsProps> = () => <div>TypeScript!</div>;
 
 export const component = TypeScriptProps;

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

@@ -93,6 +93,8 @@ interface TypeScriptPropsProps {
 }
 
 export const TypeScriptProps: FC<TypeScriptPropsProps> = () => <div>TypeScript!</div>;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- we can't expect error as it isn't an error in 18 (development) but it is in 19 (sandbox)
+// @ts-ignore not present on react 19
 TypeScriptProps.defaultProps = {
   any: 'Any value',
   string: 'A string value',

scripts/task.ts

@@ -17,6 +17,7 @@ import { version } from '../code/package.json';
 import { bench } from './tasks/bench';
 import { build } from './tasks/build';
 import { check } from './tasks/check';
+import { checkSandbox } from './tasks/check-sandbox';
 import { chromatic } from './tasks/chromatic';
 import { compile } from './tasks/compile';
 import { dev } from './tasks/dev';
@@ -91,6 +92,7 @@ export const tasks = {
   // These tasks pertain to a single sandbox in the ../sandboxes dir
   generate,
   sandbox,
+  'check-sandbox': checkSandbox,
   dev,
   'smoke-test': smokeTest,
   build,

scripts/tasks/check-sandbox.ts

@@ -0,0 +1,24 @@
+import { access } from 'node:fs/promises';
+
+import type { Task } from '../task';
+import { exec } from '../utils/exec';
+
+async function pathExists(path: string) {
+  try {
+    await access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export const checkSandbox: Task = {
+  description: 'Typecheck the a sandbox',
+  dependsOn: ['sandbox'],
+  async ready({ builtSandboxDir }) {
+    return pathExists(builtSandboxDir);
+  },
+  async run({ sandboxDir }, { dryRun, debug }) {
+    await exec(`yarn typecheck`, { cwd: sandboxDir }, { dryRun, debug });
+  },
+};

scripts/tasks/sandbox-parts.ts

@@ -217,6 +217,9 @@ export const init: Task['run'] = async (
     case '@storybook/angular':
       await prepareAngularSandbox(cwd, template.name);
       break;
+    case '@storybook/react-vite':
+      await prepareViteSandbox(cwd);
+      break;
     default:
   }
 
@@ -878,6 +881,30 @@ async function prepareReactNativeWebSandbox(cwd: string) {
   }
 }
 
+async function prepareViteSandbox(cwd: string) {
+  const packageJsonPath = join(cwd, 'package.json');
+  const packageJson = await readJson(packageJsonPath);
+
+  packageJson.scripts = {
+    ...packageJson.scripts,
+    typecheck: 'yarn tsc -p tsconfig.app.json',
+  };
+  await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+
+  const tsConfigPath = join(cwd, 'tsconfig.app.json');
+  const tsConfigContent = await readFile(tsConfigPath, { encoding: 'utf-8' });
+  // This does not preserve comments, but that shouldn't be an issue for sandboxes
+  const tsConfigJson = JSON5.parse(tsConfigContent);
+
+  // We use enums
+  tsConfigJson.compilerOptions.erasableSyntaxOnly = false;
+  // Lots of unnecessary imports of react that need fixing
+  tsConfigJson.compilerOptions.noUnusedLocals = false;
+  // Means we can check our own public types
+  tsConfigJson.compilerOptions.skipLibCheck = false;
+  await writeFile(tsConfigPath, JSON.stringify(tsConfigJson, null, 2));
+}
+
 async function prepareAngularSandbox(cwd: string, templateName: string) {
   const angularJson = await readJson(join(cwd, 'angular.json'));
 

scripts/tasks/sandbox.ts

@@ -84,6 +84,7 @@ export const sandbox: Task = {
       // Adding the dep makes sure that even npx will use the linked workspace version.
       '@storybook/cli',
       'lodash-es',
+      '@types/lodash-es',
       'uuid',
     ];
 

scripts/utils/yarn.ts

@@ -108,7 +108,6 @@ export const addWorkaroundResolutions = async ({
     '@testing-library/dom': '^9.3.4',
     '@testing-library/jest-dom': '^6.6.3',
     '@testing-library/user-event': '^14.5.2',
-    typescript: '~5.7.3',
     rollup: '4.44.2',
   };