mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
Merge branch 'release/3.3' into 1624-viewport-addon
This commit is contained in:
Filipp Riabchun
GitHub
commit
badc57f21b
@ -72,7 +72,7 @@ module.exports = {
|
||||
'jsx-a11y/accessible-emoji': ignore,
|
||||
'jsx-a11y/href-no-hash': ignore,
|
||||
'jsx-a11y/label-has-for': ignore,
|
||||
'jsx-a11y/anchor-is-valid': ['warn', { aspects: ['invalidHref'] }],
|
||||
'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }],
|
||||
'react/no-unescaped-entities': ignore,
|
||||
},
|
||||
};
|
||||
|
||||
@ -37,7 +37,7 @@ Here's an example of using Notes and Info in 3.2 with the new API.
|
||||
storiesOf('composition', module)
|
||||
.add('new addons api',
|
||||
withInfo('see Notes panel for composition info')(
|
||||
withNotes({ notes: 'Composition: Info(Notes())' })(context =>
|
||||
withNotes({ text: 'Composition: Info(Notes())' })(context =>
|
||||
<MyComponent name={context.story} />
|
||||
)
|
||||
)
|
||||
|
||||
@ -9,15 +9,6 @@ export default function(publicPath, options) {
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Storybook for React</title>
|
||||
<style>
|
||||
/*
|
||||
When resizing panels, the drag event breaks if the cursor
|
||||
moves over the iframe. Add the 'dragging' class to the body
|
||||
at drag start and remove it when the drag ends.
|
||||
*/
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Styling the fuzzy search box placeholders */
|
||||
.searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #ddd;
|
||||
|
||||
@ -40,15 +40,6 @@ export default function({ assets, publicPath, headHtml }) {
|
||||
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
|
||||
<title>Storybook</title>
|
||||
<style>
|
||||
/*
|
||||
When resizing panels, the drag event breaks if the cursor
|
||||
moves over the iframe. Add the 'dragging' class to the body
|
||||
at drag start and remove it when the drag ends.
|
||||
*/
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Styling the fuzzy search box placeholders */
|
||||
.searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #ddd;
|
||||
|
||||
@ -40,15 +40,6 @@ export default function({ assets, publicPath, headHtml }) {
|
||||
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
|
||||
<title>Storybook</title>
|
||||
<style>
|
||||
/*
|
||||
When resizing panels, the drag event breaks if the cursor
|
||||
moves over the iframe. Add the 'dragging' class to the body
|
||||
at drag start and remove it when the drag ends.
|
||||
*/
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Styling the fuzzy search box placeholders */
|
||||
.searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #ddd;
|
||||
|
||||
@ -101,3 +101,7 @@ This addon lets you navigate different versions of static Storybook builds. As s
|
||||
### [Apollo](https://github.com/abhiaiyer91/apollo-storybook-decorator)
|
||||
|
||||
Wrap your stories with the Apollo client for mocking GraphQL queries/mutations.
|
||||
|
||||
### [Screenshot](https://github.com/tsuyoshiwada/storybook-chrome-screenshot)
|
||||
|
||||
Save the screenshot image of your stories. via [Puppeteer](https://github.com/GoogleChrome/puppeteer).
|
||||
|
||||
@ -174,7 +174,7 @@ storiesOf('Addon Notes', module)
|
||||
.add(
|
||||
'Note with HTML',
|
||||
withNotes({
|
||||
notes: `
|
||||
text: `
|
||||
<h2>My notes on emojies</h2>
|
||||
|
||||
<em>It's not all that important to be honest, but..</em>
|
||||
|
||||
@ -39,7 +39,8 @@ module.exports = function detect(options) {
|
||||
|
||||
if (
|
||||
(packageJson.dependencies && packageJson.dependencies.vue) ||
|
||||
(packageJson.devDependencies && packageJson.devDependencies.vue)
|
||||
(packageJson.devDependencies && packageJson.devDependencies.vue) ||
|
||||
(packageJson.devDependencies && packageJson.devDependencies.nuxt)
|
||||
) {
|
||||
return types.VUE;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { document, localStorage, window } from 'global';
|
||||
import { localStorage, window } from 'global';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import SplitPane from 'react-split-pane';
|
||||
@ -78,6 +78,15 @@ const fullScreenPreviewStyle = {
|
||||
overflow: 'hidden',
|
||||
};
|
||||
|
||||
const overlayStyle = isDragging => ({
|
||||
display: isDragging ? 'block' : 'none',
|
||||
position: 'absolute',
|
||||
top: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
left: '0px',
|
||||
});
|
||||
|
||||
const defaultSizes = {
|
||||
addonPanel: {
|
||||
down: 200,
|
||||
@ -89,10 +98,6 @@ const defaultSizes = {
|
||||
},
|
||||
};
|
||||
|
||||
const onDragStart = () => document.body.classList.add('dragging');
|
||||
|
||||
const onDragEnd = () => document.body.classList.remove('dragging');
|
||||
|
||||
const saveSizes = sizes => {
|
||||
try {
|
||||
localStorage.setItem('panelSizes', JSON.stringify(sizes));
|
||||
@ -129,9 +134,12 @@ class Layout extends React.Component {
|
||||
height: 0,
|
||||
width: 0,
|
||||
},
|
||||
isDragging: false,
|
||||
};
|
||||
|
||||
this.onResize = this.onResize.bind(this);
|
||||
this.onDragStart = this.onDragStart.bind(this);
|
||||
this.onDragEnd = this.onDragEnd.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -142,6 +150,14 @@ class Layout extends React.Component {
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
}
|
||||
|
||||
onDragStart() {
|
||||
this.setState({ isDragging: true });
|
||||
}
|
||||
|
||||
onDragEnd() {
|
||||
this.setState({ isDragging: false });
|
||||
}
|
||||
|
||||
onResize(pane, mode) {
|
||||
return size => {
|
||||
this.layerSizes[pane][mode] = size;
|
||||
@ -200,8 +216,8 @@ class Layout extends React.Component {
|
||||
size={showStoriesPanel ? storiesPanelDefaultSize : 1}
|
||||
defaultSize={storiesPanelDefaultSize}
|
||||
resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)}
|
||||
onDragStarted={onDragStart}
|
||||
onDragFinished={onDragEnd}
|
||||
onDragStarted={this.onDragStart}
|
||||
onDragFinished={this.onDragEnd}
|
||||
onChange={this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left')}
|
||||
>
|
||||
{conditionalRender(
|
||||
@ -225,11 +241,17 @@ class Layout extends React.Component {
|
||||
size={showAddonPanel ? addonPanelDefaultSize : 1}
|
||||
defaultSize={addonPanelDefaultSize}
|
||||
resizerStyle={addonResizerStyle(showAddonPanel, addonPanelInRight)}
|
||||
onDragStarted={onDragStart}
|
||||
onDragFinished={onDragEnd}
|
||||
onDragStarted={this.onDragStart}
|
||||
onDragFinished={this.onDragEnd}
|
||||
onChange={this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down')}
|
||||
>
|
||||
<div style={contentPanelStyle(addonPanelInRight, storiesPanelOnTop)}>
|
||||
{/*
|
||||
When resizing panels, the drag event breaks if the cursor
|
||||
moves over the iframe. Show an overlay div over iframe
|
||||
at drag start and hide it when the drag ends.
|
||||
*/}
|
||||
<div style={overlayStyle(this.state.isDragging)} />
|
||||
<div
|
||||
style={previewStyle}
|
||||
ref={ref => {
|
||||
|
||||
@ -9,10 +9,10 @@
|
||||
"bootstrap": "./scripts/bootstrap.js",
|
||||
"bootstrap:core": "lerna bootstrap --concurrency 1 --npm-client=\"yarn\" --hoist && node ./scripts/hoist-internals.js",
|
||||
"bootstrap:docs": "cd docs && yarn install",
|
||||
"bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npm install",
|
||||
"bootstrap:crna-kitchen-sink": "lerna exec --scope crna-kitchen-sink -- npm install",
|
||||
"bootstrap:react-native-vanilla": "npm --prefix examples/react-native-vanilla install",
|
||||
"bootstrap:crna-kitchen-sink": "npm --prefix examples/crna-kitchen-sink install",
|
||||
"build-packs": "lerna exec --scope '@storybook/*' --parallel -- ../../scripts/build-pack.sh ../../packs",
|
||||
"start": "lerna run --stream --scope cra-kitchen-sink storybook",
|
||||
"start": "npm --prefix examples/cra-kitchen-sink run storybook",
|
||||
"changelog": "pr-log --sloppy",
|
||||
"precommit": "lint-staged",
|
||||
"coverage": "codecov",
|
||||
@ -48,7 +48,7 @@
|
||||
"eslint-config-airbnb": "^15.1.0",
|
||||
"eslint-config-prettier": "^2.3.0",
|
||||
"eslint-plugin-import": "^2.7.0",
|
||||
"eslint-plugin-jest": "^20.0.3",
|
||||
"eslint-plugin-jest": "^21.0.0",
|
||||
"eslint-plugin-json": "^1.2.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.0.2",
|
||||
"eslint-plugin-prettier": "^2.1.2",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user