@storybook/react 8.3.0-alpha.6 → 8.3.0-alpha.8

package/dist/index.d.ts

@@ -6,33 +6,38 @@ import { R as ReactRenderer } from './types-a5624094.js';
 import 'react';
 import 'type-fest';
 
-/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
  *
- * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
  *
  * Example:
- *```jsx
- * // setup.js (for jest)
+ *
+ * ```jsx
+ * // setup-file.js
  * import { setProjectAnnotations } from '@storybook/react';
  * import projectAnnotations from './.storybook/preview';
  *
  * setProjectAnnotations(projectAnnotations);
- *```
+ * ```
  *
- * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ * @param projectAnnotations - E.g. (import * as projectAnnotations from '../.storybook/preview')
  */
 declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<ReactRenderer>;
 declare const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer>;
 /**
  * Function that will receive a story along with meta (e.g. a default export from a .stories file)
- * and optionally projectAnnotations e.g. (import * as projectAnnotations from '../.storybook/preview)
- * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
- *
+ * and optionally projectAnnotations e.g. (import * as projectAnnotations from
+ * '../.storybook/preview) and will return a composed component that has all
+ * args/parameters/decorators/etc combined and applied to it.
  *
  * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
  *
  * Example:
- *```jsx
+ *
+ * ```jsx
  * import { render } from '@testing-library/react';
  * import { composeStory } from '@storybook/react';
  * import Meta, { Primary as PrimaryStory } from './Button.stories';
@@ -43,24 +48,26 @@ declare const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRend
  *   const { getByText } = render(<Primary>Hello world</Primary>);
  *   expect(getByText(/Hello world/i)).not.toBeNull();
  * });
- *```
+ * ```
  *
  * @param story
- * @param componentAnnotations - e.g. (import Meta from './Button.stories')
- * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
- * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ * @param componentAnnotations - E.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
+ *   this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - In case your story does not contain a name and you want it to have a name.
  */
 declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
 /**
  * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
- * and optionally projectAnnotations (e.g. `import * as projectAnnotations from '../.storybook/preview`)
- * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
- *
+ * and optionally projectAnnotations (e.g. `import * as projectAnnotations from
+ * '../.storybook/preview`) and will return an object containing all the stories passed, but now as
+ * a composed component that has all args/parameters/decorators/etc combined and applied to it.
  *
  * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
  *
  * Example:
- *```jsx
+ *
+ * ```jsx
  * import { render } from '@testing-library/react';
  * import { composeStories } from '@storybook/react';
  * import * as stories from './Button.stories';
@@ -71,10 +78,11 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
  *   const { getByText } = render(<Primary>Hello world</Primary>);
  *   expect(getByText(/Hello world/i)).not.toBeNull();
  * });
- *```
+ * ```
  *
- * @param csfExports - e.g. (import * as stories from './Button.stories')
- * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param csfExports - E.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - E.g. (import * as projectAnnotations from '../.storybook/preview')
+ *   this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  */
 declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
 

package/dist/preset.d.ts

@@ -3,12 +3,13 @@ import { PresetProperty } from 'storybook/internal/types';
 declare const addons: PresetProperty<'addons'>;
 declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
 /**
- * Try to resolve react and react-dom from the root node_modules of the project
- * addon-docs uses this to alias react and react-dom to the project's version when possible
- * If the user doesn't have an explicit dependency on react this will return the existing values
- * Which will be the versions shipped with addon-docs
+ * Try to resolve react and react-dom from the root node_modules of the project addon-docs uses this
+ * to alias react and react-dom to the project's version when possible If the user doesn't have an
+ * explicit dependency on react this will return the existing values Which will be the versions
+ * shipped with addon-docs
  *
  * We do the exact same thing in the common preset, but that will fail in Yarn PnP because
+ *
  * @storybook/core-server doesn't have a peer dependency on react
  * This will make @storybook/react projects work in Yarn PnP
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "8.3.0-alpha.6",
+  "version": "8.3.0-alpha.8",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -64,12 +64,12 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "^8.3.0-alpha.6",
+    "@storybook/components": "^8.3.0-alpha.8",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^8.3.0-alpha.6",
-    "@storybook/preview-api": "^8.3.0-alpha.6",
-    "@storybook/react-dom-shim": "8.3.0-alpha.6",
-    "@storybook/theming": "^8.3.0-alpha.6",
+    "@storybook/manager-api": "^8.3.0-alpha.8",
+    "@storybook/preview-api": "^8.3.0-alpha.8",
+    "@storybook/react-dom-shim": "8.3.0-alpha.8",
+    "@storybook/theming": "^8.3.0-alpha.8",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
     "@types/node": "^22.0.0",
@@ -86,7 +86,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/test": "8.3.0-alpha.6",
+    "@storybook/test": "8.3.0-alpha.8",
     "@types/babel-plugin-react-docgen": "^4",
     "@types/semver": "^7.3.4",
     "@types/util-deprecate": "^1.0.0",
@@ -98,7 +98,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "storybook": "^8.3.0-alpha.6",
+    "storybook": "^8.3.0-alpha.8",
     "typescript": ">= 4.2.x"
   },
   "peerDependenciesMeta": {

package/template/cli/js/Button.jsx

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 
 import './button.css';
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
@@ -22,25 +20,15 @@ export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
 };
 
 Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick: PropTypes.func,
 };
 

package/template/cli/ts-3-8/Button.tsx

@@ -3,31 +3,19 @@ import React from 'react';
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({
   primary = false,
   size = 'medium',

package/template/cli/ts-4-9/Button.tsx

@@ -3,31 +3,19 @@ import React from 'react';
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({
   primary = false,
   size = 'medium',