Merge branch 'kapser/test-package2' into yann/use-test-package-in-tem…

…plate-stories

code/addons/interactions/src/preview.ts

@@ -39,7 +39,6 @@ const addSpies = (id: string, val: any, key?: string): any => {
     if (Array.isArray(val)) {
       return val.map((item, index) => addSpies(id, item, `${key}[${index}]`));
     }
-    // eslint-disable-next-line no-underscore-dangle
     if (typeof val === 'function' && val.isAction && !val._isMockFunction) {
       Object.defineProperty(val, 'name', { value: key, writable: false });
       Object.defineProperty(val, '__storyId__', { value: id, writable: false });

docs/builders/builder-api.md

@@ -36,7 +36,7 @@ To opt into a builder, the user must add it as a dependency and then edit their
 
 ## Builder API
 
-In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/code/lib/core-common/src/types.ts#L170-L189), exposing the following configuration options and entry points:
+In Storybook, every builder must implement the following [API](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/core-common.ts#L183-L203), exposing the following configuration options and entry points:
 
 <!-- prettier-ignore-start -->
 

docs/essentials/toolbars-and-globals.md

@@ -16,7 +16,7 @@ When the globals change, the story re-renders, and the decorators rerun with the
 
 ## Global types and the toolbar annotation
 
-Storybook has a simple, declarative syntax for configuring toolbar menus. In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering), you can add your own toolbars by creating `globalTypes` with a `toolbar` annotation:
+Storybook has a simple, declarative syntax for configuring toolbar menus. In your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering), you can add your own toolbars by creating `globalTypes` with a `toolbar` annotation:
 
 <!-- prettier-ignore-start -->
 
@@ -31,7 +31,7 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you
 
 <div class="aside">
 
-💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering).
+💡 As globals are _global_ you can _only_ set `globalTypes` in [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering).
 
 </div>
 
@@ -41,7 +41,59 @@ When you start your Storybook, you should see a new dropdown with the `light` an
 
 We have a `global` implemented. Let's wire it up! We can consume our new `theme` global in a decorator using the `context.globals.theme` value.
 
-For example, suppose you are using `styled-components`. You can add a theme provider decorator to your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering) config:
+<IfRenderer renderer='react'>
+
+For example, suppose you are using [`styled-components`](https://styled-components.com/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/storybook-preview-use-global-type.js.mdx',
+    'react/storybook-preview-use-global-type.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+</IfRenderer>
+
+<IfRenderer renderer='vue'>
+
+For example, suppose you are using [`Vuetify`](https://vuetifyjs.com/en/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'vue/storybook-preview-use-global-type.3.js.mdx',
+    'vue/storybook-preview-use-global-type.3.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+</IfRenderer>
+
+<IfRenderer renderer='angular'>
+
+For example, suppose you are using [`Angular Material`](https://material.angular.io/). You can add a theme provider decorator to your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) config:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/storybook-preview-use-global-type.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+</IfRenderer>
+
+<IfRenderer renderer={['ember', 'html', 'preact', 'qwik', 'svelte', 'solid', 'web-components' ]}>
+
+Depending on your framework and theming library, you can extend your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering) and provide a decorator to load the theme. For example:
 
 <!-- prettier-ignore-start -->
 
@@ -54,13 +106,15 @@ For example, suppose you are using `styled-components`. You can add a theme prov
 
 <!-- prettier-ignore-end -->
 
+</IfRenderer>
+
 ## Advanced usage
 
 So far, we've managed to create and consume a global inside Storybook.
 
 Now let's take a look at a more complex example. Let's suppose we wanted to implement a new global called **locale** for internationalization, which shows a flag on the right side of the toolbar.
 
-In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rendering), add the following:
+In your [`.storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering), add the following:
 
 <!-- prettier-ignore-start -->
 
@@ -75,12 +129,15 @@ In your [`.storybook/preview.js`](../configure/overview.md#configure-story-rende
 
 <div class="aside">
 
-💡 The <code>icon</code> element used in the examples loads the icons from the <code>@storybook/components</code> package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+💡 The `icon` element used in the examples loads the icons from the `@storybook/components` package. See [here](../faq.md#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
 
 </div>
 
 <div class="aside">
-💡The <code>@storybook/addon-toolbars</code> addon is required to use toolbars. The toolbars addon is included by default in <code>@storybook/addon-essentials</code>.
+
+💡 The `@storybook/addon-toolbars` addon is required to use toolbars. The toolbars addon is included by default in
+`@storybook/addon-essentials`.
+
 </div>
 
 By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator.

docs/snippets/angular/storybook-preview-global-decorator.ts.mdx

@@ -1,11 +1,12 @@
 ```ts
 // .storybook/preview.ts
 
-import { componentWrapperDecorator } from '@storybook/angular';
 import type { Preview } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
 
 const preview: Preview = {
   decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
 };
+
 export default preview;
 ```

docs/snippets/angular/storybook-preview-use-global-type.ts.mdx

@@ -0,0 +1,19 @@
+```ts
+// .storybook/preview.js
+
+import type { Preview } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
+
+const preview: Preview = {
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `<div [class]="myTheme">${story}</div>`,
+      ({ globals }) => {
+        return { myTheme: globals['theme'] };
+      }
+    ),
+  ],
+};
+
+export default preview;
+```

docs/snippets/common/storybook-auto-docs-standalone-page.mdx.mdx

@@ -0,0 +1,63 @@
+```mdx
+{/* src/GettingStarted.mdx */}
+
+# Getting Started
+
+Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
+
+## Table of Contents
+
+- [Design Resources](#design-resources)
+  - [Figma](#figma)
+  - [UI/UX Design Guidelines](#uiux-design-guidelines)
+  - [Design Assets](#design-assets)
+
+- [Development Resources](#development-resources)
+  - [Coding Standards](#coding-standards)
+  - [Version Control](#version-control)
+  - [Development Tools](#development-tools)
+
+---
+
+## Design Resources
+
+### Figma
+
+[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly.
+
+- **Get Access**: If you're not already part of the Figma project, request access from the project lead or manager.
+
+### UI/UX Design Guidelines
+
+Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
+
+- [UI/UX Guidelines Document](https://your-design-guidelines-link.com)
+
+### Design Assets
+
+All the essential design assets like logos, icons, and brand guidelines can be found in the Figma project. Ensure you have access and familiarize yourself with these assets for consistency.
+
+---
+
+## Development Resources
+
+### Coding Standards
+
+Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
+
+- [Coding Standards Document](https://your-coding-standards-link.com)
+
+### Version Control
+
+We use Git for version control. Make sure you have Git installed and are familiar with its basics.
+
+### Development Tools
+
+Your development environment is critical. Here are some tools and resources to help you set up your workspace:
+
+- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
+
+- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies.
+
+---
+```

docs/snippets/common/storybook-custom-docs-markdown.mdx.mdx

@@ -0,0 +1,13 @@
+```mdx
+{/* Changelog.mdx */}
+
+import { Meta, Markdown } from "@storybook/blocks";
+
+import Readme from "../../Changelog.md?raw";
+
+<Meta title="Changelog" />
+
+# Changelog
+
+<Markdown>{Readme}</Markdown>
+```

docs/snippets/common/storybook-preview-configure-globaltypes.js.mdx

@@ -1,19 +1,23 @@
 ```js
 // .storybook/preview.js
 
-export const globalTypes = {
-  theme: {
-    description: 'Global theme for components',
-    defaultValue: 'light',
-    toolbar: {
-      // The label to show for this toolbar item
-      title: 'Theme',
-      icon: 'circlehollow',
-      // Array of plain string values or MenuItem shape (see below)
-      items: ['light', 'dark'],
-      // Change title based on selected value
-      dynamicTitle: true,
+const preview = {
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['light', 'dark'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
     },
   },
 };
+
+export default preview;
 ```

docs/snippets/common/storybook-preview-configure-globaltypes.ts-4-9.mdx

@@ -0,0 +1,26 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: ['light', 'dark'],
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
+  },
+};
+
+export default preview;
+```

docs/snippets/common/storybook-preview-locales-globaltype.js.mdx

@@ -1,20 +1,24 @@
 ```js
 // .storybook/preview.js
 
-export const globalTypes = {
-  locale: {
-    description: 'Internationalization locale',
-    defaultValue: 'en',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'fr', right: '🇫🇷', title: 'Français' },
-        { value: 'es', right: '🇪🇸', title: 'Español' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'kr', right: '🇰🇷', title: '한국어' },
-      ],
+const preview = {
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      defaultValue: 'en',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
     },
   },
 };
+
+export default preview;
 ```

docs/snippets/common/storybook-preview-locales-globaltype.ts-4-9.mdx

@@ -0,0 +1,27 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-framework with the framework you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  globalTypes: {
+    locale: {
+      description: 'Internationalization locale',
+      defaultValue: 'en',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'en', right: '🇺🇸', title: 'English' },
+          { value: 'fr', right: '🇫🇷', title: 'Français' },
+          { value: 'es', right: '🇪🇸', title: 'Español' },
+          { value: 'zh', right: '🇨🇳', title: '中文' },
+          { value: 'kr', right: '🇰🇷', title: '한국어' },
+        ],
+      },
+    },
+  },
+};
+
+export default preview;
+```