diff --git a/.eslintignore b/.eslintignore index 398ff439977d..f55dae391395 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,4 @@ dist build coverage node_modules +docs/public diff --git a/.eslintrc.js b/.eslintrc.js index 2cb6471214a0..30971bdb41c6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,4 +1,5 @@ module.exports = { + root: true, extends: [ './node_modules/eslint-config-airbnb-base/rules/es6.js', ], diff --git a/.gitignore b/.gitignore index 0c0590513766..3b78d318d47d 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ build packages/examples/automated-* yarn.lock /**/LICENSE +docs/public diff --git a/.remarkrc b/.remarkrc new file mode 100644 index 000000000000..3c79efa3cdfa --- /dev/null +++ b/.remarkrc @@ -0,0 +1,16 @@ +{ + "plugins": [ + "remark-preset-lint-recommended", + ["remark-lint-list-item-indent", false], + ["remark-lint-code", {"js": { + "module": "node_modules/remark-lint-code-eslint", + "options": { + "fix": true + } + }}], + ["remark-toc", { + "tight": true, + "maxDepth": 3 + }] + ] +} diff --git a/.travis.yml b/.travis.yml index db08dd1deeb7..84df3d7480c3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,7 +11,8 @@ before_install: ./scripts/travis/before_install.sh after_success: ./scripts/travis/after_success.sh script: - npm run bootstrap - - lerna exec --scope test-cra -- npm i + - npm run bootstrap:test-cra + - npm run bootstrap:docs - npm run lint - npm run test -- --coverage - npm run coverage diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1949590b8326..a26ef488bf14 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,37 +8,33 @@ Please review this document to help to streamline the process and save everyone' No software is bug free. So, if you got an issue, follow these steps: -* 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: +- 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: ### Testing against `master` To test your project against the current latest version of storybook, you can clone the repository and link it with `npm`. Try following these steps: -1. Download the latest version of this project, and build it +1. Download the latest version of this project, and build it - ``` - git clone https://github.com/storybooks/storybook.git - cd storybook - npm install - npm run bootstrap - ``` + git clone https://github.com/storybooks/storybook.git + cd storybook + npm install + npm run bootstrap -2. Link `storybook` and any other required dependencies +2. Link `storybook` and any other required dependencies - ``` - cd packages/react-storybook - npm link + cd packages/react-storybook + npm link - cd - npm link @kadira/storybook + cd + npm link @kadira/storybook - # repeat with whichever other parts of the monorepo you are using. - ``` + # repeat with whichever other parts of the monorepo you are using. ### Reproductions @@ -68,18 +64,18 @@ git remote add https://github.com//storybook.git git push -u master ``` -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. +If you follow that process, you can then link to the github repository in the issue. See 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. +**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. ## Pull Requests (PRs) We welcome your contributions. There are many ways you can help us. This is few of those ways: -* Fix typos and add more [documentation](https://github.com/storybooks/storybook/labels/needs%20docs). -* Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug). -* Work on [API](https://github.com/storybooks/storybook/labels/enhancement%3A%20api), [Addons](https://github.com/storybooks/storybook/labels/enhancement%3A%20addons), [UI](https://github.com/storybooks/storybook/labels/enhancement%3A%20ui) or [Webpack](https://github.com/storybooks/storybook/labels/enhancement%3A%20webpack) use enhancements and new [features](https://github.com/storybooks/storybook/labels/feature%20request). -* Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (specially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)). +- Fix typos and add more [documentation](https://github.com/storybooks/storybook/labels/needs%20docs). +- Try to fix some [bugs](https://github.com/storybooks/storybook/labels/bug). +- Work on [API](https://github.com/storybooks/storybook/labels/enhancement%3A%20api), [Addons](https://github.com/storybooks/storybook/labels/enhancement%3A%20addons), [UI](https://github.com/storybooks/storybook/labels/enhancement%3A%20ui) or [Webpack](https://github.com/storybooks/storybook/labels/enhancement%3A%20webpack) use enhancements and new [features](https://github.com/storybooks/storybook/labels/feature%20request). +- Add more [tests](https://codecov.io/gh/storybooks/storybook/tree/master/packages) (specially for the [UI](https://codecov.io/gh/storybooks/storybook/tree/master/packages/storybook-ui/src)). 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. @@ -102,9 +98,10 @@ Issues that are tagged `question / support` or `needs reproduction` are great pl Once you've helped out on a few issues, if you'd like triage access you can help label issues and respond to reporters. We use the following label scheme to categorize issues: -- **type** - `bug`, `feature`, `question / support`, `discussion`, `greenkeeper`, `maintenance`. -- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc. -- **status** - `needs reproduction`, `needs PR`, `in progress`, etc. + +- **type** - `bug`, `feature`, `question / support`, `discussion`, `greenkeeper`, `maintenance`. +- **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc. +- **status** - `needs reproduction`, `needs PR`, `in progress`, etc. All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `greenkeeper` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring. @@ -116,17 +113,17 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p ### Closing issues -- Duplicate issues should be closed with a link to the original. +- Duplicate issues should be closed with a link to the original. -- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline, it is reasonable to wait 2 weeks before closing). +- Unreproducible issues should be closed if it's not possible to reproduce them (if the reporter drops offline, it is reasonable to wait 2 weeks before closing). -- `bug`s should be labeled `merged` when merged, and be closed when the issue is fixed and released. +- `bug`s should be labeled `merged` when merged, and be closed when the issue is fixed and released. -- `feature`s, `maintenance`s, `greenkeeper`s should be labeled `merged` when merged, and closed when released or if the feature is deemed not appropriate. +- `feature`s, `maintenance`s, `greenkeeper`s should be labeled `merged` when merged, and closed when released or if the feature is deemed not appropriate. -- `question / support`s should be closed when the question has been answered. If the questioner drops offline, a reasonable period to wait is two weeks. +- `question / support`s should be closed when the question has been answered. If the questioner drops offline, a reasonable period to wait is two weeks. -- `discussion`s should be closed at a maintainer's discretion. +- `discussion`s should be closed at a maintainer's discretion. ## Development Guide @@ -135,9 +132,7 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p This project written in ES2016+ syntax so, we need to transpile it before use. So run the following command: -``` -npm run dev -``` + npm run dev This will watch files and transpile. diff --git a/HISTORY.md b/HISTORY.md index e1d685129057..3635c5d18c49 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,6 +1,6 @@ ## v.Next -- Deprecated `{ linkTo, action }` as built-in addons: https://github.com/storybooks/storybook/issues/1017. From 3.0 use them as you would [any other addon](https://storybooks.js.org/docs/react-storybook/addons/using-addons/). +- Deprecated `{ linkTo, action }` as built-in addons: . From 3.0 use them as you would [any other addon](https://storybooks.js.org/docs/react-storybook/addons/using-addons/). Before: diff --git a/README.md b/README.md index 32953675a4b5..dd4eb38ace75 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # Storybook + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847) -[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) +[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) [![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/) [![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) ---- +* * * Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. @@ -20,10 +21,23 @@ Storybook runs outside of your app. This allows you to develop UI components in Storybook comes with a lot of [addons](https://storybooks.js.org/docs/react-storybook/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. +## Table of contents + +- [Getting Started](#getting-started) +- [Projects](#projects) + - [Main Projects](#main-projects) + - [Sub Projects](#sub-projects) + - [Addons](#addons) +- [Contributing](#contributing) + - [Development scripts](#development-scripts) + - [Backers](#backers) + - [Sponsors](#sponsors) + ## Getting Started First install storybook: -```js + +```sh npm i -g @storybook/cli cd my-react-app getstorybook @@ -36,32 +50,61 @@ For full documentation on using Storybook visit: [storybooks.js.org](https://sto ## Projects ### Main Projects -- [Storybook for react](app/react) - Storybook for React components -- [Storybook for react-native](app/react-native) - Storybook for React components + +- [Storybook for react](app/react) - Storybook for React components +- [Storybook for react-native](app/react-native) - Storybook for React components ### Sub Projects -- [CLI](lib/cli) - Streamlined installation for a variety of app types -- [examples](examples) - Code examples to illustrate different Storybook use cases + +- [CLI](lib/cli) - Streamlined installation for a variety of app types +- [examples](examples) - Code examples to illustrate different Storybook use cases ### Addons -- [addon-storyshots](addons/storyshots) - Easy snapshot testing for storybook -- [addon-actions](addons/actions/) - Log actions as users interact with components in storybook -- [addon-comments](addons/comments/) - Comment on storybook stories -- [addon-graphql](addons/graphql/) - Query a GraphQL server within Storybook stories -- [addon-info](addons/info/) - Annotate stories with extra component usage information -- [addon-knobs](addons/knobs/) - Interactively edit component prop data in the Storybook UI -- [addon-notes](addons/notes/) - Annotate storybook stories with notes -- [addon-options](addons/options/) - Customize the storybook UI in code + +- [storyshots](addons/storyshots) - Easy snapshot testing for storybook +- [actions](addons/actions/) - Log actions as users interact with components in storybook +- [comments](addons/comments/) - Comment on storybook stories +- [graphql](addons/graphql/) - Query a GraphQL server within Storybook stories +- [info](addons/info/) - Annotate stories with extra component usage information +- [knobs](addons/knobs/) - Interactively edit component prop data in the Storybook UI +- [notes](addons/notes/) - Annotate storybook stories with notes +- [options](addons/options/) - Customize the storybook UI in code ## Contributing We welcome contributions to Storybook! There are many ways to contribute to this project. [Get started here](CONTRIBUTING.md) +### Development scripts + +#### `npm run bootstrap` + +> Installs package dependencies and links packages together - using lerna + +#### `npm run publish` + +> Push a release to git and npm +> will ask for version in interactive mode - using lerna. + +#### `npm run lint` + +> boolean check if code conforms to linting rules - uses remark & eslint + +- `npm run lint:js` - will check js +- `npm run lint:markdown` - will check markdown + code samples + +- `npm run lint:js -- --fix` - will autofix js +- `npm run lint:markdown -- -o` - will autofix markdown + +#### `npm run test` + +> boolean check if unittests all pass - uses jest + +- `npm run test:watch` - will run tests in watchmode ### Backers -Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/storybook#backer)] +Support us with a monthly donation and help us continue our activities. \[[Become a backer](https://opencollective.com/storybook#backer)] @@ -94,10 +137,9 @@ Support us with a monthly donation and help us continue our activities. [[Become - ### Sponsors -Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/storybook#sponsor)] +Become a sponsor and get your logo on our README on Github with a link to your site. \[[Become a sponsor](https://opencollective.com/storybook#sponsor)] @@ -129,4 +171,3 @@ Become a sponsor and get your logo on our README on Github with a link to your s - diff --git a/addons/actions/CHANGELOG.md b/addons/actions/CHANGELOG.md index 4877d027d590..60992dfdfd4c 100644 --- a/addons/actions/CHANGELOG.md +++ b/addons/actions/CHANGELOG.md @@ -1,39 +1,43 @@ ## Changelog ### v1.1.3 + 22 Mar 2017 -* Fix issue caused by `v1.1.2` where storybook crashes when actions are used without names [PR30](https://github.com/storybooks/storybook-addon-actions/pull/30). +- Fix issue caused by `v1.1.2` where storybook crashes when actions are used without names [PR30](https://github.com/storybooks/storybook-addon-actions/pull/30). ### v1.1.2 + 21 Mar 2017 -* Document `decorateAction` function (action decorator). [PR28](https://github.com/storybooks/storybook-addon-actions/pull/28) +- Document `decorateAction` function (action decorator). [PR28](https://github.com/storybooks/storybook-addon-actions/pull/28) -* Set correct Function.name for action handlers [PR24](https://github.com/storybooks/storybook-addon-actions/pull/24) +- Set correct Function.name for action handlers [PR24](https://github.com/storybooks/storybook-addon-actions/pull/24) ### v1.1.1 + 11 Sep 2016 -* Support arguments with circular references [PR6](https://github.com/kadirahq/storybook-addon-actions/pull/6) +- Support arguments with circular references [PR6](https://github.com/kadirahq/storybook-addon-actions/pull/6) ### v1.1.0 + 11 Sep 2016 -* Support action decorators [PR3](https://github.com/kadirahq/storybook-addon-actions/pull/3) +- Support action decorators [PR3](https://github.com/kadirahq/storybook-addon-actions/pull/3) ### v1.0.4 -* Refactor source code (use separate files) +- Refactor source code (use separate files) ### v1.0.3 -* Log all arguments (only the first argument was logged previously) +- Log all arguments (only the first argument was logged previously) ### v1.0.2 -* Style tweak: center counter and inspector elements +- Style tweak: center counter and inspector elements ### v1.0.1 -* First stable release with all features from the storybook action logger such as `action` function, react inspector and grouping log messages. +- First stable release with all features from the storybook action logger such as `action` function, react inspector and grouping log messages. diff --git a/addons/actions/README.md b/addons/actions/README.md index 77d138613e91..b85d0d1f933a 100644 --- a/addons/actions/README.md +++ b/addons/actions/README.md @@ -1,4 +1,5 @@ # Storybook Addon Actions + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -20,7 +21,7 @@ You can use this addon without installing it manually. Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify. -> *Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)* +> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybooks/storybook-addon-actions/issues/29#issuecomment-288274794)_ ```js import { storiesOf } from '@storybook/react' diff --git a/addons/actions/package.json b/addons/actions/package.json index 1a8ef8583343..9ed5764d81e6 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -21,22 +21,19 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions", "devDependencies": { - "@storybook/addons": "^3.0.0-rc.0", - "@storybook/react": "^3.0.0-rc.0", - "@storybook/ui": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "react-test-renderer": "^15.5.4", "shelljs": "^0.7.7" }, "dependencies": { + "@storybook/addons": "^3.0.0-rc.0", "deep-equal": "^1.0.1", "json-stringify-safe": "^5.0.1", "prop-types": "^15.5.8", "react-inspector": "^2.0.0" }, "peerDependencies": { - "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" } diff --git a/addons/centered/CHANGELOG.md b/addons/centered/CHANGELOG.md index d46392157877..8b031d36bf84 100644 --- a/addons/centered/CHANGELOG.md +++ b/addons/centered/CHANGELOG.md @@ -2,14 +2,14 @@ ### v1.1.2 -* Add .npmignore file [#PR9](https://github.com/storybooks/react-storybook-decorator-centered/pull/9) +- Add .npmignore file [#PR9](https://github.com/storybooks/react-storybook-decorator-centered/pull/9) ### v1.1.1 -* Remove build directory from the repository [#PR8](https://github.com/storybooks/react-storybook-decorator-centered/pull/8) -* Simplify styles [#PR6](https://github.com/storybooks/react-storybook-decorator-centered/pull/6) -* Add using as addon instructions to Readme [#PR2](https://github.com/storybooks/react-storybook-decorator-centered/pull/8) +- Remove build directory from the repository [#PR8](https://github.com/storybooks/react-storybook-decorator-centered/pull/8) +- Simplify styles [#PR6](https://github.com/storybooks/react-storybook-decorator-centered/pull/6) +- Add using as addon instructions to Readme [#PR2](https://github.com/storybooks/react-storybook-decorator-centered/pull/8) ### v1.0.0 -* Initial release as `@kadira/react-storybook-decorator-centered`. +- Initial release as `@kadira/react-storybook-decorator-centered`. diff --git a/addons/centered/README.md b/addons/centered/README.md index a69e746803ee..8a926c00ea56 100644 --- a/addons/centered/README.md +++ b/addons/centered/README.md @@ -1,4 +1,5 @@ # Storybook Centered Decorator + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -18,6 +19,7 @@ npm i @storybook/addon-centered ``` #### As a decorator + You can set the decorator locally: ```js @@ -46,6 +48,7 @@ configure(function () { ``` #### As an extension + 1 - Configure the extension ```js diff --git a/addons/centered/package.json b/addons/centered/package.json index bbc872249231..014432a27df9 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -2,15 +2,10 @@ "name": "@storybook/addon-centered", "version": "3.0.0-rc.0", "description": "Storybook decorator to center components", - "main": "build/index.js", + "main": "dist/index.js", "scripts": { - "prepublish": "babel src --out-dir build" + "prepublish": "node ../../scripts/prepublish.js" }, "author": "Muhammed Thanish ", - "license": "MIT", - "browserify": { - "transform": [ - "babelify" - ] - } + "license": "MIT" } diff --git a/addons/comments/CHANGELOG.md b/addons/comments/CHANGELOG.md index 18f26e279ec8..7b1cc8111d1f 100644 --- a/addons/comments/CHANGELOG.md +++ b/addons/comments/CHANGELOG.md @@ -1,76 +1,90 @@ ## Changelog ### v1.9.1 + 27-October-2016 -* Fix comment delete button [PR48](https://github.com/kadirahq/storybook-addon-comments/pull/48) -* Remove app not found console error [PR49](https://github.com/kadirahq/storybook-addon-comments/pull/49) +- Fix comment delete button [PR48](https://github.com/kadirahq/storybook-addon-comments/pull/48) +- Remove app not found console error [PR49](https://github.com/kadirahq/storybook-addon-comments/pull/49) ### v1.9.0 + 20-October-2016 -* Show comments for public apps without logging in [PR46](https://github.com/kadirahq/storybook-addon-comments/pull/46) +- Show comments for public apps without logging in [PR46](https://github.com/kadirahq/storybook-addon-comments/pull/46) ### v1.8.0 + 17-October-2016 -* Add border-radius for comment form [PR44](https://github.com/kadirahq/storybook-addon-comments/pull/44) +- Add border-radius for comment form [PR44](https://github.com/kadirahq/storybook-addon-comments/pull/44) ### v1.7.2 + 18-October-2016 -* Add a loading icon for loading comments for the first time. [PR43](https://github.com/kadirahq/storybook-addon-comments/pull/43) -* Fix some minor bugs. +- Add a loading icon for loading comments for the first time. [PR43](https://github.com/kadirahq/storybook-addon-comments/pull/43) +- Fix some minor bugs. ### v1.7.1 + 18-October-2016 Load comments just after we found the current user. This fixes the issue of not loading comments for the current story just after reloaded. ### v1.7.0 + 14-October-2016 Improve console errors and signIn process when the user is loggedOut. ### v1.7.0 + 14-October-2016 -* Add a confirm box when deleting components. [#38](https://github.com/kadirahq/storybook-addon-comments/pull/38) -* Add the user to the local cache when adding a comment. [#40](https://github.com/kadirahq/storybook-addon-comments/pull/40) +- Add a confirm box when deleting components. [#38](https://github.com/kadirahq/storybook-addon-comments/pull/38) +- Add the user to the local cache when adding a comment. [#40](https://github.com/kadirahq/storybook-addon-comments/pull/40) ### v1.6.1 + 12-October-2016 Move a few packages from dev-deps to deps. ### v1.6.0 + 12-October-2016 -* Implement a better workflow for local users [PR31](https://github.com/kadirahq/storybook-addon-comments/pull/31) -* Set the protected field to true. [PR30](https://github.com/kadirahq/storybook-addon-comments/pull/30) +- Implement a better workflow for local users [PR31](https://github.com/kadirahq/storybook-addon-comments/pull/31) +- Set the protected field to true. [PR30](https://github.com/kadirahq/storybook-addon-comments/pull/30) ### v1.5.1 + 12-October-2016 Fix a regression in the latest master. [PR33](https://github.com/kadirahq/storybook-addon-comments/pull/33) ### v1.5.0 + 12-October-2016 Add comment delete feature [PR23](https://github.com/kadirahq/storybook-addon-comments/pull/23) ### v1.4.0 + 12-October-2016 Add a cache invalidation system. [PR28](https://github.com/kadirahq/storybook-addon-comments/pull/28) ### v1.3.0 + 11-October-2016 Add markdown support. [PR24](https://github.com/kadirahq/storybook-addon-comments/pull/24) ### v1.2.0 + 11-October-2016 Add multiline comment support. [PR22](https://github.com/kadirahq/storybook-addon-comments/pull/22) @@ -79,19 +93,19 @@ Add multiline comment support. [PR22](https://github.com/kadirahq/storybook-addo Fix user info bug and remove unused files -* Remove unused local addon-db files [PR19](https://github.com/kadirahq/storybook-addon-comments/pull/19) -* Update storybook dev dependency to auto export repo info [PR20](https://github.com/kadirahq/storybook-addon-comments/pull/20) -* Fix getUserInfo error by correcting method name [PR21](https://github.com/kadirahq/storybook-addon-comments/pull/21) +- Remove unused local addon-db files [PR19](https://github.com/kadirahq/storybook-addon-comments/pull/19) +- Update storybook dev dependency to auto export repo info [PR20](https://github.com/kadirahq/storybook-addon-comments/pull/20) +- Fix getUserInfo error by correcting method name [PR21](https://github.com/kadirahq/storybook-addon-comments/pull/21) ### v1.1.0 Add some usability improvements. -* Change login links to Storybook Hub. [PR12](https://github.com/kadirahq/storybook-addon-comments/pull/12) -* Remove full date text. [PR13](https://github.com/kadirahq/storybook-addon-comments/pull/13) -* Increase font size a bit. [PR14](https://github.com/kadirahq/storybook-addon-comments/pull/14) -* Implement a local comments cache. [PR16](https://github.com/kadirahq/storybook-addon-comments/pull/16) +- Change login links to Storybook Hub. [PR12](https://github.com/kadirahq/storybook-addon-comments/pull/12) +- Remove full date text. [PR13](https://github.com/kadirahq/storybook-addon-comments/pull/13) +- Increase font size a bit. [PR14](https://github.com/kadirahq/storybook-addon-comments/pull/14) +- Implement a local comments cache. [PR16](https://github.com/kadirahq/storybook-addon-comments/pull/16) ### v1.0.0 -* First stable release +- First stable release diff --git a/addons/comments/README.md b/addons/comments/README.md index 8fb19d8f4ba1..115e8d406940 100644 --- a/addons/comments/README.md +++ b/addons/comments/README.md @@ -1,4 +1,5 @@ # Storybook Comments Addon + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) diff --git a/addons/comments/package.json b/addons/comments/package.json index 1f0ccdafa23a..782904669969 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -23,6 +23,7 @@ "storybook-remote": "start-storybook -p 3006" }, "dependencies": { + "@storybook/addons": "^3.0.0-rc.0", "babel-runtime": "^6.23.0", "deep-equal": "^1.0.1", "events": "^1.1.1", @@ -36,9 +37,6 @@ "devDependencies": { "@kadira/storybook-database-cloud": "*", "@kadira/storybook-deployer": "*", - "@storybook/addons": "^3.0.0-rc.0", - "@storybook/react": "^3.0.0-rc.0", - "@storybook/ui": "^3.0.0-rc.0", "git-url-parse": "^6.2.2", "react": "^15.5.4", "react-dom": "^15.5.4", @@ -46,8 +44,6 @@ "shelljs": "^0.7.7" }, "peerDependencies": { - "@storybook/addons": "^3.0.0-rc.0", - "react": "*", - "react-dom": "*" + "react": "*" } } diff --git a/addons/graphql/CHANGELOG.md b/addons/graphql/CHANGELOG.md index f5f29915f804..cbfab56d7fb4 100644 --- a/addons/graphql/CHANGELOG.md +++ b/addons/graphql/CHANGELOG.md @@ -2,4 +2,4 @@ ### v1.0.0 -* First stable release +- First stable release diff --git a/addons/graphql/README.md b/addons/graphql/README.md index 1fd65dbc2ced..a4047b9fe190 100644 --- a/addons/graphql/README.md +++ b/addons/graphql/README.md @@ -1,4 +1,5 @@ # Storybook GraphiQL Addon + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 4b0ebf204491..2fc4835eaf1a 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -21,13 +21,14 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/graphql", "devDependencies": { - "@storybook/react": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "shelljs": "^0.7.7" }, + "dependencies": { + "@storybook/addons": "*" + }, "peerDependencies": { - "@storybook/addons": "*", "react": "*" }, "dependencies": { diff --git a/addons/info/CHANGELOG.md b/addons/info/CHANGELOG.md index 1c8a9c22cb06..0b2b1a1031d5 100644 --- a/addons/info/CHANGELOG.md +++ b/addons/info/CHANGELOG.md @@ -2,84 +2,84 @@ ### v3.3.0 -* Add setDefaults function [PR114](https://github.com/kadirahq/react-storybook-addon-info/pull/114) +- Add setDefaults function [PR114](https://github.com/kadirahq/react-storybook-addon-info/pull/114) ### v3.2.4 -* Add missing dist files [PR113](https://github.com/kadirahq/react-storybook-addon-info/pull/113) +- Add missing dist files [PR113](https://github.com/kadirahq/react-storybook-addon-info/pull/113) ### v3.2.3 -* Handle number type nodes [PR110](https://github.com/kadirahq/react-storybook-addon-info/pull/110) +- Handle number type nodes [PR110](https://github.com/kadirahq/react-storybook-addon-info/pull/110) ### v3.2.2 -* Use markdown-to-react-components npm package instead of our fork. Our PR to them is merged and published. [PR109](https://github.com/kadirahq/react-storybook-addon-info/pull/109) +- Use markdown-to-react-components npm package instead of our fork. Our PR to them is merged and published. [PR109](https://github.com/kadirahq/react-storybook-addon-info/pull/109) ### v3.2.1 -* Handle false values for types [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) +- Handle false values for types [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) ### v3.2.0 -* Support custom MTRC config [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) -* Fix propTables prop validation with a default value [PR55](https://github.com/kadirahq/react-storybook-addon-info/pull/55) +- Support custom MTRC config [PR54](https://github.com/kadirahq/react-storybook-addon-info/pull/54) +- Fix propTables prop validation with a default value [PR55](https://github.com/kadirahq/react-storybook-addon-info/pull/55) ### v3.1.4 -* Remove propTables prop validation warning [PR53](https://github.com/kadirahq/react-storybook-addon-info/pull/53) -* Update example storybook [PR52](https://github.com/kadirahq/react-storybook-addon-info/pull/52) +- Remove propTables prop validation warning [PR53](https://github.com/kadirahq/react-storybook-addon-info/pull/53) +- Update example storybook [PR52](https://github.com/kadirahq/react-storybook-addon-info/pull/52) ### v3.1.3 -* Fix wrong detection of propType when isRequired is set [PR49](https://github.com/kadirahq/react-storybook-addon-info/pull/49) -* Add displayName for Button [PR51](https://github.com/kadirahq/react-storybook-addon-info/pull/51) +- Fix wrong detection of propType when isRequired is set [PR49](https://github.com/kadirahq/react-storybook-addon-info/pull/49) +- Add displayName for Button [PR51](https://github.com/kadirahq/react-storybook-addon-info/pull/51) ### v3.1.2 -* Fixed a bug which made the `info` to not display and the `options` parameter to be ignored when `info` is not given.[PR45](https://github.com/kadirahq/react-storybook-addon-info/pull/45) +- Fixed a bug which made the `info` to not display and the `options` parameter to be ignored when `info` is not given.[PR45](https://github.com/kadirahq/react-storybook-addon-info/pull/45) ### v3.1.1 -* Add a z-index for rendered items to make the overlay always display on top [PR38](https://github.com/kadirahq/react-storybook-addon-info/pull/38) +- Add a z-index for rendered items to make the overlay always display on top [PR38](https://github.com/kadirahq/react-storybook-addon-info/pull/38) ### v3.1.0 -* Make the `info` argument optional [PR37](https://github.com/kadirahq/react-storybook-addon-info/pull/37) +- Make the `info` argument optional [PR37](https://github.com/kadirahq/react-storybook-addon-info/pull/37) ### v3.0.10 -* Render the component inside a div element when on inline mode [PR34](https://github.com/kadirahq/react-storybook-addon-info/pull/34) +- Render the component inside a div element when on inline mode [PR34](https://github.com/kadirahq/react-storybook-addon-info/pull/34) ### v3.0.9 -* Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25) -* Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24) -* Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30) -* Remove max-width style rule for wrapper [PR31](https://github.com/kadirahq/react-storybook-addon-info/pull/31) and [PR36](https://github.com/kadirahq/react-storybook-addon-info/pull/36) -* Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32) +- Add missing `@kadira/storybook` devDependencies [PR25](https://github.com/kadirahq/react-storybook-addon-info/pull/25) +- Improve prop rendering in jsx source view [PR24](https://github.com/kadirahq/react-storybook-addon-info/pull/24) +- Avoid warning message with "webkitFontSmoothing" [PR30](https://github.com/kadirahq/react-storybook-addon-info/pull/30) +- Remove max-width style rule for wrapper [PR31](https://github.com/kadirahq/react-storybook-addon-info/pull/31) and [PR36](https://github.com/kadirahq/react-storybook-addon-info/pull/36) +- Improve prop table rendering (handle css resets) [PR32](https://github.com/kadirahq/react-storybook-addon-info/pull/32) ### v3.0.8 -* Fixed unkeyed array iteration warning in React with: [PR23](https://github.com/kadirahq/react-storybook-addon-info/pull/23) +- Fixed unkeyed array iteration warning in React with: [PR23](https://github.com/kadirahq/react-storybook-addon-info/pull/23) ### v3.0.7 -* Improve default display in prop table. See [#16](https://github.com/kadirahq/react-storybook-addon-info/pull/16) +- Improve default display in prop table. See [#16](https://github.com/kadirahq/react-storybook-addon-info/pull/16) ### v3.0.6 -* Improve function type and react element type props display. See [#14](https://github.com/kadirahq/react-storybook-addon-info/pull/14) +- Improve function type and react element type props display. See [#14](https://github.com/kadirahq/react-storybook-addon-info/pull/14) ### v3.0.5 -* Over-indentation of ending tag in source code is fixed. See [#13](https://github.com/kadirahq/react-storybook-addon-info/pull/13) +- Over-indentation of ending tag in source code is fixed. See [#13](https://github.com/kadirahq/react-storybook-addon-info/pull/13) ### v3.0.4 -* Remove the need to use json-loader with webpack when using this package. -See: [#12](https://github.com/kadirahq/react-storybook-addon-info/issues/12) +- Remove the need to use json-loader with webpack when using this package. + See: [#12](https://github.com/kadirahq/react-storybook-addon-info/issues/12) ### v3.0.0 -* Add the version which works as an Storybook addon. +- Add the version which works as an Storybook addon. diff --git a/addons/info/README.md b/addons/info/README.md index c9b02e562eaa..592d5b668ff7 100644 --- a/addons/info/README.md +++ b/addons/info/README.md @@ -1,4 +1,5 @@ # Storybook Info Addon + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -47,7 +48,7 @@ storiesOf('Component') 'simple usage', `This is the basic usage with the button with providing a label to show the text.`, () => ( - Click the "?" mark at top-right to view the info. + Click the "?" mark at top-right to view the info. ), ); ``` diff --git a/addons/info/package.json b/addons/info/package.json index 16a6d5232f83..0e621a383565 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -13,7 +13,6 @@ "publish-storybook": "bash .scripts/publish_storybook.sh" }, "devDependencies": { - "@storybook/react": "^3.0.0-rc.0", "git-url-parse": "^6.2.2", "react": "^15.5.4", "react-dom": "^15.5.4", @@ -21,10 +20,10 @@ "react-test-renderer": "^15.5.4" }, "peerDependencies": { - "react": "*", - "react-dom": "*" + "react": "*" }, "dependencies": { + "@storybook/addons": "^3.0.0-rc.0", "babel-runtime": "^6.23.0", "markdown-to-react-components": "^0.2.1", "prop-types": "^15.5.8", diff --git a/addons/knobs/CHANGELOG.md b/addons/knobs/CHANGELOG.md index a99fc9fd80fd..4a02cb017018 100644 --- a/addons/knobs/CHANGELOG.md +++ b/addons/knobs/CHANGELOG.md @@ -1,88 +1,105 @@ # Changelog ### v1.7.1 + 01-December-2016 Update style changes in the panel. [PR79](https://github.com/storybooks/storybook-addon-knobs/pull/79) ### v1.7.0 + 25-November-2016 Modify number() to support a range slider as an input type for a knob.[PR77](https://github.com/storybooks/storybook-addon-knobs/pull/77) ### v1.6.0 + 19-November-2016 Add Color as a type. [PR75](https://github.com/storybooks/storybook-addon-knobs/pull/75) ### v1.5.0 + 8-November-2016 Add Array as a type. [PR70](https://github.com/storybooks/storybook-addon-knobs/pull/70). ### v1.4.1 + 27-October-2016 -Fix some issues related to typescript declaration. [PR69](Typescript declaration updates) +Fix some issues related to typescript declaration. [PR69]() ### v1.4.0 + 27-October-2016 Add TypeScript support [PR65](https://github.com/kadirahq/storybook-addon-knobs/pull/65). ### v1.3.3 + 13-October-2016 Fix issue where hot reloaded updates were not rendered [PR62](https://github.com/kadirahq/storybook-addon-knobs/pull/62). ### v1.3.2 + 13-October-2016 Make the render function of WrapStory pure [PR61](https://github.com/kadirahq/storybook-addon-knobs/pull/61). ### v1.3.1 + 13-October-2016 Show or hide knob from panel depending on whether it was called in the story or not [PR59](https://github.com/kadirahq/storybook-addon-knobs/pull/59). ### v1.3.0 + 05-October-2016 Accept null values for the date type. [PR56](https://github.com/kadirahq/storybook-addon-knobs/pull/56). ### v1.2.3 + 28-September-2016 Remove setting selected prop in options in Select knobs [PR47](https://github.com/kadirahq/storybook-addon-knobs/pull/47) ### v1.2.2 + 25-September-2016 Fix copy-paste error [PR37](https://github.com/kadirahq/storybook-addon-knobs/pull/37) Remove
wrapper from WrapStory [PR42](https://github.com/kadirahq/storybook-addon-knobs/pull/42) ### v1.2.1 + 20-September-2016 Support to use date type without a default value. [PR32](https://github.com/kadirahq/storybook-addon-knobs/pull/32) ### v1.2.0 + 19-September-2016 Add a knob to get date from the user. [PR26](https://github.com/kadirahq/storybook-addon-knobs/pull/26) ### v1.1.0 + 11-September-2016 Implement the select knob. [PR21](https://github.com/kadirahq/storybook-addon-knobs/pull/21) ### v1.0.1 + 09-September-2016 Allow user to write JSON in the Object knob freely. Earlier, it's hard to add new fields without creating a JSON error. ### v1.0.0 + 09-September-2016 Initial Release. diff --git a/addons/knobs/README.md b/addons/knobs/README.md index 699eb8c28b49..68884de2b0dc 100644 --- a/addons/knobs/README.md +++ b/addons/knobs/README.md @@ -1,4 +1,5 @@ # Storybook Addon Knobs + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -22,7 +23,7 @@ This is how Knobs look like: First of all, you need to install knobs into your project as a dev dependency. -```js +```sh npm i -D @storybook/addon-knobs ``` @@ -70,10 +71,10 @@ You can see your Knobs in a Storybook panel as shown below. ### Additional Links -* Introduction blog post. -* Watch this video on how to use knobs -* [Live Storybook with Knobs](https://goo.gl/uX9WLf) -* Have a look at this [sample Storybook repo](https://github.com/kadira-samples/storybook-knobs-example). +- Introduction blog post. +- Watch this video on how to use knobs +- [Live Storybook with Knobs](https://goo.gl/uX9WLf) +- Have a look at this [sample Storybook repo](https://github.com/kadira-samples/storybook-knobs-example). ## Available Knobs @@ -197,7 +198,7 @@ const defaultValue = 'red'; const value = select(label, options, defaultValue); ``` -> You can also provide options as an array like this: ['red', 'blue', 'yellow'] +> You can also provide options as an array like this: `['red', 'blue', 'yellow']` ### date @@ -213,7 +214,7 @@ const value = date(label, defaultValue); If you are using typescript, make sure you have the type definitions installed for the following libs: -- node -- react +- node +- react You can install them using `npm i -S @types/node @types/react`, assuming you are using Typescript >2.0. diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 0bbf419edd12..68a64b275306 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -14,7 +14,6 @@ "publish-storybook": "bash .scripts/publish_storybook.sh" }, "devDependencies": { - "@storybook/react": "^3.0.0-rc.0", "@types/node": "^7.0.12", "@types/react": "^15.0.21", "git-url-parse": "^6.2.2", @@ -26,11 +25,11 @@ "typescript-definition-tester": "^0.0.5" }, "peerDependencies": { - "@storybook/addons": "*", "react": "*", "react-dom": "*" }, "dependencies": { + "@storybook/addons": "*", "babel-runtime": "^6.23.0", "deep-equal": "^1.0.1", "insert-css": "^1.0.0", diff --git a/addons/links/CHANGELOG.md b/addons/links/CHANGELOG.md index e75e5e46b4de..3d04b2ab3bf2 100644 --- a/addons/links/CHANGELOG.md +++ b/addons/links/CHANGELOG.md @@ -2,9 +2,9 @@ ### v1.0.1 -* Refactor source code -* Update the README file +- Refactor source code +- Update the README file ### v1.0.0 -* First stable release with all features from the storybook linkTo function +- First stable release with all features from the storybook linkTo function diff --git a/addons/links/README.md b/addons/links/README.md index b11e13c9a1c2..39c57d38fac6 100644 --- a/addons/links/README.md +++ b/addons/links/README.md @@ -1,4 +1,5 @@ # Story Links Addon + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -37,8 +38,8 @@ linkTo('Toggle', 'off') With that, you can link an event in a component to any story in the Storybook. -* First parameter is the the story kind name (what you named with `storiesOf`). -* Second parameter is the story name (what you named with `.add`). +- First parameter is the the story kind name (what you named with `storiesOf`). +- Second parameter is the story name (what you named with `.add`). > You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string.
> Have a look at [PR86](https://github.com/kadirahq/react-storybook/pull/86) for more information. diff --git a/addons/links/package.json b/addons/links/package.json index 2c547669165c..d9a803e4728f 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -21,15 +21,14 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/links", "devDependencies": { - "@storybook/addons": "^3.0.0-rc.0", - "@storybook/react": "^3.0.0-rc.0", - "@storybook/ui": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "shelljs": "^0.7.7" }, + "dependencies": { + "@storybook/addons": "^3.0.0-rc.0" + }, "peerDependencies": { - "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" } diff --git a/addons/notes/CHANGELOG.md b/addons/notes/CHANGELOG.md index ac02677abb34..d1d549f99b5a 100644 --- a/addons/notes/CHANGELOG.md +++ b/addons/notes/CHANGELOG.md @@ -1,11 +1,13 @@ # ChangeLog ### v1.0.1 + 30-August-2016 -* Update docs. +- Update docs. ### v1.0.0 + 30-August-2016 -* Initial version +- Initial version diff --git a/addons/notes/README.md b/addons/notes/README.md index 3ce92ffba89c..8b8e3c7b0a0d 100644 --- a/addons/notes/README.md +++ b/addons/notes/README.md @@ -1,4 +1,5 @@ # Storybook Addon Notes + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) diff --git a/addons/notes/package.json b/addons/notes/package.json index e43eebcf7ece..2d9a4da37ddb 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -13,17 +13,16 @@ "publish-storybook": "bash .scripts/publish_storybook.sh" }, "devDependencies": { - "@storybook/react": "^3.0.0-rc.0", "git-url-parse": "^6.2.2", "react": "^15.5.4", "react-addons-test-utils": "^15.5.1", "react-dom": "^15.5.4" }, "peerDependencies": { - "@storybook/addons": "*", "react": "*" }, "dependencies": { + "@storybook/addons": "*", "babel-runtime": "^6.23.0", "prop-types": "^15.5.10" }, diff --git a/addons/options/CHANGELOG.md b/addons/options/CHANGELOG.md index 2472d1164634..1ad8d52a97be 100644 --- a/addons/options/CHANGELOG.md +++ b/addons/options/CHANGELOG.md @@ -1,16 +1,19 @@ ## Changelog ### v1.0.2 + 13 Mar 2017 -* Add typescript typings +- Add typescript typings ### v1.0.1 + 26 Sep 2016 -* Update dev dependencies +- Update dev dependencies ### v1.0.0 + 23 Sep 2016 -* First stable release +- First stable release diff --git a/addons/options/README.md b/addons/options/README.md index 2a7b68030b72..2db3b41a324f 100644 --- a/addons/options/README.md +++ b/addons/options/README.md @@ -1,4 +1,5 @@ # Storybook Options Addon + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) diff --git a/addons/options/package.json b/addons/options/package.json index f5b0a4787fc7..46aa59c19aac 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -20,16 +20,15 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/options", "devDependencies": { - "@storybook/addons": "^3.0.0-rc.0", - "@storybook/react": "^3.0.0-rc.0", - "@storybook/ui": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "react-test-renderer": "^15.5.4", "shelljs": "^0.7.7" }, + "dependencies": { + "@storybook/addons": "^3.0.0-rc.0" + }, "peerDependencies": { - "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" }, diff --git a/addons/storyshots/CHANGELOG.md b/addons/storyshots/CHANGELOG.md index afec38713375..f21d152162e4 100644 --- a/addons/storyshots/CHANGELOG.md +++ b/addons/storyshots/CHANGELOG.md @@ -1,31 +1,37 @@ # ChangeLog ### v3.2.2 + 16-February-2016 Move set channel to happen before anything runs because addons might init expecting the channel to exist. [PR75](https://github.com/storybooks/storyshots/pull/75) ### v3.2.1 + 21-January-2016 Provide mock Storybook Channel to Storybook addons. [PR72](https://github.com/storybooks/storyshots/pull/72) ### v3.2.0 + 30-December-2016 Add support to filter stories by story name using a regexp. [PR70](https://github.com/storybooks/storyshots/pull/70) ### v3.1.1 + 27-December-2016 Pass storybook context to render function of stories. [PR69](https://github.com/storybooks/storyshots/pull/69) ### v3.1.0 + 24-December-2016 Add support for require.context. [PR67](https://github.com/storybooks/storyshots/pull/67) ### v3.0.0 + 22-December-2016 This is a brand new version of StoryShots where it allows you to use StoryShots inside Jest. Earlier we have also bundled a CLI tool which uses some of the internal modules used by Jest. @@ -36,26 +42,30 @@ If you still like to use our CLI version, use this [version](https://github.com/ (It's working but we no longer maintain it.) ### v2.1.0 + 8-November-2016 Default loaders support markdown file [PR56](https://github.com/kadirahq/storyshots/pull/56) ### v2.0.2 + 7-November-2016 -* `NODE_ENV` is set to `"development"` by default [PR50](https://github.com/kadirahq/storyshots/pull/50) -* `require.context` regexp test includes the begining `./` of filenames [PR55](https://github.com/kadirahq/storyshots/pull/55) +- `NODE_ENV` is set to `"development"` by default [PR50](https://github.com/kadirahq/storyshots/pull/50) +- `require.context` regexp test includes the begining `./` of filenames [PR55](https://github.com/kadirahq/storyshots/pull/55) ### v2.0.1 + 20-October-2016 Prepare channel before reading storybook as some addons use it before running stories. [PR41](https://github.com/kadirahq/storyshots/pull/41) ### v2.0.0 + 11-October-2016 -* Update `jest-snapshot` to version 16.0.0. [PR39](https://github.com/kadirahq/storyshots/pull/39) -* Use a directory and extension different from regular jest snapshots for storyshots. [PR40](https://github.com/kadirahq/storyshots/pull/40) +- Update `jest-snapshot` to version 16.0.0. [PR39](https://github.com/kadirahq/storyshots/pull/39) +- Use a directory and extension different from regular jest snapshots for storyshots. [PR40](https://github.com/kadirahq/storyshots/pull/40) #### Migrating from 1.x.x @@ -67,70 +77,81 @@ This mean that once storyshots is updated to 2.0.0 it wont check your existing s To update safely, follow these steps. -1. Run your 1.x.x version of storyshots and make sure all stories pass. -2. Update storyshots. `npm install @kadira/storyshots@^2.0.0 --save-dev` -3. Delete `__snapshots__` directory and contents from your storybook config directory. Also remove it from your version control system. -4. Run updated storyshots and add the newly added `__storyshots__` directory to your version control system. +1. Run your 1.x.x version of storyshots and make sure all stories pass. +2. Update storyshots. `npm install @kadira/storyshots@^2.0.0 --save-dev` +3. Delete `__snapshots__` directory and contents from your storybook config directory. Also remove it from your version control system. +4. Run updated storyshots and add the newly added `__storyshots__` directory to your version control system. Done! ### v1.1.5 + 9-October-2016 Fix issue where `require.context` did not work with regexps for full path. [PR37](https://github.com/kadirahq/storyshots/pull/37) ### v1.1.4 + 6-October-2016 Add support for `require.context` inside storybook config module. The regression introduced in v1.1.2 is addressed. [PR33](https://github.com/kadirahq/storyshots/pull/30) ### v1.1.3 + 30-September-2016 v1.1.2 introduce a [regression](https://github.com/kadirahq/storyshots/pull/30#issuecomment-250805615). So this revert that version. ### v1.1.2 + 30-September-2016 Add support for `require.context` inside storybook config module. [PR30](https://github.com/kadirahq/storyshots/pull/30) ### v1.1.1 + 28-September-2016 -* Watch mode Summary shows the stats for the last run only. [PR27](https://github.com/kadirahq/storyshots/pull/27) -* If some tests fail exit with status code 1. [PR28](https://github.com/kadirahq/storyshots/pull/28) +- Watch mode Summary shows the stats for the last run only. [PR27](https://github.com/kadirahq/storyshots/pull/27) +- If some tests fail exit with status code 1. [PR28](https://github.com/kadirahq/storyshots/pull/28) ### v1.1.0 + 27-September-2016 Add `--exclude` flag to avoid running stories matching a given regexp. [PR24](https://github.com/kadirahq/storyshots/pull/24) [PR25](https://github.com/kadirahq/storyshots/pull/25) ### v1.0.5 + 25-September-2016 -* Fix missing dependencies. [PR21](https://github.com/kadirahq/storyshots/pull/21) -* Context should contain only the story name. [PR20](https://github.com/kadirahq/storyshots/pull/20) +- Fix missing dependencies. [PR21](https://github.com/kadirahq/storyshots/pull/21) +- Context should contain only the story name. [PR20](https://github.com/kadirahq/storyshots/pull/20) ### v1.0.4 Invalid Version. Same as v1.0.3 ### v1.0.3 + 23-September-2016 Fix a typo in the console Summary message. ### v1.0.1 + 22-September-2016 Fix: Allow module loaders to return something. [PR14](https://github.com/kadirahq/storyshots/pull/14) ### v1.0.1 + 22-September-2016 Fix a typo. ### v1.0.0 + 22-September-2016 Initial Release. diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index 6a707774ccf9..1d164569dcd5 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -1,4 +1,5 @@ # StoryShots + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -28,8 +29,8 @@ npm install --save-dev @storybook/addon-storyshots Usually, you might already have completed this step. If not, here are some resources for you. -* If you are using Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`. -* Otherwise check this Egghead [lesson](https://egghead.io/lessons/javascript-test-javascript-with-jest). +- If you are using Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`. +- Otherwise check this Egghead [lesson](https://egghead.io/lessons/javascript-test-javascript-with-jest). ## Configure Storyshots @@ -54,8 +55,8 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y By default, Storyshots assumes the config directory path for your project as below: -* Storybook for React: `.storybook` -* Storybook for React Native: `storybook` +- Storybook for React: `.storybook` +- Storybook for React Native: `storybook` If you are using a different config directory path, you could change it like this: @@ -117,7 +118,6 @@ The default, render the story as normal and take a Jest snapshot. Just render the story, don't check the output at all (useful if you just want to ensure it doesn't error). - ### `snapshotWithOptions(options)` -Like the default, but allows you to specify a set of options for the test renderer. See for example: https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16 +Like the default, but allows you to specify a set of options for the test renderer. [See for example here](https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16). diff --git a/app/react-native/CHANGELOG.md b/app/react-native/CHANGELOG.md index 63e46f23cd6f..d898d5e2a436 100644 --- a/app/react-native/CHANGELOG.md +++ b/app/react-native/CHANGELOG.md @@ -2,217 +2,217 @@ ## v2.3.0 -* Add support for multiple users [#PR132](https://github.com/storybooks/react-native-storybook/pull/132) +- Add support for multiple users [#PR132](https://github.com/storybooks/react-native-storybook/pull/132) ## v2.2.4 -* Fix build issue with RN v0.42 [#PR128](https://github.com/storybooks/react-native-storybook/pull/128) and [#PR129](https://github.com/storybooks/react-native-storybook/pull/129) +- Fix build issue with RN v0.42 [#PR128](https://github.com/storybooks/react-native-storybook/pull/128) and [#PR129](https://github.com/storybooks/react-native-storybook/pull/129) ## v2.2.3 -* Support React Native v0.42 [PR #126](https://github.com/kadirahq/react-native-storybook/pull/126). +- Support React Native v0.42 [PR #126](https://github.com/kadirahq/react-native-storybook/pull/126). ## v2.2.2 -* Load .babelrc from project root directory [PR #125](https://github.com/kadirahq/react-native-storybook/pull/123). +- Load .babelrc from project root directory [PR #125](https://github.com/kadirahq/react-native-storybook/pull/123). ## v2.2.1 -* Support React Native v0.41 [PR #121](https://github.com/kadirahq/react-native-storybook/pull/121). +- Support React Native v0.41 [PR #121](https://github.com/kadirahq/react-native-storybook/pull/121). ## v2.2.0 -* Support React Native v0.39 [PR #114](https://github.com/kadirahq/react-native-storybook/pull/114). -* Support custom express middleware [PR #115](https://github.com/kadirahq/react-native-storybook/pull/115). +- Support React Native v0.39 [PR #114](https://github.com/kadirahq/react-native-storybook/pull/114). +- Support custom express middleware [PR #115](https://github.com/kadirahq/react-native-storybook/pull/115). ## v2.1.7 -* Support React Native v0.37 [PR #112](https://github.com/kadirahq/react-native-storybook/pull/112). +- Support React Native v0.37 [PR #112](https://github.com/kadirahq/react-native-storybook/pull/112). ## v2.1.6 -* Show help message on device if no story is selected [PR #111](https://github.com/kadirahq/react-native-storybook/pull/111). +- Show help message on device if no story is selected [PR #111](https://github.com/kadirahq/react-native-storybook/pull/111). ## v2.1.5 -* Support React Native v0.36 [PR #106](https://github.com/kadirahq/react-native-storybook/pull/106). +- Support React Native v0.36 [PR #106](https://github.com/kadirahq/react-native-storybook/pull/106). ## v2.1.4 -* Make sure that when a story is selected the previous story is completely unmounted and new story is mounted [PR #104](https://github.com/kadirahq/react-native-storybook/pull/104). +- Make sure that when a story is selected the previous story is completely unmounted and new story is mounted [PR #104](https://github.com/kadirahq/react-native-storybook/pull/104). ## v2.1.3 -* Support React Native v0.34 [PR #102](https://github.com/kadirahq/react-native-storybook/pull/102). +- Support React Native v0.34 [PR #102](https://github.com/kadirahq/react-native-storybook/pull/102). ## v2.1.2 -* Fix bug where context object is missing [PR #83](https://github.com/kadirahq/react-native-storybook/pull/83). +- Fix bug where context object is missing [PR #83](https://github.com/kadirahq/react-native-storybook/pull/83). ## v2.1.1 -* Support React Native v0.33 [PR #71](https://github.com/kadirahq/react-native-storybook/pull/71). +- Support React Native v0.33 [PR #71](https://github.com/kadirahq/react-native-storybook/pull/71). ## v2.1.0 -* Remove `/dist` directory from the repo -* Support custom preview addons [PR #68](https://github.com/kadirahq/react-native-storybook/pull/68). +- Remove `/dist` directory from the repo +- Support custom preview addons [PR #68](https://github.com/kadirahq/react-native-storybook/pull/68). ## v2.0.2 -* Use 7007 as the default port (use in getstorybook tool) [PR #64](https://github.com/kadirahq/react-native-storybook/pull/64). -* Support React Native v0.32 [PR #65](https://github.com/kadirahq/react-native-storybook/pull/65). +- Use 7007 as the default port (use in getstorybook tool) [PR #64](https://github.com/kadirahq/react-native-storybook/pull/64). +- Support React Native v0.32 [PR #65](https://github.com/kadirahq/react-native-storybook/pull/65). ## v2.0.1 -* Fix storyFn prop validation [PR #59](https://github.com/kadirahq/react-native-storybook/pull/59). -* Support older versions of react-native module [PR #60](https://github.com/kadirahq/react-native-storybook/pull/60). +- Fix storyFn prop validation [PR #59](https://github.com/kadirahq/react-native-storybook/pull/59). +- Support older versions of react-native module [PR #60](https://github.com/kadirahq/react-native-storybook/pull/60). ## v2.0.0 **Rewrite the backend to support new UI and addons** -* Use webpack dev middleware to serve storybook UI instead of prebuilt manager.js -* Advanced config API is removed (UI customizations can be done with addons easily) -* Removed custom channels and preview modules (moved to separate addons) +- Use webpack dev middleware to serve storybook UI instead of prebuilt manager.js +- Advanced config API is removed (UI customizations can be done with addons easily) +- Removed custom channels and preview modules (moved to separate addons) ## v1.12.6 -* Support react native versions 0.27.0 to 0.31.x +- Support react native versions 0.27.0 to 0.31.x ## v1.12.5 -* Support react native versions 0.27.0 to 0.30.x [PR #55](https://github.com/kadirahq/react-native-storybook/pull/55). +- Support react native versions 0.27.0 to 0.30.x [PR #55](https://github.com/kadirahq/react-native-storybook/pull/55). ## v1.12.3 -* Use channel modules [PR #52](https://github.com/kadirahq/react-native-storybook/pull/52). +- Use channel modules [PR #52](https://github.com/kadirahq/react-native-storybook/pull/52). ## v1.12.2 -* Make the `module` argument optional -* Remove unnecessary console.log statement +- Make the `module` argument optional +- Remove unnecessary console.log statement ## v1.12.1 -* Disable react warnings (these should be handled in storybook-ui repo) +- Disable react warnings (these should be handled in storybook-ui repo) ## v1.12.0 -* Add qr-code preview option [PR #49](https://github.com/kadirahq/react-native-storybook/pull/49). +- Add qr-code preview option [PR #49](https://github.com/kadirahq/react-native-storybook/pull/49). ## v1.11.3 -* Make `addDecorator` return `this` to make it chainable [PR #47](https://github.com/kadirahq/react-native-storybook/pull/47). +- Make `addDecorator` return `this` to make it chainable [PR #47](https://github.com/kadirahq/react-native-storybook/pull/47). ## v1.11.2 -* Get rid of the 'unique key prop' warning +- Get rid of the 'unique key prop' warning ## v1.11.1 -* Add missing imports for `storybook build` command +- Add missing imports for `storybook build` command ## v1.11.0 -* Rewrite most of the code to avoid unnecessary event emitters -* Improve code organization and haow it handles storybook config -* Implement `linkTo` feature. +- Rewrite most of the code to avoid unnecessary event emitters +- Improve code organization and haow it handles storybook config +- Implement `linkTo` feature. ## v1.10.1 -* Tweak appetize.io preview (remove frame and autoplay) +- Tweak appetize.io preview (remove frame and autoplay) ## v1.10.0 -* Remove android build from the build command [PR #41](https://github.com/kadirahq/react-native-storybook/pull/41). +- Remove android build from the build command [PR #41](https://github.com/kadirahq/react-native-storybook/pull/41). ## v1.9.0 -* Abstract the communication layer (as "channels") and add firebase support -* Add in-browser preview with appetize -* Add storybook favicon +- Abstract the communication layer (as "channels") and add firebase support +- Add in-browser preview with appetize +- Add storybook favicon ## v1.8.0 -* Introduce getStorybookUI method to get the UI component class. +- Introduce getStorybookUI method to get the UI component class. ## v1.7.2 -* Update README related to HMR usage. +- Update README related to HMR usage. ## v1.7.1 -* Make the getting started process simple. +- Make the getting started process simple. ## v1.7.0 -- Minify the manager build to around 350 KB with UglifyJs support. +- Minify the manager build to around 350 KB with UglifyJs support. ## v1.6.0 -- Add run-ios command [PR #27](https://github.com/kadirahq/react-native-storybook/pull/27). +- Add run-ios command [PR #27](https://github.com/kadirahq/react-native-storybook/pull/27). ## v1.5.0 -- Pass the context variable [PR #26](https://github.com/kadirahq/react-native-storybook/pull/26). +- Pass the context variable [PR #26](https://github.com/kadirahq/react-native-storybook/pull/26). ## v1.4.0 -- Implement action logger feature [PR #25](https://github.com/kadirahq/react-native-storybook/pull/25). +- Implement action logger feature [PR #25](https://github.com/kadirahq/react-native-storybook/pull/25). ## v1.3.0 -- Implement decorators feature [PR #24](https://github.com/kadirahq/react-native-storybook/pull/24). +- Implement decorators feature [PR #24](https://github.com/kadirahq/react-native-storybook/pull/24). ## v1.2.1 -- Fix bug where web UI crashes when starting with selection query params [PR #21](https://github.com/kadirahq/react-native-storybook/pull/21). +- Fix bug where web UI crashes when starting with selection query params [PR #21](https://github.com/kadirahq/react-native-storybook/pull/21). ## v1.2.0 -- Support addons [PR #20](https://github.com/kadirahq/react-native-storybook/pull/20). +- Support addons [PR #20](https://github.com/kadirahq/react-native-storybook/pull/20). ## v1.1.4 -- Add missing `module` argument to template [PR #18](https://github.com/kadirahq/react-native-storybook/pull/18). +- Add missing `module` argument to template [PR #18](https://github.com/kadirahq/react-native-storybook/pull/18). ## v1.1.3 -- Remove socket.io and use plain Websockets [PR #17](https://github.com/kadirahq/react-native-storybook/pull/17). Removes JS debugging requirement. +- Remove socket.io and use plain Websockets [PR #17](https://github.com/kadirahq/react-native-storybook/pull/17). Removes JS debugging requirement. ## v1.1.2 -- Partially fix hot module reloading [Issue #8](https://github.com/kadirahq/react-native-storybook/issues/8) with [PR #10](https://github.com/kadirahq/react-native-storybook/pull/10) +- Partially fix hot module reloading [Issue #8](https://github.com/kadirahq/react-native-storybook/issues/8) with [PR #10](https://github.com/kadirahq/react-native-storybook/pull/10) ## v1.1.1 -- Build source files and write README +- Build source files and write README ## v1.1.0 -- Replace `PreviewContainer` with `PreviewComponent` where the host and port are configurable +- Replace `PreviewContainer` with `PreviewComponent` where the host and port are configurable ## v1.0.4 -- Fix socket.io by using a patched socket.io temporarily [PR #2](https://github.com/kadirahq/react-native-storybook/pull/2) +- Fix socket.io by using a patched socket.io temporarily [PR #2](https://github.com/kadirahq/react-native-storybook/pull/2) ## v1.0.3 -- Fix `window.navigator.userAgent` related issue with socket.io [Issue #1](https://github.com/kadirahq/react-native-storybook/issues/1) +- Fix `window.navigator.userAgent` related issue with socket.io [Issue #1](https://github.com/kadirahq/react-native-storybook/issues/1) ## v1.0.2 -- Rename storybook command file from `cli.js` to `storybook.js` +- Rename storybook command file from `cli.js` to `storybook.js` ## v1.0.1 -- Add missing dependency `commander` to package.json file +- Add missing dependency `commander` to package.json file ## v1.0.0 This is the initial non-poc release of `react-native-storybook`. With this release, users can write stories and check them using an ios-simulator. The address of the storybook `localhost:9001` is hardcoded so for now it does not work on real devices or the android simulator. Also it is not contributor friendly. When used with `npm link`, the node_modules directory should be removed when using the ios simulator. - - Support ability to write stories using `storiesOf` and `add` without using decorators or addons - - The storybook can be started with `storybook start -h localhost -p 9001` although the port and host should be as given in this example - - The story preview device can be started with the `react-native run-ios` command but the apps `index.*.js` must be edited (for now) +- Support ability to write stories using `storiesOf` and `add` without using decorators or addons +- The storybook can be started with `storybook start -h localhost -p 9001` although the port and host should be as given in this example +- The story preview device can be started with the `react-native run-ios` command but the apps `index.*.js` must be edited (for now) diff --git a/app/react-native/docs/manual-setup.md b/app/react-native/docs/manual-setup.md index 489984b2c42b..516a5692da70 100644 --- a/app/react-native/docs/manual-setup.md +++ b/app/react-native/docs/manual-setup.md @@ -61,12 +61,10 @@ storiesOf('CenteredView') Then add following NPM script into your `package.json` file: -```js +```json { "scripts": { - ... "storybook": "storybook start -p 7007" - ... } } ``` diff --git a/app/react-native/docs/using-devices.md b/app/react-native/docs/using-devices.md index 31d90a62fe49..faba4338ee65 100644 --- a/app/react-native/docs/using-devices.md +++ b/app/react-native/docs/using-devices.md @@ -4,19 +4,19 @@ In order to work with React Native Storybook, one or more devices should be conn ## iOS simulator -- Start with `react-native run-ios` +- Start with `react-native run-ios` ## Android emulator -- Get your AVD name with `emulator -list-avds` -- Start the emulator `emulator -avd MY_AVD_NAME` -- Forward port 8081 `adb reverse tcp:8081 tcp:8081` -- Forward port 9001 `adb reverse tcp:9001 tcp:9001` -- Start with `react-native run-android` +- Get your AVD name with `emulator -list-avds` +- Start the emulator `emulator -avd MY_AVD_NAME` +- Forward port 8081 `adb reverse tcp:8081 tcp:8081` +- Forward port 9001 `adb reverse tcp:9001 tcp:9001` +- Start with `react-native run-android` ## Android device -- Connect your device with adb -- Forward port 8081 `adb reverse tcp:8081 tcp:8081` -- Forward port 9001 `adb reverse tcp:9001 tcp:9001` -- Start with `react-native run-android` +- Connect your device with adb +- Forward port 8081 `adb reverse tcp:8081 tcp:8081` +- Forward port 9001 `adb reverse tcp:9001 tcp:9001` +- Start with `react-native run-android` diff --git a/app/react-native/readme.md b/app/react-native/readme.md index cccc6dfde3ca..7d03536db9c7 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -1,4 +1,5 @@ # Storybook for React Native + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -59,13 +60,12 @@ Now, you can open to view your storybook menus in the br To see your Storybook stories on the device, you should start your mobile app for the `` of your choice (typically `ios` or `android`). For CRNA apps: -``` -npm run -``` + + npm run + For RN apps: -``` -react-native run- -``` + + react-native run- Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app. diff --git a/app/react-native/src/index.js b/app/react-native/src/index.js index 09d4bd9d8e6e..e74a5a6a425e 100644 --- a/app/react-native/src/index.js +++ b/app/react-native/src/index.js @@ -16,10 +16,10 @@ import { linkTo as deprecatedLinkTo } from '@storybook/addon-links'; export const action = deprecate( deprecatedAction, - '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/packages/addon-actions' + '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/actions' ); export const linkTo = deprecate( deprecatedLinkTo, - '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/packages/addon-links' + '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/links' ); diff --git a/app/react/CHANGELOG.md b/app/react/CHANGELOG.md index 759ab1e2a5a0..d4f2a75bd0c7 100644 --- a/app/react/CHANGELOG.md +++ b/app/react/CHANGELOG.md @@ -5,6 +5,7 @@ Allow customConfig to override devtool. [PR668](https://github.com/storybooks/react-storybook/pull/668) ### v2.35.2 + 03-January-2017 Fixes issue [#601](https://github.com/storybooks/react-storybook/issues/601) where it throws error when introduce a propType with a hypen. Add a [fix](https://github.com/kadirahq/babel-plugin-react-docgen/pull/23) to [`babel-plugin-react-docgen`](https://github.com/kadirahq/babel-plugin-react-docgen) to fix this issue. @@ -13,36 +14,42 @@ This release comes with the updated `babel-plugin-react-docgen`. ### v2.35.1 -* Revert [PR653](https://github.com/storybooks/react-storybook/pull/653) where it's causing HMR to not working properly. +- Revert [PR653](https://github.com/storybooks/react-storybook/pull/653) where it's causing HMR to not working properly. ### v2.35.0 + 18-December-2016 -* Using file-loader to load all the extensions [PR653](https://github.com/storybooks/react-storybook/pull/653) -* Update css-loader dependency [PR648](https://github.com/storybooks/react-storybook/pull/648) -* Check if stories are loaded from Jest [PR644](https://github.com/storybooks/react-storybook/pull/644) +- Using file-loader to load all the extensions [PR653](https://github.com/storybooks/react-storybook/pull/653) +- Update css-loader dependency [PR648](https://github.com/storybooks/react-storybook/pull/648) +- Check if stories are loaded from Jest [PR644](https://github.com/storybooks/react-storybook/pull/644) ### v2.34.0 + 05-December-2016 Open the express router for developers (middleware.js file). [PR435](https://github.com/storybooks/react-storybook/pull/435) ### v2.33.1 + 01-December-2016 Update Typescript definition file for global addDecorator. [PR634](https://github.com/storybooks/react-storybook/pull/634) ### v2.33.0 + 28-November-2016 Completely avoid re-rendering the preview iframe. [PR631](https://github.com/storybooks/react-storybook/pull/631) ### v2.32.2 + 28-November-2016 Update postmsg channel module version [PR627](https://github.com/storybooks/react-storybook/pull/627) ### v2.32.1 + 22-November-2016 Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/storybooks/react-storybook/pull/623) @@ -52,337 +59,394 @@ Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/s Incorrect publish (error when running `npm publish`) ### v2.31.0 + 20-November-2016 Add the react-storybook version to the build output. [PR621](https://github.com/storybooks/react-storybook/pull/621) ### v2.30.1 + 17-November-2016 Update the postmsg channel module to fix issue [#555](https://github.com/storybooks/react-storybook/issues/555) with [PR611](https://github.com/storybooks/react-storybook/pull/611) ### v2.30.0 + 16-November-2016 Update to the new Storybook UI which doesn't use Redux. ### v2.29.7 + 11-November-2016 Update @kadira/storybook-ui to the latest. ### v2.29.6 + 10-November-2016 Fix a typo in the story syntax error messages. [PR610](https://github.com/storybooks/react-storybook/pull/610) ### v2.29.5 + 09-November-2016 Check if regex and regex.test is available before calling it. [PR608](https://github.com/storybooks/react-storybook/pull/608) ### v2.29.3 + 08-November-2016 Update webpack-hot-middleware to version 2.13.2 to fix the issue [#543](https://github.com/storybooks/react-storybook/issues/543). ### v2.29.3 + 03-November-2016 Fix a regression caused by v2.29.2. There was a text called undefined listed always on the top of the preview. ### v2.29.2 + 03-November-2016 Add various fixes. -* Use webpack chunkhash to enable long-term caching. [PR597](https://github.com/storybooks/react-storybook/pull/597) -* Fixed json loader testing for when test is multiple. [PR598](https://github.com/storybooks/react-storybook/pull/598) -* Fix usage of custom favicon [PR592](https://github.com/storybooks/react-storybook/pull/592) -* Update postcss-loader to v1.1.0 [PR599](https://github.com/storybooks/react-storybook/pull/599) -* fix for `module.hot` is not available in a static build [PR600](https://github.com/storybooks/react-storybook/pull/600) +- Use webpack chunkhash to enable long-term caching. [PR597](https://github.com/storybooks/react-storybook/pull/597) +- Fixed json loader testing for when test is multiple. [PR598](https://github.com/storybooks/react-storybook/pull/598) +- Fix usage of custom favicon [PR592](https://github.com/storybooks/react-storybook/pull/592) +- Update postcss-loader to v1.1.0 [PR599](https://github.com/storybooks/react-storybook/pull/599) +- fix for `module.hot` is not available in a static build [PR600](https://github.com/storybooks/react-storybook/pull/600) ### v2.29.1 + 03-November-2016 Update babel-plugin-react-docgen to v1.4.1 to fix HOC [issue](https://github.com/kadirahq/babel-plugin-react-docgen/issues/19) ### v2.29.0 + 01-November-2016 Update babel-plugin-react-docgen to 1.4.0. This will fix some of the compilation issues such as #580. ### v2.28.1 + 28-October-2016 Remove preview decorator support. [PR583](https://github.com/storybooks/react-storybook/pull/583). ### v2.28.0 + 28-October-2016 Add preview decorator support. [PR582](https://github.com/storybooks/react-storybook/pull/582). This will help us bring storybook designer with some great power. ### v2.27.0 + 27-October-2016 Add a few usability improvements to Storybook. -* Display storybook version. [PR559](https://github.com/storybooks/react-storybook/pull/559) -* Make the storybooks cacheable. [PR578](https://github.com/storybooks/react-storybook/pull/578) -* Change the devtool to eval and remove the use of source maps. [PR577](https://github.com/storybooks/react-storybook/pull/577) -* Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybooks/react-storybook/pull/576) -* Ship `json-loader` by default. [PR575](https://github.com/storybooks/react-storybook/pull/575) +- Display storybook version. [PR559](https://github.com/storybooks/react-storybook/pull/559) +- Make the storybooks cacheable. [PR578](https://github.com/storybooks/react-storybook/pull/578) +- Change the devtool to eval and remove the use of source maps. [PR577](https://github.com/storybooks/react-storybook/pull/577) +- Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybooks/react-storybook/pull/576) +- Ship `json-loader` by default. [PR575](https://github.com/storybooks/react-storybook/pull/575) ### v2.26.0 + 24-October-2016 Get some new features from CRA. -* Add jsx as a resolve extension [PR563](https://github.com/storybooks/react-storybook/pull/563) -* Allow to use postcss for CSS @imports [PR564](https://github.com/storybooks/react-storybook/pull/564) -* Use process.env as a proper object [PR565](https://github.com/storybooks/react-storybook/pull/565) +- Add jsx as a resolve extension [PR563](https://github.com/storybooks/react-storybook/pull/563) +- Allow to use postcss for CSS @imports [PR564](https://github.com/storybooks/react-storybook/pull/564) +- Use process.env as a proper object [PR565](https://github.com/storybooks/react-storybook/pull/565) ### v2.25.1 + 23-October-2016 Add a potential fix to [558](https://github.com/storybooks/react-storybook/issues/558) by updating babel-plugin-react-docgen to the latest(v1.3.2). ### v2.25.0 + 21-October-2016 Add react docgen info into React classes with the react-docgen babel plugin. [PR557](https://github.com/storybooks/react-storybook/pull/557). With this: - * We could get docgen info with any React component class using `ClassName.__docgenInfo`. - * From the global collection: `STORYBOOK_REACT_CLASSES` +- We could get docgen info with any React component class using `ClassName.__docgenInfo`. +- From the global collection: `STORYBOOK_REACT_CLASSES` Additionally, added `yarn.lock`. ### v2.24.1 + 19-October-2016 Do not show git command output. [PR554](https://github.com/storybooks/react-storybook/pull/554) ### v2.24.0 + 07-October-2016 -* Export git repository info to support custom tool integrations [PR536](https://github.com/storybooks/react-storybook/pull/536) +- Export git repository info to support custom tool integrations [PR536](https://github.com/storybooks/react-storybook/pull/536) ### v2.23.0 + 06-October-2016 -* Remove the experimental database addon from react-storybook [PR535](https://github.com/storybooks/react-storybook/pull/535) +- Remove the experimental database addon from react-storybook [PR535](https://github.com/storybooks/react-storybook/pull/535) ### v2.22.0 + 05-October-2016 Add some nice development experiment based on suggestion from Dan Abramov. -* Set a color to the Storybook URL in the console. [PR533](https://github.com/storybooks/react-storybook/pull/533) -* Add better error message when there's no React element in the story. [PR534](https://github.com/storybooks/react-storybook/pull/534) +- Set a color to the Storybook URL in the console. [PR533](https://github.com/storybooks/react-storybook/pull/533) +- Add better error message when there's no React element in the story. [PR534](https://github.com/storybooks/react-storybook/pull/534) ### v2.21.0 + 05-October-2016 -* Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybooks/react-storybook/issues/468) -* Also bumped `@kadira/storybook-channel-postmsg` to `^1.0.3` +- Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybooks/react-storybook/issues/468) +- Also bumped `@kadira/storybook-channel-postmsg` to `^1.0.3` ### v2.20.1 + 28-September-2016 -* Fix story kind order bug [PR499](https://github.com/storybooks/react-storybook/pull/499) -* Prefix config environment variables [PR503](https://github.com/storybooks/react-storybook/pull/503) +- Fix story kind order bug [PR499](https://github.com/storybooks/react-storybook/pull/499) +- Prefix config environment variables [PR503](https://github.com/storybooks/react-storybook/pull/503) ### v2.20.0 + 26-September-2016 -* Use postMessage channel [PR498](https://github.com/storybooks/react-storybook/pull/498) -* Support dynamic panel titles [PR497](https://github.com/storybooks/react-storybook/pull/497) +- Use postMessage channel [PR498](https://github.com/storybooks/react-storybook/pull/498) +- Support dynamic panel titles [PR497](https://github.com/storybooks/react-storybook/pull/497) ### v2.19.0 + 26-September-2016 -* Support layout options [PR494](https://github.com/storybooks/react-storybook/pull/494) -* Update Typescript definitions [PR491](https://github.com/storybooks/react-storybook/pull/491) and [PR493](https://github.com/storybooks/react-storybook/pull/493) +- Support layout options [PR494](https://github.com/storybooks/react-storybook/pull/494) +- Update Typescript definitions [PR491](https://github.com/storybooks/react-storybook/pull/491) and [PR493](https://github.com/storybooks/react-storybook/pull/493) ### v2.18.1 + 23-September-2016 -* Stop uglifyjs from mangling names [PR483](https://github.com/storybooks/react-storybook/pull/483) +- Stop uglifyjs from mangling names [PR483](https://github.com/storybooks/react-storybook/pull/483) ### v2.18.0 + 23-September-2016 -* Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybooks/react-storybook/pull/481) +- Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybooks/react-storybook/pull/481) ### v2.17.0 + 22-September-2016 -* Add support for StoryShots. [PR479](https://github.com/storybooks/react-storybook/pull/479) -* Fix some typos: [PR477](https://github.com/storybooks/react-storybook/pull/477) & [PR478](https://github.com/storybooks/react-storybook/pull/478) +- Add support for StoryShots. [PR479](https://github.com/storybooks/react-storybook/pull/479) +- Fix some typos: [PR477](https://github.com/storybooks/react-storybook/pull/477) & [PR478](https://github.com/storybooks/react-storybook/pull/478) ### v2.16.1 + 21-September-2016 -* Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybooks/react-storybook/pull/472) -* Serve/Bundle the storybook favicon [PR473](https://github.com/storybooks/react-storybook/pull/473) +- Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybooks/react-storybook/pull/472) +- Serve/Bundle the storybook favicon [PR473](https://github.com/storybooks/react-storybook/pull/473) ### v2.16.0 + 21-September-2016 -* Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybooks/react-storybook/pull/469) -* Update airbnd eslint rules to the latest. +- Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybooks/react-storybook/pull/469) +- Update airbnd eslint rules to the latest. ### v2.15.1 + 19-September-2016 Add a fix to webpack custom resolve.alias not working. [PR465](https://github.com/storybooks/react-storybook/pull/465) ### v2.15.0 + 19-September-2016 -* Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybooks/react-storybook/pull/462) +- Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybooks/react-storybook/pull/462) ### v2.14.0 + 14-September-2016 -* Watch missing NPM modules and force webpack rebuild. [PR446](https://github.com/storybooks/react-storybook/pull/446) -* Fix issue on error message hanging after even it solved. [PR447](https://github.com/storybooks/react-storybook/pull/447) -* Allow to reload if HMR goes crazy. [PR448](https://github.com/storybooks/react-storybook/pull/448) -* Add support to get custom env variables. [PR450](https://github.com/storybooks/react-storybook/pull/450) +- Watch missing NPM modules and force webpack rebuild. [PR446](https://github.com/storybooks/react-storybook/pull/446) +- Fix issue on error message hanging after even it solved. [PR447](https://github.com/storybooks/react-storybook/pull/447) +- Allow to reload if HMR goes crazy. [PR448](https://github.com/storybooks/react-storybook/pull/448) +- Add support to get custom env variables. [PR450](https://github.com/storybooks/react-storybook/pull/450) ### v2.13.1 + 14-September-2016 -* Fix 404 error when db file does not exist [PR449](https://github.com/storybooks/react-storybook/pull/449) +- Fix 404 error when db file does not exist [PR449](https://github.com/storybooks/react-storybook/pull/449) ### v2.13.0 + 9-September-2016 -* Fix [#443](https://github.com/storybooks/react-storybook/issues/443) where the static version of Storybook doesn't like Safari. -* Update postcss-loader to 0.13.0. +- Fix [#443](https://github.com/storybooks/react-storybook/issues/443) where the static version of Storybook doesn't like Safari. +- Update postcss-loader to 0.13.0. ### v2.12.1 + 8-September-2016 -* Parse static directory provided by env as a list. [PR436](https://github.com/storybooks/react-storybook/pull/436) +- Parse static directory provided by env as a list. [PR436](https://github.com/storybooks/react-storybook/pull/436) ### v2.12.0 + 8-September-2016 -* Do not include addon register file on preview. [PR426](https://github.com/storybooks/react-storybook/pull/426) -* Update css-loader to version 0.25.0. [PR427](https://github.com/storybooks/react-storybook/pull/427) -* Get the head.html values for every page request. [PR432](https://github.com/storybooks/react-storybook/pull/432) +- Do not include addon register file on preview. [PR426](https://github.com/storybooks/react-storybook/pull/426) +- Update css-loader to version 0.25.0. [PR427](https://github.com/storybooks/react-storybook/pull/427) +- Get the head.html values for every page request. [PR432](https://github.com/storybooks/react-storybook/pull/432) ### v2.11.0 + 4-September-2016 -* Remove babel-polyfill since we don't use it. -* Update versions with the help from greenkeeper. [PR421](https://github.com/storybooks/react-storybook/pull/421) +- Remove babel-polyfill since we don't use it. +- Update versions with the help from greenkeeper. [PR421](https://github.com/storybooks/react-storybook/pull/421) ### v2.10.0 + 3-September-2016 -* Adding airbnb-js-shims again. [PR419](https://github.com/storybooks/react-storybook/pull/419) +- Adding airbnb-js-shims again. [PR419](https://github.com/storybooks/react-storybook/pull/419) ### v2.9.1 + 2-September-2016. -* Use the config directory to store the addon database file [PR418](https://github.com/storybooks/react-storybook/pull/418). +- Use the config directory to store the addon database file [PR418](https://github.com/storybooks/react-storybook/pull/418). ### v2.9.0 + 2-September-2016. -* Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybooks/react-storybook/pull/417). +- Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybooks/react-storybook/pull/417). ### v2.8.0 + 2-September-2016. -* Update @kadira/storybook to get the clean query params feature. See [storybook-ui-PR37](https://github.com/kadirahq/storybook-ui/pull/37) +- Update @kadira/storybook to get the clean query params feature. See [storybook-ui-PR37](https://github.com/kadirahq/storybook-ui/pull/37) ### v2.7.0 + 1-September-2016 -* Add addon database feature [PR415](https://github.com/storybooks/react-storybook/pull/415). +- Add addon database feature [PR415](https://github.com/storybooks/react-storybook/pull/415). ### v2.6.1 + 31-August-2016 -* Bring back HMR dev logs. [PR412](https://github.com/storybooks/react-storybook/pull/412). +- Bring back HMR dev logs. [PR412](https://github.com/storybooks/react-storybook/pull/412). ### v2.6.0 + 30-August-2016 -* Allow start/build params from env variables. [PR413](https://github.com/storybooks/react-storybook/pull/413) +- Allow start/build params from env variables. [PR413](https://github.com/storybooks/react-storybook/pull/413) ### v2.5.2 + 29-August-2016 -* Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybooks/react-storybook/pull/410) +- Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybooks/react-storybook/pull/410) ### v2.5.1 + 24-August-2016 -* Update @kadira/storybook-ui to v3.3.2 +- Update @kadira/storybook-ui to v3.3.2 ### v2.5.0 + 24-August-2016 -* We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybooks/react-storybook/pull/402) +- We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybooks/react-storybook/pull/402) ### v2.4.2 + 24-August-2016 -* Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybooks/react-storybook/pull/401) +- Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybooks/react-storybook/pull/401) ### v2.4.1 + 24-August-2016 -* Bump @kadira/storybook ui to v3.3.1 to fix some UI related issues. +- Bump @kadira/storybook ui to v3.3.1 to fix some UI related issues. ### v2.4.0 + 23-August-2016 -* Simplify the option to stop tracking. [PR399](https://github.com/storybooks/react-storybook/pull/399) -* Use JSON5 instead of CJSON to parse .babelrc. [PR398](https://github.com/storybooks/react-storybook/pull/398) -* Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybooks/react-storybook/pull/397) -* Use @kadira/storybook-ui 2.3.0, which has new APIs to set URL for addons. +- Simplify the option to stop tracking. [PR399](https://github.com/storybooks/react-storybook/pull/399) +- Use JSON5 instead of CJSON to parse .babelrc. [PR398](https://github.com/storybooks/react-storybook/pull/398) +- Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybooks/react-storybook/pull/397) +- Use @kadira/storybook-ui 2.3.0, which has new APIs to set URL for addons. ### v2.3.0 + 16-August-2016 -* Implement anonymous usage tracking. [PR384](https://github.com/storybooks/react-storybook/pull/384) +- Implement anonymous usage tracking. [PR384](https://github.com/storybooks/react-storybook/pull/384) ### v2.2.3 + 15-August-2016 -* Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybooks/react-storybook/pull/380) +- Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybooks/react-storybook/pull/380) ### v2.2.2 + 10-August-2016 -* Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybooks/react-storybook/pull/369). +- Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybooks/react-storybook/pull/369). ### v2.2.1 + 09-August-2016 -* Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybooks/react-storybook/pull/359). -* Update @kadira/storybook-ui to the latest. +- Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybooks/react-storybook/pull/359). +- Update @kadira/storybook-ui to the latest. ### v2.2.0 + 05-August-2016 This release bring some webpack config related optimizations and the NPM2 support. Here are the notable changes: -* Use es6-shim directly into webpack config. [PR355](https://github.com/storybooks/react-storybook/pull/355) -* Use the default babel-config based on CRA's config. [PR354](https://github.com/storybooks/react-storybook/pull/354) -* Add NPM2 support. [PR356](https://github.com/storybooks/react-storybook/pull/356) -* Add autofixer defaults. [PR357](https://github.com/storybooks/react-storybook/pull/357) +- Use es6-shim directly into webpack config. [PR355](https://github.com/storybooks/react-storybook/pull/355) +- Use the default babel-config based on CRA's config. [PR354](https://github.com/storybooks/react-storybook/pull/354) +- Add NPM2 support. [PR356](https://github.com/storybooks/react-storybook/pull/356) +- Add autofixer defaults. [PR357](https://github.com/storybooks/react-storybook/pull/357) ### v2.1.1 + 03-August-2016 Remove default webpack config for all config types. [PR348](https://github.com/storybooks/react-storybook/pull/348) @@ -391,6 +455,7 @@ Now we only use the Create React App based config if there's no custom webpack c This will fix issues like [#347](https://github.com/storybooks/react-storybook/issues/347). ### v2.1.0 + 02-August-2016 Add support for the addon API. See [PR346](https://github.com/storybooks/react-storybook/pull/346). @@ -400,356 +465,377 @@ So, this introduced a huge area to add customizations to Storybook. Unfortunately, as of this version, there are no docs for this feature. But, you can have a look at these addons: -* actions addon (powers the action logger): https://github.com/kadirahq/storybook-addon-actions -* links addon (powers the linkTo feature): https://github.com/kadirahq/storybook-addon-links +- actions addon (powers the action logger): [addon-actions](https://github.com/kadirahq/storybook-addon-actions) +- links addon (powers the linkTo feature): [addon-links](https://github.com/kadirahq/storybook-addon-links) Have a look at [here](https://github.com/storybooks/react-storybook/blob/master/src/server/config.js#L88) to how to configure addons. ### v2.0.0 + 01-August-2016 This is the starting of the next major version of Storybook. This version is almost compatible with `v1.x.x` but defaults have been changes as discussed below. That's why we are starting out a new version. -* Update defaults to match create-react-app. [PR342](https://github.com/storybooks/react-storybook/pull/342). Here are the notable changes: - * Add postcss based CSS loader. - * Add file-loader for images and common types. - * Add url-loader for shorter media files. - * Do not pre-build manager(storybook UI) bundle. - * Continue support for babel's stage-0 preset and add es2016 preset. -* Update @kadira/storybook-ui to v2.6.1 to remove some React warnings. +- Update defaults to match create-react-app. [PR342](https://github.com/storybooks/react-storybook/pull/342). Here are the notable changes: + - Add postcss based CSS loader. + - Add file-loader for images and common types. + - Add url-loader for shorter media files. + - Do not pre-build manager(storybook UI) bundle. + - Continue support for babel's stage-0 preset and add es2016 preset. +- Update @kadira/storybook-ui to v2.6.1 to remove some React warnings. ### v1.41.0 -* Fix nodejs require errors [#337](https://github.com/storybooks/react-storybook/pull/337). -* Add getStorybook method to client API [#332](https://github.com/storybooks/react-storybook/pull/332). +- Fix nodejs require errors [#337](https://github.com/storybooks/react-storybook/pull/337). +- Add getStorybook method to client API [#332](https://github.com/storybooks/react-storybook/pull/332). ### v1.40.0 -* Fix duplicate decorator bug [#335](https://github.com/storybooks/react-storybook/pull/335). +- Fix duplicate decorator bug [#335](https://github.com/storybooks/react-storybook/pull/335). ### v1.39.1 -* Update babel packages [#325](https://github.com/storybooks/react-storybook/pull/325). -* Hide HMR info logs [#331](https://github.com/storybooks/react-storybook/pull/331). +- Update babel packages [#325](https://github.com/storybooks/react-storybook/pull/325). +- Hide HMR info logs [#331](https://github.com/storybooks/react-storybook/pull/331). ### v1.39.0 -* Update @kadira/storybook-ui to get features from [v2.5.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v250) and [v2.6.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v260). +- Update @kadira/storybook-ui to get features from [v2.5.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v250) and [v2.6.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v260). ### v1.38.3 -* Add names for action and linkTo functions [#321](https://github.com/storybooks/react-storybook/pull/321). +- Add names for action and linkTo functions [#321](https://github.com/storybooks/react-storybook/pull/321). ### v1.38.2 -* Fix error in prepublish script [#319](https://github.com/storybooks/react-storybook/pull/319). +- Fix error in prepublish script [#319](https://github.com/storybooks/react-storybook/pull/319). ### v1.38.1 -* Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybooks/react-storybook/pull/308). +- Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybooks/react-storybook/pull/308). ### v1.38.0 -* v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybooks/react-storybook/issues/306) and [#305](https://github.com/storybooks/react-storybook/pull/305). +- v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybooks/react-storybook/issues/306) and [#305](https://github.com/storybooks/react-storybook/pull/305). ### v1.37.0 -* Update @kadira/storybook-ui to 2.4.0 +- Update @kadira/storybook-ui to 2.4.0 ### v1.36.0 -* Support watchOptions configuration. See: [PR287](https://github.com/storybooks/react-storybook/pull/287) +- Support watchOptions configuration. See: [PR287](https://github.com/storybooks/react-storybook/pull/287) ### v1.35.2 -* Add missing font-face to the ErrorDisplay's heading. +- Add missing font-face to the ErrorDisplay's heading. ### v1.35.1 -* Fix issue related to bad error handling. See issue [#275](https://github.com/storybooks/react-storybook/issues/275): +- Fix issue related to bad error handling. See issue [#275](https://github.com/storybooks/react-storybook/issues/275): ### v1.35.0 -* Add fuzzy search powered search box and Redux DevTools support via [@kadira/storybook-ui@2.3.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v230). +- Add fuzzy search powered search box and Redux DevTools support via [@kadira/storybook-ui@2.3.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v230). ### v1.34.1 -* Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybooks/react-storybook/pull/272) +- Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybooks/react-storybook/pull/272) ### v1.34.0 -* Use storybook-ui v2.2.0 which puts shortcut state into the URL. +- Use storybook-ui v2.2.0 which puts shortcut state into the URL. ### v1.33.0 -* Introduce an [extension API](https://github.com/storybooks/react-storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybooks/react-storybook/pull/258) +- Introduce an [extension API](https://github.com/storybooks/react-storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybooks/react-storybook/pull/258) ### v1.32.1 -* Extend @kadira/storybook-ui provider from it's base Provider. +- Extend @kadira/storybook-ui provider from it's base Provider. ### v1.32.0 -* Use @kadira/storybook-ui as the manager UI with the implemented provider for React. See `client/manager` for more info. +- Use @kadira/storybook-ui as the manager UI with the implemented provider for React. See `client/manager` for more info. ### v1.31.0 -* Pass a `context` argument to stories [PR250](https://github.com/storybooks/react-storybook/pull/250) +- Pass a `context` argument to stories [PR250](https://github.com/storybooks/react-storybook/pull/250) ### v1.30.0 -* Fuzzy search kinds [PR247](https://github.com/storybooks/react-storybook/pull/247) +- Fuzzy search kinds [PR247](https://github.com/storybooks/react-storybook/pull/247) ### v1.29.5 -* Update dependency version to fix filter crash [PR246](https://github.com/storybooks/react-storybook/pull/246) +- Update dependency version to fix filter crash [PR246](https://github.com/storybooks/react-storybook/pull/246) ### v1.29.4 -* Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybooks/react-storybook/pull/243) +- Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybooks/react-storybook/pull/243) ### v1.29.3 -* Update @kadira/storybook-core version [PR241](https://github.com/storybooks/react-storybook/pull/241) -* Add es6-shim by default [PR238](https://github.com/storybooks/react-storybook/pull/238) +- Update @kadira/storybook-core version [PR241](https://github.com/storybooks/react-storybook/pull/241) +- Add es6-shim by default [PR238](https://github.com/storybooks/react-storybook/pull/238) ### v1.29.2 -* Use url.resolve instead of path.join [PR240](https://github.com/storybooks/react-storybook/pull/240) +- Use url.resolve instead of path.join [PR240](https://github.com/storybooks/react-storybook/pull/240) ### v1.29.1 -* Copy missed manager.js.map file on static build [PR236](https://github.com/storybooks/react-storybook/pull/236) +- Copy missed manager.js.map file on static build [PR236](https://github.com/storybooks/react-storybook/pull/236) ### v1.29.0 -* Multiple static dirs (comma separated) [PR229](https://github.com/storybooks/react-storybook/pull/229) +- Multiple static dirs (comma separated) [PR229](https://github.com/storybooks/react-storybook/pull/229) ### v1.28.5 -* Support ECMAScript stage-0 [PR228](https://github.com/storybooks/react-storybook/pull/228) to fix [Issue #227](https://github.com/storybooks/react-storybook/issues/227) +- Support ECMAScript stage-0 [PR228](https://github.com/storybooks/react-storybook/pull/228) to fix [Issue #227](https://github.com/storybooks/react-storybook/issues/227) ### v1.28.4 -* Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybooks/react-storybook/pull/226) +- Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybooks/react-storybook/pull/226) ### v1.28.3 -* Revert [PR226](https://github.com/storybooks/react-storybook/pull/226) +- Revert [PR226](https://github.com/storybooks/react-storybook/pull/226) ### v1.28.2 -* Support custom webpack publicPath [PR226](https://github.com/storybooks/react-storybook/pull/226) +- Support custom webpack publicPath [PR226](https://github.com/storybooks/react-storybook/pull/226) ### v1.28.1 -* Add charset meta tags to HTML heads [PR216](https://github.com/storybooks/react-storybook/pull/216) +- Add charset meta tags to HTML heads [PR216](https://github.com/storybooks/react-storybook/pull/216) ### v1.28.0 -* Moved storybook serving code into a middleware to support more advanced use cases. -* Refactored dev server to use storybook middleware [PR211](https://github.com/storybooks/react-storybook/pull/211) +- Moved storybook serving code into a middleware to support more advanced use cases. +- Refactored dev server to use storybook middleware [PR211](https://github.com/storybooks/react-storybook/pull/211) ### v1.27.0 -* Move modules to storybook-core repo. [PR196](https://github.com/storybooks/react-storybook/pull/196) -* Add stack-source-map again only for Chrome to get better error stacks. -* Add ability to control the hostname. See [PR195](https://github.com/storybooks/react-storybook/pull/195) and [PR198](https://github.com/storybooks/react-storybook/pull/198) +- Move modules to storybook-core repo. [PR196](https://github.com/storybooks/react-storybook/pull/196) +- Add stack-source-map again only for Chrome to get better error stacks. +- Add ability to control the hostname. See [PR195](https://github.com/storybooks/react-storybook/pull/195) and [PR198](https://github.com/storybooks/react-storybook/pull/198) ### v1.26.0 + 12-May-2016 -* Ensure asset directory exists in the static-builder. +- Ensure asset directory exists in the static-builder. ### v1.25.0 + 11-May-2016 -* Fix several publishing related issues. See: [#188](https://github.com/storybooks/react-storybook/pull/188). -* Fix babel extends issue. See: [PR185](https://github.com/storybooks/react-storybook/pull/185). -* Fix issue with removing a preset from users babelrc. - * Fixes: [#183](https://github.com/storybooks/react-storybook/issues/183). - * [PR184](https://github.com/storybooks/react-storybook/pull/184) -* Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybooks/react-storybook/pull/182). -* Add `qs` as a direct dependency as it's used in preview. +- Fix several publishing related issues. See: [#188](https://github.com/storybooks/react-storybook/pull/188). +- Fix babel extends issue. See: [PR185](https://github.com/storybooks/react-storybook/pull/185). +- Fix issue with removing a preset from users babelrc. + - Fixes: [#183](https://github.com/storybooks/react-storybook/issues/183). + - [PR184](https://github.com/storybooks/react-storybook/pull/184) +- Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybooks/react-storybook/pull/182). +- Add `qs` as a direct dependency as it's used in preview. ### v1.24.0 + 10-May-2016 -* Add a potential fix for the double scrollbar issue. See: [179](https://github.com/storybooks/react-storybook/issues/179). -* Add scrolling support to the left panel. Fixes [#177](https://github.com/storybooks/react-storybook/issues/177). -* Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybooks/react-storybook/issues/158) +- Add a potential fix for the double scrollbar issue. See: [179](https://github.com/storybooks/react-storybook/issues/179). +- Add scrolling support to the left panel. Fixes [#177](https://github.com/storybooks/react-storybook/issues/177). +- Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybooks/react-storybook/issues/158) ### v1.23.0 + 09-May-2016 -* Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybooks/react-storybook/pull/176) -* Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybooks/react-storybook/pull/173) +- Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybooks/react-storybook/pull/176) +- Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybooks/react-storybook/pull/173) ### v1.22.1 + 06-May-2016 -* Add a potential fix for [#167](https://github.com/storybooks/react-storybook/issues/167) - * basically, this moved back babel-packages required by webpack. +- Add a potential fix for [#167](https://github.com/storybooks/react-storybook/issues/167) + - basically, this moved back babel-packages required by webpack. ### v1.22.0 + 06-May-2016 -* Improve the static builder time. +- Improve the static builder time. ### v1.21.0 + 06-May-2016 -* Add configType argument to custom config function. See: [PR169](https://github.com/storybooks/react-storybook/pull/169) -* Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybooks/react-storybook/pull/170) +- Add configType argument to custom config function. See: [PR169](https://github.com/storybooks/react-storybook/pull/169) +- Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybooks/react-storybook/pull/170) ### v1.20.0 + 05-May-2016 -* Allow to configure webpack as the user wants. See [PR160](https://github.com/storybooks/react-storybook/pull/160) -* Add typescript typings support for the core API. See [PR157](https://github.com/storybooks/react-storybook/pull/157) -* Implement Mantra architecture and some new features including permalinks, full screen support. See: [PR165](https://github.com/storybooks/react-storybook/pull/165) -* Remove some typo in docs. See: [PR154](https://github.com/storybooks/react-storybook/pull/154) -* Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybooks/react-storybook/pull/153) +- Allow to configure webpack as the user wants. See [PR160](https://github.com/storybooks/react-storybook/pull/160) +- Add typescript typings support for the core API. See [PR157](https://github.com/storybooks/react-storybook/pull/157) +- Implement Mantra architecture and some new features including permalinks, full screen support. See: [PR165](https://github.com/storybooks/react-storybook/pull/165) +- Remove some typo in docs. See: [PR154](https://github.com/storybooks/react-storybook/pull/154) +- Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybooks/react-storybook/pull/153) ### v1.19.0 + 27-April-2016 -* Add airbnb-js-shims to client-side JS. See: [PR147](https://github.com/storybooks/react-storybook/pull/147) -* Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybooks/react-storybook/pull/148) -* Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybooks/react-storybook/pull/149) +- Add airbnb-js-shims to client-side JS. See: [PR147](https://github.com/storybooks/react-storybook/pull/147) +- Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybooks/react-storybook/pull/148) +- Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybooks/react-storybook/pull/149) ### v1.18.0 + 26-April-2016 -* Link Storybook menu to the repo. See: [PR137](https://github.com/storybooks/react-storybook/pull/137) -* Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybooks/react-storybook/pull/141) +- Link Storybook menu to the repo. See: [PR137](https://github.com/storybooks/react-storybook/pull/137) +- Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybooks/react-storybook/pull/141) ### v1.17.2 + 25-April-2016 -* Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybooks/react-storybook/pull/144) +- Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybooks/react-storybook/pull/144) ### v1.17.1 + 21-April-2016 -* Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybooks/react-storybook/pull/133) +- Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybooks/react-storybook/pull/133) ### v1.17.0 + 21-April-2016 -* Check all the arguments passed to action for events. See: [PR132](https://github.com/storybooks/react-storybook/pull/132) +- Check all the arguments passed to action for events. See: [PR132](https://github.com/storybooks/react-storybook/pull/132) ### v1.16.1 + 21-April-2016 -* Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybooks/react-storybook/pull/126). +- Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybooks/react-storybook/pull/126). ### v1.16.0 + 20-April-2016 -* Prevent re-rendering the preview iframe when there is an action. - * Related issue: [#116](https://github.com/storybooks/react-storybook/issues/116) - * Related PR: [PR126](https://github.com/storybooks/react-storybook/pull/126) +- Prevent re-rendering the preview iframe when there is an action. + - Related issue: [#116](https://github.com/storybooks/react-storybook/issues/116) + - Related PR: [PR126](https://github.com/storybooks/react-storybook/pull/126) ### v1.15.0 + 20-April-2016 -* Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybooks/react-storybook/pull/123) +- Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybooks/react-storybook/pull/123) ### v1.14.0 + 19-April-2016 -* Add syntax highlights to the logger. See: [PR118](https://github.com/storybooks/react-storybook/pull/118) +- Add syntax highlights to the logger. See: [PR118](https://github.com/storybooks/react-storybook/pull/118) ### v1.13.0 -* Add some UI test cases. See [PR103](https://github.com/storybooks/react-storybook/pull/103) -* Implement `.addDecorator()` API. See [PR115](https://github.com/storybooks/react-storybook/pull/115) -* Add code folding support. See [PR111](https://github.com/storybooks/react-storybook/pull/111) +- Add some UI test cases. See [PR103](https://github.com/storybooks/react-storybook/pull/103) +- Implement `.addDecorator()` API. See [PR115](https://github.com/storybooks/react-storybook/pull/115) +- Add code folding support. See [PR111](https://github.com/storybooks/react-storybook/pull/111) ### v1.12.0 + 14-April-2016 -* Add support for webpack module preLoaders. See: [PR107](https://github.com/storybooks/react-storybook/pull/107) +- Add support for webpack module preLoaders. See: [PR107](https://github.com/storybooks/react-storybook/pull/107) ### v1.11.0 + 13-April-2016 -* Add support for React DevTools. See: [PR104](https://github.com/storybooks/react-storybook/pull/104) +- Add support for React DevTools. See: [PR104](https://github.com/storybooks/react-storybook/pull/104) ### v1.10.2 + 12-April-2016 Fix various issues related to static bundling. -* Add custom head generation to static build as well. -* Use relative urls so, static sites can be host with paths (GH Pages) -* Identify SyntheticEvent using feature detection. UglifyJS mangal class names, so we can't use classnames to detect a SyntheticEvent in the static build. +- Add custom head generation to static build as well. +- Use relative urls so, static sites can be host with paths (GH Pages) +- Identify SyntheticEvent using feature detection. UglifyJS mangal class names, so we can't use classnames to detect a SyntheticEvent in the static build. ### v1.10.1 -* Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybooks/react-storybook/pull/100) -* Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybooks/react-storybook/pull/98) -* Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybooks/react-storybook/pull/101) +- Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybooks/react-storybook/pull/100) +- Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybooks/react-storybook/pull/98) +- Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybooks/react-storybook/pull/101) ### v1.10.0 -* Add custom head support inside the iframe. See [PR77](https://github.com/storybooks/react-storybook/pull/77) -* Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybooks/react-storybook/issues/81) -* Add a static file builder. See [PR88](https://github.com/storybooks/react-storybook/pull/88) -* Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybooks/react-storybook/pull/94) -* Add the search box. See: [PR91](https://github.com/storybooks/react-storybook/pull/91). +- Add custom head support inside the iframe. See [PR77](https://github.com/storybooks/react-storybook/pull/77) +- Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybooks/react-storybook/issues/81) +- Add a static file builder. See [PR88](https://github.com/storybooks/react-storybook/pull/88) +- Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybooks/react-storybook/pull/94) +- Add the search box. See: [PR91](https://github.com/storybooks/react-storybook/pull/91). ### v1.9.0 Add some minor improvements. -* Avoid deprecated warning in Chrome Canary. See: [PR85](https://github.com/storybooks/react-storybook/pull/85) -* Fix the React Warning about CSS property. See: [PR84](https://github.com/storybooks/react-storybook/pull/84) -* Transition on latest logged action. See: [PR80](https://github.com/storybooks/react-storybook/pull/80) +- Avoid deprecated warning in Chrome Canary. See: [PR85](https://github.com/storybooks/react-storybook/pull/85) +- Fix the React Warning about CSS property. See: [PR84](https://github.com/storybooks/react-storybook/pull/84) +- Transition on latest logged action. See: [PR80](https://github.com/storybooks/react-storybook/pull/80) ### v1.8.0 -* Add story linking functionality. - * [Documentation](https://github.com/storybooks/react-storybook/blob/master/docs/api.md#linking-stories). - * Original feature request: [#50](https://github.com/storybooks/react-storybook/issues/50) - * Implementation: [PR86](https://github.com/storybooks/react-storybook/pull/86) +- Add story linking functionality. + - [Documentation](https://github.com/storybooks/react-storybook/blob/master/docs/api.md#linking-stories). + - Original feature request: [#50](https://github.com/storybooks/react-storybook/issues/50) + - Implementation: [PR86](https://github.com/storybooks/react-storybook/pull/86) ### v1.7.0 -* Add support to React v15.0.0. +- Add support to React v15.0.0. ### v1.6.0 -* Make scrollable layout. See: [PR](https://github.com/storybooks/react-storybook/pull/70) -* Add npm3 requirement to the `package.json`. -* Add `react` and `react-dom` to devDependencies. +- Make scrollable layout. See: [PR](https://github.com/storybooks/react-storybook/pull/70) +- Add npm3 requirement to the `package.json`. +- Add `react` and `react-dom` to devDependencies. ### v1.5.0 -* Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybooks/react-storybook/pull/64) +- Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybooks/react-storybook/pull/64) ### v1.4.0 -* Add CLI option to specify the config dir. See [PR52](https://github.com/storybooks/react-storybook/pull/52). +- Add CLI option to specify the config dir. See [PR52](https://github.com/storybooks/react-storybook/pull/52). ### v1.3.0 -* Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybooks/react-storybook/issues/41) -* Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybooks/react-storybook/blob/master/CONTRIBUTING.md) -* Add a development utility `npm run dev` which watches "src" directory and run `npm run prepublish`. +- Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybooks/react-storybook/issues/41) +- Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybooks/react-storybook/blob/master/CONTRIBUTING.md) +- Add a development utility `npm run dev` which watches "src" directory and run `npm run prepublish`. ### v1.2.0 -* Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybooks/react-storybook/issues/21). -* Remove navigation list order hijacking. See [commit](https://github.com/storybooks/react-storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99). -* Fix a typo in .gitignore. See [PR31](https://github.com/storybooks/react-storybook/pull/31). -* Add support for JSX. See [PR18](https://github.com/storybooks/react-storybook/pull/18). +- Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybooks/react-storybook/issues/21). +- Remove navigation list order hijacking. See [commit](https://github.com/storybooks/react-storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99). +- Fix a typo in .gitignore. See [PR31](https://github.com/storybooks/react-storybook/pull/31). +- Add support for JSX. See [PR18](https://github.com/storybooks/react-storybook/pull/18). ### v1.1.0 -* v1.0.0 was a mistake and it contains very old code. That's why we had to do a 1.1.0 release. +- v1.0.0 was a mistake and it contains very old code. That's why we had to do a 1.1.0 release. ### v1.0.0 -* Yeah! +- Yeah! diff --git a/app/react/README.md b/app/react/README.md index b081508c441c..e7de9fb29279 100644 --- a/app/react/README.md +++ b/app/react/README.md @@ -1,4 +1,5 @@ # Storybook for React + [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -16,7 +17,7 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started -```js +```sh npm i -g @storybook/cli cd my-react-app getstorybook @@ -24,18 +25,18 @@ getstorybook For more information visit: [storybooks.js.org](https://storybooks.js.org) ---- +* * * Storybook also comes with a lot of [addons](https://storybooks.js.org/docs/react-storybook/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybooks.js.org/docs/react-storybook/basics/exporting-storybook) of your storybook and deploy it anywhere you want. Here are some featured storybooks that you can reference to see how Storybook works: -* [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates) -* [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web) +- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates) +- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web) ## Docs -* [Basics](https://storybooks.js.org/docs/react-storybook/basics/introduction) -* [Configurations](https://storybooks.js.org/docs/react-storybook/configurations/default-config) -* [Addons](https://storybooks.js.org/docs/react-storybook/addons/introduction) +- [Basics](https://storybooks.js.org/docs/react-storybook/basics/introduction) +- [Configurations](https://storybooks.js.org/docs/react-storybook/configurations/default-config) +- [Addons](https://storybooks.js.org/docs/react-storybook/addons/introduction) diff --git a/app/react/ROADMAP.md b/app/react/ROADMAP.md index 6b9ce8fec1bc..dc282e22bfe6 100644 --- a/app/react/ROADMAP.md +++ b/app/react/ROADMAP.md @@ -2,13 +2,13 @@ ### Short Term -* Addon API and addons -* A clear guide to hack Storybook -* React Native Support +- Addon API and addons +- A clear guide to hack Storybook +- React Native Support ### Long Term -* Automatic story generation (and edge case detection) based on propTypes. -* Angular Support -* Vue Support -* UI addons (Add different panels like Action Logger) +- Automatic story generation (and edge case detection) based on propTypes. +- Angular Support +- Vue Support +- UI addons (Add different panels like Action Logger) diff --git a/app/react/src/client/index.js b/app/react/src/client/index.js index b35052c45fd3..071cb26044cf 100644 --- a/app/react/src/client/index.js +++ b/app/react/src/client/index.js @@ -13,10 +13,10 @@ import { linkTo as deprecatedLinkTo } from '@storybook/addon-links'; export const action = deprecate( deprecatedAction, - '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/packages/addon-actions' + '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/actions' ); export const linkTo = deprecate( deprecatedLinkTo, - '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/packages/addon-links' + '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/links' ); diff --git a/docs/.gatsby-context.js b/docs/.gatsby-context.js new file mode 100644 index 000000000000..9922bb09fa9c --- /dev/null +++ b/docs/.gatsby-context.js @@ -0,0 +1,15 @@ +'use strict'; + +/* weak */ +// This file is auto-written and used by Gatsby to require +// files from your pages directory. +module.exports = function (callback) { + var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line + if (module.hot) { + module.hot.accept(context.id, function () { + context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line + return callback(context); + }); + } + return callback(context); +}; \ No newline at end of file diff --git a/docs/.storybook/addons.js b/docs/.storybook/addons.js new file mode 100644 index 000000000000..6aed412d04af --- /dev/null +++ b/docs/.storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/docs/.storybook/config.js b/docs/.storybook/config.js new file mode 100644 index 000000000000..84074b87082c --- /dev/null +++ b/docs/.storybook/config.js @@ -0,0 +1,10 @@ +import { configure } from '@storybook/react'; + +import 'bootstrap/dist/css/bootstrap.css'; +import '../css/main.css'; + +function loadStories() { + require('../stories'); +} + +configure(loadStories, module); diff --git a/docs/.storybook/webpack.config.js b/docs/.storybook/webpack.config.js new file mode 100644 index 000000000000..339f3962fe3f --- /dev/null +++ b/docs/.storybook/webpack.config.js @@ -0,0 +1,23 @@ +const path = require('path'); + +module.exports = { + module: { + loaders: [ + { + test: /\.css$/, + loader: 'style!css', + include: path.resolve(__dirname, '../'), + }, + { + test: /\.yml$/, + loader: 'json!yaml', + include: path.resolve(__dirname, '../'), + }, + { + test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/, + loader: 'file', + include: path.resolve(__dirname, '../'), + }, + ], + }, +}; diff --git a/docs/.travis.yml b/docs/.travis.yml new file mode 100644 index 000000000000..0cb614315fbc --- /dev/null +++ b/docs/.travis.yml @@ -0,0 +1,21 @@ +language: node_js +branches: + except: + - master +cache: + directories: + - node_modules + - ".cache" +notifications: + email: false +node_js: +- node +before_install: "./scripts/travis/before_install.sh" +after_success: "./scripts/travis/after_success.sh" +script: +- npm run lint +git: + depth: 1 +env: + global: + - secure: yNNjO4HvIcBH2r+EpWr29TQZzUJoQCC7MlxDtWW5XCsiL7lwnAxRk9DJ1edjYyd2lt4UWVyiQYD7708YMq7sR9TQWN195kcVnd1k5JzNBvePK9VjrmX2e2gRsbSQmWYQXFuUvbEbBmZUPhWbgaTzDzSdzsoFpTqJg3Q328S2GleixtPLBly5SC59Zar9tGw7OyVmPRN9GdKbVQfPQcmHDY+fHKzAqBaenlL/dC6UR9N+w5oWr3KFH/smrVzbDEonoKaZqvj02LnHVctGL6XCopoNbm7ldf/A6qKS/9D/MrLiLP3O3umCPhnGH8L8bNw7I6pdIKbroISUd+v5FqoCLN1iLO5wDY73gKUdwYUAt37KEhFUJPDwr/YYxRP0fZHIF0lI44w0RgN7N27ISwu9dw6Zq6a28+UcBRyemsvfXodBO9jiAW8R0pQhqWZ9yc2vZfFVfRh5SbHBLqIc0uHcqAtnkx8XU72bDDbqmA0dCA+LwAPX3doaaP37C5BzO+khGODpG+4R0nSsuTdPB6+jbBuS84V9YUAAl95hhMlYA9hvI3GdDjPkahuaYdUrYmqSh3v2XIhEA+D6BjXaGLYwcFpZzLB8pzZbRZVR4RdmuGF1J+ozxZNiKPPqcmK7XFlGWJ2b2+fFw3ZuHU6grDdCe1zpLYzrx1Om6QBUir83oGM= diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000000..d5aae97cf4a1 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,15 @@ +# Website for [storybook.js.org](https://storybook.js.org) + +This is the source for [storybook.js.org](https://storybook.js.org). It documents [Storybook](https://github.com/storybooks/storybook), an amazing UI component development environment for React and React Native. The site is built with [Gatsby](https://github.com/gatsbyjs/gatsby). + +### Usage + +```sh +npm i +npm run develop +npm run storybook +``` + +### Edit Documentation + +Documentation is written in Markdown and located inside the [`pages/`](pages/) directory. diff --git a/docs/components/Breakpoint.js b/docs/components/Breakpoint.js new file mode 100644 index 000000000000..407313eaa07e --- /dev/null +++ b/docs/components/Breakpoint.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import './breakpoints.css'; + +class Breakpoint extends Component { + render() { + const { mobile, children } = this.props; + + if (mobile) { + return ( +
+ {children} +
+ ); + } + + return ( +
+ {children} +
+ ); + } +} + +Breakpoint.propTypes = { + children: PropTypes.array, + mobile: PropTypes.bool, +}; + +export default Breakpoint; diff --git a/docs/components/Docs/Container/index.js b/docs/components/Docs/Container/index.js new file mode 100644 index 000000000000..80640656e918 --- /dev/null +++ b/docs/components/Docs/Container/index.js @@ -0,0 +1,62 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Nav from '../Nav'; +import NavDropdown from '../Nav/dropdown'; +import Content from '../Content'; +import './style.css'; + +class Container extends React.Component { + render() { + const { sections, selectedItem, selectedSectionId, selectedItemId } = this.props; + + const gitHubRepoUrl = 'https://github.com/storybooks/storybook'; + const docPath = `${selectedSectionId}/${selectedItemId}`; + const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/master/docs/pages/${docPath}/index.md`; + + return ( +
+
+
+
+
+ +
+ + + +
+ +
+
+
+ ); + } +} + +Container.propTypes = { + sections: PropTypes.array, + selectedItem: PropTypes.object, + selectedSectionId: PropTypes.string, + selectedItemId: PropTypes.string, +}; + +export default Container; diff --git a/docs/components/Docs/Container/style.css b/docs/components/Docs/Container/style.css new file mode 100644 index 000000000000..23604750df99 --- /dev/null +++ b/docs/components/Docs/Container/style.css @@ -0,0 +1,59 @@ +#docs-container { + border-top: 1px solid #F4F4F4; + border-bottom: 1px solid #F4F4F4; + margin: 10px 0; + padding: 0; +} + +#docs-container ul.top-nav { + margin: 20px 0 0; + padding: 0; + list-style: none; + font-size: 13px; +} + +#docs-container ul.top-nav li { + display: inline-block; + background-color: #eee; + margin-right: 10px; + padding: 6px 20px; + cursor: pointer; + border-bottom: 1px solid #ccc; +} + +#docs-container ul.top-nav li.selected { + background-color: #eb5d88; + color: #FFF; +} + +#docs-container ul.top-nav li a { + font-size: 13px; +} + +#docs-container .nav-dropdown { + display: none; +} + +#docs-container .nav-dropdown select { + width: 100%; +} + +#docs-container .nav-dropdown div { + margin: 0 0 5px; +} + +@media only screen and (max-width: 998px) { + #docs-container .nav { + display: none; + } + + #docs-container .content { + border-left: none; + margin: 15px 0; + padding: 0; + } + + #docs-container .nav-dropdown { + display: block; + } +} diff --git a/docs/components/Docs/Content/index.js b/docs/components/Docs/Content/index.js new file mode 100644 index 000000000000..05641ef73409 --- /dev/null +++ b/docs/components/Docs/Content/index.js @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Highlight from '../../Highlight'; +import 'highlight.js/styles/github-gist.css'; +import './style.css'; + +const DocsContent = ({ title, content, editUrl }) => ( +
+
+

{title}

+

Edit this page

+ +
+ + {content} + +
+
+
+); + +DocsContent.propTypes = { + title: PropTypes.string, + content: PropTypes.string.isRequired, + editUrl: PropTypes.string, +}; + +export default DocsContent; diff --git a/docs/components/Docs/Content/style.css b/docs/components/Docs/Content/style.css new file mode 100644 index 000000000000..bf0abb15ba31 --- /dev/null +++ b/docs/components/Docs/Content/style.css @@ -0,0 +1,110 @@ +#docs-content .content { + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + font-size: 17px; + line-height: 25px; + margin: 40px 0; + max-width: 700px; + -webkit-font-smoothing: antialiased; +} + +#docs-content .title { + font-size: 25px; + color: rgb(0, 0, 0); + margin-bottom: 0; + line-height: 28px; + font-weight: 800; +} + +#docs-content a.edit-link { + color: #E25E5E !important; + font-size: 11px; + text-transform: uppercase; + font-weight: bold; +} + +#docs-content .markdown div, +#docs-content .markdown p, +#docs-content .markdown li, +#docs-content .markdown a { + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + font-size: 16px; + line-height: 26px; + color: #333; +} + +#docs-content .markdown img { + max-width: 100%; +} + +#docs-content .markdown h2 { + font-size: 20px; + margin: 30px 0 10px 0; +} + +#docs-content .markdown h3 { + font-size: 18px; + margin: 30px 0 10px 0; + font-weight: 800; +} + +#docs-content .markdown a, +#docs-content .markdown a:visited, +#docs-content .markdown a:hover, +#docs-content .markdown a:active { + text-decoration: none; + color: #1E88E5; +} + +#docs-content .markdown a:hover { + text-decoration: underline; +} + +#docs-content .markdown blockquote { + padding: 10px 20px; + margin: 10px 0; + font-size: 16px; + border-left: 5px solid #B2CDA9; + color: #444; +} + +#docs-content .markdown blockquote p { + margin: 0px; +} + +#docs-content .markdown code { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + padding: 2px 5px; + margin: 0; + font-size: 85%; + background-color: rgba(0,0,0,0.04); + border-radius: 2px; + color: #333; +} + +#docs-content .markdown pre { + border: 0; + border-radius: 0; + padding: 0; +} + +#docs-content .markdown pre code { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 14px; + line-height: 20px; + background-color: #f7f7f7; + padding: 10px 12px; +} + +#docs-content .markdown .header-anchor { + display: none; + line-height: 1px; +} + +#docs-content .markdown h1:hover .header-anchor, +#docs-content .markdown h2:hover .header-anchor, +#docs-content .markdown h3:hover .header-anchor, +#docs-content .markdown h4:hover .header-anchor, +#docs-content .markdown h5:hover .header-anchor, +#docs-content .markdown h6:hover .header-anchor { + display: inline; +} diff --git a/docs/components/Docs/Nav/dropdown.js b/docs/components/Docs/Nav/dropdown.js new file mode 100644 index 000000000000..52448b550ecb --- /dev/null +++ b/docs/components/Docs/Nav/dropdown.js @@ -0,0 +1,66 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { browserHistory } from 'react-router'; +import './style.css'; + +class Nav extends React.Component { + renderHeadingOpts(section) { + return ; + } + + renderNavOpts(nav) { + return ; + } + + changeRoute(selectedSectionId, selectedItemId) { + const url = `/${selectedSectionId}/${selectedItemId}/`; + browserHistory.push(url); + } + + handleHeadingChange(evt) { + const { sections } = this.props; + const selectedSectionId = evt.target.value; + const section = sections.find(section => section.id === selectedSectionId); + const itemId = section.items[0].id; + this.changeRoute(selectedSectionId, itemId); + } + + handleNavChange(evt) { + const { sections, selectedSection } = this.props; + const selectedSectionId = selectedSection || sections[0].id; + this.changeRoute(selectedSectionId, evt.target.value); + } + + render() { + const { sections, selectedSection, selectedItem } = this.props; + const selectedSectionId = selectedSection || sections[0].id; + const selectedItemId = selectedItem || sections[0].items[0].id; + + const selectedSectionData = sections.find(section => section.id === selectedSectionId); + const navs = selectedSectionData.items; + + return ( +
+
+ +
+ +
+ +
+
+ ); + } +} + +Nav.propTypes = { + sections: PropTypes.array, + selectedSection: PropTypes.string, + selectedItem: PropTypes.string, +}; + +export default Nav; diff --git a/docs/components/Docs/Nav/index.js b/docs/components/Docs/Nav/index.js new file mode 100644 index 000000000000..09378f313cd9 --- /dev/null +++ b/docs/components/Docs/Nav/index.js @@ -0,0 +1,50 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { Link } from 'react-router'; +import './style.css'; + +class Nav extends React.Component { + renderNavItem(section, item) { + const { selectedSectionId, selectedItemId } = this.props; + const cssClass = section.id === selectedSectionId && item.id === selectedItemId + ? 'selected' + : ''; + + const url = `/${section.id}/${item.id}/`; + + return ( +
  • + {item.title} +
    • + ); + } + + renderNavSections(section) { + return ( +
    +

    {section.heading}

    +
      + {section.items.map(this.renderNavItem.bind(this, section))} +
    +
    + ); + } + + render() { + const { sections } = this.props; + + return ( + + ); + } +} + +Nav.propTypes = { + sections: PropTypes.array, + selectedItem: PropTypes.string, + prefix: PropTypes.string, +}; + +export default Nav; diff --git a/docs/components/Docs/Nav/style.css b/docs/components/Docs/Nav/style.css new file mode 100644 index 000000000000..4c18f28c12cc --- /dev/null +++ b/docs/components/Docs/Nav/style.css @@ -0,0 +1,43 @@ +#nav { + color: #444; + margin: 40px 0; + padding: 0 15px 0 0; + border-right: 1px solid #ececec; + -webkit-font-smoothing: antialiased; +} + +#nav .col-xs-12 { + margin: 0; + padding: 0; +} + +#nav h3 { + font-family: "Open Sans"; + font-size: 18px; + font-weight: 600; + margin: 10px 0; + padding: 0; + color: #000; +} + +#nav ul { + margin: 0 0 30px 0; + padding: 0; + list-style: none; +} + +#nav ul li { + margin: 8px 0; +} + +#nav ul li a { + font-size: 14px; + line-height: 16px; + padding: 0; + color: #444; +} + +#nav ul li a.selected { + color: #E25E5E; + font-weight: 600; +} diff --git a/docs/components/Docs/Navigation/index.js b/docs/components/Docs/Navigation/index.js new file mode 100644 index 000000000000..39c9221ac09d --- /dev/null +++ b/docs/components/Docs/Navigation/index.js @@ -0,0 +1,59 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import styles from './styles'; +import { Link } from 'react-router'; + +class Navigation extends React.Component { + renderHeading(caption) { + const style = { + ...styles.h3, + }; + + return

    {caption}

    ; + } + + renderItem(section, item) { + const { prefix = '', selectedSection, selectedItem } = this.props; + const href = `${prefix}/${section.id}/${item.id}`; + + let style = styles.item; + if (selectedSection === section.id && selectedItem === item.id) { + style = styles.selectedItem; + } + + return ( + + {item.title} + + ); + } + + render() { + const { sections } = this.props; + return ( +
    + {sections.map(section => ( +
    + {this.renderHeading(section.heading)} +
      + {section.items.map(item => ( +
    • + {this.renderItem(section, item)} +
      • + ))} +
    +
    + ))} +
    + ); + } +} + +Navigation.propTypes = { + sections: PropTypes.array, + selectedSection: PropTypes.string, + selectedItem: PropTypes.string, + prefix: PropTypes.string, +}; + +export default Navigation; diff --git a/docs/components/Docs/Navigation/styles.js b/docs/components/Docs/Navigation/styles.js new file mode 100644 index 000000000000..f1ab365cf157 --- /dev/null +++ b/docs/components/Docs/Navigation/styles.js @@ -0,0 +1,40 @@ +import theme from '../../theme'; + +const styles = { + container: { + ...theme.base, + ...theme.text, + borderRight: '1px solid #ECECEC', + marginRight: 30, + }, + + h3: { + color: '#000', + margin: '25px 0 7px 0', + padding: 0, + fontSize: 20, + }, + + ul: { + margin: 0, + padding: 0, + listStyle: 'none', + }, + + li: { + margin: '8px 0', + lineHeight: '25px', + }, + + item: { + ...theme.text, + textDecoration: 'none', + }, +}; + +styles.selectedItem = { + ...styles.item, + fontWeight: 600, +}; + +export default styles; diff --git a/docs/components/Docs/index.js b/docs/components/Docs/index.js new file mode 100644 index 000000000000..f007b5ccbfee --- /dev/null +++ b/docs/components/Docs/index.js @@ -0,0 +1,38 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Helmet from 'react-helmet'; +import Header from '../Header'; +import Container from './Container'; +import Footer from '../Footer'; +import './style.css'; + +class Docs extends React.Component { + render() { + const { sections, selectedItem, selectedSectionId, selectedItemId } = this.props; + + const headTitle = `${selectedItem.title}`; + + return ( +
    + +
    + +
    +
    + ); + } +} + +Docs.propTypes = { + sections: PropTypes.array, + selectedItem: PropTypes.object, + selectedSectionId: PropTypes.string, + selectedItemId: PropTypes.string, +}; + +export default Docs; diff --git a/docs/components/Docs/style.css b/docs/components/Docs/style.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/docs/components/Footer/images/github-icon.png b/docs/components/Footer/images/github-icon.png new file mode 100644 index 000000000000..200ce791df60 Binary files /dev/null and b/docs/components/Footer/images/github-icon.png differ diff --git a/docs/components/Footer/images/slack-icon.png b/docs/components/Footer/images/slack-icon.png new file mode 100644 index 000000000000..9c1b0bace256 Binary files /dev/null and b/docs/components/Footer/images/slack-icon.png differ diff --git a/docs/components/Footer/index.js b/docs/components/Footer/index.js new file mode 100644 index 000000000000..908cf032bd2e --- /dev/null +++ b/docs/components/Footer/index.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { Link } from 'react-router'; +import slackIcon from './images/slack-icon.png'; +import githubIcon from './images/github-icon.png'; +import './style.css'; + +const Footer = () => ( + +); + +export default Footer; diff --git a/docs/components/Footer/style.css b/docs/components/Footer/style.css new file mode 100644 index 000000000000..c59c28c62b21 --- /dev/null +++ b/docs/components/Footer/style.css @@ -0,0 +1,39 @@ +#footer { + margin: 25px 0 +} + +#footer a { + color: #1E88E5; +} + +#footer .logos { + margin: auto; + clear: both; +} + +#footer .logos img { + margin: 0 10px; + height: 50px; +} + +#footer #copyright p { + text-align: center; + font-size: 14px; + margin: 15px 0 10px; +} + +@media only screen and (max-width: 998px) { + #footer { + margin: 25px 0 + } + + #footer .logos img { + margin: 0 8px; + height: 40px; + } + + #footer #copyright p { + font-size: 13px; + margin: 13px 0 9px; + } +} diff --git a/docs/components/Grid/Examples/index.js b/docs/components/Grid/Examples/index.js new file mode 100644 index 000000000000..b76d2d61923c --- /dev/null +++ b/docs/components/Grid/Examples/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import Grid from '../Grid'; +import './style.css'; + +export default ({ items }) => ( +
    +
    +

    Storybook Examples

    + + Edit this list + +
    + +
    +); diff --git a/docs/components/Grid/Examples/style.css b/docs/components/Grid/Examples/style.css new file mode 100644 index 000000000000..442b859b55aa --- /dev/null +++ b/docs/components/Grid/Examples/style.css @@ -0,0 +1,10 @@ +.examples .heading { + margin: 40px 80px 0 80px; +} + +.examples a.edit-link { + color: #E25E5E !important; + font-size: 11px; + text-transform: uppercase; + font-weight: bold; +} diff --git a/docs/components/Grid/Grid/index.js b/docs/components/Grid/Grid/index.js new file mode 100644 index 000000000000..53b38de02265 --- /dev/null +++ b/docs/components/Grid/Grid/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import StackGrid from 'react-stack-grid'; +import GridItem from '../GridItem'; + +export default ({ items, columnWidth }) => ( + + {items.map((item, idx) => )} + +); diff --git a/docs/components/Grid/GridItem/index.js b/docs/components/Grid/GridItem/index.js new file mode 100644 index 000000000000..479921a27d1a --- /dev/null +++ b/docs/components/Grid/GridItem/index.js @@ -0,0 +1,24 @@ +import React from 'react'; +import './style.css'; + +const linkProps = { + rel: 'nofollow', + target: '_blank', + className: 'link', +}; + +export default ({ title, description, source, demo, site, thumbnail }) => ( +
    +
    +
    +
    +
    +

    {title}

    +

    {description}

    +
    + {demo ? Demo : null} + {source ? Source : null} +
    +
    +
    +); diff --git a/docs/components/Grid/GridItem/style.css b/docs/components/Grid/GridItem/style.css new file mode 100644 index 000000000000..c8fdfc392d09 --- /dev/null +++ b/docs/components/Grid/GridItem/style.css @@ -0,0 +1,69 @@ +div { + box-sizing: border-box; +} + +.grid-item { + margin: 30px; + background: white; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + font-weight: 300; +} + +.grid-item .photobox { + position: relative; + width: 100%; + height: 200px; + background-color: #ddd; + border-radius: 0; + background-size: cover; +} + +.grid-item .overlay { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.03); +} + +.grid-item .button-row { + position: absolute; + width: 100%; + right: 0px; + bottom: 0px; + text-align: right; +} + +.grid-item .link { + display: inline-block; + cursor: pointer; + padding: 5px 15px; + margin: 0 10px 10px 0px; + background-color: rgba(0, 0, 0, 0.4); + border-radius: 20px; + color: white; + transition: all 0.3s linear; + font-size: 12px; +} +.grid-item .link:hover { + background-color: rgba(0, 0, 0, 0.7); +} + +.grid-item .text { + position: relative; + height: 150px; + padding: 20px 15px 10px 20px; +} + +.grid-item h2 { + margin: 0 0 10px 0; + font-size: 21px; + font-weight: 600; +} + +.grid-item .desc { + color: #aaa; + font-size: 12px; + line-height: 1.4; +} diff --git a/docs/components/Header/index.js b/docs/components/Header/index.js new file mode 100644 index 000000000000..b67845483638 --- /dev/null +++ b/docs/components/Header/index.js @@ -0,0 +1,56 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { Link } from 'react-router'; +import './style.css'; + +import storybookLogo from '../../design/homepage/storybook-logo.png'; + +const sections = [ + { id: 'home', caption: 'Home', href: '/' }, + { id: 'docs', caption: 'Docs', href: '/basics/introduction/' }, + { id: 'examples', caption: 'Examples', href: '/examples/' }, +]; + +class Header extends React.Component { + renderSections() { + return sections.map(section => { + const { currentSection } = this.props; + const className = currentSection === section.id ? 'selected' : ''; + + return ( + + {section.caption} + + ); + }); + } + + render() { + const { currentSection } = this.props; + let titleClassname = 'pull-left'; + if (currentSection === 'home') { + titleClassname += ' hide'; + } + + return ( + + ); + } +} + +Header.propTypes = { + currentSection: PropTypes.string, +}; + +export default Header; diff --git a/docs/components/Header/style.css b/docs/components/Header/style.css new file mode 100644 index 000000000000..2c0a06d4a039 --- /dev/null +++ b/docs/components/Header/style.css @@ -0,0 +1,51 @@ +#header { + margin: 50px 0; +} + +#header .col-xs-12 { + padding: 0; +} + +#header-title img { + width: 125px; +} + +#header-links a { + padding-left: 15px; + text-transform: uppercase; +} + +#header-links a.selected { + font-weight: 600; +} + + +@media only screen and (max-width: 540px) { + #header { + margin: 50px 0 20px; + } + + #header .pull-right { + float: none !important; + clear: both !important; + text-align: center; + } + + #header .pull-left { + float: none !important; + clear: both !important; + } + + #header-title { + text-align: center; + margin-bottom: 12px; + } + + #header-title img { + width: 40%; + } + + #header a { + font-size: 11px !important; + } +} diff --git a/docs/components/Highlight.js b/docs/components/Highlight.js new file mode 100644 index 000000000000..70ce9b5b0fb1 --- /dev/null +++ b/docs/components/Highlight.js @@ -0,0 +1,35 @@ +import hljs from 'highlight.js'; +import PropTypes from 'prop-types'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +class Highlight extends React.Component { + componentDidMount() { + this.highlightCode(); + } + + componentDidUpdate() { + this.highlightCode(); + } + + highlightCode() { + const domNode = ReactDOM.findDOMNode(this); + const nodes = domNode.querySelectorAll('pre code'); + if (nodes.length > 0) { + for (let i = 0; i < nodes.length; i++) { + hljs.highlightBlock(nodes[i]); + } + } + } + + render() { + const { children } = this.props; + return
    ; + } +} + +Highlight.propTypes = { + children: PropTypes.string, +}; + +export default Highlight; diff --git a/docs/components/Homepage/Demo/images/demo.gif b/docs/components/Homepage/Demo/images/demo.gif new file mode 100644 index 000000000000..e427df3345d4 Binary files /dev/null and b/docs/components/Homepage/Demo/images/demo.gif differ diff --git a/docs/components/Homepage/Demo/index.js b/docs/components/Homepage/Demo/index.js new file mode 100644 index 000000000000..e0b426a25c48 --- /dev/null +++ b/docs/components/Homepage/Demo/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import demoImg from './images/demo.gif'; +import './style.css'; + +const Demo = () => ( +
    +
    +
    + +
    +
    +
    +); + +export default Demo; diff --git a/docs/components/Homepage/Demo/style.css b/docs/components/Homepage/Demo/style.css new file mode 100644 index 000000000000..481072f2fe28 --- /dev/null +++ b/docs/components/Homepage/Demo/style.css @@ -0,0 +1,11 @@ +.demo-img { + width: 800px; + border: 5px solid #444; +} + +@media only screen and (max-width: 800px) { + .demo-img { + width: 90%; + border: 2px solid #444; + } +} diff --git a/docs/components/Homepage/Featured/images/airbnb.png b/docs/components/Homepage/Featured/images/airbnb.png new file mode 100644 index 000000000000..7485843aea9d Binary files /dev/null and b/docs/components/Homepage/Featured/images/airbnb.png differ diff --git a/docs/components/Homepage/Featured/images/rb.png b/docs/components/Homepage/Featured/images/rb.png new file mode 100644 index 000000000000..5fe90c28a530 Binary files /dev/null and b/docs/components/Homepage/Featured/images/rb.png differ diff --git a/docs/components/Homepage/Featured/images/rnw.png b/docs/components/Homepage/Featured/images/rnw.png new file mode 100644 index 000000000000..38d6a0534101 Binary files /dev/null and b/docs/components/Homepage/Featured/images/rnw.png differ diff --git a/docs/components/Homepage/Featured/index.js b/docs/components/Homepage/Featured/index.js new file mode 100644 index 000000000000..9a5c78434c46 --- /dev/null +++ b/docs/components/Homepage/Featured/index.js @@ -0,0 +1,48 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import './style.css'; + +class Featured extends React.Component { + renderFeaturedItem(ftItem) { + return ( + + ); + } + + render() { + const { featuredStorybooks } = this.props; + return ( + + ); + } +} + +Featured.propTypes = { + featuredStorybooks: PropTypes.array, +}; + +export default Featured; diff --git a/docs/components/Homepage/Featured/style.css b/docs/components/Homepage/Featured/style.css new file mode 100644 index 000000000000..b1043b8480c7 --- /dev/null +++ b/docs/components/Homepage/Featured/style.css @@ -0,0 +1,77 @@ +#featured { + margin: 25px auto 35px; + max-width: 600px; +} + +#featured hr { + margin: 50px auto 0; +} + +#featured h2 { + text-align: center; + text-transform: uppercase; + font-size: 24px; + font-weight: 700; + margin-bottom: 35px; +} + +#featured .reponame { + font-size: 14px; +} + +#featured a.reponame { + color: #6f5151; +} + +.ft-logo { + width: 45px; + height: 45px; +} + +.ft-sbooks { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.ft-sbooks .desc { + padding-left: 0 !important; +} + +.ft-sbooks p { + font-size: 13px; + margin: 0; + padding: 0; +} + +.ft-sbooks a { + font-size: 13px; + color: #8f8fd6; +} + +@media only screen and (max-width: 998px) { + #featured { + margin: 15px auto 25px; + } + + #featured hr { + margin: 20px auto 0; + } + + #featured .col-xs-6 { + width: 100% !important; + } + + .ft-sbooks .desc { + text-align: center; + padding-left: 15px !important; + padding-bottom: 20px; + } + + .ft-sbooks p { + text-align: center; + } + + .ft-sbooks a { + text-align: center; + } +} diff --git a/docs/components/Homepage/Heading/index.js b/docs/components/Homepage/Heading/index.js new file mode 100644 index 000000000000..4d3ac747324f --- /dev/null +++ b/docs/components/Homepage/Heading/index.js @@ -0,0 +1,100 @@ +import React from 'react'; +import './style.css'; + +import storybookLogo from '../../../design/homepage/storybook-logo-new.svg'; + +const Heading = () => ( +
    +
    + Storybook Logo +

    + The UI Development Environment +
    + You'll + {' '} + + {' '} + to use +

    +
    +
    +); + +export default Heading; + +const Logo = () => ( + + Created using Figma + + clip-path="url(#clip-0)" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/docs/components/Homepage/Heading/style.css b/docs/components/Homepage/Heading/style.css new file mode 100644 index 000000000000..6e9214ed9393 --- /dev/null +++ b/docs/components/Homepage/Heading/style.css @@ -0,0 +1,64 @@ +#heading { + text-align: center; + padding: 85px 0 50px; +} + +.sb-title { + font-weight: 800; + width: 500px; +} + +.sb-tagline { + font-weight: 100; + font-size: 29px; + line-height: 42px; +} + +.heart { + color: red; +} + +@media only screen and (max-width: 980px) { + #heading { + padding: 45px 0 25px; + } + + .sb-title { + width: 400px; + } + + .sb-tagline { + font-size: 24px; + line-height: 33px; + } +} + +@media only screen and (max-width: 870px) { + #heading { + padding: 35px 0 15px; + } + + .sb-title { + width: 400px; + } + + .sb-tagline { + font-size: 20px; + line-height: 29px; + } +} + +@media only screen and (max-width: 540px) { + #heading { + padding: 15px 0 15px; + } + + .sb-title { + width: 80%; + } + + .sb-tagline { + ffont-size: 16px; + line-height: 26px; + } +} diff --git a/docs/components/Homepage/MainLinks/images/docs.png b/docs/components/Homepage/MainLinks/images/docs.png new file mode 100644 index 000000000000..75d10aa103b4 Binary files /dev/null and b/docs/components/Homepage/MainLinks/images/docs.png differ diff --git a/docs/components/Homepage/MainLinks/index.js b/docs/components/Homepage/MainLinks/index.js new file mode 100644 index 000000000000..e504c40e6202 --- /dev/null +++ b/docs/components/Homepage/MainLinks/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import { Link } from 'react-router'; +import './style.css'; + +const MainLinks = () => ( + +); + +export default MainLinks; diff --git a/docs/components/Homepage/MainLinks/style.css b/docs/components/Homepage/MainLinks/style.css new file mode 100644 index 000000000000..87cbe9c5f9d9 --- /dev/null +++ b/docs/components/Homepage/MainLinks/style.css @@ -0,0 +1,96 @@ +#main-links { + margin: 40px auto 30px; +} + +#main-links hr { + margin: 50px auto 0; +} + +.main-links-container { + max-width: 600px; + margin: auto; +} + +#main-links h2 { + text-transform: uppercase; + text-align: center; + font-size: 25px; + font-weight: 600; +} + +#main-links pre { + background-color: #444; + color: #DDD; + padding: 15px 30px; + line-height: 22px; + border: 0; + border-radius: 0; +} + +.docs-img { + background: url('./images/docs.png'); + background-repeat: no-repeat; + width: 40px; + height: 54px; + margin-top: 25px; +} + +@media only screen and (max-width: 700px) { + #main-links .col-xs-6 { + margin: auto !important; + float: none !important; + clear: both; + width: 55% !important; + } + + #main-links { + margin: 30px auto 20px; + } + + #main-links h2 { + font-size: 22px; + } + + #main-links pre { + padding: 13px 28px; + font-size: 12px; + } +} + +@media only screen and (max-width: 600px) { + #main-links .col-xs-6 { + width: 65% !important; + } + + #main-links { + margin: 24px auto 16px; + } + + #main-links hr { + margin: 35px auto 0; + } + + #main-links h2 { + font-size: 20px; + } + + #main-links pre { + padding: 13px 20px; + font-size: 11px; + } +} + +@media only screen and (max-width: 480px) { + #main-links .col-xs-6 { + width: 75% !important; + } + + #main-links { + margin: 20px auto 13px; + } + + #main-links pre { + padding: 13px 20px; + line-height: 18px; + } +} diff --git a/docs/components/Homepage/Platforms/index.js b/docs/components/Homepage/Platforms/index.js new file mode 100644 index 000000000000..b86e502933ec --- /dev/null +++ b/docs/components/Homepage/Platforms/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import './style.css'; + +const Platform = () => ( +
    +
    +

    Built for

    +

    + + + React + + {' '} + & + {' '} + + React Native + +

    + +
    +
    +
    +); + +export default Platform; diff --git a/docs/components/Homepage/Platforms/style.css b/docs/components/Homepage/Platforms/style.css new file mode 100644 index 000000000000..607d6472bd95 --- /dev/null +++ b/docs/components/Homepage/Platforms/style.css @@ -0,0 +1,36 @@ +#platform { + text-align: center; + margin: 10px 0 30px; +} + +#platform hr { + margin: 45px auto 0; +} + +.built-for { + font-size: 20px; + font-weight: 100; +} + +.platforms, .platforms a { + font-size: 20px; + font-weight: 600; +} + +@media only screen and (max-width: 540px) { + #platform { + margin: 10px 0 20px; + } + + #platform hr { + margin: 30px auto 0; + } + + .built-for { + font-size: 19px; + } + + .platforms, .platforms a { + font-size: 19px; + } +} \ No newline at end of file diff --git a/docs/components/Homepage/UsedBy/index.jsx b/docs/components/Homepage/UsedBy/index.jsx new file mode 100644 index 000000000000..7f95e68f1849 --- /dev/null +++ b/docs/components/Homepage/UsedBy/index.jsx @@ -0,0 +1,58 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { Link } from 'react-router'; +import './style.css'; + +const UsedByBg = ({ color }) => ( +
    + + + + + + + + +
    +); + +const User = ({ logo, demo, site, title }) => ( + + {title} + +); + +const UsedBy = ({ users }) => ( +
    +
    + +
    +

    Used by these fine folks:

    +
    + {users.map((user, idx) => )} +
    +
    +
    + + See more examples… + +
    +); + +UsedBy.propTypes = { + users: PropTypes.array, +}; + +export default UsedBy; diff --git a/docs/components/Homepage/UsedBy/style.css b/docs/components/Homepage/UsedBy/style.css new file mode 100644 index 000000000000..dad2519757cf --- /dev/null +++ b/docs/components/Homepage/UsedBy/style.css @@ -0,0 +1,67 @@ +.used-by-wrapper { + margin-bottom: 60px; +} + +.used-by { + max-width: 1000px; + margin: 0 auto; + position: relative; +} + +.used-by-bg { + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; +} + +.used-by-bg svg { + height: 100%; + width: 100%; +} + +.used-by-contents { + padding: 40px 20px; + position: relative; + z-index: 1; +} + +.used-by-title { + text-align: center; + margin: 0 0 30px 0; + opacity: 0.5; + color: #468c07; +} + + +.used-by-users { + display: flex; + align-items: center; + justify-content: space-around; +} + +.used-by-user { + /*flex: 1;*/ + margin-right: 30px; + max-width: 100px; + filter: grayscale(100%); + opacity: 0.8; +} +.used-by-user:last-child { + margin-right: 0; +} +.used-by-user:hover { + filter: none; + opacity: 1; +} +.used-by-user-image { + display: block; + width: 100%; +} + +.used-by-more-examples { + text-align: center; + display: block; + margin-top: 10px; +} diff --git a/docs/components/Homepage/index.js b/docs/components/Homepage/index.js new file mode 100644 index 000000000000..b2e69b4fef6f --- /dev/null +++ b/docs/components/Homepage/index.js @@ -0,0 +1,62 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Helmet from 'react-helmet'; +import './style.css'; +import Header from '../Header'; +import Heading from './Heading'; +import Demo from './Demo'; +import Platforms from './Platforms'; +import MainLinks from './MainLinks'; +import Featured from './Featured'; +import UsedBy from './UsedBy'; +import Footer from '../Footer'; + +const featuredStorybooks = [ + { + owner: 'https://avatars0.githubusercontent.com/u/698437?v=3&s=200', + storybook: { + name: 'React Dates', + link: 'http://airbnb.io/react-dates/', + }, + source: 'https://github.com/airbnb/react-dates', + }, + + { + owner: 'https://avatars3.githubusercontent.com/u/239676?v=3&s=460', + storybook: { + name: 'React Native Web', + link: 'https://necolas.github.io/react-native-web/storybook', + }, + source: 'https://github.com/necolas/react-native-web', + }, + + { + owner: 'https://avatars1.githubusercontent.com/u/15616844?v=3&s=200', + storybook: { + name: 'React Button', + link: 'http://kadira-samples.github.io/react-button/', + }, + source: 'https://github.com/kadira-samples/react-button', + }, +]; + +const Homepage = ({ users }) => ( +
    + + {/*
    */} + + + {/**/} + + + {/**/} +
    +
    +); + +Homepage.propTypes = { + featuredStorybooks: PropTypes.array, + users: PropTypes.array, +}; + +export default Homepage; diff --git a/docs/components/Homepage/style.css b/docs/components/Homepage/style.css new file mode 100644 index 000000000000..b627684abc36 --- /dev/null +++ b/docs/components/Homepage/style.css @@ -0,0 +1,3 @@ +hr { + max-width: 540px; +} \ No newline at end of file diff --git a/docs/components/breakpoints.css b/docs/components/breakpoints.css new file mode 100644 index 000000000000..d447679be867 --- /dev/null +++ b/docs/components/breakpoints.css @@ -0,0 +1,16 @@ +@media only screen and (min-width: 700px) { + .breakpoint-min-width-700 { + display: block; + } + .breakpoint-max-width-700 { + display: none; + } +} +@media only screen and (max-width: 700px) { + .breakpoint-min-width-700 { + display: none; + } + .breakpoint-max-width-700 { + display: block; + } +} diff --git a/docs/config.toml b/docs/config.toml new file mode 100644 index 000000000000..b2afa2a07656 --- /dev/null +++ b/docs/config.toml @@ -0,0 +1,37 @@ +siteTitle = "Storybook" +baseColor = "#e64074" +linkPrefix = "/" + +[docSections] +basics = [ + "/basics/introduction/", + "/basics/quick-start-guide/", + "/basics/slow-start-guide/", + "/basics/writing-stories/", + "/basics/exporting-storybook/", + "/basics/faq/", + "/basics/community/", +] +configurations = [ + "/configurations/default-config/", + "/configurations/custom-webpack-config/", + "/configurations/custom-babel-config/", + "/configurations/add-custom-head-tags/", + "/configurations/serving-static-files/", + "/configurations/env-vars/", + "/configurations/cli-options/", +] +testing = [ + "/testing/react-ui-testing/", + "/testing/structural-testing/", + "/testing/interaction-testing/", + "/testing/css-style-testing/", + "/testing/manual-testing/", +] +addons = [ + "/addons/introduction/", + "/addons/using-addons/", + "/addons/addon-gallery/", + "/addons/writing-addons/", + "/addons/api/", +] diff --git a/docs/css/github.css b/docs/css/github.css new file mode 100644 index 000000000000..9cec1ddd4822 --- /dev/null +++ b/docs/css/github.css @@ -0,0 +1,91 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ +.hljs-comment, +.hljs-quote { + color: #998; + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #333; + font-weight: bold; +} + +.hljs-number, +.hljs-literal, +.hljs-variable, +.hljs-template-variable, +.hljs-tag .hljs-attr { + color: #008080; +} + +.hljs-string, +.hljs-doctag { + color: #d14; +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #900; + font-weight: bold; +} + +.hljs-subst { + font-weight: normal; +} + +.hljs-type, +.hljs-class .hljs-title { + color: #458; + font-weight: bold; +} + +.hljs-tag, +.hljs-name, +.hljs-attribute { + color: #000080; + font-weight: normal; +} + +.hljs-regexp, +.hljs-link { + color: #009926; +} + +.hljs-symbol, +.hljs-bullet { + color: #990073; +} + +.hljs-built_in, +.hljs-builtin-name { + color: #0086b3; +} + +.hljs-meta { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + background: #fdd; +} + +.hljs-addition { + background: #dfd; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 000000000000..32714000f734 --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1,21 @@ +@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800'; + +body, div, p, ul, li, a { + font-family: 'Open Sans', sans-serif; + font-size: 14px; +} + +a, +a:visited, +a:hover, +a:active, +a:focus { + text-decoration: none; + color: #000; +} + +a:hover { + opacity: 0.7; +} + +.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}} diff --git a/docs/design/docs/docs-container.png b/docs/design/docs/docs-container.png new file mode 100644 index 000000000000..613f086adfb5 Binary files /dev/null and b/docs/design/docs/docs-container.png differ diff --git a/docs/design/docs/docs-content.png b/docs/design/docs/docs-content.png new file mode 100644 index 000000000000..8efcb47502b6 Binary files /dev/null and b/docs/design/docs/docs-content.png differ diff --git a/docs/design/docs/docs-nav.png b/docs/design/docs/docs-nav.png new file mode 100644 index 000000000000..1fc11bfdaa26 Binary files /dev/null and b/docs/design/docs/docs-nav.png differ diff --git a/docs/design/docs/docs.png b/docs/design/docs/docs.png new file mode 100644 index 000000000000..cb1c21cf7fbd Binary files /dev/null and b/docs/design/docs/docs.png differ diff --git a/docs/design/homepage/built-for.png b/docs/design/homepage/built-for.png new file mode 100644 index 000000000000..3c6e76ea4188 Binary files /dev/null and b/docs/design/homepage/built-for.png differ diff --git a/docs/design/homepage/demo.png b/docs/design/homepage/demo.png new file mode 100644 index 000000000000..7628d1f36b84 Binary files /dev/null and b/docs/design/homepage/demo.png differ diff --git a/docs/design/homepage/featured-storybooks.png b/docs/design/homepage/featured-storybooks.png new file mode 100644 index 000000000000..29471da98635 Binary files /dev/null and b/docs/design/homepage/featured-storybooks.png differ diff --git a/docs/design/homepage/footer.png b/docs/design/homepage/footer.png new file mode 100644 index 000000000000..bc3898a5b1d2 Binary files /dev/null and b/docs/design/homepage/footer.png differ diff --git a/docs/design/homepage/header.png b/docs/design/homepage/header.png new file mode 100644 index 000000000000..65641894a4dd Binary files /dev/null and b/docs/design/homepage/header.png differ diff --git a/docs/design/homepage/heading.png b/docs/design/homepage/heading.png new file mode 100644 index 000000000000..a2d8445c9e46 Binary files /dev/null and b/docs/design/homepage/heading.png differ diff --git a/docs/design/homepage/homepage.png b/docs/design/homepage/homepage.png new file mode 100644 index 000000000000..2445cd98535f Binary files /dev/null and b/docs/design/homepage/homepage.png differ diff --git a/docs/design/homepage/main-links.png b/docs/design/homepage/main-links.png new file mode 100644 index 000000000000..cc24bd4aa56d Binary files /dev/null and b/docs/design/homepage/main-links.png differ diff --git a/docs/design/homepage/screenshot.png b/docs/design/homepage/screenshot.png new file mode 100644 index 000000000000..c00683c0a595 Binary files /dev/null and b/docs/design/homepage/screenshot.png differ diff --git a/docs/design/homepage/storybook-icon-sqaure.png b/docs/design/homepage/storybook-icon-sqaure.png new file mode 100644 index 000000000000..e0de86e85f36 Binary files /dev/null and b/docs/design/homepage/storybook-icon-sqaure.png differ diff --git a/docs/design/homepage/storybook-icon.png b/docs/design/homepage/storybook-icon.png new file mode 100644 index 000000000000..e23993523f1d Binary files /dev/null and b/docs/design/homepage/storybook-icon.png differ diff --git a/docs/design/homepage/storybook-logo-new.svg b/docs/design/homepage/storybook-logo-new.svg new file mode 100644 index 000000000000..02922be52aee --- /dev/null +++ b/docs/design/homepage/storybook-logo-new.svg @@ -0,0 +1,42 @@ + +storybook-logo-new +Created using Figma + + clip-path="url(#clip-0)" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/design/homepage/storybook-logo.png b/docs/design/homepage/storybook-logo.png new file mode 100644 index 000000000000..1a914fe76424 Binary files /dev/null and b/docs/design/homepage/storybook-logo.png differ diff --git a/docs/favicon.ico b/docs/favicon.ico new file mode 100644 index 000000000000..31b707d749bd Binary files /dev/null and b/docs/favicon.ico differ diff --git a/docs/gatsby-browser.js b/docs/gatsby-browser.js new file mode 100644 index 000000000000..1a9cda3a0e62 --- /dev/null +++ b/docs/gatsby-browser.js @@ -0,0 +1,7 @@ +exports.onRouteUpdate = location => { + if (location.hash) { + setTimeout(() => { + document.querySelector(`${location.hash}`).scrollIntoView(); + }, 0); + } +}; diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js new file mode 100644 index 000000000000..84f7afca8429 --- /dev/null +++ b/docs/gatsby-node.js @@ -0,0 +1,33 @@ +// From: https://gist.github.com/ivanoats/8d01d9e934fdc17bae9090147f1e799b + +const fs = require('fs'); +const sm = require('sitemap'); + +function pagesToSitemap(pages) { + const urls = pages.map(p => { + if (p.path !== undefined) { + return { + url: p.path, + changefreq: 'daily', + priority: 0.7, + }; + } + }); + return urls.filter(u => u !== undefined); +} + +function generateSitemap(pages) { + const sitemap = sm.createSitemap({ + hostname: 'https://storybook.js.org', + cacheTime: '60000', + urls: pagesToSitemap(pages), + }); + fs.writeFileSync(`${__dirname}/public/sitemap.xml`, sitemap.toString()); +} + +module.exports = { + postBuild(pages, callback) { + generateSitemap(pages); + callback(); + }, +}; diff --git a/docs/html.js b/docs/html.js new file mode 100644 index 000000000000..6c011412d3ce --- /dev/null +++ b/docs/html.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import DocumentTitle from 'react-document-title'; + +import { prefixLink } from 'gatsby-helpers'; +import typography from './utils/typography'; +import { colors } from 'utils/colors'; +import favicon from './design/homepage/storybook-icon.png'; + +const BUILD_TIME = new Date().getTime(); + +class HTML extends Component { + render() { + const title = DocumentTitle.rewind(); + + let css; + if (process.env.NODE_ENV === 'production') { + css =