Merge branch 'next' into pr/B3zo0/5802

This commit is contained in:
Norbert de Langen 2019-03-02 19:17:06 +01:00
commit b05bc76c17
14 changed files with 137 additions and 135 deletions

View File

@ -51,7 +51,6 @@ addParameters({
options: {
hierarchySeparator: /\/|\./,
hierarchyRootSeparator: '|',
// theme: themes.dark,
},
viewports: {
...INITIAL_VIEWPORTS,

View File

@ -17,7 +17,7 @@ export default {
// Given we sort of control the props, should we export a prop type?
export const passed = ({
// eslint-disable-next-line react/prop-types
parameters,
parameters: { options, ...parameters },
}) => <pre>Parameters are {JSON.stringify(parameters, null, 2)}</pre>;
passed.title = 'passed to story';
passed.parameters = { storyParameter: 'storyParameter' };

View File

@ -5195,10 +5195,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
exports[`Storyshots Core|Parameters passed to story 1`] = `
<pre>
Parameters are {
"options": {
"hierarchyRootSeparator": "|",
"hierarchySeparator": {}
},
"a11y": {
"configure": {},
"options": {

View File

@ -56,7 +56,7 @@ export class PostmsgTransport {
});
}
const data = stringify({ key: KEY, event }, { maxDepth: 10 });
const data = stringify({ key: KEY, event }, { maxDepth: 15 });
// TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
// might replace '*' with document.location ?

View File

@ -9,6 +9,12 @@ import isEqual from 'lodash.isequal';
import light from './themes/light';
import { Theme } from './base';
const base = {
...light,
animation: {},
brand: {},
};
// merge with concatenating arrays, but no duplicates
const merge = (a: any, b: any) =>
mergeWith({}, a, b, (objValue: any, srcValue: any) => {
@ -32,7 +38,7 @@ export const ensure = (input: any): Theme => {
if (!input) {
return light;
} else {
const missing = deletedDiff(light, input);
const missing = deletedDiff(base, input);
if (Object.keys(missing).length) {
logger.warn(
stripIndent`

View File

@ -47,6 +47,7 @@
"react-resize-detector": "^3.2.1",
"recompose": "^0.30.0",
"semver": "^5.6.0",
"telejson": "^2.1.1",
"util-deprecate": "^1.0.2"
},
"devDependencies": {

View File

@ -270,7 +270,7 @@ class Layout extends Component {
constructor(props) {
super(props);
const { options } = this.props;
const { bounds, options } = props;
const { resizerNav, resizerPanel } = persistance.get();
@ -278,7 +278,10 @@ class Layout extends Component {
isDragging: false,
resizerNav: resizerNav || { x: 200, y: 0 },
resizerPanel:
resizerPanel || (options.panelPosition === 'bottom' ? { x: 0, y: 400 } : { x: 400, y: 0 }),
resizerPanel ||
(options.panelPosition === 'bottom'
? { x: 0, y: bounds.height - 400 }
: { x: bounds.width - 400, y: 0 }),
};
}
@ -323,7 +326,7 @@ class Layout extends Component {
}
}
if (isPanelRight && !isPanelHidden) {
if (bounds.width - 200 < panelX) {
if (bounds.width - 200 < panelX || panelX === 0) {
mutation.resizerPanel = {
x: bounds.width - 200,
y: 0,

View File

@ -22,14 +22,14 @@ export default ({ provider, store }) => {
return ensurePanel(api.getPanels(), selectedPanel, selectedPanel);
},
setSelectedPanel: panelName => {
store.setState({ selectedPanel: panelName });
store.setState({ selectedPanel: panelName }, { persistence: 'session' });
},
};
return {
api,
state: {
selectedPanel: ensurePanel(api.getPanels()),
selectedPanel: ensurePanel(api.getPanels(), store.getState().selectedPanel),
},
};
};

View File

@ -50,7 +50,6 @@ export class Provider extends Component {
// Initialize the state to be the initial (persisted) state of the store.
// This gives the modules the chance to read the persisted state, apply their defaults
// and override if necessary
this.state = store.getInitialState();
const apiData = {
navigate,
@ -62,6 +61,8 @@ export class Provider extends Component {
storyId,
};
this.state = store.getInitialState();
this.modules = [
initChannel,
initAddons,
@ -90,7 +91,9 @@ export class Provider extends Component {
api.on(SET_STORIES, data => {
api.setStories(data.stories);
const options = api.getParameters(storyId, 'options');
const options = storyId
? api.getParameters(storyId, 'options')
: api.getParameters(Object.keys(data.stories)[0], 'options');
api.setOptions(options);
});

View File

@ -1,86 +1,6 @@
import pick from 'lodash.pick';
import deprecate from 'util-deprecate';
import { create } from '@storybook/theming';
const deprecationMessage = (optionsMap, prefix) =>
`The options { ${Object.keys(optionsMap).join(', ')} } are deprecated -- use ${
prefix ? `${prefix}'s` : ''
} { ${Object.values(optionsMap).join(', ')} } instead.`;
const deprecatedThemeOptions = {
name: 'brandTitle',
url: 'brandUrl',
};
const applyDeprecatedThemeOptions = deprecate(({ name, url, theme }) => {
const vars = {
brandTitle: name,
brandUrl: url,
brandImage: null,
};
return { theme: create(vars, theme) };
}, deprecationMessage(deprecatedThemeOptions));
const checkDeprecatedThemeOptions = options => {
if (Object.keys(deprecatedThemeOptions).find(key => !!options[key])) {
return applyDeprecatedThemeOptions(options);
}
return {};
};
const deprecatedLayoutOptions = {
goFullScreen: 'isFullscreen',
showStoriesPanel: 'showNav',
showAddonPanel: 'showPanel',
addonPanelInRight: 'panelPosition',
};
const applyDeprecatedLayoutOptions = deprecate(options => {
const layoutUpdate = {};
['goFullScreen', 'showStoriesPanel', 'showAddonPanel'].forEach(option => {
if (typeof options[option] !== 'undefined') {
layoutUpdate[deprecatedLayoutOptions[option]] = options[option];
}
});
if (options.addonPanelInRight) {
layoutUpdate.panelPosition = 'right';
}
return layoutUpdate;
}, deprecationMessage(deprecatedLayoutOptions));
const checkDeprecatedLayoutOptions = options => {
if (Object.keys(deprecatedLayoutOptions).find(key => typeof options[key] !== 'undefined')) {
return applyDeprecatedLayoutOptions(options);
}
return {};
};
export default ({ provider, api, store }) => {
export default ({ provider, api }) => {
const providerAPI = {
...api,
setOptions: options => {
const { layout, ui, selectedPanel } = store.getState();
if (options) {
const updatedLayout = {
...layout,
...pick(options, Object.keys(layout)),
...checkDeprecatedLayoutOptions(options),
};
const updatedUi = {
...ui,
...pick(options, Object.keys(ui)),
...checkDeprecatedThemeOptions(options),
};
store.setState({
layout: updatedLayout,
ui: updatedUi,
selectedPanel: options.panel || options.selectedPanel || selectedPanel,
});
}
},
};
provider.handleAPI(providerAPI);

View File

@ -1,21 +1,6 @@
import { themes } from '@storybook/theming';
import merge from '../libs/merge';
const initial = {
ui: {
enableShortcuts: true,
sortStoriesByKind: false,
sidebarAnimations: true,
theme: themes.normal,
},
layout: {
isToolshown: true,
isFullscreen: false,
showPanel: true,
showNav: true,
panelPosition: 'bottom',
},
customQueryParams: {},
storiesConfigured: false,
};

View File

@ -1,3 +1,64 @@
import pick from 'lodash.pick';
import deprecate from 'util-deprecate';
import { create, themes } from '@storybook/theming';
import merge from '../libs/merge';
const deprecatedThemeOptions = {
name: 'brandTitle',
url: 'brandUrl',
};
const deprecatedLayoutOptions = {
goFullScreen: 'isFullscreen',
showStoriesPanel: 'showNav',
showAddonPanel: 'showPanel',
addonPanelInRight: 'panelPosition',
};
const deprecationMessage = (optionsMap, prefix) =>
`The options { ${Object.keys(optionsMap).join(', ')} } are deprecated -- use ${
prefix ? `${prefix}'s` : ''
} { ${Object.values(optionsMap).join(', ')} } instead.`;
const applyDeprecatedThemeOptions = deprecate(({ name, url, theme }) => {
const vars = {
brandTitle: name,
brandUrl: url,
brandImage: null,
};
return { theme: create(vars, theme) };
}, deprecationMessage(deprecatedThemeOptions));
const applyDeprecatedLayoutOptions = deprecate(options => {
const layoutUpdate = {};
['goFullScreen', 'showStoriesPanel', 'showAddonPanel'].forEach(option => {
if (typeof options[option] !== 'undefined') {
layoutUpdate[deprecatedLayoutOptions[option]] = options[option];
}
});
if (options.addonPanelInRight) {
layoutUpdate.panelPosition = 'right';
}
return layoutUpdate;
}, deprecationMessage(deprecatedLayoutOptions));
const checkDeprecatedThemeOptions = options => {
if (Object.keys(deprecatedThemeOptions).find(key => !!options[key])) {
return applyDeprecatedThemeOptions(options);
}
return {};
};
const checkDeprecatedLayoutOptions = options => {
if (Object.keys(deprecatedLayoutOptions).find(key => typeof options[key] !== 'undefined')) {
return applyDeprecatedLayoutOptions(options);
}
return {};
};
export default function({ store }) {
const api = {
toggleFullscreen(toggled) {
@ -69,7 +130,54 @@ export default function({ store }) {
};
});
},
setOptions: options => {
const { layout, ui, selectedPanel } = store.getState();
if (options) {
const updatedLayout = {
...layout,
...pick(options, Object.keys(layout)),
...checkDeprecatedLayoutOptions(options),
};
const updatedUi = {
...ui,
...pick(options, Object.keys(ui)),
...checkDeprecatedThemeOptions(options),
};
store.setState(
{
layout: updatedLayout,
ui: updatedUi,
selectedPanel: options.panel || options.selectedPanel || selectedPanel,
},
{ persistence: 'permanent' }
);
}
},
};
return { api };
const fromState = pick(store.getState(), 'layout', 'ui', 'selectedPanel');
const initial = {
ui: {
enableShortcuts: true,
sortStoriesByKind: false,
sidebarAnimations: true,
theme: themes.normal,
},
layout: {
isToolshown: true,
isFullscreen: false,
showPanel: true,
showNav: true,
panelPosition: 'bottom',
},
};
const state = merge(fromState, initial);
return { api, state };
}

View File

@ -1,16 +1,17 @@
// TODO -- make this TS?
import { localStorage, sessionStorage } from 'global';
import { parse, stringify } from 'telejson';
export const STORAGE_KEY = '@storybook/ui/store';
function get(storage) {
const serialized = storage.getItem(STORAGE_KEY);
return serialized ? JSON.parse(serialized) : {};
return serialized ? parse(serialized) : {};
}
function set(storage, value) {
storage.setItem(STORAGE_KEY, JSON.stringify(value));
storage.setItem(STORAGE_KEY, stringify(value, { maxDepth: 50 }));
}
function update(storage, patch) {

View File

@ -1,26 +1,6 @@
import mergeWith from 'lodash.mergewith';
import isEqual from 'lodash.isequal';
import { toId, sanitize } from '@storybook/router/utils';
const merge = (a, b) =>
mergeWith({}, a, b, (objValue, srcValue) => {
if (Array.isArray(srcValue) && Array.isArray(objValue)) {
srcValue.forEach(s => {
const existing = objValue.find(o => o === s || isEqual(o, s));
if (!existing) {
objValue.push(s);
}
});
return objValue;
}
if (Array.isArray(objValue)) {
// eslint-disable-next-line no-console
console.log('the types mismatch, picking', objValue);
return objValue;
}
return undefined;
});
import merge from '../libs/merge';
const initStoriesApi = ({
store,