Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chore: Updates the how to reproduce docs #17203

Merged
merged 1 commit into from
Jan 11, 2022
Merged

Chore: Updates the how to reproduce docs #17203

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 15 additions & 8 deletions docs/contribute/how-to-reproduce.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,20 @@ title: 'Create a reproduction'
---

A reproducible test case lets you isolate the cause of a problem, which is the first step towards fixing it! This page outlines how to get set up to create a reproduction.

## Why should you create a reproduction?

A reproducible test case is a great way to share a specific set of conditions that causes a bug. It allows both the maintainers and the community to verify, narrow down the cause of the problem and help you fix the issue.

## Initial setup
## Pre-requisites

Make sure you have:

- Installed [`Yarn`](https://yarnpkg.com/) on your local development machine.
- A [GitHub account](https://github.com/signup) for hosting the reproduction's code.
- A [Chromatic account](https://www.chromatic.com/start) for publishing your Storybook.

## Initial setup

First, open a terminal and run the following command:

Expand Down Expand Up @@ -40,17 +48,17 @@ If everything worked as it should, you should have a fully functional Storybook

## Third-party dependencies & addons

Before adding code, install and configure any necessary packages. For example, if you run into a problem with a CSS framework (e.g., [Tailwind](https://tailwindcss.com/)), you should install and configure it.
Before adding code, install and configure any necessary packages. For example, if you run into a problem with a CSS framework (e.g., [Tailwind](https://tailwindcss.com/)), you should install and configure it.

Install and configure any Storybook [addons](/addons) that relate to the issue (e.g.,`@storybook/addon-a11y`).
Install and configure any Storybook [addons](/addons) that relate to the issue (e.g.,`@storybook/addon-a11y`).

## Add stories

Any Storybook reproduction wouldn't be complete without [stories](../writing-stories/introduction.md). To help fix your issue faster, we encourage you to include the minimum amount of stories that will replicate your issue.
Any Storybook reproduction wouldn't be complete without [stories](../writing-stories/introduction.md). To help fix your issue faster, we encourage you to include the minimum amount of stories that will replicate your issue.

## Host

When you've finished your work, you'll need to host your reproduction. Start by signing into GitHub.com and create a [new repository](https://github.com/new).
When you've finished your work, you'll need to host your reproduction. Start by signing into GitHub.com and create a [new repository](https://github.com/new).

![github repository for reproductions](./github-new-repository-reproduction-optimized.png)

Expand All @@ -64,15 +72,14 @@ Then, follow GitHub's instructions to set up the repository.

## Publish

An excellent way to check your reproduction is to have it deployed online. We recommend [Chromatic](https://www.chromatic.com/), a free publishing service created by the Storybook maintainers. It allows you to deploy and host your reproduction safely and securely in the cloud.
An excellent way to check your reproduction is to have it deployed online. We recommend [Chromatic](https://www.chromatic.com/), a free publishing service created by the Storybook maintainers. It allows you to deploy and host your reproduction safely and securely in the cloud.

### Helpful resources when working with Chromatic

- [Publish Storybook](../sharing/publish-storybook.md)
- [Setup Chromatic](https://www.chromatic.com/docs/setup)
- [Automate Chromatic with continuous integration](https://www.chromatic.com/docs/ci)


## Submit the issue

Finally, create your issue in the [Storybook issue tracker](https://github.com/storybookjs/storybook/issues/new/choose), go through the required steps, and provide a detailed description of the problem. Add the GitHub repository and [deployed reproduction](https://www.chromatic.com/docs/setup#view-published-storybook) to help with the triage process.