Merge remote-tracking branch 'origin/next' into tom/sb-829-add-story-tags-to-the-index-index

2025-04-06 00:51:04 +08:00 · 2022-10-27 12:43:09 +11:00 · 2022-10-27 12:43:09 +11:00 · 40c60621d9
commit 40c60621d9
parent 00d7cdf5e4 cf7d54b8c4
29 changed files with 286 additions and 211 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -283,7 +283,7 @@ jobs:
          command: |
            cd code
            yarn coverage
-  chromatic-storybook-ui:
+  chromatic-internal-storybooks:
    executor:
      class: medium+
      name: sb_node_16_browsers
@ -297,6 +297,7 @@ jobs:
          command: |
            cd code
            yarn storybook:ui:chromatic
+            yarn storybook:blocks:chromatic
      - store_test_results:
          path: test-results
  ## new workflow
@ -418,7 +419,7 @@ workflows:
      - script-unit-tests:
          requires:
            - build
-      - chromatic-storybook-ui:
+      - chromatic-internal-storybooks:
          requires:
            - build
      - coverage:
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -2,9 +2,8 @@

 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
  - [Alpha release notes](#alpha-release-notes)
-  - [Breaking changes](#breaking-changes)
+  - [7.0 breaking changes](#70-breaking-changes)
    - [register.js removed](#registerjs-removed)
-    - [`Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`](#story-type-change-to-storyfn-and-the-new-story-type-now-refers-to-storyobj)
    - [Change of root html IDs](#change-of-root-html-ids)
    - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
    - [Modern browser support](#modern-browser-support)
@ -38,11 +37,12 @@
    - [External Docs](#external-docs)
    - [MDX2 upgrade](#mdx2-upgrade)
    - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
+  - [7.0 Deprecations](#70-deprecations)
+    - [`Story` type deprecated](#story-type-deprecated)
 - [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)
  - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
-  - [Deprecated register.js](#deprecated-registerjs)
  - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
  - [Vite builder renamed](#vite-builder-renamed)
  - [Docs framework refactor for React](#docs-framework-refactor-for-react)
@ -51,6 +51,8 @@
    - [Auto-title filename case](#auto-title-filename-case)
    - [Auto-title redundant filename](#auto-title-redundant-filename)
    - [Auto-title always prefixes](#auto-title-always-prefixes)
+  - [6.5 Deprecations](#65-deprecations)
+    - [Deprecated register.js](#deprecated-registerjs)
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
  - [Automigrate](#automigrate)
  - [CRA5 upgrade](#cra5-upgrade)
@ -247,7 +249,7 @@ Storybook 7.0 is in early alpha. During the alpha, we are making a large number

 In the meantime, these migration notes are the best available documentation on things you should know upgrading to 7.0.

-### Breaking changes
+### 7.0 breaking changes

 #### register.js removed

@ -257,46 +259,6 @@ In 7.0, most of Storybook's addons now export a `manager.js` entry point, which

 If your `.manager.js` config references `register.js` of any of the following addons, you can remove it: `a11y`, `actions`, `backgrounds`, `controls`, `interactions`, `jest`, `links`, `measure`, `outline`, `toolbars`, `viewport`.

-#### `Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`
-
-In 6.x you were able to do this:
-
-```js
-import type { Story } from '@storybook/react';
-
-export const MyStory: Story = () => <div />;
-```
-
-But this will produce an error in 7.0 because `Story` is now a type that refers to the `StoryObj` type.
-You must now use the new `StoryFn` type:
-
-```js
-import type { StoryFn } from '@storybook/react';
-
-export const MyStory: StoryFn = () => <div />;
-```
-
-This change was done to improve the experience of writing CSF3 stories, which is the recommended way of writing stories in 7.0:
-
-```js
-import type { Story } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
-
-export default {
-  component: Button,
-};
-
-export const Primary: Story<ButtonProps> = {
-  variant: 'primary',
-};
-```
-
-If you want to be explicit, you can also import `StoryObj` instead of `Story`, they are the same type.
-
-For Storybook for react users: We also changed `ComponentStory` to refer to `ComponentStoryObj` instead of `ComponentStoryFn`, so if you were using `ComponentStory` you should now import/use `ComponentStoryFn` instead.
-
-You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
-
 #### Change of root html IDs

 The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.
@ -751,6 +713,55 @@ As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing

 Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.

+### 7.0 Deprecations
+
+#### `Story` type deprecated
+
+In 6.x you were able to do this:
+
+```ts
+import type { Story } from '@storybook/react';
+
+export const MyStory: Story = () => <div />;
+```
+
+But this will produce a deprecation warning in 7.0 because `Story` has been deprecated.
+To fix the deprecation warning, use the `StoryFn` type:
+
+```ts
+import type { StoryFn } from '@storybook/react';
+
+export const MyStory: StoryFn = () => <div />;
+```
+
+This change is part of our move to CSF3, which uses objects instead of functions to represent stories.
+You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+
+#### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated
+
+The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter.
+
+```ts
+import type { Story } from '@storybook/react';
+import { Button, ButtonProps } from './Button';
+
+// This works in 7.0, making the ComponentX types redundant.
+const meta: Meta<typeof Button> = { component: Button };
+
+export const CSF3Story: StoryObj<typeof Button> = { args: { label: 'Label' } };
+
+export const CSF2Story: StoryFn<typeof Button> = (args) => <Button {...args} />;
+CSF2Story.args = { label: 'Label' };
+
+// Passing props directly still works as well.
+const meta: Meta<ButtonProps> = { component: Button };
+
+export const CSF3Story: StoryObj<ButtonProps> = { args: { label: 'Label' } };
+
+export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+CSF2Story.args = { label: 'Label' };
+```
+
 ## From version 6.4.x to 6.5.0

 ### Vue 3 upgrade
@ -784,22 +795,6 @@ addons.setConfig({
 });
 ```

-### Deprecated register.js
-
-In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
-
-Before:
-
-```js
-module.exports = { addons: ['my-addon/register.js'] };
-```
-
-After:
-
-```js
-module.exports = { addons: ['my-addon'] };
-```
-
 ### Dropped support for addon-actions addDecorators

 Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
@ -917,6 +912,24 @@ In 6.5, the final titles would be:

 <!-- markdown-link-check-disable -->

+### 6.5 Deprecations
+
+#### Deprecated register.js
+
+In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
+
+Before:
+
+```js
+module.exports = { addons: ['my-addon/register.js'] };
+```
+
+After:
+
+```js
+module.exports = { addons: ['my-addon'] };
+```
+
 ## From version 6.3.x to 6.4.0

 ### Automigrate
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@ -30,8 +30,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<AngularFramework, TArgs>;

 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
--- a/code/lib/addons/src/hooks.test.js
+++ b/code/lib/addons/src/hooks.test.js
@ -1,14 +1,12 @@
 import { useParameter, useStoryContext } from './hooks';

-const { window: globalWindow } = global;
-
 describe('addons/hooks', () => {
  beforeEach(() => {
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = undefined;
+    global.STORYBOOK_HOOKS_CONTEXT = undefined;
  });

  afterEach(() => {
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = undefined;
+    global.STORYBOOK_HOOKS_CONTEXT = undefined;
  });

  describe('useStoryContext', () => {
@ -21,7 +19,7 @@ describe('addons/hooks', () => {

  describe('useParameter', () => {
    beforeEach(() => {
-      globalWindow.STORYBOOK_HOOKS_CONTEXT = {
+      global.STORYBOOK_HOOKS_CONTEXT = {
        currentContext: {
          parameters: {
            'undefined key': undefined,
--- a/code/lib/addons/src/hooks.ts
+++ b/code/lib/addons/src/hooks.ts
@ -19,8 +19,6 @@ import {
 // eslint-disable-next-line import/no-cycle
 import { addons } from './index';

-const { window: globalWindow } = global;
-
 interface Hook {
  name: string;
  memoizedState?: any;
@ -156,10 +154,10 @@ function hookify<TFramework extends AnyFramework>(fn: AbstractFunction) {
    }
    hooks.nextHookIndex = 0;

-    const prevContext = globalWindow.STORYBOOK_HOOKS_CONTEXT;
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = hooks;
+    const prevContext = global.STORYBOOK_HOOKS_CONTEXT;
+    global.STORYBOOK_HOOKS_CONTEXT = hooks;
    const result = fn(...args);
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = prevContext;
+    global.STORYBOOK_HOOKS_CONTEXT = prevContext;

    if (hooks.currentPhase === 'UPDATE' && hooks.getNextHook() != null) {
      throw new Error(
@ -218,7 +216,7 @@ const invalidHooksError = () =>
  new Error('Storybook preview hooks can only be called inside decorators and story functions.');

 function getHooksContextOrNull<TFramework extends AnyFramework>(): HooksContext<TFramework> | null {
-  return globalWindow.STORYBOOK_HOOKS_CONTEXT || null;
+  return global.STORYBOOK_HOOKS_CONTEXT || null;
 }

 function getHooksContextOrThrow<TFramework extends AnyFramework>(): HooksContext<TFramework> {
--- a/code/lib/addons/src/main.ts
+++ b/code/lib/addons/src/main.ts
@ -21,8 +21,6 @@ export function isSupportedType(type: Addon_Types): boolean {
  return !!Object.values(Addon_TypesEnum).find((typeVal) => typeVal === type);
 }

-export type Types = Addon_TypesEnum | string;
-
 export class AddonStore {
  constructor() {
    this.promise = new Promise((res) => {
@ -76,7 +74,7 @@ export class AddonStore {
    this.serverChannel = channel;
  };

-  getElements = (type: Types): Addon_Collection => {
+  getElements = (type: Addon_Types): Addon_Collection => {
    if (!this.elements[type]) {
      this.elements[type] = {};
    }
--- a/code/lib/api/src/modules/addons.ts
+++ b/code/lib/api/src/modules/addons.ts
@ -1,23 +1,15 @@
-import type { API_Collection, API_Panels, API_StateMerger, API_Types } from '@storybook/types';
+import type { Addon_Types, API_Collection, API_Panels, API_StateMerger } from '@storybook/types';
+import { Addon_TypesEnum } from '@storybook/types';
 import type { ModuleFn } from '../index';
 import { Options } from '../store';

-// eslint-disable-next-line @typescript-eslint/naming-convention
-enum types {
-  TAB = 'tab',
-  PANEL = 'panel',
-  TOOL = 'tool',
-  PREVIEW = 'preview',
-  NOTES_ELEMENT = 'notes-element',
-}
-
 export interface SubState {
  selectedPanel: string;
  addons: Record<string, never>;
 }

 export interface SubAPI {
-  getElements: <T>(type: API_Types) => API_Collection<T>;
+  getElements: <T>(type: Addon_Types) => API_Collection<T>;
  getPanels: () => API_Panels;
  getStoryPanels: () => API_Panels;
  getSelectedPanel: () => string;
@ -46,7 +38,7 @@ export function ensurePanel(panels: API_Panels, selectedPanel?: string, currentP
 export const init: ModuleFn<SubAPI, SubState> = ({ provider, store, fullAPI }) => {
  const api: SubAPI = {
    getElements: (type) => provider.getElements(type),
-    getPanels: () => api.getElements(types.PANEL),
+    getPanels: () => api.getElements(Addon_TypesEnum.PANEL),
    getStoryPanels: () => {
      const allPanels = api.getPanels();
      const { storyId } = store.getState();
--- a/code/lib/core-client/src/manager/provider.ts
+++ b/code/lib/core-client/src/manager/provider.ts
@ -1,8 +1,8 @@
 import global from 'global';
 import { Provider } from '@storybook/ui';
 import { Channel } from '@storybook/channels';
-import { addons, AddonStore, type Types } from '@storybook/addons';
-import type { Addon_Config } from '@storybook/types';
+import type { Addon_Types, Addon_Config } from '@storybook/types';
+import { addons, AddonStore } from '@storybook/addons';
 import * as postMessage from '@storybook/channel-postmessage';
 import * as webSocket from '@storybook/channel-websocket';
 import { CHANNEL_CREATED } from '@storybook/core-events';
@ -34,7 +34,7 @@ export default class ReactProvider extends Provider {
    }
  }

-  getElements(type: Types) {
+  getElements(type: Addon_Types) {
    return this.addons.getElements(type);
  }

--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type { RenderData as RouterData } from '../../../router/src/router';
 import type { ThemeVars } from '../../../theming/src/types';
-import {
+import type {
  AnyFramework,
  Args,
  ArgsStoryFn as ArgsStoryFnForFramework,
@ -175,18 +175,18 @@ export type Addon_BaseDecorators<StoryFnReturnType> = Array<
  (story: () => StoryFnReturnType, context: Addon_StoryContext) => StoryFnReturnType
 >;

-export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
+export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
  /**
   * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
   * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
   */
-  args?: Partial<Args>;
+  args?: Partial<TArgs>;

  /**
   * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
   * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
   */
-  argTypes?: Addons_ArgTypes<Args>;
+  argTypes?: Addons_ArgTypes<TArgs>;

  /**
   * Custom metadata for a story.
@ -205,7 +205,7 @@ export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
  /**
   * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
   */
-  render?: (args: Args, context: Addon_StoryContext) => StoryFnReturnType;
+  render?: (args: TArgs, context: Addon_StoryContext) => StoryFnReturnType;

  /**
   * Function that is executed after the story is rendered.
@ -213,8 +213,8 @@ export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
  play?: (context: Addon_StoryContext) => Promise<void> | void;
 }

-export interface Addon_Annotations<Args, StoryFnReturnType>
-  extends Addon_BaseAnnotations<Args, StoryFnReturnType> {
+export interface Addon_Annotations<TArgs, StoryFnReturnType>
+  extends Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
  /**
   * Used to only include certain named exports as stories. Useful when you want to have non-story exports such as mock data or ignore a few stories.
   * @example
@ -288,20 +288,20 @@ export interface Addon_BaseMeta<ComponentType> {
  subcomponents?: Record<string, ComponentType>;
 }

-export type Addon_BaseStoryObject<Args, StoryFnReturnType> = {
+export type Addon_BaseStoryObject<TArgs, StoryFnReturnType> = {
  /**
   * Override the display name in the UI
   */
  storyName?: string;
 };

-export type Addon_BaseStoryFn<Args, StoryFnReturnType> = {
-  (args: Args, context: Addon_StoryContext): StoryFnReturnType;
-} & Addon_BaseStoryObject<Args, StoryFnReturnType>;
+export type Addon_BaseStoryFn<TArgs, StoryFnReturnType> = {
+  (args: TArgs, context: Addon_StoryContext): StoryFnReturnType;
+} & Addon_BaseStoryObject<TArgs, StoryFnReturnType>;

-export type BaseStory<Args, StoryFnReturnType> =
-  | Addon_BaseStoryFn<Args, StoryFnReturnType>
-  | Addon_BaseStoryObject<Args, StoryFnReturnType>;
+export type BaseStory<TArgs, StoryFnReturnType> =
+  | Addon_BaseStoryFn<TArgs, StoryFnReturnType>
+  | Addon_BaseStoryObject<TArgs, StoryFnReturnType>;

 export interface Addon_RenderOptions {
  active?: boolean;
--- a/code/lib/types/src/modules/api-stories.ts
+++ b/code/lib/types/src/modules/api-stories.ts
@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
 import type { API_ViewMode } from './api';
 import type { DocsOptions } from './core-common';
 import type {
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@ -1,29 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type { RenderData } from '../../../router/src/router';
 import type { Channel } from '../../../channels/src';
 import type { ThemeVars } from '../../../theming/src/types';
 import type { ViewMode } from './csf';
 import type { DocsOptions } from './core-common';
-import {
+import type {
  API_HashEntry,
  API_SetStoriesStory,
  API_SetStoriesStoryData,
  API_StoriesHash,
  API_StoryIndex,
 } from './api-stories';
+import type { Addon_Types } from './addons';

 export type API_ViewMode = 'story' | 'info' | 'settings' | 'page' | undefined | string;

-enum types {
-  TAB = 'tab',
-  PANEL = 'panel',
-  TOOL = 'tool',
-  PREVIEW = 'preview',
-  NOTES_ELEMENT = 'notes-element',
-}
-
-export type API_Types = types | string;
 export interface API_RenderOptions {
  active: boolean;
  key: string;
@ -44,7 +36,7 @@ export interface API_MatchOptions {

 export interface API_Addon {
  title: string;
-  type?: API_Types;
+  type?: Addon_Types;
  id?: string;
  route?: (routeOptions: API_RouteOptions) => string;
  match?: (matchOptions: API_MatchOptions) => boolean;
--- a/code/lib/types/src/modules/core-client.ts
+++ b/code/lib/types/src/modules/core-client.ts
@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { Store_RenderContext } from './store';
+import type { Store_RenderContext } from './store';
 // import { Store_RenderContext, Store_WebProjectAnnotations } from './store';
 // import { ArgsStoryFn } from './csf';

--- a/code/lib/types/src/modules/csf.ts
+++ b/code/lib/types/src/modules/csf.ts
@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type {
  AnnotatedStoryFn,
  AnyFramework,
@ -60,7 +60,7 @@ import type {
 } from '@storybook/csf';
 import { Addon_OptionsParameter } from './addons';

-export {
+export type {
  AnnotatedStoryFn,
  AnyFramework,
  Args,
--- a/code/package.json
+++ b/code/package.json
@ -75,9 +75,12 @@
    "publish:debug": "npm run publish:latest -- --npm-tag=debug --no-push",
    "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
    "publish:next": "npm run publish:latest -- --npm-tag=next",
-    "storybook:ui": "./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
-    "storybook:ui:build": "./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
-    "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=$CHROMATIC_TOKEN_STORYBOOK_UI --only-changed --exit-zero-on-changes --exit-once-uploaded",
+    "storybook:blocks": "BLOCKS_ONLY=true yarn storybook:ui",
+    "storybook:blocks:build": "BLOCKS_ONLY=true yarn storybook:ui:build",
+    "storybook:blocks:chromatic": "BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
+    "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
+    "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
+    "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
    "task": "cd .. && yarn task",
    "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js",
    "test:cli": "npm --prefix lib/cli run test"
--- a/code/renderers/html/src/public-types.ts
+++ b/code/renderers/html/src/public-types.ts
@ -31,8 +31,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;

 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
--- a/code/renderers/preact/src/public-types.ts
+++ b/code/renderers/preact/src/public-types.ts
@ -30,8 +30,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;

 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
--- a/code/renderers/react/src/public-types.ts
+++ b/code/renderers/react/src/public-types.ts
@ -19,31 +19,32 @@ type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 *
 * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
 */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends ComponentType<infer CmpArgs>
-  ? ComponentAnnotations<ReactFramework, CmpArgs>
-  : ComponentAnnotations<ReactFramework, CmpOrArgs>;
+export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
+  ? ComponentAnnotations<ReactFramework, ComponentProps<TCmpOrArgs>>
+  : ComponentAnnotations<ReactFramework, TCmpOrArgs>;

 /**
 * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
+  ? AnnotatedStoryFn<ReactFramework, ComponentProps<TCmpOrArgs>>
+  : AnnotatedStoryFn<ReactFramework, TCmpOrArgs>;

 /**
 * Story function that represents a CSFv3 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-
-export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
  render?: ArgsStoryFn<ReactFramework, any>;
  component?: infer Component;
  args?: infer DefaultArgs;
 }
  ? Simplify<
      (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
-        ArgsFromMeta<ReactFramework, MetaOrCmpOrArgs>
+        ArgsFromMeta<ReactFramework, TMetaOrCmpOrArgs>
    > extends infer TArgs
    ? StoryAnnotations<
        ReactFramework,
@ -51,20 +52,21 @@ export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
        SetOptional<TArgs, Extract<keyof TArgs, keyof (DefaultArgs & ActionArgs<TArgs>)>>
      >
    : never
-  : MetaOrCmpOrArgs extends ComponentType<any>
+  : TMetaOrCmpOrArgs extends ComponentType<any>
  ? StoryAnnotations<
      ReactFramework,
-      ComponentProps<MetaOrCmpOrArgs>,
-      ComponentProps<MetaOrCmpOrArgs>
+      ComponentProps<TMetaOrCmpOrArgs>,
+      ComponentProps<TMetaOrCmpOrArgs>
    >
-  : StoryAnnotations<ReactFramework, MetaOrCmpOrArgs>;
+  : StoryAnnotations<ReactFramework, TMetaOrCmpOrArgs>;

 type ActionArgs<RArgs> = {
  [P in keyof RArgs as ((...args: any[]) => void) extends RArgs[P] ? P : never]: RArgs[P];
 };

 /**
- * @deprecated Use `Meta` instead.
+ * @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
+ *
 * For the common case where a component's stories are simple components that receives args as props:
 *
 * ```tsx
@ -74,6 +76,10 @@ type ActionArgs<RArgs> = {
 export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;

 /**
+ * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
 * For the common case where a (CSFv2) story is a simple component that receives args as props:
 *
 * ```tsx
@ -83,7 +89,7 @@ export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
 export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;

 /**
- * @deprecated Use `StoryObj` instead.
+ * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
 *
 * For the common case where a (CSFv3) story is a simple component that receives args as props:
 *
@ -96,18 +102,20 @@ export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
 export type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;

 /**
-
- /**
- * @deprecated Use `StoryObj` instead.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
 *
- * Story function that represents a CSFv3 component example.
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
 export type Story<TArgs = Args> = StoryFn<TArgs>;

 /**
- * @deprecated Use StoryObj instead.
+ * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.
 *
 * For the common case where a (CSFv3) story is a simple component that receives args as props:
 *
@ -117,4 +125,4 @@ export type Story<TArgs = Args> = StoryFn<TArgs>;
 * }
 * ```
 */
-export type ComponentStory<T extends JSXElement> = ComponentStoryObj<T>;
+export type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
--- a/code/renderers/react/template/stories/decorators.stories.tsx
+++ b/code/renderers/react/template/stories/decorators.stories.tsx
@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';

 const Component: FC = () => <p>Story</p>;

@ -13,9 +13,9 @@ export default {
      </>
    ),
  ],
-} as ComponentMeta<typeof Component>;
+} as Meta<typeof Component>;

-export const All: ComponentStory<typeof Component> = {
+export const All: StoryObj<typeof Component> = {
  decorators: [
    (Story) => (
      <>
--- a/code/renderers/server/src/public-types.ts
+++ b/code/renderers/server/src/public-types.ts
@ -30,8 +30,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;

 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@ -25,7 +25,9 @@ export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponentTyped<infe
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<SvelteFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponentTyped<infer Props>
+  ? AnnotatedStoryFn<SvelteFramework, Props>
+  : AnnotatedStoryFn<SvelteFramework, TCmpOrArgs>;

 /**
 * Story function that represents a CSFv3 component example.
--- a/code/renderers/vue/src/public-types.ts
+++ b/code/renderers/vue/src/public-types.ts
@ -19,42 +19,41 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
 *
 * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
 */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends Component<any>
-  ? ComponentAnnotations<
-      VueFramework,
-      unknown extends ComponentProps<CmpOrArgs> ? CmpOrArgs : ComponentProps<CmpOrArgs>
-    >
-  : ComponentAnnotations<VueFramework, CmpOrArgs>;
+export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;

 /**
 * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;

 /**
 * Story function that represents a CSFv3 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
  render?: ArgsStoryFn<VueFramework, any>;
  component?: infer C;
  args?: infer DefaultArgs;
 }
-  ? MetaOrCmpOrArgs extends Component<any>
-    ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
-    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, MetaOrCmpOrArgs>> extends infer TArgs
+  ? TMetaOrCmpOrArgs extends Component<any> // needed because StoryObj<typeof Button> falls into this branch, see test
+    ? StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
+    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>> extends infer TArgs
    ? StoryAnnotations<
        VueFramework,
        TArgs,
        SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
      >
    : never
-  : MetaOrCmpOrArgs extends Component<any>
-  ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
-  : StoryAnnotations<VueFramework, MetaOrCmpOrArgs>;
+  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

 type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
  ? P
@ -62,8 +61,17 @@ type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
  ? P
  : unknown;

+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Component<any>
+  ? unknown extends ComponentProps<TCmpOrArgs>
+    ? TCmpOrArgs
+    : ComponentProps<TCmpOrArgs>
+  : TCmpOrArgs;
+
 /**
 * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
 * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
--- a/code/renderers/vue3/src/public-types.test.ts
+++ b/code/renderers/vue3/src/public-types.test.ts
@ -3,11 +3,11 @@ import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf';
 import { expectTypeOf } from 'expect-type';
 import { SetOptional } from 'type-fest';
 import { ComponentOptions, FunctionalComponent, h } from 'vue';
-import Button from './__tests__/Button.vue';
-import Decorator2TsVue from './__tests__/Decorator2.vue';
-import DecoratorTsVue from './__tests__/Decorator.vue';
 import { DecoratorFn, Meta, StoryObj } from './public-types';
 import { VueFramework } from './types';
+import Button from './__tests__/Button.vue';
+import DecoratorTsVue from './__tests__/Decorator.vue';
+import Decorator2TsVue from './__tests__/Decorator2.vue';

 describe('Meta', () => {
  test('Generic parameter of Meta can be a component', () => {
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@ -17,29 +17,33 @@ import type { VueFramework } from './types';
 *
 * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
 */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends ComponentOptions<infer Props>
-  ? ComponentAnnotations<VueFramework, unknown extends Props ? CmpOrArgs : Props>
-  : ComponentAnnotations<VueFramework, CmpOrArgs>;
+export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;

 /**
 * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;

 /**
 * Story function that represents a CSFv3 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
  render?: ArgsStoryFn<VueFramework, any>;
  component?: infer Component;
  args?: infer DefaultArgs;
 }
  ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<VueFramework, MetaOrCmpOrArgs>
+      ComponentProps<Component> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>
    > extends infer TArgs
    ? StoryAnnotations<
        VueFramework,
@ -47,21 +51,29 @@ export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
        SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
      >
    : never
-  : MetaOrCmpOrArgs extends ConcreteComponent<any>
-  ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
-  : StoryAnnotations<VueFramework, MetaOrCmpOrArgs>;
+  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;

-type ComponentProps<Component> = Component extends ComponentOptions<infer P>
+type ComponentProps<C> = C extends ComponentOptions<infer P>
  ? P
-  : Component extends FunctionalComponent<infer P>
+  : C extends FunctionalComponent<infer P>
  ? P
  : unknown;
+
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<any>
+  ? unknown extends ComponentProps<TCmpOrArgs>
+    ? TCmpOrArgs
+    : ComponentProps<TCmpOrArgs>
+  : TCmpOrArgs;
+
 /**
- * @deprecated Use `StoryObj` instead.
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;

 export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;
--- a/code/renderers/web-components/src/public-types.ts
+++ b/code/renderers/web-components/src/public-types.ts
@ -28,8 +28,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TAr
 export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;

 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
 *
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@ -1,20 +1,25 @@
 import type { StorybookConfig } from '../../frameworks/react-vite/dist';

+const isBlocksOnly = process.env.BLOCKS_ONLY === 'true';
+
+const allStories = [
+  {
+    directory: '../manager/src',
+    titlePrefix: '@storybook-ui',
+  },
+  {
+    directory: '../components/src',
+    titlePrefix: '@storybook-components',
+  },
+  {
+    directory: '../blocks/src',
+    titlePrefix: '@storybook-blocks',
+  },
+];
+const blocksOnlyStories = ['../blocks/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'];
+
 const config: StorybookConfig = {
-  stories: [
-    {
-      directory: '../manager/src',
-      titlePrefix: '@storybook-ui',
-    },
-    {
-      directory: '../components/src',
-      titlePrefix: '@storybook-components',
-    },
-    {
-      directory: '../blocks/src',
-      titlePrefix: '@storybook-blocks',
-    },
-  ],
+  stories: isBlocksOnly ? blocksOnlyStories : allStories,
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
--- a/code/ui/.storybook/preview.jsx
+++ b/code/ui/.storybook/preview.jsx
@ -9,8 +9,8 @@ import {
  convert,
  styled,
  useTheme,
-} from '../../lib/theming';
-import { Symbols } from '../components';
+} from '@storybook/theming';
+import { Symbols } from '@storybook/components';

 const { document } = global;

--- a/code/ui/components/src/typography/typography.stories.mdx
+++ b/code/ui/components/src/typography/typography.stories.mdx
@ -12,6 +12,20 @@ export const sampleText =

 ## Sans-serif

+```
+font-family:
+  "Nunito Sans",
+  -apple-system,
+  ".SFNSText-Regular",
+  "San Francisco",
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
+```
+
 <Typeset
  fontFamily={typography.fonts.base}
  fontSizes={fontSizes}
@ -33,7 +47,19 @@ export const sampleText =

 ## Monospace

-Currently not working
+```
+font-family:
+  ui-monospace,
+  Menlo,
+  Monaco,
+  "Roboto Mono",
+  "Oxygen Mono",
+  "Ubuntu Monospace",
+  "Source Code Pro",
+  "Droid Sans Mono",
+  "Courier New",
+  monospace;
+```

 <Typeset
  fontFamily={typography.fonts.mono}
--- a/code/ui/manager/src/provider.ts
+++ b/code/ui/manager/src/provider.ts
@ -1,7 +1,7 @@
-import type { Types } from '@storybook/addons';
+import type { Addon_Types } from '@storybook/types';

 export default class Provider {
-  getElements(_type: Types) {
+  getElements(_type: Addon_Types) {
    throw new Error('Provider.getElements() is not implemented!');
  }

--- a/code/ui/manager/src/runtime.ts
+++ b/code/ui/manager/src/runtime.ts
@ -1,8 +1,8 @@
 import global from 'global';

 import type { Channel } from '@storybook/channels';
-import { addons, AddonStore, type Types } from '@storybook/addons';
-import type { Addon_Config } from '@storybook/types';
+import { addons, AddonStore } from '@storybook/addons';
+import type { Addon_Types, Addon_Config } from '@storybook/types';
 import * as postMessage from '@storybook/channel-postmessage';
 import * as webSocket from '@storybook/channel-websocket';
 import { CHANNEL_CREATED } from '@storybook/core-events';
@ -39,7 +39,7 @@ class ReactProvider extends Provider {
    }
  }

-  getElements(type: Types) {
+  getElements(type: Addon_Types) {
    return this.addons.getElements(type);
  }