Sandboxes: Typecheck check production storybook packages

.circleci/config.yml

@@ -263,6 +263,31 @@ jobs:
           name: Ensure no changes pending
       - report-workflow-on-failure
       - cancel-workflow-on-failure
+  check-sandboxes:
+    executor:
+      class: medium
+      name: sb_node_22_classic
+    parallelism: << parameters.parallelism >>
+    parameters:
+      parallelism:
+        type: integer
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: --depth 1 --verbose
+      - attach_workspace:
+          at: .
+      - run:
+          command: |
+            TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task check-sandbox)
+            cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn
+          name: Install sandbox dependencies
+      - run:
+          command: yarn task --task check-sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task check-sandbox) --no-link --start-from=never --junit
+          name: Type check Sandboxes
+      - report-workflow-on-failure:
+          template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task check-sandbox)
+      - store_test_results:
+          path: test-results
   chromatic-internal-storybook:
     environment:
       NODE_OPTIONS: --max_old_space_size=4096
@@ -969,6 +994,10 @@ workflows:
           parallelism: 30
           requires:
             - build
+      - check-sandboxes:
+          parallelism: 1
+          requires:
+            - create-sandboxes
       - chromatic-sandboxes:
           parallelism: 27
           requires:
@@ -1081,6 +1110,10 @@ workflows:
           parallelism: 5
           requires:
             - create-sandboxes
+      - check-sandboxes:
+          parallelism: 1
+          requires:
+            - create-sandboxes
       - test-portable-stories:
           matrix:
             parameters:
@@ -1154,6 +1187,10 @@ workflows:
           parallelism: 5
           requires:
             - create-sandboxes
+      - check-sandboxes:
+          parallelism: 1
+          requires:
+            - create-sandboxes
       - e2e-ui:
           requires:
             - build

.circleci/src/jobs/check-sandboxes.yml

@@ -0,0 +1,27 @@
+executor:
+  class: medium
+  name: sb_node_22_classic
+
+parameters:
+  parallelism:
+    type: integer
+
+parallelism: << parameters.parallelism >>
+
+steps:
+  - git-shallow-clone/checkout_advanced:
+      clone_options: '--depth 1 --verbose'
+  - attach_workspace:
+      at: .
+  - run:
+      name: Install sandbox dependencies
+      command: |
+        TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task check-sandbox)
+        cd sandbox/$(yarn get-sandbox-dir --template $TEMPLATE) && yarn
+  - run:
+      name: Type check Sandboxes
+      command: yarn task --task check-sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task check-sandbox) --no-link --start-from=never --junit
+  - report-workflow-on-failure:
+      template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task check-sandbox)
+  - store_test_results:
+      path: test-results

.circleci/src/workflows/daily.yml

@@ -31,6 +31,10 @@ jobs:
       parallelism: 30
       requires:
         - build
+  - check-sandboxes:
+      parallelism: 1
+      requires:
+        - create-sandboxes
   # - smoke-test-sandboxes: # disabled for now
   #     requires:
   #       - create-sandboxes

.circleci/src/workflows/merged.yml

@@ -54,6 +54,10 @@ jobs:
       parallelism: 5
       requires:
         - create-sandboxes
+  - check-sandboxes:
+      parallelism: 1
+      requires:
+        - create-sandboxes
   - test-portable-stories:
       requires:
         - build

.circleci/src/workflows/normal.yml

@@ -54,6 +54,10 @@ jobs:
       parallelism: 5
       requires:
         - create-sandboxes
+  - check-sandboxes:
+      parallelism: 1
+      requires:
+        - create-sandboxes
   # TODO: don't forget to reenable this
   #      - bench-sandboxes:
   #          parallelism: 5

code/addons/docs/src/index.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
@@ -6,4 +8,13 @@ import type { DocsTypes } from './types';
 export { DocsRenderer } from './DocsRenderer';
 export type { DocsTypes };
 
+declare module 'mdx/types' {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    type Element = React.JSX.Element;
+    type ElementClass = React.JSX.ElementClass;
+    type IntrinsicElements = React.JSX.IntrinsicElements;
+  }
+}
+
 export default () => definePreviewAddon<DocsTypes>(addonAnnotations);

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

@@ -57,6 +57,11 @@ export type Template = {
    * to run the other tasks. Set the ones to skip in this property.
    */
   skipTasks?: SkippableTask[];
+  /**
+   * Should the sandbox be type checked after build. Not part of skipTasks as the default answer
+   * will be 'no', at least initially
+   */
+  typeCheck?: boolean;
   /**
    * Set this only while developing a newly created framework, to avoid using it in CI. NOTE: Make
    * sure to always add a TODO comment to remove this flag in a subsequent PR.
@@ -278,14 +283,15 @@ export const baseTemplates = {
     },
     modifications: {
       useCsfFactory: true,
-      extraDependencies: ['prop-types'],
+      extraDependencies: ['prop-types', '@types/prop-types'],
       mainConfig: {
         features: {
           developmentModeForBuild: true,
         },
       },
     },
     skipTasks: ['bench'],
+    typeCheck: true,
   },
   'react-vite/prerelease-ts': {
     name: 'React Prerelease (Vite | TypeScript)',
@@ -702,6 +708,7 @@ const benchTemplates = {
       'chromatic',
       'vitest-integration',
     ],
+    typeCheck: false,
   },
   'bench/react-webpack-18-ts': {
     ...baseTemplates['react-webpack/18-ts'],
@@ -735,6 +742,7 @@ const benchTemplates = {
       'chromatic',
       'vitest-integration',
     ],
+    typeCheck: false,
   },
   'bench/react-vite-default-ts-test-build': {
     ...baseTemplates['react-vite/default-ts'],
@@ -751,6 +759,7 @@ const benchTemplates = {
       'e2e-tests-dev',
       'vitest-integration',
     ],
+    typeCheck: false,
   },
   'bench/react-webpack-18-ts-test-build': {
     ...baseTemplates['react-webpack/18-ts'],

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/8740-ts-multi-props/docgen.snapshot

@@ -11,6 +11,9 @@ export const Paragraph = ({
 }) => /*#__PURE__*/React.createElement("div", {
   className: size
 }, children);
+
+// 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'
 };

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/docgen.snapshot

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-const iconButton = function IconButton(props) {
+const iconButton = function IconButton() {
   return /*#__PURE__*/React.createElement("div", {
     className: "icon-button"
   }, "icon-button");
@@ -9,6 +9,9 @@ iconButton.propTypes = {
   // deepscan-disable-next-line
   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/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/docgen.snapshot

@@ -17,7 +17,7 @@ var StringEnum = /*#__PURE__*/function (StringEnum) {
   StringEnum["TopCenter"] = "top-center";
   return StringEnum;
 }(StringEnum || {});
-export const TypeScriptProps = props => /*#__PURE__*/React.createElement("div", null, "TypeScript!");
+export const TypeScriptProps = () => /*#__PURE__*/React.createElement("div", null, "TypeScript!");
 export const component = TypeScriptProps;
 TypeScriptProps.__docgenInfo = {
   "description": "",

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/docgen.snapshot

@@ -21,6 +21,8 @@ var StringEnum = /*#__PURE__*/function (StringEnum) {
   return StringEnum;
 }(StringEnum || {});
 export const TypeScriptProps = () => /*#__PURE__*/React.createElement("div", null, "TypeScript!");
+// 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',

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/get-template.ts

@@ -17,7 +17,7 @@ import { esMain } from './utils/esmain';
 
 const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY;
 
-type Template = Pick<TTemplate, 'inDevelopment' | 'skipTasks'>;
+type Template = Pick<TTemplate, 'inDevelopment' | 'skipTasks' | 'typeCheck'>;
 export type TemplateKey = keyof typeof allTemplates;
 export type Templates = Record<TemplateKey, Template>;
 
@@ -36,6 +36,14 @@ async function pathExists(path: string) {
   }
 }
 
+function isTaskSkipped(template: Template, script: string): boolean {
+  return (
+    template.inDevelopment !== true &&
+    !template.skipTasks?.includes(script as SkippableTask) &&
+    (script !== 'check-sandbox' || template.typeCheck)
+  );
+}
+
 export async function getTemplate(
   cadence: Cadence,
   scriptName: string,
@@ -62,10 +70,7 @@ export async function getTemplate(
 
   potentialTemplateKeys = potentialTemplateKeys.filter((t) => {
     const currentTemplate = allTemplates[t] as Template;
-    return (
-      currentTemplate.inDevelopment !== true &&
-      !currentTemplate.skipTasks?.includes(scriptName as SkippableTask)
-    );
+    return isTaskSkipped(currentTemplate, scriptName);
   });
 
   if (potentialTemplateKeys.length !== total) {
@@ -86,6 +91,7 @@ export async function getTemplate(
 const tasksMap = {
   sandbox: 'create-sandboxes',
   build: 'build-sandboxes',
+  'check-sandbox': 'check-sandboxes',
   chromatic: 'chromatic-sandboxes',
   'e2e-tests': 'e2e-production',
   'e2e-tests-dev': 'e2e-dev',
@@ -122,10 +128,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
       const templateKeysPerScript = potentialTemplateKeys.filter((t) => {
         const currentTemplate = allTemplates[t] as Template;
 
-        return (
-          currentTemplate.inDevelopment !== true &&
-          !currentTemplate.skipTasks?.includes(script as SkippableTask)
-        );
+        return isTaskSkipped(currentTemplate, script);
       });
       const workflowJobsRaw: (string | { [key: string]: any })[] = data.workflows[cad].jobs;
       const workflowJobs = workflowJobsRaw