Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

4.0 release cleanup #4577

Merged
merged 3 commits into from
Oct 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ object OpenSourceProjects_Storybook_Docs : BuildType({
artifactRules = "docs/public => docs.zip"

params {
param("Deploy branch", "release/3.4")
param("Deploy branch", "release/4.0")
}

vcs {
Expand Down
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ It allows you to browse a component library, view the different states of each c
README for:

- [![Alpha](https://img.shields.io/npm/v/@storybook/core/alpha.svg)](https://github.com/storybooks/storybook)
- [![Latest](https://img.shields.io/npm/v/@storybook/core/latest.svg)](https://github.com/storybooks/storybook/tree/release/3.4)
- [![Latest](https://img.shields.io/npm/v/@storybook/core/latest.svg)](https://github.com/storybooks/storybook/tree/release/4.0)

Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

Expand Down Expand Up @@ -79,19 +79,19 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo

### Supported Frameworks

| Framework | Demo latest | Demo prerelease | |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0-alpha](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react) |
| [React Native](app/react-native) | - | - | [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native) |
| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0-alpha](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue) |
| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0-alpha](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular) |
| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0-alpha](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer) |
| [Mithril](app/mithril) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril) |
| [Marko](app/marko) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko) |
| [HTML](app/html) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) |
| [Svelte](app/svelte) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) |
| [Riot](app/riot) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) |
| [Ember](app/ember) <sup>alpha</sup> | - | [v4.0.0-alpha](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) |
| Framework | Demo latest | Demo prerelease | |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react) |
| [React Native](app/react-native) | - | - | [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native) |
| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue) |
| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular) |
| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer) |
| [Mithril](app/mithril) <sup>alpha</sup> | - | [v4.0.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril) |
| [Marko](app/marko) <sup>alpha</sup> | - | [v4.0.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko) |
| [HTML](app/html) <sup>alpha</sup> | - | [v4.0.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) |
| [Svelte](app/svelte) <sup>alpha</sup> | - | [v4.0.0](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) |
| [Riot](app/riot) <sup>alpha</sup> | - | [v4.0.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) |
| [Ember](app/ember) <sup>alpha</sup> | - | [v4.0.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) |

### Sub Projects

Expand Down
13 changes: 6 additions & 7 deletions addons/notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,9 @@ import { storiesOf } from '@storybook/react';

import Component from './Component';

storiesOf('Component', module)
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple component',
});
```

#### Using Markdown
Expand All @@ -51,9 +52,7 @@ import { storiesOf } from '@storybook/react';
import Component from './Component';
import someMarkdownText from './someMarkdownText.md';

storiesOf('Component', module).add(
'With Markdown',
() => <Component />,
{ notes: { markdown: someMarkdownText } }
);
storiesOf('Component', module).add('With Markdown', () => <Component />, {
notes: { markdown: someMarkdownText },
});
```
8 changes: 5 additions & 3 deletions addons/ondevice-notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ Storybook Addon On Device Notes allows you to write notes (text or markdown) for
![Storybook Addon Notes Demo](docs/demo.png)

### Getting Started
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**

**NOTE: Documentation on master branch is for alpha version, stable release is on [release/4.0](https://github.com/storybooks/storybook/tree/release/4.0/addons/)**

```sh
yarn add -D @storybook/addon-ondevice-notes
Expand Down Expand Up @@ -43,6 +44,7 @@ import { storiesOf } from '@storybook/react-native';

import Component from './Component';

storiesOf('Component', module)
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple component',
});
```
24 changes: 14 additions & 10 deletions docs/src/pages/addons/addon-gallery/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,48 @@ This is a list of available addons for Storybook.

With a11y you can test compliance of your stories with web accessibility standards.

### [Actions](https://github.com/storybooks/storybook/tree/release/3.4/addons/actions)
### [Actions](https://github.com/storybooks/storybook/tree/release/4.0/addons/actions)

With actions, you can inspect events related to your components. This is pretty neat when you are manually testing your components.

Also, you can think of this as a way to document events in your components.

### [Links](https://github.com/storybooks/storybook/tree/release/3.4/addons/links)
### [Links](https://github.com/storybooks/storybook/tree/release/4.0/addons/links)

With links you can link stories together. With that, you can build demos and prototypes directly from your UI components.

### [Knobs](https://github.com/storybooks/storybook/tree/release/3.4/addons/knobs)
### [Knobs](https://github.com/storybooks/storybook/tree/release/4.0/addons/knobs)

Knobs allow you to edit React props dynamically using the Storybook UI.
You can also use Knobs as dynamic variables inside your stories.

### [Notes](https://github.com/storybooks/storybook/tree/release/3.4/addons/notes)
### [Notes](https://github.com/storybooks/storybook/tree/release/4.0/addons/notes)

With this addon, you can write notes for each story in your component. This is pretty useful when you are working with a team.

### [Info](https://github.com/storybooks/storybook/tree/release/3.4/addons/info)
### [Info](https://github.com/storybooks/storybook/tree/release/4.0/addons/info)

If you are using Storybook as a style guide, then this addon will help you to build a nice-looking style guide with docs, automatic sample source code with a PropType explorer.

### [Options](https://github.com/storybooks/storybook/tree/release/3.4/addons/options)
### [Options](https://github.com/storybooks/storybook/tree/release/4.0/addons/options)

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/release/3.4/addons/storyshots)
### [Storyshots](https://github.com/storybooks/storybook/tree/release/4.0/addons/storyshots)

Storyshots is a way to automatically jest-snapshot all your stories. [More info here](/testing/structural-testing/).

### [Console](https://github.com/storybooks/storybook-addon-console)

Redirects console output (logs, errors, warnings) into Action Logger Panel. `withConsole` decorator notifies from what stories logs are coming.

### [Backgrounds](https://github.com/storybooks/storybook/tree/release/3.4/addons/background)
### [Backgrounds](https://github.com/storybooks/storybook/tree/release/4.0/addons/background)

With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.

### [Viewport](https://github.com/storybooks/storybook/tree/release/3.4/addons/viewport)
### [Viewport](https://github.com/storybooks/storybook/tree/release/4.0/addons/viewport)

Viewport allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
Viewport allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.

### [Google Analytics](https://github.com/storybooks/storybook/tree/master/addons/google-analytics)

Expand Down Expand Up @@ -146,13 +146,17 @@ reset state.
Convert stories into Sketch 💎 symbols.

### [styled components theme](https://github.com/echoulen/storybook-addon-styled-component-theme)

styled components theme selection.

### [AngularJS](https://github.com/titonobre/storybook-addon-angularjs)

Create stories with AngularJS(1.x) components.

### [JSS theme](https://github.com/vertexbz/storybook-addon-jss-theme)

JSS theme selection.

### [React live edit](https://github.com/vertexbz/storybook-addon-react-live-edit)

Provides live react story editing and preview.