Merge pull request #19471 from storybookjs/tech/add-check-ci-step

Build: Add a TypeScript check task and configure ci to run it

.circleci/config.yml

@@ -75,6 +75,22 @@ commands:
             fi
 
 jobs:
+  check:
+    executor:
+      class: xlarge
+      name: sb_node_14_classic
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - restore_cache:
+          name: Restore Yarn cache
+          keys:
+            - build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
+      - run:
+          name: Compile
+          command: |
+            yarn task --task check --start-from=auto --no-link --debug
+            git diff --exit-code
   build:
     executor:
       class: xlarge
@@ -410,6 +426,9 @@ workflows:
       - lint:
           requires:
             - build
+      - check:
+          requires:
+            - build
       - examples:
           requires:
             - build

code/addons/a11y/src/components/A11YPanel.tsx

@@ -106,7 +106,7 @@ export const A11YPanel: React.FC = () => {
             'Rerun tests'
           ) : (
             <>
-              <Icon inline icon="check" /> Tests completed
+              <Icon icon="check" /> Tests completed
             </>
           ),
         onClick: handleManual,
@@ -162,8 +162,7 @@ export const A11YPanel: React.FC = () => {
       )}
       {status === 'running' && (
         <Centered>
-          <RotatingIcon inline icon="sync" /> Please wait while the accessibility scan is running
-          ...
+          <RotatingIcon icon="sync" /> Please wait while the accessibility scan is running ...
         </Centered>
       )}
       {(status === 'ready' || status === 'ran') && (

code/addons/a11y/src/components/VisionSimulator.test.tsx

@@ -4,11 +4,13 @@ import userEvent from '@testing-library/user-event';
 import { ThemeProvider, themes, convert } from '@storybook/theming';
 import { VisionSimulator, baseList } from './VisionSimulator';
 
-const getOptionByNameAndPercentage = (option: string, percentage: number) =>
+const getOptionByNameAndPercentage = (option: string, percentage?: number) =>
   screen.getByText(
     (content, element) =>
       content !== '' &&
+      // @ts-expect-error (TODO)
       element.textContent === option &&
+      // @ts-expect-error (TODO)
       (percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
   );
 
@@ -60,9 +62,11 @@ describe('Vision Simulator', () => {
       .filter(({ cssRules }) => cssRules)
       .map(({ cssRules }) => Object.values(cssRules))
       .flat()
+      // @ts-expect-error (TODO)
       .find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
 
     expect(rule).toBeDefined();
+    // @ts-expect-error (TODO)
     expect(rule.style.filter).toBe('blur(2px)');
   });
 });

code/addons/a11y/src/manager.test.tsx

@@ -35,7 +35,7 @@ describe('A11yManager', () => {
     registrationImpl(api as unknown as api.API);
     const title = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel').title as Function;
+      .find(({ type }) => type === 'panel')?.title as Function;
 
     // when / then
     expect(title()).toBe('Accessibility');
@@ -47,7 +47,7 @@ describe('A11yManager', () => {
     registrationImpl(mockedApi);
     const title = mockedAddons.add.mock.calls
       .map(([_, def]) => def)
-      .find(({ type }) => type === 'panel').title as Function;
+      .find(({ type }) => type === 'panel')?.title as Function;
 
     // when / then
     expect(title()).toBe('Accessibility (3)');

code/addons/a11y/tsconfig.json

@@ -1,15 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "types": ["jest", "@testing-library/jest-dom"],
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jest/no-standalone-expect */
 import React from 'react';
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 import { userEvent, within, waitFor } from '@storybook/testing-library';
@@ -25,7 +25,7 @@ const StyledWrapper = styled.div(({ theme }) => ({
 
 const interactions = getInteractions(CallStates.DONE);
 
-export default {
+const meta = {
   title: 'Addons/Interactions/InteractionsPanel',
   component: InteractionsPanel,
   decorators: [
@@ -52,9 +52,11 @@ export default {
     // prop for the AddonPanel used as wrapper of Panel
     active: true,
   },
-} as ComponentMeta<typeof InteractionsPanel>;
+} as Meta<typeof InteractionsPanel>;
 
-type Story = ComponentStoryObj<typeof InteractionsPanel>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export const Passing: Story = {
   args: {

code/addons/interactions/src/mocks/index.ts

@@ -139,4 +139,10 @@ export const getCalls = (finalStatus: CallStates) => {
 export const getInteractions = (finalStatus: CallStates) =>
   getCalls(finalStatus)
     .filter((call) => call.interceptable)
-    .map((call) => ({ ...call, childCallIds: [], isCollapsed: false, toggleCollapsed: () => {} }));
+    .map((call) => ({
+      ...call,
+      childCallIds: [],
+      isCollapsed: false,
+      isHidden: false,
+      toggleCollapsed: () => {},
+    }));

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -6,7 +6,7 @@ import {
   resolver as docgenResolver,
   importers as docgenImporters,
 } from 'react-docgen';
-import type { DocumentationObject } from 'react-docgen/lib/Documentation';
+import type { DocumentationObject } from 'react-docgen/dist/Documentation';
 import MagicString from 'magic-string';
 import type { PluginOption } from 'vite';
 import actualNameHandler from './docgen-handlers/actualNameHandler';

code/frameworks/svelte-vite/src/plugins/csf-plugin.ts

@@ -1,5 +1,7 @@
+// @ts-expect-error (TODO)
 import { getNameFromFilename } from '@storybook/addon-svelte-csf/dist/cjs/parser/svelte-stories-loader';
 import { readFileSync } from 'fs';
+// @ts-expect-error (TODO)
 import { extractStories } from '@storybook/addon-svelte-csf/dist/cjs/parser/extract-stories';
 import type { Options } from '@sveltejs/vite-plugin-svelte';
 import * as svelte from 'svelte/compiler';

code/frameworks/vue-vite/tsconfig.json

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

code/frameworks/vue-webpack5/tsconfig.json

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

code/frameworks/vue3-vite/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "rootDir": "./src",
     "types": ["node"],
+    "skipLibCheck": true,
     "resolveJsonModule": true
   },
   "include": ["src/**/*"],

code/lib/cli-sb/package.json

@@ -21,7 +21,6 @@
   "license": "MIT",
   "bin": "./index.js",
   "scripts": {
-    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {

code/lib/cli-storybook/package.json

@@ -24,7 +24,6 @@
     "storybook": "./index.js"
   },
   "scripts": {
-    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {

code/lib/cli/src/add.ts

@@ -23,6 +23,7 @@ const postinstallAddon = async (addonName: string, isOfficialAddon: boolean) =>
     LEGACY_CONFIGS.forEach((config) => {
       try {
         const codemod = require.resolve(
+          // @ts-expect-error (it is broken)
           `${getPackageName(addonName, isOfficialAddon)}/postinstall/${config}.js`
         );
         commandLog(`Running postinstall script for ${addonName}`)();

code/lib/ui/src/FakeProvider.tsx

@@ -33,7 +33,6 @@ export class FakeProvider extends Provider {
     addons.loadAddons(api);
   }
 
-  // @ts-expect-error (Converted from ts-ignore)
   getConfig() {
     return {};
   }

code/lib/ui/src/components/notifications/NotificationItem.tsx

@@ -105,6 +105,7 @@ const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
 const DismissNotificationItem: FC<{
   onDismiss: () => void;
 }> = ({ onDismiss }) => (
+  // @ts-expect-error (we need to improve the types of IconButton)
   <DismissButtonWrapper
     title="Dismiss notification"
     onClick={(e: SyntheticEvent) => {

code/lib/ui/src/components/sidebar/Brand.tsx

@@ -32,6 +32,7 @@ export const LogoLink = styled.a(({ theme }) => ({
   },
 }));
 
+// @ts-expect-error (TODO)
 export const Brand = withTheme(({ theme }) => {
   const { title = 'Storybook', url = './', image, target } = theme.brand;
   const targetValue = target || (url === './' ? '' : '_blank');

code/lib/ui/src/components/sidebar/Search.tsx

@@ -351,6 +351,7 @@ export const Search = React.memo<{
                 className="search-field"
               >
                 <SearchIcon icon="search" />
+                {/* @ts-expect-error (TODO) */}
                 <Input {...inputProps} />
                 {enableShortcuts && <FocusKey>/</FocusKey>}
                 <ClearIcon icon="cross" onClick={() => clearSelection()} />

code/lib/ui/src/components/sidebar/SearchResults.tsx

@@ -128,6 +128,7 @@ const Result: FC<
     if (api && props.isHighlighted && item.isComponent) {
       api.emit(
         PRELOAD_ENTRIES,
+        // @ts-expect-error (TODO)
         { ids: [item.isLeaf ? item.id : item.children[0]] },
         { options: { target: item.refId } }
       );
@@ -162,6 +163,7 @@ const Result: FC<
   } else if (item.type === 'story') {
     node = <StoryNode href={getLink(item, item.refId)} {...nodeProps} />;
   } else {
+    // @ts-expect-error (TODO)
     node = <DocumentNode href={getLink(item, item.refId)} {...nodeProps} />;
   }
 
@@ -212,6 +214,7 @@ export const SearchResults: FC<{
 
       if (item.isComponent) {
         api.emit(PRELOAD_ENTRIES, {
+          // @ts-expect-error (TODO)
           ids: [item.isLeaf ? item.id : item.children[0]],
           options: { target: refId },
         });

code/lib/ui/src/components/sidebar/Tree.tsx

@@ -419,6 +419,7 @@ export const Tree = React.memo<{
             const descendants = expandableDescendants[item.id];
             const isFullyExpanded = descendants.every((d: string) => expanded[d]);
             return (
+              // @ts-expect-error (TODO)
               <Root
                 key={id}
                 item={item}

code/lib/ui/src/components/sidebar/TreeNode.tsx

@@ -46,6 +46,7 @@ const TypeIcon = styled(Icons)<{ docsMode?: boolean }>(
     flex: '0 0 auto',
   },
 
+  // @ts-expect-error (TODO)
   ({ theme, icon, symbol = icon, docsMode }) => {
     const colors = theme.base === 'dark' ? iconColors.dark : iconColors.light;
     const colorKey = docsMode && symbol === 'document' ? 'docsModeDocument' : symbol;

code/lib/ui/src/components/sidebar/mockdata.large.ts

@@ -13,6 +13,7 @@
 
 import { Dataset } from './types';
 
+// @ts-expect-error (TODO)
 export const stories = {
   images: {
     name: 'Images',

code/lib/ui/src/components/sidebar/mockdata.ts

@@ -1,6 +1,6 @@
 import type { StoriesHash } from '@storybook/api';
 
-export type MockDataSet = Record<string, StoriesHash>;
+export type MockDataSet = Record<string, Record<string, Partial<StoriesHash[0]>>>;
 
 export const mockDataset: MockDataSet = {
   withRoot: {

code/lib/ui/src/components/sidebar/useHighlighted.ts

@@ -118,6 +118,7 @@ export const useHighlighted = ({
           const item = api.getData(itemId, refId === 'storybook_internal' ? undefined : refId);
           if (item.isComponent) {
             api.emit(PRELOAD_ENTRIES, {
+              // @ts-expect-error (TODO)
               ids: [item.isLeaf ? item.id : item.children[0]],
               options: { target: refId },
             });

code/renderers/react/tsconfig.json

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

code/renderers/vue/tsconfig.json

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

scripts/task.ts

@@ -10,6 +10,7 @@ import { dedent } from 'ts-dedent';
 import { createOptions, getCommand, getOptionsOrPrompt, OptionValues } from './utils/options';
 import { install } from './tasks/install';
 import { compile } from './tasks/compile';
+import { check } from './tasks/check';
 import { publish } from './tasks/publish';
 import { runRegistryTask } from './tasks/run-registry';
 import { sandbox } from './tasks/sandbox';
@@ -82,6 +83,7 @@ export const tasks = {
   // individual template/sandbox
   install,
   compile,
+  check,
   publish,
   'run-registry': runRegistryTask,
   // These tasks pertain to a single sandbox in the ../sandboxes dir
@@ -97,7 +99,7 @@ export const tasks = {
 type TaskKey = keyof typeof tasks;
 
 function isSandboxTask(taskKey: TaskKey) {
-  return !['install', 'compile', 'publish', 'run-registry'].includes(taskKey);
+  return !['install', 'compile', 'publish', 'run-registry', 'check'].includes(taskKey);
 }
 
 export const options = createOptions({

scripts/tasks/check.ts

@@ -0,0 +1,24 @@
+import { exec } from '../utils/exec';
+import type { Task } from '../task';
+
+const command = `nx run-many --target="check" --all --parallel --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer`;
+
+export const check: Task = {
+  description: 'Compile the source code of the monorepo',
+  dependsOn: ['compile'],
+  async ready() {
+    return false;
+  },
+  async run({ codeDir }, { dryRun, debug }) {
+    return exec(
+      command,
+      { cwd: codeDir },
+      {
+        startMessage: '🥾 Checking types validity',
+        errorMessage: '❌ Unsound types detected',
+        dryRun,
+        debug,
+      }
+    );
+  },
+};