mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
Merge branch 'next' of https://github.com/storybookjs/storybook into 12281_new_version_notification_blocks_content
This commit is contained in:
Tomastomaslol
Tomas Nygren
commit
63961d81c0
@ -14,6 +14,19 @@ executors:
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
resource_class: <<parameters.class>>
|
||||
sb_node_12:
|
||||
parameters:
|
||||
class:
|
||||
description: The Resource class
|
||||
type: enum
|
||||
enum: ['small', 'medium', 'large', 'xlarge']
|
||||
default: 'medium'
|
||||
working_directory: /tmp/storybook
|
||||
docker:
|
||||
- image: circleci/node:12-browsers
|
||||
environment:
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
resource_class: <<parameters.class>>
|
||||
|
||||
jobs:
|
||||
build:
|
||||
@ -159,10 +172,6 @@ jobs:
|
||||
executor:
|
||||
class: large
|
||||
name: sb_node
|
||||
docker:
|
||||
- image: cypress/included:4.7.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
working_directory: /tmp/storybook
|
||||
parallelism: 10
|
||||
steps:
|
||||
@ -182,19 +191,83 @@ jobs:
|
||||
- run:
|
||||
name: test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: Install Cypress binary
|
||||
command: yarn cypress install
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
examples-v2-yarn-2:
|
||||
docker:
|
||||
- image: cypress/included:4.7.0
|
||||
environment:
|
||||
TERM: xterm
|
||||
examples-v2-cra-bench:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_12
|
||||
working_directory: /tmp/storybook
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set registry http://localhost:6000/
|
||||
- run:
|
||||
name: Test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: Install Cypress binary
|
||||
command: yarn cypress install
|
||||
- run:
|
||||
name: Run @storybook/bench on a CRA project
|
||||
command: yarn test:e2e-framework cra_bench
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
examples-v2-angular:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node_12
|
||||
working_directory: /tmp/storybook
|
||||
parallelism: 2
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Running local registry
|
||||
command: yarn local-registry --port 6000 --open
|
||||
background: true
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set registry http://localhost:6000/
|
||||
- run:
|
||||
name: Test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: Install Cypress binary
|
||||
command: yarn cypress install
|
||||
- run:
|
||||
name: Run e2e tests
|
||||
command: yarn test:e2e-framework angular@latest angular@v9-lts
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
examples-v2-yarn-2:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_node
|
||||
working_directory: /tmp/storybook
|
||||
# parallelism: 10
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
@ -212,6 +285,9 @@ jobs:
|
||||
- run:
|
||||
name: test local registry
|
||||
command: yarn info @storybook/core
|
||||
- run:
|
||||
name: Install Cypress binary
|
||||
command: yarn cypress install
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework --use-yarn-2 sfcVue cra
|
||||
@ -402,9 +478,15 @@ workflows:
|
||||
- examples-v2:
|
||||
requires:
|
||||
- publish
|
||||
- examples-v2-angular:
|
||||
requires:
|
||||
- publish
|
||||
- examples-v2-yarn-2:
|
||||
requires:
|
||||
- publish
|
||||
- examples-v2-cra-bench:
|
||||
requires:
|
||||
- publish
|
||||
deploy:
|
||||
jobs:
|
||||
- frontpage
|
||||
|
||||
32
README.md
32
README.md
@ -42,8 +42,8 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
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.
|
||||
[Storybook](https://storybook.js.org) 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. Find out more at https://storybook.js.org.
|
||||
|
||||
<center>
|
||||
<img src="https://raw.githubusercontent.com/storybookjs/storybook/master/media/storybook-intro.gif" width="100%" />
|
||||
@ -55,13 +55,6 @@ It allows you to browse a component library, view the different states of each c
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
</p>
|
||||
|
||||
## Intro
|
||||
|
||||
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.
|
||||
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/examples/>
|
||||
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile.
|
||||
|
||||
## Table of contents
|
||||
|
||||
@ -80,20 +73,21 @@ Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/confi
|
||||
|
||||
## Getting Started
|
||||
|
||||
First install storybook:
|
||||
Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook, and to get started.
|
||||
|
||||
```sh
|
||||
cd my-react-app
|
||||
npx sb init
|
||||
```
|
||||
### Documentation
|
||||
|
||||
If you'd rather set up your project manually, take a look at our [Slow Start Guide](https://storybook.js.org/docs/react/configure/overview).
|
||||
Documentation can be found [Storybook's docs site](https://storybook.js.org/docs).
|
||||
|
||||
Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
|
||||
### Examples
|
||||
|
||||
For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)
|
||||
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
|
||||
|
||||
For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Slack (legacy)](https://now-examples-slackin-rrirkqohko.now.sh/)
|
||||
Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile.
|
||||
|
||||
### Community
|
||||
|
||||
For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Slack (legacy)](https://now-examples-slackin-rrirkqohko.now.sh/).
|
||||
|
||||
## Projects
|
||||
|
||||
@ -141,7 +135,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
|
||||
| [storysource](addons/storysource/) | View the code of your stories within the Storybook UI |
|
||||
| [viewport](addons/viewport/) | Change display sizes and layouts for responsive components using Storybook |
|
||||
|
||||
See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
|
||||
See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
|
||||
|
||||
### Deprecated Addons
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@ MyNonCheckedStory.parameters = {
|
||||
## Parameters
|
||||
|
||||
For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
|
||||
You can override these options [at story level too](https://storybook.js.org/docs/react/configure/features-and-behavior#per-story-options.
|
||||
You can override these options [at story level too](https://storybook.js.org/docs/react/configure/features-and-behavior#per-story-options).
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
|
||||
@ -8,7 +8,7 @@ This document describes the pre-6.0 usage of the addon, and as such is no longer
|
||||
|
||||
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/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
|
||||
> _Note: Be mindful of the choice of the function's name. Avoid using Javascript reserved words such as **default** or **if**, as they will lead into unexpected errors._
|
||||
|
||||
```js
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
@ -36,7 +36,7 @@ export const ensureDocsBeforeControls = (configDir: string) => {
|
||||
}
|
||||
if (!verifyDocsBeforeControls(main.addons)) {
|
||||
logger.warn(dedent`
|
||||
Expected '@storybook/addon-docs' (or essentials) to be listed before '@storybook/addon-controls'. Check your main.js?
|
||||
Expected '@storybook/addon-docs' to be listed before '@storybook/addon-controls' (or '@storybook/addon-essentials'). Check your main.js?
|
||||
|
||||
https://github.com/storybookjs/storybook/issues/11442
|
||||
`);
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
"@types/tmp": "^0.1.0",
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-react-docgen": "^4.1.0",
|
||||
"babel-plugin-react-docgen": "^4.2.1",
|
||||
"cross-spawn": "^7.0.1",
|
||||
"fs-extra": "^9.0.0",
|
||||
"jest": "^26.0.0",
|
||||
|
||||
@ -39,7 +39,7 @@ If you want to reconfigure an addon, simply install that addon per that addon's
|
||||
|
||||
## Disabling addons
|
||||
|
||||
Yuu can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
|
||||
You can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
|
||||
@ -410,6 +410,10 @@ This is a really powerful technique to write stories of Relay components because
|
||||
|
||||
Whenever you change your data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
|
||||
|
||||
## Using a custom directory
|
||||
|
||||
Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/workflows/snapshot-testing).
|
||||
|
||||
## Options
|
||||
|
||||
### `config`
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
"@types/webpack-env": "^1.15.2",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
"babel-plugin-react-docgen": "^4.1.0",
|
||||
"babel-plugin-react-docgen": "^4.2.1",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"lodash": "^4.17.15",
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
```js
|
||||
// storybook.text.js
|
||||
|
||||
import path from 'path';
|
||||
|
||||
import initStoryshots from '@storybook/addon-storyshots';
|
||||
|
||||
// the required import from the @storybook/addon-storyshots-puppeteer addon
|
||||
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'
|
||||
|
||||
// function to customize the snapshot location
|
||||
const getMatchOptions = ({ context: { fileName }}) => {
|
||||
// Generates a custom path based on the file name and the custom directory.
|
||||
const snapshotPath = path.join(path.dirname(fileName), 'your-custom-directory');
|
||||
return { customSnapshotsDir: snapshotPath };
|
||||
}
|
||||
|
||||
initStoryshots({
|
||||
// your own configuration
|
||||
test: imageSnapshot({
|
||||
//
|
||||
// invoke the function above here
|
||||
getMatchOptions
|
||||
})
|
||||
});
|
||||
```
|
||||
@ -94,6 +94,10 @@ class MyComponent extends Component {
|
||||
export const defaultView = () => <MyComponent initialState={} />;
|
||||
```
|
||||
|
||||
### Why i'm getting errors with react-popper and Storybook?
|
||||
|
||||
If you're using the `react-popper` in your own project and you're experiencing issues with Storybook. You can solve them by adding the `--no-dll` command line flag. Take a look at the [cli options page](../api/cli-options.md) to see how you can use the flag in your project.
|
||||
|
||||
### Which community addons are compatible with the latest version of Storybook?
|
||||
|
||||
Starting with Storybook version 6.0 we've introduced some great features aimed at streamlining your development workflow.
|
||||
@ -101,3 +105,4 @@ Starting with Storybook version 6.0 we've introduced some great features aimed a
|
||||
With this we would like to point out that if you plan on using addons created by our fantastic community, you need to take in consideration that some of those addons might be working with a outdated version of Storybook.
|
||||
|
||||
We're actively working in providing a better way to address this situation, but in the meantime we would ask a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating a issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
|
||||
|
||||
|
||||
@ -54,7 +54,35 @@ When you make changes to your components or stories, run the test again to ident
|
||||
|
||||
If the changes are intentional we can accept them as new baselines. If the changes are bugs, fix the underlying code then run the snapshot tests again.
|
||||
|
||||
Storyshots has many options for advanced use cases; read more in the [addon’s documentation](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core).
|
||||
### Configure the snapshot's directory
|
||||
|
||||
If the project you're working on has a custom structure for the component's snapshots, you can still continue to use the addon and configure it to suit your needs. You'll need to take some additional steps though.
|
||||
|
||||
You'll need to include the `@storybook/addon-storyshots-puppeteer` and `puppeteer` packages into your own environment.
|
||||
|
||||
```shell
|
||||
npm i -D @storybook/addon-storyshots-puppeteer puppeteer
|
||||
```
|
||||
|
||||
Then you'll need to change your `storybook.test.js` file to the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyshots-custom-directory.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
Don't forget to change the <code>your-custom-directory</code> to the one you're using.
|
||||
</div>
|
||||
|
||||
When you run `npx test storybook.test.js`, your snapshots will be placed in the proper directory.
|
||||
|
||||
Storyshots has many other options for advanced use cases such as this one. You can read more about them in the [addon’s documentation](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core).
|
||||
|
||||
<div class="aside">
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Storybook gives you tools to expand this basic documentation with prose and layo
|
||||
/>
|
||||
</video>
|
||||
|
||||
Out of the box, Storybook ships with [DocsPage](./docs-page.md), a documentation template that lists all the stories for a component and associated metadata. It infers metadata values based on source code, types and JSDoc comments. [Customize](./docs-page.md#replacing-docspage) this page to create a new template if you have specific requirements.
|
||||
If you're including Storybook in your project for the [first time](../get-started/install.md), we provide you with [DocsPage](./docs-page.md), a documentation template that lists all the stories for a component and associated metadata. It infers metadata values based on source code, types and JSDoc comments. If you need, you can customize this page to create your own custom template.
|
||||
|
||||
If you're already using Storybook and you're **updating** to the latest release, we recommend that you install [@storybook/addon-essentials](https://www.npmjs.com/package/@storybook/addon-essentials), to include this and other great features into your project.
|
||||
|
||||
You can also create free-form pages for each component using [MDX](./mdx.md), a format for simultaneously documenting components and writing stories.
|
||||
|
||||
|
||||
@ -89,12 +89,16 @@ export const init: ModuleFn = ({ store, provider }) => {
|
||||
toggleFullscreen(toggled?: boolean) {
|
||||
return store.setState(
|
||||
(state: State) => {
|
||||
const { showNav } = state.layout;
|
||||
|
||||
const value = typeof toggled === 'boolean' ? toggled : !state.layout.isFullscreen;
|
||||
const shouldShowNav = showNav === false && value === false;
|
||||
|
||||
return {
|
||||
layout: {
|
||||
...state.layout,
|
||||
isFullscreen: value,
|
||||
showNav: shouldShowNav ? true : showNav,
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -105,12 +109,16 @@ export const init: ModuleFn = ({ store, provider }) => {
|
||||
togglePanel(toggled?: boolean) {
|
||||
return store.setState(
|
||||
(state: State) => {
|
||||
const { showNav, isFullscreen } = state.layout;
|
||||
|
||||
const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showPanel;
|
||||
const shouldToggleFullScreen = showNav === false && value === false;
|
||||
|
||||
return {
|
||||
layout: {
|
||||
...state.layout,
|
||||
showPanel: value,
|
||||
isFullscreen: shouldToggleFullScreen ? true : isFullscreen,
|
||||
},
|
||||
};
|
||||
},
|
||||
@ -145,12 +153,16 @@ export const init: ModuleFn = ({ store, provider }) => {
|
||||
toggleNav(toggled?: boolean) {
|
||||
return store.setState(
|
||||
(state: State) => {
|
||||
const { showPanel, isFullscreen } = state.layout;
|
||||
|
||||
const value = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
|
||||
const shouldToggleFullScreen = showPanel === false && value === false;
|
||||
|
||||
return {
|
||||
layout: {
|
||||
...state.layout,
|
||||
showNav: value,
|
||||
isFullscreen: shouldToggleFullScreen ? true : isFullscreen,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
@ -2,6 +2,7 @@ import { setInterval } from 'global';
|
||||
import React, { Component, FunctionComponent } from 'react';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Collection } from '@storybook/addons';
|
||||
import { State } from '@storybook/api';
|
||||
import { Sidebar, SidebarProps } from '../sidebar/Sidebar';
|
||||
import Panel from '../panel/panel';
|
||||
import { Preview } from '../preview/preview';
|
||||
@ -10,6 +11,27 @@ import { previewProps } from '../preview/preview.mockdata';
|
||||
import { mockDataset } from '../sidebar/mockdata';
|
||||
import { DesktopProps } from './desktop';
|
||||
|
||||
export const shortcuts: State['shortcuts'] = {
|
||||
fullScreen: ['F'],
|
||||
togglePanel: ['A'],
|
||||
panelPosition: ['D'],
|
||||
toggleNav: ['S'],
|
||||
toolbar: ['T'],
|
||||
search: ['/'],
|
||||
focusNav: ['1'],
|
||||
focusIframe: ['2'],
|
||||
focusPanel: ['3'],
|
||||
prevComponent: ['alt', 'ArrowUp'],
|
||||
nextComponent: ['alt', 'ArrowDown'],
|
||||
prevStory: ['alt', 'ArrowLeft'],
|
||||
nextStory: ['alt', 'ArrowRight'],
|
||||
shortcutsPage: ['ctrl', 'shift', ','],
|
||||
aboutPage: [','],
|
||||
escape: ['escape'],
|
||||
collapseAll: ['ctrl', 'shift', 'ArrowUp'],
|
||||
expandAll: ['ctrl', 'shift', 'ArrowDown'],
|
||||
};
|
||||
|
||||
export const panels: Collection = {
|
||||
test1: {
|
||||
title: 'Test 1',
|
||||
@ -148,6 +170,7 @@ export const realProps: DesktopProps = {
|
||||
actions={{ onSelect: () => {}, toggleVisibility: () => {}, togglePosition: () => {} }}
|
||||
selectedPanel="test2"
|
||||
panelPosition="bottom"
|
||||
shortcuts={shortcuts}
|
||||
absolute={false}
|
||||
/>
|
||||
),
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
import Panel from './panel';
|
||||
import { panels } from '../layout/app.mockdata';
|
||||
import { panels, shortcuts } from '../layout/app.mockdata';
|
||||
|
||||
const onSelect = action('onSelect');
|
||||
const toggleVisibility = action('toggleVisibility');
|
||||
@ -19,9 +18,14 @@ export const Default = () => (
|
||||
panels={panels}
|
||||
actions={{ onSelect, toggleVisibility, togglePosition }}
|
||||
selectedPanel="test2"
|
||||
shortcuts={shortcuts}
|
||||
/>
|
||||
);
|
||||
|
||||
export const NoPanels = () => (
|
||||
<Panel panels={{}} actions={{ onSelect, toggleVisibility, togglePosition }} />
|
||||
<Panel
|
||||
panels={{}}
|
||||
actions={{ onSelect, toggleVisibility, togglePosition }}
|
||||
shortcuts={shortcuts}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component, Fragment, ReactElement } from 'react';
|
||||
import { shortcutToHumanString } from '@storybook/api/shortcut';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { Tabs, Icons, IconButton } from '@storybook/components';
|
||||
import { State } from '@storybook/api';
|
||||
|
||||
const DesktopOnlyIconButton = styled(IconButton)({
|
||||
// Hides full screen icon at mobile breakpoint defined in app.js
|
||||
@ -47,40 +49,51 @@ const AddonPanel = React.memo<{
|
||||
selectedPanel?: string;
|
||||
actions: { onSelect: (id: string) => void } & Record<string, any>;
|
||||
panels: Record<string, any>;
|
||||
shortcuts: State['shortcuts'];
|
||||
panelPosition?: 'bottom' | 'right';
|
||||
absolute?: boolean;
|
||||
}>(({ panels, actions, selectedPanel = null, panelPosition = 'right', absolute = true }) => (
|
||||
<Tabs
|
||||
absolute={absolute}
|
||||
selected={selectedPanel}
|
||||
actions={actions}
|
||||
tools={
|
||||
<Fragment>
|
||||
<DesktopOnlyIconButton
|
||||
key="position"
|
||||
onClick={actions.togglePosition}
|
||||
title="Change orientation"
|
||||
>
|
||||
<Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
|
||||
</DesktopOnlyIconButton>
|
||||
<DesktopOnlyIconButton
|
||||
key="visibility"
|
||||
onClick={actions.toggleVisibility}
|
||||
title="Hide addons"
|
||||
>
|
||||
<Icons icon="close" />
|
||||
</DesktopOnlyIconButton>
|
||||
</Fragment>
|
||||
}
|
||||
id="storybook-panel-root"
|
||||
>
|
||||
{Object.entries(panels).map(([k, v]) => (
|
||||
<SafeTab key={k} id={k} title={v.title}>
|
||||
{v.render}
|
||||
</SafeTab>
|
||||
))}
|
||||
</Tabs>
|
||||
));
|
||||
}>(
|
||||
({
|
||||
panels,
|
||||
shortcuts,
|
||||
actions,
|
||||
selectedPanel = null,
|
||||
panelPosition = 'right',
|
||||
absolute = true,
|
||||
}) => (
|
||||
<Tabs
|
||||
absolute={absolute}
|
||||
selected={selectedPanel}
|
||||
actions={actions}
|
||||
tools={
|
||||
<Fragment>
|
||||
<DesktopOnlyIconButton
|
||||
key="position"
|
||||
onClick={actions.togglePosition}
|
||||
title={`Change addon orientation [${shortcutToHumanString(shortcuts.panelPosition)}]`}
|
||||
>
|
||||
<Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
|
||||
</DesktopOnlyIconButton>
|
||||
<DesktopOnlyIconButton
|
||||
key="visibility"
|
||||
onClick={actions.toggleVisibility}
|
||||
title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
|
||||
>
|
||||
<Icons icon="close" />
|
||||
</DesktopOnlyIconButton>
|
||||
</Fragment>
|
||||
}
|
||||
id="storybook-panel-root"
|
||||
>
|
||||
{Object.entries(panels).map(([k, v]) => (
|
||||
<SafeTab key={k} id={k} title={v.title}>
|
||||
{v.render}
|
||||
</SafeTab>
|
||||
))}
|
||||
</Tabs>
|
||||
)
|
||||
);
|
||||
|
||||
AddonPanel.displayName = 'AddonPanel';
|
||||
|
||||
export default AddonPanel;
|
||||
|
||||
@ -4,6 +4,7 @@ import { styled } from '@storybook/theming';
|
||||
|
||||
import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
|
||||
import { Consumer, Combo, API, Story, Group, State } from '@storybook/api';
|
||||
import { shortcutToHumanString } from '@storybook/api/shortcut';
|
||||
import { Addon, types } from '@storybook/addons';
|
||||
|
||||
import { Location, RenderData } from '@storybook/router';
|
||||
@ -40,6 +41,7 @@ export const Toolbar = styled(Bar)(
|
||||
const fullScreenMapper = ({ api, state }: Combo) => ({
|
||||
toggle: api.toggleFullscreen,
|
||||
value: state.layout.isFullscreen,
|
||||
shortcut: shortcutToHumanString(api.getShortcutKeys().fullScreen),
|
||||
});
|
||||
|
||||
export const fullScreenTool: Addon = {
|
||||
@ -47,12 +49,12 @@ export const fullScreenTool: Addon = {
|
||||
match: (p) => p.viewMode === 'story',
|
||||
render: () => (
|
||||
<Consumer filter={fullScreenMapper}>
|
||||
{({ toggle, value }) => (
|
||||
{({ toggle, value, shortcut }) => (
|
||||
<S.DesktopOnly>
|
||||
<IconButton
|
||||
key="full"
|
||||
onClick={toggle as any}
|
||||
title={value ? 'Exit full screen' : 'Go full screen'}
|
||||
title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
|
||||
>
|
||||
<Icons icon={value ? 'close' : 'expand'} />
|
||||
</IconButton>
|
||||
|
||||
@ -15,6 +15,7 @@ const mapper = ({ state, api }: Combo) => ({
|
||||
selectedPanel: api.getSelectedPanel(),
|
||||
panelPosition: state.layout.panelPosition,
|
||||
actions: createPanelActions(api),
|
||||
shortcuts: api.getShortcutKeys(),
|
||||
});
|
||||
|
||||
const Panel: FunctionComponent<any> = (props) => (
|
||||
|
||||
@ -164,7 +164,7 @@ export const sfcVue: Parameters = {
|
||||
additionalDeps: [
|
||||
'react',
|
||||
'react-dom',
|
||||
'webpack',
|
||||
'webpack@webpack-4',
|
||||
// TODO: remove when https://github.com/storybookjs/storybook/issues/11255 is solved
|
||||
'core-js',
|
||||
],
|
||||
@ -194,7 +194,7 @@ export const web_components: Parameters = {
|
||||
export const webpack_react: Parameters = {
|
||||
name: 'webpack_react',
|
||||
version: 'latest',
|
||||
generator: fromDeps('react', 'react-dom', 'webpack'),
|
||||
generator: fromDeps('react', 'react-dom', 'webpack@webpack-4'),
|
||||
};
|
||||
|
||||
export const react_in_yarn_workspace: Parameters = {
|
||||
|
||||
@ -362,6 +362,15 @@ if (frameworkArgs.length > 0) {
|
||||
// FIXME: For now Yarn 2 E2E tests must be run by explicitly call `yarn test:e2e-framework yarn2Cra@latest`
|
||||
// Because it is telling Yarn to use version 2
|
||||
delete e2eConfigs.yarn_2_cra;
|
||||
|
||||
// FIXME: Angular tests need to be explicitly run because they require Node 12.17+
|
||||
// See https://github.com/storybookjs/storybook/issues/12735
|
||||
delete e2eConfigs.angularv9;
|
||||
delete e2eConfigs.angular;
|
||||
|
||||
// CRA Bench is a special case of E2E tests, it requires Node 12 as `@storybook/bench` is using `@hapi/hapi@19.2.0`
|
||||
// which itself need Node 12.
|
||||
delete e2eConfigs.cra_bench;
|
||||
}
|
||||
|
||||
const perform = () => {
|
||||
|
||||
21
yarn.lock
21
yarn.lock
@ -7344,6 +7344,13 @@ ast-types@0.13.3, ast-types@^0.13.2:
|
||||
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.3.tgz#50da3f28d17bdbc7969a3a2d83a0e4a72ae755a7"
|
||||
integrity sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==
|
||||
|
||||
ast-types@^0.14.2:
|
||||
version "0.14.2"
|
||||
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
|
||||
integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==
|
||||
dependencies:
|
||||
tslib "^2.0.1"
|
||||
|
||||
ast-types@^0.7.0:
|
||||
version "0.7.8"
|
||||
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.7.8.tgz#902d2e0d60d071bdcd46dc115e1809ed11c138a9"
|
||||
@ -8206,6 +8213,15 @@ babel-plugin-react-docgen@^4.1.0:
|
||||
react-docgen "^5.0.0"
|
||||
recast "^0.14.7"
|
||||
|
||||
babel-plugin-react-docgen@^4.2.1:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz#7cc8e2f94e8dc057a06e953162f0810e4e72257b"
|
||||
integrity sha512-UQ0NmGHj/HAqi5Bew8WvNfCk8wSsmdgNd8ZdMjBCICtyCJCq9LiqgqvjCYe570/Wg7AQArSq1VQ60Dd/CHN7mQ==
|
||||
dependencies:
|
||||
ast-types "^0.14.2"
|
||||
lodash "^4.17.15"
|
||||
react-docgen "^5.0.0"
|
||||
|
||||
babel-plugin-require-context-hook@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz#3f0e7cce87c338f53639b948632fd4e73834632d"
|
||||
@ -32097,6 +32113,11 @@ tslib@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
|
||||
integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
|
||||
|
||||
tslib@^2.0.1:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
|
||||
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
|
||||
|
||||
tslint@^5.20.1:
|
||||
version "5.20.1"
|
||||
resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user