diff --git a/.circleci/config.yml b/.circleci/config.yml index 224ed237e48f..944274ec823c 100644 --- 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 diff --git a/code/addons/a11y/src/components/A11YPanel.tsx b/code/addons/a11y/src/components/A11YPanel.tsx index cfc152365940..df523497809a 100644 --- 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' ) : ( <> - Tests completed + Tests completed ), onClick: handleManual, @@ -162,8 +162,7 @@ export const A11YPanel: React.FC = () => { )} {status === 'running' && ( - Please wait while the accessibility scan is running - ... + Please wait while the accessibility scan is running ... )} {(status === 'ready' || status === 'ran') && ( diff --git a/code/addons/a11y/src/components/VisionSimulator.test.tsx b/code/addons/a11y/src/components/VisionSimulator.test.tsx index 7413e1e32465..7c66fb762b64 100644 --- 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)'); }); }); diff --git a/code/addons/a11y/src/manager.test.tsx b/code/addons/a11y/src/manager.test.tsx index 92ef7866313d..ff6c90a44528 100644 --- 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)'); diff --git a/code/addons/a11y/tsconfig.json b/code/addons/a11y/tsconfig.json index 25de4fbd3e60..0535ece33606 100644 --- 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/**/*"] } diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index e71744d38be4..f55d28944c5a 100644 --- 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; +} as Meta; -type Story = ComponentStoryObj; +export default meta; + +type Story = StoryObj; export const Passing: Story = { args: { diff --git a/code/addons/interactions/src/mocks/index.ts b/code/addons/interactions/src/mocks/index.ts index 14066c7a0149..c0d0b9599647 100644 --- 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: () => {}, + })); diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts index 46a99b7d8881..0561456f8618 100644 --- 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'; diff --git a/code/frameworks/svelte-vite/src/plugins/csf-plugin.ts b/code/frameworks/svelte-vite/src/plugins/csf-plugin.ts index 294090fde02d..bc2e6df710e9 100644 --- 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'; diff --git a/code/frameworks/vue-vite/tsconfig.json b/code/frameworks/vue-vite/tsconfig.json index 88fbabf6e314..1f9bdf2596c3 100644 --- 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/**/*"], diff --git a/code/frameworks/vue-webpack5/tsconfig.json b/code/frameworks/vue-webpack5/tsconfig.json index 88fbabf6e314..1f9bdf2596c3 100644 --- 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/**/*"], diff --git a/code/frameworks/vue3-vite/tsconfig.json b/code/frameworks/vue3-vite/tsconfig.json index 534e4ddd108a..d710036f4bec 100644 --- 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/**/*"], diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index bb0a31bd9206..e165d4562e4a 100644 --- 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": { diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index bb234f326831..369056d2e507 100644 --- 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": { diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts index 369ce570efd8..8c8671fa6c79 100644 --- 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}`)(); diff --git a/code/lib/ui/src/FakeProvider.tsx b/code/lib/ui/src/FakeProvider.tsx index f16632ea6c08..a1abbbaca0d0 100644 --- 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 {}; } diff --git a/code/lib/ui/src/components/notifications/NotificationItem.tsx b/code/lib/ui/src/components/notifications/NotificationItem.tsx index 695c3638e50f..041c9fb63f96 100644 --- 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) { diff --git a/code/lib/ui/src/components/sidebar/Brand.tsx b/code/lib/ui/src/components/sidebar/Brand.tsx index 455a341d90e6..4b323a7dcdc6 100644 --- 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'); diff --git a/code/lib/ui/src/components/sidebar/Search.tsx b/code/lib/ui/src/components/sidebar/Search.tsx index 7f94b00eec42..9b17fd6f40b8 100644 --- 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" > + {/* @ts-expect-error (TODO) */} {enableShortcuts && /} clearSelection()} /> diff --git a/code/lib/ui/src/components/sidebar/SearchResults.tsx b/code/lib/ui/src/components/sidebar/SearchResults.tsx index f014a4180c0b..9905752b46b2 100644 --- 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 = ; } else { + // @ts-expect-error (TODO) node = ; } @@ -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 }, }); diff --git a/code/lib/ui/src/components/sidebar/Tree.tsx b/code/lib/ui/src/components/sidebar/Tree.tsx index dd68ff0db5ca..5b93359ec770 100644 --- 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) ( 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; diff --git a/code/lib/ui/src/components/sidebar/mockdata.large.ts b/code/lib/ui/src/components/sidebar/mockdata.large.ts index 66d6db219532..67c639bce865 100644 --- 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', diff --git a/code/lib/ui/src/components/sidebar/mockdata.ts b/code/lib/ui/src/components/sidebar/mockdata.ts index 0f62f1f9a9ae..e7772a457699 100644 --- 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; +export type MockDataSet = Record>>; export const mockDataset: MockDataSet = { withRoot: { diff --git a/code/lib/ui/src/components/sidebar/useHighlighted.ts b/code/lib/ui/src/components/sidebar/useHighlighted.ts index 5aa2d8e8ce4e..554f6ac291b8 100644 --- 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 }, }); diff --git a/code/renderers/react/tsconfig.json b/code/renderers/react/tsconfig.json index c459c2af4cd9..253b957ea68b 100644 --- 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/**/*"], diff --git a/code/renderers/vue/tsconfig.json b/code/renderers/vue/tsconfig.json index 3c0dd659cf5f..368141ad6910 100644 --- 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/**/*"], diff --git a/scripts/task.ts b/scripts/task.ts index 91303a89773f..67c9ae1c553b 100644 --- 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({ diff --git a/scripts/tasks/check.ts b/scripts/tasks/check.ts new file mode 100644 index 000000000000..7bbad848ac46 --- /dev/null +++ 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, + } + ); + }, +};