Addon-docs: Support docs-only MDX && update docs mode nav UI #7302
Conversation
shilman
requested review from
danielduan,
igor-dv,
ndelangen,
tmeasday and
usulpro
as code owners
|
This pull request is automatically deployed with Now. Latest deployment for this branch: https://monorepo-git-6644-docs-only-stories.storybook.now.sh |
shilman
changed the title
| const { id, isLeaf, parent } = story; | ||
| if (isLeaf) { | ||
| if (!filtered[parent].isLeaf) { | ||
| filtered[parent].isLeaf = true; |
There was a problem hiding this comment.
This logic seems wrong. It is possible to have both leaves and non leaves as children. For instance
GroupA
|-- GroupB
| \-- Story1
\-- Story 2
I think there are some more complex examples in the code base, eg. in https://github.com/storybookjs/storybook/blob/next/lib/ui/src/components/sidebar/treeview/treeview.mockdata.js#L1.
I think to be correct, you'd need to delete story from parent.children, then set it to isLeaf if it is empty
There was a problem hiding this comment.
Can we just do this (without clone) in a fairly simple way?:
return stories.filter(s => !s.isLeaf).map(({ children, ...story }) => {
const newChildren = children.filter(s => !s.isLeaf);
return newChildren.length === 0 ?
{...story, isLeaf: true } :
{...story, children: newChildren};
});| } | ||
| }; | ||
|
|
||
| export const removeDocsOnlyStories = stories => { |
There was a problem hiding this comment.
What is this for? It only seems to be used in tests?
| const { id, isLeaf, parent, parameters } = story; | ||
| if (isLeaf && parameters && parameters.docsOnly) { | ||
| if (!filtered[parent].isLeaf) { | ||
| filtered[parent].isLeaf = true; |
There was a problem hiding this comment.
In theory this has the same problem as removeLeafStories.
Also you could probably do a no-cloneDeep version very similar to below
There was a problem hiding this comment.
In fact a removeLeaves(stories, predicate?) function would make sense and remove the need for the duplicate logic.
Issue: #6644
What I did
DOCS_MODEUI to show only component-level nodesofficial-storybookHere's how a docs-only node shows up in the UI:
Here's how the tree looks in
--docsmode:How to test