diff --git a/README.md b/README.md index 2750d54e3c..ad486901b8 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ For more complex development environment configuration, see the - [Architecture](docs/architecture-terminology.md) - [API references](docs/reference/README.md) - [Storybook - UI components](http://storybook.backstage.io) ([WIP](https://github.com/spotify/backstage/milestone/9)) +- [Contributing to Storybook](docs/getting-started/contributing-to-storybook.md) - Using Backstage components (TODO) ## Community diff --git a/docs/getting-started/contributing-to-storybook.md b/docs/getting-started/contributing-to-storybook.md new file mode 100644 index 0000000000..1a7bf0f5ec --- /dev/null +++ b/docs/getting-started/contributing-to-storybook.md @@ -0,0 +1,32 @@ +# Contributing to Storybook + +## Creating a new Story + +> A Story basically represents a single visual state of a component. + +To create a new story, create a new file located alongside the component you want to document on Storybook. + +See below an example of the structure: + +``` +core +└── src + └── components + └── Progress + ├── Progress.tsx + └── Progress.stories.tsx +``` + +> _Note: make sure your component story file has the following format componentName.stories.tsx_ + +## Running locally + +Go to `packages/storybook`, run `yarn install` and install the dependencies, then run the following on your command line: `yarn start` + +![](running-storybook.png) + +_You should see a log like the image above._ + +If everything worked out, your server will be running on **port 6006**, go to your browser and navigate to `http://localhost:6006/`. You should be able to navigate and see the Storybook page. + +![](storybook-page.png) diff --git a/docs/getting-started/running-storybook.png b/docs/getting-started/running-storybook.png new file mode 100644 index 0000000000..6cf1ded4b9 Binary files /dev/null and b/docs/getting-started/running-storybook.png differ diff --git a/docs/getting-started/storybook-page.png b/docs/getting-started/storybook-page.png new file mode 100644 index 0000000000..113f96e589 Binary files /dev/null and b/docs/getting-started/storybook-page.png differ