Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Story Hierarchy improved UI #1356

Merged
merged 21 commits into from
Jun 29, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a7a3900
Add left panel hierarchy support
Jun 21, 2017
ad32ffa
Fix a few related codebeat issues
Jun 21, 2017
6960d91
Add more tests for stories.js
Jun 21, 2017
3dbdb9e
Better UI for the hierarchy view + bugs fixes
Jun 22, 2017
6bfed5d
Merge remote-tracking branch 'origin/master' into left-panel-hierarchy
Jun 22, 2017
f27825d
Add shortcut to toggle hierarchy
Jun 23, 2017
9b00eb3
Extract hierarchy creation to the mapper
igor-dv Jun 23, 2017
06a4c54
Remove shortcuts for the hierarchy toggling + change leftPanelHierarc…
igor-dv Jun 23, 2017
c16cc2d
Rename resolveStoryHierarchyNamespace to resolveStoryHierarchy
igor-dv Jun 23, 2017
3fde529
Fix tests + Add tests for hierarchy
igor-dv Jun 23, 2017
17fb4f5
Fix the cases when the separator is not a "."
igor-dv Jun 24, 2017
87adce4
Add assertions to left_panel.test.js
igor-dv Jun 24, 2017
bbf6360
Fix warnings in stories.test.js
igor-dv Jun 25, 2017
1c33fda
Fix tests + Add tests
igor-dv Jun 25, 2017
df26718
Remove require.resolve from libs/ui webpack.config.js
igor-dv Jun 25, 2017
21d7173
Remove package-lock.json files
igor-dv Jun 25, 2017
f57a602
Merge pull request #1329 from igor-dv/left-panel-hierarchy
shilman Jun 25, 2017
dbb04c1
Repalce resolveStoryHierarchy func with hierarchySeparator
igor-dv Jun 26, 2017
279e198
Change the order of the atomic namespace
igor-dv Jun 29, 2017
43ca59b
Merge remote-tracking branch 'origin/release/3.2' into 151-story-hier…
igor-dv Jun 29, 2017
8262b7b
Revert code that was injected by aliens
igor-dv Jun 29, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/cra-kitchen-sink/.storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ setOptions({
showSearchBox: false,
downPanelInRight: true,
sortStoriesByKind: false,
resolveStoryHierarchy: (storyName) => storyName.split('.'),
hierarchySeparator: '\\/|\\.|¯\\\\_\\(ツ\\)_\\/¯'
});

setAddon(infoAddon);
Expand Down
6 changes: 3 additions & 3 deletions examples/cra-kitchen-sink/src/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -177,16 +177,16 @@ storiesOf('component.Button')

// Atomic

storiesOf('Atoms.Molecules.Cells.simple', module)
storiesOf('Atoms¯\\_(ツ)_/¯Molecules.Cells/simple', module)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome ❤️

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be cells/molecules/atoms? current order doesn't make sense to me?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll fix it.

.addDecorator(withKnobs)
.add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
.add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);

storiesOf('Atoms.Molecules.Cells.more', module)
storiesOf('Atoms/Molecules/Cells.more', module)
.add('with text2', () => <Button>Hello Button</Button>)
.add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);

storiesOf('Atoms.Molecules', module)
storiesOf('Atoms/Molecules', module)
.add('with text', () => <Button>Hello Button</Button>)
.add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);

Expand Down
2 changes: 1 addition & 1 deletion lib/ui/example/client/provider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion lib/ui/src/modules/api/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default {
name: 'STORYBOOK',
url: 'https://github.com/storybooks/storybook',
sortStoriesByKind: false,
resolveStoryHierarchy: storyName => [storyName],
hierarchySeparator: '',
},
},
load({ clientStore, provider }, _actions) {
Expand Down
10 changes: 5 additions & 5 deletions lib/ui/src/modules/ui/components/left_panel/stories.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<Stories
Expand All @@ -72,7 +72,7 @@ describe('manager.ui.components.left_panel.stories', () => {
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'] },
Expand Down Expand Up @@ -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();
Expand Down
10 changes: 4 additions & 6 deletions lib/ui/src/modules/ui/containers/left_panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 0 additions & 3 deletions lib/ui/src/modules/ui/containers/left_panel.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down
12 changes: 10 additions & 2 deletions lib/ui/src/modules/ui/libs/hierarchy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
Expand All @@ -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,
Expand Down
22 changes: 18 additions & 4 deletions lib/ui/src/modules/ui/libs/hierarchy.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createHierarchy, isSelectedHierarchy } from './hierarchy';
import { createHierarchy, isSelectedHierarchy, resolveStoryHierarchy } from './hierarchy';

describe('manager.ui.libs.hierarchy', () => {
describe('createHierarchy', () => {
Expand All @@ -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'] },
Expand Down Expand Up @@ -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([
[
Expand Down Expand Up @@ -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']);
});
});
});