Merge branch 'next' into fix/regression-root-to-storybook-root

MIGRATION.md

@@ -43,8 +43,9 @@
   - [7.0 Deprecations](#70-deprecations)
     - [`Story` type deprecated](#story-type-deprecated)
     - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
-    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
+    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
     - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
+    - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
@@ -864,6 +865,47 @@ import type { SvelteRenderer } from '@storybook/svelte';
 // etc.
 ```
 
+#### Renamed `DecoratorFn` to `Decorator`
+
+In 6.x you could import the type `DecoratorFn`:
+
+```ts
+import type { DecoratorFn } from '@storybook/react';
+```
+
+This type is deprecated in 7.0, instead you can use the type `Decorator`, which is now available for all renderers:
+
+```ts
+import type { Decorator } from '@storybook/react';
+// or
+import type { Decorator } from '@storybook/vue';
+// or
+import type { Decorator } from '@storybook/svelte';
+// etc.
+```
+
+The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this:
+
+```tsx
+import type { Decorator } from '@storybook/react';
+import { LocaleProvider } from './locale';
+
+const withLocale: Decorator<{ locale: 'en' | 'es' }> = (Story, { args }) => (
+  <LocaleProvider lang={args.locale}>
+    <Story />
+  </LocaleProvider>
+);
+```
+
+If you want to use `Decorator` in a backwards compatible way to `DecoratorFn`, you can use:
+
+```tsx
+import type { Args, Decorator } from '@storybook/react';
+
+// Decorator<Args> behaves the same as DecoratorFn (without generic)
+const withLocale: Decorator<Args> = (Story, { args }) => // args has type { [name: string]: any }
+```
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade

README.md

@@ -1,7 +1,12 @@
 <p align="center">
   <a href="https://storybook.js.org/">
-    <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png">
+      <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
+    </picture>
+
   </a>
+
 </p>
 
 <p align="center">Build bulletproof UI components faster</p>

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",

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",

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<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;

code/jest.config.js

@@ -1,21 +1,17 @@
 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/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 = {

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",

code/lib/builder-manager/src/utils/files.test.ts

@@ -1,17 +1,27 @@
+import { platform } from 'os';
 import { sanitizePath } from './files';
 
+const os = platform();
+const isWindows = os === 'win32';
+
 test('sanitizePath', () => {
-  const addonsDir = '/Users/username/Projects/projectname/storybook';
+  const addonsDir = isWindows
+    ? 'C:\\Users\\username\\Projects\\projectname\\storybook'
+    : '/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',
+    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(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'
   );
   expect(url).toMatchInlineSnapshot(
     `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"`

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 };
 }

code/lib/cli/src/helpers.ts

@@ -198,6 +198,7 @@ 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(
@@ -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(join(getCliDir(), 'rendererAssets/common'), destinationPath, {
+    overwrite: true,
+  });
   await fse.copy(await componentsPath(), destinationPath, { overwrite: true });
 }
 

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",

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",

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",

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}`));
+    });
   });
 };
 

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"
   },

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",

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)',

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;
             }
           }
@@ -485,11 +490,6 @@ 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(', ')}`);
-      }
     }
 
     if (removed) {

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"

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",

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",

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"