From a43f27e5b3d11c8037b1f0c1ecb0d56528fb6f15 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 27 Sep 2024 17:31:48 +0200 Subject: [PATCH 01/41] Testing Module UI --- .../manager/components/sidebar/Sidebar.tsx | 24 -- .../components/sidebar/SidebarBottom.tsx | 81 +++-- .../components/sidebar/TestingModule.tsx | 320 ++++++++++++++++++ 3 files changed, 364 insertions(+), 61 deletions(-) create mode 100644 code/core/src/manager/components/sidebar/TestingModule.tsx diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index f658f00e4bf8..d5c58565bb40 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -52,12 +52,10 @@ const Top = styled(Spaced)({ }); const Bottom = styled.div(({ theme }) => ({ - borderTop: `1px solid ${theme.appBorderColor}`, padding: theme.layoutMargin / 2, display: 'flex', flexWrap: 'wrap', gap: theme.layoutMargin / 2, - backgroundColor: theme.barBg, '&:empty': { display: 'none', @@ -140,15 +138,6 @@ export const Sidebar = React.memo(function Sidebar({ const dataset = useCombination(index, indexError, previewInitialized, status, refs); const isLoading = !index && !indexError; const lastViewedProps = useLastViewed(selected); - const api = useStorybookApi(); - const [watchMode, setWatchMode] = useState(false); - - useEffect(() => { - api.emit(TESTING_MODULE_WATCH_MODE_REQUEST, { - providerId: TEST_PROVIDER_ID, - watchMode, - } as TestingModuleWatchModeRequestPayload); - }, [api, watchMode]); return ( @@ -204,19 +193,6 @@ export const Sidebar = React.memo(function Sidebar({ {isLoading ? null : ( - - )} diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 290e44ac8f6a..6ae3b76a5551 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -1,11 +1,11 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { type SyntheticEvent, useCallback, useEffect } from 'react'; import { styled } from '@storybook/core/theming'; +import { ContrastIcon, PointerHandIcon } from '@storybook/icons'; import type { API_FilterFunction, API_StatusUpdate, API_StatusValue } from '@storybook/types'; import { TESTING_MODULE_RUN_PROGRESS_RESPONSE, - type TestingModuleRunProgressPayload, type TestingModuleRunResponsePayload, } from '@storybook/core/core-events'; import { @@ -14,9 +14,8 @@ import { useStorybookApi, useStorybookState, } from '@storybook/core/manager-api'; -import { useChannel } from '@storybook/core/preview-api'; -import { FilterToggle } from './FilterToggle'; +import { TestingModule } from './TestingModule'; const filterNone: API_FilterFunction = () => true; const filterWarn: API_FilterFunction = ({ status = {} }) => @@ -26,24 +25,25 @@ const filterError: API_FilterFunction = ({ status = {} }) => const filterBoth: API_FilterFunction = ({ status = {} }) => Object.values(status).some((value) => value?.status === 'warn' || value?.status === 'error'); -const getFilter = (showWarnings = false, showErrors = false) => { - if (showWarnings && showErrors) { +const getFilter = (warningsActive = false, errorsActive = false) => { + if (warningsActive && errorsActive) { return filterBoth; } - if (showWarnings) { + if (warningsActive) { return filterWarn; } - if (showErrors) { + if (errorsActive) { return filterError; } return filterNone; }; const Wrapper = styled.div({ + width: '100%', display: 'flex', - gap: 5, + gap: 6, }); interface SidebarBottomProps { @@ -76,8 +76,8 @@ function processTestReport(payload: TestingModuleRunResponsePayload) { } export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { - const [showWarnings, setShowWarnings] = React.useState(false); - const [showErrors, setShowErrors] = React.useState(false); + const [warningsActive, setWarningsActive] = React.useState(false); + const [errorsActive, setErrorsActive] = React.useState(false); const warnings = Object.values(status).filter((statusByAddonId) => Object.values(statusByAddonId).some((value) => value?.status === 'warn') @@ -88,40 +88,47 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { const hasWarnings = warnings.length > 0; const hasErrors = errors.length > 0; - const toggleWarnings = useCallback(() => setShowWarnings((shown) => !shown), []); - const toggleErrors = useCallback(() => setShowErrors((shown) => !shown), []); + const toggleWarnings = useCallback((e: SyntheticEvent) => { + e.stopPropagation(); + setWarningsActive((active) => !active); + }, []); + const toggleErrors = useCallback((e: SyntheticEvent) => { + e.stopPropagation(); + setErrorsActive((active) => !active); + }, []); useEffect(() => { - const filter = getFilter(hasWarnings && showWarnings, hasErrors && showErrors); + const filter = getFilter(hasWarnings && warningsActive, hasErrors && errorsActive); api.experimental_setFilter('sidebar-bottom-filter', filter); - }, [api, hasWarnings, hasErrors, showWarnings, showErrors]); - - if (!hasWarnings && !hasErrors) { + }, [api, hasWarnings, hasErrors, warningsActive, errorsActive]); + + const testProviders = [ + { + providerId: 'component-tests', + title: 'Component tests', + description: 'Ran 2 seconds ago', + icon: , + watchable: true, + }, + { + providerId: 'visual-tests', + title: 'Visual tests', + description: 'Not run', + icon: , + }, + ]; + + if (!hasWarnings && !hasErrors && !testProviders.length) { return null; } return ( - {hasErrors && ( - - )} - {hasWarnings && ( - - )} + ); }; diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx new file mode 100644 index 000000000000..60eb0b448ff6 --- /dev/null +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -0,0 +1,320 @@ +import React, { type SyntheticEvent, useEffect, useRef, useState } from 'react'; + +import { Button } from '@storybook/core/components'; +import { styled } from '@storybook/core/theming'; + +import { + TESTING_MODULE_RUN_ALL_REQUEST, + TESTING_MODULE_WATCH_MODE_REQUEST, +} from '@storybook/core/core-events'; +import { type API } from '@storybook/core/manager-api'; + +const Position = styled.div({ + bottom: 0, + zIndex: 20, + paddingLeft: 12, + paddingRight: 12, + paddingTop: 12, + paddingBottom: 12, + width: '100%', +}); + +const Glow = styled.div(({ theme }) => ({ + color: theme.color.defaultText, + fontSize: theme.typography.size.s2, + lineHeight: '20px', + width: '100%', + overflow: 'hidden', + borderRadius: theme.appBorderRadius, + backgroundColor: 'rgb(226 232 240)', + padding: '1px', + boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', + transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '0.15s', +})); + +const Card = styled.div(({ theme }) => ({ + zIndex: 10, + borderRadius: theme.appBorderRadius, + backgroundColor: '#fff', + + '&:hover #testing-module-collapse-toggle': { + opacity: 1, + }, +})); + +const Collapsible = styled.div({ + overflow: 'hidden', + transition: 'max-height 250ms', + willChange: 'auto', + boxShadow: 'inset 0 -1px 0 #e5e7eb', +}); + +const Content = styled.div({ + padding: '12px 6px', + display: 'flex', + flexDirection: 'column', + gap: '12px', +}); + +const Bar = styled.div({ + display: 'flex', + width: '100%', + cursor: 'pointer', + userSelect: 'none', + alignItems: 'center', + justifyContent: 'space-between', + overflow: 'hidden', + padding: '6px', +}); + +const CollapseToggle = styled(Button)({ + opacity: 0, + transition: 'opacity 250ms', + willChange: 'auto', +}); + +const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>(({ status, theme }) => ({ + background: { negative: theme.background.negative, warning: theme.background.warning }[status], + color: { negative: theme.color.negativeText, warning: theme.color.warningText }[status], + minWidth: 28, +})); + +const TestProvider = styled.div({ + display: 'flex', + justifyContent: 'space-between', + gap: 6, +}); + +const Info = styled.div({ + display: 'flex', + gap: 6, +}); + +const Actions = styled.div({ + display: 'flex', + gap: 6, +}); + +const Details = styled.div({ + display: 'flex', + flexDirection: 'column', +}); + +const Title = styled.div({ + textWrap: 'nowrap', +}); + +const Description = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s1, + color: theme.barTextColor, +})); + +const Icon = styled.div(({ theme }) => ({ + color: theme.barTextColor, + padding: '2px 6px', +})); + +interface TestingModuleProps { + api: API; + testProviders: { + providerId: string; + icon: React.ReactNode; + title: string; + description: string; + watchable?: boolean; + }[]; + errorCount: number; + warningCount: number; + errorsActive: boolean; + warningsActive: boolean; + toggleErrors: (e: SyntheticEvent) => void; + toggleWarnings: (e: SyntheticEvent) => void; +} + +export const TestingModule = ({ + api, + testProviders, + errorCount, + warningCount, + errorsActive, + warningsActive, + toggleErrors, + toggleWarnings, +}: TestingModuleProps) => { + const contentRef = useRef(null); + const [collapsed, setCollapsed] = useState(false); + const [maxHeight, setMaxHeight] = useState(500); + const [watchMode, setWatchMode] = useState(false); + + useEffect(() => { + setMaxHeight(contentRef.current?.offsetHeight || 500); + }, []); + + const runAllTests = (e: SyntheticEvent) => { + e.stopPropagation(); + }; + + const toggleCollapsed = () => { + setMaxHeight(contentRef.current?.offsetHeight || 500); + setCollapsed(!collapsed); + }; + + return ( + + + + + + {testProviders.map(({ providerId, icon, title, description, watchable }) => ( + + + {icon} +
+ {title} + {description} +
+ + + {watchable && ( + + )} + + + + ))} + + + + + +
+ + + + + + + {errorCount > 0 && ( + + {errorCount < 100 ? errorCount : '99+'} + + )} + {warningCount > 0 && ( + + {warningCount < 100 ? warningCount : '99+'} + + )} +
+ + + + + ); +}; From 8af11224e4d0b67be6d4e0d09bfa217dc4bdec19 Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Thu, 12 Sep 2024 20:10:23 +0200 Subject: [PATCH 02/41] Add Knip with initial custom config --- code/knip.ts | 93 +++++++++++++++++++++++++++ code/package.json | 1 + code/yarn.lock | 159 +++++++++++++++++++++++++++++++++++++++++++--- package.json | 1 + 4 files changed, 246 insertions(+), 8 deletions(-) create mode 100644 code/knip.ts diff --git a/code/knip.ts b/code/knip.ts new file mode 100644 index 000000000000..ee1a6bb99281 --- /dev/null +++ b/code/knip.ts @@ -0,0 +1,93 @@ +import { join, relative } from 'node:path'; + +import fg from 'fast-glob'; +import type { KnipConfig } from 'knip'; +import { isMatch } from 'picomatch'; + +// Files we want to exclude from analysis should be negated project patterns, not `ignores` +// docs: https://knip.dev/guides/configuring-project-files +const project = [ + 'src/**/*.{js,jsx,ts,tsx}', + '!**/__search-files-tests__/**', + '!**/__testfixtures__/**', + '!**/__mocks-ng-workspace__/**', + '!**/__mockdata__/**', +]; + +// Adding an explicit MDX "compiler", as the dependency knip looks for isn't listed (@mdx-js/mdx or astro) +// Alternatively, we could ignore a few false positives +// docs: https://knip.dev/features/compilers +const importMatcher = /import[^'"]+['"]([^'"]+)['"]/g; +const fencedCodeBlockMatcher = /```[\s\S]*?```/g; +const mdx = (text: string) => + [...text.replace(fencedCodeBlockMatcher, '').matchAll(importMatcher)].join('\n'); + +const baseConfig = { + ignoreWorkspaces: ['renderers/svelte'], // ignored: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in code/node_modules/@sveltejs/vite-plugin-svelte/package.json + + // storybook itself configured (only) in root + storybook: { entry: ['**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))'] }, + + workspaces: { + '.': { + project, + }, + 'addons/*': { + project, + }, + 'builders/*': { + project, + }, + core: { + entry: ['src/index.ts', 'src/cli/bin/index.ts', 'src/*/{globals*,index,runtime}.ts'], + project, + }, + 'frameworks/*': { + entry: [ + // these extra entries we only need for frameworks/angular and frameworks/ember it seems + 'src/index.ts', + 'src/builders/{build,start}-storybook/index.ts', + 'src/**/docs/{index,config}.{js,ts}', + ], + project, + }, + 'lib/*': { + project, + }, + 'presets/*': { + project, + }, + 'renderers/*': { + project, + }, + }, + compilers: { + mdx, + }, +} satisfies KnipConfig; + +// Adds package.json#bundler.entries etc. to each workspace config `entry: []` +export const addBundlerEntries = async (config: KnipConfig) => { + const baseDir = process.cwd(); + const rootManifest = await import(join(baseDir, 'package.json')); + const workspaceDirs = await fg(rootManifest.workspaces.packages, { onlyDirectories: true }); + const workspaceDirectories = workspaceDirs.map((dir) => relative(baseDir, join(baseDir, dir))); + for (const wsDir of workspaceDirectories) { + for (const configKey of Object.keys(baseConfig.workspaces)) { + if (isMatch(wsDir, configKey)) { + const manifest = await import(join(baseDir, wsDir, 'package.json')); + const configEntries = config.workspaces[configKey].entry ?? []; + const bundler = manifest?.bundler; + for (const value of Object.values(bundler ?? {})) { + if (Array.isArray(value)) { + configEntries.push(...value); + } + } + config.workspaces[configKey].entry = Array.from(new Set(configEntries)); + } + } + } + return config; +}; + +export default addBundlerEntries(baseConfig); diff --git a/code/package.json b/code/package.json index 9cd083a02469..25c78cdbe6dc 100644 --- a/code/package.json +++ b/code/package.json @@ -198,6 +198,7 @@ "happy-dom": "^14.12.0", "http-server": "^14.1.1", "husky": "^4.3.7", + "knip": "^5.30.1", "lint-staged": "^13.2.2", "mock-require": "^3.0.3", "nx": "18.0.6", diff --git a/code/yarn.lock b/code/yarn.lock index d9ee78540efc..532b438a8c65 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4001,7 +4001,7 @@ __metadata: languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": +"@nodelib/fs.walk@npm:1.2.8, @nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": version: 1.2.8 resolution: "@nodelib/fs.walk@npm:1.2.8" dependencies: @@ -5329,6 +5329,19 @@ __metadata: languageName: node linkType: hard +"@snyk/github-codeowners@npm:1.1.0": + version: 1.1.0 + resolution: "@snyk/github-codeowners@npm:1.1.0" + dependencies: + commander: "npm:^4.1.1" + ignore: "npm:^5.1.8" + p-map: "npm:^4.0.0" + bin: + github-codeowners: dist/cli.js + checksum: 10c0/92d860a904a1e67f8563d4ac4d540cc613f71193f7968933b4a4b1526e80a97f536f52d27762c158e3e39d48c2f3db4906ec78846309351c741abb1a28653af9 + languageName: node + linkType: hard + "@storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y": version: 0.0.0-use.local resolution: "@storybook/addon-a11y@workspace:addons/a11y" @@ -6903,6 +6916,7 @@ __metadata: happy-dom: "npm:^14.12.0" http-server: "npm:^14.1.1" husky: "npm:^4.3.7" + knip: "npm:^5.30.1" lint-staged: "npm:^13.2.2" mock-require: "npm:^3.0.3" nx: "npm:18.0.6" @@ -12135,6 +12149,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^4.1.1": + version: 4.1.1 + resolution: "commander@npm:4.1.1" + checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab + languageName: node + linkType: hard + "commander@npm:^5.1.0": version: 5.1.0 resolution: "commander@npm:5.1.0" @@ -13570,6 +13591,19 @@ __metadata: languageName: node linkType: hard +"easy-table@npm:1.2.0": + version: 1.2.0 + resolution: "easy-table@npm:1.2.0" + dependencies: + ansi-regex: "npm:^5.0.1" + wcwidth: "npm:^1.0.1" + dependenciesMeta: + wcwidth: + optional: true + checksum: 10c0/2d37937cd608586ba02e1ec479f90ccec581d366b3b0d1bb26b99ee6005f8d724e32a07a873759893461ca45b99e2d08c30326529d967ce9eedc1e9b68d4aa63 + languageName: node + linkType: hard + "ecdsa-sig-formatter@npm:1.0.11, ecdsa-sig-formatter@npm:^1.0.11": version: 1.0.11 resolution: "ecdsa-sig-formatter@npm:1.0.11" @@ -13870,6 +13904,16 @@ __metadata: languageName: node linkType: hard +"enhanced-resolve@npm:^5.17.1": + version: 5.17.1 + resolution: "enhanced-resolve@npm:5.17.1" + dependencies: + graceful-fs: "npm:^4.2.4" + tapable: "npm:^2.2.0" + checksum: 10c0/81a0515675eca17efdba2cf5bad87abc91a528fc1191aad50e275e74f045b41506167d420099022da7181c8d787170ea41e4a11a0b10b7a16f6237daecb15370 + languageName: node + linkType: hard + "enquirer@npm:^2.3.5": version: 2.4.1 resolution: "enquirer@npm:2.4.1" @@ -17348,6 +17392,13 @@ __metadata: languageName: node linkType: hard +"ignore@npm:^5.1.8": + version: 5.3.2 + resolution: "ignore@npm:5.3.2" + checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 + languageName: node + linkType: hard + "image-size@npm:^1.0.0, image-size@npm:^1.1.1": version: 1.1.1 resolution: "image-size@npm:1.1.1" @@ -18416,6 +18467,15 @@ __metadata: languageName: node linkType: hard +"jiti@npm:^1.21.6": + version: 1.21.6 + resolution: "jiti@npm:1.21.6" + bin: + jiti: bin/jiti.js + checksum: 10c0/05b9ed58cd30d0c3ccd3c98209339e74f50abd9a17e716f65db46b6a35812103f6bde6e134be7124d01745586bca8cc5dae1d0d952267c3ebe55171949c32e56 + languageName: node + linkType: hard + "jju@npm:^1.4.0": version: 1.4.0 resolution: "jju@npm:1.4.0" @@ -18898,6 +18958,36 @@ __metadata: languageName: node linkType: hard +"knip@npm:^5.30.1": + version: 5.30.1 + resolution: "knip@npm:5.30.1" + dependencies: + "@nodelib/fs.walk": "npm:1.2.8" + "@snyk/github-codeowners": "npm:1.1.0" + easy-table: "npm:1.2.0" + enhanced-resolve: "npm:^5.17.1" + fast-glob: "npm:^3.3.2" + jiti: "npm:^1.21.6" + js-yaml: "npm:^4.1.0" + minimist: "npm:^1.2.8" + picocolors: "npm:^1.0.0" + picomatch: "npm:^4.0.1" + pretty-ms: "npm:^9.0.0" + smol-toml: "npm:^1.1.4" + strip-json-comments: "npm:5.0.1" + summary: "npm:2.1.0" + zod: "npm:^3.22.4" + zod-validation-error: "npm:^3.0.3" + peerDependencies: + "@types/node": ">=18" + typescript: ">=5.0.4" + bin: + knip: bin/knip.js + knip-bun: bin/knip-bun.js + checksum: 10c0/1c470266d7967dad0f2fb1b1f6c8a797bc7bea6c1f0021c52dce40e067ae87217eb17ff11a4164e3a5244bf3d0672f9e8678e4c3898260c48b9c020132ebb29a + languageName: node + linkType: hard + "language-subtag-registry@npm:^0.3.20": version: 0.3.22 resolution: "language-subtag-registry@npm:0.3.22" @@ -22455,6 +22545,13 @@ __metadata: languageName: node linkType: hard +"parse-ms@npm:^4.0.0": + version: 4.0.0 + resolution: "parse-ms@npm:4.0.0" + checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16 + languageName: node + linkType: hard + "parse-node-version@npm:^1.0.1": version: 1.0.1 resolution: "parse-node-version@npm:1.0.1" @@ -22744,6 +22841,13 @@ __metadata: languageName: node linkType: hard +"picomatch@npm:^4.0.1": + version: 4.0.2 + resolution: "picomatch@npm:4.0.2" + checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc + languageName: node + linkType: hard + "pidtree@npm:0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" @@ -23269,6 +23373,15 @@ __metadata: languageName: node linkType: hard +"pretty-ms@npm:^9.0.0": + version: 9.1.0 + resolution: "pretty-ms@npm:9.1.0" + dependencies: + parse-ms: "npm:^4.0.0" + checksum: 10c0/fd111aad8800a04dfd654e6016da69bdaa6fc6a4c280f8e727cffd8b5960558e94942f1a94d4aa6e4d179561a0fbb0366a9ebe0ccefbbb0f8ff853b129cdefb9 + languageName: node + linkType: hard + "prettyjson@npm:^1.2.1": version: 1.2.5 resolution: "prettyjson@npm:1.2.5" @@ -25901,6 +26014,13 @@ __metadata: languageName: node linkType: hard +"smol-toml@npm:^1.1.4": + version: 1.3.0 + resolution: "smol-toml@npm:1.3.0" + checksum: 10c0/442b4d033236ff6dd05bf91d57695fd9070a8221af080a5b2782cb2d9fad8bc31f698c61de5308a351907c1200202ba3ee51d52c5704f5349149e7c374f5fe90 + languageName: node + linkType: hard + "snapdragon-node@npm:^2.0.1": version: 2.1.1 resolution: "snapdragon-node@npm:2.1.1" @@ -26578,6 +26698,13 @@ __metadata: languageName: node linkType: hard +"strip-json-comments@npm:5.0.1, strip-json-comments@npm:^5.0.1": + version: 5.0.1 + resolution: "strip-json-comments@npm:5.0.1" + checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982 + languageName: node + linkType: hard + "strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1": version: 3.1.1 resolution: "strip-json-comments@npm:3.1.1" @@ -26585,13 +26712,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:^5.0.1": - version: 5.0.1 - resolution: "strip-json-comments@npm:5.0.1" - checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982 - languageName: node - linkType: hard - "strong-log-transformer@npm:^2.1.0": version: 2.1.0 resolution: "strong-log-transformer@npm:2.1.0" @@ -26678,6 +26798,13 @@ __metadata: languageName: node linkType: hard +"summary@npm:2.1.0": + version: 2.1.0 + resolution: "summary@npm:2.1.0" + checksum: 10c0/2743c1f940fb303c496ef1b085e654704a6c16872957b6b76648c34bd32c8f0b7a3c5ec4e0f8bfb71dcb8473e34d172fef31026b85562af589cf220aa901698d + languageName: node + linkType: hard + "supports-color@npm:^5.0.0, supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" @@ -29771,6 +29898,22 @@ __metadata: languageName: node linkType: hard +"zod-validation-error@npm:^3.0.3": + version: 3.3.1 + resolution: "zod-validation-error@npm:3.3.1" + peerDependencies: + zod: ^3.18.0 + checksum: 10c0/53869a8478f42cd38f51e159431fe7af9e0b456e8078c6d9d906adb212753788defa9c8bd7374e9ecd4a688b6736fcfa091aebac65054328b8cfdecce9395d8e + languageName: node + linkType: hard + +"zod@npm:^3.22.4": + version: 3.23.8 + resolution: "zod@npm:3.23.8" + checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69 + languageName: node + linkType: hard + "zone.js@npm:^0.14.2": version: 0.14.2 resolution: "zone.js@npm:0.14.2" diff --git a/package.json b/package.json index d0eb7795735e..2104e1eb7f49 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "get-template": "cd scripts; yarn get-template", "i": "yarn --cwd scripts && yarn --cwd code", "lint": "cd code; yarn lint", + "knip": "cd code; yarn knip", "nx": "cd code; yarn nx", "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write", "start": "yarn task --task dev --template react-vite/default-ts --start-from=install", From b05237ca9c2a882d11b24992a988cdcf3ae7390d Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Thu, 12 Sep 2024 20:53:12 +0200 Subject: [PATCH 03/41] Move script/config --- code/package.json | 2 +- code/yarn.lock | 159 ++----------------------- package.json | 2 +- code/knip.ts => scripts/knip.config.ts | 4 +- scripts/package.json | 1 + scripts/yarn.lock | 142 +++++++++++++++++++++- 6 files changed, 151 insertions(+), 159 deletions(-) rename code/knip.ts => scripts/knip.config.ts (97%) diff --git a/code/package.json b/code/package.json index 25c78cdbe6dc..bc3f6e8772ca 100644 --- a/code/package.json +++ b/code/package.json @@ -36,6 +36,7 @@ "generate-sandboxes": "yarn --cwd ../scripts generate-sandboxes", "github-release": "github-release-from-changelog", "i": "yarn --cwd .. i", + "knip": "VITE_CJS_IGNORE_WARNING=1 ../scripts/node_modules/.bin/knip --config ../scripts/knip.config.ts", "lint": "yarn lint:js && yarn lint:md", "lint:ejs": "ejslint **/*.ejs", "lint:js": "yarn lint:js:cmd . --quiet", @@ -198,7 +199,6 @@ "happy-dom": "^14.12.0", "http-server": "^14.1.1", "husky": "^4.3.7", - "knip": "^5.30.1", "lint-staged": "^13.2.2", "mock-require": "^3.0.3", "nx": "18.0.6", diff --git a/code/yarn.lock b/code/yarn.lock index 532b438a8c65..d9ee78540efc 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4001,7 +4001,7 @@ __metadata: languageName: node linkType: hard -"@nodelib/fs.walk@npm:1.2.8, @nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": +"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": version: 1.2.8 resolution: "@nodelib/fs.walk@npm:1.2.8" dependencies: @@ -5329,19 +5329,6 @@ __metadata: languageName: node linkType: hard -"@snyk/github-codeowners@npm:1.1.0": - version: 1.1.0 - resolution: "@snyk/github-codeowners@npm:1.1.0" - dependencies: - commander: "npm:^4.1.1" - ignore: "npm:^5.1.8" - p-map: "npm:^4.0.0" - bin: - github-codeowners: dist/cli.js - checksum: 10c0/92d860a904a1e67f8563d4ac4d540cc613f71193f7968933b4a4b1526e80a97f536f52d27762c158e3e39d48c2f3db4906ec78846309351c741abb1a28653af9 - languageName: node - linkType: hard - "@storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y": version: 0.0.0-use.local resolution: "@storybook/addon-a11y@workspace:addons/a11y" @@ -6916,7 +6903,6 @@ __metadata: happy-dom: "npm:^14.12.0" http-server: "npm:^14.1.1" husky: "npm:^4.3.7" - knip: "npm:^5.30.1" lint-staged: "npm:^13.2.2" mock-require: "npm:^3.0.3" nx: "npm:18.0.6" @@ -12149,13 +12135,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:^4.1.1": - version: 4.1.1 - resolution: "commander@npm:4.1.1" - checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab - languageName: node - linkType: hard - "commander@npm:^5.1.0": version: 5.1.0 resolution: "commander@npm:5.1.0" @@ -13591,19 +13570,6 @@ __metadata: languageName: node linkType: hard -"easy-table@npm:1.2.0": - version: 1.2.0 - resolution: "easy-table@npm:1.2.0" - dependencies: - ansi-regex: "npm:^5.0.1" - wcwidth: "npm:^1.0.1" - dependenciesMeta: - wcwidth: - optional: true - checksum: 10c0/2d37937cd608586ba02e1ec479f90ccec581d366b3b0d1bb26b99ee6005f8d724e32a07a873759893461ca45b99e2d08c30326529d967ce9eedc1e9b68d4aa63 - languageName: node - linkType: hard - "ecdsa-sig-formatter@npm:1.0.11, ecdsa-sig-formatter@npm:^1.0.11": version: 1.0.11 resolution: "ecdsa-sig-formatter@npm:1.0.11" @@ -13904,16 +13870,6 @@ __metadata: languageName: node linkType: hard -"enhanced-resolve@npm:^5.17.1": - version: 5.17.1 - resolution: "enhanced-resolve@npm:5.17.1" - dependencies: - graceful-fs: "npm:^4.2.4" - tapable: "npm:^2.2.0" - checksum: 10c0/81a0515675eca17efdba2cf5bad87abc91a528fc1191aad50e275e74f045b41506167d420099022da7181c8d787170ea41e4a11a0b10b7a16f6237daecb15370 - languageName: node - linkType: hard - "enquirer@npm:^2.3.5": version: 2.4.1 resolution: "enquirer@npm:2.4.1" @@ -17392,13 +17348,6 @@ __metadata: languageName: node linkType: hard -"ignore@npm:^5.1.8": - version: 5.3.2 - resolution: "ignore@npm:5.3.2" - checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 - languageName: node - linkType: hard - "image-size@npm:^1.0.0, image-size@npm:^1.1.1": version: 1.1.1 resolution: "image-size@npm:1.1.1" @@ -18467,15 +18416,6 @@ __metadata: languageName: node linkType: hard -"jiti@npm:^1.21.6": - version: 1.21.6 - resolution: "jiti@npm:1.21.6" - bin: - jiti: bin/jiti.js - checksum: 10c0/05b9ed58cd30d0c3ccd3c98209339e74f50abd9a17e716f65db46b6a35812103f6bde6e134be7124d01745586bca8cc5dae1d0d952267c3ebe55171949c32e56 - languageName: node - linkType: hard - "jju@npm:^1.4.0": version: 1.4.0 resolution: "jju@npm:1.4.0" @@ -18958,36 +18898,6 @@ __metadata: languageName: node linkType: hard -"knip@npm:^5.30.1": - version: 5.30.1 - resolution: "knip@npm:5.30.1" - dependencies: - "@nodelib/fs.walk": "npm:1.2.8" - "@snyk/github-codeowners": "npm:1.1.0" - easy-table: "npm:1.2.0" - enhanced-resolve: "npm:^5.17.1" - fast-glob: "npm:^3.3.2" - jiti: "npm:^1.21.6" - js-yaml: "npm:^4.1.0" - minimist: "npm:^1.2.8" - picocolors: "npm:^1.0.0" - picomatch: "npm:^4.0.1" - pretty-ms: "npm:^9.0.0" - smol-toml: "npm:^1.1.4" - strip-json-comments: "npm:5.0.1" - summary: "npm:2.1.0" - zod: "npm:^3.22.4" - zod-validation-error: "npm:^3.0.3" - peerDependencies: - "@types/node": ">=18" - typescript: ">=5.0.4" - bin: - knip: bin/knip.js - knip-bun: bin/knip-bun.js - checksum: 10c0/1c470266d7967dad0f2fb1b1f6c8a797bc7bea6c1f0021c52dce40e067ae87217eb17ff11a4164e3a5244bf3d0672f9e8678e4c3898260c48b9c020132ebb29a - languageName: node - linkType: hard - "language-subtag-registry@npm:^0.3.20": version: 0.3.22 resolution: "language-subtag-registry@npm:0.3.22" @@ -22545,13 +22455,6 @@ __metadata: languageName: node linkType: hard -"parse-ms@npm:^4.0.0": - version: 4.0.0 - resolution: "parse-ms@npm:4.0.0" - checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16 - languageName: node - linkType: hard - "parse-node-version@npm:^1.0.1": version: 1.0.1 resolution: "parse-node-version@npm:1.0.1" @@ -22841,13 +22744,6 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^4.0.1": - version: 4.0.2 - resolution: "picomatch@npm:4.0.2" - checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc - languageName: node - linkType: hard - "pidtree@npm:0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" @@ -23373,15 +23269,6 @@ __metadata: languageName: node linkType: hard -"pretty-ms@npm:^9.0.0": - version: 9.1.0 - resolution: "pretty-ms@npm:9.1.0" - dependencies: - parse-ms: "npm:^4.0.0" - checksum: 10c0/fd111aad8800a04dfd654e6016da69bdaa6fc6a4c280f8e727cffd8b5960558e94942f1a94d4aa6e4d179561a0fbb0366a9ebe0ccefbbb0f8ff853b129cdefb9 - languageName: node - linkType: hard - "prettyjson@npm:^1.2.1": version: 1.2.5 resolution: "prettyjson@npm:1.2.5" @@ -26014,13 +25901,6 @@ __metadata: languageName: node linkType: hard -"smol-toml@npm:^1.1.4": - version: 1.3.0 - resolution: "smol-toml@npm:1.3.0" - checksum: 10c0/442b4d033236ff6dd05bf91d57695fd9070a8221af080a5b2782cb2d9fad8bc31f698c61de5308a351907c1200202ba3ee51d52c5704f5349149e7c374f5fe90 - languageName: node - linkType: hard - "snapdragon-node@npm:^2.0.1": version: 2.1.1 resolution: "snapdragon-node@npm:2.1.1" @@ -26698,13 +26578,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:5.0.1, strip-json-comments@npm:^5.0.1": - version: 5.0.1 - resolution: "strip-json-comments@npm:5.0.1" - checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982 - languageName: node - linkType: hard - "strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1": version: 3.1.1 resolution: "strip-json-comments@npm:3.1.1" @@ -26712,6 +26585,13 @@ __metadata: languageName: node linkType: hard +"strip-json-comments@npm:^5.0.1": + version: 5.0.1 + resolution: "strip-json-comments@npm:5.0.1" + checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982 + languageName: node + linkType: hard + "strong-log-transformer@npm:^2.1.0": version: 2.1.0 resolution: "strong-log-transformer@npm:2.1.0" @@ -26798,13 +26678,6 @@ __metadata: languageName: node linkType: hard -"summary@npm:2.1.0": - version: 2.1.0 - resolution: "summary@npm:2.1.0" - checksum: 10c0/2743c1f940fb303c496ef1b085e654704a6c16872957b6b76648c34bd32c8f0b7a3c5ec4e0f8bfb71dcb8473e34d172fef31026b85562af589cf220aa901698d - languageName: node - linkType: hard - "supports-color@npm:^5.0.0, supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" @@ -29898,22 +29771,6 @@ __metadata: languageName: node linkType: hard -"zod-validation-error@npm:^3.0.3": - version: 3.3.1 - resolution: "zod-validation-error@npm:3.3.1" - peerDependencies: - zod: ^3.18.0 - checksum: 10c0/53869a8478f42cd38f51e159431fe7af9e0b456e8078c6d9d906adb212753788defa9c8bd7374e9ecd4a688b6736fcfa091aebac65054328b8cfdecce9395d8e - languageName: node - linkType: hard - -"zod@npm:^3.22.4": - version: 3.23.8 - resolution: "zod@npm:3.23.8" - checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69 - languageName: node - linkType: hard - "zone.js@npm:^0.14.2": version: 0.14.2 resolution: "zone.js@npm:0.14.2" diff --git a/package.json b/package.json index 2104e1eb7f49..64a3e118ab67 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "get-report-message": "cd scripts; yarn get-report-message", "get-template": "cd scripts; yarn get-template", "i": "yarn --cwd scripts && yarn --cwd code", - "lint": "cd code; yarn lint", "knip": "cd code; yarn knip", + "lint": "cd code; yarn lint", "nx": "cd code; yarn nx", "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write", "start": "yarn task --task dev --template react-vite/default-ts --start-from=install", diff --git a/code/knip.ts b/scripts/knip.config.ts similarity index 97% rename from code/knip.ts rename to scripts/knip.config.ts index ee1a6bb99281..919d53259fd4 100644 --- a/code/knip.ts +++ b/scripts/knip.config.ts @@ -68,9 +68,9 @@ const baseConfig = { // Adds package.json#bundler.entries etc. to each workspace config `entry: []` export const addBundlerEntries = async (config: KnipConfig) => { - const baseDir = process.cwd(); + const baseDir = join(__dirname, '../code'); const rootManifest = await import(join(baseDir, 'package.json')); - const workspaceDirs = await fg(rootManifest.workspaces.packages, { onlyDirectories: true }); + const workspaceDirs = await fg(rootManifest.workspaces.packages, { cwd: baseDir, onlyDirectories: true }); const workspaceDirectories = workspaceDirs.map((dir) => relative(baseDir, join(baseDir, dir))); for (const wsDir of workspaceDirectories) { for (const configKey of Object.keys(baseConfig.workspaces)) { diff --git a/scripts/package.json b/scripts/package.json index 13351afb5827..456ba6c06038 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -135,6 +135,7 @@ "husky": "^4.3.7", "json5": "^2.2.3", "junit-xml": "^1.2.0", + "knip": "^5.30.1", "lint-staged": "^15.2.7", "memoizerific": "^1.11.3", "node-gyp": "^9.3.1", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 25f08bde9c99..a0e46537c940 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -768,7 +768,7 @@ __metadata: languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": +"@nodelib/fs.walk@npm:1.2.8, @nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": version: 1.2.8 resolution: "@nodelib/fs.walk@npm:1.2.8" dependencies: @@ -1459,6 +1459,19 @@ __metadata: languageName: node linkType: hard +"@snyk/github-codeowners@npm:1.1.0": + version: 1.1.0 + resolution: "@snyk/github-codeowners@npm:1.1.0" + dependencies: + commander: "npm:^4.1.1" + ignore: "npm:^5.1.8" + p-map: "npm:^4.0.0" + bin: + github-codeowners: dist/cli.js + checksum: 10c0/92d860a904a1e67f8563d4ac4d540cc613f71193f7968933b4a4b1526e80a97f536f52d27762c158e3e39d48c2f3db4906ec78846309351c741abb1a28653af9 + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -1587,6 +1600,7 @@ __metadata: jiti: "npm:^1.21.6" json5: "npm:^2.2.3" junit-xml: "npm:^1.2.0" + knip: "npm:^5.30.1" lint-staged: "npm:^15.2.7" memoizerific: "npm:^1.11.3" node-gyp: "npm:^9.3.1" @@ -4163,7 +4177,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^4.0.0": +"commander@npm:^4.0.0, commander@npm:^4.1.1": version: 4.1.1 resolution: "commander@npm:4.1.1" checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab @@ -4951,6 +4965,19 @@ __metadata: languageName: node linkType: hard +"easy-table@npm:1.2.0": + version: 1.2.0 + resolution: "easy-table@npm:1.2.0" + dependencies: + ansi-regex: "npm:^5.0.1" + wcwidth: "npm:^1.0.1" + dependenciesMeta: + wcwidth: + optional: true + checksum: 10c0/2d37937cd608586ba02e1ec479f90ccec581d366b3b0d1bb26b99ee6005f8d724e32a07a873759893461ca45b99e2d08c30326529d967ce9eedc1e9b68d4aa63 + languageName: node + linkType: hard + "ecc-jsbn@npm:~0.1.1": version: 0.1.2 resolution: "ecc-jsbn@npm:0.1.2" @@ -5070,6 +5097,16 @@ __metadata: languageName: node linkType: hard +"enhanced-resolve@npm:^5.17.1": + version: 5.17.1 + resolution: "enhanced-resolve@npm:5.17.1" + dependencies: + graceful-fs: "npm:^4.2.4" + tapable: "npm:^2.2.0" + checksum: 10c0/81a0515675eca17efdba2cf5bad87abc91a528fc1191aad50e275e74f045b41506167d420099022da7181c8d787170ea41e4a11a0b10b7a16f6237daecb15370 + languageName: node + linkType: hard + "enquirer@npm:~2.3.6": version: 2.3.6 resolution: "enquirer@npm:2.3.6" @@ -6859,7 +6896,7 @@ __metadata: languageName: node linkType: hard -"graceful-fs@npm:^4.1.10, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": +"graceful-fs@npm:^4.1.10, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": version: 4.2.11 resolution: "graceful-fs@npm:4.2.11" checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2 @@ -7312,6 +7349,13 @@ __metadata: languageName: node linkType: hard +"ignore@npm:^5.1.8": + version: 5.3.2 + resolution: "ignore@npm:5.3.2" + checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 + languageName: node + linkType: hard + "import-fresh@npm:^3.2.1": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -8374,6 +8418,36 @@ __metadata: languageName: node linkType: hard +"knip@npm:^5.30.1": + version: 5.30.1 + resolution: "knip@npm:5.30.1" + dependencies: + "@nodelib/fs.walk": "npm:1.2.8" + "@snyk/github-codeowners": "npm:1.1.0" + easy-table: "npm:1.2.0" + enhanced-resolve: "npm:^5.17.1" + fast-glob: "npm:^3.3.2" + jiti: "npm:^1.21.6" + js-yaml: "npm:^4.1.0" + minimist: "npm:^1.2.8" + picocolors: "npm:^1.0.0" + picomatch: "npm:^4.0.1" + pretty-ms: "npm:^9.0.0" + smol-toml: "npm:^1.1.4" + strip-json-comments: "npm:5.0.1" + summary: "npm:2.1.0" + zod: "npm:^3.22.4" + zod-validation-error: "npm:^3.0.3" + peerDependencies: + "@types/node": ">=18" + typescript: ">=5.0.4" + bin: + knip: bin/knip.js + knip-bun: bin/knip-bun.js + checksum: 10c0/1c470266d7967dad0f2fb1b1f6c8a797bc7bea6c1f0021c52dce40e067ae87217eb17ff11a4164e3a5244bf3d0672f9e8678e4c3898260c48b9c020132ebb29a + languageName: node + linkType: hard + "language-subtag-registry@npm:^0.3.20": version: 0.3.22 resolution: "language-subtag-registry@npm:0.3.22" @@ -10550,6 +10624,13 @@ __metadata: languageName: node linkType: hard +"parse-ms@npm:^4.0.0": + version: 4.0.0 + resolution: "parse-ms@npm:4.0.0" + checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16 + languageName: node + linkType: hard + "parse-passwd@npm:^1.0.0": version: 1.0.0 resolution: "parse-passwd@npm:1.0.0" @@ -10692,6 +10773,13 @@ __metadata: languageName: node linkType: hard +"picomatch@npm:^4.0.1": + version: 4.0.2 + resolution: "picomatch@npm:4.0.2" + checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc + languageName: node + linkType: hard + "pidtree@npm:~0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" @@ -11075,6 +11163,15 @@ __metadata: languageName: node linkType: hard +"pretty-ms@npm:^9.0.0": + version: 9.1.0 + resolution: "pretty-ms@npm:9.1.0" + dependencies: + parse-ms: "npm:^4.0.0" + checksum: 10c0/fd111aad8800a04dfd654e6016da69bdaa6fc6a4c280f8e727cffd8b5960558e94942f1a94d4aa6e4d179561a0fbb0366a9ebe0ccefbbb0f8ff853b129cdefb9 + languageName: node + linkType: hard + "prettyjson@npm:^1.2.1": version: 1.2.5 resolution: "prettyjson@npm:1.2.5" @@ -12492,6 +12589,13 @@ __metadata: languageName: node linkType: hard +"smol-toml@npm:^1.1.4": + version: 1.3.0 + resolution: "smol-toml@npm:1.3.0" + checksum: 10c0/442b4d033236ff6dd05bf91d57695fd9070a8221af080a5b2782cb2d9fad8bc31f698c61de5308a351907c1200202ba3ee51d52c5704f5349149e7c374f5fe90 + languageName: node + linkType: hard + "socks-proxy-agent@npm:^7.0.0": version: 7.0.0 resolution: "socks-proxy-agent@npm:7.0.0" @@ -12966,6 +13070,13 @@ __metadata: languageName: node linkType: hard +"strip-json-comments@npm:5.0.1": + version: 5.0.1 + resolution: "strip-json-comments@npm:5.0.1" + checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982 + languageName: node + linkType: hard + "strip-json-comments@npm:^3.1.1": version: 3.1.1 resolution: "strip-json-comments@npm:3.1.1" @@ -13011,6 +13122,13 @@ __metadata: languageName: node linkType: hard +"summary@npm:2.1.0": + version: 2.1.0 + resolution: "summary@npm:2.1.0" + checksum: 10c0/2743c1f940fb303c496ef1b085e654704a6c16872957b6b76648c34bd32c8f0b7a3c5ec4e0f8bfb71dcb8473e34d172fef31026b85562af589cf220aa901698d + languageName: node + linkType: hard + "supports-color@npm:^5.0.0, supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" @@ -13072,6 +13190,13 @@ __metadata: languageName: node linkType: hard +"tapable@npm:^2.2.0": + version: 2.2.1 + resolution: "tapable@npm:2.2.1" + checksum: 10c0/bc40e6efe1e554d075469cedaba69a30eeb373552aaf41caeaaa45bf56ffacc2674261b106245bd566b35d8f3329b52d838e851ee0a852120acae26e622925c9 + languageName: node + linkType: hard + "tar-stream@npm:^1.5.2": version: 1.6.2 resolution: "tar-stream@npm:1.6.2" @@ -14839,7 +14964,16 @@ __metadata: languageName: node linkType: hard -"zod@npm:^3.23.8": +"zod-validation-error@npm:^3.0.3": + version: 3.3.1 + resolution: "zod-validation-error@npm:3.3.1" + peerDependencies: + zod: ^3.18.0 + checksum: 10c0/53869a8478f42cd38f51e159431fe7af9e0b456e8078c6d9d906adb212753788defa9c8bd7374e9ecd4a688b6736fcfa091aebac65054328b8cfdecce9395d8e + languageName: node + linkType: hard + +"zod@npm:^3.22.4, zod@npm:^3.23.8": version: 3.23.8 resolution: "zod@npm:3.23.8" checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69 From 9e28a8b60ef6f297c8cb027f095afaf27acc5e0e Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Sun, 22 Sep 2024 10:56:56 +0200 Subject: [PATCH 04/41] Add knip job to circle ci --- .circleci/config.yml | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index 95ff7dd6304a..1546a7db8430 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -195,6 +195,22 @@ jobs: yarn lint - report-workflow-on-failure - cancel-workflow-on-failure + knip: + executor: + class: large + name: sb_node_22_classic + steps: + - git-shallow-clone/checkout_advanced: + clone_options: "--depth 1 --verbose" + - attach_workspace: + at: . + - run: + name: Knip + command: | + cd code + yarn knip --no-exit-code + - report-workflow-on-failure + - cancel-workflow-on-failure check: executor: class: xlarge @@ -688,6 +704,9 @@ workflows: - lint: requires: - build + - knip: + requires: + - build - check: requires: - build @@ -754,6 +773,9 @@ workflows: - lint: requires: - build + - knip: + requires: + - build - check: requires: - build @@ -821,6 +843,9 @@ workflows: - lint: requires: - build + - knip: + requires: + - build - check: requires: - build From 0ae48df6e52ac909bb5c275c93a49d91947a5658 Mon Sep 17 00:00:00 2001 From: Lars Kappert Date: Sun, 22 Sep 2024 11:17:17 +0200 Subject: [PATCH 05/41] Fix TS issues (use matcher pkg that we have types for) --- scripts/knip.config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/knip.config.ts b/scripts/knip.config.ts index 919d53259fd4..e9a90982e3cb 100644 --- a/scripts/knip.config.ts +++ b/scripts/knip.config.ts @@ -2,7 +2,7 @@ import { join, relative } from 'node:path'; import fg from 'fast-glob'; import type { KnipConfig } from 'knip'; -import { isMatch } from 'picomatch'; +import { match } from 'minimatch'; // Files we want to exclude from analysis should be negated project patterns, not `ignores` // docs: https://knip.dev/guides/configuring-project-files @@ -74,9 +74,9 @@ export const addBundlerEntries = async (config: KnipConfig) => { const workspaceDirectories = workspaceDirs.map((dir) => relative(baseDir, join(baseDir, dir))); for (const wsDir of workspaceDirectories) { for (const configKey of Object.keys(baseConfig.workspaces)) { - if (isMatch(wsDir, configKey)) { + if (match([wsDir], configKey)) { const manifest = await import(join(baseDir, wsDir, 'package.json')); - const configEntries = config.workspaces[configKey].entry ?? []; + const configEntries = (config.workspaces[configKey].entry as string[]) ?? []; const bundler = manifest?.bundler; for (const value of Object.values(bundler ?? {})) { if (Array.isArray(value)) { From 26f92191528f5e37ed96f53fd85e89d480fcdcf0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 25 Sep 2024 15:46:08 +0200 Subject: [PATCH 06/41] remove handlebars --- code/builders/builder-webpack5/package.json | 2 +- .../src/preview/virtual-module-mapping.ts | 18 ++++----- .../templates/virtualModuleModernEntry.js | 34 +++++++++++++++++ .../virtualModuleModernEntry.js.handlebars | 34 ----------------- code/core/package.json | 1 - code/core/src/common/index.ts | 1 - code/core/src/common/utils/handlebars.ts | 7 ---- code/yarn.lock | 37 +------------------ 8 files changed, 43 insertions(+), 91 deletions(-) create mode 100644 code/builders/builder-webpack5/templates/virtualModuleModernEntry.js delete mode 100644 code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars delete mode 100644 code/core/src/common/utils/handlebars.ts diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 65d0b7ba22e8..3b6e7474f95d 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -41,7 +41,7 @@ "node": "./dist/loaders/export-order-loader.js", "require": "./dist/loaders/export-order-loader.js" }, - "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars", + "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js", "./templates/preview.ejs": "./templates/preview.ejs", "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js", "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js", diff --git a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts index 2b78d926f12e..7704f6ff151d 100644 --- a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts +++ b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts @@ -2,7 +2,6 @@ import { join, resolve } from 'node:path'; import { getBuilderOptions, - handlebars, loadPreviewOrConfigFile, normalizeStories, readTemplate, @@ -51,18 +50,15 @@ export const getVirtualModules = async (options: Options) => { const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; virtualModules[storiesPath] = toImportFn(stories, { needPipelinedImport }); const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); - virtualModules[configEntryPath] = handlebars( + virtualModules[configEntryPath] = ( await readTemplate( - require.resolve( - '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' - ) - ), - { - storiesFilename, - previewAnnotations, - } + require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js') + ) + ) + .replaceAll('{{storiesFilename}}', storiesFilename) + .replaceAll('{{previewAnnotations}}', previewAnnotations.filter(Boolean).join(',')) // We need to double escape `\` for webpack. We may have some in windows paths - ).replace(/\\/g, '\\\\'); + .replace(/\\/g, '\\\\'); entries.push(configEntryPath); return { diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js new file mode 100644 index 000000000000..0138bfdae0a3 --- /dev/null +++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js @@ -0,0 +1,34 @@ +import { createBrowserChannel } from 'storybook/internal/channels'; +import { PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api'; + +import { global } from '@storybook/global'; + +import { importFn } from './{{storiesFilename}}'; + +const getProjectAnnotations = () => + composeConfigs(['{{previewAnnotations}}'].map((entry) => require(entry))); + +const channel = createBrowserChannel({ page: 'preview' }); +addons.setChannel(channel); + +if (global.CONFIG_TYPE === 'DEVELOPMENT') { + window.__STORYBOOK_SERVER_CHANNEL__ = channel; +} + +const preview = new PreviewWeb(importFn, getProjectAnnotations); + +window.__STORYBOOK_PREVIEW__ = preview; +window.__STORYBOOK_STORY_STORE__ = preview.storyStore; +window.__STORYBOOK_ADDONS_CHANNEL__ = channel; + +if (import.meta.webpackHot) { + import.meta.webpackHot.accept('./{{storiesFilename}}', () => { + // importFn has changed so we need to patch the new one in + preview.onStoriesChanged({ importFn }); + }); + + import.meta.webpackHot.accept(['{{previewAnnotations}}'], () => { + // getProjectAnnotations has changed so we need to patch the new one in + preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); + }); +} diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars deleted file mode 100644 index 14fa7585ec3b..000000000000 --- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ /dev/null @@ -1,34 +0,0 @@ -import { global } from '@storybook/global'; - -import { ClientApi, PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api'; -import { createBrowserChannel } from 'storybook/internal/channels'; - -import { importFn } from './{{storiesFilename}}'; - -const getProjectAnnotations = () => -composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]); - -const channel = createBrowserChannel({ page: 'preview' }); -addons.setChannel(channel); - -if (global.CONFIG_TYPE === 'DEVELOPMENT'){ -window.__STORYBOOK_SERVER_CHANNEL__ = channel; -} - -const preview = new PreviewWeb(importFn, getProjectAnnotations); - -window.__STORYBOOK_PREVIEW__ = preview; -window.__STORYBOOK_STORY_STORE__ = preview.storyStore; -window.__STORYBOOK_ADDONS_CHANNEL__ = channel; - -if (import.meta.webpackHot) { -import.meta.webpackHot.accept('./{{storiesFilename}}', () => { -// importFn has changed so we need to patch the new one in -preview.onStoriesChanged({ importFn }); -}); - -import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => { -// getProjectAnnotations has changed so we need to patch the new one in -preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); -}); -} \ No newline at end of file diff --git a/code/core/package.json b/code/core/package.json index 27b66345dda2..449829d6e13d 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -375,7 +375,6 @@ "get-npm-tarball-url": "^2.0.3", "glob": "^10.0.0", "globby": "^14.0.1", - "handlebars": "^4.7.7", "jiti": "^1.21.6", "js-yaml": "^4.1.0", "lazy-universal-dotenv": "^4.0.0", diff --git a/code/core/src/common/index.ts b/code/core/src/common/index.ts index 0e7e92bd6a71..6166e285ab05 100644 --- a/code/core/src/common/index.ts +++ b/code/core/src/common/index.ts @@ -18,7 +18,6 @@ export * from './utils/get-storybook-info'; export * from './utils/get-storybook-refs'; export * from './utils/glob-to-regexp'; export * from './utils/HandledError'; -export * from './utils/handlebars'; export * from './utils/interpolate'; export * from './utils/interpret-files'; export * from './utils/interpret-require'; diff --git a/code/core/src/common/utils/handlebars.ts b/code/core/src/common/utils/handlebars.ts deleted file mode 100644 index 56a79a03e963..000000000000 --- a/code/core/src/common/utils/handlebars.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Handlebars from 'handlebars'; - -export function handlebars(source: string, data: any) { - const template = Handlebars.compile(source); - - return template(data); -} diff --git a/code/yarn.lock b/code/yarn.lock index d9ee78540efc..2e5489ff9de8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6088,7 +6088,6 @@ __metadata: get-npm-tarball-url: "npm:^2.0.3" glob: "npm:^10.0.0" globby: "npm:^14.0.1" - handlebars: "npm:^4.7.7" jiti: "npm:^1.21.6" js-yaml: "npm:^4.1.0" jsdoc-type-pratt-parser: "npm:^4.0.0" @@ -16552,24 +16551,6 @@ __metadata: languageName: node linkType: hard -"handlebars@npm:^4.7.7": - version: 4.7.8 - resolution: "handlebars@npm:4.7.8" - dependencies: - minimist: "npm:^1.2.5" - neo-async: "npm:^2.6.2" - source-map: "npm:^0.6.1" - uglify-js: "npm:^3.1.4" - wordwrap: "npm:^1.0.0" - dependenciesMeta: - uglify-js: - optional: true - bin: - handlebars: bin/handlebars - checksum: 10c0/7aff423ea38a14bb379316f3857fe0df3c5d66119270944247f155ba1f08e07a92b340c58edaa00cfe985c21508870ee5183e0634dcb53dd405f35c93ef7f10d - languageName: node - linkType: hard - "happy-dom@npm:^14.12.0": version: 14.12.0 resolution: "happy-dom@npm:14.12.0" @@ -20963,7 +20944,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8": +"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6 @@ -27723,15 +27704,6 @@ __metadata: languageName: node linkType: hard -"uglify-js@npm:^3.1.4": - version: 3.17.4 - resolution: "uglify-js@npm:3.17.4" - bin: - uglifyjs: bin/uglifyjs - checksum: 10c0/8b7fcdca69deb284fed7d2025b73eb747ce37f9aca6af53422844f46427152d5440601b6e2a033e77856a2f0591e4167153d5a21b68674ad11f662034ec13ced - languageName: node - linkType: hard - "unbox-primitive@npm:^1.0.2": version: 1.0.2 resolution: "unbox-primitive@npm:1.0.2" @@ -29494,13 +29466,6 @@ __metadata: languageName: node linkType: hard -"wordwrap@npm:^1.0.0": - version: 1.0.0 - resolution: "wordwrap@npm:1.0.0" - checksum: 10c0/7ed2e44f3c33c5c3e3771134d2b0aee4314c9e49c749e37f464bf69f2bcdf0cbf9419ca638098e2717cff4875c47f56a007532f6111c3319f557a2ca91278e92 - languageName: node - linkType: hard - "workerpool@npm:^3.1.1": version: 3.1.2 resolution: "workerpool@npm:3.1.2" From 80581920676127dc2d295c1aad50914f3e4bdc99 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 26 Sep 2024 11:04:55 +0200 Subject: [PATCH 07/41] fixes --- .gitignore | 2 ++ .vscode/settings.json | 2 +- .../src/preview/virtual-module-mapping.ts | 17 +++++++++++++++-- .../templates/virtualModuleModernEntry.js | 7 +++---- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index f0ad86dc47c4..0724b9827912 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,5 @@ code/.vite-inspect .nx/cache !**/fixtures/**/yarn.lock code/core/report + +*storybook.log diff --git a/.vscode/settings.json b/.vscode/settings.json index 7f078764150f..af4c944bf019 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,7 +4,7 @@ "editor.formatOnSave": true }, "[javascriptreact]": { - "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.defaultFormatter": "vscode.typescript-language-features", "editor.formatOnSave": true }, "[typescript]": { diff --git a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts index 7704f6ff151d..ec55e40c5291 100644 --- a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts +++ b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts @@ -55,8 +55,21 @@ export const getVirtualModules = async (options: Options) => { require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js') ) ) - .replaceAll('{{storiesFilename}}', storiesFilename) - .replaceAll('{{previewAnnotations}}', previewAnnotations.filter(Boolean).join(',')) + .replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`) + .replaceAll( + `'{{previewAnnotations}}'`, + previewAnnotations + .filter(Boolean) + .map((entry) => `'${entry}'`) + .join(',') + ) + .replaceAll( + `'{{previewAnnotations_requires}}'`, + previewAnnotations + .filter(Boolean) + .map((entry) => `require('${entry}')`) + .join(',') + ) // We need to double escape `\` for webpack. We may have some in windows paths .replace(/\\/g, '\\\\'); entries.push(configEntryPath); diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js index 0138bfdae0a3..4ae082c43b2e 100644 --- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js +++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js @@ -3,10 +3,9 @@ import { PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-a import { global } from '@storybook/global'; -import { importFn } from './{{storiesFilename}}'; +import { importFn } from '{{storiesFilename}}'; -const getProjectAnnotations = () => - composeConfigs(['{{previewAnnotations}}'].map((entry) => require(entry))); +const getProjectAnnotations = () => composeConfigs(['{{previewAnnotations_requires}}']); const channel = createBrowserChannel({ page: 'preview' }); addons.setChannel(channel); @@ -22,7 +21,7 @@ window.__STORYBOOK_STORY_STORE__ = preview.storyStore; window.__STORYBOOK_ADDONS_CHANNEL__ = channel; if (import.meta.webpackHot) { - import.meta.webpackHot.accept('./{{storiesFilename}}', () => { + import.meta.webpackHot.accept('{{storiesFilename}}', () => { // importFn has changed so we need to patch the new one in preview.onStoriesChanged({ importFn }); }); From 4381f777ea5c0cacd9df9cbf03abbeb52567ee06 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 26 Sep 2024 12:49:57 +0200 Subject: [PATCH 08/41] Discard changes to .vscode/settings.json --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index af4c944bf019..7f078764150f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,7 +4,7 @@ "editor.formatOnSave": true }, "[javascriptreact]": { - "editor.defaultFormatter": "vscode.typescript-language-features", + "editor.defaultFormatter": "dbaeumer.vscode-eslint", "editor.formatOnSave": true }, "[typescript]": { From 13fd6aa4cb0f19aeea22302cc860b66fb99f52dd Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 26 Sep 2024 15:45:48 +0200 Subject: [PATCH 09/41] ignore eslint warning of template file --- code/.eslintrc.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index e7294f412ede..183c9e7a0468 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -42,6 +42,13 @@ module.exports = { '@typescript-eslint/default-param-last': 'off', }, overrides: [ + { + files: ['templates/virtualModuleModernEntry.js'], + rules: { + 'no-underscore-dangle': 'off', + 'import/no-extraneous-dependencies': 'off', + }, + }, { // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them files: ['**/frameworks/angular/template/**/*'], From 9aaf4a786d7b30b7e45ab96049070ace489e60d9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 27 Sep 2024 13:56:00 +0200 Subject: [PATCH 10/41] fix --- code/.eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 183c9e7a0468..4268ec993dd6 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -43,7 +43,7 @@ module.exports = { }, overrides: [ { - files: ['templates/virtualModuleModernEntry.js'], + files: ['**/templates/virtualModuleModernEntry.js'], rules: { 'no-underscore-dangle': 'off', 'import/no-extraneous-dependencies': 'off', From 1e64fb302bfe8e334c26fa0cb6ce8df060c36903 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 26 Sep 2024 22:41:40 +0200 Subject: [PATCH 11/41] make prettier a core optional peer dependency --- code/core/package.json | 8 ++++++++ code/yarn.lock | 5 +++++ 2 files changed, 13 insertions(+) diff --git a/code/core/package.json b/code/core/package.json index 449829d6e13d..3222d8824e58 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -418,6 +418,14 @@ "use-resize-observer": "^9.1.0", "watchpack": "^2.2.0" }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } + }, "publishConfig": { "access": "public" }, diff --git a/code/yarn.lock b/code/yarn.lock index 2e5489ff9de8..3e8e0ae1899b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6136,6 +6136,11 @@ __metadata: util: "npm:^0.12.5" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true languageName: unknown linkType: soft From 0cc7bb80430b116fd13b566f7fd0eb6de8f21243 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 26 Sep 2024 22:41:57 +0200 Subject: [PATCH 12/41] keep prettier/standalone --- code/core/scripts/entries.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts index afe8acddd84d..e3b78e483990 100644 --- a/code/core/scripts/entries.ts +++ b/code/core/scripts/entries.ts @@ -28,7 +28,13 @@ export const getEntries = (cwd: string) => { define('src/preview-api/index.ts', ['browser', 'node'], true), define('src/manager-api/index.ts', ['browser', 'node'], true, ['react']), define('src/router/index.ts', ['browser', 'node'], true, ['react']), - define('src/components/index.ts', ['browser', 'node'], true, ['react', 'react-dom']), + define( + 'src/components/index.ts', + ['browser', 'node'], + true, + ['react', 'react-dom'], + ['prettier'] // the syntax highlighter uses prettier/standalone to format the code + ), define('src/theming/index.ts', ['browser', 'node'], true, ['react']), define('src/theming/create.ts', ['browser', 'node'], true, ['react']), define('src/docs-tools/index.ts', ['browser', 'node'], true), From c75dc6aae5ec0a49de81d815028cf1a456394d10 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Sep 2024 13:50:35 +0200 Subject: [PATCH 13/41] propagate prettier peer dependency to storybook package --- code/lib/cli/package.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index bba18dfd8280..37adff00332f 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -322,6 +322,14 @@ "devDependencies": { "typescript": "^5.3.2" }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } + }, "publishConfig": { "access": "public" }, From 41093ec2f667abb0d7c7cf558c997c8c87842e67 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 27 Sep 2024 14:27:08 +0200 Subject: [PATCH 14/41] update lock-file --- code/yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code/yarn.lock b/code/yarn.lock index 3e8e0ae1899b..13752d62f233 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -26297,6 +26297,11 @@ __metadata: dependencies: "@storybook/core": "workspace:*" typescript: "npm:^5.3.2" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true bin: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs From c2b75ba84be5f19cb50053c45836b9cce5b7be80 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 28 Sep 2024 11:01:42 +0000 Subject: [PATCH 15/41] Update CHANGELOG.md for v8.3.4 [skip ci] --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3115c6b4c070..dd75af133731 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 8.3.4 + +- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy! +- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen! + ## 8.3.3 - CLI: Show constraints in error when getting depndencies - [#29187](https://github.com/storybookjs/storybook/pull/29187), thanks @andrasczeh! From 5c82c12ab241fa133012e055226807c5778e59fc Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 28 Sep 2024 10:26:06 +0000 Subject: [PATCH 16/41] Write changelog for 8.4.0-alpha.2 [skip ci] --- CHANGELOG.prerelease.md | 8 ++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index b9179e8d6dcc..07dc041fa818 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 8.4.0-alpha.2 + +- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez! +- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold! +- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen! +- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen! +- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen! + ## 8.4.0-alpha.1 - Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy! diff --git a/code/package.json b/code/package.json index bc3f6e8772ca..a86f65d1a7f4 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.4.0-alpha.2" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 144772e63ef6..29a63859284a 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.4.0-alpha.1","info":{"plain":"- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!\n- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen!\n- Angular: Fix sourceDecorator to apply excludeDecorators flag - [#29069](https://github.com/storybookjs/storybook/pull/29069), thanks @JSMike!\n- Builder-vite: Replace .at() call with [] in codegen - [#29048](https://github.com/storybookjs/storybook/pull/29048), thanks @Chudesnov!\n- CLI: Ensure `.gitignore` updated via CLI ends with a newline - [#29124](https://github.com/storybookjs/storybook/pull/29124), thanks @3w36zj6!\n- CLI: Fix skip-install for stable latest releases - [#29133](https://github.com/storybookjs/storybook/pull/29133), thanks @valentinpalkovic!\n- CLI: Show constraints in error when getting depndencies - [#29187](https://github.com/storybookjs/storybook/pull/29187), thanks @andrasczeh!\n- Core: Do not add packageManager field to package.json during `storybook dev` - [#29152](https://github.com/storybookjs/storybook/pull/29152), thanks @valentinpalkovic!\n- Core: Do not prebundle better-opn - [#29137](https://github.com/storybookjs/storybook/pull/29137), thanks @valentinpalkovic!\n- Core: Do not prebundle jsdoc-type-pratt-parser - [#29134](https://github.com/storybookjs/storybook/pull/29134), thanks @valentinpalkovic!\n- Core: Replace `fs-extra` with the native APIs - [#29126](https://github.com/storybookjs/storybook/pull/29126), thanks @ziebam!\n- Next.js: Upgrade sass-loader from ^12 to ^13 - [#29040](https://github.com/storybookjs/storybook/pull/29040), thanks @HoncharenkoZhenya!\n- React-Vite: Downgrade react-docgen-typescript plugin - [#29184](https://github.com/storybookjs/storybook/pull/29184), thanks @shilman!\n- UI: Fix composed storybook TooltipLinkList bug where href isn't passed forward - [#29175](https://github.com/storybookjs/storybook/pull/29175), thanks @JSMike!\n- Viewport-addon: Add InitialViewportKeys type to viewport addon - [#29182](https://github.com/storybookjs/storybook/pull/29182), thanks @hyeongrok7874!\n- Vite: Add jsdoc-type-pratt-parser to `optimizeDeps` - [#29179](https://github.com/storybookjs/storybook/pull/29179), thanks @tobiasdiez!"}} +{"version":"8.4.0-alpha.2","info":{"plain":"- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!\n- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold!\n- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen!\n- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen!\n- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen!"}} From 491f595266623c82dfa49a98b311958fef20d4fd Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Sat, 28 Sep 2024 11:37:29 +0000 Subject: [PATCH 17/41] Bump version from "8.4.0-alpha.1" to "8.4.0-alpha.2" [skip ci] --- code/addons/a11y/package.json | 2 +- code/addons/actions/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/docs/package.json | 2 +- code/addons/essentials/package.json | 2 +- code/addons/gfm/package.json | 2 +- code/addons/highlight/package.json | 2 +- code/addons/interactions/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/storysource/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/toolbars/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/core/package.json | 2 +- code/core/src/common/versions.ts | 168 +++++++++--------- code/core/src/manager-api/version.ts | 2 +- code/deprecated/builder-manager/package.json | 2 +- code/deprecated/channels/package.json | 2 +- code/deprecated/client-logger/package.json | 2 +- code/deprecated/components/package.json | 2 +- code/deprecated/core-common/package.json | 2 +- code/deprecated/core-events/package.json | 2 +- code/deprecated/core-server/package.json | 2 +- code/deprecated/csf-tools/package.json | 2 +- code/deprecated/docs-tools/package.json | 2 +- code/deprecated/manager-api/package.json | 2 +- code/deprecated/manager/package.json | 2 +- code/deprecated/node-logger/package.json | 2 +- code/deprecated/preview-api/package.json | 2 +- code/deprecated/preview/package.json | 2 +- code/deprecated/router/package.json | 2 +- code/deprecated/telemetry/package.json | 2 +- code/deprecated/theming/package.json | 2 +- code/deprecated/types/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- .../experimental-nextjs-vite/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/svelte-webpack5/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/cli/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/instrumenter/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 5 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/svelte-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 87 files changed, 171 insertions(+), 172 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 2fb4f39c27b7..f95692592620 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index b2d07e4a6d44..6407d217eb13 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 825f3d5ee846..21b2df490aec 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index b2f1b6e2184a..9b37806994af 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 1edb8870f13b..33f704815cc0 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 89a11b3820b0..943a99795e89 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 61b66decc090..40b938cbd4cd 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index b3194e2a8610..bfb6915f914d 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index b59e42d1167a..ded73083563f 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index d1420346c537..a27279e22100 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 928fd3f02e7f..bc7ef097e980 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index f30683e14138..8750536d0b59 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index b9236520bb73..6b644683aa20 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 7410c7255772..f072d5a8a685 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 43bac6318cba..ae60c8fc793e 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 4072e0a766f0..12681a702cc1 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index b97dea94c2c8..ade8a3e6326b 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index a7e596d63f9a..e66cb299350f 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index d0363cb96de7..a9f2b5e949f6 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index f32b264c1495..5c6c976b0f63 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 3b6e7474f95d..c36831a94faa 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index 3222d8824e58..5aa725236372 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index cafd27429125..7e2f1ce63596 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,87 +1,87 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.4.0-alpha.1', - '@storybook/addon-actions': '8.4.0-alpha.1', - '@storybook/addon-backgrounds': '8.4.0-alpha.1', - '@storybook/addon-controls': '8.4.0-alpha.1', - '@storybook/addon-docs': '8.4.0-alpha.1', - '@storybook/addon-essentials': '8.4.0-alpha.1', - '@storybook/addon-mdx-gfm': '8.4.0-alpha.1', - '@storybook/addon-highlight': '8.4.0-alpha.1', - '@storybook/addon-interactions': '8.4.0-alpha.1', - '@storybook/addon-jest': '8.4.0-alpha.1', - '@storybook/addon-links': '8.4.0-alpha.1', - '@storybook/addon-measure': '8.4.0-alpha.1', - '@storybook/addon-onboarding': '8.4.0-alpha.1', - '@storybook/addon-outline': '8.4.0-alpha.1', - '@storybook/addon-storysource': '8.4.0-alpha.1', - '@storybook/experimental-addon-test': '8.4.0-alpha.1', - '@storybook/addon-themes': '8.4.0-alpha.1', - '@storybook/addon-toolbars': '8.4.0-alpha.1', - '@storybook/addon-viewport': '8.4.0-alpha.1', - '@storybook/builder-vite': '8.4.0-alpha.1', - '@storybook/builder-webpack5': '8.4.0-alpha.1', - '@storybook/core': '8.4.0-alpha.1', - '@storybook/builder-manager': '8.4.0-alpha.1', - '@storybook/channels': '8.4.0-alpha.1', - '@storybook/client-logger': '8.4.0-alpha.1', - '@storybook/components': '8.4.0-alpha.1', - '@storybook/core-common': '8.4.0-alpha.1', - '@storybook/core-events': '8.4.0-alpha.1', - '@storybook/core-server': '8.4.0-alpha.1', - '@storybook/csf-tools': '8.4.0-alpha.1', - '@storybook/docs-tools': '8.4.0-alpha.1', - '@storybook/manager': '8.4.0-alpha.1', - '@storybook/manager-api': '8.4.0-alpha.1', - '@storybook/node-logger': '8.4.0-alpha.1', - '@storybook/preview': '8.4.0-alpha.1', - '@storybook/preview-api': '8.4.0-alpha.1', - '@storybook/router': '8.4.0-alpha.1', - '@storybook/telemetry': '8.4.0-alpha.1', - '@storybook/theming': '8.4.0-alpha.1', - '@storybook/types': '8.4.0-alpha.1', - '@storybook/angular': '8.4.0-alpha.1', - '@storybook/ember': '8.4.0-alpha.1', - '@storybook/experimental-nextjs-vite': '8.4.0-alpha.1', - '@storybook/html-vite': '8.4.0-alpha.1', - '@storybook/html-webpack5': '8.4.0-alpha.1', - '@storybook/nextjs': '8.4.0-alpha.1', - '@storybook/preact-vite': '8.4.0-alpha.1', - '@storybook/preact-webpack5': '8.4.0-alpha.1', - '@storybook/react-vite': '8.4.0-alpha.1', - '@storybook/react-webpack5': '8.4.0-alpha.1', - '@storybook/server-webpack5': '8.4.0-alpha.1', - '@storybook/svelte-vite': '8.4.0-alpha.1', - '@storybook/svelte-webpack5': '8.4.0-alpha.1', - '@storybook/sveltekit': '8.4.0-alpha.1', - '@storybook/vue3-vite': '8.4.0-alpha.1', - '@storybook/vue3-webpack5': '8.4.0-alpha.1', - '@storybook/web-components-vite': '8.4.0-alpha.1', - '@storybook/web-components-webpack5': '8.4.0-alpha.1', - '@storybook/blocks': '8.4.0-alpha.1', - storybook: '8.4.0-alpha.1', - sb: '8.4.0-alpha.1', - '@storybook/cli': '8.4.0-alpha.1', - '@storybook/codemod': '8.4.0-alpha.1', - '@storybook/core-webpack': '8.4.0-alpha.1', - 'create-storybook': '8.4.0-alpha.1', - '@storybook/csf-plugin': '8.4.0-alpha.1', - '@storybook/instrumenter': '8.4.0-alpha.1', - '@storybook/react-dom-shim': '8.4.0-alpha.1', - '@storybook/source-loader': '8.4.0-alpha.1', - '@storybook/test': '8.4.0-alpha.1', - '@storybook/preset-create-react-app': '8.4.0-alpha.1', - '@storybook/preset-html-webpack': '8.4.0-alpha.1', - '@storybook/preset-preact-webpack': '8.4.0-alpha.1', - '@storybook/preset-react-webpack': '8.4.0-alpha.1', - '@storybook/preset-server-webpack': '8.4.0-alpha.1', - '@storybook/preset-svelte-webpack': '8.4.0-alpha.1', - '@storybook/preset-vue3-webpack': '8.4.0-alpha.1', - '@storybook/html': '8.4.0-alpha.1', - '@storybook/preact': '8.4.0-alpha.1', - '@storybook/react': '8.4.0-alpha.1', - '@storybook/server': '8.4.0-alpha.1', - '@storybook/svelte': '8.4.0-alpha.1', - '@storybook/vue3': '8.4.0-alpha.1', - '@storybook/web-components': '8.4.0-alpha.1', + '@storybook/addon-a11y': '8.4.0-alpha.2', + '@storybook/addon-actions': '8.4.0-alpha.2', + '@storybook/addon-backgrounds': '8.4.0-alpha.2', + '@storybook/addon-controls': '8.4.0-alpha.2', + '@storybook/addon-docs': '8.4.0-alpha.2', + '@storybook/addon-essentials': '8.4.0-alpha.2', + '@storybook/addon-mdx-gfm': '8.4.0-alpha.2', + '@storybook/addon-highlight': '8.4.0-alpha.2', + '@storybook/addon-interactions': '8.4.0-alpha.2', + '@storybook/addon-jest': '8.4.0-alpha.2', + '@storybook/addon-links': '8.4.0-alpha.2', + '@storybook/addon-measure': '8.4.0-alpha.2', + '@storybook/addon-onboarding': '8.4.0-alpha.2', + '@storybook/addon-outline': '8.4.0-alpha.2', + '@storybook/addon-storysource': '8.4.0-alpha.2', + '@storybook/experimental-addon-test': '8.4.0-alpha.2', + '@storybook/addon-themes': '8.4.0-alpha.2', + '@storybook/addon-toolbars': '8.4.0-alpha.2', + '@storybook/addon-viewport': '8.4.0-alpha.2', + '@storybook/builder-vite': '8.4.0-alpha.2', + '@storybook/builder-webpack5': '8.4.0-alpha.2', + '@storybook/core': '8.4.0-alpha.2', + '@storybook/builder-manager': '8.4.0-alpha.2', + '@storybook/channels': '8.4.0-alpha.2', + '@storybook/client-logger': '8.4.0-alpha.2', + '@storybook/components': '8.4.0-alpha.2', + '@storybook/core-common': '8.4.0-alpha.2', + '@storybook/core-events': '8.4.0-alpha.2', + '@storybook/core-server': '8.4.0-alpha.2', + '@storybook/csf-tools': '8.4.0-alpha.2', + '@storybook/docs-tools': '8.4.0-alpha.2', + '@storybook/manager': '8.4.0-alpha.2', + '@storybook/manager-api': '8.4.0-alpha.2', + '@storybook/node-logger': '8.4.0-alpha.2', + '@storybook/preview': '8.4.0-alpha.2', + '@storybook/preview-api': '8.4.0-alpha.2', + '@storybook/router': '8.4.0-alpha.2', + '@storybook/telemetry': '8.4.0-alpha.2', + '@storybook/theming': '8.4.0-alpha.2', + '@storybook/types': '8.4.0-alpha.2', + '@storybook/angular': '8.4.0-alpha.2', + '@storybook/ember': '8.4.0-alpha.2', + '@storybook/experimental-nextjs-vite': '8.4.0-alpha.2', + '@storybook/html-vite': '8.4.0-alpha.2', + '@storybook/html-webpack5': '8.4.0-alpha.2', + '@storybook/nextjs': '8.4.0-alpha.2', + '@storybook/preact-vite': '8.4.0-alpha.2', + '@storybook/preact-webpack5': '8.4.0-alpha.2', + '@storybook/react-vite': '8.4.0-alpha.2', + '@storybook/react-webpack5': '8.4.0-alpha.2', + '@storybook/server-webpack5': '8.4.0-alpha.2', + '@storybook/svelte-vite': '8.4.0-alpha.2', + '@storybook/svelte-webpack5': '8.4.0-alpha.2', + '@storybook/sveltekit': '8.4.0-alpha.2', + '@storybook/vue3-vite': '8.4.0-alpha.2', + '@storybook/vue3-webpack5': '8.4.0-alpha.2', + '@storybook/web-components-vite': '8.4.0-alpha.2', + '@storybook/web-components-webpack5': '8.4.0-alpha.2', + '@storybook/blocks': '8.4.0-alpha.2', + storybook: '8.4.0-alpha.2', + sb: '8.4.0-alpha.2', + '@storybook/cli': '8.4.0-alpha.2', + '@storybook/codemod': '8.4.0-alpha.2', + '@storybook/core-webpack': '8.4.0-alpha.2', + 'create-storybook': '8.4.0-alpha.2', + '@storybook/csf-plugin': '8.4.0-alpha.2', + '@storybook/instrumenter': '8.4.0-alpha.2', + '@storybook/react-dom-shim': '8.4.0-alpha.2', + '@storybook/source-loader': '8.4.0-alpha.2', + '@storybook/test': '8.4.0-alpha.2', + '@storybook/preset-create-react-app': '8.4.0-alpha.2', + '@storybook/preset-html-webpack': '8.4.0-alpha.2', + '@storybook/preset-preact-webpack': '8.4.0-alpha.2', + '@storybook/preset-react-webpack': '8.4.0-alpha.2', + '@storybook/preset-server-webpack': '8.4.0-alpha.2', + '@storybook/preset-svelte-webpack': '8.4.0-alpha.2', + '@storybook/preset-vue3-webpack': '8.4.0-alpha.2', + '@storybook/html': '8.4.0-alpha.2', + '@storybook/preact': '8.4.0-alpha.2', + '@storybook/react': '8.4.0-alpha.2', + '@storybook/server': '8.4.0-alpha.2', + '@storybook/svelte': '8.4.0-alpha.2', + '@storybook/vue3': '8.4.0-alpha.2', + '@storybook/web-components': '8.4.0-alpha.2', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 1a5e51781450..b93946e83d81 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.4.0-alpha.1'; +export const version = '8.4.0-alpha.2'; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 8ff3caca0b47..d0a08aa66bf4 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index f4b6a3bce98c..b66da95ec165 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 4dda619212f4..4555580db433 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 51f910d53a55..41c063e61dab 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index be1a0bddfadb..ea8a5188b5da 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index b86e168d2b05..b4c5d489ed53 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index fd4ef20f09c3..5f370f4ba497 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 6971cc20c9ca..2ae32f26603a 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 4ec233812e5d..5079b7eab104 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 22545b213f7f..8f30c547effc 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 2208447a22cd..5d8c904ef674 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 4f6a30fd6af1..3e53d1c42696 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index d07bbf8a4a58..763a37f902ec 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 891d441d6421..59a7a7719c4f 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index c24c02c726e9..aab676ed8401 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 959c456b40ca..8aab3ebfccf2 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 0041fd26f2ef..92fad0995a40 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 1cad186effe6..607acfb4f392 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 4f4b3fcd9514..5d128abcf021 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 4b37a03e2e9d..5d54d9803b98 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 6b9b5a107a45..d71624eb2261 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 084261623282..71ea4318249e 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 8c242521f6a4..d21213e2726d 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 6c5914e9d16f..f45380996c31 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 5dc513559e85..ee970d33c095 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 4383074ffd8d..22f01bd4114f 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index be405505cfed..8c2228fc165a 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 59d184118461..28fe22be7e4c 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 900db60f42cc..d2f6cbff144f 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 6032523e1fdf..db50de6a3297 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 147ae4eee69d..f44ca279a821 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 8b241ae57597..52ebe2003374 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 79e91644ecb2..fd2a7667b787 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index d1e0e89ba0db..737dd439a9af 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index b65a79ce706e..956bb43a35bc 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index e4d1ebf5c601..579099cb13ee 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index bc598ece7aba..f14f71319ded 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 82b056b5c7dd..64ec16af1bdb 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 92d41a40276c..9b5b82062ddf 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 37adff00332f..2ded4dedd357 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 7ac6639aad67..0f3ab191752e 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index deff5d56652a..fc0b56de966d 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 21e8fcfcc2c2..5f6e9e5dd1ce 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 939a970d24ee..6a3dd0aa1f6e 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 470d64270fdf..bb21f92cf021 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 8380516e3524..fb6324ea300c 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index d7882750db5b..b21a1a2fec33 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index d6d3dcd561de..a8022833732d 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index a86f65d1a7f4..240dc465751a 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "deferredNextVersion": "8.4.0-alpha.2" + } } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index c71dcce29024..1eccc59b2e48 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index e2d7ff55c38b..f80d162d8799 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 02fc37d2a22e..6529ed514ecc 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 05372f1e0852..1a90a3bf5e5a 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index e53478b000a4..69118b2dbea9 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 0a95bad78f08..34f3ab17621b 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index a90fa54db1e2..36b2118cc726 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index c7e76c8170a7..725ae9d7ea0c 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 418437f7fffb..9be8ea0b84fc 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index ea77fec881ae..97ba5f8b0c7c 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 8a2f31e3b51c..cbe9a2f2fac4 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index f77c1e12be27..a3c4e0d8e9ba 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 3e06cfcc60e9..ac7c66dfac72 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index bf346a32ca38..444c0ea8ebe3 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.4.0-alpha.1", + "version": "8.4.0-alpha.2", "description": "Storybook web-components renderer", "keywords": [ "lit", From fc01f691fe9090b8297bb824dca4bb13115a2f10 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 30 Sep 2024 10:50:28 +0200 Subject: [PATCH 18/41] fix test run --- code/addons/test/src/node/vitest-manager.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index 5b6f136040bd..5ee155b56bcd 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -24,7 +24,6 @@ export class VitestManager { this.vitest = await createVitest('test', { watch: watchMode, passWithNoTests: true, - standalone: true, changed: watchMode, // TODO: // Do we want to enable Vite's default reporter? From 11042e89ecf72066bca431bc601c5d4251b3efd1 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 13:21:45 +0200 Subject: [PATCH 19/41] Testing Module functionality and stories --- code/addons/a11y/package.json | 2 +- code/addons/backgrounds/package.json | 2 +- code/addons/controls/package.json | 2 +- code/addons/jest/package.json | 2 +- code/addons/measure/package.json | 2 +- code/addons/onboarding/package.json | 2 +- code/addons/outline/package.json | 2 +- code/addons/test/package.json | 2 +- code/addons/themes/package.json | 2 +- code/addons/viewport/package.json | 2 +- code/core/package.json | 2 +- .../components/sidebar/SidebarBottom.tsx | 36 ++- .../sidebar/TestingModule.stories.tsx | 111 +++++++++ .../components/sidebar/TestingModule.tsx | 229 ++++++++---------- code/core/src/manager/globals/exports.ts | 4 + code/lib/blocks/package.json | 2 +- code/yarn.lock | 36 ++- 17 files changed, 285 insertions(+), 155 deletions(-) create mode 100644 code/core/src/manager/components/sidebar/TestingModule.stories.tsx diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index f95692592620..e4996d3c3fec 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -60,7 +60,7 @@ }, "devDependencies": { "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "@testing-library/react": "^14.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 21b2df490aec..58fc79dc52c6 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -60,7 +60,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 9b37806994af..0f4e1426c848 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -56,7 +56,7 @@ }, "devDependencies": { "@storybook/blocks": "workspace:*", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index a27279e22100..44907e89557b 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -58,7 +58,7 @@ "upath": "^2.0.1" }, "devDependencies": { - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "react": "^18.2.0", "react-dom": "^18.2.0", "react-resize-detector": "^7.1.2", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 8750536d0b59..5622fb9277ed 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -71,7 +71,7 @@ "tiny-invariant": "^1.3.1" }, "devDependencies": { - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 6b644683aa20..c29d39c0b598 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -49,7 +49,7 @@ }, "devDependencies": { "@radix-ui/react-dialog": "^1.0.5", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "@storybook/react": "workspace:*", "framer-motion": "^11.0.3", "react": "^18.2.0", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index f072d5a8a685..a800dd81b0c5 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -61,7 +61,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 12681a702cc1..638fb810f9dc 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -71,7 +71,7 @@ }, "dependencies": { "@storybook/csf": "^0.1.11", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "chalk": "^5.3.0" }, "devDependencies": { diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index ade8a3e6326b..3a5061536b54 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -59,7 +59,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "typescript": "^5.3.2" }, "peerDependencies": { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index a9f2b5e949f6..b5ba38adce72 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -55,7 +55,7 @@ }, "devDependencies": { "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" diff --git a/code/core/package.json b/code/core/package.json index 5aa725236372..43a390525845 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -313,7 +313,7 @@ "@radix-ui/react-slot": "^1.0.2", "@storybook/docs-mdx": "4.0.0-next.1", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "@tanstack/react-virtual": "^3.3.0", "@testing-library/react": "^14.0.0", "@types/compression": "^1.7.0", diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 6ae3b76a5551..bdd7bed3c07c 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -5,7 +5,9 @@ import { ContrastIcon, PointerHandIcon } from '@storybook/icons'; import type { API_FilterFunction, API_StatusUpdate, API_StatusValue } from '@storybook/types'; import { + TESTING_MODULE_RUN_ALL_REQUEST, TESTING_MODULE_RUN_PROGRESS_RESPONSE, + TESTING_MODULE_WATCH_MODE_REQUEST, type TestingModuleRunResponsePayload, } from '@storybook/core/core-events'; import { @@ -96,6 +98,18 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { e.stopPropagation(); setErrorsActive((active) => !active); }, []); + const onRunTests = useCallback( + (providerId?: string) => { + api.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId }); + }, + [api] + ); + const onSetWatchMode = useCallback( + (providerId: string, watchMode: boolean) => { + api.emit(TESTING_MODULE_WATCH_MODE_REQUEST, { providerId, watchMode }); + }, + [api] + ); useEffect(() => { const filter = getFilter(hasWarnings && warningsActive, hasErrors && errorsActive); @@ -104,17 +118,19 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { const testProviders = [ { - providerId: 'component-tests', + id: 'component-tests', title: 'Component tests', description: 'Ran 2 seconds ago', icon: , + runnable: true, watchable: true, }, { - providerId: 'visual-tests', + id: 'visual-tests', title: 'Visual tests', description: 'Not run', icon: , + runnable: true, }, ]; @@ -125,9 +141,17 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { return ( ); @@ -140,7 +164,7 @@ export const SidebarBottom = () => { useEffect(() => { api.getChannel()?.on(TESTING_MODULE_RUN_PROGRESS_RESPONSE, (data) => { if ('payload' in data) { - // console.log('progress', data); + console.log('progress', data); // TODO clear statuses api.experimental_updateStatus('figure-out-id', processTestReport(data.payload)); } else { diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx new file mode 100644 index 000000000000..f3878f7f6f82 --- /dev/null +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -0,0 +1,111 @@ +import React from 'react'; + +import { ContrastIcon, MarkupIcon, PointerHandIcon } from '@storybook/icons'; +import type { Meta, StoryObj } from '@storybook/react'; +import { fn, userEvent } from '@storybook/test'; + +import { TestingModule } from './TestingModule'; + +const testProviders = [ + { + id: 'component-tests', + title: 'Component tests', + description: 'Ran 2 seconds ago', + icon: , + runnable: true, + watchable: true, + }, + { + id: 'visual-tests', + title: 'Visual tests', + description: 'Not run', + icon: , + runnable: true, + }, + { + id: 'linting', + title: 'Linting', + description: 'Watching for changes', + icon: , + watching: true, + }, +]; + +const meta = { + component: TestingModule, + args: { + testProviders, + errorCount: 0, + warningCount: 0, + errorsActive: false, + warningsActive: false, + toggleErrors: fn(), + toggleWarnings: fn(), + onRunTests: fn(), + onSetWatchMode: fn(), + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Collapsed: Story = { + play: async ({ canvas }) => { + const button = await canvas.findByRole('button', { name: /Collapse/ }); + await userEvent.click(button); + }, +}; + +export const Statuses: Story = { + args: { + errorCount: 14, + warningCount: 42, + }, +}; + +export const ErrorsActive: Story = { + args: { + ...Statuses.args, + errorsActive: true, + }, +}; + +export const WarningsActive: Story = { + args: { + ...Statuses.args, + warningsActive: true, + }, +}; + +export const BothActive: Story = { + args: { + ...Statuses.args, + errorsActive: true, + warningsActive: true, + }, +}; + +export const CollapsedStatuses: Story = { + args: Statuses.args, + play: Collapsed.play, +}; + +export const Running: Story = { + args: { + testProviders: testProviders.map((tp) => ({ ...tp, running: true })), + }, +}; + +export const CollapsedRunning: Story = { + args: Running.args, + play: Collapsed.play, +}; + +export const Watching: Story = { + args: { + testProviders: testProviders.map((tp) => ({ ...tp, watching: true })), + }, +}; diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 60eb0b448ff6..299db98de582 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -1,13 +1,20 @@ -import React, { type SyntheticEvent, useEffect, useRef, useState } from 'react'; +import React, { type SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react'; import { Button } from '@storybook/core/components'; -import { styled } from '@storybook/core/theming'; - +import { keyframes, styled } from '@storybook/core/theming'; import { - TESTING_MODULE_RUN_ALL_REQUEST, - TESTING_MODULE_WATCH_MODE_REQUEST, -} from '@storybook/core/core-events'; -import { type API } from '@storybook/core/manager-api'; + ChevronSmallUpIcon, + EyeCloseIcon, + EyeIcon, + PlayAllHollowIcon, + PlayHollowIcon, + StopAltHollowIcon, +} from '@storybook/icons'; + +const spin = keyframes({ + from: { transform: 'rotate(0deg)' }, + to: { transform: 'rotate(360deg)' }, +}); const Position = styled.div({ bottom: 0, @@ -19,23 +26,42 @@ const Position = styled.div({ width: '100%', }); -const Glow = styled.div(({ theme }) => ({ +const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ + position: 'relative', color: theme.color.defaultText, fontSize: theme.typography.size.s2, lineHeight: '20px', width: '100%', overflow: 'hidden', - borderRadius: theme.appBorderRadius, + borderRadius: theme.appBorderRadius + 1, backgroundColor: 'rgb(226 232 240)', padding: '1px', boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '0.15s', + + '&:after': { + content: '""', + display: active ? 'block' : 'none', + position: 'absolute', + left: '50%', + top: '50%', + marginLeft: 'calc(max(100vw, 100vh) * -0.5)', + marginTop: 'calc(max(100vw, 100vh) * -0.5)', + height: 'max(100vw, 100vh)', + width: 'max(100vw, 100vh)', + animation: `${spin} 3s linear infinite`, + background: + 'conic-gradient(rgba(255, 71, 133, 0.2) 0deg, rgb(255, 71, 133) 0deg, transparent 160deg)', + opacity: '1', + willChange: 'auto', + }, })); const Card = styled.div(({ theme }) => ({ - zIndex: 10, + position: 'relative', + zIndex: 1, borderRadius: theme.appBorderRadius, backgroundColor: '#fff', @@ -75,11 +101,20 @@ const CollapseToggle = styled(Button)({ willChange: 'auto', }); -const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>(({ status, theme }) => ({ - background: { negative: theme.background.negative, warning: theme.background.warning }[status], - color: { negative: theme.color.negativeText, warning: theme.color.warningText }[status], - minWidth: 28, -})); +const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>( + { minWidth: 28 }, + ({ active, status, theme }) => + !active && { + background: { + negative: theme.background.negative, + warning: theme.background.warning, + }[status], + color: { + negative: theme.color.negativeText, + warning: theme.color.warningText, + }[status], + } +); const TestProvider = styled.div({ display: 'flex', @@ -117,13 +152,15 @@ const Icon = styled.div(({ theme }) => ({ })); interface TestingModuleProps { - api: API; testProviders: { - providerId: string; + id: string; icon: React.ReactNode; title: string; description: string; + runnable?: boolean; + running?: boolean; watchable?: boolean; + watching?: boolean; }[]; errorCount: number; warningCount: number; @@ -131,10 +168,11 @@ interface TestingModuleProps { warningsActive: boolean; toggleErrors: (e: SyntheticEvent) => void; toggleWarnings: (e: SyntheticEvent) => void; + onRunTests: (providerId?: string) => void; + onSetWatchMode: (providerId: string, watchMode: boolean) => void; } export const TestingModule = ({ - api, testProviders, errorCount, warningCount, @@ -142,147 +180,90 @@ export const TestingModule = ({ warningsActive, toggleErrors, toggleWarnings, + onRunTests, + onSetWatchMode, }: TestingModuleProps) => { const contentRef = useRef(null); const [collapsed, setCollapsed] = useState(false); const [maxHeight, setMaxHeight] = useState(500); - const [watchMode, setWatchMode] = useState(false); useEffect(() => { setMaxHeight(contentRef.current?.offsetHeight || 500); }, []); - const runAllTests = (e: SyntheticEvent) => { - e.stopPropagation(); - }; + const runAllTests = useCallback( + (e: SyntheticEvent) => { + e.stopPropagation(); + onRunTests(); + }, + [onRunTests] + ); const toggleCollapsed = () => { setMaxHeight(contentRef.current?.offsetHeight || 500); setCollapsed(!collapsed); }; + const active = testProviders.some((tp) => tp.running); + return ( - + - {testProviders.map(({ providerId, icon, title, description, watchable }) => ( - - - {icon} -
- {title} - {description} -
- - - {watchable && ( - - )} - - - - ))} + {watching ? : } + + )} + {runnable && ( + + )} + + + ) + )} - -
+ - - - + /> {errorCount > 0 && ( @@ -311,10 +292,10 @@ export const TestingModule = ({ {warningCount < 100 ? warningCount : '99+'} )} -
+ - + ); }; diff --git a/code/core/src/manager/globals/exports.ts b/code/core/src/manager/globals/exports.ts index b7cac2e8a3c6..c01fdf8415a9 100644 --- a/code/core/src/manager/globals/exports.ts +++ b/code/core/src/manager/globals/exports.ts @@ -214,7 +214,9 @@ export default { 'PhotoIcon', 'PinAltIcon', 'PinIcon', + 'PlayAllHollowIcon', 'PlayBackIcon', + 'PlayHollowIcon', 'PlayIcon', 'PlayNextIcon', 'PlusIcon', @@ -235,6 +237,7 @@ export default { 'RequestChangeIcon', 'RewindIcon', 'RulerIcon', + 'SaveIcon', 'SearchIcon', 'ShareAltIcon', 'ShareIcon', @@ -252,6 +255,7 @@ export default { 'StatusPassIcon', 'StatusWarnIcon', 'StickerIcon', + 'StopAltHollowIcon', 'StopAltIcon', 'StopIcon', 'StorybookIcon', diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index f14f71319ded..ceff5a352110 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -45,7 +45,7 @@ "dependencies": { "@storybook/csf": "^0.1.11", "@storybook/global": "^5.0.0", - "@storybook/icons": "^1.2.10", + "@storybook/icons": "^1.2.12", "color-convert": "^2.0.1", "dequal": "^2.0.2", "es-toolkit": "^1.21.0", diff --git a/code/yarn.lock b/code/yarn.lock index 13752d62f233..8b7a3e49c016 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5335,7 +5335,7 @@ __metadata: dependencies: "@storybook/addon-highlight": "workspace:*" "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" "@testing-library/react": "npm:^14.0.0" axe-core: "npm:^4.2.0" react: "npm:^18.2.0" @@ -5373,7 +5373,7 @@ __metadata: resolution: "@storybook/addon-backgrounds@workspace:addons/backgrounds" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" memoizerific: "npm:^1.11.3" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -5390,7 +5390,7 @@ __metadata: dependencies: "@storybook/blocks": "workspace:*" "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" dequal: "npm:^2.0.2" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -5506,7 +5506,7 @@ __metadata: resolution: "@storybook/addon-jest@workspace:addons/jest" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" react-resize-detector: "npm:^7.1.2" @@ -5553,7 +5553,7 @@ __metadata: resolution: "@storybook/addon-measure@workspace:addons/measure" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" tiny-invariant: "npm:^1.3.1" @@ -5568,7 +5568,7 @@ __metadata: resolution: "@storybook/addon-onboarding@workspace:addons/onboarding" dependencies: "@radix-ui/react-dialog": "npm:^1.0.5" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" "@storybook/react": "workspace:*" framer-motion: "npm:^11.0.3" react: "npm:^18.2.0" @@ -5587,7 +5587,7 @@ __metadata: resolution: "@storybook/addon-outline@workspace:addons/outline" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" ts-dedent: "npm:^2.0.0" @@ -5619,7 +5619,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-themes@workspace:addons/themes" dependencies: - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" peerDependencies: @@ -5644,7 +5644,7 @@ __metadata: resolution: "@storybook/addon-viewport@workspace:addons/viewport" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" memoizerific: "npm:^1.11.3" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -5751,7 +5751,7 @@ __metadata: "@storybook/addon-actions": "workspace:*" "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" "@storybook/react": "workspace:*" "@storybook/test": "workspace:*" "@types/color-convert": "npm:^2.0.0" @@ -6022,7 +6022,7 @@ __metadata: "@storybook/csf": "npm:^0.1.11" "@storybook/docs-mdx": "npm:4.0.0-next.1" "@storybook/global": "npm:^5.0.0" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" "@tanstack/react-virtual": "npm:^3.3.0" "@testing-library/react": "npm:^14.0.0" "@types/compression": "npm:^1.7.0" @@ -6235,7 +6235,7 @@ __metadata: resolution: "@storybook/experimental-addon-test@workspace:addons/test" dependencies: "@storybook/csf": "npm:^0.1.11" - "@storybook/icons": "npm:^1.2.10" + "@storybook/icons": "npm:^1.2.12" "@types/semver": "npm:^7" "@vitest/browser": "npm:^2.1.1" "@vitest/runner": "npm:^2.1.1" @@ -6339,7 +6339,17 @@ __metadata: languageName: unknown linkType: soft -"@storybook/icons@npm:^1.2.10, @storybook/icons@npm:^1.2.5": +"@storybook/icons@npm:^1.2.12": + version: 1.2.12 + resolution: "@storybook/icons@npm:1.2.12" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 10c0/97f6a7b7841fb5a0d1c8a30c36173469e7b0814a674c8103c7c0fd8803f0f7c2a778545af864012d40883195a533534dbc98541deac2bafe31e6a3fe37fdfc66 + languageName: node + linkType: hard + +"@storybook/icons@npm:^1.2.5": version: 1.2.10 resolution: "@storybook/icons@npm:1.2.10" peerDependencies: From 628e7302fbfed5ea887612e8e208d9763a78d02b Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 16:24:10 +0200 Subject: [PATCH 20/41] Upgrade es-toolkit to fix throttle --- code/core/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/package.json | 2 +- code/renderers/react/package.json | 2 +- code/yarn.lock | 20 ++++++++++---------- scripts/package.json | 2 +- 8 files changed, 17 insertions(+), 17 deletions(-) diff --git a/code/core/package.json b/code/core/package.json index 43a390525845..0e84e3d9a37a 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -360,7 +360,7 @@ "diff": "^5.2.0", "downshift": "^9.0.4", "ejs": "^3.1.10", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0", "esbuild-plugin-alias": "^0.2.1", "execa": "^8.0.1", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index ceff5a352110..54b5c0e7d421 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/icons": "^1.2.12", "color-convert": "^2.0.1", "dequal": "^2.0.2", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "markdown-to-jsx": "^7.4.5", "memoizerific": "^1.11.3", "polished": "^4.2.2", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 0f3ab191752e..2c6ba312e285 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -61,7 +61,7 @@ "@storybook/csf": "^0.1.11", "@types/cross-spawn": "^6.0.2", "cross-spawn": "^7.0.3", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "globby": "^14.0.1", "jscodeshift": "^0.15.1", "prettier": "^3.1.1", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index b21a1a2fec33..d85849b7ea4e 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ }, "dependencies": { "@storybook/csf": "^0.1.11", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "estraverse": "^5.2.0", "prettier": "^3.1.1" }, diff --git a/code/package.json b/code/package.json index 240dc465751a..8bed0733fa94 100644 --- a/code/package.json +++ b/code/package.json @@ -185,7 +185,7 @@ "create-storybook": "workspace:*", "cross-env": "^7.0.3", "danger": "^12.3.3", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0", "esbuild-loader": "^4.2.0", "esbuild-plugin-alias": "^0.2.1", diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 97ba5f8b0c7c..1a71e6fd4315 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -89,7 +89,7 @@ "@types/semver": "^7.3.4", "@types/util-deprecate": "^1.0.0", "babel-plugin-react-docgen": "^4.2.1", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "expect-type": "^0.15.0", "require-from-string": "^2.0.2" }, diff --git a/code/yarn.lock b/code/yarn.lock index 8b7a3e49c016..6ec7048a23d9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5757,7 +5757,7 @@ __metadata: "@types/color-convert": "npm:^2.0.0" color-convert: "npm:^2.0.1" dequal: "npm:^2.0.2" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" markdown-to-jsx: "npm:^7.4.5" memoizerific: "npm:^1.11.3" polished: "npm:^4.2.2" @@ -5930,7 +5930,7 @@ __metadata: ansi-regex: "npm:^6.0.1" camelcase: "npm:^8.0.0" cross-spawn: "npm:^7.0.3" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" globby: "npm:^14.0.1" jscodeshift: "npm:^0.15.1" mdast-util-mdx-jsx: "npm:^3.0.0" @@ -6072,7 +6072,7 @@ __metadata: diff: "npm:^5.2.0" downshift: "npm:^9.0.4" ejs: "npm:^3.1.10" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0" esbuild-plugin-alias: "npm:^0.2.1" esbuild-register: "npm:^3.5.0" @@ -6779,7 +6779,7 @@ __metadata: acorn-jsx: "npm:^5.3.1" acorn-walk: "npm:^7.2.0" babel-plugin-react-docgen: "npm:^4.2.1" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" escodegen: "npm:^2.1.0" expect-type: "npm:^0.15.0" html-tags: "npm:^3.1.0" @@ -6903,7 +6903,7 @@ __metadata: create-storybook: "workspace:*" cross-env: "npm:^7.0.3" danger: "npm:^12.3.3" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0" esbuild-loader: "npm:^4.2.0" esbuild-plugin-alias: "npm:^0.2.1" @@ -7005,7 +7005,7 @@ __metadata: resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: "@storybook/csf": "npm:^0.1.11" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" estraverse: "npm:^5.2.0" prettier: "npm:^3.1.1" typescript: "npm:^5.3.2" @@ -14161,10 +14161,10 @@ __metadata: languageName: node linkType: hard -"es-toolkit@npm:^1.21.0": - version: 1.21.0 - resolution: "es-toolkit@npm:1.21.0" - checksum: 10c0/894a63f8ce5b2e5c1be242c8e8eace6364ea1212d01cdf89594d2cc582c5e1574114ad2ee7022ad5206561c4d5170511d83b38853257249860e56178768854ea +"es-toolkit@npm:^1.22.0": + version: 1.22.0 + resolution: "es-toolkit@npm:1.22.0" + checksum: 10c0/a167789f727437d435071af74e22c0c4a5a557aa61a5013a1656d24b1c8636c88d6b74f12ad0c3966b74d3f56e432d8e8d1989e5c10c10fda8eba5752783af18 languageName: node linkType: hard diff --git a/scripts/package.json b/scripts/package.json index 456ba6c06038..ff66a0feab87 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -107,7 +107,7 @@ "detect-port": "^1.6.1", "ejs": "^3.1.10", "ejs-lint": "^2.0.0", - "es-toolkit": "^1.21.0", + "es-toolkit": "^1.22.0", "esbuild": "^0.23.0", "esbuild-plugin-alias": "^0.2.1", "eslint": "^8.57.0", From dc75e9aa13f51627fd2f10ff5d28ca50fd126a11 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 16:31:32 +0200 Subject: [PATCH 21/41] Proper floating Testing Module style and behavior --- .../manager/components/sidebar/Sidebar.tsx | 34 +--- .../components/sidebar/SidebarBottom.tsx | 74 +++++-- .../components/sidebar/TestingModule.tsx | 182 ++++++++---------- 3 files changed, 149 insertions(+), 141 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index d5c58565bb40..7336f720be0b 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -1,16 +1,10 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; -import { Button, ScrollArea, Spaced } from '@storybook/core/components'; +import { ScrollArea, Spaced } from '@storybook/core/components'; import { styled } from '@storybook/core/theming'; import type { API_LoadedRefData, Addon_SidebarTopType } from '@storybook/core/types'; -import { - TESTING_MODULE_RUN_ALL_REQUEST, - TESTING_MODULE_WATCH_MODE_REQUEST, - type TestingModuleRunAllRequestPayload, - type TestingModuleWatchModeRequestPayload, -} from '@storybook/core/core-events'; -import { type State, useStorybookApi } from '@storybook/core/manager-api'; +import { type State } from '@storybook/core/manager-api'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; import { Explorer } from './Explorer'; @@ -19,7 +13,6 @@ import { Heading } from './Heading'; import { Search } from './Search'; import { SearchResults } from './SearchResults'; import { SidebarBottom } from './SidebarBottom'; -import { TEST_PROVIDER_ID } from './Tree'; import type { CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; @@ -51,17 +44,6 @@ const Top = styled(Spaced)({ flex: 1, }); -const Bottom = styled.div(({ theme }) => ({ - padding: theme.layoutMargin / 2, - display: 'flex', - flexWrap: 'wrap', - gap: theme.layoutMargin / 2, - - '&:empty': { - display: 'none', - }, -})); - const Swap = React.memo(function Swap({ children, condition, @@ -189,12 +171,12 @@ export const Sidebar = React.memo(function Sidebar({ )} + {isLoading ? null : ( +
+ +
+ )} - {isLoading ? null : ( - - - - )} ); }); diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index bdd7bed3c07c..47b218edd3dc 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -1,4 +1,4 @@ -import React, { type SyntheticEvent, useCallback, useEffect } from 'react'; +import React, { type SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react'; import { styled } from '@storybook/core/theming'; import { ContrastIcon, PointerHandIcon } from '@storybook/icons'; @@ -17,6 +17,8 @@ import { useStorybookState, } from '@storybook/core/manager-api'; +import { throttle } from 'es-toolkit'; + import { TestingModule } from './TestingModule'; const filterNone: API_FilterFunction = () => true; @@ -43,10 +45,25 @@ const getFilter = (warningsActive = false, errorsActive = false) => { }; const Wrapper = styled.div({ + transition: 'height 250ms', +}); + +const Content = styled.div(({ theme }) => ({ + boxShadow: `0 0 20px 20px ${theme.background.app}`, + padding: '0 12px', + position: 'absolute', + bottom: 12, + left: 0, + right: 0, width: '100%', display: 'flex', + flexDirection: 'column', gap: 6, -}); + + '&:empty': { + display: 'none', + }, +})); interface SidebarBottomProps { api: API; @@ -78,8 +95,27 @@ function processTestReport(payload: TestingModuleRunResponsePayload) { } export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { - const [warningsActive, setWarningsActive] = React.useState(false); - const [errorsActive, setErrorsActive] = React.useState(false); + const [warningsActive, setWarningsActive] = useState(false); + const [errorsActive, setErrorsActive] = useState(false); + const [contentHeight, setContentHeight] = useState(0); + + const resizeObserverCallback = useMemo( + () => + throttle( + () => setContentHeight(document.getElementById('sidebar-bottom')?.clientHeight || 0), + 250 + ), + [] + ); + + useEffect(() => { + const wrapper = document.getElementById('sidebar-bottom'); + if (wrapper) { + const resizeObserver = new ResizeObserver(resizeObserverCallback); + resizeObserver.observe(wrapper); + return () => resizeObserver.disconnect(); + } + }, [resizeObserverCallback]); const warnings = Object.values(status).filter((statusByAddonId) => Object.values(statusByAddonId).some((value) => value?.status === 'warn') @@ -139,20 +175,22 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { } return ( - - + + + + ); }; diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 299db98de582..e06d3881297e 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -16,16 +16,6 @@ const spin = keyframes({ to: { transform: 'rotate(360deg)' }, }); -const Position = styled.div({ - bottom: 0, - zIndex: 20, - paddingLeft: 12, - paddingRight: 12, - paddingTop: 12, - paddingBottom: 12, - width: '100%', -}); - const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ position: 'relative', color: theme.color.defaultText, @@ -207,95 +197,93 @@ export const TestingModule = ({ const active = testProviders.some((tp) => tp.running); return ( - - - - - - {testProviders.map( - ({ id, icon, title, description, runnable, running, watchable, watching }) => ( - - - {icon} -
- {title} - {description} -
- - - {watchable && ( - - )} - {runnable && ( - - )} - - - ) - )} - - + + + + + {testProviders.map( + ({ id, icon, title, description, runnable, running, watchable, watching }) => ( + + + {icon} +
+ {title} + {description} +
+ + + {watchable && ( + + )} + {runnable && ( + + )} + + + ) + )} + + + + + + + + + - - - - 0 && ( + - - - - {errorCount > 0 && ( - - {errorCount < 100 ? errorCount : '99+'} - - )} - {warningCount > 0 && ( - - {warningCount < 100 ? warningCount : '99+'} - - )} - - - - - + {errorCount < 100 ? errorCount : '99+'} + + )} + {warningCount > 0 && ( + + {warningCount < 100 ? warningCount : '99+'} + + )} + + + + ); }; From 641799c8b8a37ba1f5cdb6978d0f99b336e30aa1 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 16:31:32 +0200 Subject: [PATCH 22/41] Proper floating Testing Module style and behavior --- .../components/sidebar/SidebarBottom.tsx | 20 +++++++------------ .../components/sidebar/TestingModule.tsx | 4 ++-- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 47b218edd3dc..180253682599 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -48,22 +48,20 @@ const Wrapper = styled.div({ transition: 'height 250ms', }); -const Content = styled.div(({ theme }) => ({ - boxShadow: `0 0 20px 20px ${theme.background.app}`, - padding: '0 12px', +const Content = styled.div({ position: 'absolute', - bottom: 12, + bottom: 0, left: 0, right: 0, - width: '100%', + padding: 12, display: 'flex', flexDirection: 'column', - gap: 6, + gap: 12, '&:empty': { display: 'none', }, -})); +}); interface SidebarBottomProps { api: API; @@ -100,18 +98,14 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { const [contentHeight, setContentHeight] = useState(0); const resizeObserverCallback = useMemo( - () => - throttle( - () => setContentHeight(document.getElementById('sidebar-bottom')?.clientHeight || 0), - 250 - ), + () => throttle((element) => setContentHeight(element.clientHeight || 0), 250), [] ); useEffect(() => { const wrapper = document.getElementById('sidebar-bottom'); if (wrapper) { - const resizeObserver = new ResizeObserver(resizeObserverCallback); + const resizeObserver = new ResizeObserver(() => resizeObserverCallback(wrapper)); resizeObserver.observe(wrapper); return () => resizeObserver.disconnect(); } diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index e06d3881297e..a1d16b4d9a30 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -22,11 +22,11 @@ const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ fontSize: theme.typography.size.s2, lineHeight: '20px', width: '100%', + padding: 1, overflow: 'hidden', borderRadius: theme.appBorderRadius + 1, backgroundColor: 'rgb(226 232 240)', - padding: '1px', - boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', + boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 15px ${theme.background.app}`, transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '0.15s', From 31608b4f7ce208dca6b4ccd84b43691b61ea495e Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 18:59:33 +0200 Subject: [PATCH 23/41] Also show collapse toggle on focus --- code/core/src/manager/components/sidebar/TestingModule.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index a1d16b4d9a30..15b8d6ad6eba 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -44,7 +44,7 @@ const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ animation: `${spin} 3s linear infinite`, background: 'conic-gradient(rgba(255, 71, 133, 0.2) 0deg, rgb(255, 71, 133) 0deg, transparent 160deg)', - opacity: '1', + opacity: 1, willChange: 'auto', }, })); @@ -89,6 +89,9 @@ const CollapseToggle = styled(Button)({ opacity: 0, transition: 'opacity 250ms', willChange: 'auto', + '&:focus, &:hover': { + opacity: 1, + }, }); const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>( From 8dd358509caa21fed0495b57d113655827d6c418 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 21:12:02 +0200 Subject: [PATCH 24/41] Handle stopPropagation internally --- .../components/sidebar/SidebarBottom.tsx | 23 ++++++------- .../sidebar/TestingModule.stories.tsx | 6 ++-- .../components/sidebar/TestingModule.tsx | 32 +++++++++++-------- 3 files changed, 32 insertions(+), 29 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 180253682599..8b012d4f4caf 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -48,7 +48,7 @@ const Wrapper = styled.div({ transition: 'height 250ms', }); -const Content = styled.div({ +const Content = styled.div(({ theme }) => ({ position: 'absolute', bottom: 0, left: 0, @@ -61,7 +61,12 @@ const Content = styled.div({ '&:empty': { display: 'none', }, -}); + + '--sb-sidebar-bottom-card-background': theme.background.content, + '--sb-sidebar-bottom-card-border': `1px solid ${theme.appBorderColor}`, + '--sb-sidebar-bottom-card-radius': `${theme.appBorderRadius + 1}px`, + '--sb-sidebar-bottom-card-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, +})); interface SidebarBottomProps { api: API; @@ -120,14 +125,6 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { const hasWarnings = warnings.length > 0; const hasErrors = errors.length > 0; - const toggleWarnings = useCallback((e: SyntheticEvent) => { - e.stopPropagation(); - setWarningsActive((active) => !active); - }, []); - const toggleErrors = useCallback((e: SyntheticEvent) => { - e.stopPropagation(); - setErrorsActive((active) => !active); - }, []); const onRunTests = useCallback( (providerId?: string) => { api.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId }); @@ -175,11 +172,11 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { {...{ testProviders, errorCount: errors.length, - warningCount: warnings.length, errorsActive, + setErrorsActive, + warningCount: warnings.length, warningsActive, - toggleErrors, - toggleWarnings, + setWarningsActive, onRunTests, onSetWatchMode, }} diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index f3878f7f6f82..5ee20c07b48e 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -36,11 +36,11 @@ const meta = { args: { testProviders, errorCount: 0, - warningCount: 0, errorsActive: false, + setErrorsActive: fn(), + warningCount: 0, warningsActive: false, - toggleErrors: fn(), - toggleWarnings: fn(), + setWarningsActive: fn(), onRunTests: fn(), onSetWatchMode: fn(), }, diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 15b8d6ad6eba..44ff70c00f3c 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -11,6 +11,8 @@ import { StopAltHollowIcon, } from '@storybook/icons'; +import { transparentize } from 'polished'; + const spin = keyframes({ from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' }, @@ -26,7 +28,7 @@ const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ overflow: 'hidden', borderRadius: theme.appBorderRadius + 1, backgroundColor: 'rgb(226 232 240)', - boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 20px 15px ${theme.background.app}`, + boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '0.15s', @@ -130,13 +132,11 @@ const Details = styled.div({ flexDirection: 'column', }); -const Title = styled.div({ - textWrap: 'nowrap', -}); +const Title = styled.div({}); const Description = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s1, - color: theme.barTextColor, + color: transparentize(0.25, theme.color.defaultText), })); const Icon = styled.div(({ theme }) => ({ @@ -156,11 +156,11 @@ interface TestingModuleProps { watching?: boolean; }[]; errorCount: number; - warningCount: number; errorsActive: boolean; + setErrorsActive: (active: boolean) => void; + warningCount: number; warningsActive: boolean; - toggleErrors: (e: SyntheticEvent) => void; - toggleWarnings: (e: SyntheticEvent) => void; + setWarningsActive: (active: boolean) => void; onRunTests: (providerId?: string) => void; onSetWatchMode: (providerId: string, watchMode: boolean) => void; } @@ -168,11 +168,11 @@ interface TestingModuleProps { export const TestingModule = ({ testProviders, errorCount, - warningCount, errorsActive, + setErrorsActive, + warningCount, warningsActive, - toggleErrors, - toggleWarnings, + setWarningsActive, onRunTests, onSetWatchMode, }: TestingModuleProps) => { @@ -265,7 +265,10 @@ export const TestingModule = ({ padding={errorCount < 10 ? 'medium' : 'small'} status="negative" active={errorsActive} - onClick={toggleErrors} + onClick={(e: SyntheticEvent) => { + e.stopPropagation(); + setErrorsActive(!errorsActive); + }} aria-label="Show errors" > {errorCount < 100 ? errorCount : '99+'} @@ -278,7 +281,10 @@ export const TestingModule = ({ padding={warningCount < 10 ? 'medium' : 'small'} status="warning" active={warningsActive} - onClick={toggleWarnings} + onClick={(e: SyntheticEvent) => { + e.stopPropagation(); + setWarningsActive(!warningsActive); + }} aria-label="Show warnings" > {warningCount < 100 ? warningCount : '99+'} From 13fa858730d2a0dce53b64089622d621e30260ff Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 21:12:32 +0200 Subject: [PATCH 25/41] Show notifications in sidebar --- .../src/manager/components/layout/Layout.tsx | 10 ++++- .../NotificationItem.stories.tsx | 2 +- .../notifications/NotificationItem.tsx | 14 ++++--- .../notifications/NotificationList.tsx | 39 +++++++++---------- .../components/sidebar/SidebarBottom.tsx | 2 + 5 files changed, 38 insertions(+), 29 deletions(-) diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx index 50e29ba18da1..df9d5b86d9cb 100644 --- a/code/core/src/manager/components/layout/Layout.tsx +++ b/code/core/src/manager/components/layout/Layout.tsx @@ -146,7 +146,6 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s viewMode={managerLayoutState.viewMode} showPanel={showPanel} > - {showPages && {slots.slotPages}} {({ match }) => {slots.slotMain}} @@ -170,7 +169,14 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s )} {isMobile && ( - + <> + + + )} ); diff --git a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx index 1914a0fe7987..71622e8c93a0 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx @@ -23,7 +23,7 @@ const meta = { ), (Story) => ( -
+
), diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx index 75ae36129b76..b8b53475d5f6 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.tsx @@ -35,17 +35,18 @@ const Notification = styled.div<{ duration?: number }>( ({ theme }) => ({ position: 'relative', display: 'flex', - padding: 15, - width: 280, - borderRadius: 4, + border: `1px solid ${theme.appBorderColor}`, + padding: '12px 6px 12px 12px', + borderRadius: theme.appBorderRadius + 1, alignItems: 'center', animation: `${slideIn} 500ms`, background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)', - boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`, + boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, color: theme.color.inverseText, textDecoration: 'none', overflow: 'hidden', + zIndex: 1, }), ({ duration, theme }) => duration && { @@ -107,9 +108,8 @@ const NotificationTextWrapper = styled.div(({ theme }) => ({ const Headline = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({ height: '100%', - width: hasIcon ? 205 : 230, alignItems: 'center', - whiteSpace: 'nowrap', + whiteSpace: 'balance', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: theme.typography.size.s1, @@ -122,6 +122,7 @@ const SubHeadline = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s1 - 1, lineHeight: '14px', marginTop: 2, + whiteSpace: 'balance', })); const ItemContent: FC> = ({ @@ -154,6 +155,7 @@ const ItemContent: FC> = ({ }; const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({ + width: 28, alignSelf: 'center', marginTop: 0, color: theme.base === 'light' ? 'rgba(255,255,255,0.7)' : ' #999999', diff --git a/code/core/src/manager/components/notifications/NotificationList.tsx b/code/core/src/manager/components/notifications/NotificationList.tsx index a0c8fabd13c6..5826c5687fcc 100644 --- a/code/core/src/manager/components/notifications/NotificationList.tsx +++ b/code/core/src/manager/components/notifications/NotificationList.tsx @@ -2,11 +2,10 @@ import type { FC } from 'react'; import React from 'react'; import { styled } from '@storybook/core/theming'; -import type { CSSObject } from '@storybook/core/theming'; import type { State } from '@storybook/core/manager-api'; -import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; +import { useLayout } from '../layout/LayoutProvider'; import NotificationItem from './NotificationItem'; interface NotificationListProps { @@ -18,8 +17,9 @@ export const NotificationList: FC = ({ notifications, clearNotification, }) => { + const { isMobile } = useLayout(); return ( - + {notifications && notifications.map((notification) => ( = ({ ); }; -const List = styled.div<{ placement?: CSSObject }>({ - zIndex: 200, - position: 'fixed', - left: 20, - bottom: 60, - - [MEDIA_DESKTOP_BREAKPOINT]: { - bottom: 20, - }, - - '> * + *': { - marginTop: 10, - }, - - '&:empty': { - display: 'none', +const List = styled.div<{ isMobile?: boolean }>( + { + '> * + *': { + marginTop: 12, + }, + '&:empty': { + display: 'none', + }, }, -}); + ({ isMobile }) => + isMobile && { + zIndex: 200, + position: 'fixed', + bottom: 40, + margin: 20, + } +); diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 8b012d4f4caf..2da46b769a6c 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -19,6 +19,7 @@ import { import { throttle } from 'es-toolkit'; +import { Notifications } from '../../container/Notifications'; import { TestingModule } from './TestingModule'; const filterNone: API_FilterFunction = () => true; @@ -168,6 +169,7 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { return ( + Date: Mon, 30 Sep 2024 22:16:02 +0200 Subject: [PATCH 26/41] Dark mode fixes --- .../components/sidebar/TestingModule.tsx | 46 ++++++++++++------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 44ff70c00f3c..f666177ab6e7 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -27,7 +27,7 @@ const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ padding: 1, overflow: 'hidden', borderRadius: theme.appBorderRadius + 1, - backgroundColor: 'rgb(226 232 240)', + backgroundColor: theme.appBorderColor, boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', @@ -55,19 +55,19 @@ const Card = styled.div(({ theme }) => ({ position: 'relative', zIndex: 1, borderRadius: theme.appBorderRadius, - backgroundColor: '#fff', + backgroundColor: theme.background.content, '&:hover #testing-module-collapse-toggle': { opacity: 1, }, })); -const Collapsible = styled.div({ +const Collapsible = styled.div(({ theme }) => ({ overflow: 'hidden', transition: 'max-height 250ms', willChange: 'auto', - boxShadow: 'inset 0 -1px 0 #e5e7eb', -}); + boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`, +})); const Content = styled.div({ padding: '12px 6px', @@ -99,16 +99,27 @@ const CollapseToggle = styled(Button)({ const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>( { minWidth: 28 }, ({ active, status, theme }) => - !active && { - background: { - negative: theme.background.negative, - warning: theme.background.warning, - }[status], - color: { - negative: theme.color.negativeText, - warning: theme.color.warningText, - }[status], - } + !active && theme.base === 'light' + ? { + background: { + negative: theme.background.negative, + warning: theme.background.warning, + }[status], + color: { + negative: theme.color.negativeText, + warning: theme.color.warningText, + }[status], + } + : { + background: { + negative: `${theme.color.negative}22`, + warning: `${theme.color.warning}22`, + }[status], + color: { + negative: theme.color.negative, + warning: theme.color.warning, + }[status], + } ); const TestProvider = styled.div({ @@ -136,7 +147,7 @@ const Title = styled.div({}); const Description = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s1, - color: transparentize(0.25, theme.color.defaultText), + color: theme.barTextColor, })); const Icon = styled.div(({ theme }) => ({ @@ -219,9 +230,10 @@ export const TestingModule = ({ )} {runnable && ( From b19c8242b6d2aa2bd00941dcdb7e977a7818fdbf Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 22:40:14 +0200 Subject: [PATCH 27/41] Tweaks --- .../src/manager/components/sidebar/SidebarBottom.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 2da46b769a6c..2e8bb3470265 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -1,4 +1,4 @@ -import React, { type SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { styled } from '@storybook/core/theming'; import { ContrastIcon, PointerHandIcon } from '@storybook/icons'; @@ -63,10 +63,11 @@ const Content = styled.div(({ theme }) => ({ display: 'none', }, + // Integrators can use these to style their custom additions '--sb-sidebar-bottom-card-background': theme.background.content, - '--sb-sidebar-bottom-card-border': `1px solid ${theme.appBorderColor}`, - '--sb-sidebar-bottom-card-radius': `${theme.appBorderRadius + 1}px`, - '--sb-sidebar-bottom-card-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, + '--sb-sidebar-bottom-card-border-color': theme.appBorderColor, + '--sb-sidebar-bottom-card-border-radius': `${theme.appBorderRadius + 1}px`, + '--sb-sidebar-bottom-card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, })); interface SidebarBottomProps { From c3bb1b27e0707880172ad76d3df8650ee119fe29 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 23:26:42 +0200 Subject: [PATCH 28/41] Use actual registered test providers --- code/addons/test/src/manager.tsx | 2 + .../manager/components/sidebar/Sidebar.tsx | 10 ++++- .../components/sidebar/SidebarBottom.tsx | 40 +++++++------------ .../components/sidebar/TestingModule.tsx | 30 +++++--------- code/core/src/types/modules/addons.ts | 2 + 5 files changed, 37 insertions(+), 47 deletions(-) diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx index b7744659eff5..5c7b7ed6e131 100644 --- a/code/addons/test/src/manager.tsx +++ b/code/addons/test/src/manager.tsx @@ -13,5 +13,7 @@ addons.register(ADDON_ID, () => { icon: , title: 'Component tests', description: () => 'Not yet run', + runnable: true, + watchable: true, }); }); diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index 7336f720be0b..5567c15d7795 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -1,10 +1,14 @@ import React, { useMemo } from 'react'; -import { ScrollArea, Spaced } from '@storybook/core/components'; +import { Button, ScrollArea, Spaced } from '@storybook/core/components'; import { styled } from '@storybook/core/theming'; import type { API_LoadedRefData, Addon_SidebarTopType } from '@storybook/core/types'; -import { type State } from '@storybook/core/manager-api'; +import { + TESTING_MODULE_RUN_ALL_REQUEST, + type TestingModuleRunAllRequestPayload, +} from '@storybook/core/core-events'; +import { type State, useStorybookApi } from '@storybook/core/manager-api'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; import { Explorer } from './Explorer'; @@ -13,6 +17,7 @@ import { Heading } from './Heading'; import { Search } from './Search'; import { SearchResults } from './SearchResults'; import { SidebarBottom } from './SidebarBottom'; +import { TEST_PROVIDER_ID } from './Tree'; import type { CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; @@ -120,6 +125,7 @@ export const Sidebar = React.memo(function Sidebar({ const dataset = useCombination(index, indexError, previewInitialized, status, refs); const isLoading = !index && !indexError; const lastViewedProps = useLastViewed(selected); + const api = useStorybookApi(); return ( diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index 2e8bb3470265..fc91973b980e 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -1,8 +1,12 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { styled } from '@storybook/core/theming'; -import { ContrastIcon, PointerHandIcon } from '@storybook/icons'; -import type { API_FilterFunction, API_StatusUpdate, API_StatusValue } from '@storybook/types'; +import { + type API_FilterFunction, + type API_StatusUpdate, + type API_StatusValue, + Addon_TypesEnum, +} from '@storybook/core/types'; import { TESTING_MODULE_RUN_ALL_REQUEST, @@ -58,6 +62,8 @@ const Content = styled.div(({ theme }) => ({ display: 'flex', flexDirection: 'column', gap: 12, + color: theme.color.defaultText, + fontSize: theme.typography.size.s1, '&:empty': { display: 'none', @@ -65,16 +71,11 @@ const Content = styled.div(({ theme }) => ({ // Integrators can use these to style their custom additions '--sb-sidebar-bottom-card-background': theme.background.content, - '--sb-sidebar-bottom-card-border-color': theme.appBorderColor, + '--sb-sidebar-bottom-card-border': `1px solid ${theme.appBorderColor}`, '--sb-sidebar-bottom-card-border-radius': `${theme.appBorderRadius + 1}px`, '--sb-sidebar-bottom-card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, })); -interface SidebarBottomProps { - api: API; - status: State['status']; -} - const statusMap: Record = { failed: 'error', passed: 'success', @@ -99,6 +100,11 @@ function processTestReport(payload: TestingModuleRunResponsePayload) { return result; } +interface SidebarBottomProps { + api: API; + status: State['status']; +} + export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { const [warningsActive, setWarningsActive] = useState(false); const [errorsActive, setErrorsActive] = useState(false); @@ -145,23 +151,7 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { api.experimental_setFilter('sidebar-bottom-filter', filter); }, [api, hasWarnings, hasErrors, warningsActive, errorsActive]); - const testProviders = [ - { - id: 'component-tests', - title: 'Component tests', - description: 'Ran 2 seconds ago', - icon: , - runnable: true, - watchable: true, - }, - { - id: 'visual-tests', - title: 'Visual tests', - description: 'Not run', - icon: , - runnable: true, - }, - ]; + const testProviders = Object.values(api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER)); if (!hasWarnings && !hasErrors && !testProviders.length) { return null; diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index f666177ab6e7..88d15a2a8be6 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -4,14 +4,12 @@ import { Button } from '@storybook/core/components'; import { keyframes, styled } from '@storybook/core/theming'; import { ChevronSmallUpIcon, - EyeCloseIcon, EyeIcon, PlayAllHollowIcon, PlayHollowIcon, StopAltHollowIcon, } from '@storybook/icons'; - -import { transparentize } from 'polished'; +import type { Addon_TestProviderType } from '@storybook/types'; const spin = keyframes({ from: { transform: 'rotate(0deg)' }, @@ -20,15 +18,14 @@ const spin = keyframes({ const Outline = styled.div<{ active: boolean }>(({ theme, active }) => ({ position: 'relative', - color: theme.color.defaultText, - fontSize: theme.typography.size.s2, lineHeight: '20px', width: '100%', padding: 1, overflow: 'hidden', - borderRadius: theme.appBorderRadius + 1, - backgroundColor: theme.appBorderColor, - boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, + background: 'var(--sb-sidebar-bottom-card-background)', + border: 'var(--sb-sidebar-bottom-card-border)', + borderRadius: 'var(--sb-sidebar-bottom-card-border-radius)' as any, + boxShadow: 'var(--sb-sidebar-bottom-card-box-shadow)', transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '0.15s', @@ -143,7 +140,9 @@ const Details = styled.div({ flexDirection: 'column', }); -const Title = styled.div({}); +const Title = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s2, +})); const Description = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s1, @@ -156,16 +155,7 @@ const Icon = styled.div(({ theme }) => ({ })); interface TestingModuleProps { - testProviders: { - id: string; - icon: React.ReactNode; - title: string; - description: string; - runnable?: boolean; - running?: boolean; - watchable?: boolean; - watching?: boolean; - }[]; + testProviders: (Addon_TestProviderType & { running?: boolean; watching?: boolean })[]; errorCount: number; errorsActive: boolean; setErrorsActive: (active: boolean) => void; @@ -222,7 +212,7 @@ export const TestingModule = ({ {icon}
{title} - {description} + {description?.({})}
diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts index 5aa530064699..8099f88b941e 100644 --- a/code/core/src/types/modules/addons.ts +++ b/code/core/src/types/modules/addons.ts @@ -468,6 +468,8 @@ export interface Addon_TestProviderType { icon: ReactNode; title: string; description: FC; + runnable?: boolean; + watchable?: boolean; } type Addon_TypeBaseNames = Exclude< From 21d01be508e9c9ec9c4d2a106c1f6384fae92122 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Sep 2024 23:49:38 +0200 Subject: [PATCH 29/41] Handle empty list of test providers and fix story data --- .../sidebar/SidebarBottom.stories.tsx | 4 +- .../components/sidebar/SidebarBottom.tsx | 11 +-- .../sidebar/TestingModule.stories.tsx | 10 ++- .../components/sidebar/TestingModule.tsx | 67 ++++++++++++------- 4 files changed, 58 insertions(+), 34 deletions(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 498750fd82e0..25d5512e429e 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -6,8 +6,10 @@ export default { component: SidebarBottomBase, args: { api: { - experimental_setFilter: fn(), + clearNotification: fn(), emit: fn(), + experimental_setFilter: fn(), + getElements: fn(() => ({})), }, }, }; diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index fc91973b980e..b688e062a22a 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -23,7 +23,7 @@ import { import { throttle } from 'es-toolkit'; -import { Notifications } from '../../container/Notifications'; +import { NotificationList } from '../notifications/NotificationList'; import { TestingModule } from './TestingModule'; const filterNone: API_FilterFunction = () => true; @@ -102,10 +102,11 @@ function processTestReport(payload: TestingModuleRunResponsePayload) { interface SidebarBottomProps { api: API; + notifications: State['notifications']; status: State['status']; } -export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { +export const SidebarBottomBase = ({ api, notifications = [], status = {} }: SidebarBottomProps) => { const [warningsActive, setWarningsActive] = useState(false); const [errorsActive, setErrorsActive] = useState(false); const [contentHeight, setContentHeight] = useState(0); @@ -160,7 +161,7 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => { return ( - + { export const SidebarBottom = () => { const api = useStorybookApi(); - const { status } = useStorybookState(); + const { notifications, status } = useStorybookState(); useEffect(() => { api.getChannel()?.on(TESTING_MODULE_RUN_PROGRESS_RESPONSE, (data) => { @@ -195,5 +196,5 @@ export const SidebarBottom = () => { }); }, [api]); - return ; + return ; }; diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx index 5ee20c07b48e..d3a151f003cf 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { Addon_TypesEnum } from '@storybook/core/types'; import { ContrastIcon, MarkupIcon, PointerHandIcon } from '@storybook/icons'; import type { Meta, StoryObj } from '@storybook/react'; import { fn, userEvent } from '@storybook/test'; @@ -8,24 +9,27 @@ import { TestingModule } from './TestingModule'; const testProviders = [ { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, id: 'component-tests', title: 'Component tests', - description: 'Ran 2 seconds ago', + description: () => 'Ran 2 seconds ago', icon: , runnable: true, watchable: true, }, { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, id: 'visual-tests', title: 'Visual tests', - description: 'Not run', + description: () => 'Not run', icon: , runnable: true, }, { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, id: 'linting', title: 'Linting', - description: 'Watching for changes', + description: () => 'Watching for changes', icon: , watching: true, }, diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 88d15a2a8be6..a41b90d85915 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -73,15 +73,22 @@ const Content = styled.div({ gap: '12px', }); -const Bar = styled.div({ +const Bar = styled.div<{ onClick?: (e: SyntheticEvent) => void }>(({ onClick }) => ({ display: 'flex', width: '100%', - cursor: 'pointer', + cursor: onClick ? 'pointer' : 'default', userSelect: 'none', alignItems: 'center', justifyContent: 'space-between', overflow: 'hidden', padding: '6px', +})); + +const Filters = styled.div({ + display: 'flex', + flexBasis: '100%', + justifyContent: 'flex-end', + gap: 6, }); const CollapseToggle = styled(Button)({ @@ -199,11 +206,17 @@ export const TestingModule = ({ }; const active = testProviders.some((tp) => tp.running); + const testing = testProviders.length > 0; return ( - + {testProviders.map( ({ id, icon, title, description, runnable, running, watchable, watching }) => ( @@ -238,27 +251,31 @@ export const TestingModule = ({ - - - - - - + + {testing && ( + + )} + + {testing && ( + + + + )} {errorCount > 0 && ( )} - + From 1815e2124122a64561ef3afeaedbb2ebf3c354e7 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 09:03:59 +0200 Subject: [PATCH 30/41] Fix mocks --- .../components/sidebar/Sidebar.stories.tsx | 1 + .../sidebar/SidebarBottom.stories.tsx | 24 ++++++++++++++++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index 30be9d3e9bf5..410403971002 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -42,6 +42,7 @@ const managerContext: any = { 'api::getShortcutKeys' ), getChannel: fn().mockName('api::getChannel'), + getElements: fn(() => ({})), selectStory: fn().mockName('api::selectStory'), experimental_setFilter: fn().mockName('api::experimental_setFilter'), }, diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx index 25d5512e429e..466222b2723c 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx @@ -1,3 +1,7 @@ +import React from 'react'; + +import { Addon_TypesEnum } from '@storybook/core/types'; +import { ContrastIcon, PointerHandIcon } from '@storybook/icons'; import { fn } from '@storybook/test'; import { SidebarBottomBase } from './SidebarBottom'; @@ -9,7 +13,25 @@ export default { clearNotification: fn(), emit: fn(), experimental_setFilter: fn(), - getElements: fn(() => ({})), + getElements: fn(() => ({ + 'component-tests': { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, + id: 'component-tests', + title: 'Component tests', + description: () => 'Ran 2 seconds ago', + icon: , + runnable: true, + watchable: true, + }, + 'visual-tests': { + type: Addon_TypesEnum.experimental_TEST_PROVIDER, + id: 'visual-tests', + title: 'Visual tests', + description: () => 'Not run', + icon: , + runnable: true, + }, + })), }, }, }; From 001abc43fad52d8d0032fcfbd7050bf3253afe7f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 1 Oct 2024 10:14:26 +0200 Subject: [PATCH 31/41] update lockfile --- scripts/yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/scripts/yarn.lock b/scripts/yarn.lock index a0e46537c940..d6e69cea50b0 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -1571,7 +1571,7 @@ __metadata: detect-port: "npm:^1.6.1" ejs: "npm:^3.1.10" ejs-lint: "npm:^2.0.0" - es-toolkit: "npm:^1.21.0" + es-toolkit: "npm:^1.22.0" esbuild: "npm:^0.23.0" esbuild-plugin-alias: "npm:^0.2.1" eslint: "npm:^8.57.0" @@ -5308,10 +5308,10 @@ __metadata: languageName: node linkType: hard -"es-toolkit@npm:^1.21.0": - version: 1.21.0 - resolution: "es-toolkit@npm:1.21.0" - checksum: 10c0/894a63f8ce5b2e5c1be242c8e8eace6364ea1212d01cdf89594d2cc582c5e1574114ad2ee7022ad5206561c4d5170511d83b38853257249860e56178768854ea +"es-toolkit@npm:^1.22.0": + version: 1.22.0 + resolution: "es-toolkit@npm:1.22.0" + checksum: 10c0/a167789f727437d435071af74e22c0c4a5a557aa61a5013a1656d24b1c8636c88d6b74f12ad0c3966b74d3f56e432d8e8d1989e5c10c10fda8eba5752783af18 languageName: node linkType: hard From e6d287256f34ec49ada35a88b5e61a58a5f941ca Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:26:17 +0200 Subject: [PATCH 32/41] Disable console.log --- code/core/src/manager/components/sidebar/SidebarBottom.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index b688e062a22a..fb62aead6d4d 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -187,7 +187,7 @@ export const SidebarBottom = () => { useEffect(() => { api.getChannel()?.on(TESTING_MODULE_RUN_PROGRESS_RESPONSE, (data) => { if ('payload' in data) { - console.log('progress', data); + // console.log('progress', data); // TODO clear statuses api.experimental_updateStatus('figure-out-id', processTestReport(data.payload)); } else { From d64d8ce96a9ea9a61d0b211cb16c64b422c398f6 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:27:47 +0200 Subject: [PATCH 33/41] Description is non-nullable --- code/core/src/manager/components/sidebar/TestingModule.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index a41b90d85915..d0553744c09b 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -225,7 +225,7 @@ export const TestingModule = ({ {icon}
{title} - {description?.({})} + {description({})}
From 6986da312ebcb258224532d8ee22a3480d8880fa Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:47:23 +0200 Subject: [PATCH 34/41] Fix runAllTests action --- .../components/sidebar/TestingModule.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index d0553744c09b..4ce7e8eb5990 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -192,14 +192,6 @@ export const TestingModule = ({ setMaxHeight(contentRef.current?.offsetHeight || 500); }, []); - const runAllTests = useCallback( - (e: SyntheticEvent) => { - e.stopPropagation(); - onRunTests(); - }, - [onRunTests] - ); - const toggleCollapsed = () => { setMaxHeight(contentRef.current?.offsetHeight || 500); setCollapsed(!collapsed); @@ -253,7 +245,15 @@ export const TestingModule = ({ {testing && ( - From ea4f8ef436e0fe1826203c24b73d4b9d1bf586ea Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:51:48 +0200 Subject: [PATCH 35/41] Fix filter button colors --- code/core/src/manager/components/sidebar/Sidebar.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index 5567c15d7795..480ec002142f 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -177,11 +177,7 @@ export const Sidebar = React.memo(function Sidebar({ )} - {isLoading ? null : ( -
- -
- )} + {isLoading ? null : } ); From d9099d224208a6639938314d400f9f27ca1ab7e2 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:53:18 +0200 Subject: [PATCH 36/41] Hide Testing Module on mobile --- code/core/src/manager/components/sidebar/Sidebar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index 480ec002142f..c752e76586d5 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -11,6 +11,7 @@ import { import { type State, useStorybookApi } from '@storybook/core/manager-api'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; +import { useLayout } from '../layout/LayoutProvider'; import { Explorer } from './Explorer'; import type { HeadingProps } from './Heading'; import { Heading } from './Heading'; @@ -125,7 +126,7 @@ export const Sidebar = React.memo(function Sidebar({ const dataset = useCombination(index, indexError, previewInitialized, status, refs); const isLoading = !index && !indexError; const lastViewedProps = useLastViewed(selected); - const api = useStorybookApi(); + const { isMobile } = useLayout(); return ( @@ -177,7 +178,7 @@ export const Sidebar = React.memo(function Sidebar({ )} - {isLoading ? null : } + {isMobile || isLoading ? null : } ); From 0a96f01c3616b97d40b044cecce2f3213e1a6923 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:56:28 +0200 Subject: [PATCH 37/41] Fix notification shadow on mobile --- .../manager/components/notifications/NotificationItem.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx index b8b53475d5f6..d7b20e5ec0d1 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.tsx @@ -11,6 +11,8 @@ import { type State } from '@storybook/core/manager-api'; import { transparentize } from 'polished'; +import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; + const slideIn = keyframes({ '0%': { opacity: 0, @@ -42,11 +44,14 @@ const Notification = styled.div<{ duration?: number }>( animation: `${slideIn} 500ms`, background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)', - boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, + boxShadow: `0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1)`, color: theme.color.inverseText, textDecoration: 'none', overflow: 'hidden', zIndex: 1, + [MEDIA_DESKTOP_BREAKPOINT]: { + boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, + }, }), ({ duration, theme }) => duration && { From 5702fb0ba1de60e7306d2a54b7f6069eaed392fe Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 10:58:26 +0200 Subject: [PATCH 38/41] Extract to constant --- .../core/src/manager/components/sidebar/TestingModule.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 4ce7e8eb5990..4e68a333a8aa 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -11,6 +11,8 @@ import { } from '@storybook/icons'; import type { Addon_TestProviderType } from '@storybook/types'; +const DEFAULT_HEIGHT = 500; + const spin = keyframes({ from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' }, @@ -186,14 +188,14 @@ export const TestingModule = ({ }: TestingModuleProps) => { const contentRef = useRef(null); const [collapsed, setCollapsed] = useState(false); - const [maxHeight, setMaxHeight] = useState(500); + const [maxHeight, setMaxHeight] = useState(DEFAULT_HEIGHT); useEffect(() => { - setMaxHeight(contentRef.current?.offsetHeight || 500); + setMaxHeight(contentRef.current?.offsetHeight || DEFAULT_HEIGHT); }, []); const toggleCollapsed = () => { - setMaxHeight(contentRef.current?.offsetHeight || 500); + setMaxHeight(contentRef.current?.offsetHeight || DEFAULT_HEIGHT); setCollapsed(!collapsed); }; From dd965b8eae03ab28e60f21558a9d65ff91c782e1 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 13:06:29 +0200 Subject: [PATCH 39/41] Avoid shadow on top of scrollbar --- code/core/src/components/components/ScrollArea/ScrollArea.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/core/src/components/components/ScrollArea/ScrollArea.tsx b/code/core/src/components/components/ScrollArea/ScrollArea.tsx index aa1dff7b5c24..195f70d68b06 100644 --- a/code/core/src/components/components/ScrollArea/ScrollArea.tsx +++ b/code/core/src/components/components/ScrollArea/ScrollArea.tsx @@ -39,6 +39,7 @@ const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{ background: 'transparent', transition: 'all 0.2s ease-out', borderRadius: 'var(--scrollbar-size)', + zIndex: 1, '&[data-orientation="vertical"]': { width: 'var(--scrollbar-size)', From 543e0bb55a8781cdb65155b9738758b789241361 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 13:08:22 +0200 Subject: [PATCH 40/41] Fix active state for filter toggles --- code/core/src/manager/components/sidebar/TestingModule.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx index 4e68a333a8aa..48964c6b5101 100644 --- a/code/core/src/manager/components/sidebar/TestingModule.tsx +++ b/code/core/src/manager/components/sidebar/TestingModule.tsx @@ -105,7 +105,8 @@ const CollapseToggle = styled(Button)({ const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>( { minWidth: 28 }, ({ active, status, theme }) => - !active && theme.base === 'light' + !active && + (theme.base === 'light' ? { background: { negative: theme.background.negative, @@ -125,7 +126,7 @@ const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>( negative: theme.color.negative, warning: theme.color.warning, }[status], - } + }) ); const TestProvider = styled.div({ From 0a6fc46bac1c9c2b18c955f4e50601f3d23a7b3e Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 1 Oct 2024 13:20:52 +0200 Subject: [PATCH 41/41] Avoid excessive shadow on stacked notifications --- .../notifications/NotificationItem.tsx | 18 ++++++++++++------ .../notifications/NotificationList.tsx | 5 +++-- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx index d7b20e5ec0d1..159fa0da137f 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.tsx @@ -48,7 +48,7 @@ const Notification = styled.div<{ duration?: number }>( color: theme.color.inverseText, textDecoration: 'none', overflow: 'hidden', - zIndex: 1, + [MEDIA_DESKTOP_BREAKPOINT]: { boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`, }, @@ -188,9 +188,11 @@ export const NotificationItemSpacer = styled.div({ const NotificationItem: FC<{ notification: State['notifications'][0]; onDismissNotification: (id: string) => void; + zIndex?: number; }> = ({ notification: { content, duration, link, onClear, onClick, id, icon }, onDismissNotification, + zIndex, }) => { const onTimeout = useCallback(() => { onDismissNotification(id); @@ -198,7 +200,7 @@ const NotificationItem: FC<{ if (onClear) { onClear({ dismissed: false, timeout: true }); } - }, [onDismissNotification, onClear]); + }, [id, onDismissNotification, onClear]); const timer = useRef | null>(null); useEffect(() => { @@ -218,11 +220,11 @@ const NotificationItem: FC<{ if (onClear) { onClear({ dismissed: true, timeout: false }); } - }, [onDismissNotification, onClear]); + }, [id, onDismissNotification, onClear]); if (link) { return ( - + @@ -231,7 +233,11 @@ const NotificationItem: FC<{ if (onClick) { return ( - onClick({ onDismiss })}> + onClick({ onDismiss })} + style={{ zIndex }} + > @@ -239,7 +245,7 @@ const NotificationItem: FC<{ } return ( - + diff --git a/code/core/src/manager/components/notifications/NotificationList.tsx b/code/core/src/manager/components/notifications/NotificationList.tsx index 5826c5687fcc..0e4789a28bf5 100644 --- a/code/core/src/manager/components/notifications/NotificationList.tsx +++ b/code/core/src/manager/components/notifications/NotificationList.tsx @@ -21,11 +21,12 @@ export const NotificationList: FC = ({ return ( {notifications && - notifications.map((notification) => ( + notifications.map((notification, index) => ( clearNotification(id)} notification={notification} + zIndex={notifications.length - index} /> ))} @@ -34,6 +35,7 @@ export const NotificationList: FC = ({ const List = styled.div<{ isMobile?: boolean }>( { + zIndex: 200, '> * + *': { marginTop: 12, }, @@ -43,7 +45,6 @@ const List = styled.div<{ isMobile?: boolean }>( }, ({ isMobile }) => isMobile && { - zIndex: 200, position: 'fixed', bottom: 40, margin: 20,