Skip to content

Commit

Permalink
Merge branch 'next' into norbert/improve-coverage-dep-missing-error
Browse files Browse the repository at this point in the history
  • Loading branch information
ndelangen authored Dec 2, 2024
2 parents fc1d07d + 0e2d73f commit 07cdd5b
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 23 deletions.
16 changes: 8 additions & 8 deletions docs/addons/addon-knowledge-base.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar:

Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons.

### Disable the addon panel
## Disable the addon panel

It’s possible to disable the addon panel for a particular story.

Expand All @@ -27,14 +27,14 @@ Then when adding a story, you can pass a disabled parameter.

{/* prettier-ignore-end */}

### Style your addon
## Style your addon

Storybook uses [Emotion](https://emotion.sh/docs/introduction) for styling. Alongside with a theme that you can customize!

We recommend using Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience.
If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using Emotion's `withTheme` HOC. [Read more about theming](../configure/user-interface/theming.mdx).

### Storybook components
## Storybook components

Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in `@storybook/components` to build addons faster. When you use Storybook components, you get:

Expand Down Expand Up @@ -75,7 +75,7 @@ Complementing the components, also included is a set of UI primitives. Use the c

</Callout>

### Build system
## Build system

When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json:

Expand All @@ -91,11 +91,11 @@ When you're developing your addon as a package, you can’t use `npm link` to ad
Run either `yarn` or `npm install` to install the addon.
</Callout>

### Hot module replacement
## Hot module replacement

While developing your addon, you can configure HMR (hot module replacement) to reflect the changes made.

### Standalone Storybook addons
## Standalone Storybook addons

If you're developing a standalone addon, add a new script to `package.json` with the following:

Expand All @@ -107,11 +107,11 @@ If you're developing a standalone addon, add a new script to `package.json` with
}
```

#### Local Storybook addons
### Local Storybook addons

If you're developing a local Storybook addon built on top of an existing Storybook installation, HMR (hot module replacement) is available out of the box.

### Composing addons in presets
## Composing addons in presets

If you're working on a preset that loads third-party addons, which you don't have control over, and you need access to certain features (e.g., decorators) or provide additional configurations. In that case, you'll need to update your preset to the following to allow you to load and configure the other addons:

Expand Down
8 changes: 4 additions & 4 deletions docs/configure/environment-variables.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ You can also access these variables in your custom `<head>`/`<body>` using the s
If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly, for example: `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`.
</Callout>

### Using .env files
## Using .env files

You can also use `.env` files to change Storybook's behavior in different modes. For example, if you add a `.env` file to your project with the following:

Expand All @@ -57,7 +57,7 @@ Then you can access this environment variable anywhere, even within your stories
{/* prettier-ignore-end */}

<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
#### With Vite
### With Vite

Out of the box, Storybook provides a [Vite builder](../builders/vite.mdx), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example:

Expand All @@ -76,7 +76,7 @@ You can also pass these environment variables when you are [building your Storyb

Then they'll be hardcoded to the static version of your Storybook.

### Using Storybook configuration
## Using Storybook configuration

Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/index.mdx#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:

Expand All @@ -94,7 +94,7 @@ When Storybook loads, it will enable you to access them in your stories similar

{/* prettier-ignore-end */}

### Using environment variables to choose the browser
## Using environment variables to choose the browser

Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.

Expand Down
10 changes: 5 additions & 5 deletions docs/configure/integration/images-and-assets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar:

Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these assets in your story files.

### Import assets into stories
## Import assets into stories

You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://webpack.js.org/loaders/) to handle the required files.

Expand All @@ -19,7 +19,7 @@ Afterward, you can use any asset in your stories:

{/* prettier-ignore-end */}

### Serving static files via Storybook Configuration
## Serving static files via Storybook Configuration

We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons.

Expand Down Expand Up @@ -55,7 +55,7 @@ Or even use a configuration object to define the directories:

{/* prettier-ignore-end */}

### Reference assets from a CDN
## Reference assets from a CDN

Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service.

Expand All @@ -65,7 +65,7 @@ Upload your files to an online CDN and reference them. In this example, we’re

{/* prettier-ignore-end */}

### Absolute versus relative paths
## Absolute versus relative paths

Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`.

Expand All @@ -75,7 +75,7 @@ If you load static content via importing, this is automatic, and you do not have

Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook-configuration) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.

### Referencing Fonts in Stories
## Referencing Fonts in Stories

After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](../story-rendering.mdx) file inside the configuration directory (i.e., `.storybook`) and add a `<link />` tag to reference your font.

Expand Down
6 changes: 3 additions & 3 deletions docs/get-started/why-storybook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ The breadth of modern frontends overwhelm existing workflows. Developers must co

## The solution

#### Build UIs in isolation
### Build UIs in isolation

Every piece of UI is now a [component](https://www.componentdriven.org/). The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events.

Storybook is packaged as a small, development-only, [workshop](https://bradfrost.com/blog/post/a-frontend-workshop-environment/) that lives alongside your app. It provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases.

<Video src="../_assets/get-started/whats-a-story.mp4" />

#### Capture UI variations as “stories”
### Capture UI variations as “stories”

When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.

Expand All @@ -39,7 +39,7 @@ You write stories for granular UI component variation and then use those stories

{/* prettier-ignore-end */}

#### Storybook keeps track of every story
### Storybook keeps track of every story

Storybook is an interactive directory of your UI components and their stories. In the past, you'd have to spin up the app, navigate to a page, and contort the UI into the right state. This is a huge waste of time and bogs down frontend development. With Storybook, you can skip all those steps and jump straight to working on a UI component in a specific state.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar:

Storybook seamlessly integrates with additional testing frameworks like [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/) to provide a comprehensive testing solution. By leveraging the Component Story Format (CSF), developers can write test cases that simulate user interactions and verify the behavior of individual components within the Storybook environment. This approach enables developers to thoroughly test their components' functionality, responsiveness, and visual appearance across different scenarios, resulting in more robust and reliable applications.

### With Cypress
## With Cypress

[Cypress](https://www.cypress.io/) is an end-to-end testing framework. It enables you to test a complete instance of your application by simulating user behavior. With Component Story Format, your stories are reusable with Cypress. Each named export (in other words, a story) is renderable within your testing setup.

Expand Down Expand Up @@ -35,7 +35,7 @@ When Cypress runs your test, it loads Storybook's isolated iframe and checks if

![Cypress running successfully](../../_assets/writing-tests/cypress-success-run-tests-optimized.png)

### With Playwright
## With Playwright

[Playwright](https://playwright.dev/) is a browser automation tool and end-to-end testing framework from Microsoft. It offers cross-browser automation, mobile testing with device emulation, and headless testing. With Component Story Format, your stories are reusable with Playwright. Each named export (in other words, a story) is renderable within your testing setup.

Expand All @@ -61,7 +61,7 @@ With Playwright, you can write a test to check if the inputs are filled and matc

Once you execute Playwright, it opens a new browser window, loads Storybook's isolated iframe, asserts if the inputs contain the specified values, and displays the test results in the terminal.

#### Learn about other UI tests
**Learn about other UI tests**

* [Component tests](../component-testing.mdx) for user behavior simulation
* [Visual tests](../visual-testing.mdx) for appearance
Expand Down

0 comments on commit 07cdd5b

Please sign in to comment.