mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 06:41:25 +08:00
Merge branch 'master' into master
This commit is contained in:
Norbert de Langen
GitHub
commit
1dd345ba5f
File diff suppressed because it is too large
Load Diff
@ -166,3 +166,60 @@ npm link @storybook/react
|
||||
### Getting Changes
|
||||
|
||||
After you've done any change, you need to run the `npm run storybook` command every time to see those changes.
|
||||
|
||||
## Release Guide
|
||||
|
||||
This section is for Storybook maintainers who will be creating releases.
|
||||
|
||||
Each release is described by:
|
||||
|
||||
- A version
|
||||
- A list of merged pull requests
|
||||
- Optionally, a short hand-written description
|
||||
|
||||
Thus, the current release sequence is as follows:
|
||||
|
||||
**NOTE: This is a work in progress. Don't try this unless you know what you're doing. We hope to automate this in CI, so this process is designed with that in mind.**
|
||||
|
||||
First, build the release:
|
||||
|
||||
```sh
|
||||
# make sure you current with origin/master.
|
||||
git checkout master
|
||||
git status
|
||||
|
||||
# clean out extra files
|
||||
# WARNING: destructive if you have extra files lying around!
|
||||
git clean -fdx && yarn
|
||||
|
||||
# build all the packages
|
||||
npm run bootstrap
|
||||
```
|
||||
|
||||
From here there are different procedures for prerelease (e.g. alpha/beta/rc) and proper release.
|
||||
|
||||
#### For prerelease (no CHANGELOG):
|
||||
|
||||
```sh
|
||||
# publish and tag the release
|
||||
npm run publish -- --concurrency 1 --npm-tag=alpha
|
||||
|
||||
# push the tags
|
||||
git push --tags
|
||||
```
|
||||
|
||||
#### For full release (with CHANGELOG):
|
||||
|
||||
```sh
|
||||
# publish but don't commit to git
|
||||
npm run publish -- --concurrency 1 --skip-git
|
||||
|
||||
# Update `CHANGELOG.md`
|
||||
# - Edit PR titles/labels on github until output is good
|
||||
# - Optionally, edit a handwritten description in `CHANGELOG.md`
|
||||
npm run changelog
|
||||
|
||||
# tag the release and push `CHANGELOG.md` and tags
|
||||
# FIXME: not end-to-end tested!
|
||||
npm run github-release
|
||||
```
|
||||
|
||||
89
MIGRATION.md
Normal file
89
MIGRATION.md
Normal file
@ -0,0 +1,89 @@
|
||||
# Migration
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [from version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
|
||||
- [Webpack upgrade](#webpack-upgrade)
|
||||
- [Packages renaming](#packages-renaming)
|
||||
- [Deprecated embedded addons](#deprecated-embedded-addons)
|
||||
|
||||
## from version 2.x.x to 3.x.x
|
||||
|
||||
This major release is mainly an internal restructuring.
|
||||
Upgrading requires work on behalf of users, this was unavoidable.
|
||||
We're sorry if this inconveniences you, we have tried via this document and provided tools to make the process as easy as possible.
|
||||
|
||||
### Webpack upgrade
|
||||
|
||||
Storybook will now use webpack 2 (and only webpack 2).
|
||||
If you are using a custom `webpack.config.js` you need to change this to be compatible.
|
||||
You can find the guide to upgrading your webpack config [on webpack.js.org](https://webpack.js.org/guides/migrating/).
|
||||
|
||||
### Packages renaming
|
||||
|
||||
All our packages have been renamed and published to npm as version 3.0.0.
|
||||
|
||||
> We have adopted the same versioning strategy as have been adopted by babel, jest and apollo.
|
||||
> It's a strategy best suited for ecosystem type tools, which consist of many seperately installable features / packages.
|
||||
> We think this describes storybook pretty well.
|
||||
|
||||
The new package names are:
|
||||
|
||||
| old | new |
|
||||
| -------------------------------------------- | -------------------------------- |
|
||||
| `getstorybook` | `@storybook/cli` |
|
||||
| `@kadira/getstorybook` | `@storybook/cli` |
|
||||
| | |
|
||||
| `@kadira/storybook` | `@storybook/react` |
|
||||
| `@kadira/react-storybook` | `@storybook/react` |
|
||||
| `@kadira/react-native-storybook` | `@storybook/react-native` |
|
||||
| | |
|
||||
| `storyshots` | `@storybook/addon-storyshots` |
|
||||
| `@kadira/storyshots` | `@storybook/addon-storyshots` |
|
||||
| | |
|
||||
| `@kadira/storybook-ui` | `@storybook/ui` |
|
||||
| `@kadira/storybook-addons` | `@storybook/addons` |
|
||||
| `@kadira/storybook-channels` | `@storybook/channels` |
|
||||
| `@kadira/storybook-channel-postmsg` | `@storybook/channel-postmessage` |
|
||||
| `@kadira/storybook-channel-websocket` | `@storybook/channel-websocket` |
|
||||
| | |
|
||||
| `@kadira/storybook-addon-actions` | `@storybook/addon-actions` |
|
||||
| `@kadira/storybook-addon-links` | `@storybook/addon-links` |
|
||||
| `@kadira/storybook-addon-info` | `@storybook/addon-info` |
|
||||
| `@kadira/storybook-addon-knobs` | `@storybook/addon-knobs` |
|
||||
| `@kadira/storybook-addon-comments` | `@storybook/addon-comments` |
|
||||
| `@kadira/storybook-addon-notes` | `@storybook/addon-notes` |
|
||||
| `@kadira/storybook-addon-options` | `@storybook/addon-options` |
|
||||
| `@kadira/storybook-addon-graphql` | `@storybook/addon-graphql` |
|
||||
| `@kadira/react-storybook-decorator-centered` | `@storybook/addon-centered` |
|
||||
|
||||
If your codebase is small, it's probably doable to just replace them by hand. (in your codebase and in `package.json`).
|
||||
|
||||
But if you have a lot of occurances in your codebase, you can use a [codemod we created](./lib/codemod) for you.
|
||||
|
||||
> A codemod makes automatic changed to your app's code.
|
||||
|
||||
You have to change your `package.json`, prune old and install new dependencies by hand.
|
||||
|
||||
`npm prune` will remove all dependecies from `node_modules` which are no longer referenced in `package.json`.
|
||||
|
||||
### Deprecated embedded addons
|
||||
|
||||
We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning.
|
||||
|
||||
If you **are** using these addons, migrating is simple:
|
||||
|
||||
- add the addons you use to your `package.json`.
|
||||
- update your code:
|
||||
change `addons.js` like so:
|
||||
```js
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-links/register';
|
||||
```
|
||||
change `x.story.js` like so:
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { link } from '@storybook/addon-links';
|
||||
```
|
||||
@ -72,8 +72,10 @@ For full documentation on using Storybook visit: [storybooks.js.org](https://sto
|
||||
|
||||
## Contributing
|
||||
|
||||
We welcome contributions to Storybook! There are many ways to contribute to
|
||||
this project. [Get started here](CONTRIBUTING.md)
|
||||
We welcome contributions to Storybook!
|
||||
|
||||
- ⇄ Pull requests and ★ Stars are always welcome.
|
||||
- Read our [contributing guide](CONTRIBUTING.md) to get started.
|
||||
|
||||
### Development scripts
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
### Short Term
|
||||
|
||||
- Mobile support
|
||||
- Addon API and addons
|
||||
- A clear guide to hack Storybook
|
||||
- React Native Support
|
||||
@ -11,4 +12,3 @@
|
||||
- Automatic story generation (and edge case detection) based on propTypes.
|
||||
- Angular Support
|
||||
- Vue Support
|
||||
- UI addons (Add different panels like Action Logger)
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
@ -27,7 +27,7 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.0.0-rc.0",
|
||||
"@storybook/addons": "^3.0.0-rc.2",
|
||||
"deep-equal": "^1.0.1",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"prop-types": "^15.5.8",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Storybook decorator to center components",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-comments",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Comments addon for Storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -23,7 +23,7 @@
|
||||
"storybook-remote": "start-storybook -p 3006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.0.0-rc.0",
|
||||
"@storybook/addons": "^3.0.0-rc.2",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"events": "^1.1.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
@ -26,13 +26,10 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "*"
|
||||
"graphiql": "^0.7.8",
|
||||
"graphql": "^0.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"graphiql": "^0.7.8",
|
||||
"graphql": "^0.7.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -23,7 +23,7 @@
|
||||
"react": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.0.0-rc.0",
|
||||
"@storybook/addons": "^3.0.0-rc.2",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"markdown-to-react-components": "^0.2.1",
|
||||
"prop-types": "^15.5.8",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Story Links addon for storybook",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
@ -26,7 +26,7 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.0.0-rc.0"
|
||||
"@storybook/addons": "^3.0.0-rc.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Options addon for storybook",
|
||||
"main": "preview.js",
|
||||
"scripts": {
|
||||
@ -26,7 +26,7 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.0.0-rc.0"
|
||||
"@storybook/addons": "^3.0.0-rc.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"main": "dist/index.js",
|
||||
"bin": {
|
||||
@ -34,11 +34,11 @@
|
||||
"react-native": "^0.43.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.0.0-rc.0",
|
||||
"@storybook/addon-links": "^3.0.0-rc.0",
|
||||
"@storybook/addons": "^3.0.0-rc.0",
|
||||
"@storybook/channel-websocket": "^3.0.0-rc.0",
|
||||
"@storybook/ui": "^3.0.0-rc.0",
|
||||
"@storybook/addon-actions": "^3.0.0-rc.2",
|
||||
"@storybook/addon-links": "^3.0.0-rc.2",
|
||||
"@storybook/addons": "^3.0.0-rc.2",
|
||||
"@storybook/channel-websocket": "^3.0.0-rc.2",
|
||||
"@storybook/ui": "^3.0.0-rc.2",
|
||||
"autoprefixer": "^7.0.1",
|
||||
"babel-core": "^6.24.1",
|
||||
"babel-loader": "^7.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"license": "MIT",
|
||||
"main": "dist/client/index.js",
|
||||
@ -23,11 +23,11 @@
|
||||
"prepublish": "node ../../scripts/prepublish.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "^3.0.0-rc.0",
|
||||
"@storybook/addon-links": "^3.0.0-rc.0",
|
||||
"@storybook/addons": "^3.0.0-rc.0",
|
||||
"@storybook/channel-postmessage": "^3.0.0-rc.0",
|
||||
"@storybook/ui": "^3.0.0-rc.0",
|
||||
"@storybook/addon-actions": "^3.0.0-rc.2",
|
||||
"@storybook/addon-links": "^3.0.0-rc.2",
|
||||
"@storybook/addons": "^3.0.0-rc.2",
|
||||
"@storybook/channel-postmessage": "^3.0.0-rc.2",
|
||||
"@storybook/ui": "^3.0.0-rc.2",
|
||||
"airbnb-js-shims": "^1.1.1",
|
||||
"autoprefixer": "^7.1.1",
|
||||
"babel-core": "^6.24.1",
|
||||
|
||||
@ -36,45 +36,58 @@ If you are using Storybook as a style guide, then this addon will help you to bu
|
||||
|
||||
The Storybook webapp UI can be customised with this addon. It can be used to change the header, show/hide various UI elements and to enable full-screen mode by default.
|
||||
|
||||
### [Storyshots](https://github.com/storybooks/storybook/tree/master/addons/storyshots)
|
||||
|
||||
Storyshots is a way to automaticly jest-snapshot all your stories. [More info here](../testing/structural-testing#).
|
||||
|
||||
## Community Addons
|
||||
|
||||
You need to install these addons directly from NPM in order to use them.
|
||||
|
||||
### [README](https://github.com/tuchk4/storybook-readme)
|
||||
|
||||
With this addon, you can add docs in markdown format for each story.
|
||||
It very useful because most projects and components already have README.md files.
|
||||
Now it is easy to add them into your Storybook.
|
||||
|
||||
### [Story-router](https://github.com/gvaldambrini/storybook-router)
|
||||
|
||||
A [decorator](/addons/introduction) that allows you to integrate react-router components in your stories.
|
||||
|
||||
### [Host](https://github.com/philcockfield/storybook-host)
|
||||
|
||||
A [decorator](/addons/introduction) with powerful display options for hosting, sizing and framing your components.
|
||||
|
||||
### [Specs](https://github.com/mthuret/storybook-addon-specifications)
|
||||
|
||||
This is a very special addon where it'll allow you to write test specs directly inside your stories.
|
||||
You can even run these tests inside a CI box.
|
||||
|
||||
### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
|
||||
|
||||
With this addon, you can showcase multiple components (or varying component states) within 1 story.
|
||||
Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
|
||||
|
||||
### [Props Combinations](https://github.com/evgenykochetkov/react-storybook-addon-props-combinations)
|
||||
|
||||
Given possible values for each prop, renders your component with all combinations of prop values.
|
||||
Useful for finding edge cases or just seeing all component states at once.
|
||||
|
||||
### [Backgrounds](https://github.com/NewSpring/react-storybook-addon-backgrounds)
|
||||
|
||||
With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
|
||||
|
||||
### [Material-UI](https://github.com/sm-react/storybook-addon-material-ui)
|
||||
|
||||
Wraps your story into MuiThemeProvider.
|
||||
It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file
|
||||
|
||||
### [i18n tools](https://github.com/joscha/storybook-addon-i18n-tools)
|
||||
|
||||
With this addon, you can test your storybooks with a different text-direction.
|
||||
It is very useful if you are working on components that have to work both in LTR as well as in RTL languages.
|
||||
|
||||
### [JSX preview](https://github.com/Kilix/storybook-addon-jsx)
|
||||
|
||||
This addon shows a preview of the JSX code for each story.
|
||||
It allows you to configure the display and copy the code with a single click.
|
||||
|
||||
@ -123,6 +123,7 @@ storiesOf('core.Button', module)
|
||||
Then you can filter stories to display only the stories you want to see.
|
||||
|
||||
### [Chapters](https://github.com/yangshun/react-storybook-addon-chapters)
|
||||
|
||||
With this addon, you can showcase multiple components (or varying component states) within 1 story.
|
||||
Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.
|
||||
|
||||
|
||||
@ -11,29 +11,25 @@ Here are all those options:
|
||||
|
||||
## For start-storybook
|
||||
|
||||
```
|
||||
Usage: start-storybook [options]
|
||||
Usage: start-storybook [options]
|
||||
|
||||
Options:
|
||||
Options:
|
||||
|
||||
-h, --help output usage information
|
||||
-V, --version output the version number
|
||||
-p, --port [number] Port to run Storybook (Required)
|
||||
-h, --host [string] Host to run Storybook
|
||||
-s, --static-dir <dir-names> Directory where to load static files from
|
||||
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
|
||||
```
|
||||
-h, --help output usage information
|
||||
-V, --version output the version number
|
||||
-p, --port [number] Port to run Storybook (Required)
|
||||
-h, --host [string] Host to run Storybook
|
||||
-s, --static-dir <dir-names> Directory where to load static files from
|
||||
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
|
||||
|
||||
## For build-storybook
|
||||
|
||||
```
|
||||
Usage: build-storybook [options]
|
||||
Usage: build-storybook [options]
|
||||
|
||||
Options:
|
||||
Options:
|
||||
|
||||
-h, --help output usage information
|
||||
-V, --version output the version number
|
||||
-s, --static-dir <dir-names> Directory where to load static files from
|
||||
-o, --output-dir [dir-name] Directory where to store built files
|
||||
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
|
||||
```
|
||||
-h, --help output usage information
|
||||
-V, --version output the version number
|
||||
-s, --static-dir <dir-names> Directory where to load static files from
|
||||
-o, --output-dir [dir-name] Directory where to store built files
|
||||
-c, --config-dir [dir-name] Directory where to load Storybook configurations from
|
||||
|
||||
@ -13,7 +13,7 @@ There are a few ways to do it:
|
||||
|
||||
## Extend Mode
|
||||
|
||||
You'll get *extend-mode* by returning an object.
|
||||
You'll get _extend-mode_ by returning an object.
|
||||
|
||||
Let's say you want to add [SASS](http://sass-lang.com/) support to Storybook. This is how to do it.
|
||||
Simply add the following content to a file called `webpack.config.js` in your Storybook config directory (`.storybook` by default ).
|
||||
|
||||
@ -78,7 +78,6 @@ storiesOf('<img>', module)
|
||||
));
|
||||
```
|
||||
|
||||
|
||||
## Absolute versus relative paths
|
||||
|
||||
Sometimes, you may want to deploy your storybook into a subpath, like <https://kadira-samples.github.io/react-button>.
|
||||
|
||||
@ -82,3 +82,9 @@ todomvc:
|
||||
description: Todo app Storybook with built-in unit tests.
|
||||
source: https://github.com/thorjarhun/react-storybook-todolist
|
||||
demo: https://thorjarhun.github.io/react-storybook-todolist/
|
||||
react-svg-pan-zoom:
|
||||
thumbnail: ./thumbnails/react-svg-pan-zoom.png
|
||||
title: React SVG Pan Zoom
|
||||
description: A React component that adds pan and zoom features to SVG
|
||||
source: https://github.com/chrvadala/react-svg-pan-zoom
|
||||
demo: https://chrvadala.github.io/react-svg-pan-zoom/
|
||||
|
||||
BIN
docs/pages/examples/thumbnails/react-svg-pan-zoom.png
Normal file
BIN
docs/pages/examples/thumbnails/react-svg-pan-zoom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"lerna": "2.0.0-rc.5",
|
||||
"version": "3.0.0-rc.1",
|
||||
"version": "3.0.0-rc.2",
|
||||
"commands": {
|
||||
"bootstrap": {
|
||||
"ignore": [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addons",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Storybook addons store",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-postmessage",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
@ -11,7 +11,7 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.0.0-rc.0",
|
||||
"@storybook/channels": "^3.0.0-rc.2",
|
||||
"json-stringify-safe": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channel-websocket",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
@ -11,6 +11,6 @@
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/channels": "^3.0.0-rc.0"
|
||||
"@storybook/channels": "^3.0.0-rc.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/channels",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/cli",
|
||||
"version": "3.0.0-rc.1",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
|
||||
"bin": {
|
||||
"getstorybook": "./bin/generate.js"
|
||||
|
||||
@ -13,28 +13,51 @@ It will help you migrate breaking changes.
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
npm install jscodeshift
|
||||
npm install @storybook/codemod
|
||||
```
|
||||
|
||||
- `@storybook/codemod` is out collection of codemod scripts.
|
||||
- `jscodeshift` is a tool we use to apply our codemods.
|
||||
|
||||
After running the migration commands, you can remove them from your `package.json`, if you added them.
|
||||
|
||||
## How to run a codemod script
|
||||
|
||||
From the directory where you installed both `jscodeshift` and `@storybook/codemod` run:
|
||||
|
||||
Example:
|
||||
|
||||
```sh
|
||||
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/update-organisation-name.js . --ignore-pattern "node_modules|dist"
|
||||
```
|
||||
|
||||
Explanation:
|
||||
|
||||
<jscodeShiftCommand> -t <transformFileLocation> <pathToSource> --ignore-pattern "<globPatternToIgnore>"
|
||||
|
||||
## Transforms
|
||||
|
||||
### add-organisation-to-package-name
|
||||
|
||||
Updates package names in imports to include our organisation name prefix
|
||||
(`@storybook/`), stripping off the old `@storybook/` prefix.
|
||||
Updates package names in imports to migrate to the new package names of storybook.
|
||||
|
||||
```sh
|
||||
jscodeshift -t add-organisation-to-package-name path/to/source.js
|
||||
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/update-organisation-name.js . --ignore-pattern "node_modules|dist"
|
||||
```
|
||||
|
||||
There's a mapping of paths we replace but this example explains the gist of it:
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
import { storiesOf } from '@kadira/storybook-addon-links';
|
||||
```
|
||||
|
||||
becomes
|
||||
Becomes
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { storiesOf } from '@storybook/addon-links';
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@storybook/codemod",
|
||||
"description": "A collection of codemod scripts written with JSCodeshift",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -10,5 +10,11 @@
|
||||
"main": "src/index.js",
|
||||
"dependencies": {
|
||||
"jscodeshift": "^0.3.30"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublish": "node ../../scripts/prepublish.js && mv dist/transforms/* dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"shelljs": "^0.7.7"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
// Demo at https://astexplorer.net/#/gist/f2d0b42c37e4556a4f816892be6ca402/latest
|
||||
export default function transformer(file, api) {
|
||||
const j = api.jscodeshift;
|
||||
|
||||
const packageNames = {
|
||||
'@kadira/storybook-addons': '@storybook/addons',
|
||||
'@kadira/react-storybook-decorator-centered': '@storybook/addon-centered',
|
||||
'@kadira/storybook-addons': '@storybook/addons',
|
||||
'@kadira/storybook-addon-actions': '@storybook/addon-actions',
|
||||
'@kadira/storybook-addon-comments': '@storybook/addon-comments',
|
||||
'@kadira/storybook-addon-graphql': '@storybook/addon-graphql',
|
||||
'@kadira/storybook-addon-info': '@storybook/addon-info',
|
||||
@ -11,15 +12,25 @@ export default function transformer(file, api) {
|
||||
'@kadira/storybook-addon-links': '@storybook/addon-links',
|
||||
'@kadira/storybook-addon-notes': '@storybook/addon-notes',
|
||||
'@kadira/storybook-addon-options': '@storybook/addon-options',
|
||||
storyshots: '@storybook/addon-storyshots',
|
||||
'@kadira/storybook-channels': '@storybook/channels',
|
||||
'@kadira/storybook-channel-postmsg': '@storybook/channel-postmessage',
|
||||
'@kadira/storybook-channel-websocket': '@storybook/channel-websocket',
|
||||
'@kadira/getstorybook': '@storybook/cli',
|
||||
'@kadira/react-storybook': '@storybook/react',
|
||||
'@kadira/react-native-storybook': '@storybook/react-native',
|
||||
'@kadira/storybook-ui': '@storybook/ui',
|
||||
'@kadira/react-native-storybook': '@storybook/react-native',
|
||||
'@kadira/react-storybook': '@storybook/react',
|
||||
'@kadira/getstorybook': '@storybook/cli',
|
||||
'@kadira/storybook': '@storybook/react',
|
||||
storyshots: '@storybook/addon-storyshots',
|
||||
getstorybook: '@storybook/cli',
|
||||
};
|
||||
const packageNamesKeys = Object.keys(packageNames);
|
||||
|
||||
/**
|
||||
* Checks whether the node value matches a Storybook package
|
||||
* @param {string} the import declaration node
|
||||
* @returns {string} whether the node value matches a Storybook package
|
||||
*/
|
||||
const getMatch = oldpart => packageNamesKeys.find(newpart => oldpart.match(newpart));
|
||||
|
||||
/**
|
||||
* Returns the name of the Storybook packages with the organisation name,
|
||||
@ -27,13 +38,17 @@ export default function transformer(file, api) {
|
||||
* @param {string} oldPackageName the name of the old package
|
||||
* @return {string} the new package name
|
||||
* @example
|
||||
* // returns '@storybook/react'
|
||||
* getNewPackageName('@kadira/react-storybook')
|
||||
* // returns '@storybook/storybook'
|
||||
* getNewPackageName('@kadira/storybook')
|
||||
*/
|
||||
const getNewPackageName = oldPackageName => {
|
||||
const packageNameWithOrganisation = packageNames[oldPackageName];
|
||||
const match = getMatch(oldPackageName);
|
||||
|
||||
return packageNameWithOrganisation;
|
||||
if (match) {
|
||||
const replacement = packageNames[match];
|
||||
return oldPackageName.replace(match, replacement);
|
||||
}
|
||||
return oldPackageName;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ui",
|
||||
"version": "3.0.0-rc.0",
|
||||
"version": "3.0.0-rc.2",
|
||||
"description": "Core Storybook UI",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
25
package.json
25
package.json
@ -1,5 +1,9 @@
|
||||
{
|
||||
"name": "storybook",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:storybooks/storybook.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.24.1",
|
||||
@ -17,6 +21,7 @@
|
||||
"eslint-plugin-jest": "^20.0.3",
|
||||
"eslint-plugin-prettier": "^2.1.1",
|
||||
"gh-pages": "^1.0.0",
|
||||
"github-release-from-changelog": "^1.2.1",
|
||||
"jest": "^20.0.4",
|
||||
"jest-enzyme": "^3.2.0",
|
||||
"lerna": "2.0.0-rc.5",
|
||||
@ -34,11 +39,9 @@
|
||||
"remark-toc": "^4.0.0",
|
||||
"shelljs": "^0.7.7"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/storybooks/storybook.git"
|
||||
},
|
||||
"scripts": {
|
||||
"changelog": "pr-log --sloppy",
|
||||
"github-release": "github-release-from-changelog",
|
||||
"publish": "lerna publish",
|
||||
"import-repo": "lerna import",
|
||||
"bootstrap": "lerna bootstrap",
|
||||
@ -58,5 +61,19 @@
|
||||
"collective": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"pr-log": {
|
||||
"skipLabels": [
|
||||
"cleanup"
|
||||
],
|
||||
"validLabels": {
|
||||
"breaking": "Breaking Changes",
|
||||
"feature": "Features",
|
||||
"bug": "Bug Fixes",
|
||||
"documentation": "Documentation",
|
||||
"maintenance": "Maintenance",
|
||||
"greenkeeper": "Dependency Upgrades",
|
||||
"other": "Other"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user