diff --git a/packages/react-storybook/CONTRIBUTING.md b/CONTRIBUTING.md similarity index 80% rename from packages/react-storybook/CONTRIBUTING.md rename to CONTRIBUTING.md index bbd5a97ee98a..4138c9a8b50d 100644 --- a/packages/react-storybook/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,18 +1,20 @@ # Contributing to React Storybook -We welcome you help to make React Storybook better. This document will help to streamline the contributing process and save everyone's precious time. +Thanks for your interest in improving Storybook! We are a community-driven project and welcome contributions of all kinds: from discussion to documentation to bugfixes to feature improvements. + +Please review this document to help to streamline the process and save everyone's precious time. ## Issues No software is bug free. So, if you got an issue, follow these steps: -* Search the [issue list](https://github.com/storybooks/react-storybook/issues?utf8=%E2%9C%93&q=) for current and old issues. +* Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues. * If non of that is helping, create an issue with with following information: * Clear title (make is shorter if possible). * Describe the issue in clear language. * Share error logs, screenshots and etc. * To speed up the issue fixing process, send us a sample repo with the issue you faced: - + ### Reproductions The best way to help figure out an issue you are having is to produce a minimal reproduction. A good way to do that is using Create React App: @@ -37,7 +39,7 @@ git remote add origin https://github.com// git push -u origin master ``` -If you follow that process, you can then link to the github repository in the issue. See https://github.com/storybooks/react-storybook/issues/708#issuecomment-290589886 for an example. +If you follow that process, you can then link to the github repository in the issue. See https://github.com/storybooks/storybook/issues/708#issuecomment-290589886 for an example. **NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the *app's* webpack config, however you can still modify storybook's to mirror your app's version of storybook. Alternatively, use `npm run eject` in the CRA app to get a modifiable webpack config. @@ -46,8 +48,8 @@ If you follow that process, you can then link to the github repository in the is We welcome your contributions. There are many ways you can help us. This is few of those ways: * Fix typos and add more documentation. -* Try to fix some [bugs](https://github.com/storybooks/react-storybook/labels/bug). -* Work on [enhancements](https://github.com/storybooks/react-storybook/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement) and new [features](https://github.com/storybooks/react-storybook/issues?q=is%3Aissue+is%3Aopen+label%3Afeature). +* Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug). +* Work on [enhancements](https://github.com/storybooks/storybook/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement) and new [features](https://github.com/storybooks/storybook/issues?q=is%3Aissue+is%3Aopen+label%3Afeature). * Add more tests (specially for the UI). Before you submit a new PR, make you to run `npm test`. Do not submit a PR if tests are failing. If you need any help, create an issue and ask. @@ -58,7 +60,7 @@ If you are looking for a way to help the project, triaging issues is a great pla ### Responding to issues -Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybooks/react-storybook/blob/master/CONTRIBUTING.md#reproductions). +Issues that are tagged `question / support` or `needs reproduction` are great places to help. If you can answer a question, it will help the asker as well as anyone searching. If an issue needs reproduction, you may be able to guide the reporter toward one, or even reproduce it yourself using [this technique](https://github.com/storybooks/storybook/blob/master/CONTRIBUTING.md#reproductions). ### Triaging issues @@ -83,7 +85,7 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p ## Development Guide -> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/kadirahq/storybook-ui) project. +> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybooks/storybook/tree/master/storybook-ui) project. This project written in ES2016+ syntax so, we need to transpile it before use. So run the following command: @@ -123,5 +125,4 @@ npm link @kadira/storybook ### Getting Changes -After you've done any change, you need to run the `npm run storybook` command everytime to see those changes. - +After you've done any change, you need to run the `npm run storybook` command every time to see those changes. diff --git a/README.md b/README.md index 5536d1d4bbe7..c80717b70b1b 100644 --- a/README.md +++ b/README.md @@ -5,39 +5,46 @@ [![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/) -React Storybook is a UI development environment for your React components. With it, you can visualize different states of your UI components and develop them interactively. - -We recently switched repo-strategy, this readme needs editing. +Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. ## Intro -React Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements. ![React Storybook Screenshot](packages/react-storybook/docs/demo.gif) +Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies. + +Storybook comes with a lot of [addons](https://getstorybook.io/docs/addons/introduction) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile. + ## Getting Started +First install storybook: ```js npm i -g getstorybook cd my-react-app getstorybook ``` -For more information visit: https://getstorybook.io +Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories. + +For full documentation on using Storybook visit: https://getstorybook.io ## Main Projects -todo +- [react-storybook](packages/react-storybook) - Storybook for React components +- [react-native-storybook](packages/react-native-storybook) - Storybook for React components +- [storyshots](packages/storyshots) - Easy snapshot testing for storybook +- [getstorybook](packages/getstorybook) - Streamlined installation for a variety of app types +- [examples](packages/examples) - Code examples to illustrate different Storybook use cases ## Addons -todo +- [addon-actions](packages/addon-actions/) - Log actions as users interact with components in storybook +- [addon-comments](packages/addon-comments/) - Comment on storybook stories +- [addon-graphql](packages/addon-graphql/) - Query a GraphQL server within Storybook stories +- [addon-info](packages/addon-info/) - Annotate stories with extra component usage information +- [addon-knobs](packages/addon-knobs/) - Interactively edit component prop data in the Storybook UI +- [addon-notes](packages/addon-notes/) - Annotate storybook stories with notes +- [addon-options](packages/addon-options/) - Customize the storybook UI in code ## Contributing -todo - - - - - - - - +We welcome contributions to Storybook! There are many ways to contribute to +this project. [Get started here](CONTRIBUTING.md) diff --git a/packages/addon-comments/CONTRIBUTING.md b/packages/addon-comments/CONTRIBUTING.md deleted file mode 100644 index cfad20935a60..000000000000 --- a/packages/addon-comments/CONTRIBUTING.md +++ /dev/null @@ -1,12 +0,0 @@ -# How to Contribute - -First of all, start the Storybook Hub Backend and get logged in. - -> Storybook Hub Backend is a private app and we'll update how to setup this addon for development without that dependency. - -Then start the storybook inside this app. - -```sh -npm run storybook -``` -Now you'll see a comments tab and you can start contrubuting. diff --git a/packages/addon-info/CONTRIBUTING.md b/packages/addon-info/CONTRIBUTING.md deleted file mode 100644 index 75594971fad2..000000000000 --- a/packages/addon-info/CONTRIBUTING.md +++ /dev/null @@ -1,7 +0,0 @@ -# Contributing to React Storybook Story Component - -We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. - -## Development Setup - -This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development. diff --git a/packages/addon-knobs/CONTRIBUTING.md b/packages/addon-knobs/CONTRIBUTING.md deleted file mode 100644 index e169b5f9b592..000000000000 --- a/packages/addon-knobs/CONTRIBUTING.md +++ /dev/null @@ -1,24 +0,0 @@ -# Contributing to Storybook Knobs - -We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. - -## Development Setup - -This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development. - -## Setting Up - -You can start the built-in storybook and play with this addon. Do this for that: - -```sh -npm i -npm run storybook -``` - -Storybook lives inside the `example` directory and source code lives in `src` directory. - -## Adding a new knob - -Adding a new knob is pretty easy. First you need to add the story side API to the `src/index.js`. - -Then you need to write the UI component to show/edit this knob inside `src/types` directory. Have a look at existing types for more information. diff --git a/packages/addon-notes/CONTRIBUTING.md b/packages/addon-notes/CONTRIBUTING.md deleted file mode 100644 index 3b228bda329f..000000000000 --- a/packages/addon-notes/CONTRIBUTING.md +++ /dev/null @@ -1,7 +0,0 @@ -# Contributing to Storybook Addon Notes Component - -We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. - -## Development Setup - -This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development. diff --git a/packages/storybook-ui/CONTRIBUTING.md b/packages/storybook-ui/CONTRIBUTING.md deleted file mode 100644 index 77097f864681..000000000000 --- a/packages/storybook-ui/CONTRIBUTING.md +++ /dev/null @@ -1,7 +0,0 @@ -# Contributing to Storybook Core Component - -We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. - -## Development Setup - -This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development.