Story Hierarchy improved UI #1356

shilman · 2017-06-25T09:32:31Z

Issue: #151

What I did

Continuation of #1329, but in the main storybook repo

How to test

Run cra-kitchen-sink (see #1329)

Conflicts: lib/ui/package.json

…hy to resolveStoryHierarchyNamespace

Add left panel hierarchy support

codecov · 2017-06-25T09:46:37Z

Codecov Report

Merging #1356 into release/3.2 will increase coverage by 0.94%.
The diff coverage is 71.13%.

@@               Coverage Diff               @@
##           release/3.2    #1356      +/-   ##
===============================================
+ Coverage        14.35%   15.29%   +0.94%     
===============================================
  Files              201      202       +1     
  Lines             4613     4706      +93     
  Branches           602      508      -94     
===============================================
+ Hits               662      720      +58     
- Misses            3447     3563     +116     
+ Partials           504      423      -81

Impacted Files	Coverage Δ
lib/ui/src/modules/api/index.js	`0% <ø> (ø)`	⬆️
lib/ui/example/client/provider.js	`0% <0%> (ø)`	⬆️
...b/ui/src/modules/ui/components/left_panel/index.js	`100% <100%> (ø)`	⬆️
...ui/src/modules/ui/components/left_panel/stories.js	`100% <100%> (ø)`	⬆️
lib/ui/src/modules/ui/libs/hierarchy.js	`49.2% <58.49%> (ø)`
lib/ui/src/modules/ui/containers/left_panel.js	`25.71% <66.66%> (+5.71%)`	⬆️
app/react/src/server/babel_config.js	`44.82% <0%> (ø)`	⬆️
lib/ui/src/modules/ui/configs/init_panels.js	`25% <0%> (ø)`	⬆️
addons/info/src/components/Props.js	`0% <0%> (ø)`	⬆️
... and 29 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 74fde7b...8262b7b. Read the comment docs.

usulpro · 2017-06-25T21:27:08Z

lib/ui/src/modules/api/index.js

@@ -8,6 +8,7 @@ export default {
      name: 'STORYBOOK',
      url: 'https://github.com/storybooks/storybook',
      sortStoriesByKind: false,
+      resolveStoryHierarchy: storyName => [storyName],


I guess we'll lose a serialized function after passing through the channel.
We can consider options:

pass only JSON data here

provide this API on the manager side (it'll be available in addons.js)

I think I'll just change it to be symbol/regex.
hierarchySeparator: '/' or hierarchySeparator: '.'

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

Ok. (Beside the thing I need to fix with what @usulpro pointed on)

Here is the experimental use of react-treebeard (because of this)

There are warnings because of this, but it looks very promising.

usulpro · 2017-06-26T19:29:05Z

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)


awesome ❤️

igor-dv · 2017-06-29T06:33:01Z

Some updates for the new version

I've added Ionicons from the react-icons.

usulpro · 2017-06-29T08:55:34Z

Looks great! If we got this package in dependencies I can switch to it in #981 as well

igor-dv · 2017-06-29T09:17:20Z

I thought it would be great to have it integrated to theming api too

shilman · 2017-06-29T10:28:15Z

lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js

@@ -15,8 +15,7 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
  packageJson.devDependencies['@storybook/react-native'] = `^${version}`;

  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    const reactVersion = packageJson.dependencies.react;
-    packageJson.devDependencies['react-dom'] = reactVersion;
+    packageJson.devDependencies['react-dom'] = '^15.5.4';


idk what is this ¯\(ツ)/¯ ? Maybe it was somehow merged from the previous PR ?

shilman · 2017-06-29T10:28:22Z

lib/cli/generators/REACT_NATIVE/index.js

@@ -31,8 +31,7 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
  packageJson.devDependencies['@storybook/react-native'] = `^${version}`;

  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    const reactVersion = packageJson.dependencies.react;
-    packageJson.devDependencies['react-dom'] = reactVersion;
+    packageJson.devDependencies['react-dom'] = '^15.5.4';


shilman · 2017-06-29T10:29:32Z

examples/cra-kitchen-sink/src/stories/index.js

+
+// Atomic
+
+storiesOf('Atoms¯\\_(ツ)_/¯Molecules.Cells/simple', module)


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

I'll fix it.

shilman · 2017-06-29T10:30:20Z

package.json

@@ -58,7 +58,7 @@
    "jest": "^20.0.4",
    "jest-enzyme": "^3.2.0",
    "lerna": "2.0.0-rc.5",
-    "lint-staged": "^4.0.0",
+    "lint-staged": "^3.5.1",


…archy Conflicts: addons/info/README.md

igor-dv · 2017-06-29T14:21:37Z

Yeah, it's green now =)

usulpro · 2017-06-29T16:38:10Z

Is it ready to check out?

usulpro · 2017-06-29T18:37:03Z

lib/ui/src/modules/ui/components/left_panel/index.js

+  'storiesHierarchy',
+  'selectedKind',
+  'selectedHierarchy',
+  'selectedStory',


Don't we need to have selectedStory and selectedKind in propTypes?

I think linter cries that they are not in use in here. these props just passed further to stories.js where they are actually defined in prop types.

igor-dv · 2017-06-29T18:49:35Z

I think it's ready, but non of the reviewers acepted the PR ...

shilman · 2017-06-29T19:17:04Z

@igor-dv @usulpro LGTM! Github is not letting me approve the PR because I was the one who opened it 😖

shilman · 2017-06-29T19:17:45Z

@igor-dv I guess we will wait to merge the treebeard improvements until after the new version is ready on NPM?

igor-dv · 2017-06-29T19:34:03Z

@shilman , yes, I think so. I'll merge this one and then will open a new PR for the improvements.

joscha · 2017-07-10T15:57:24Z

references #1445
references https://github.com/DefinitelyTyped/DefinitelyTyped/compare/master...joscha:joscha/fix-storybook-addon-options-hierarchySeparator?expand=1

igor and others added 17 commits June 21, 2017 10:15

Add left panel hierarchy support

a7a3900

Fix a few related codebeat issues

ad32ffa

Add more tests for stories.js

6960d91

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

Add shortcut to toggle hierarchy

f27825d

Extract hierarchy creation to the mapper

9b00eb3

Remove shortcuts for the hierarchy toggling + change leftPanelHierarc…

06a4c54

…hy to resolveStoryHierarchyNamespace

Rename resolveStoryHierarchyNamespace to resolveStoryHierarchy

c16cc2d

Fix tests + Add tests for hierarchy

3fde529

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

Remove package-lock.json files

21d7173

Merge pull request #1329 from igor-dv/left-panel-hierarchy

f57a602

Add left panel hierarchy support

shilman added feature request ui in progress labels Jun 25, 2017

usulpro reviewed Jun 25, 2017

View reviewed changes

orta mentioned this pull request Jun 26, 2017

Support derived nesting? orta/vscode-react-native-storybooks#13

Open

Repalce resolveStoryHierarchy func with hierarchySeparator

dbb04c1

usulpro reviewed Jun 26, 2017

View reviewed changes

igor-dv added this to the v3.2.0 milestone Jun 28, 2017

igor-dv mentioned this pull request Jun 28, 2017

Make compatible with 'React v15.5.0' storybook-eol/react-treebeard#67

Merged

6 tasks

shilman commented Jun 29, 2017

View reviewed changes

igor-dv added 3 commits June 29, 2017 13:41

Change the order of the atomic namespace

279e198

Merge remote-tracking branch 'origin/release/3.2' into 151-story-hier…

43ca59b

…archy Conflicts: addons/info/README.md

Revert code that was injected by aliens

8262b7b

usulpro reviewed Jun 29, 2017

View reviewed changes

igor-dv merged commit 0362bc2 into release/3.2 Jun 29, 2017

arunoda removed the in progress label Jun 29, 2017

This was referenced Jul 7, 2017

Wrap current API to extend it to align with Atomic Design #161

Closed

Add a category feature to Storybook. #458

Closed

Feature: Grouping like components with sidebar sections #1178

Closed

shilman added cleanup Minor cleanup style change that won't show up in release changelog and removed feature request labels Jul 27, 2017

shilman changed the title ~~Story Hierarchy (continued)~~ Story Hierarchy improved UI Jul 27, 2017

dependencies bot mentioned this pull request Nov 11, 2017

Update 2 dependencies from npm #2290

Merged

dependabot-preview bot mentioned this pull request May 28, 2019

Bump eslint-plugin-import from 2.17.2 to 2.17.3 #6894

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Story Hierarchy improved UI #1356

Story Hierarchy improved UI #1356

shilman commented Jun 25, 2017

codecov bot commented Jun 25, 2017 •

edited

Loading

usulpro Jun 25, 2017

igor-dv Jun 26, 2017

igor-dv commented Jun 26, 2017

usulpro Jun 26, 2017

igor-dv commented Jun 29, 2017

usulpro commented Jun 29, 2017

igor-dv commented Jun 29, 2017

shilman Jun 29, 2017

igor-dv Jun 29, 2017 •

edited

Loading

shilman Jun 29, 2017

shilman Jun 29, 2017

igor-dv Jun 29, 2017

shilman Jun 29, 2017

igor-dv commented Jun 29, 2017

usulpro commented Jun 29, 2017

usulpro Jun 29, 2017

igor-dv Jun 29, 2017

igor-dv commented Jun 29, 2017

shilman commented Jun 29, 2017

shilman commented Jun 29, 2017

igor-dv commented Jun 29, 2017

joscha commented Jul 10, 2017


		// Atomic

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

Story Hierarchy improved UI #1356

Story Hierarchy improved UI #1356

Conversation

shilman commented Jun 25, 2017

What I did

How to test

codecov bot commented Jun 25, 2017 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igor-dv commented Jun 26, 2017

Choose a reason for hiding this comment

igor-dv commented Jun 29, 2017

usulpro commented Jun 29, 2017

igor-dv commented Jun 29, 2017

Choose a reason for hiding this comment

igor-dv Jun 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igor-dv commented Jun 29, 2017

usulpro commented Jun 29, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

igor-dv commented Jun 29, 2017

shilman commented Jun 29, 2017

shilman commented Jun 29, 2017

igor-dv commented Jun 29, 2017

joscha commented Jul 10, 2017

codecov bot commented Jun 25, 2017 •

edited

Loading

igor-dv Jun 29, 2017 •

edited

Loading