GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Prettier

Browse Source
This commit is contained in:
Kasper Peulen 2024-01-09 17:20:55 +01:00
parent 3e97a62fca
commit 13c46e6c0b
63 changed files with 526 additions and 492 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
code/addons/a11y/src/components/Report/HighlightToggle.tsx
View File

@ -31,8 +31,8 @@ function areAllRequiredElementsHighlighted(
return highlightedCount === 0
? CheckBoxStates.UNCHECKED
: highlightedCount === elementsToHighlight.length
? CheckBoxStates.CHECKED
: CheckBoxStates.INDETERMINATE;
? CheckBoxStates.CHECKED
: CheckBoxStates.INDETERMINATE;
}
const HighlightToggle: React.FC<ToggleProps> = ({ toggleId, elementsToHighlight = [] }) => {

48
code/addons/backgrounds/src/containers/BackgroundSelector.tsx
View File

@ -37,40 +37,24 @@ const createBackgroundSelectorItem = memoize(1000)(
})
);
const getDisplayedItems = memoize(10)(
(
backgrounds: Background[],
selectedBackgroundColor: string | null,
change: (arg: { selected: string; name: string }) => void
) => {
const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
createBackgroundSelectorItem(
null,
name,
value,
true,
change,
value === selectedBackgroundColor
)
);
const getDisplayedItems = memoize(10)((
backgrounds: Background[],
selectedBackgroundColor: string | null,
change: (arg: { selected: string; name: string }) => void
) => {
const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor)
);
if (selectedBackgroundColor !== 'transparent') {
return [
createBackgroundSelectorItem(
'reset',
'Clear background',
'transparent',
null,
change,
false
),
...backgroundSelectorItems,
];
}
return backgroundSelectorItems;
if (selectedBackgroundColor !== 'transparent') {
return [
createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false),
...backgroundSelectorItems,
];
}
);
return backgroundSelectorItems;
});
const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
default: null,

33
code/addons/viewport/src/Tool.tsx
View File

@ -35,21 +35,24 @@ const responsiveViewport: ViewportItem = {
const baseViewports: ViewportItem[] = [responsiveViewport];
const toLinks = memoize(50)(
(list: ViewportItem[], active: LinkBase, updateGlobals, close): Link[] => {
return list
.filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
.map((i) => {
return {
...i,
onClick: () => {
updateGlobals({ viewport: i.id });
close();
},
};
});
}
);
const toLinks = memoize(50)((
list: ViewportItem[],
active: LinkBase,
updateGlobals,
close
): Link[] => {
return list
.filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
.map((i) => {
return {
...i,
onClick: () => {
updateGlobals({ viewport: i.id });
close();
},
};
});
});
interface LinkBase {
id: string;

2
code/builders/builder-vite/src/vite-config.test.ts
View File

@ -25,7 +25,7 @@ const dummyOptions: Options = {
builder: {},
},
options: {},
}[key]),
})[key],
} as Presets,
presetsList: [],
};

45
code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
View File

@ -132,9 +132,8 @@ export default async (
externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
}
const { virtualModules: virtualModuleMapping, entries: dynamicEntries } = await getVirtualModules(
options
);
const { virtualModules: virtualModuleMapping, entries: dynamicEntries } =
await getVirtualModules(options);
return {
name: 'preview',
@ -286,26 +285,26 @@ export default async (
}),
]
: builderOptions.useSWC
? [
new TerserWebpackPlugin<SwcOptions>({
minify: TerserWebpackPlugin.swcMinify,
terserOptions: {
sourceMap: !options.build?.test?.disableSourcemaps,
mangle: false,
keep_fnames: true,
},
}),
]
: [
new TerserWebpackPlugin({
parallel: true,
terserOptions: {
sourceMap: !options.build?.test?.disableSourcemaps,
mangle: false,
keep_fnames: true,
},
}),
],
? [
new TerserWebpackPlugin<SwcOptions>({
minify: TerserWebpackPlugin.swcMinify,
terserOptions: {
sourceMap: !options.build?.test?.disableSourcemaps,
mangle: false,
keep_fnames: true,
},
}),
]
: [
new TerserWebpackPlugin({
parallel: true,
terserOptions: {
sourceMap: !options.build?.test?.disableSourcemaps,
mangle: false,
keep_fnames: true,
},
}),
],
}
: {}),
},

2
code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.ts
View File

@ -172,7 +172,7 @@ const buildTemplate = (
const firstSelector = selector.split(',')[0];
const templateReplacers: [
string | RegExp,
string | ((substring: string, ...args: any[]) => string)
string | ((substring: string, ...args: any[]) => string),
][] = [
[/(^.*?)(?=[,])/, '$1'],
[/(^\..+)/, 'div$1'],

5
code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
View File

@ -41,7 +41,10 @@ export class PropertyExtractor implements NgModuleMetadata {
applicationProviders?: Array<Provider | ReturnType<typeof importProvidersFrom>>;
/* eslint-enable @typescript-eslint/lines-between-class-members */
constructor(private metadata: NgModuleMetadata, private component?: any) {
constructor(
private metadata: NgModuleMetadata,
private component?: any
) {
this.init();
}

5
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
View File

@ -11,7 +11,10 @@ export class AttributeSelectorComponent {
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
constructor(
public el: ElementRef,
private resolver: ComponentFactoryResolver
) {
const factory = this.resolver.resolveComponentFactory(AttributeSelectorComponent);
this.selectors = factory.selector;
this.generatedTemplate = el.nativeElement.outerHTML;

5
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
View File

@ -11,7 +11,10 @@ export class ClassSelectorComponent {
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
constructor(
public el: ElementRef,
private resolver: ComponentFactoryResolver
) {
const factory = this.resolver.resolveComponentFactory(ClassSelectorComponent);
this.selectors = factory.selector;
this.generatedTemplate = el.nativeElement.outerHTML;

10
code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
View File

@ -11,7 +11,10 @@ export class MultipleSelectorComponent {
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
constructor(
public el: ElementRef,
private resolver: ComponentFactoryResolver
) {
const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
this.selectors = factory.selector;
this.generatedTemplate = el.nativeElement.outerHTML;
@ -29,7 +32,10 @@ export class MultipleClassSelectorComponent {
selectors!: string;
constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
constructor(
public el: ElementRef,
private resolver: ComponentFactoryResolver
) {
const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
this.selectors = factory.selector;
this.generatedTemplate = el.nativeElement.outerHTML;

6
code/frameworks/nextjs/src/babel/plugins/jsx-pragma.ts
View File

@ -78,9 +78,9 @@ export default function jsxPragma({ types: t }: { types: typeof BabelTypes }): P
? // import { $import as _pragma } from '$module'
t.importSpecifier(importAs, t.identifier(state.opts.import))
: state.opts.importNamespace
? t.importNamespaceSpecifier(importAs)
: // import _pragma from '$module'
t.importDefaultSpecifier(importAs),
? t.importNamespaceSpecifier(importAs)
: // import _pragma from '$module'
t.importDefaultSpecifier(importAs),
],
t.stringLiteral(state.opts.module || 'react')
);

16
code/frameworks/nextjs/src/babel/plugins/next-ssg-transform.ts
View File

@ -198,10 +198,10 @@ export default function nextTransformSsg({
p.node.type === 'ObjectProperty'
? 'value'
: p.node.type === 'RestElement'
? 'argument'
: (function () {
throw new Error('invariant');
})()
? 'argument'
: (function () {
throw new Error('invariant');
})()
) as NodePath<BabelTypes.Identifier>;
if (isIdentifierReferenced(local)) {
variableState.refs.add(local);
@ -360,10 +360,10 @@ export default function nextTransformSsg({
p.node.type === 'ObjectProperty'
? 'value'
: p.node.type === 'RestElement'
? 'argument'
: (function () {
throw new Error('invariant');
})()
? 'argument'
: (function () {
throw new Error('invariant');
})()
) as NodePath<BabelTypes.Identifier>;
if (refs.has(local) && !isIdentifierReferenced(local)) {

6
code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts
View File

@ -104,7 +104,7 @@ describe('is not Nx project', () => {
() =>
({
hasStorybookBuilder: true,
} as any)
}) as any
);
});
@ -129,7 +129,7 @@ describe('is not Nx project', () => {
project1: { root: 'project1', architect: {} },
},
rootProject: 'project1',
} as any)
}) as any
);
});
@ -155,7 +155,7 @@ describe('is not Nx project', () => {
project2: { root: 'project2', architect: {} },
},
rootProject: null,
} as any)
}) as any
);
});

6
code/lib/cli/src/automigrate/fixes/angular-builders.test.ts
View File

@ -107,7 +107,7 @@ describe('is not Nx project', () => {
() =>
({
hasStorybookBuilder: true,
} as any)
}) as any
);
});
@ -133,7 +133,7 @@ describe('is not Nx project', () => {
project2: { root: 'project2', architect: {} },
},
rootProject: null,
} as any)
}) as any
);
});
@ -158,7 +158,7 @@ describe('is not Nx project', () => {
project1: { root: 'project1', architect: {} },
},
rootProject: 'project1',
} as any)
}) as any
);
});

16
code/lib/cli/src/automigrate/fixes/new-frameworks.ts
View File

@ -218,10 +218,10 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
❌ Your project should be upgraded to use the framework package ${chalk.bold(
newFrameworkPackage
)}, but we detected that you are using Vite ${chalk.bold(
viteVersion
)}, which is unsupported in ${chalk.bold(
'Storybook 7.0'
)}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration.
viteVersion
)}, which is unsupported in ${chalk.bold(
'Storybook 7.0'
)}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration.
`);
}
@ -351,8 +351,8 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
This migration is set to update your project to use the ${chalk.magenta(
'@storybook/react-vite'
)} framework, but Storybook provides a framework package specifically for Next.js projects: ${chalk.magenta(
'@storybook/nextjs'
)}.
'@storybook/nextjs'
)}.
This package provides a better, out of the box experience for Next.js users, however it is only compatible with the Webpack 5 builder, so we can't automigrate for you, as you are using the Vite builder. If you switch this project to use Webpack 5 and rerun this migration, we can update your project.
@ -379,8 +379,8 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
This migration is set to update your project to use the ${chalk.magenta(
'@storybook/svelte-webpack5'
)} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${chalk.magenta(
'@storybook/sveltekit'
)}.
'@storybook/sveltekit'
)}.
This package provides a better experience for SvelteKit users, however it is only compatible with the Vite builder, so we can't automigrate for you, as you are using the Webpack builder.

4
code/lib/cli/src/automigrate/fixes/nodejs-requirement.ts
View File

@ -32,8 +32,8 @@ export const nodeJsRequirement: Fix<NodeJsRequirementOptions> = {
We've detected that you're using Node ${chalk.bold(
nodeVersion
)} but Storybook 7 only supports Node ${chalk.bold(
'v16.0.0'
)} and higher. You will either need to upgrade your Node version or keep using an older version of Storybook.
'v16.0.0'
)} and higher. You will either need to upgrade your Node version or keep using an older version of Storybook.
Please see the migration guide for more information:
${chalk.yellow(

106
code/lib/cli/src/automigrate/fixes/sb-scripts.ts
View File

@ -20,49 +20,52 @@ const logger = console;
* which could actually be a custom script even though the name matches the legacy binary name
*/
export const getStorybookScripts = (allScripts: NonNullable<PackageJson['scripts']>) => {
return Object.keys(allScripts).reduce((acc, key) => {
const currentScript = allScripts[key];
if (currentScript == null) {
return Object.keys(allScripts).reduce(
(acc, key) => {
const currentScript = allScripts[key];
if (currentScript == null) {
return acc;
}
let isStorybookScript = false;
const allWordsFromScript = currentScript.split(' ');
const newScript = allWordsFromScript
.map((currentWord, index) => {
const previousWord = allWordsFromScript[index - 1];
// full word check, rather than regex which could be faulty
const isSbBinary =
currentWord === 'build-storybook' ||
currentWord === 'start-storybook' ||
currentWord === 'sb';
// in case people have scripts like `yarn start-storybook`
const isPrependedByPkgManager =
previousWord &&
['npx', 'run', 'yarn', 'pnpx', 'pnpm dlx'].some((cmd) => previousWord.includes(cmd));
if (isSbBinary && !isPrependedByPkgManager) {
isStorybookScript = true;
return currentWord
.replace('sb', 'storybook')
.replace('start-storybook', 'storybook dev')
.replace('build-storybook', 'storybook build');
}
return currentWord;
})
.join(' ');
if (isStorybookScript) {
acc[key] = {
before: currentScript,
after: newScript,
};
}
return acc;
}
let isStorybookScript = false;
const allWordsFromScript = currentScript.split(' ');
const newScript = allWordsFromScript
.map((currentWord, index) => {
const previousWord = allWordsFromScript[index - 1];
// full word check, rather than regex which could be faulty
const isSbBinary =
currentWord === 'build-storybook' ||
currentWord === 'start-storybook' ||
currentWord === 'sb';
// in case people have scripts like `yarn start-storybook`
const isPrependedByPkgManager =
previousWord &&
['npx', 'run', 'yarn', 'pnpx', 'pnpm dlx'].some((cmd) => previousWord.includes(cmd));
if (isSbBinary && !isPrependedByPkgManager) {
isStorybookScript = true;
return currentWord
.replace('sb', 'storybook')
.replace('start-storybook', 'storybook dev')
.replace('build-storybook', 'storybook build');
}
return currentWord;
})
.join(' ');
if (isStorybookScript) {
acc[key] = {
before: currentScript,
after: newScript,
};
}
return acc;
}, {} as Record<string, { before: string; after: string }>);
},
{} as Record<string, { before: string; after: string }>
);
};
/**
@ -111,10 +114,10 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
return dedent`
We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook.
Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow(
'build-storybook'
)} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta(
'storybook build'
)} respectively.
'build-storybook'
)} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta(
'storybook build'
)} respectively.
In order to work with ${sbFormatted}, your storybook scripts have to be adjusted to use the binary. We can adjust them for you:
${newScriptsMessage.join('\n\n')}
@ -129,10 +132,13 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
logger.info(`✅ Updating scripts in package.json`);
logger.log();
if (!dryRun) {
const newScripts = Object.keys(storybookScripts).reduce((acc, scriptKey) => {
acc[scriptKey] = storybookScripts[scriptKey].after;
return acc;
}, {} as Record<string, string>);
const newScripts = Object.keys(storybookScripts).reduce(
(acc, scriptKey) => {
acc[scriptKey] = storybookScripts[scriptKey].after;
return acc;
},
{} as Record<string, string>
);
logger.log();

4
code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts
View File

@ -47,8 +47,8 @@ export function getRequireWrapperName(config: ConfigFile) {
doesVariableOrFunctionDeclarationExist(node, 'wrapForPnp')
? ['wrapForPnp']
: doesVariableOrFunctionDeclarationExist(node, defaultRequireWrapperName)
? [defaultRequireWrapperName]
: []
? [defaultRequireWrapperName]
: []
);
if (declarationName.length) {

4
code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts
View File

@ -92,8 +92,8 @@ export function getMigrationSummary({
const title = hasNoFixes
? 'No migrations were applicable to your project'
: hasFailures
? 'Migration check ran with failures'
: 'Migration check ran successfully';
? 'Migration check ran with failures'
: 'Migration check ran successfully';
return boxen(messages.filter(Boolean).join(segmentDivider), {
borderStyle: 'round',

10
code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts
View File

@ -107,12 +107,10 @@ export const detectBuilderInfo = async ({
// if builder is still not detected, rely on package dependencies
if (!builderOrFrameworkName) {
const storybookBuilderViteVersion = await packageManager.getPackageVersion(
'@storybook/builder-vite'
);
const storybookBuilderVite2Version = await packageManager.getPackageVersion(
'storybook-builder-vite'
);
const storybookBuilderViteVersion =
await packageManager.getPackageVersion('@storybook/builder-vite');
const storybookBuilderVite2Version =
await packageManager.getPackageVersion('storybook-builder-vite');
const storybookBuilderWebpack5Version = await packageManager.getPackageVersion(
'@storybook/builder-webpack5'
);

5
code/lib/cli/src/detect.ts
View File

@ -185,9 +185,8 @@ export async function detectLanguage(packageManager: JsPackageManager) {
'@typescript-eslint/parser'
);
const eslintPluginStorybookVersion = await packageManager.getPackageVersion(
'eslint-plugin-storybook'
);
const eslintPluginStorybookVersion =
await packageManager.getPackageVersion('eslint-plugin-storybook');
if (isTypescriptDirectDependency && typescriptVersion) {
if (

2
code/lib/cli/src/doctor/getIncompatibleAddons.ts
View File

@ -52,7 +52,7 @@ export const getIncompatibleAddons = async (
({
name: addon,
version: await packageManager.getPackageVersion(addon),
} as { name: keyof typeof incompatibleList; version: string })
}) as { name: keyof typeof incompatibleList; version: string }
)
);

5
code/lib/cli/src/generators/baseGenerator.ts
View File

@ -355,9 +355,8 @@ export async function baseGenerator(
try {
if (process.env.CI !== 'true') {
const { hasEslint, isStorybookPluginInstalled, eslintConfigFile } = await extractEslintInfo(
packageManager
);
const { hasEslint, isStorybookPluginInstalled, eslintConfigFile } =
await extractEslintInfo(packageManager);
if (hasEslint && !isStorybookPluginInstalled) {
if (skipPrompts || (await suggestESLintPlugin())) {

2
code/lib/cli/src/js-package-manager/Yarn1Proxy.ts
View File

@ -192,7 +192,7 @@ export class Yarn1Proxy extends JsPackageManager {
const existingVersions: Record<string, string[]> = {};
const duplicatedDependencies: Record<string, string[]> = {};
const recurse = (tree: typeof trees[0]) => {
const recurse = (tree: (typeof trees)[0]) => {
const { children } = tree;
const { name, value } = parsePackageData(tree.name);
if (!name || !name.includes('storybook')) return;

4
code/lib/core-events/src/errors/server-errors.ts
View File

@ -426,8 +426,8 @@ export class GenerateNewProjectOnInitError extends StorybookError {
template() {
return dedent`
There was an error while using ${this.data.packageManager} to create a new ${
this.data.projectType
} project.
this.data.projectType
} project.
${this.data.error instanceof Error ? this.data.error.message : ''}
`;

11
code/lib/core-server/src/utils/StoryIndexGenerator.ts
View File

@ -538,10 +538,13 @@ export class StoryIndexGenerator {
sortStoriesV7(sortableStories, storySortParameter, fileNameOrder);
}
return sortableStories.reduce((acc, item) => {
acc[item.id] = item;
return acc;
}, {} as StoryIndex['entries']);
return sortableStories.reduce(
(acc, item) => {
acc[item.id] = item;
return acc;
},
{} as StoryIndex['entries']
);
}
async getIndex() {

4
code/lib/core-server/src/utils/build-or-throw.ts
View File

@ -6,8 +6,8 @@ export async function buildOrThrow<T>(callback: () => Promise<T>): Promise<T> {
} catch (err: any) {
const builderErrors = err.errors as { text: string }[];
if (builderErrors) {
const inconsistentVersionsError = builderErrors.find((er) =>
er.text?.includes('No matching export')
const inconsistentVersionsError = builderErrors.find(
(er) => er.text?.includes('No matching export')
);
if (inconsistentVersionsError) {

26
code/lib/core-server/src/withTelemetry.test.ts
View File

@ -79,7 +79,7 @@ describe('withTelemetry', () => {
it('does not send full error message when crash reports are disabled', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ enableCrashReports: false } as any),
apply: async () => ({ enableCrashReports: false }) as any,
});
await expect(async () =>
withTelemetry(
@ -99,7 +99,7 @@ describe('withTelemetry', () => {
it('does send error message when crash reports are enabled', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ enableCrashReports: true } as any),
apply: async () => ({ enableCrashReports: true }) as any,
});
await expect(async () =>
@ -120,7 +120,7 @@ describe('withTelemetry', () => {
it('does not send any error message when telemetry is disabled', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ disableTelemetry: true } as any),
apply: async () => ({ disableTelemetry: true }) as any,
});
await expect(async () =>
@ -141,7 +141,7 @@ describe('withTelemetry', () => {
it('does send error messages when telemetry is disabled, but crash reports are enabled', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ disableTelemetry: true, enableCrashReports: true } as any),
apply: async () => ({ disableTelemetry: true, enableCrashReports: true }) as any,
});
await expect(async () =>
@ -162,7 +162,7 @@ describe('withTelemetry', () => {
it('does not send full error messages when disabled crash reports are cached', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({} as any),
apply: async () => ({}) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(false);
@ -184,7 +184,7 @@ describe('withTelemetry', () => {
it('does send error messages when enabled crash reports are cached', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({} as any),
apply: async () => ({}) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(true);
@ -206,7 +206,7 @@ describe('withTelemetry', () => {
it('does not send full error messages when disabled crash reports are prompted', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({} as any),
apply: async () => ({}) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(undefined);
vi.mocked(prompts).mockResolvedValueOnce({ enableCrashReports: false });
@ -229,7 +229,7 @@ describe('withTelemetry', () => {
it('does send error messages when enabled crash reports are prompted', async () => {
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({} as any),
apply: async () => ({}) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(undefined);
vi.mocked(prompts).mockResolvedValueOnce({ enableCrashReports: true });
@ -386,7 +386,7 @@ describe('getErrorLevel', () => {
};
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ enableCrashReports: true } as any),
apply: async () => ({ enableCrashReports: true }) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(false);
@ -405,7 +405,7 @@ describe('getErrorLevel', () => {
};
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ enableCrashReports: false } as any),
apply: async () => ({ enableCrashReports: false }) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(false);
@ -424,7 +424,7 @@ describe('getErrorLevel', () => {
};
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({ disableTelemetry: true } as any),
apply: async () => ({ disableTelemetry: true }) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(false);
@ -444,7 +444,7 @@ describe('getErrorLevel', () => {
vi.mocked(cache.get).mockResolvedValueOnce(true);
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({} as any),
apply: async () => ({}) as any,
});
const errorLevel = await getErrorLevel(options);
@ -462,7 +462,7 @@ describe('getErrorLevel', () => {
};
vi.mocked(loadAllPresets).mockResolvedValueOnce({
apply: async () => ({} as any),
apply: async () => ({}) as any,
});
vi.mocked(cache.get).mockResolvedValueOnce(undefined);

72
code/lib/csf-tools/src/CsfFile.ts
View File

@ -100,11 +100,14 @@ const parseExportsOrder = (init: t.Expression) => {
};
const sortExports = (exportByName: Record<string, any>, order: string[]) => {
return order.reduce((acc, name) => {
const namedExport = exportByName[name];
if (namedExport) acc[name] = namedExport;
return acc;
}, {} as Record<string, any>);
return order.reduce(
(acc, name) => {
const namedExport = exportByName[name];
if (namedExport) acc[name] = namedExport;
return acc;
},
{} as Record<string, any>
);
};
export interface CsfOptions {
@ -491,35 +494,38 @@ export class CsfFile {
if (self._metaAnnotations.play) {
self._meta.tags = [...(self._meta.tags || []), 'play-fn'];
}
self._stories = entries.reduce((acc, [key, story]) => {
if (!isExportStory(key, self._meta as StaticMeta)) {
return acc;
}
const id =
story.parameters?.__id ??
toId((self._meta?.id || self._meta?.title) as string, storyNameFromExport(key));
const parameters: Record<string, any> = { ...story.parameters, __id: id };
self._stories = entries.reduce(
(acc, [key, story]) => {
if (!isExportStory(key, self._meta as StaticMeta)) {
return acc;
}
const id =
story.parameters?.__id ??
toId((self._meta?.id || self._meta?.title) as string, storyNameFromExport(key));
const parameters: Record<string, any> = { ...story.parameters, __id: id };
const { includeStories } = self._meta || {};
if (
key === '__page' &&
(entries.length === 1 || (Array.isArray(includeStories) && includeStories.length === 1))
) {
parameters.docsOnly = true;
}
acc[key] = { ...story, id, parameters };
const { tags, play } = self._storyAnnotations[key];
if (tags) {
const node = t.isIdentifier(tags)
? findVarInitialization(tags.name, this._ast.program)
: tags;
acc[key].tags = parseTags(node);
}
if (play) {
acc[key].tags = [...(acc[key].tags || []), 'play-fn'];
}
return acc;
}, {} as Record<string, StaticStory>);
const { includeStories } = self._meta || {};
if (
key === '__page' &&
(entries.length === 1 || (Array.isArray(includeStories) && includeStories.length === 1))
) {
parameters.docsOnly = true;
}
acc[key] = { ...story, id, parameters };
const { tags, play } = self._storyAnnotations[key];
if (tags) {
const node = t.isIdentifier(tags)
? findVarInitialization(tags.name, this._ast.program)
: tags;
acc[key].tags = parseTags(node);
}
if (play) {
acc[key].tags = [...(acc[key].tags || []), 'play-fn'];
}
return acc;
},
{} as Record<string, StaticStory>
);
Object.keys(self._storyExports).forEach((key) => {
if (!isExportStory(key, self._meta as StaticMeta)) {

15
code/lib/instrumenter/src/instrumenter.ts
View File

@ -248,12 +248,15 @@ export class Instrumenter {
cleanup() {
// Reset stories with retained state to their initial state, and drop the rest.
this.state = Object.entries(this.state).reduce((acc, [storyId, state]) => {
const retainedState = getRetainedState(state);
if (!retainedState) return acc;
acc[storyId] = Object.assign(getInitialState(), retainedState);
return acc;
}, {} as Record<StoryId, State>);
this.state = Object.entries(this.state).reduce(
(acc, [storyId, state]) => {
const retainedState = getRetainedState(state);
if (!retainedState) return acc;
acc[storyId] = Object.assign(getInitialState(), retainedState);
return acc;
},
{} as Record<StoryId, State>
);
const payload: SyncPayload = { controlStates: controlsDisabled, logItems: [] };
this.channel.emit(EVENTS.SYNC, payload);
// @ts-expect-error (TS doesn't know about this global variable)

2
code/lib/manager-api/src/lib/addons.ts
View File

@ -104,7 +104,7 @@ export class AddonStore {
| Addon_Types
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_SIDEBAR_TOP
| Addon_TypesEnum.experimental_SIDEBAR_TOP,
>(type: T): Addon_Collection<Addon_TypesMapping[T]> | any {
if (!this.elements[type]) {
this.elements[type] = {};

62
code/lib/manager-api/src/lib/stories.ts
View File

@ -92,16 +92,19 @@ export const transformSetStoriesStoryDataToPreparedStoryIndex = (
export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 => {
return {
v: 3,
stories: Object.values(index.stories).reduce((acc, entry) => {
acc[entry.id] = {
...entry,
title: entry.kind,
name: entry.name || entry.story,
importPath: entry.parameters.fileName || '',
};
stories: Object.values(index.stories).reduce(
(acc, entry) => {
acc[entry.id] = {
...entry,
title: entry.kind,
name: entry.name || entry.story,
importPath: entry.parameters.fileName || '',
};
return acc;
}, {} as StoryIndexV3['stories']),
return acc;
},
{} as StoryIndexV3['stories']
),
};
};
@ -109,27 +112,30 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor
const countByTitle = countBy(Object.values(index.stories), 'title');
return {
v: 4,
entries: Object.values(index.stories).reduce((acc, entry: any) => {
let type: IndexEntry['type'] = 'story';
if (
entry.parameters?.docsOnly ||
(entry.name === 'Page' && countByTitle[entry.title] === 1)
) {
type = 'docs';
}
acc[entry.id] = {
type,
...(type === 'docs' && { tags: ['stories-mdx'], storiesImports: [] }),
...entry,
};
entries: Object.values(index.stories).reduce(
(acc, entry: any) => {
let type: IndexEntry['type'] = 'story';
if (
entry.parameters?.docsOnly ||
(entry.name === 'Page' && countByTitle[entry.title] === 1)
) {
type = 'docs';
}
acc[entry.id] = {
type,
...(type === 'docs' && { tags: ['stories-mdx'], storiesImports: [] }),
...entry,
};
// @ts-expect-error (we're removing something that should not be there)
delete acc[entry.id].story;
// @ts-expect-error (we're removing something that should not be there)
delete acc[entry.id].kind;
// @ts-expect-error (we're removing something that should not be there)
delete acc[entry.id].story;
// @ts-expect-error (we're removing something that should not be there)
delete acc[entry.id].kind;
return acc;
}, {} as API_PreparedStoryIndex['entries']),
return acc;
},
{} as API_PreparedStoryIndex['entries']
),
};
};

2
code/lib/manager-api/src/modules/addons.ts
View File

@ -28,7 +28,7 @@ export interface SubAPI {
| Addon_Types
| Addon_TypesEnum.experimental_PAGE
| Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
| Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types
| Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types,
>(
type: T
) => Addon_Collection<Addon_TypesMapping[T]>;

9
code/lib/manager-api/src/modules/whatsnew.ts
View File

@ -57,10 +57,11 @@ export const init: ModuleFn = ({ fullAPI, store, provider }) => {
function getLatestWhatsNewPost(): Promise<WhatsNewData> {
provider.channel?.emit(REQUEST_WHATS_NEW_DATA);
return new Promise((resolve) =>
provider.channel?.once(RESULT_WHATS_NEW_DATA, ({ data }: { data: WhatsNewData }) =>
resolve(data)
)
return new Promise(
(resolve) =>
provider.channel?.once(RESULT_WHATS_NEW_DATA, ({ data }: { data: WhatsNewData }) =>
resolve(data)
)
);
}

8
code/lib/preview-api/src/modules/addons/hooks.ts
View File

@ -221,14 +221,14 @@ const invalidHooksError = () =>
function getHooksContextOrNull<
TRenderer extends Renderer,
TArgs extends Args = Args
TArgs extends Args = Args,
>(): HooksContext<TRenderer, TArgs> | null {
return global.STORYBOOK_HOOKS_CONTEXT || null;
}
function getHooksContextOrThrow<
TRenderer extends Renderer,
TArgs extends Args = Args
TArgs extends Args = Args,
>(): HooksContext<TRenderer, TArgs> {
const hooks = getHooksContextOrNull<TRenderer, TArgs>();
if (hooks == null) {
@ -530,7 +530,7 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) {
*/
export function useStoryContext<
TRenderer extends Renderer,
TArgs extends Args = Args
TArgs extends Args = Args,
>(): StoryContext<TRenderer> {
const { currentContext } = getHooksContextOrThrow<TRenderer, TArgs>();
if (currentContext == null) {
@ -576,7 +576,7 @@ export function useParameter<S>(parameterKey: string, defaultValue?: S): S | und
export function useArgs<TArgs extends Args = Args>(): [
TArgs,
(newArgs: Partial<TArgs>) => void,
(argNames?: (keyof TArgs)[]) => void
(argNames?: (keyof TArgs)[]) => void,
] {
const channel = addons.getChannel();
const { id: storyId, args } = useStoryContext<Renderer, TArgs>();

17
code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts
View File

@ -110,13 +110,16 @@ export class StoryStoreFacade<TRenderer extends Renderer> {
}
throw err;
}
const entries = sortedV7.reduce((acc, s) => {
// We use the original entry we stored in `this.stories` because it is possible that the CSF file itself
// exports a `parameters.fileName` which can be different and mess up our `importFn`.
// NOTE: this doesn't actually change the story object, just the index.
acc[s.id] = this.entries[s.id];
return acc;
}, {} as StoryIndex['entries']);
const entries = sortedV7.reduce(
(acc, s) => {
// We use the original entry we stored in `this.stories` because it is possible that the CSF file itself
// exports a `parameters.fileName` which can be different and mess up our `importFn`.
// NOTE: this doesn't actually change the story object, just the index.
acc[s.id] = this.entries[s.id];
return acc;
},
{} as StoryIndex['entries']
);
return { v: 4, entries };
}

2
code/lib/preview-api/src/modules/core-client/start.test.ts
View File

@ -83,7 +83,7 @@ beforeEach(() => {
const start: typeof realStart = (...args) => {
const result = realStart(...args);
const configure: typeof result['configure'] = (
const configure: (typeof result)['configure'] = (
framework: string,
loadable: Loadable,
m?: NodeModule,

2
code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts
View File

@ -57,7 +57,7 @@ export const importFn: Mocked<ModuleImportFn> = vi.fn(
'./src/ComponentTwo.stories.js': componentTwoExports,
'./src/Introduction.mdx': unattachedDocsExports,
'./src/ExtraComponentOne.stories.js': extraComponentOneExports,
}[path] || {})
})[path] || {}
);
export const docsRenderer = {

2
code/lib/preview-api/src/modules/preview-web/WebView.ts
View File

@ -38,7 +38,7 @@ const ansiConverter = new AnsiToHtml({
});
export class WebView implements View<HTMLElement> {
private currentLayoutClass?: typeof layoutClassMap[keyof typeof layoutClassMap] | null;
private currentLayoutClass?: (typeof layoutClassMap)[keyof typeof layoutClassMap] | null;
private testing = false;

11
code/lib/preview-api/src/modules/store/StoryIndexStore.ts
View File

@ -12,10 +12,13 @@ import { MissingStoryAfterHmrError } from '@storybook/core-events/preview-errors
export type StorySpecifier = StoryId | { name: StoryName; title: ComponentTitle } | '*';
const getImportPathMap = memoize(1)((entries: StoryIndex['entries']) =>
Object.values(entries).reduce((acc, entry) => {
acc[entry.importPath] = acc[entry.importPath] || entry;
return acc;
}, {} as Record<Path, IndexEntry>)
Object.values(entries).reduce(
(acc, entry) => {
acc[entry.importPath] = acc[entry.importPath] || entry;
return acc;
},
{} as Record<Path, IndexEntry>
)
);
export class StoryIndexStore {

11
code/lib/preview-api/src/modules/store/StoryStore.ts
View File

@ -185,10 +185,13 @@ export class StoryStore<TRenderer extends Renderer> {
};
return loadInBatches(importPaths).then((list) =>
list.reduce((acc, { importPath, csfFile }) => {
acc[importPath] = csfFile;
return acc;
}, {} as Record<Path, CSFFile<TRenderer>>)
list.reduce(
(acc, { importPath, csfFile }) => {
acc[importPath] = csfFile;
return acc;
},
{} as Record<Path, CSFFile<TRenderer>>
)
);
}

2
code/lib/preview-api/src/modules/store/csf/prepareStory.ts
View File

@ -228,7 +228,7 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
// eg. reactive proxies set by frameworks like SolidJS or Vue
export function prepareContext<
TRenderer extends Renderer,
TContext extends Pick<StoryContextForLoaders<TRenderer>, 'args' | 'argTypes' | 'globals'>
TContext extends Pick<StoryContextForLoaders<TRenderer>, 'args' | 'argTypes' | 'globals'>,
>(
context: TContext
): TContext & Pick<StoryContextForLoaders<TRenderer>, 'allArgs' | 'argsByTarget' | 'unmappedArgs'> {

74
code/lib/router/src/utils.ts
View File

@ -14,27 +14,27 @@ export interface StoryData {
const splitPathRegex = /\/([^/]+)\/(?:(.*)_)?([^/]+)?/;
export const parsePath: (path: string | undefined) => StoryData = memoize(1000)(
(path: string | undefined | null) => {
const result: StoryData = {
viewMode: undefined,
storyId: undefined,
refId: undefined,
};
export const parsePath: (path: string | undefined) => StoryData = memoize(1000)((
path: string | undefined | null
) => {
const result: StoryData = {
viewMode: undefined,
storyId: undefined,
refId: undefined,
};
if (path) {
const [, viewMode, refId, storyId] = path.toLowerCase().match(splitPathRegex) || [];
if (viewMode) {
Object.assign(result, {
viewMode,
storyId,
refId,
});
}
if (path) {
const [, viewMode, refId, storyId] = path.toLowerCase().match(splitPathRegex) || [];
if (viewMode) {
Object.assign(result, {
viewMode,
storyId,
refId,
});
}
return result;
}
);
return result;
});
interface Args {
[key: string]: any;
@ -157,27 +157,29 @@ export const stringifyQuery = (query: Query) =>
type Match = { path: string };
export const getMatch = memoize(1000)(
(current: string, target: string | RegExp, startsWith = true): Match | null => {
if (startsWith) {
if (typeof target !== 'string') {
throw new Error('startsWith only works with string targets');
}
const startsWithTarget = current && current.startsWith(target);
if (startsWithTarget) {
return { path: current };
}
return null;
export const getMatch = memoize(1000)((
current: string,
target: string | RegExp,
startsWith = true
): Match | null => {
if (startsWith) {
if (typeof target !== 'string') {
throw new Error('startsWith only works with string targets');
}
const currentIsTarget = typeof target === 'string' && current === target;
const matchTarget = current && target && current.match(target);
if (currentIsTarget || matchTarget) {
const startsWithTarget = current && current.startsWith(target);
if (startsWithTarget) {
return { path: current };
}
return null;
}
);
const currentIsTarget = typeof target === 'string' && current === target;
const matchTarget = current && target && current.match(target);
if (currentIsTarget || matchTarget) {
return { path: current };
}
return null;
});

50
code/lib/theming/src/global.ts
View File

@ -84,30 +84,28 @@ export const createReset = memoize(1)(
})
);
export const createGlobal = memoize(1)(
({
color,
background,
typography,
}: {
color: Color;
background: Background;
typography: Typography;
}): Return => {
const resetStyles = createReset({ typography });
return {
...resetStyles,
body: {
...resetStyles.body,
color: color.defaultText,
background: background.app,
overflow: 'hidden',
},
export const createGlobal = memoize(1)(({
color,
background,
typography,
}: {
color: Color;
background: Background;
typography: Typography;
}): Return => {
const resetStyles = createReset({ typography });
return {
...resetStyles,
body: {
...resetStyles.body,
color: color.defaultText,
background: background.app,
overflow: 'hidden',
},
hr: {
...resetStyles.hr,
borderTop: `1px solid ${color.border}`,
},
};
}
);
hr: {
...resetStyles.hr,
borderTop: `1px solid ${color.border}`,
},
};
});

2
code/lib/types/src/modules/addons.ts
View File

@ -172,7 +172,7 @@ export type Addon_BaseDecorators<StoryFnReturnType> = Array<
export interface Addon_BaseAnnotations<
TArgs,
StoryFnReturnType,
TRenderer extends Renderer = Renderer
TRenderer extends Renderer = Renderer,
> {
/**
* Dynamic data that are provided (and possibly updated by) Storybook and its addons.

2
code/lib/types/src/modules/composedStory.ts
View File

@ -53,7 +53,7 @@ export type PartialArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Ar
*/
export type ComposedStoryFn<
TRenderer extends Renderer = Renderer,
TArgs = Args
TArgs = Args,
> = PartialArgsStoryFn<TRenderer, TArgs> & {
play: ComposedStoryPlayFn<TRenderer, TArgs>;
args: TArgs;

6
code/lib/types/src/modules/docs.ts
View File

@ -32,7 +32,7 @@ export type ResolvedModuleExportType = 'component' | 'meta' | 'story';
*/
export type ResolvedModuleExportFromType<
TType extends ResolvedModuleExportType,
TRenderer extends Renderer = Renderer
TRenderer extends Renderer = Renderer,
> = TType extends 'component'
? {
type: 'component';
@ -40,8 +40,8 @@ export type ResolvedModuleExportFromType<
projectAnnotations: NormalizedProjectAnnotations<Renderer>;
}
: TType extends 'meta'
? { type: 'meta'; csfFile: CSFFile<TRenderer>; preparedMeta: PreparedMeta }
: { type: 'story'; story: PreparedStory<TRenderer> };
? { type: 'meta'; csfFile: CSFFile<TRenderer>; preparedMeta: PreparedMeta }
: { type: 'story'; story: PreparedStory<TRenderer> };
export type ResolvedModuleExport<TRenderer extends Renderer = Renderer> = {
type: ResolvedModuleExportType;

4
code/presets/react-webpack/src/framework-preset-react-docs.test.ts
View File

@ -114,7 +114,7 @@ describe('framework-preset-react-docgen', () => {
({
check: false,
reactDocgen: false,
} as Partial<TypescriptOptions>),
}) as Partial<TypescriptOptions>,
},
presetsList: presetsListWithDocs,
});
@ -136,7 +136,7 @@ describe('framework-preset-react-docgen', () => {
({
check: false,
reactDocgen: 'react-docgen-typescript',
} as Partial<TypescriptOptions>),
}) as Partial<TypescriptOptions>,
},
presetsList: [],
});

2
code/renderers/html/src/docs/sourceDecorator.test.ts
View File

@ -33,7 +33,7 @@ const makeContext = (name: string, parameters: any, args: any, extra?: object):
initialArgs: {},
...extra,
} as StoryContext);
}) as StoryContext;
describe('sourceDecorator', () => {
let mockChannel: { on: Mock; emit?: Mock };

11
code/renderers/react/src/docs/jsxDecorator.test.tsx
View File

@ -113,12 +113,11 @@ describe('renderJsx', () => {
});
it('forwardRef component', () => {
const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(function MyExoticComponent(
props,
_ref
) {
return <div>{props.children}</div>;
});
const MyExoticComponentRef = React.forwardRef<FC, PropsWithChildren>(
function MyExoticComponent(props, _ref) {
return <div>{props.children}</div>;
}
);
expect(renderJsx(createElement(MyExoticComponentRef, {}, 'I am forwardRef!'), {}))
.toMatchInlineSnapshot(`

6
code/renderers/react/src/public-types.ts
View File

@ -46,7 +46,7 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
render?: ArgsStoryFn<ReactRenderer, any>;
component?: infer Component;
args?: infer DefaultArgs;
}
},
]
? Simplify<
(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
@ -59,8 +59,8 @@ export type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
>
: never
: TMetaOrCmpOrArgs extends ComponentType<any>
? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>>
: StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>>
: StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
// This performs a downcast to function types that are mocks, when a mock fn is given to meta args.
type AddMocks<TArgs, DefaultArgs> = Simplify<{

4
code/renderers/svelte/src/public-types.ts
View File

@ -55,8 +55,8 @@ export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
>
: never
: MetaOrCmpOrArgs extends SvelteComponentTyped
? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>>
: StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>>
: StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
export type { SvelteRenderer };
export type Decorator<TArgs = StrictArgs> = DecoratorFunction<SvelteRenderer, TArgs>;

4
code/renderers/svelte/src/types.ts
View File

@ -24,7 +24,7 @@ interface MountProps {
type ComponentType<
Props extends Record<string, any> = any,
Events extends Record<string, any> = any
Events extends Record<string, any> = any,
> = new (options: ComponentConstructorOptions<Props>) => {
[P in keyof SvelteComponentTyped<Props> as P extends `$$${string}`
? never
@ -41,7 +41,7 @@ export interface SvelteRenderer<C extends SvelteComponentTyped = SvelteComponent
export interface SvelteStoryResult<
Props extends Record<string, any> = any,
Events extends Record<string, any> = any
Events extends Record<string, any> = any,
> {
Component?: ComponentType<Props>;
on?: Record<string, any> extends Events

2
code/renderers/vue3/src/docs/sourceDecorator.ts
View File

@ -86,7 +86,7 @@ function mapAttributesAndDirectives(props: Args) {
loc: { source: attributeSource(tranformKey(key), props[key]) }, // attribute value or directive value
exp: { isStatic: false, loc: { source: props[key] } }, // directive expression
modifiers: [''],
} as unknown as AttributeNode)
}) as unknown as AttributeNode
);
}
/**

4
code/renderers/vue3/src/public-types.ts
View File

@ -71,8 +71,8 @@ export type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
? ComponentPropsAndSlots<TCmpOrArgs>
: TCmpOrArgs extends FunctionalComponent<any>
? ComponentPropsAndSlots<TCmpOrArgs>
: TCmpOrArgs;
? ComponentPropsAndSlots<TCmpOrArgs>
: TCmpOrArgs;
export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;

2
code/renderers/web-components/src/docs/sourceDecorator.test.ts
View File

@ -29,7 +29,7 @@ const makeContext = (name: string, parameters: any, args: any, extra?: Partial<S
argTypes: {},
globals: {},
...extra,
} as StoryContext);
}) as StoryContext;
describe('sourceDecorator', () => {
let mockChannel: { on: Mock; emit?: Mock };

11
code/renderers/web-components/template/stories/demo-wc-card.stories.js
View File

@ -3,12 +3,11 @@ import './demo-wc-card';
export default {
component: 'demo-wc-card',
render: ({ backSide, header, rows, prefix }) =>
html`
<demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
><span slot="prefix">${prefix}</span>A simple card</demo-wc-card
>
`,
render: ({ backSide, header, rows, prefix }) => html`
<demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
><span slot="prefix">${prefix}</span>A simple card</demo-wc-card
>
`,
};
export const Front = {

2
code/ui/components/src/components/icon/icon.tsx
View File

@ -5,7 +5,7 @@ import { styled } from '@storybook/theming';
import { deprecate, logger } from '@storybook/client-logger';
export type IconType = keyof typeof icons;
type NewIconTypes = typeof icons[IconType];
type NewIconTypes = (typeof icons)[IconType];
const Svg = styled.svg`
display: inline-block;

2
code/ui/manager/src/components/preview/Preview.tsx
View File

@ -238,7 +238,7 @@ function filterTabs(panels: Addon_BaseType[], parameters: Record<string, any>) {
const t = arrTabs.find((tab) => tab.id === panel.id);
return t === undefined || t.id === 'canvas' || !t.hidden;
})
.map((panel, index) => ({ ...panel, index } as Addon_BaseType))
.map((panel, index) => ({ ...panel, index }) as Addon_BaseType)
.sort((p1, p2) => {
/* eslint-disable @typescript-eslint/naming-convention */
const tab_1 = arrTabs.find((tab) => tab.id === p1.id);

168
code/ui/manager/src/components/sidebar/Refs.tsx
View File

@ -77,94 +77,94 @@ const CollapseButton = styled.button(({ theme }) => ({
},
}));
export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(function Ref(
props
) {
const { docsOptions } = useStorybookState();
const api = useStorybookApi();
const {
index,
id: refId,
title = refId,
isLoading: isLoadingMain,
isBrowsing,
selectedStoryId,
highlightedRef,
setHighlighted,
loginUrl,
type,
expanded = true,
indexError,
previewInitialized,
} = props;
const length = useMemo(() => (index ? Object.keys(index).length : 0), [index]);
const indicatorRef = useRef<HTMLElement>(null);
export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(
function Ref(props) {
const { docsOptions } = useStorybookState();
const api = useStorybookApi();
const {
index,
id: refId,
title = refId,
isLoading: isLoadingMain,
isBrowsing,
selectedStoryId,
highlightedRef,
setHighlighted,
loginUrl,
type,
expanded = true,
indexError,
previewInitialized,
} = props;
const length = useMemo(() => (index ? Object.keys(index).length : 0), [index]);
const indicatorRef = useRef<HTMLElement>(null);
const isMain = refId === DEFAULT_REF_ID;
const isLoadingInjected =
(type === 'auto-inject' && !previewInitialized) || type === 'server-checked';
const isLoading = isLoadingMain || isLoadingInjected || type === 'unknown';
const isError = !!indexError;
const isEmpty = !isLoading && length === 0;
const isAuthRequired = !!loginUrl && length === 0;
const isMain = refId === DEFAULT_REF_ID;
const isLoadingInjected =
(type === 'auto-inject' && !previewInitialized) || type === 'server-checked';
const isLoading = isLoadingMain || isLoadingInjected || type === 'unknown';
const isError = !!indexError;
const isEmpty = !isLoading && length === 0;
const isAuthRequired = !!loginUrl && length === 0;
const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
const [isExpanded, setExpanded] = useState<boolean>(expanded);
const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
const [isExpanded, setExpanded] = useState<boolean>(expanded);
useEffect(() => {
if (index && selectedStoryId && index[selectedStoryId]) {
setExpanded(true);
}
}, [setExpanded, index, selectedStoryId]);
useEffect(() => {
if (index && selectedStoryId && index[selectedStoryId]) {
setExpanded(true);
}
}, [setExpanded, index, selectedStoryId]);
const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
const setHighlightedItemId = useCallback(
(itemId: string) => setHighlighted({ itemId, refId }),
[setHighlighted]
);
const setHighlightedItemId = useCallback(
(itemId: string) => setHighlighted({ itemId, refId }),
[setHighlighted]
);
const onSelectStoryId = useCallback(
(storyId: string) => api && api.selectStory(storyId, undefined, { ref: !isMain && refId }),
[api, isMain, refId]
);
const onSelectStoryId = useCallback(
(storyId: string) => api && api.selectStory(storyId, undefined, { ref: !isMain && refId }),
[api, isMain, refId]
);
return (
<>
{isMain || (
<RefHead
aria-label={`${isExpanded ? 'Hide' : 'Show'} ${title} stories`}
aria-expanded={isExpanded}
>
<CollapseButton data-action="collapse-ref" onClick={handleClick}>
<CollapseIcon isExpanded={isExpanded} />
<RefTitle title={title}>{title}</RefTitle>
</CollapseButton>
<RefIndicator {...props} state={state} ref={indicatorRef} />
</RefHead>
)}
{isExpanded && (
<Wrapper data-title={title} isMain={isMain}>
{state === 'auth' && <AuthBlock id={refId} loginUrl={loginUrl} />}
{state === 'error' && <ErrorBlock error={indexError} />}
{state === 'loading' && <LoaderBlock isMain={isMain} />}
{state === 'empty' && <EmptyBlock isMain={isMain} />}
{state === 'ready' && (
<Tree
status={props.status}
isBrowsing={isBrowsing}
isMain={isMain}
refId={refId}
data={index}
docsMode={docsOptions.docsMode}
selectedStoryId={selectedStoryId}
onSelectStoryId={onSelectStoryId}
highlightedRef={highlightedRef}
setHighlightedItemId={setHighlightedItemId}
/>
)}
</Wrapper>
)}
</>
);
});
return (
<>
{isMain || (
<RefHead
aria-label={`${isExpanded ? 'Hide' : 'Show'} ${title} stories`}
aria-expanded={isExpanded}
>
<CollapseButton data-action="collapse-ref" onClick={handleClick}>
<CollapseIcon isExpanded={isExpanded} />
<RefTitle title={title}>{title}</RefTitle>
</CollapseButton>
<RefIndicator {...props} state={state} ref={indicatorRef} />
</RefHead>
)}
{isExpanded && (
<Wrapper data-title={title} isMain={isMain}>
{state === 'auth' && <AuthBlock id={refId} loginUrl={loginUrl} />}
{state === 'error' && <ErrorBlock error={indexError} />}
{state === 'loading' && <LoaderBlock isMain={isMain} />}
{state === 'empty' && <EmptyBlock isMain={isMain} />}
{state === 'ready' && (
<Tree
status={props.status}
isBrowsing={isBrowsing}
isMain={isMain}
refId={refId}
data={index}
docsMode={docsOptions.docsMode}
selectedStoryId={selectedStoryId}
onSelectStoryId={onSelectStoryId}
highlightedRef={highlightedRef}
setHighlightedItemId={setHighlightedItemId}
/>
)}
</Wrapper>
)}
</>
);
}
);

2
code/ui/manager/src/components/sidebar/useHighlighted.ts
View File

@ -32,7 +32,7 @@ export const useHighlighted = ({
}: HighlightedProps): [
Highlight,
Dispatch<SetStateAction<Highlight>>,
MutableRefObject<Highlight>
MutableRefObject<Highlight>,
] => {
const initialHighlight = fromSelection(selected);
const highlightedRef = useRef<Highlight>(initialHighlight);

21
code/ui/manager/src/globals/globals-module-info.ts
View File

@ -21,12 +21,15 @@ import { globalPackages, globalsNameReferenceMap } from './globals';
* The `runtime.ts` file is used inside the manager's browser code runtime.
*/
export const globalsModuleInfoMap = globalPackages.reduce((acc, key) => {
acc[key] = {
type: 'esm',
varName: globalsNameReferenceMap[key],
namedExports: Exports[key],
defaultExport: true,
};
return acc;
}, {} as Required<Record<keyof typeof globalsNameReferenceMap, Required<ModuleInfo>>>);
export const globalsModuleInfoMap = globalPackages.reduce(
(acc, key) => {
acc[key] = {
type: 'esm',
varName: globalsNameReferenceMap[key],
namedExports: Exports[key],
defaultExport: true,
};
return acc;
},
{} as Required<Record<keyof typeof globalsNameReferenceMap, Required<ModuleInfo>>>
);

26
code/ui/manager/src/utils/tree.ts
View File

@ -33,18 +33,20 @@ export const getParents = memoize(1000)((id: string, dataset: Dataset): Item[] =
export const getAncestorIds = memoize(1000)((data: IndexHash, id: string): string[] =>
getParents(id, data).map((item) => item.id)
);
export const getDescendantIds = memoize(1000)(
(data: IndexHash, id: string, skipLeafs: boolean): string[] => {
const entry = data[id];
const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
return children.reduce((acc, childId) => {
const child = data[childId];
if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) return acc;
acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
return acc;
}, []);
}
);
export const getDescendantIds = memoize(1000)((
data: IndexHash,
id: string,
skipLeafs: boolean
): string[] => {
const entry = data[id];
const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
return children.reduce((acc, childId) => {
const child = data[childId];
if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) return acc;
acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
return acc;
}, []);
});
export function getPath(item: Item, ref: RefType): string[] {
const parent = item.type !== 'root' && item.parent ? ref.index[item.parent] : null;