From fae5a42b75513b43a26123d85566532626ebca53 Mon Sep 17 00:00:00 2001 From: Dominic Nguyen Date: Thu, 3 Nov 2022 16:58:48 -0400 Subject: [PATCH 01/16] Update README logo for dark mode Thanks for [the tip](https://twitter.com/_egoistlily/status/1588201619388190720) @egoist --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fd4b1a777064..7462b6c9fcb7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,12 @@

- Storybook + + + Storybook + + +

Build bulletproof UI components faster

From 9825b2c9abaaedac224b3debf8a6c67ba2839483 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 8 Nov 2022 14:35:54 +0100 Subject: [PATCH 02/16] Fix tests on Windows --- code/jest.config.js | 19 ------- .../builder-manager/src/utils/files.test.ts | 57 +++++++++++++------ code/lib/builder-manager/src/utils/files.ts | 5 +- code/lib/cli/src/helpers.test.ts | 1 + code/lib/cli/src/helpers.ts | 17 +++--- .../src/utils/StoryIndexGenerator.test.ts | 46 +++++++-------- .../src/utils/StoryIndexGenerator.ts | 22 +++++-- 7 files changed, 95 insertions(+), 72 deletions(-) diff --git a/code/jest.config.js b/code/jest.config.js index ef5b43abe791..e74ed2863fd2 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -1,23 +1,5 @@ const os = require('os'); -// TODO Revisit this test later, when we have a windows machine @valentinpalkovic -const skipOnWindows = [ - 'lib/core-server/src/utils/stories-json.test.ts', - 'lib/core-server/src/utils/StoryIndexGenerator.test.ts', - 'lib/cli/src/helpers.test.ts', - 'lib/core-server/src/utils/__tests__/server-statics.test.ts', - 'lib/core-common/src/utils/__tests__/template.test.ts', - 'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts', - 'lib/core-common/src/utils/__tests__/interpret-files.test.ts', - 'lib/builder-manager/src/utils/files.test.ts', - 'lib/cli/src/helpers.test.ts', - 'lib/core-server/src/utils/__tests__/server-statics.test.ts', - 'lib/core-common/src/utils/__tests__/template.test.ts', - 'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts', - 'lib/core-common/src/utils/__tests__/interpret-files.test.ts', - 'lib/builder-manager/src/utils/files.test.ts', -]; - module.exports = { cacheDirectory: '.cache/jest', clearMocks: true, @@ -69,7 +51,6 @@ module.exports = { '/renderers/svelte/src/public-types.test.ts', '/renderers/vue/src/public-types.test.ts', '/renderers/vue3/src/public-types.test.ts', - ...(process.platform === 'win32' ? skipOnWindows : []), ], collectCoverage: false, collectCoverageFrom: [ diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts index 41d62ec82693..a82d848ac639 100644 --- a/code/lib/builder-manager/src/utils/files.test.ts +++ b/code/lib/builder-manager/src/utils/files.test.ts @@ -1,19 +1,44 @@ +import { platform } from 'os'; import { sanitizePath } from './files'; -test('sanitizePath', () => { - const addonsDir = '/Users/username/Projects/projectname/storybook'; - const text = 'demo text'; - const file = { - path: '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs', - contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), - text, - }; - const { location, url } = sanitizePath(file, addonsDir); +const os = platform(); - expect(location).toMatchInlineSnapshot( - `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"` - ); - expect(url).toMatchInlineSnapshot( - `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` - ); -}); +if (os !== 'win32') { + test('sanitizePath', () => { + const addonsDir = '/Users/username/Projects/projectname/storybook'; + const text = 'demo text'; + const file = { + path: '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs', + contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), + text, + }; + const { location, url } = sanitizePath(file, addonsDir); + + expect(location).toMatchInlineSnapshot( + `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"` + ); + expect(url).toMatchInlineSnapshot( + `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` + ); + }); +} + +if (os === 'win32') { + test('sanitizePath - 1', () => { + const addonsDir = 'C:\\Users\\username\\Projects\\projectname\\storybook'; + const text = 'demo text'; + const file = { + path: 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs', + contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), + text, + }; + const { location, url } = sanitizePath(file, addonsDir); + + expect(location).toMatchInlineSnapshot( + `"C:\\\\Users\\\\username\\\\Projects\\\\projectname\\\\storybook\\\\node_modules\\\\@storybook\\\\addon-x+y\\\\dist\\\\manager.mjs"` + ); + expect(url).toMatchInlineSnapshot( + `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` + ); + }); +} diff --git a/code/lib/builder-manager/src/utils/files.ts b/code/lib/builder-manager/src/utils/files.ts index bded035f9a2c..bca197dcda9e 100644 --- a/code/lib/builder-manager/src/utils/files.ts +++ b/code/lib/builder-manager/src/utils/files.ts @@ -1,6 +1,6 @@ import type { OutputFile } from 'esbuild'; import fs from 'fs-extra'; -import { join } from 'path'; +import { join, normalize } from 'path'; import slash from 'slash'; import type { Compilation } from '../types'; @@ -26,7 +26,8 @@ export async function readOrderedFiles( export function sanitizePath(file: OutputFile, addonsDir: string) { const filePath = file.path.replace(addonsDir, ''); - const location = join(addonsDir, filePath); + const location = normalize(join(addonsDir, filePath)); const url = `./sb-addons${slash(filePath).split('/').map(encodeURIComponent).join('/')}`; + return { location, url }; } diff --git a/code/lib/cli/src/helpers.test.ts b/code/lib/cli/src/helpers.test.ts index dbc6760c0809..cfeea7ea0f3e 100644 --- a/code/lib/cli/src/helpers.test.ts +++ b/code/lib/cli/src/helpers.test.ts @@ -28,6 +28,7 @@ jest.mock('path', () => { resolve: jest.fn((_, p) => p), dirname: path.dirname, join: path.join, + posix: path.posix, }; }); diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 00ebb767831f..675ec75fde74 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -import path, { join } from 'path'; +import path, { join, posix } from 'path'; import fs from 'fs'; import fse from 'fs-extra'; import chalk from 'chalk'; @@ -197,14 +197,15 @@ export async function copyComponents( }; const componentsPath = async () => { const baseDir = getRendererDir(renderer); - const assetsDir = join(baseDir, 'template/cli'); - const assetsLanguage = join(assetsDir, languageFolderMapping[language]); - const assetsJS = join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]); - const assetsTSLegacy = join( + const assetsDir = posix.join(baseDir, 'template/cli'); + + const assetsLanguage = posix.join(assetsDir, languageFolderMapping[language]); + const assetsJS = posix.join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]); + const assetsTSLegacy = posix.join( assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT_LEGACY] ); - const assetsTS = join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT]); + const assetsTS = posix.join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT]); if (await fse.pathExists(assetsLanguage)) { return assetsLanguage; @@ -232,7 +233,9 @@ export async function copyComponents( }; const destinationPath = await targetPath(); - await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, { overwrite: true }); + await fse.copy(posix.join(getCliDir(), 'rendererAssets/common'), destinationPath, { + overwrite: true, + }); await fse.copy(await componentsPath(), destinationPath, { overwrite: true }); } diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index 676abe654994..7682835f412a 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -1176,29 +1176,29 @@ describe('StoryIndexGenerator', () => { expect(Object.keys((await generator.getIndex()).entries)).not.toContain('notitle--docs'); }); - it('errors on dependency deletion', async () => { - const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( - './src/A.stories.(ts|js|jsx)', - options - ); - const docsSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( - './src/docs2/*.mdx', - options - ); - - const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options); - await generator.initialize(); - await generator.getIndex(); - expect(toId).toHaveBeenCalledTimes(5); - - expect(Object.keys((await generator.getIndex()).entries)).toContain('a--story-one'); - - generator.invalidate(storiesSpecifier, './src/A.stories.js', true); - - await expect(() => generator.getIndex()).rejects.toThrowError( - /Could not find "..\/A.stories" for docs file/ - ); - }); + // it('errors on dependency deletion', async () => { + // const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( + // './src/A.stories.(ts|js|jsx)', + // options + // ); + // const docsSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( + // './src/docs2/*.mdx', + // options + // ); + + // const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options); + // await generator.initialize(); + // await generator.getIndex(); + // expect(toId).toHaveBeenCalledTimes(5); + + // expect(Object.keys((await generator.getIndex()).entries)).toContain('a--story-one'); + + // generator.invalidate(storiesSpecifier, './src/A.stories.js', true); + + // await expect(() => generator.getIndex()).rejects.toThrowError( + // /Could not find "..\/A.stories" for docs file/ + // ); + // }); it('cleans up properly on dependent docs deletion', async () => { const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 2d8f3d4c5180..98f60e6cb051 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -304,7 +304,12 @@ export class StoryIndexGenerator { dependencies.forEach((dep) => { if (dep.entries.length > 0) { const first = dep.entries[0]; - if (path.resolve(this.options.workingDir, first.importPath).startsWith(absoluteOf)) { + + if ( + path + .normalize(path.resolve(this.options.workingDir, first.importPath)) + .startsWith(path.normalize(absoluteOf)) + ) { ofTitle = first.title; } } @@ -486,10 +491,17 @@ export class StoryIndexGenerator { }); }); - const notFound = dependents.filter((dep) => !invalidated.has(dep)); - if (notFound.length > 0) { - throw new Error(`Could not invalidate ${notFound.length} deps: ${notFound.join(', ')}`); - } + /** + * Currently, we don't sort cacheEntries and invalidate cacheEntries from type 'stories' first, but + * cacheEntries with type 'docs' might be invalidated before ones with cacheEntry type 'story'. + * This can cause a race condition, because cacheEntries from type 'docs' might already be deleted, + * before cacheEntries from type 'story' are invalidated. + * Therefore, throwing an error here is not a good idea. + */ + // const notFound = dependents.filter((dep) => !invalidated.has(dep)); + // if (notFound.length > 0) { + // throw new Error(`Could not invalidate ${notFound.length} deps: ${notFound.join(', ')}`); + // } } if (removed) { From 78a7fd5f4c00c948a6be3cbad7e7275a57cc6db2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 9 Nov 2022 09:16:00 +0100 Subject: [PATCH 03/16] Remove unused code and test --- .../src/utils/StoryIndexGenerator.test.ts | 24 ------------------- .../src/utils/StoryIndexGenerator.ts | 12 ---------- 2 files changed, 36 deletions(-) diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index 7682835f412a..b70a4838e009 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -1176,30 +1176,6 @@ describe('StoryIndexGenerator', () => { expect(Object.keys((await generator.getIndex()).entries)).not.toContain('notitle--docs'); }); - // it('errors on dependency deletion', async () => { - // const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( - // './src/A.stories.(ts|js|jsx)', - // options - // ); - // const docsSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( - // './src/docs2/*.mdx', - // options - // ); - - // const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options); - // await generator.initialize(); - // await generator.getIndex(); - // expect(toId).toHaveBeenCalledTimes(5); - - // expect(Object.keys((await generator.getIndex()).entries)).toContain('a--story-one'); - - // generator.invalidate(storiesSpecifier, './src/A.stories.js', true); - - // await expect(() => generator.getIndex()).rejects.toThrowError( - // /Could not find "..\/A.stories" for docs file/ - // ); - // }); - it('cleans up properly on dependent docs deletion', async () => { const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( './src/A.stories.(ts|js|jsx)', diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 98f60e6cb051..d6a4be5afea9 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -490,18 +490,6 @@ export class StoryIndexGenerator { } }); }); - - /** - * Currently, we don't sort cacheEntries and invalidate cacheEntries from type 'stories' first, but - * cacheEntries with type 'docs' might be invalidated before ones with cacheEntry type 'story'. - * This can cause a race condition, because cacheEntries from type 'docs' might already be deleted, - * before cacheEntries from type 'story' are invalidated. - * Therefore, throwing an error here is not a good idea. - */ - // const notFound = dependents.filter((dep) => !invalidated.has(dep)); - // if (notFound.length > 0) { - // throw new Error(`Could not invalidate ${notFound.length} deps: ${notFound.join(', ')}`); - // } } if (removed) { From 6f3089cf01beeb1eef34998b3374e5f41f8d8a26 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 9 Nov 2022 09:26:48 +0100 Subject: [PATCH 04/16] Try out new version of mock-fs to fix test --- code/lib/core-common/package.json | 4 ++-- code/yarn.lock | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index bac9dfabcd21..bf644545c3c3 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -73,9 +73,9 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@types/mock-fs": "^4.13.0", + "@types/mock-fs": "^4.13.1", "@types/picomatch": "^2.3.0", - "mock-fs": "^4.13.0", + "mock-fs": "^5.2.0", "type-fest": "^2.17.0", "typescript": "~4.6.3" }, diff --git a/code/yarn.lock b/code/yarn.lock index 9a3b8e20e9e0..dcf3e56c65e4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6469,7 +6469,7 @@ __metadata: "@storybook/types": 7.0.0-alpha.49 "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 - "@types/mock-fs": ^4.13.0 + "@types/mock-fs": ^4.13.1 "@types/node": ^16.0.0 "@types/picomatch": ^2.3.0 "@types/pretty-hrtime": ^1.0.0 @@ -6483,7 +6483,7 @@ __metadata: glob: ^7.1.6 handlebars: ^4.7.7 lazy-universal-dotenv: ^3.0.1 - mock-fs: ^4.13.0 + mock-fs: ^5.2.0 picomatch: ^2.3.0 pkg-dir: ^5.0.0 pretty-hrtime: ^1.0.3 @@ -8807,7 +8807,7 @@ __metadata: languageName: node linkType: hard -"@types/mock-fs@npm:^4.13.0": +"@types/mock-fs@npm:^4.13.1": version: 4.13.1 resolution: "@types/mock-fs@npm:4.13.1" dependencies: @@ -25888,10 +25888,10 @@ __metadata: languageName: node linkType: hard -"mock-fs@npm:^4.13.0": - version: 4.14.0 - resolution: "mock-fs@npm:4.14.0" - checksum: a23bc2ce74f2a01d02053fb20aecc2ea359e62580cd15b5e1029b55929802e2770bbd683ccdc5c1eabb5cecbf452196bb81a0ef61c4629dc819023e10d8303c6 +"mock-fs@npm:^5.2.0": + version: 5.2.0 + resolution: "mock-fs@npm:5.2.0" + checksum: e917e71295ee9d805c7d9ab0214a66658db0212f35731ba0c75dc1ccbb9964e6787a6d725561f05fcf569c64cf4a1176f5ce438f98b009227520f646f8abf174 languageName: node linkType: hard From 82b4e270ab7bec910b66c02d0505c02daef46171 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 9 Nov 2022 09:41:27 +0100 Subject: [PATCH 05/16] Add console logs --- code/lib/core-server/src/utils/server-statics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts index 99b135ad9e62..55d72d14e431 100644 --- a/code/lib/core-server/src/utils/server-statics.ts +++ b/code/lib/core-server/src/utils/server-statics.ts @@ -73,7 +73,7 @@ export const parseStaticDir = async (arg: string) => { const splitIndex = lastColonIndex !== -1 && !isWindowsRawDirOnly ? lastColonIndex : arg.length; const targetRaw = arg.substring(splitIndex + 1) || '/'; - const target = targetRaw.split(path.sep).join(path.posix.sep); // Ensure target has forward-slash path + const target = targetRaw.split(path.win32.sep).join(path.posix.sep); // Ensure target has forward-slash path const rawDir = arg.substring(0, splitIndex); const staticDir = path.isAbsolute(rawDir) ? rawDir : `./${rawDir}`; From e7f83454fcc51c5e9afe310576f64f5338800b9d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 9 Nov 2022 11:42:46 +0100 Subject: [PATCH 06/16] Finalize --- code/jest.config.js | 9 +++ .../builder-manager/src/utils/files.test.ts | 61 +++++++------------ .../core-client/src/PreviewWeb.mockdata.ts | 6 +- .../core-server/src/utils/server-statics.ts | 2 +- 4 files changed, 36 insertions(+), 42 deletions(-) diff --git a/code/jest.config.js b/code/jest.config.js index e74ed2863fd2..9c61502d8927 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -1,5 +1,13 @@ const os = require('os'); +// TODO Revisit this test later, when we have a windows machine @valentinpalkovic +const skipOnWindows = [ + 'lib/core-server/src/utils/__tests__/server-statics.test.ts', + 'lib/core-common/src/utils/__tests__/template.test.ts', + 'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts', + 'lib/core-common/src/utils/__tests__/interpret-files.test.ts', +]; + module.exports = { cacheDirectory: '.cache/jest', clearMocks: true, @@ -51,6 +59,7 @@ module.exports = { '/renderers/svelte/src/public-types.test.ts', '/renderers/vue/src/public-types.test.ts', '/renderers/vue3/src/public-types.test.ts', + ...(process.platform === 'win32' ? skipOnWindows : []), ], collectCoverage: false, collectCoverageFrom: [ diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts index a82d848ac639..c504238c060e 100644 --- a/code/lib/builder-manager/src/utils/files.test.ts +++ b/code/lib/builder-manager/src/utils/files.test.ts @@ -2,43 +2,28 @@ import { platform } from 'os'; import { sanitizePath } from './files'; const os = platform(); +const isWindows = os === 'win32'; -if (os !== 'win32') { - test('sanitizePath', () => { - const addonsDir = '/Users/username/Projects/projectname/storybook'; - const text = 'demo text'; - const file = { - path: '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs', - contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), - text, - }; - const { location, url } = sanitizePath(file, addonsDir); +test('sanitizePath', () => { + const addonsDir = isWindows + ? 'C:\\Users\\username\\Projects\\projectname\\storybook' + : '/Users/username/Projects/projectname/storybook'; + const text = 'demo text'; + const file = { + path: isWindows + ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs' + : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs', + contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), + text, + }; + const { location, url } = sanitizePath(file, addonsDir); - expect(location).toMatchInlineSnapshot( - `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"` - ); - expect(url).toMatchInlineSnapshot( - `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` - ); - }); -} - -if (os === 'win32') { - test('sanitizePath - 1', () => { - const addonsDir = 'C:\\Users\\username\\Projects\\projectname\\storybook'; - const text = 'demo text'; - const file = { - path: 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs', - contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))), - text, - }; - const { location, url } = sanitizePath(file, addonsDir); - - expect(location).toMatchInlineSnapshot( - `"C:\\\\Users\\\\username\\\\Projects\\\\projectname\\\\storybook\\\\node_modules\\\\@storybook\\\\addon-x+y\\\\dist\\\\manager.mjs"` - ); - expect(url).toMatchInlineSnapshot( - `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` - ); - }); -} + expect(location).toMatchInlineSnapshot( + isWindows + ? `"C:\\\\Users\\\\username\\\\Projects\\\\projectname\\\\storybook\\\\node_modules\\\\@storybook\\\\addon-x+y\\\\dist\\\\manager.mjs"` + : `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"` + ); + expect(url).toMatchInlineSnapshot( + `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` + ); +}); diff --git a/code/lib/core-client/src/PreviewWeb.mockdata.ts b/code/lib/core-client/src/PreviewWeb.mockdata.ts index e176aecc069c..4bcd742107ea 100644 --- a/code/lib/core-client/src/PreviewWeb.mockdata.ts +++ b/code/lib/core-client/src/PreviewWeb.mockdata.ts @@ -173,9 +173,9 @@ export const waitForEvents = ( events.forEach((event) => mockChannel.on(event, listener)); // Don't wait too long - waitForQuiescence().then(() => - reject(new Error(`Event was not emitted in time: ${debugLabel || events}`)) - ); + waitForQuiescence().then(() => { + reject(new Error(`Event was not emitted in time: ${debugLabel || events}`)); + }); }); }; diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts index 55d72d14e431..99b135ad9e62 100644 --- a/code/lib/core-server/src/utils/server-statics.ts +++ b/code/lib/core-server/src/utils/server-statics.ts @@ -73,7 +73,7 @@ export const parseStaticDir = async (arg: string) => { const splitIndex = lastColonIndex !== -1 && !isWindowsRawDirOnly ? lastColonIndex : arg.length; const targetRaw = arg.substring(splitIndex + 1) || '/'; - const target = targetRaw.split(path.win32.sep).join(path.posix.sep); // Ensure target has forward-slash path + const target = targetRaw.split(path.sep).join(path.posix.sep); // Ensure target has forward-slash path const rawDir = arg.substring(0, splitIndex); const staticDir = path.isAbsolute(rawDir) ? rawDir : `./${rawDir}`; From 8f3094b9c46c21bebe1f579e4652071c04afa168 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 10 Nov 2022 09:03:33 +0100 Subject: [PATCH 07/16] Replace toMatchInlineSnapshot assertion with toEqual --- code/lib/builder-manager/src/utils/files.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts index c504238c060e..d804a3ef8077 100644 --- a/code/lib/builder-manager/src/utils/files.test.ts +++ b/code/lib/builder-manager/src/utils/files.test.ts @@ -18,10 +18,10 @@ test('sanitizePath', () => { }; const { location, url } = sanitizePath(file, addonsDir); - expect(location).toMatchInlineSnapshot( + expect(location).toEqual( isWindows - ? `"C:\\\\Users\\\\username\\\\Projects\\\\projectname\\\\storybook\\\\node_modules\\\\@storybook\\\\addon-x+y\\\\dist\\\\manager.mjs"` - : `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"` + ? 'C:\\\\Users\\\\username\\\\Projects\\\\projectname\\\\storybook\\\\node_modules\\\\@storybook\\\\addon-x+y\\\\dist\\\\manager.mjs' + : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs' ); expect(url).toMatchInlineSnapshot( `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"` From 5ad19baf2b62cd1ce7a8609b20d3438a0336d74e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 10 Nov 2022 10:20:54 +0100 Subject: [PATCH 08/16] Fix windows test --- code/lib/builder-manager/src/utils/files.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts index d804a3ef8077..2cdb1f0d4c59 100644 --- a/code/lib/builder-manager/src/utils/files.test.ts +++ b/code/lib/builder-manager/src/utils/files.test.ts @@ -20,7 +20,7 @@ test('sanitizePath', () => { expect(location).toEqual( isWindows - ? 'C:\\\\Users\\\\username\\\\Projects\\\\projectname\\\\storybook\\\\node_modules\\\\@storybook\\\\addon-x+y\\\\dist\\\\manager.mjs' + ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs' : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs' ); expect(url).toMatchInlineSnapshot( From 7539f514f42b6325b41980e155630cef83120cdd Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 11 Nov 2022 17:12:51 +0100 Subject: [PATCH 09/16] Remove unnecessary import --- code/lib/cli/src/helpers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 675ec75fde74..14ca5801d496 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -import path, { join, posix } from 'path'; +import path, { posix } from 'path'; import fs from 'fs'; import fse from 'fs-extra'; import chalk from 'chalk'; From a6e483a36aa36af45eae95873308e516c7eb00d4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 14 Nov 2022 09:15:59 +0100 Subject: [PATCH 10/16] Revert path.posix changes --- code/jest.config.js | 7 ++++++- code/lib/cli/src/helpers.test.ts | 1 - code/lib/cli/src/helpers.ts | 14 +++++++------- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/code/jest.config.js b/code/jest.config.js index 9c61502d8927..65e38ccc62d7 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -1,6 +1,11 @@ const os = require('os'); -// TODO Revisit this test later, when we have a windows machine @valentinpalkovic +/** + * TODO: Some windows related tasks are still commented out, because they are behaving differently on + * a local Windows machine compared to the Windows Server 2022 machine running in GitHub Actions. + * The main issue is that path.sep is behaving differently on the two machines. Some more investagations + * are necessary! + * */ const skipOnWindows = [ 'lib/core-server/src/utils/__tests__/server-statics.test.ts', 'lib/core-common/src/utils/__tests__/template.test.ts', diff --git a/code/lib/cli/src/helpers.test.ts b/code/lib/cli/src/helpers.test.ts index cfeea7ea0f3e..dbc6760c0809 100644 --- a/code/lib/cli/src/helpers.test.ts +++ b/code/lib/cli/src/helpers.test.ts @@ -28,7 +28,6 @@ jest.mock('path', () => { resolve: jest.fn((_, p) => p), dirname: path.dirname, join: path.join, - posix: path.posix, }; }); diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 14ca5801d496..53bfc848077d 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -import path, { posix } from 'path'; +import path, { join } from 'path'; import fs from 'fs'; import fse from 'fs-extra'; import chalk from 'chalk'; @@ -197,15 +197,15 @@ export async function copyComponents( }; const componentsPath = async () => { const baseDir = getRendererDir(renderer); - const assetsDir = posix.join(baseDir, 'template/cli'); + const assetsDir = join(baseDir, 'template/cli'); - const assetsLanguage = posix.join(assetsDir, languageFolderMapping[language]); - const assetsJS = posix.join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]); - const assetsTSLegacy = posix.join( + const assetsLanguage = join(assetsDir, languageFolderMapping[language]); + const assetsJS = join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]); + const assetsTSLegacy = join( assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT_LEGACY] ); - const assetsTS = posix.join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT]); + const assetsTS = join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT]); if (await fse.pathExists(assetsLanguage)) { return assetsLanguage; @@ -233,7 +233,7 @@ export async function copyComponents( }; const destinationPath = await targetPath(); - await fse.copy(posix.join(getCliDir(), 'rendererAssets/common'), destinationPath, { + await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, { overwrite: true, }); await fse.copy(await componentsPath(), destinationPath, { overwrite: true }); From 66f65093928a24ecbf9a58b627eefb341fd6b2b7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 14 Nov 2022 10:11:32 +0100 Subject: [PATCH 11/16] Exclude another test --- code/jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/code/jest.config.js b/code/jest.config.js index 65e38ccc62d7..efc47fb4b508 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -11,6 +11,7 @@ const skipOnWindows = [ 'lib/core-common/src/utils/__tests__/template.test.ts', 'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts', 'lib/core-common/src/utils/__tests__/interpret-files.test.ts', + 'lib/cli/src/helpers.test.ts' ]; module.exports = { From 85d31806ebe92a49aaf467268b61854506dd17a5 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 14 Nov 2022 15:17:47 +0100 Subject: [PATCH 12/16] Fix lint issues --- code/jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/jest.config.js b/code/jest.config.js index efc47fb4b508..b822679c5d70 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -11,7 +11,7 @@ const skipOnWindows = [ 'lib/core-common/src/utils/__tests__/template.test.ts', 'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts', 'lib/core-common/src/utils/__tests__/interpret-files.test.ts', - 'lib/cli/src/helpers.test.ts' + 'lib/cli/src/helpers.test.ts', ]; module.exports = { From 4d637a5b85772b17662f4ea32a5a2cd658682cae Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 14 Nov 2022 12:49:40 +0100 Subject: [PATCH 13/16] Expose more types in the renderer --- code/addons/links/package.json | 2 +- .../storyshots-puppeteer/package.json | 2 +- .../angular/src/client/public-types.ts | 19 ++++++++-- code/lib/api/package.json | 2 +- code/lib/client-api/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-client/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/store/package.json | 2 +- code/lib/types/package.json | 2 +- code/lib/types/src/modules/csf.ts | 15 +++++--- code/package.json | 2 +- code/renderers/html/src/public-types.ts | 12 +++++-- code/renderers/preact/src/public-types.ts | 11 +++++- code/renderers/react/src/public-api.tsx | 11 ++---- .../renderers/react/src/public-types.test.tsx | 9 +++-- code/renderers/react/src/public-types.ts | 17 +++++++-- code/renderers/server/src/public-types.ts | 11 +++++- .../renderers/svelte/src/public-types.test.ts | 10 +++--- code/renderers/svelte/src/public-types.ts | 10 +++++- code/renderers/vue/src/public-types.test.ts | 6 ++-- code/renderers/vue/src/public-types.ts | 10 ++++-- code/renderers/vue3/src/public-types.test.ts | 6 ++-- code/renderers/vue3/src/public-types.ts | 11 ++++-- .../web-components/src/public-types.ts | 11 ++++++ code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 36 +++++++++---------- 30 files changed, 157 insertions(+), 76 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index d9addd073bac..bfbb7e8e5844 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -79,7 +79,7 @@ "@storybook/addons": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/router": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", "global": "^4.4.0", diff --git a/code/addons/storyshots/storyshots-puppeteer/package.json b/code/addons/storyshots/storyshots-puppeteer/package.json index 424c69a28e85..ce59e4662639 100644 --- a/code/addons/storyshots/storyshots-puppeteer/package.json +++ b/code/addons/storyshots/storyshots-puppeteer/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/node-logger": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", "@types/jest-image-snapshot": "^4.1.3", diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts index 6f14ba796071..c4a54cf25898 100644 --- a/code/frameworks/angular/src/client/public-types.ts +++ b/code/frameworks/angular/src/client/public-types.ts @@ -1,7 +1,18 @@ -import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types'; +import { + AnnotatedStoryFn, + Args, + ComponentAnnotations, + DecoratorFunction, + LoaderFunction, + StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, +} from '@storybook/types'; import { AngularRenderer } from './types'; -export type { Args, ArgTypes } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { Parameters as AngularParameters } from './types'; +export type { AngularRenderer }; /** * Metadata to configure the stories for a component. @@ -34,3 +45,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/lib/api/package.json b/code/lib/api/package.json index 4fb733125ff1..8577934f4f5b 100644 --- a/code/lib/api/package.json +++ b/code/lib/api/package.json @@ -48,7 +48,7 @@ "@storybook/channels": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/router": "7.0.0-alpha.49", "@storybook/theming": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json index 8d85202539f5..248b27b423eb 100644 --- a/code/lib/client-api/package.json +++ b/code/lib/client-api/package.json @@ -44,7 +44,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/store": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", "@types/qs": "^6.9.5", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 277954cf4fb2..ecaf92328807 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -38,7 +38,7 @@ }, "dependencies": { "@babel/types": "^7.12.11", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/csf-tools": "7.0.0-alpha.49", "@storybook/node-logger": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json index 98df76cace1a..c09e47c8ef33 100644 --- a/code/lib/core-client/package.json +++ b/code/lib/core-client/package.json @@ -42,7 +42,7 @@ "@storybook/client-api": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/preview-web": "7.0.0-alpha.49", "@storybook/store": "7.0.0-alpha.49", "@storybook/types": "7.0.0-alpha.49", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 8584853295bb..cb554cd24825 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -39,7 +39,7 @@ "@storybook/core-client": "7.0.0-alpha.49", "@storybook/core-common": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/csf-tools": "7.0.0-alpha.49", "@storybook/docs-mdx": "0.0.1-canary.12433cf.0", "@storybook/node-logger": "7.0.0-alpha.49", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 862ab1eb903c..07be37dbf14f 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@babel/types": "^7.12.11", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/types": "7.0.0-alpha.49", "fs-extra": "^9.0.1", "ts-dedent": "^2.0.0" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4e980fc6acf9..2eb498b94bf6 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/types": "7.0.0-alpha.49", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/store/package.json b/code/lib/store/package.json index 56840e6c62a5..3178a9bb55fd 100644 --- a/code/lib/store/package.json +++ b/code/lib/store/package.json @@ -45,7 +45,7 @@ "@storybook/addons": "7.0.0-alpha.49", "@storybook/client-logger": "7.0.0-alpha.49", "@storybook/core-events": "7.0.0-alpha.49", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/types": "7.0.0-alpha.49", "dequal": "^2.0.2", "global": "^4.4.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 02719893f890..a36e1d32bd61 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -47,7 +47,7 @@ "file-system-cache": "^2.0.0" }, "devDependencies": { - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@types/node": "^16.0.0", "synchronous-promise": "^2.0.15", "typescript": "~4.6.3" diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts index 28b1753ef69e..00c46c323a69 100644 --- a/code/lib/types/src/modules/csf.ts +++ b/code/lib/types/src/modules/csf.ts @@ -23,7 +23,7 @@ import type { LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, - Parameters as ParametersBase, + Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, @@ -51,6 +51,7 @@ import type { StoryIdentifier, StoryKind, StoryName, + StrictArgs, StrictArgTypes, StrictGlobalTypes, StrictInputType, @@ -83,6 +84,7 @@ export type { LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, + Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, @@ -109,6 +111,7 @@ export type { StoryIdentifier, StoryKind, StoryName, + StrictArgs, StrictArgTypes, StrictGlobalTypes, StrictInputType, @@ -135,13 +138,15 @@ export type ViewMode = ViewModeBase | 'story' | 'info' | 'settings' | string | u type Layout = 'centered' | 'fullscreen' | 'padded' | 'none'; -export interface Parameters extends ParametersBase { - fileName?: string; +export interface StorybookParameters { options?: Addon_OptionsParameter; /** The layout property defines basic styles added to the preview body where the story is rendered. If you pass 'none', no styles are applied. */ layout?: Layout; - docsOnly?: boolean; - [key: string]: any; +} + +export interface StorybookInternalParameters extends StorybookParameters { + fileName?: string; + docsOnly?: true; } export type Path = string; diff --git a/code/package.json b/code/package.json index e69db64de779..0aba4dca7f39 100644 --- a/code/package.json +++ b/code/package.json @@ -184,7 +184,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.0.2-next.5", + "@storybook/csf": "0.0.2-next.7", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts index 9cf7cddfd54f..f2de4d1fac05 100644 --- a/code/renderers/html/src/public-types.ts +++ b/code/renderers/html/src/public-types.ts @@ -2,12 +2,16 @@ import type { AnnotatedStoryFn, Args, ComponentAnnotations, + DecoratorFunction, + LoaderFunction, StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, } from '@storybook/types'; - import type { HtmlRenderer } from './types'; -export type { Args, ArgTypes, Parameters } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { HtmlRenderer }; /** * Metadata to configure the stories for a component. @@ -40,3 +44,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts index 11a55e5dabd0..33035dd43f44 100644 --- a/code/renderers/preact/src/public-types.ts +++ b/code/renderers/preact/src/public-types.ts @@ -3,10 +3,15 @@ import type { Args, ComponentAnnotations, StoryAnnotations, + DecoratorFunction, + LoaderFunction, + StoryContext as GenericStoryContext, + StrictArgs, } from '@storybook/types'; import type { PreactRenderer } from './types'; -export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { PreactRenderer }; /** * Metadata to configure the stories for a component. @@ -39,3 +44,7 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx index 3c066ba0bfb5..781bb21af4e3 100644 --- a/code/renderers/react/src/public-api.tsx +++ b/code/renderers/react/src/public-api.tsx @@ -1,13 +1,8 @@ /* eslint-disable prefer-destructuring */ -import type { - Addon_ClientStoryApi, - Addon_Loadable, - Args, - DecoratorFunction, -} from '@storybook/types'; import { start } from '@storybook/core-client'; +import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types'; -import { renderToCanvas, render } from './render'; +import { render, renderToCanvas } from './render'; import type { ReactRenderer } from './types'; interface ClientApi extends Addon_ClientStoryApi { @@ -28,5 +23,3 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args); export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; export const raw: ClientApi['raw'] = api.clientApi.raw; - -export type DecoratorFn = DecoratorFunction; diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx index 538e4cb9db3f..204ea0df26ab 100644 --- a/code/renderers/react/src/public-types.test.tsx +++ b/code/renderers/react/src/public-types.test.tsx @@ -1,15 +1,14 @@ import { describe, test } from '@jest/globals'; -import type { StoryAnnotations } from '@storybook/types'; import { satisfies } from '@storybook/core-common'; +import type { StoryAnnotations } from '@storybook/types'; import { expectTypeOf } from 'expect-type'; import type { KeyboardEventHandler, ReactNode } from 'react'; import React from 'react'; import type { SetOptional } from 'type-fest'; -import type { DecoratorFn } from './public-api'; -import type { Meta, StoryObj } from './public-types'; +import type { Decorator, Meta, StoryObj } from './public-types'; import type { ReactRenderer } from './types'; type ReactStory = StoryAnnotations; @@ -141,7 +140,7 @@ describe('Story args can be inferred', () => { expectTypeOf(Basic).toEqualTypeOf(); }); - const withDecorator: DecoratorFn<{ decoratorArg: number }> = (Story, { args }) => ( + const withDecorator: Decorator<{ decoratorArg: number }> = (Story, { args }) => ( <> Decorator: {args.decoratorArg} @@ -166,7 +165,7 @@ describe('Story args can be inferred', () => { test('Correct args are inferred when type is widened for multiple decorators', () => { type Props = ButtonProps & { decoratorArg: number; decoratorArg2: string }; - const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (Story, { args }) => ( + const secondDecorator: Decorator<{ decoratorArg2: string }> = (Story, { args }) => ( <> Decorator: {args.decoratorArg2} diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts index 6f89b2f76472..aad193cfd18a 100644 --- a/code/renderers/react/src/public-types.ts +++ b/code/renderers/react/src/public-types.ts @@ -4,15 +4,18 @@ import type { ArgsFromMeta, ArgsStoryFn, ComponentAnnotations, + DecoratorFunction, + LoaderFunction, StoryAnnotations, + StoryContext as GenericStoryContext, + StrictArgs, } from '@storybook/types'; - import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react'; import type { SetOptional, Simplify } from 'type-fest'; - import type { ReactRenderer } from './types'; -export { ReactRenderer }; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; +export type { ReactRenderer }; type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor; @@ -124,3 +127,11 @@ export type Story = StoryFn; * ``` */ export type ComponentStory = ComponentStoryFn; + +/** + * @deprecated Use Decorator instead. + */ +export type DecoratorFn = DecoratorFunction; +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts index 4d61201fd9de..dcb8d249a099 100644 --- a/code/renderers/server/src/public-types.ts +++ b/code/renderers/server/src/public-types.ts @@ -3,10 +3,14 @@ import type { Args, ComponentAnnotations, StoryAnnotations, + StoryContext as GenericStoryContext, + DecoratorFunction, + LoaderFunction, + StrictArgs, } from '@storybook/types'; import type { ServerRenderer } from './types'; -export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'; +export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types'; /** * Metadata to configure the stories for a component. @@ -39,3 +43,8 @@ export type StoryObj = StoryAnnotations; * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryFn; + +export type { ServerRenderer }; +export type Decorator = DecoratorFunction; +export type Loader = LoaderFunction; +export type StoryContext = GenericStoryContext; diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts index e7af27cb7f09..72855a7bd519 100644 --- a/code/renderers/svelte/src/public-types.test.ts +++ b/code/renderers/svelte/src/public-types.test.ts @@ -4,10 +4,10 @@ import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; import { expectTypeOf } from 'expect-type'; import type { ComponentProps, SvelteComponentTyped } from 'svelte'; import Button from './__test__/Button.svelte'; -import Decorator from './__test__/Decorator.svelte'; +import Decorator1 from './__test__/Decorator.svelte'; import Decorator2 from './__test__/Decorator2.svelte'; -import type { DecoratorFn, Meta, StoryObj } from './public-types'; +import type { Decorator, Meta, StoryObj } from './public-types'; import type { SvelteRenderer } from './types'; type SvelteStory = StoryAnnotations< @@ -172,11 +172,11 @@ describe('Story args can be inferred', () => { expectTypeOf(Basic).toEqualTypeOf(); }); - const withDecorator: DecoratorFn<{ decoratorArg: string }> = ( + const withDecorator: Decorator<{ decoratorArg: string }> = ( storyFn, { args: { decoratorArg } } ) => ({ - Component: Decorator, + Component: Decorator1, props: { decoratorArg }, }); @@ -202,7 +202,7 @@ describe('Story args can be inferred', () => { test('Correct args are inferred when type is widened for multiple decorators', () => { type Props = ComponentProps