FIX build

lib/components/src/tooltip/TooltipLinkList.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, Key, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
-import ListItem, { LinkWrapperType } from './ListItem';
+import ListItem, { LinkWrapperType, ListItemProps } from './ListItem';
 
 const List = styled.div<{}>(
   {
@@ -13,12 +13,8 @@ const List = styled.div<{}>(
   })
 );
 
-export interface Link {
+export interface Link extends ListItemProps {
   id: string;
-  title?: ReactNode;
-  active?: boolean;
-  href?: string | object;
-  onClick?: () => void;
   isGatsby?: boolean;
 }
 

lib/ui/src/components/sidebar/ListItemIcon.stories.tsx

@@ -10,12 +10,14 @@ export default {
 
 export const all = () => (
   <TooltipLinkList
-    links={
-      [
-        { title: 'has icon', left: <ListItemIcon icon="check" /> },
-        { title: 'has imgSrc', left: <ListItemIcon imgSrc="https://via.placeholder.com/20" /> },
-        { title: 'has neither', left: <ListItemIcon /> },
-      ] as any // FIXME: TooltipLinkList types
-    }
+    links={[
+      { title: 'has icon', left: <ListItemIcon icon="check" />, id: 'icon' },
+      {
+        title: 'has imgSrc',
+        left: <ListItemIcon imgSrc="https://via.placeholder.com/20" />,
+        id: 'img',
+      },
+      { title: 'has neither', left: <ListItemIcon />, id: 'non' },
+    ]}
   />
 );

lib/ui/src/components/sidebar/Sidebar.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import Sidebar from './Sidebar';
 import { standardData as standardHeaderData } from './SidebarHeading.stories';
-// @ts-ignore
 import { withRootData } from './SidebarStories.stories';
 
 export default {

lib/ui/src/components/sidebar/Sidebar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+
 import { styled } from '@storybook/theming';
 import { ScrollArea } from '@storybook/components';
+import { State } from '@storybook/api';
 
 import SidebarHeading, { SidebarHeadingProps } from './SidebarHeading';
 import SidebarStories from './SidebarStories';
@@ -9,7 +11,9 @@ const Heading = styled(SidebarHeading)<SidebarHeadingProps>({
   padding: '20px 20px 12px',
 });
 
-const Stories = styled(SidebarStories)(({ loading }) => (loading ? { marginTop: 8 } : {}));
+const Stories = styled(({ className, ...rest }) => (
+  <SidebarStories className={className} {...rest} />
+))(({ loading }) => (loading ? { marginTop: 8 } : {}));
 
 const Container = styled.nav({
   position: 'absolute',
@@ -29,7 +33,7 @@ const CustomScrollArea = styled(ScrollArea)({
 });
 
 export interface SidebarProps {
-  stories: unknown;
+  stories: State['StoriesHash'];
   menu: any[];
   storyId?: string;
   menuHighlighted?: boolean;

lib/ui/src/components/sidebar/SidebarStories.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Spaced } from '@storybook/components';
+
+import SidebarStories from './SidebarStories';
+import { mockDataset } from './treeview/treeview.mockdata';
+
+export default {
+  Component: SidebarStories,
+  title: 'UI|Sidebar/SidebarStories',
+  decorators: [s => <Spaced>{s()}</Spaced>],
+  excludeStories: /.*Data$/,
+};
+
+export const withRootData = {
+  stories: mockDataset.withRoot,
+  storyId: '1-12-121',
+};
+
+export const withRoot = () => (
+  <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" loading={false} />
+);
+
+export const noRootData = {
+  stories: mockDataset.noRoot,
+  storyId: '1-12-121',
+};
+
+export const noRoot = () => (
+  <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" loading={false} />
+);
+
+export const emptyData = {
+  stories: {},
+};
+
+export const empty = () => <SidebarStories stories={{}} loading={false} />;
+
+export const loading = () => <SidebarStories loading stories={{}} />;

lib/ui/src/components/sidebar/SidebarStories.tsx

@@ -1,35 +1,165 @@
-import React from 'react';
-import { Spaced } from '@storybook/components';
+import React, { Fragment, FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
 
-import SidebarStories from './SidebarStories';
+import { styled } from '@storybook/theming';
+import { Placeholder, Link as StyledLink } from '@storybook/components';
+import { State } from '@storybook/api';
+import { Location, Link as RouterLink } from '@storybook/router';
+import { TreeState } from './treeview/treeview';
+
+import SidebarItem from './SidebarItem';
+import SidebarSearch from './SidebarSearch';
+import SidebarSubheading from './SidebarSubheading';
+
+const Search = styled(SidebarSearch)({
+  margin: '0 20px 1rem',
+});
+
+const Subheading = styled(SidebarSubheading)({
+  margin: '0 20px',
+});
+
+Subheading.propTypes = {
+  className: PropTypes.string,
+};
+
+Subheading.defaultProps = {
+  className: 'sidebar-subheading',
+};
+
+const Section = styled.section({
+  '& + section': {
+    marginTop: 20,
+  },
+  '&:last-of-type': {
+    marginBottom: 40,
+  },
+});
+
+const List = styled.div();
+List.displayName = 'List';
+
+const plain = {
+  color: 'inherit',
+  display: 'block',
+  textDecoration: 'none',
+  userSelect: 'none',
+};
 // @ts-ignore
-import { mockDataset } from './treeview/treeview.mockdata';
+const PlainRouterLink = styled(RouterLink)(plain);
+// @ts-ignore
+const PlainLink = styled.a(plain);
 
-export default {
-  Component: SidebarStories,
-  title: 'UI|Sidebar/SidebarStories',
-  decorators: [s => <Spaced>{s()}</Spaced>],
-  excludeStories: /.*Data$/,
+const Wrapper = styled.div({});
+
+const refinedViewMode = (viewMode: string) => {
+  return viewMode === 'settings' ? 'story' : viewMode;
 };
 
-export const withRootData = {
-  stories: mockDataset.withRoot,
-  storyId: '1-12-121',
+export const Link = ({ id, prefix, name, children, isLeaf, onClick, onKeyUp }) =>
+  isLeaf ? (
+    <Location>
+      {({ viewMode }) => (
+        <PlainRouterLink
+          title={name}
+          id={prefix + id}
+          to={`/${viewMode ? refinedViewMode(viewMode) : 'story'}/${id}`}
+          onKeyUp={onKeyUp}
+          onClick={onClick}
+        >
+          {children}
+        </PlainRouterLink>
+      )}
+    </Location>
+  ) : (
+    <PlainLink title={name} id={prefix + id} onKeyUp={onKeyUp} onClick={onClick}>
+      {children}
+    </PlainLink>
+  );
+Link.displayName = 'Link';
+Link.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  isLeaf: PropTypes.bool.isRequired,
+  prefix: PropTypes.string.isRequired,
+  onKeyUp: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
-export const withRoot = () => <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" />;
+interface StoriesProps {
+  loading: boolean;
+  stories: State['StoriesHash'];
+  storyId?: undefined | string;
+  className?: undefined | string;
+}
 
-export const noRootData = {
-  stories: mockDataset.noRoot,
-  storyId: '1-12-121',
-};
+const SidebarStories: FunctionComponent<StoriesProps> = React.memo(
+  ({ stories, storyId, loading, className, ...rest }) => {
+    const list = Object.entries(stories);
 
-export const noRoot = () => <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" />;
+    if (loading) {
+      return (
+        <Wrapper className={className}>
+          <SidebarItem loading />
+          <SidebarItem loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={1} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={2} loading />
+          <SidebarItem depth={3} loading />
+          <SidebarItem loading />
+          <SidebarItem loading />
+        </Wrapper>
+      );
+    }
 
-export const emptyData = {
-  stories: {},
-};
+    if (list.length < 1) {
+      return (
+        <Wrapper className={className}>
+          <Placeholder key="empty">
+            <Fragment key="title">No stories found</Fragment>
+            <Fragment>
+              Learn how to{' '}
+              <StyledLink href="https://storybook.js.org/basics/writing-stories/" target="_blank">
+                write stories
+              </StyledLink>
+            </Fragment>
+          </Placeholder>
+        </Wrapper>
+      );
+    }
 
-export const empty = () => <SidebarStories stories={{}} />;
+    return (
+      <Wrapper className={className}>
+        <TreeState
+          key="treestate"
+          dataset={stories}
+          prefix="explorer"
+          selectedId={storyId}
+          filter=""
+          List={List}
+          Head={SidebarItem}
+          Link={Link}
+          Leaf={SidebarItem}
+          Title={Subheading}
+          Section={Section}
+          Message={Placeholder}
+          // eslint-disable-next-line react/jsx-no-duplicate-props
+          Filter={Search}
+          {...rest}
+        />
+      </Wrapper>
+    );
+  }
+);
 
-export const loading = () => <SidebarStories loading stories={{}} />;
+export default SidebarStories;