未验证 提交 efbf470d 编写于 作者: N Norbert de Langen

Merge branch 'next' into tech/overhaul-ui

# Conflicts:
#	CHANGELOG.md
#	addons/actions/package.json
#	addons/backgrounds/package.json
#	addons/notes/package.json
#	addons/storyshots/storyshots-core/package.json
#	addons/storyshots/storyshots-puppeteer/package.json
#	examples/cra-kitchen-sink/.storybook/config.js
#	examples/cra-kitchen-sink/src/stories/index.stories.js
#	lib/addons/package.json
#	lib/channel-websocket/package.json
#	lib/components/package.json
#	lib/components/src/addon_panel/__snapshots__/index.stories.storyshot
#	lib/components/src/header/__snapshots__/header.stories.storyshot
#	lib/components/src/layout/__snapshots__/index.stories.storyshot
#	lib/components/src/theme.js
#	lib/ui/package.json
#	lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
#	lib/ui/src/modules/ui/components/stories_panel/__snapshots__/text_filter.stories.storyshot
#	lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
#	lib/ui/src/modules/ui/configs/handle_routing.js
#	yarn.lock
......@@ -17,7 +17,7 @@ module.exports = {
],
env: {
test: {
plugins: ['babel-plugin-require-context-hook'],
plugins: ['babel-plugin-require-context-hook', 'babel-plugin-dynamic-import-node'],
},
},
overrides: [
......
......@@ -15,6 +15,7 @@
|[links](addons/links) |+|+|+|+|+|+|+| |+|+|+|
|[notes](addons/notes) |+|+*|+|+|+|+|+| |+|+|+|
|[options](addons/options) |+|+|+|+|+|+|+| |+|+|+|
|[cssresources](addons/cssresources) |+| |+|+|+|+|+|+|+|+|+|
|[storyshots](addons/storyshots) |+|+|+|+| | |+| |+|+| |
|[storysource](addons/storysource) |+| |+|+|+|+|+|+|+|+|+|
|[viewport](addons/viewport) |+| |+|+|+|+|+|+|+|+|+|
......
此差异已折叠。
The MIT License (MIT)
Copyright (c) 2018 Norbert de Langen ndelangen@me.com
Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
......@@ -77,7 +77,7 @@ It runs a codemod to update all package names. Read all migration details in our
For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)
For additional help, join us [in our Discord](https://discord.gg/sMFvFsG/) or [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
## Projects
......@@ -110,6 +110,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG/) or [S
| [actions](addons/actions/) | Log actions as users interact with components in the Storybook UI |
| [backgrounds](addons/backgrounds/) | Let users choose backgrounds in the Storybook UI |
| [centered](addons/centered/) | Center the alignment of your components within the Storybook UI |
| [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe |
| [events](addons/events/) | Interactively fire events to components that respond to EventEmitter |
| [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories |
| [google-analytics](addons/google-analytics) | Reports google analytics on stories |
......
# storybook-addon-a11y
This storybook addon can be helpfull to make your UI components more accessibile.
This storybook addon can be helpful to make your UI components more accessible.
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
......
{
"name": "@storybook/addon-a11y",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
......@@ -29,10 +29,10 @@
},
"dependencies": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/client-logger": "4.1.0-alpha.3",
"@storybook/components": "4.1.0-alpha.3",
"@storybook/core-events": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/client-logger": "4.1.0-alpha.8",
"@storybook/components": "4.1.0-alpha.8",
"@storybook/core-events": "4.1.0-alpha.8",
"axe-core": "^3.1.2",
"global": "^4.3.2",
"prop-types": "^15.6.2"
......
{
"name": "@storybook/addon-actions",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
......@@ -26,9 +26,9 @@
"@emotion/core": "^0.13.1",
"@emotion/provider": "^0.11.2",
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/components": "4.1.0-alpha.3",
"@storybook/core-events": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/components": "4.1.0-alpha.8",
"@storybook/core-events": "4.1.0-alpha.8",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",
"lodash": "^4.17.11",
......
{
"name": "@storybook/addon-backgrounds",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
......@@ -28,9 +28,9 @@
},
"dependencies": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/components": "4.1.0-alpha.3",
"@storybook/core-events": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/components": "4.1.0-alpha.8",
"@storybook/core-events": "4.1.0-alpha.8",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"
......
{
"name": "@storybook/addon-centered",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
......
# Storybook Addon Cssresources
Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
![Storybook Addon Cssresources Demo](docs/demo.gif)
## Installation
```sh
yarn add -D @storybook/addon-cssresources
```
## Configuration
Then create a file called `addons.js` in your storybook config.
Add following content to it:
```js
import '@storybook/addon-cssresources/register';
```
## Usage
You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon ui:
```js
// Import from @storybook/X where X is your framework
import { configure, addDecorator, storiesOf } from '@storybook/react';
import { withCssResources } from '@storybook/addon-cssresources';
// global
addDecorator(
withCssResources({
cssresources: [{
name: `bluetheme`,
code: `<style>body { background-color: lightblue; }</style>`,
picked: false,
},
],
})
);
// per story
storiesOf('Addons|Cssresources', module)
.addDecorator(
withCssResources({
cssresources: [{
name: `fontawesome`,
code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
picked: true,
}, {
name: `whitetheme`,
code: `<style>.fa { color: #fff }</style>`,
picked: true,
},
],
})
)
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
```
{
"name": "@storybook/addon-cssresources",
"version": "4.1.0-alpha.8",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
"cssresources",
"react",
"storybook"
],
"homepage": "https://storybook.js.org",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"license": "MIT",
"author": "nm123github",
"main": "dist/index.js",
"jsnext:main": "src/index.js",
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@emotion/styled": "0.10.6",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/components": "4.1.0-alpha.8",
"@storybook/core-events": "4.1.0-alpha.8",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"react-syntax-highlighter": "^10.0.0",
"util-deprecate": "^1.0.2"
},
"peerDependencies": {
"react": "*"
}
}
require('./dist/register.js');
import { document, DOMParser } from 'global';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { monoFonts } from '@storybook/components';
import styled from '@emotion/styled';
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
SyntaxHighlighter.registerLanguage('css', css);
const storybookIframe = 'storybook-preview-iframe';
const addedElAttr = 'addedbycssresourcesaddon';
// Taken from StoryPanel.js
const highlighterTheme = {
...darcula,
'pre[class*="language-"]': {
...darcula['pre[class*="language-"]'],
margin: 'auto',
width: 'auto',
height: 'auto',
minHeight: '100%',
overflow: 'hidden',
boxSizing: 'border-box',
display: 'flex',
fontFamily: monoFonts.fontFamily,
fontSize: 'inherit',
},
'code[class*="language-"]': {
...darcula['code[class*="language-"]'],
margin: 0,
fontFamily: 'inherit',
},
};
const PanelWrapper = styled.div({
position: 'absolute',
top: '10px',
left: '10px',
fontFamily: monoFonts.fontFamily,
});
export default class CssResourcePanel extends Component {
constructor(props) {
super(props);
this.state = { cssresources: `` };
this.onAddCssresources = this.onAddCssresources.bind(this);
this.parser = new DOMParser();
}
componentDidMount() {
const { channel } = this.props;
this.iframe = document.getElementById(storybookIframe);
if (!this.iframe) {
throw new Error('Cannot find Storybook iframe');
}
channel.on('storybook/resources/add_cssresources', this.onAddCssresources);
}
componentWillUnmount() {
const { channel } = this.props;
channel.removeListener('storybook/resources/add_cssresources', this.onAddCssresources);
}
onAddCssresources(cssresources) {
this.loadCssresources(cssresources.filter(res => res.picked));
this.setState(prevState => ({ ...prevState, cssresources }));
}
handleChange(i, { target }) {
const { channel } = this.props;
const { cssresources = [] } = this.state;
cssresources[i].picked = target.checked;
channel.emit('storybook/resources/add_cssresources', cssresources);
}
loadCssresources(cssresources) {
// remove previously added elements!
this.iframe.contentDocument.head.querySelectorAll(`[${addedElAttr}]`).forEach(eL => {
if (eL) {
eL.parentNode.removeChild(eL);
}
});
// add new elements!
const str = cssresources.map(res => res.code).join('');
const parsedHtml = this.parser.parseFromString(str, 'text/html');
const elements = parsedHtml.querySelectorAll('head > *');
elements.forEach(eL => {
// add addedElAttr to css elements
eL.setAttribute(addedElAttr, '');
this.iframe.contentDocument.head.appendChild(eL);
});
}
render() {
const { cssresources = [] } = this.state;
const { active } = this.props;
if (!active) {
return null;
}
return (
<PanelWrapper className="addon-cssresources-container">
{cssresources &&
cssresources.map(({ name, code, picked }, i) => (
<div key={name} style={{ padding: 10 }}>
<div style={{ fontSize: '1.1em', marginBottom: 10 }}>
<input
id={`cssresource${i}`}
style={{ fontSize: '1.5em' }}
type="checkbox"
checked={picked}
onChange={this.handleChange.bind(this, i)}
/>
<label htmlFor={`cssresource${i}`}>#{name}</label>
</div>
<SyntaxHighlighter
language="css"
style={highlighterTheme}
customStyle={{ opacity: picked ? 1 : 0.5 }}
>
{code}
</SyntaxHighlighter>
</div>
))}
</PanelWrapper>
);
}
}
CssResourcePanel.propTypes = {
active: PropTypes.bool.isRequired,
channel: PropTypes.shape({
on: PropTypes.func,
emit: PropTypes.func,
removeListener: PropTypes.func,
}).isRequired,
api: PropTypes.shape({
onStory: PropTypes.func,
getQueryParam: PropTypes.func,
setQueryParams: PropTypes.func,
}).isRequired,
};
import addons, { makeDecorator } from '@storybook/addons';
export const withCssResources = makeDecorator({
name: 'withCssResources',
parameterName: 'cssresources',
skipIfNoParametersOrOptions: true,
allowDeprecatedUsage: false,
wrapper: (getStory, context, { options, parameters }) => {
const channel = addons.getChannel();
const storyOptions = parameters || options;
if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) {
throw new Error('The `cssresources` parameter needs to be an Array');
}
channel.emit(
'storybook/resources/add_cssresources',
Array.isArray(storyOptions) ? storyOptions : storyOptions.cssresources
);
return getStory(context);
},
});
import React from 'react';
import addons from '@storybook/addons';
import CssResourcePanel from './CssResourcePanel';
addons.register('storybook/cssresources', api => {
const channel = addons.getChannel();
addons.addPanel('storybook/cssresources/panel', {
title: 'Cssresources',
// eslint-disable-next-line react/prop-types
render: ({ active }) => <CssResourcePanel channel={channel} api={api} active={active} />,
});
});
{
"name": "@storybook/addon-events",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
......@@ -27,8 +27,8 @@
},
"dependencies": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/core-events": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/core-events": "4.1.0-alpha.8",
"format-json": "^1.0.3",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4",
......
{
"name": "@storybook/addon-google-analytics",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
......@@ -24,7 +24,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"global": "^4.3.2",
"react-ga": "^2.5.3"
}
......
{
"name": "@storybook/addon-graphql",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
......
{
"name": "@storybook/addon-info",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
......@@ -25,9 +25,9 @@
},
"dependencies": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/client-logger": "4.1.0-alpha.3",
"@storybook/components": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/client-logger": "4.1.0-alpha.8",
"@storybook/components": "4.1.0-alpha.8",
"core-js": "2.5.7",
"global": "^4.3.2",
"marksy": "^6.1.0",
......
......@@ -257,7 +257,7 @@ class Story extends Component {
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
if (STORYBOOK_REACT_CLASSES[key].name === context.story) {
if (STORYBOOK_REACT_CLASSES[key].name === context.kind) {
retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>;
}
});
......
......@@ -23,6 +23,16 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
</div>);
/* eslint-enable */
const reactClassPath = 'some/path/TestComponent.jsx';
const storybookReactClassMock = {
name: 'TestComponent',
path: reactClassPath,
docgenInfo: {
description: 'Awesome test component description',
name: 'TestComponent',
},
};
const testOptions = { propTables: false };
const testMarkdown = `# Test story
......@@ -63,4 +73,19 @@ describe('addon Info', () => {
const Info = withInfo()(storyFn);
mount(<Info />);
});
it('should render component description', () => {
const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
const Info = () =>
withInfo({ inline: true, propTables: false })(storyFn, {
kind: 'TestComponent',
story: 'Basic test',
});
expect(mount(<Info />)).toMatchSnapshot();
Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
});
});
{
"name": "@storybook/addon-jest",
"version": "4.1.0-alpha.3",
"version": "4.1.0-alpha.8",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
......@@ -31,8 +31,8 @@
},
"dependencies": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.0-alpha.3",
"@storybook/components": "4.1.0-alpha.3",
"@storybook/addons": "4.1.0-alpha.8",
"@storybook/components": "4.1.0-alpha.8",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"upath": "^1.1.0",
......
......@@ -377,8 +377,8 @@ stories.addDecorator(withKnobs)
stories.add('story name', () => ..., {
knobs: {
timestamps: true, // Doesn't emit events while user is typing.
escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default in storybook for Vue, Angular, and Polymer, because those frameworks allow rendering plain HTML.
// You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app.
escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
// You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app.
}