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

Build: Add a TypeScript check task and configure ci to run it
2025-04-04 15:11:10 +08:00 · 2022-10-13 15:05:45 +03:00 · 2022-10-13 15:05:45 +03:00 · 9d9f9f026b
commit 9d9f9f026b
parent 93570f567a 2b8bd47535
29 changed files with 90 additions and 26 deletions
--- a/.circleci/config.yml
+++ b/.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
--- a/code/addons/a11y/src/components/A11YPanel.tsx
+++ b/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') && (
--- a/code/addons/a11y/src/components/VisionSimulator.test.tsx
+++ b/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)');
  });
 });
--- a/code/addons/a11y/src/manager.test.tsx
+++ b/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)');
--- a/code/addons/a11y/tsconfig.json
+++ b/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/**/*"]
 }
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ b/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: {
--- a/code/addons/interactions/src/mocks/index.ts
+++ b/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: () => {},
+    }));
--- a/code/frameworks/react-vite/src/plugins/react-docgen.ts
+++ b/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';
--- a/code/frameworks/svelte-vite/src/plugins/csf-plugin.ts
+++ b/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';
--- a/code/frameworks/vue-vite/tsconfig.json
+++ b/code/frameworks/vue-vite/tsconfig.json
@ -2,6 +2,7 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "strict": true,
+    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
--- a/code/frameworks/vue-webpack5/tsconfig.json
+++ b/code/frameworks/vue-webpack5/tsconfig.json
@ -2,6 +2,7 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "strict": true,
+    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
--- a/code/frameworks/vue3-vite/tsconfig.json
+++ b/code/frameworks/vue3-vite/tsconfig.json
@ -3,6 +3,7 @@
  "compilerOptions": {
    "rootDir": "./src",
    "types": ["node"],
+    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
--- a/code/lib/cli-sb/package.json
+++ b/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": {
--- a/code/lib/cli-storybook/package.json
+++ b/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": {
--- a/code/lib/cli/src/add.ts
+++ b/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}`)();
--- a/code/lib/ui/src/FakeProvider.tsx
+++ b/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 {};
  }
--- a/code/lib/ui/src/components/notifications/NotificationItem.tsx
+++ b/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) => {
--- a/code/lib/ui/src/components/sidebar/Brand.tsx
+++ b/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');
--- a/code/lib/ui/src/components/sidebar/Search.tsx
+++ b/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()} />
--- a/code/lib/ui/src/components/sidebar/SearchResults.tsx
+++ b/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 },
        });
--- a/code/lib/ui/src/components/sidebar/Tree.tsx
+++ b/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}
--- a/code/lib/ui/src/components/sidebar/TreeNode.tsx
+++ b/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;
--- a/code/lib/ui/src/components/sidebar/mockdata.large.ts
+++ b/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',
--- a/code/lib/ui/src/components/sidebar/mockdata.ts
+++ b/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: {
--- a/code/lib/ui/src/components/sidebar/useHighlighted.ts
+++ b/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 },
            });
--- a/code/renderers/react/tsconfig.json
+++ b/code/renderers/react/tsconfig.json
@ -2,6 +2,7 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "strict": true,
+    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
--- a/code/renderers/vue/tsconfig.json
+++ b/code/renderers/vue/tsconfig.json
@ -1,6 +1,7 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
+    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
--- a/scripts/task.ts
+++ b/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({
--- a/scripts/tasks/check.ts
+++ b/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,
+      }
+    );
+  },
+};