From dbb04c13388b2abae027967664d4286b3522146d Mon Sep 17 00:00:00 2001 From: igor Date: Mon, 26 Jun 2017 19:48:06 +0300 Subject: [PATCH] Repalce resolveStoryHierarchy func with hierarchySeparator --- .../cra-kitchen-sink/.storybook/config.js | 2 +- .../cra-kitchen-sink/src/stories/index.js | 6 ++--- lib/ui/example/client/provider.js | 2 +- lib/ui/src/modules/api/index.js | 2 +- .../ui/components/left_panel/stories.test.js | 10 ++++----- .../src/modules/ui/containers/left_panel.js | 10 ++++----- .../modules/ui/containers/left_panel.test.js | 3 --- lib/ui/src/modules/ui/libs/hierarchy.js | 12 ++++++++-- lib/ui/src/modules/ui/libs/hierarchy.test.js | 22 +++++++++++++++---- 9 files changed, 43 insertions(+), 26 deletions(-) diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js index cd396ec6355..d1ed2253124 100644 --- a/examples/cra-kitchen-sink/.storybook/config.js +++ b/examples/cra-kitchen-sink/.storybook/config.js @@ -11,7 +11,7 @@ setOptions({ showSearchBox: false, downPanelInRight: true, sortStoriesByKind: false, - resolveStoryHierarchy: (storyName) => storyName.split('.'), + hierarchySeparator: '\\/|\\.|¯\\\\_\\(ツ\\)_\\/¯' }); setAddon(infoAddon); diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js index b36b36fbc2f..9d9f2c9ba2c 100644 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ b/examples/cra-kitchen-sink/src/stories/index.js @@ -177,16 +177,16 @@ storiesOf('component.Button') // Atomic -storiesOf('Atoms.Molecules.Cells.simple', module) +storiesOf('Atoms¯\\_(ツ)_/¯Molecules.Cells/simple', module) .addDecorator(withKnobs) .add('with text', () => ) .add('with some emoji', () => ); -storiesOf('Atoms.Molecules.Cells.more', module) +storiesOf('Atoms/Molecules/Cells.more', module) .add('with text2', () => ) .add('with some emoji2', () => ); -storiesOf('Atoms.Molecules', module) +storiesOf('Atoms/Molecules', module) .add('with text', () => ) .add('with some emoji', () => ); diff --git a/lib/ui/example/client/provider.js b/lib/ui/example/client/provider.js index 541db9d9c5c..50dc9fb3a09 100644 --- a/lib/ui/example/client/provider.js +++ b/lib/ui/example/client/provider.js @@ -79,7 +79,7 @@ export default class ReactProvider extends Provider { this.api.setOptions({ name: 'REACT-STORYBOOK', sortStoriesByKind: true, - resolveStoryHierarchy: storyName => storyName.split('/') + hierarchySeparator: '/' }); // set stories diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js index 6141f8cdeee..8f78704bc78 100755 --- a/lib/ui/src/modules/api/index.js +++ b/lib/ui/src/modules/api/index.js @@ -8,7 +8,7 @@ export default { name: 'STORYBOOK', url: 'https://github.com/storybooks/storybook', sortStoriesByKind: false, - resolveStoryHierarchy: storyName => [storyName], + hierarchySeparator: '', }, }, load({ clientStore, provider }, _actions) { diff --git a/lib/ui/src/modules/ui/components/left_panel/stories.test.js b/lib/ui/src/modules/ui/components/left_panel/stories.test.js index 7a810f011dd..04252f4817c 100755 --- a/lib/ui/src/modules/ui/components/left_panel/stories.test.js +++ b/lib/ui/src/modules/ui/components/left_panel/stories.test.js @@ -41,13 +41,13 @@ describe('manager.ui.components.left_panel.stories', () => { expect(output).toMatch(/b2/); }); - test('should render stories with hierarchy - resolveStoryHierarchy is defined', () => { + test('should render stories with hierarchy - hierarchySeparator is defined', () => { const data = createHierarchy( [ { kind: 'some.name.item1', stories: ['a1', 'a2'] }, { kind: 'another.space.20', stories: ['b1', 'b2'] }, ], - name => name.split('.') + '\\.' ); const wrap = shallow( { expect(output).toMatch(/b2/); }); - test('should render stories without hierarchy - resolveStoryHierarchy is not defined', () => { + test('should render stories without hierarchy - hierarchySeparator is not defined', () => { const data = createHierarchy([ { kind: 'some.name.item1', stories: ['a1', 'a2'] }, { kind: 'another.space.20', stories: ['b1', 'b2'] }, @@ -142,13 +142,13 @@ describe('manager.ui.components.left_panel.stories', () => { expect(onSelectStory).toHaveBeenCalledWith('b', 'b1'); }); - test('should call the onSelectStory prop when a namespace is clicked - resolveStoryHierarchy is defined', () => { + test('should call the onSelectStory prop when a namespace is clicked - hierarchySeparator is defined', () => { const data = createHierarchy( [ { kind: 'some.name.item1', stories: ['a1', 'a2'] }, { kind: 'another.space.20', stories: ['b1', 'b2'] }, ], - name => name.split('.') + '\\.' ); const onSelectStory = jest.fn(); diff --git a/lib/ui/src/modules/ui/containers/left_panel.js b/lib/ui/src/modules/ui/containers/left_panel.js index 5df4ac0c1d1..3ee95809c24 100755 --- a/lib/ui/src/modules/ui/containers/left_panel.js +++ b/lib/ui/src/modules/ui/containers/left_panel.js @@ -2,18 +2,16 @@ import LeftPanel from '../components/left_panel'; import * as filters from '../libs/filters'; import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; -import { createHierarchy } from '../libs/hierarchy'; +import { createHierarchy, resolveStoryHierarchy } from '../libs/hierarchy'; export const mapper = (state, props, { actions }) => { const actionMap = actions(); const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state; - const { name, url, sortStoriesByKind, resolveStoryHierarchy } = uiOptions; + const { name, url, sortStoriesByKind, hierarchySeparator } = uiOptions; const filteredStores = filters.storyFilter(stories, storyFilter, selectedKind, sortStoriesByKind); - const storiesHierarchy = createHierarchy(filteredStores, resolveStoryHierarchy); - const selectedHierarchy = resolveStoryHierarchy - ? resolveStoryHierarchy(selectedKind) - : [selectedKind]; + const storiesHierarchy = createHierarchy(filteredStores, hierarchySeparator); + const selectedHierarchy = resolveStoryHierarchy(selectedKind, hierarchySeparator); const data = { storiesHierarchy, diff --git a/lib/ui/src/modules/ui/containers/left_panel.test.js b/lib/ui/src/modules/ui/containers/left_panel.test.js index f5b4778ccc3..8896e6ed983 100755 --- a/lib/ui/src/modules/ui/containers/left_panel.test.js +++ b/lib/ui/src/modules/ui/containers/left_panel.test.js @@ -10,7 +10,6 @@ describe('manager.ui.containers.left_panel', () => { const uiOptions = { name: 'foo', url: 'bar', - resolveStoryHierarchy: name => [name], }; const selectStory = () => 'selectStory'; const toggleShortcutsHelp = () => 'toggleShortcutsHelp'; @@ -59,7 +58,6 @@ describe('manager.ui.containers.left_panel', () => { const uiOptions = { name: 'foo', url: 'bar', - resolveStoryHierarchy: name => [name], }; const selectStory = () => 'selectStory'; const toggleShortcutsHelp = () => 'toggleShortcutsHelp'; @@ -105,7 +103,6 @@ describe('manager.ui.containers.left_panel', () => { name: 'foo', url: 'bar', sortStoriesByKind: true, - resolveStoryHierarchy: name => [name], }; const selectStory = () => 'selectStory'; const toggleShortcutsHelp = () => 'toggleShortcutsHelp'; diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js index 3376a977bb2..aa79785e950 100644 --- a/lib/ui/src/modules/ui/libs/hierarchy.js +++ b/lib/ui/src/modules/ui/libs/hierarchy.js @@ -28,7 +28,15 @@ function fillHierarchy(namespaces, hierarchy, story) { fillHierarchy(namespaces.slice(1), childHierarchy, story); } -export function createHierarchy(stories, resolveNamespace) { +export function resolveStoryHierarchy(storyName, hierarchySeparator) { + if (!hierarchySeparator) { + return [storyName]; + } + + return storyName.split(new RegExp(hierarchySeparator)); +} + +export function createHierarchy(stories, hierarchySeparator) { const hierarchyRoot = { namespaces: [], current: '', @@ -40,7 +48,7 @@ export function createHierarchy(stories, resolveNamespace) { } const groupedStories = stories.map(story => { - const namespaces = resolveNamespace ? resolveNamespace(story.kind) : [story.kind]; + const namespaces = resolveStoryHierarchy(story.kind, hierarchySeparator); return { namespaces, diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js index b0fac255e04..bd770ddf93e 100644 --- a/lib/ui/src/modules/ui/libs/hierarchy.test.js +++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js @@ -1,4 +1,4 @@ -import { createHierarchy, isSelectedHierarchy } from './hierarchy'; +import { createHierarchy, isSelectedHierarchy, resolveStoryHierarchy } from './hierarchy'; describe('manager.ui.libs.hierarchy', () => { describe('createHierarchy', () => { @@ -22,7 +22,7 @@ describe('manager.ui.libs.hierarchy', () => { }); }); - test('should return flat hierarchy if resolve function is undefined', () => { + test('should return flat hierarchy if hierarchySeparator is undefined', () => { const stories = [ { kind: 'some.name.item1', stories: ['a1', 'a2'] }, { kind: 'another.space.20', stories: ['b1', 'b2'] }, @@ -58,13 +58,13 @@ describe('manager.ui.libs.hierarchy', () => { expect(result.map).toEqual(new Map(expected)); }); - test('should return hierarchy if resolve function is defined', () => { + test('should return hierarchy if hierarchySeparator is defined', () => { const stories = [ { kind: 'some.name.item1', stories: ['a1', 'a2'] }, { kind: 'another.space.20', stories: ['b1', 'b2'] }, ]; - const result = createHierarchy(stories, name => name.split('.')); + const result = createHierarchy(stories, '\\.'); const expected = new Map([ [ @@ -190,4 +190,18 @@ describe('manager.ui.libs.hierarchy', () => { expect(result).toBeTruthy(); }); }); + + describe('resolveStoryHierarchy', () => { + test('should return array with initial namespace when hierarchySeparator is undefined', () => { + const result = resolveStoryHierarchy('some.name.item1'); + + expect(result).toEqual(['some.name.item1']); + }); + + test('should return array with separated namespaces when hierarchySeparator is defined', () => { + const result = resolveStoryHierarchy('some/name.item1', '\\.|\\/'); + + expect(result).toEqual(['some', 'name', 'item1']); + }); + }); });