Document how to contribute to Storybook (#482)

* #448 added new section to contribute to storybook * #448 added linked file * #448 improvements in the contributing to storybook section * #448 improvements in the contributing to storybook section * #448 improvements in the contributing to storybook section * #448 improvements in the contributing to storybook section * #448 improvements in the contributing to storybook section
2020-04-06 09:05:14 -03:00
parent 86f02fe577
commit f8ac148f97
4 changed files with 33 additions and 0 deletions
@@ -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
@@ -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)