mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 11:51:07 +08:00
Merge branch 'master' into fix-css-warning-in-angular-example
This commit is contained in:
Carlos Vega
GitHub
commit
7da0c7e688
@ -79,7 +79,7 @@ const createComponentFromTemplate = (template: string): Function => {
|
||||
const initModule = (
|
||||
currentStory: IGetStoryWithContext,
|
||||
context: IContext,
|
||||
reRender: boolean
|
||||
reRender: boolean = false,
|
||||
): Function => {
|
||||
const storyObj = currentStory(context);
|
||||
const { component, template, props, moduleMetadata = {} } = storyObj;
|
||||
@ -131,7 +131,7 @@ export const renderNgError = debounce((error: Error) => {
|
||||
const errorData = {
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
};
|
||||
} as NgProvidedData;
|
||||
|
||||
const Module = getModule([ErrorComponent], [], [ErrorComponent], errorData, {});
|
||||
|
||||
|
||||
@ -1,73 +1,5 @@
|
||||
// import webpack from 'webpack';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import { createDefaultWebpackConfig } from '@storybook/core/server';
|
||||
import { includePaths } from '../utils';
|
||||
|
||||
// Add a default custom config which is similar to what React Create App does.
|
||||
module.exports = storybookBaseConfig => {
|
||||
const newConfig = { ...storybookBaseConfig };
|
||||
|
||||
newConfig.module.rules = [
|
||||
...storybookBaseConfig.module.rules,
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
require.resolve('style-loader'),
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'), // eslint-disable-line
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('json-loader'),
|
||||
},
|
||||
{
|
||||
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('file-loader'),
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('url-loader'),
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
newConfig.resolve.alias = {
|
||||
...storybookBaseConfig.resolve.alias,
|
||||
// This is to support NPM2
|
||||
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
|
||||
};
|
||||
|
||||
// Return the altered config
|
||||
return newConfig;
|
||||
};
|
||||
module.exports = storybookBaseConfig =>
|
||||
createDefaultWebpackConfig(storybookBaseConfig, includePaths);
|
||||
|
||||
@ -2,6 +2,7 @@ import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
@ -13,7 +14,7 @@ export default function(configDir) {
|
||||
const config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: {
|
||||
manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
preview: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('./globals'),
|
||||
|
||||
@ -2,6 +2,7 @@ import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import babelLoaderConfig from './babel.prod';
|
||||
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
|
||||
@ -11,7 +12,7 @@ import { version } from '../../../package.json';
|
||||
export default function(configDir) {
|
||||
const entries = {
|
||||
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
|
||||
manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
};
|
||||
|
||||
const config = {
|
||||
|
||||
@ -1,17 +1 @@
|
||||
// import deprecate from 'util-deprecate';
|
||||
|
||||
// NOTE export these to keep backwards compatibility
|
||||
// import { action as deprecatedAction } from '@storybook/addon-actions';
|
||||
// import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
|
||||
|
||||
export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
|
||||
|
||||
// export const action = deprecate(
|
||||
// deprecatedAction,
|
||||
// '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/actions'
|
||||
// );
|
||||
|
||||
// export const linkTo = deprecate(
|
||||
// deprecatedLinkTo,
|
||||
// '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/links'
|
||||
// );
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
/* global document */
|
||||
|
||||
import renderStorybookUI from '@storybook/ui';
|
||||
import Provider from './provider';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
renderStorybookUI(rootEl, new Provider());
|
||||
@ -1,39 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
const iframeStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
};
|
||||
|
||||
class Preview extends Component {
|
||||
shouldComponentUpdate() {
|
||||
// When the manager is re-rendered, due to changes in the layout (going full screen / changing
|
||||
// addon panel to right) Preview section will update. If its re-rendered the whole html page
|
||||
// inside the html is re-rendered making the story to re-mount.
|
||||
// We dont have to re-render this component for any reason since changes are communicated to
|
||||
// story using the channel and necessary changes are done by it.
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<iframe
|
||||
id="storybook-preview-iframe"
|
||||
title="preview"
|
||||
style={iframeStyle}
|
||||
src={this.props.url}
|
||||
allowFullScreen
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Preview.propTypes = {
|
||||
url: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
@ -1,53 +0,0 @@
|
||||
import { location } from 'global';
|
||||
import qs from 'qs';
|
||||
import React from 'react';
|
||||
import { Provider } from '@storybook/ui';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-postmessage';
|
||||
import Preview from './preview';
|
||||
|
||||
export default class ReactProvider extends Provider {
|
||||
constructor() {
|
||||
super();
|
||||
this.channel = createChannel({ page: 'manager' });
|
||||
addons.setChannel(this.channel);
|
||||
|
||||
this.channel.emit('channelCreated');
|
||||
}
|
||||
|
||||
getPanels() {
|
||||
return addons.getPanels();
|
||||
}
|
||||
|
||||
renderPreview(selectedKind, selectedStory) {
|
||||
const queryParams = {
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
};
|
||||
|
||||
// Add the react-perf query string to the iframe if that present.
|
||||
if (/react_perf/.test(location.search)) {
|
||||
queryParams.react_perf = '1';
|
||||
}
|
||||
|
||||
const queryString = qs.stringify(queryParams);
|
||||
const url = `iframe.html?${queryString}`;
|
||||
return <Preview url={url} />;
|
||||
}
|
||||
|
||||
handleAPI(api) {
|
||||
api.onStory((kind, story) => {
|
||||
this.channel.emit('setCurrentStory', { kind, story });
|
||||
});
|
||||
this.channel.on('setStories', data => {
|
||||
api.setStories(data.stories);
|
||||
});
|
||||
this.channel.on('selectStory', data => {
|
||||
api.selectStory(data.kind, data.story);
|
||||
});
|
||||
this.channel.on('applyShortcut', data => {
|
||||
api.handleShortcut(data.event);
|
||||
});
|
||||
addons.loadAddons(api);
|
||||
}
|
||||
}
|
||||
@ -1,73 +1,5 @@
|
||||
// import webpack from 'webpack';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import { createDefaultWebpackConfig } from '@storybook/core/server';
|
||||
import { includePaths } from '../utils';
|
||||
|
||||
// Add a default custom config which is similar to what React Create App does.
|
||||
module.exports = storybookBaseConfig => {
|
||||
const newConfig = { ...storybookBaseConfig };
|
||||
|
||||
newConfig.module.rules = [
|
||||
...storybookBaseConfig.module.rules,
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
require.resolve('style-loader'),
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'), // eslint-disable-line
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('json-loader'),
|
||||
},
|
||||
{
|
||||
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('file-loader'),
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('url-loader'),
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
newConfig.resolve.alias = {
|
||||
...storybookBaseConfig.resolve.alias,
|
||||
// This is to support NPM2
|
||||
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
|
||||
};
|
||||
|
||||
// Return the altered config
|
||||
return newConfig;
|
||||
};
|
||||
module.exports = storybookBaseConfig =>
|
||||
createDefaultWebpackConfig(storybookBaseConfig, includePaths);
|
||||
|
||||
@ -3,6 +3,8 @@ import webpack from 'webpack';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import {
|
||||
getConfigDir,
|
||||
@ -20,7 +22,7 @@ export default function() {
|
||||
const config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: {
|
||||
manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
preview: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('./globals'),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import CopyWebpackPlugin from 'copy-webpack-plugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
import babelLoaderConfig from './babel.prod';
|
||||
import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
@ -10,7 +10,7 @@ import { version } from '../../../package.json';
|
||||
export default function() {
|
||||
const entries = {
|
||||
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
|
||||
manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
};
|
||||
|
||||
const config = {
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
/* global document */
|
||||
|
||||
import renderStorybookUI from '@storybook/ui';
|
||||
import Provider from './provider';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
renderStorybookUI(rootEl, new Provider());
|
||||
@ -1,39 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
const iframeStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
};
|
||||
|
||||
class Preview extends Component {
|
||||
shouldComponentUpdate() {
|
||||
// When the manager is re-rendered, due to changes in the layout (going full screen / changing
|
||||
// addon panel to right) Preview section will update. If its re-rendered the whole html page
|
||||
// inside the html is re-rendered making the story to re-mount.
|
||||
// We dont have to re-render this component for any reason since changes are communicated to
|
||||
// story using the channel and necessary changes are done by it.
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<iframe
|
||||
id="storybook-preview-iframe"
|
||||
title="preview"
|
||||
style={iframeStyle}
|
||||
src={this.props.url}
|
||||
allowFullScreen
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Preview.propTypes = {
|
||||
url: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
@ -1,53 +0,0 @@
|
||||
import { location } from 'global';
|
||||
import qs from 'qs';
|
||||
import React from 'react';
|
||||
import { Provider } from '@storybook/ui';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-postmessage';
|
||||
import Preview from './preview';
|
||||
|
||||
export default class ReactProvider extends Provider {
|
||||
constructor() {
|
||||
super();
|
||||
this.channel = createChannel({ page: 'manager' });
|
||||
addons.setChannel(this.channel);
|
||||
|
||||
this.channel.emit('channelCreated');
|
||||
}
|
||||
|
||||
getPanels() {
|
||||
return addons.getPanels();
|
||||
}
|
||||
|
||||
renderPreview(selectedKind, selectedStory) {
|
||||
const queryParams = {
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
};
|
||||
|
||||
// Add the react-perf query string to the iframe if that present.
|
||||
if (/react_perf/.test(location.search)) {
|
||||
queryParams.react_perf = '1';
|
||||
}
|
||||
|
||||
const queryString = qs.stringify(queryParams);
|
||||
const url = `iframe.html?${queryString}`;
|
||||
return <Preview url={url} />;
|
||||
}
|
||||
|
||||
handleAPI(api) {
|
||||
api.onStory((kind, story) => {
|
||||
this.channel.emit('setCurrentStory', { kind, story });
|
||||
});
|
||||
this.channel.on('setStories', data => {
|
||||
api.setStories(data.stories);
|
||||
});
|
||||
this.channel.on('selectStory', data => {
|
||||
api.selectStory(data.kind, data.story);
|
||||
});
|
||||
this.channel.on('applyShortcut', data => {
|
||||
api.handleShortcut(data.event);
|
||||
});
|
||||
addons.loadAddons(api);
|
||||
}
|
||||
}
|
||||
@ -1,73 +1,5 @@
|
||||
// import webpack from 'webpack';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import { createDefaultWebpackConfig } from '@storybook/core/server';
|
||||
import { includePaths } from '../utils';
|
||||
|
||||
// Add a default custom config which is similar to what React Create App does.
|
||||
module.exports = storybookBaseConfig => {
|
||||
const newConfig = { ...storybookBaseConfig };
|
||||
|
||||
newConfig.module.rules = [
|
||||
...storybookBaseConfig.module.rules,
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
require.resolve('style-loader'),
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'), // eslint-disable-line
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('json-loader'),
|
||||
},
|
||||
{
|
||||
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('file-loader'),
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('url-loader'),
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
newConfig.resolve.alias = {
|
||||
...storybookBaseConfig.resolve.alias,
|
||||
// This is to support NPM2
|
||||
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
|
||||
};
|
||||
|
||||
// Return the altered config
|
||||
return newConfig;
|
||||
};
|
||||
module.exports = storybookBaseConfig =>
|
||||
createDefaultWebpackConfig(storybookBaseConfig, includePaths);
|
||||
|
||||
@ -3,8 +3,9 @@ import webpack from 'webpack';
|
||||
import Dotenv from 'dotenv-webpack';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
import babelLoaderConfig from './babel';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
@ -14,7 +15,7 @@ export default function(configDir) {
|
||||
const config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: {
|
||||
manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
preview: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('./globals'),
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
import babelLoaderConfig from './babel.prod';
|
||||
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
@ -11,7 +10,7 @@ import { version } from '../../../package.json';
|
||||
export default function(configDir) {
|
||||
const entries = {
|
||||
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
|
||||
manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
};
|
||||
|
||||
const config = {
|
||||
|
||||
@ -1,17 +1 @@
|
||||
// import deprecate from 'util-deprecate';
|
||||
|
||||
// NOTE export these to keep backwards compatibility
|
||||
// import { action as deprecatedAction } from '@storybook/addon-actions';
|
||||
// import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
|
||||
|
||||
export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
|
||||
|
||||
// export const action = deprecate(
|
||||
// deprecatedAction,
|
||||
// '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/actions'
|
||||
// );
|
||||
|
||||
// export const linkTo = deprecate(
|
||||
// deprecatedLinkTo,
|
||||
// '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/links'
|
||||
// );
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
/* global document */
|
||||
|
||||
import renderStorybookUI from '@storybook/ui';
|
||||
import Provider from './provider';
|
||||
|
||||
const rootEl = document.getElementById('root');
|
||||
renderStorybookUI(rootEl, new Provider());
|
||||
@ -1,39 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
const iframeStyle = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
};
|
||||
|
||||
class Preview extends Component {
|
||||
shouldComponentUpdate() {
|
||||
// When the manager is re-rendered, due to changes in the layout (going full screen / changing
|
||||
// addon panel to right) Preview section will update. If its re-rendered the whole html page
|
||||
// inside the html is re-rendered making the story to re-mount.
|
||||
// We dont have to re-render this component for any reason since changes are communicated to
|
||||
// story using the channel and necessary changes are done by it.
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<iframe
|
||||
id="storybook-preview-iframe"
|
||||
title="preview"
|
||||
style={iframeStyle}
|
||||
src={this.props.url}
|
||||
allowFullScreen
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Preview.propTypes = {
|
||||
url: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Preview;
|
||||
@ -1,53 +0,0 @@
|
||||
import { location } from 'global';
|
||||
import qs from 'qs';
|
||||
import React from 'react';
|
||||
import { Provider } from '@storybook/ui';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-postmessage';
|
||||
import Preview from './preview';
|
||||
|
||||
export default class ReactProvider extends Provider {
|
||||
constructor() {
|
||||
super();
|
||||
this.channel = createChannel({ page: 'manager' });
|
||||
addons.setChannel(this.channel);
|
||||
|
||||
this.channel.emit('channelCreated');
|
||||
}
|
||||
|
||||
getPanels() {
|
||||
return addons.getPanels();
|
||||
}
|
||||
|
||||
renderPreview(selectedKind, selectedStory) {
|
||||
const queryParams = {
|
||||
selectedKind,
|
||||
selectedStory,
|
||||
};
|
||||
|
||||
// Add the react-perf query string to the iframe if that present.
|
||||
if (/react_perf/.test(location.search)) {
|
||||
queryParams.react_perf = '1';
|
||||
}
|
||||
|
||||
const queryString = qs.stringify(queryParams);
|
||||
const url = `iframe.html?${queryString}`;
|
||||
return <Preview url={url} />;
|
||||
}
|
||||
|
||||
handleAPI(api) {
|
||||
api.onStory((kind, story) => {
|
||||
this.channel.emit('setCurrentStory', { kind, story });
|
||||
});
|
||||
this.channel.on('setStories', data => {
|
||||
api.setStories(data.stories);
|
||||
});
|
||||
this.channel.on('selectStory', data => {
|
||||
api.selectStory(data.kind, data.story);
|
||||
});
|
||||
this.channel.on('applyShortcut', data => {
|
||||
api.handleShortcut(data.event);
|
||||
});
|
||||
addons.loadAddons(api);
|
||||
}
|
||||
}
|
||||
@ -1,73 +1,5 @@
|
||||
// import webpack from 'webpack';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import { createDefaultWebpackConfig } from '@storybook/core/server';
|
||||
import { includePaths } from '../utils';
|
||||
|
||||
// Add a default custom config which is similar to what React Create App does.
|
||||
module.exports = storybookBaseConfig => {
|
||||
const newConfig = { ...storybookBaseConfig };
|
||||
|
||||
newConfig.module.rules = [
|
||||
...storybookBaseConfig.module.rules,
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
require.resolve('style-loader'),
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'), // eslint-disable-line
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'>1%',
|
||||
'last 4 versions',
|
||||
'Firefox ESR',
|
||||
'not ie < 9', // React doesn't support IE8 anyway
|
||||
],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('json-loader'),
|
||||
},
|
||||
{
|
||||
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('file-loader'),
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('url-loader'),
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
newConfig.resolve.alias = {
|
||||
...storybookBaseConfig.resolve.alias,
|
||||
// This is to support NPM2
|
||||
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
|
||||
};
|
||||
|
||||
// Return the altered config
|
||||
return newConfig;
|
||||
};
|
||||
module.exports = storybookBaseConfig =>
|
||||
createDefaultWebpackConfig(storybookBaseConfig, includePaths);
|
||||
|
||||
@ -3,6 +3,8 @@ import webpack from 'webpack';
|
||||
import Dotenv from 'dotenv-webpack';
|
||||
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
|
||||
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
|
||||
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
@ -13,7 +15,7 @@ export default function(configDir) {
|
||||
const config = {
|
||||
devtool: 'cheap-module-source-map',
|
||||
entry: {
|
||||
manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
preview: [
|
||||
require.resolve('./polyfills'),
|
||||
require.resolve('./globals'),
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
|
||||
import { managerPath } from '@storybook/core/client';
|
||||
import babelLoaderConfig from './babel.prod';
|
||||
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
|
||||
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
|
||||
@ -11,7 +10,7 @@ import { version } from '../../../package.json';
|
||||
export default function(configDir) {
|
||||
const entries = {
|
||||
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
|
||||
manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
|
||||
manager: [require.resolve('./polyfills'), managerPath],
|
||||
};
|
||||
|
||||
const config = {
|
||||
|
||||
@ -1,2 +1,6 @@
|
||||
/* eslint-disable global-require */
|
||||
module.exports = require('./dist/client').default;
|
||||
const assign = require('babel-runtime/core-js/object/assign').default;
|
||||
const client = require('./dist/client').default;
|
||||
|
||||
module.exports = assign({}, client, {
|
||||
managerPath: require.resolve('./dist/client/manager'),
|
||||
});
|
||||
|
||||
@ -17,10 +17,25 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "^3.4.0-alpha.5",
|
||||
"@storybook/channel-postmessage": "^3.4.0-alpha.5",
|
||||
"@storybook/client-logger": "^3.4.0-alpha.5",
|
||||
"@storybook/ui": "^3.4.0-alpha.5",
|
||||
"autoprefixer": "^7.2.5",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"css-loader": "^0.28.9",
|
||||
"events": "^1.1.1",
|
||||
"file-loader": "^1.1.6",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.5.1"
|
||||
"json-loader": "^0.5.7",
|
||||
"postcss-flexbugs-fixes": "^3.2.0",
|
||||
"postcss-loader": "^2.0.10",
|
||||
"prop-types": "^15.5.10",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"style-loader": "^0.19.1",
|
||||
"qs": "^6.5.1",
|
||||
"url-loader": "^0.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0"
|
||||
|
||||
4
lib/core/server.js
Normal file
4
lib/core/server.js
Normal file
@ -0,0 +1,4 @@
|
||||
const assign = require('babel-runtime/core-js/object/assign').default;
|
||||
const defaultWebpackConfig = require('./dist/server/config/defaults/webpack.config');
|
||||
|
||||
module.exports = assign({}, defaultWebpackConfig);
|
||||
65
lib/core/src/server/config/defaults/webpack.config.js
Normal file
65
lib/core/src/server/config/defaults/webpack.config.js
Normal file
@ -0,0 +1,65 @@
|
||||
import autoprefixer from 'autoprefixer';
|
||||
|
||||
export function createDefaultWebpackConfig(storybookBaseConfig, includePaths) {
|
||||
const newConfig = { ...storybookBaseConfig };
|
||||
|
||||
newConfig.module.rules = [
|
||||
...storybookBaseConfig.module.rules,
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
require.resolve('style-loader'),
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
|
||||
plugins: () => [
|
||||
require('postcss-flexbugs-fixes'), // eslint-disable-line
|
||||
autoprefixer({
|
||||
browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
|
||||
flexbox: 'no-2009',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('json-loader'),
|
||||
},
|
||||
{
|
||||
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('file-loader'),
|
||||
query: {
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
|
||||
include: includePaths,
|
||||
loader: require.resolve('url-loader'),
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: 'static/media/[name].[hash:8].[ext]',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
newConfig.resolve.alias = {
|
||||
...storybookBaseConfig.resolve.alias,
|
||||
// This is to support NPM2
|
||||
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
|
||||
};
|
||||
|
||||
// Return the altered config
|
||||
return newConfig;
|
||||
}
|
||||
@ -11164,7 +11164,7 @@ postcss-flexbugs-fixes@3.2.0:
|
||||
dependencies:
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-flexbugs-fixes@^3.3.0:
|
||||
postcss-flexbugs-fixes@^3.2.0, postcss-flexbugs-fixes@^3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.3.0.tgz#e00849b536063749da50a0d410ba5d9ee65e27b8"
|
||||
dependencies:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user