Skip to content

Commit

Permalink
Merge pull request #9323 from storybookjs/manager-options
Browse files Browse the repository at this point in the history 
Official example: try moving options to `manager.js`
  • Loading branch information
@ndelangen
ndelangen authored Mar 2, 2020
2 parents e879b9e + a72a2a9 commit 5caf02e
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 34 deletions.
3 changes: 3 additions & 0 deletions examples/official-storybook/manager.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

import addHeadWarning from './head-warning';

addHeadWarning('manager-head-not-loaded', 'Manager head not loaded');

addons.setConfig({
showRoots: true,
theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
previewTabs: {
canvas: null,
'storybook/docs/panel': null,
Expand Down
2 changes: 0 additions & 2 deletions examples/official-storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,6 @@ addParameters({
},
},
options: {
showRoots: true,
theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
storySort: (a, b) =>
a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
},
Expand Down
6 changes: 4 additions & 2 deletions lib/api/src/lib/stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import { sanitize, parseKind } from '@storybook/csf';
import merge from './merge';
import { Provider } from '../init-provider-api';

export type StoryId = string;

Expand Down Expand Up @@ -124,7 +125,8 @@ const toGroup = (name: string) => ({

export const transformStoriesRawToStoriesHash = (
input: StoriesRaw,
base: StoriesHash
base: StoriesHash,
{ provider }: { provider: Provider }
): StoriesHash => {
const anyKindMatchesOldHierarchySeparators = Object.values(input).some(({ kind }) =>
kind.match(/\.|\|/)
Expand All @@ -136,7 +138,7 @@ export const transformStoriesRawToStoriesHash = (
hierarchyRootSeparator: rootSeparator = undefined,
hierarchySeparator: groupSeparator = undefined,
showRoots = undefined,
} = (parameters && parameters.options) || {};
} = { ...provider.getConfig(), ...((parameters && parameters.options) || {}) };

const usingShowRoots = typeof showRoots !== 'undefined';

Expand Down
4 changes: 3 additions & 1 deletion lib/api/src/modules/stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export interface SubAPI {
const initStoriesApi = ({
store,
navigate,
provider,
storyId: initialStoryId,
viewMode: initialViewMode,
}: Module) => {
Expand Down Expand Up @@ -160,7 +161,8 @@ const initStoriesApi = ({
// Now create storiesHash by reordering the above by group
const storiesHash: StoriesHash = transformStoriesRawToStoriesHash(
input,
(store.getState().storiesHash || {}) as StoriesHash
(store.getState().storiesHash || {}) as StoriesHash,
{ provider }
);
const settingsPageList = ['about', 'shortcuts'];
const { storyId, viewMode } = store.getState();
Expand Down
64 changes: 35 additions & 29 deletions lib/api/src/tests/stories.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ function createMockStore() {
};
}

const provider = {
getConfig() {
return {};
},
};

describe('stories API', () => {
it('sets a sensible initialState', () => {
const { state } = initStories({
Expand Down Expand Up @@ -64,13 +70,13 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);

const { storiesHash: storedStoriesHash } = store.getState();

// We need exact key ordering, even if in theory JS doens't guarantee it
// We need exact key ordering, even if in theory JS doesn't guarantee it
expect(Object.keys(storedStoriesHash)).toEqual([
'a',
'a--1',
Expand Down Expand Up @@ -177,7 +183,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

const showRootsParameters = { options: { showRoots: true } };
setStories({
Expand Down Expand Up @@ -222,7 +228,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

const showRootsParameters = { options: { showRoots: true } };
setStories({
Expand Down Expand Up @@ -260,7 +266,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories({
'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' },
Expand Down Expand Up @@ -349,7 +355,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories({
'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' },
Expand Down Expand Up @@ -382,7 +388,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).toHaveBeenCalledWith('/story/a--1');
Expand All @@ -397,7 +403,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).toHaveBeenCalledWith('/story/a--1');
Expand All @@ -412,7 +418,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).toHaveBeenCalledWith('/story/b-c--1');
Expand All @@ -427,7 +433,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).toHaveBeenCalledWith('/story/b-d--1');
Expand All @@ -442,7 +448,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).not.toHaveBeenCalled();
Expand All @@ -457,7 +463,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).toHaveBeenCalledWith('/settings/about');
Expand All @@ -475,7 +481,7 @@ describe('stories API', () => {

const {
api: { setStories },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

setStories(storiesHash);
expect(navigate).toHaveBeenCalledWith('/story/a--1');
Expand All @@ -491,7 +497,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToStory },
state,
} = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -506,7 +512,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToStory },
state,
} = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -521,7 +527,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToStory },
state,
} = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -536,7 +542,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToStory },
state,
} = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -550,7 +556,7 @@ describe('stories API', () => {

const {
api: { jumpToStory },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

jumpToStory(1);
expect(navigate).not.toHaveBeenCalled();
Expand All @@ -565,7 +571,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToComponent },
state,
} = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -580,7 +586,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToComponent },
state,
} = initStories({ store, navigate, storyId: 'b-c--1', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'b-c--1', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -595,7 +601,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToComponent },
state,
} = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -610,7 +616,7 @@ describe('stories API', () => {
const {
api: { setStories, jumpToComponent },
state,
} = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story' });
} = initStories({ store, navigate, storyId: 'a--2', viewMode: 'story', provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -628,7 +634,7 @@ describe('stories API', () => {

const {
api: { selectStory },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

selectStory('a--2');
expect(navigate).toHaveBeenCalledWith('/story/a--2');
Expand All @@ -642,7 +648,7 @@ describe('stories API', () => {

const {
api: { selectStory },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

selectStory('a', '2');
expect(navigate).toHaveBeenCalledWith('/story/a--2');
Expand All @@ -656,7 +662,7 @@ describe('stories API', () => {

const {
api: { selectStory },
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });

selectStory(null, '2');
expect(navigate).toHaveBeenCalledWith('/story/a--2');
Expand All @@ -669,7 +675,7 @@ describe('stories API', () => {
const {
api: { selectStory, setStories },
state,
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -685,7 +691,7 @@ describe('stories API', () => {
const {
api: { selectStory, setStories },
state,
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -700,7 +706,7 @@ describe('stories API', () => {
const {
api: { selectStory, setStories },
state,
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });
store.setState(state);
setStories(storiesHash);

Expand All @@ -715,7 +721,7 @@ describe('stories API', () => {
const {
api: { selectStory, setStories },
state,
} = initStories({ store, navigate });
} = initStories({ store, navigate, provider });
store.setState(state);
setStories(storiesHash);

Expand Down

0 comments on commit 5caf02e

Please sign in to comment.