Add left panel hierarchy support by igor-dv · Pull Request #1329 · storybookjs/storybook

igor-dv · 2017-06-21T08:28:15Z

What I did

I've added the option to visualize the "namespace syntax" of stories as a hierarchy in the stories panel (left panel).

For example, by providing stories like these:

storiesOf('web.component.Button', module)
  .add('One', ...)
  .add('Two', ...)
  .add('Three', ...)

storiesOf('web.component.Link', module)
  .add('One', ...)
  .add('Two', ...)
  .add('Three', ...)

The left panel will be like this:

web
|  component
|  |  Button
|  |      One    <-- if this is selected, other components are collapsed
|  |      Two
|  |      Three
|  |  Link

You'll be able to control it by defining the new "leftPanelHierarchy" prop of the uiOptions as a true (by default it's false).

How to test

You can run the storybook/lib/ui/example

codecov · 2017-06-21T08:40:40Z

Codecov Report

Merging #1329 into 151-story-hierarchy will increase coverage by 0.9%.
The diff coverage is 65.34%.

@@                  Coverage Diff                   @@
##           151-story-hierarchy    #1329     +/-   ##
======================================================
+ Coverage                13.75%   14.66%   +0.9%     
======================================================
  Files                      202      203      +1     
  Lines                     4623     4713     +90     
  Branches                   616      512    -104     
======================================================
+ Hits                       636      691     +55     
- Misses                    3453     3591    +138     
+ Partials                   534      431    -103

Impacted Files	Coverage Δ
addons/info/src/components/Story.js	`0% <ø> (ø)`	⬆️
lib/ui/src/modules/api/index.js	`0% <0%> (ø)`	⬆️
app/react-native/src/server/index.js	`0% <0%> (ø)`	⬆️
lib/ui/example/client/provider.js	`0% <0%> (ø)`	⬆️
...ui/src/modules/ui/components/left_panel/stories.js	`100% <100%> (ø)`	⬆️
...b/ui/src/modules/ui/components/left_panel/index.js	`100% <100%> (ø)`	⬆️
lib/ui/src/modules/ui/libs/hierarchy.js	`46.66% <54.9%> (ø)`
lib/ui/src/modules/ui/containers/left_panel.js	`25.71% <57.14%> (+5.71%)`	⬆️
addons/knobs/src/KnobManager.js	`38.57% <0%> (ø)`	⬆️
lib/ui/src/modules/ui/containers/down_panel.js	`23.52% <0%> (ø)`	⬆️
... and 37 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 152630b...21d7173. Read the comment docs.

usulpro · 2017-06-21T23:36:51Z

@igor-dv Thanks for this implementation!
UI and API looks great to me! 👏

I played with this solution and found some issues:

stories with hierarchy are located at the end of stories list even if I add them in the middle
It creates two separate items in the stories list if I .add stories in the middle of hierarchy path. e.g.:

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


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

I've got such menu:

expected behavior: show only one item with stories and a substory item

It doesn't work with Knobs. I tried to change some values - no response.
I played with some nested levels and faced that in some cases it opens not the first item when I select the storyKind.

the way to reproduce

Details

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

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

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

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

When I click Atoms first time it opens all nested items this way:

possible it's overwhelming case thought :)

My suggestion

In general, I like this solution. In order to succeed with this feature don't you mind to collaborate with storybook-addon-chapters wich provides hierarchy as well but in another way? And possible with other developers who'd like to jump to this feature. So we can create a separate branch for this feature and continue the work.

usulpro

see some issues above

alexandrebodin · 2017-06-22T08:41:26Z

My bad I clicked the wrong button xD

alexandrebodin · 2017-06-22T09:27:59Z

Full disclosure.

I'm working a moving the ui to redux instead of mantra. While doing this I am making a hierarchical view to. I think we should merge @igor-dv PR because my work is not ready yet.

I'll open a PR so @igor-dv can look at it and the kirks I had to handle to make the hierarchy work has I wanted (Hoping this will help you with fix bugs :))

If you want to have a look I'm opening a PR #1334

igor-dv · 2017-06-22T10:45:34Z

@usulpro , thanks for your review.

Regarding the issues:

Fixed
I don't know if it's a desired behavior . I assume that will be provided a "fully qualified" component name.
For example in "Atoms.Molecules" , "Atoms" is a namespace and "Molecules" is a component name. In "Atoms.Molecules.Cells" - "Atoms.Molecules" is a namespace and "Cells" is component name..
Would like to here more people regarding this, but maybe you are right
I checked it with Knobs and it worked for me (added a few examples in cra-kitchen-sink)
After some fixes it looks ok =)

Regarding the storybook-addon-chapters. I've considered it as an alternative for the projects in a company I work, but it didn't meet our needs.

It always changes the context of the stories in the left panel
It adds things to the preview section

In general, I think that the left panel should look like most of the IDEs files explorer (or how it's called..)

Though I am big fan of the plugins idea, Storybok addons api doesn't allow us to create a proper addon for the left panel..

Anyway, I think it's a great plugin, and would like to help with it.

After a bit UI changes, it looks like this now:

Conflicts: lib/ui/package.json

igor-dv · 2017-06-23T05:34:33Z

shilman · 2017-06-23T07:25:46Z

@igor-dv my guess is that "toggle story hierarchy" is gratuitous. My guess is that we release this as a backwards-compatible feature in 3.2 and then, assuming lots of people use it, we just make it the default in 4.0.

shilman · 2017-06-23T07:30:02Z

@igor-dv I think it would be nice to be able to pass a function that constructs the hierarchy from the story name. So by default that would be (storyName) => storyName.split(".") but that it could be overridden in the configuration.

Use cases:

Sketch symbols use the naming convention a/b/c/SymbolName, and I've considered exporting these to Storybook as part of a design system
I've also done things like kindName-storyName_deviceSize and would probably override the default in some collaboration-related features I've developed in private addons.

igor-dv · 2017-06-23T07:35:38Z

@shilman
Regarding the splitting - great idiea. I felt it's a bit hardcoded. So i can provide it as a parameter in the
uiOptions.leftPanelHierarchy

like by default it's a boolean - uiOptions.leftPanelHierarchy = false

but in a more expanded way it's

uiOptions.leftPanelHierarchy = {
  enabled: true,
  split: story => (storyName) => storyName.split(".")
}

WDYT ?

shilman · 2017-06-23T07:38:48Z

@igor-dv another idea (don't know if it's a good one):

Existing behavior (default):

uiOptions = {
  storyHierarchy: (storyName) => [storyName]
}

New behavior:

uiOptions = {
  storyHierarchy: (storyName) => storyName.split('.')
}

alexandrebodin · 2017-06-23T07:39:49Z

I'm picky but I'm not sur about using 'Kind1.Kind2'
I would suggest a path like syntax 'Kind1/Kind2' to communicate the intent a bit more.

In my opinion . might be uses widely for any other meaning. and / is already used by users to have a visual clue of the separation. This would bring direct benefits to those already using this standard way of declaring URI don't you think ?

shilman · 2017-06-23T07:40:47Z

@alexandrebodin I don't have a strong opinion about this, but / would also be my preferred choice (see the Sketch comment above)

igor-dv · 2017-06-23T08:10:29Z

@shilman

uiOptions = {
  storyHierarchy: (storyName) => [storyName]
}

That works.. but toggling became harder to handle.. I need to add something to state..

@alexandrebodin
If we will provide the splitting function as an option, it will be easier to tweak this..
WDYT ?

shilman · 2017-06-23T08:15:44Z

@igor-dv why do we need toggling?

Also, this may be out of scope, but how hard would it be to replace the left panel with a generic tree widget, such as react-treebeard with custom styles and key-bindings.

I think Storybook's custom list UI kind of made sense when it was a flat list, but now that we have hierarchy, there are already common UI's for dealing with this that everybody (including non-engineers) are used to using.

shilman · 2017-06-23T08:40:00Z

+
+// Atomic
+
+storiesOf('Atoms.Molecules.Cells.simple', module)


I think the order is backwards: Cells.Molecules.Atoms?

possible we could get our existing kitchen-sink stuff and reorganize in a hierarchical way?

shilman · 2017-06-23T08:41:47Z

    this.api = api;
    this.api.setOptions({
      name: 'REACT-STORYBOOK',
+      sortStoriesByKind: true,


"breaking"?

As far as I checked - no. But maybe it's already has another meaning.. Anyway the hierarchy is built after the filtering:

igor-dv · 2017-06-23T09:24:54Z

@shilman
I just thought toggling will be a nice thing, but you are right, I don't see benefits of having the old style view.

treebeard - interesting, I'll check it..

igor-dv · 2017-06-23T09:26:51Z

I think a better name will be

uiOptions = {
  resolveStoryHierarchyNamespace: (storyName) => [storyName]
}

shilman · 2017-06-23T12:44:42Z

@igor-dv how about just resolveStoryHierarchy ... or something a little shorter! 😄

…hy to resolveStoryHierarchyNamespace

ndelangen · 2017-06-24T06:56:38Z

@igor-dv I'm loving this! This is amazing!

shilman · 2017-06-25T09:29:13Z

NOTE: merged this into 151-story-hierarchy branch so @igor-dv can continue working in the storybook repo. 👍

Add left panel hierarchy support

a7a3900

igor added 2 commits June 21, 2017 12:00

Fix a few related codebeat issues

ad32ffa

Add more tests for stories.js

6960d91

usulpro suggested changes Jun 21, 2017

View reviewed changes

alexandrebodin closed this Jun 22, 2017

alexandrebodin reopened this Jun 22, 2017

arunoda added the in progress label Jun 22, 2017

Better UI for the hierarchy view + bugs fixes

3dbdb9e

Merge remote-tracking branch 'origin/master' into left-panel-hierarchy

6bfed5d

Conflicts: lib/ui/package.json

shilman mentioned this pull request Jun 22, 2017

Multiple Preview Windows #1335

Closed

shilman changed the base branch from master to release/3.2 June 22, 2017 22:07

Add shortcut to toggle hierarchy

f27825d

Extract hierarchy creation to the mapper

9b00eb3

shilman reviewed Jun 23, 2017

View reviewed changes

shilman added this to the v3.2.0 milestone Jun 23, 2017

igor-dv added 3 commits June 23, 2017 17:24

Remove shortcuts for the hierarchy toggling + change leftPanelHierarc…

06a4c54

…hy to resolveStoryHierarchyNamespace

Rename resolveStoryHierarchyNamespace to resolveStoryHierarchy

c16cc2d

Fix tests + Add tests for hierarchy

3fde529

igor-dv added 5 commits June 24, 2017 16:36

Fix the cases when the separator is not a "."

17fb4f5

Add assertions to left_panel.test.js

87adce4

Fix warnings in stories.test.js

bbf6360

Fix tests + Add tests

1c33fda

Remove require.resolve from libs/ui webpack.config.js

df26718

shilman changed the base branch from release/3.2 to 151-story-hierarchy June 25, 2017 09:13

Remove package-lock.json files

21d7173

shilman merged commit f57a602 into storybookjs:151-story-hierarchy Jun 25, 2017

shilman removed the in progress label Jun 25, 2017

shilman mentioned this pull request Jun 25, 2017

Story Hierarchy improved UI #1356

Merged

shilman added the feature request label Jul 27, 2017

This was referenced Sep 19, 2018

Update graphql in addons/graphql/package.json from ^0.13.2 to 14.0.2 Hypnosphi/storybook#5

Open

Update graphql in examples/official-storybook/package.json from ^0.13.2 to 14.0.2 Hypnosphi/storybook#6

Open

Uh oh!

Conversation

igor-dv commented Jun 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

How to test

Uh oh!

codecov bot commented Jun 21, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

usulpro commented Jun 21, 2017

My suggestion

Uh oh!

usulpro left a comment

Choose a reason for hiding this comment

Uh oh!

alexandrebodin commented Jun 22, 2017

Uh oh!

alexandrebodin commented Jun 22, 2017

Uh oh!

igor-dv commented Jun 22, 2017

Uh oh!

igor-dv commented Jun 23, 2017

Uh oh!

shilman commented Jun 23, 2017

Uh oh!

shilman commented Jun 23, 2017

Uh oh!

igor-dv commented Jun 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shilman commented Jun 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexandrebodin commented Jun 23, 2017

Uh oh!

shilman commented Jun 23, 2017

Uh oh!

igor-dv commented Jun 23, 2017

Uh oh!

shilman commented Jun 23, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shilman Jun 23, 2017

Choose a reason for hiding this comment

Uh oh!

usulpro Jun 23, 2017

Choose a reason for hiding this comment

Uh oh!

shilman Jun 23, 2017

Choose a reason for hiding this comment

Uh oh!

igor-dv Jun 23, 2017

Choose a reason for hiding this comment

Uh oh!

igor-dv commented Jun 23, 2017

Uh oh!

igor-dv commented Jun 23, 2017

Uh oh!

shilman commented Jun 23, 2017

Uh oh!

ndelangen commented Jun 24, 2017

Uh oh!

shilman commented Jun 25, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

igor-dv commented Jun 21, 2017 •

edited

Loading

codecov bot commented Jun 21, 2017 •

edited

Loading

igor-dv commented Jun 23, 2017 •

edited

Loading

shilman commented Jun 23, 2017 •

edited

Loading

shilman commented Jun 23, 2017 •

edited

Loading