Skip to content

Commit

Permalink
Merge branch 'next' into addon-test-docs
Browse files Browse the repository at this point in the history
* next: (45 commits)
  Bump version from "8.4.0-alpha.7" to "8.4.0-alpha.8" [skip ci]
  Write changelog for 8.4.0-alpha.8 [skip ci]
  Escape xml
  Docs: Fix broken links in the monorepo documentation
  TagsFilter: Fix sidebar stories
  refactor: Revert unncessary changes
  refactor: Change dynamic import of `@vitest/browser/context` to be closer to the previous form
  Revert "chore: update vitest packages to 2.1.3"
  thanks typescript
  Fix typo
  fix: Fix `vitest-plugin/viewports.ts` so that it is not affected by errors thrown by `@vietest/browser/contest`.
  chore: update vitest packages to 2.1.3
  Review feedback
  UI: Fix refIndicator to use ReactNode for check icon
  Update node version
  Remove border for now
  TagsFilter: Updated filter UI WIP
  TagsFilter: Exclude more built-in tags
  Add custom tag filtering docs
  docs: storybookNextJsPlugin to storybookSveltekitPlugin
  ...
  • Loading branch information
kylegach committed Oct 23, 2024
2 parents 764610a + 59fac37 commit a97f63a
Show file tree
Hide file tree
Showing 140 changed files with 789 additions and 352 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
## 8.4.0-alpha.8

- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!
- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!
- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!
- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!
- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!
- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!
- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!

## 8.4.0-alpha.7

- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
Expand Down
9 changes: 4 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead

Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.

Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.

### Community

Expand All @@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
### Supported Frameworks

| Renderer | Demo | |
|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) |
| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) |
| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) |
| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) |
| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) |
| [React Native](https://github.com/storybookjs/react-native) | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/) | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) |
| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) |
Expand Down Expand Up @@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
| [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI |
| [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |

See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.

Expand Down Expand Up @@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac

<a href="https://opencollective.com/storybook"><img src="https://opencollective.com/storybook/tiers/backers.svg?limit=80&button=false&avatarHeight=46&width=750"></a>


## License

[MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)
Expand Down
2 changes: 1 addition & 1 deletion code/addons/a11y/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

This Storybook addon can be helpful to make your UI components more accessible.

[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png)

Expand Down
2 changes: 1 addition & 1 deletion code/addons/a11y/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "8.4.0-alpha.7",
"version": "8.4.0-alpha.8",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
Expand Down
6 changes: 3 additions & 3 deletions code/addons/actions/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).

[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png)

## Installation

Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

```sh
npm i -D @storybook/addon-actions
```

Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):

```js
export default {
Expand Down
2 changes: 1 addition & 1 deletion code/addons/actions/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "8.4.0-alpha.7",
"version": "8.4.0-alpha.8",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
Expand Down
6 changes: 3 additions & 3 deletions code/addons/backgrounds/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@

Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).

[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif)

## Installation

Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

```sh
npm i -D @storybook/addon-backgrounds
```

## Configuration

Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):

```js
export default {
Expand Down
2 changes: 1 addition & 1 deletion code/addons/backgrounds/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "8.4.0-alpha.7",
"version": "8.4.0-alpha.8",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
Expand Down
10 changes: 5 additions & 5 deletions code/addons/controls/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@

[Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.

[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif)

## Installation

Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

```sh
npm i -D @storybook/addon-controls
```

Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):

```js
export default {
Expand Down Expand Up @@ -123,7 +123,7 @@ Reflow.argTypes = {

There are a few known cases where controls can't be auto-generated:

- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support)
- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
- You're trying to generate controls for a component defined in an external library

With a little manual work you can still use controls in such cases. Consider the following example:
Expand Down Expand Up @@ -172,7 +172,7 @@ CustomControls.argTypes = {
};
```

Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.

### How do controls work with MDX?

Expand Down
2 changes: 1 addition & 1 deletion code/addons/controls/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
"version": "8.4.0-alpha.7",
"version": "8.4.0-alpha.8",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
Expand Down
6 changes: 3 additions & 3 deletions code/addons/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor

Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:

[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

**Note:** `#` = WIP support

Expand Down Expand Up @@ -139,11 +139,11 @@ export default {

`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.

> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
## TypeScript configuration

As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).

## More resources

Expand Down
2 changes: 1 addition & 1 deletion code/addons/docs/docs/docspage.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements:

Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.

Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf):
Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf):

```js
import { Badge } from './Badge';
Expand Down
2 changes: 1 addition & 1 deletion code/addons/docs/docs/mdx.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha

## Decorators and parameters

To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX:
To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX:

```md
<Meta
Expand Down
2 changes: 1 addition & 1 deletion code/addons/docs/docs/multiframework.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc

## Dynamic source rendering

With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/react/api/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/api/doc-blocks/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.

This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.

Expand Down
4 changes: 2 additions & 2 deletions code/addons/docs/docs/props-tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Starting in SB 6.0, the `ArgsTable` block has built-in `Controls` (formerly know

<br/>

These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.

**DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:

Expand Down Expand Up @@ -200,7 +200,7 @@ Here are the possible customizations for the rest of the prop table:
| `table.type.detail` | A longer version of the type (if it's a complex type) |
| `table.defaultValue.summary` | A short version of the default value |
| `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) |
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |
| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |

## Reporting a bug

Expand Down
Loading

0 comments on commit a97f63a

Please sign in to comment.