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.

Sign up for GitHub

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

UI: Add viewMode parameter to control story nav UI #9090

Merged
merged 7 commits into from
Jan 28, 2020
Merged

UI: Add viewMode parameter to control story nav UI #9090

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2db3faa
added viewmode parameter
atanasster Dec 7, 2019
cac8b47
remove logs
atanasster Dec 7, 2019
e2c3d1b
var name paramViewMode
atanasster Dec 7, 2019
615ce7f
Merge branch 'next' into pr/9090
shilman Jan 28, 2020
d8e13a0
Sidebar: Clean up viewMode handling and add tests
shilman Jan 28, 2020
5eaf233
Merge branch 'next' into pr/9090
shilman Jan 28, 2020
3e086ef
Document viewMode story parameter
shilman Jan 28, 2020
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
1 change: 1 addition & 0 deletions examples/official-storybook/stories/addon-docs/subcomponents.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ButtonGroup } from '../../components/ButtonGroup';
export default {
title: 'Addons/Docs/ButtonGroup',
component: ButtonGroup,
parameters: { viewMode: 'docs' },
subcomponents: { DocgenButton },
};

Expand Down
7 changes: 6 additions & 1 deletion lib/api/src/modules/stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ interface Group {
isComponent: boolean;
isRoot: boolean;
isLeaf: boolean;
// MDX stories are "Group" type
parameters?: any;
}

interface StoryInput {
Expand Down Expand Up @@ -259,6 +261,7 @@ const initStoriesApi = ({
const { name } = group;
const parent = index > 0 && soFar[index - 1].id;
const id = sanitize(parent ? `${parent}-${name}` : name);
const isComponent = index === original.length - 1;
if (parent === id) {
throw new Error(
`
Expand All @@ -275,9 +278,11 @@ Did you create a path that uses the separator char accidentally, such as 'Vue <d
parent,
depth: index,
children: [],
isComponent: index === original.length - 1,
isComponent,
isLeaf: false,
isRoot: !!root && index === 0,
// if isComponent is true, .mdx story - save parameters
parameters: isComponent ? parameters : undefined,
};
return soFar.concat([result]);
}, [] as GroupsList);
Expand Down
18 changes: 14 additions & 4 deletions lib/ui/src/components/sidebar/SidebarStories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

import { styled } from '@storybook/theming';
import { Placeholder, Link as StyledLink } from '@storybook/components';
import { State } from '@storybook/api';
import api, { State } from '@storybook/api';
import { Location, Link as RouterLink } from '@storybook/router';
import { TreeState } from './treeview/treeview';

Expand Down Expand Up @@ -52,7 +52,15 @@ const PlainLink = styled.a(plain);

const Wrapper = styled.div({});

const refinedViewMode = (viewMode: string | undefined, isDocsOnly: boolean) => {
const refinedViewMode = (
viewMode: string | undefined,
isDocsOnly: boolean,
parameters: { viewMode?: string } = {}
) => {
const { viewMode: pViewMode } = parameters;
ndelangen marked this conversation as resolved.
Show resolved Hide resolved
if (typeof pViewMode === 'string') {
return pViewMode;
}
if (isDocsOnly) {
return 'docs';
}
Expand All @@ -73,14 +81,17 @@ export const Link = ({
onKeyUp,
childIds,
isExpanded,
parameters,
}) => {
return isLeaf || (isComponent && !isExpanded) ? (
<Location>
{({ viewMode }) => (
<PlainRouterLink
title={name}
id={prefix + id}
to={`/${refinedViewMode(viewMode, isLeaf && isComponent)}/${targetId(childIds) || id}`}
to={`/${refinedViewMode(viewMode, isLeaf && isComponent, parameters)}/${targetId(
childIds
) || id}`}
onKeyUp={onKeyUp}
onClick={onClick}
>
Expand Down Expand Up @@ -161,7 +172,6 @@ const SidebarStories: FunctionComponent<StoriesProps> = memo(
</Wrapper>
);
}

return (
<Wrapper className={className}>
<TreeState
Expand Down