Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions .github/DISCUSSION_TEMPLATE/help.yml
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
body:
- type: markdown
id: intro
attributes:
value: |
Thanks for taking the time to start a new discussion!

### Before you post
Check if someone has already asked/answered your question in a previous discussion.

### When you're ready to post
Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users.
- type: markdown
id: intro
attributes:
value: |
Thanks for taking the time to start a new discussion!

- type: textarea
id: summary
attributes:
label: Summary
description: How can we help?
validations:
required: true

- type: textarea
id: additional-info
attributes:
label: Additional information
description: |
Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong.
### Before you post
Check if someone has already asked/answered your question in a previous discussion.

P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster.
validations:
required: false

- type: input
id: reproduction
attributes:
label: Create a reproduction
description: |
Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce).
validations:
required: false
### When you're ready to post
Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users.

- type: textarea
id: summary
attributes:
label: Summary
description: How can we help?
validations:
required: true

- type: textarea
id: additional-info
attributes:
label: Additional information
description: |
Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong.

P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster.
validations:
required: false

- type: input
id: reproduction
attributes:
label: Create a reproduction
description: |
Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce/).
validations:
required: false
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug_report.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ body:
attributes:
label: Reproduction link
description: >-
Please provide a link to a reproduction of the issue. We accept reproductions hosted on GitHub, CodeSandbox, and StackBlitz. Due to the high volume of reports, we prioritize those with clear reproductions. The easiest way to create a reproduction is to use [storybook.new](https://storybook.new). For detailed guidance, please refer to our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce).
Please provide a link to a reproduction of the issue. We accept reproductions hosted on GitHub, CodeSandbox, and StackBlitz. Due to the high volume of reports, we prioritize those with clear reproductions. The easiest way to create a reproduction is to use [storybook.new](https://storybook.new). For detailed guidance, please refer to our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce/).

Important: If the provided URL is invalid (e.g., 404 error or private repository), we may close the issue. Thank you for your understanding!
validations:
Expand Down
2 changes: 1 addition & 1 deletion .github.amrom.workers.devments/good-first-issue.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ The issue was marked with the `good first issue` label by a maintainer.

This means that it is a good candidate for someone interested in contributing to the project, but does not know where to start.

To get started, read the [Contributing Guide](https://storybook.js.org/docs/contribute/how-to-contribute). When you are ready, open a PR and link back to this issue in the form of adding `Fixes #1234` to the PR description, where `1234` is the issue number. This will automatically close the issue when the PR gets merged, making it easier for us to keep track of what has been fixed.
To get started, read the [Contributing Guide](https://storybook.js.org/docs/contribute/how-to-contribute/). When you are ready, open a PR and link back to this issue in the form of adding `Fixes #1234` to the PR description, where `1234` is the issue number. This will automatically close the issue when the PR gets merged, making it easier for us to keep track of what has been fixed.

Please remember to add tests to confirm your code changes will fix the issue and we do not regress in the future.

Expand Down
4 changes: 2 additions & 2 deletions .github.amrom.workers.devments/invalid-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@ Upvoting issues to show your interest will help us prioritize and address them a

### Useful Resources

- [Create a Storybook reproduction](https://storybook.js.org/docs/react/contribute/how-to-reproduce)
- [Create a Storybook reproduction](https://storybook.js.org/docs/react/contribute/how-to-reproduce/)
- [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve)
- [Contributing to Storybook](https://storybook.js.org/docs/contribute/how-to-contribute)
- [Contributing to Storybook](https://storybook.js.org/docs/contribute/how-to-contribute/)
Comment on lines +48 to +50
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

LGTM! GitHub template links normalized.

Both contribution documentation links now include trailing slashes. Optionally, you may want to verify these URLs remain valid after the changes.


🏁 Script executed:

#!/bin/bash
# Description: Verify that the updated documentation URLs are accessible and not broken.

# Test both URLs return successful responses
echo "Checking contribute/how-to-reproduce/ URL..."
curl -I -s -o /dev/null -w "%{http_code}" "https://storybook.js.org/docs/react/contribute/how-to-reproduce/"

echo "Checking contribute/how-to-contribute/ URL..."
curl -I -s -o /dev/null -w "%{http_code}" "https://storybook.js.org/docs/contribute/how-to-contribute/"

Length of output: 97



---

🏁 Script executed:

```shell
#!/bin/bash
# Follow redirects to see final destination URLs

echo "Following redirect for contribute/how-to-reproduce/ URL..."
curl -I -s -L -w "Final URL: %{url_effective}\nHTTP Status: %{http_code}\n" "https://storybook.js.org/docs/react/contribute/how-to-reproduce/" 2>/dev/null | tail -2

echo ""
echo "Following redirect for contribute/how-to-contribute/ URL..."
curl -I -s -L -w "Final URL: %{url_effective}\nHTTP Status: %{http_code}\n" "https://storybook.js.org/docs/contribute/how-to-contribute/" 2>/dev/null | tail -2

echo ""
echo "Testing if URLs without trailing slashes return different response..."
curl -I -s -o /dev/null -w "Without slash (how-to-reproduce): %{http_code}\n" "https://storybook.js.org/docs/react/contribute/how-to-reproduce"
curl -I -s -o /dev/null -w "Without slash (how-to-contribute): %{http_code}\n" "https://storybook.js.org/docs/contribute/how-to-contribute"

Length of output: 422


Fix second documentation URL redirect issue.

The first URL (contribute/how-to-reproduce/) correctly resolves after redirect. However, the second URL has a problem:

  • https://storybook.js.org/docs/contribute/how-to-contribute/ redirects to https://storybook.js.org/docs/contribute (parent directory)

This suggests the second URL path is incorrect or outdated. The URL should be updated to the correct documentation page that actually exists, or the contributing documentation should be verified to determine the correct endpoint.

🤖 Prompt for AI Agents
.github.amrom.workers.devments/invalid-link.md around lines 48 to 50: the second link to
Storybook contributing currently redirects to the parent directory because the
path is outdated; open the Storybook docs site to find the correct
"Contributing" page (or the current canonical URL for contributing guidelines)
and replace the existing URL with that exact, non-redirecting URL (or remove the
link if the page no longer exists), ensuring the link points directly to the
live documentation endpoint.

108 changes: 54 additions & 54 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Contributors Guide
> Tip: If you want to make a fast contribution, check the “good first issue” label in the Issues tab for small frontend and docs tasks that are easy to fix directly on GitHub.

> Tip: If you want to make a fast contribution, check the “good first issue” label in the Issues tab for small frontend and docs tasks that are easy to fix directly on GitHub.

We welcome contributions of any type and skill level. As an open-source project, we believe in the power of community and welcome any contributions that help us improve Storybook. Whether you are a developer, designer, writer, or someone who wants to help, we'd love to have you on board. If you are interested in contributing, please read the following guidelines.

Whether you're new to open source or a seasoned contributor, we welcome all contributions. Here are a few ways you can contribute to Storybook:
Whether you're new to open source or a seasoned contributor, we welcome all contributions. Here are a few ways you can contribute to Storybook:

- [Create an RFC](https://storybook.js.org/docs/contribute/RFC) for feature requests
- Update our [documentation](https://storybook.js.org/docs/contribute/documentation/documentation-updates) with fixes, improvements, or clarifications
- Add [new examples](https://storybook.js.org/docs/contribute/documentation/new-snippets) of code snippets for using Storybook with a JS framework
- [Integrate Storybook with a JS framework](https://storybook.js.org/docs/contribute/framework) or improve support of existing frameworks
- [Write an addon](https://storybook.js.org/docs/addons) to extend Storybook's functionality
- [Create an RFC](https://storybook.js.org/docs/contribute/RFC/) for feature requests
- Update our [documentation](https://storybook.js.org/docs/contribute/documentation/documentation-updates/) with fixes, improvements, or clarifications
- Add [new examples](https://storybook.js.org/docs/contribute/documentation/new-snippets/) of code snippets for using Storybook with a JS framework
- [Integrate Storybook with a JS framework](https://storybook.js.org/docs/contribute/framework/) or improve support of existing frameworks
- [Write an addon](https://storybook.js.org/docs/addons/) to extend Storybook's functionality

If you're not sure where to start, you can always help us by:

Expand All @@ -20,26 +20,26 @@ If you're not sure where to start, you can always help us by:

> **Note**: Before you start contributing, please read the [Code of Conduct](./CODE_OF_CONDUCT.md) and reach out to the maintainers if you have any questions or concerns about the project or the contribution process on the [`#contributing`](https://discord.com/channels/486522875931656193/839297503446695956) channel on Discord.

## Quick guide
## Quick guide

### Prerequisites
### Prerequisites

Storybook is developed against a specific Node.js version specified in the `.nvmrc` file.
You can use any version manager to install the correct version of Node.js. We recommend using [fnm](https://github.com/Schniz/fnm).

1. Check if you have the correct version of Node.js installed by running the following command:
```shell
# Check which version you're using
node --version
# node version manager
nvm use 22
# pnpm
pnpm env use --global 22
```

```shell
# Check which version you're using
node --version
# node version manager
nvm use 22
# pnpm
pnpm env use --global 22
```

2. Install [fnm](https://github.com/Schniz/fnm/tree/master?tab=readme-ov-file#installation) and adjust your shell configuration to include the following parameters: `fnm env`, `use-on-cd`, `corepack-enabled`, and `version-file-strategy recursive`.

```shell
eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
```
Expand Down Expand Up @@ -129,7 +129,7 @@ Here's a highlight of notable directories and files:
└── yarn.lock
```

### Fork the repository
### Fork the repository

If you plan to contribute to Storybook's codebase, you should fork the repository to your GitHub account. This will allow you to make changes to the codebase and submit a pull request to the main repository when you're ready to contribute your changes.

Expand All @@ -141,52 +141,52 @@ git fetch upstream
git branch --set-upstream-to upstream/main main
```

### Running the local development environment
### Running the local development environment

If you're interested in contributing to Storybook's codebase, you can run it locally to get a feel for the codebase and the development environment. To get started with the development environment, you should always run `yarn start` from the root directory. Running `yarn start` will install the required dependencies, build the project, including the packages, and generate a sandbox environment using React with TypeScript with a set of test stories to help you get started.

```shell
# Navigate to the root directory of the Storybook repository
cd path/to/your/storybook/fork
# Navigate to the root directory of the Storybook repository
cd path/to/your/storybook/fork

# Install the required dependencies and start the development environment
# Install the required dependencies and start the development environment
yarn start
```

You don't need to install the dependencies manually to get the project running. The `yarn start` command will install the required dependencies for you.

### Making code changes
### Making code changes

If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:
If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:

1. In a second terminal, run `yarn build --watch <package-1> <package-2>` in the `code/` directory.

For example, if you want to build the `@storybook/react`, `@storybook/core-server`, `@storybook/api`, and `@storybook/addon-docs` packages, you would run:
For example, if you want to build the `@storybook/react`, `@storybook/core-server`, `@storybook/api`, and `@storybook/addon-docs` packages, you would run:

```shell
# Navigate to the code directory
cd path/to/your/storybook/fork/code
````shell
# Navigate to the code directory
cd path/to/your/storybook/fork/code

# Build the specified packages in watch mode
yarn build --watch react core-server api addon-docs
# Build the specified packages in watch mode
yarn build --watch react core-server api addon-docs

Most package names can be found after `@storybook/` in the published package.

For instance, to build the `@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs` packages at the same time in watch mode:

```shell
cd code yarn build --watch react core-server api addon-docs
```
```shell
cd code yarn build --watch react core-server api addon-docs
````

2. If you are running the sandbox in ["linked"](https://yarnpkg.com/cli/link) mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)
2. If you are running the sandbox in ["linked"](https://yarnpkg.com/cli/link) mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)

3. If you are running the sandbox in "unlinked" mode, you'll need to rerun the sandbox from the `publish` step to see the changes:
3. If you are running the sandbox in "unlinked" mode, you'll need to rerun the sandbox from the `publish` step to see the changes:

```shell
yarn task --task dev --template <your template> --start-from=publish
```
```shell
yarn task --task dev --template <your template> --start-from=publish
```

4. If you have made any changes inside `/code` or other packages, remember to run `yarn test` inside the package to ensure that your changes do not break any tests.
4. If you have made any changes inside `/code` or other packages, remember to run `yarn test` inside the package to ensure that your changes do not break any tests.

### Angular-specific code

Expand All @@ -202,30 +202,30 @@ yarn task --prod
yarn build --prod --watch angular core addon-docs
```

### Running against different sandbox templates
### Running against different sandbox templates

You can pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run.

## Troubleshooting
## Troubleshooting

### The initialization process throws an error
### The initialization process throws an error

If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:
If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:

```shell
> NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
```shell
> NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
```

### Storybook doesn't detect changes in the codebase
### Storybook doesn't detect changes in the codebase

If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command:
If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command:

```shell
git clean -dx --dry-run
```
```shell
git clean -dx --dry-run
```

By executing this command, you can see which untracked or ignored files and directories will be removed from your working directory if you run it with the `--force` flag. Before running the command with the `--force` flag, please commit any local changes you want to keep. Otherwise, they will be lost.

## Contributing to Storybook
## Contributing to Storybook

For further advice on contributing, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute).
For further advice on contributing, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/contribute/).
Loading
Loading