UI: Update sidebar status indicators and tooltips

code/core/src/components/components/tooltip/ListItem.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, ComponentProps } from 'react';
+import type { ReactNode, ComponentProps, SyntheticEvent } from 'react';
 import React from 'react';
 import { styled } from '@storybook/core/theming';
 import memoize from 'memoizerific';
@@ -113,15 +113,19 @@ const Left = styled.span<LeftProps>(
 
 export interface ItemProps {
  disabled?: boolean;
+ href?: string;
+ onClick?: (event: SyntheticEvent, ...args: any[]) => any;
 }
 
-const Item = styled.a<ItemProps>(
+const Item = styled.div<ItemProps>(
  ({ theme }) => ({
+ width: '100%',
+ border: 'none',
+ background: 'none',
  fontSize: theme.typography.size.s1,
  transition: 'all 150ms ease-out',
  color: theme.color.dark,
  textDecoration: 'none',
- cursor: 'pointer',
  justifyContent: 'space-between',
 
  lineHeight: '18px',
@@ -132,43 +136,34 @@ const Item = styled.a<ItemProps>(
  '& > * + *': {
  paddingLeft: 10,
  },
-
- '&:hover': {
- background: theme.background.hoverable,
- },
- '&:hover svg': {
- opacity: 1,
- },
  }),
- ({ disabled }) =>
- disabled
- ? {
- cursor: 'not-allowed',
- }
- : {}
+ ({ theme, href, onClick }) =>
+ (href || onClick) && {
+ cursor: 'pointer',
+ '&:hover': {
+ background: theme.background.hoverable,
+ },
+ '&:hover svg': {
+ opacity: 1,
+ },
+ },
+ ({ disabled }) => disabled && { cursor: 'not-allowed' }
 );
 
-const getItemProps = memoize(100)((onClick, href, LinkWrapper) => {
- const result = {};
-
- if (onClick) {
- Object.assign(result, {
- onClick,
- });
- }
- if (href) {
- Object.assign(result, {
- href,
- });
- }
- if (LinkWrapper && href) {
- Object.assign(result, {
- to: href,
+const getItemProps = memoize(100)((onClick, href, LinkWrapper) => ({
+ ...(onClick && {
+ as: 'button',
+ onClick,
+ }),
+ ...(href && {
+ as: 'a',
+ href,
+ ...(LinkWrapper && {
  as: LinkWrapper,
- });
- }
- return result;
-});
+  to: href,
+  }),
+ }),
+}));
 
 export type LinkWrapperType = (props: any) => ReactNode;
 
@@ -200,11 +195,11 @@ const ListItem = ({
  LinkWrapper = undefined,
  ...rest
 }: ListItemProps) => {
- const itemProps = getItemProps(onClick, href, LinkWrapper);
  const commonProps = { active, disabled };
+ const itemProps = getItemProps(onClick, href, LinkWrapper);
 
  return (
- <Item {...commonProps} {...rest} {...itemProps}>
+ <Item {...rest} {...commonProps} {...itemProps}>
  {icon && <Left {...commonProps}>{icon}</Left>}
  {title || center ? (
  <Center isIndented={!!(!icon && isIndented)}>

code/core/src/components/components/tooltip/TooltipLinkList.tsx

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from 'react';
+import type { ComponentProps, SyntheticEvent } from 'react';
 import React, { useCallback } from 'react';
 import { styled } from '@storybook/core/theming';
 
@@ -19,54 +19,38 @@ const List = styled.div(
 
 export interface Link extends Omit<ListItemProps, 'onClick'> {
  id: string;
- isGatsby?: boolean;
- onClick?: (event: SyntheticEvent, item: ListItemProps) => void;
+ onClick?: (
+ event: SyntheticEvent,
+ item: Pick<ListItemProps, 'id' | 'active' | 'disabled' | 'title'>
+ ) => void;
 }
 
 interface ItemProps extends Link {
  isIndented?: boolean;
 }
 
-const Item = (props: ItemProps) => {
- const { LinkWrapper, onClick: onClickFromProps, id, isIndented, ...rest } = props;
- const { title, href, active } = rest;
- const onClick = useCallback(
- (event: SyntheticEvent) => {
- // @ts-expect-error (non strict)
- onClickFromProps(event, rest);
- },
- [onClickFromProps]
- );
-
- const hasOnClick = !!onClickFromProps;
+const Item = ({ id, onClick, ...rest }: ItemProps) => {
+ const { active, disabled, title } = rest;
 
- return (
- <ListItem
- title={title}
- active={active}
- href={href}
- id={`list-item-${id}`}
- LinkWrapper={LinkWrapper}
- isIndented={isIndented}
- {...rest}
- {...(hasOnClick ? { onClick } : {})}
- />
+ const handleClick = useCallback(
+ (event: SyntheticEvent) => onClick?.(event, { id, active, disabled, title }),
+ [onClick, id, active, disabled, title]
  );
+
+ return <ListItem id={`list-item-${id}`} {...rest} {...(onClick && { onClick: handleClick })} />;
 };
 
-export interface TooltipLinkListProps {
+export interface TooltipLinkListProps extends ComponentProps<typeof List> {
  links: Link[];
  LinkWrapper?: LinkWrapperType;
 }
 
-// @ts-expect-error (non strict)
-export const TooltipLinkList = ({ links, LinkWrapper = null }: TooltipLinkListProps) => {
- const hasIcon = links.some((link) => link.icon);
+export const TooltipLinkList = ({ links, LinkWrapper, ...props }: TooltipLinkListProps) => {
+ const isIndented = links.some((link) => link.icon);
  return (
- <List>
- {links.map(({ isGatsby, ...p }) => (
- // @ts-expect-error (non strict)
- <Item key={p.id} LinkWrapper={isGatsby ? LinkWrapper : null} isIndented={hasIcon} {...p} />
+ <List {...props}>
+ {links.map((link) => (
+ <Item key={link.id} isIndented={isIndented} LinkWrapper={LinkWrapper} {...link} />
  ))}
  </List>
  );

code/core/src/manager/components/sidebar/IconSymbols.tsx

@@ -18,6 +18,9 @@ const GROUP_ID = 'icon--group';
 const COMPONENT_ID = 'icon--component';
 const DOCUMENT_ID = 'icon--document';
 const STORY_ID = 'icon--story';
+const ERROR_ID = 'icon--error';
+const WARNING_ID = 'icon--warning';
+const DOT_ID = 'icon--dot';
 
 export const IconSymbols: FC = () => {
  return (
@@ -62,14 +65,30 @@ export const IconSymbols: FC = () => {
  fill="currentColor"
  />
  </symbol>
+ <symbol id={ERROR_ID}>
+ <circle cx="7" cy="7" r="3" fill="none" stroke="currentColor" />
+ </symbol>
+ <symbol id={WARNING_ID}>
+ <path d="M3.5 9.5H10.5" stroke="currentColor" strokeLinecap="round" />
+ <path d="M7 3.5L10.5 9.5" stroke="currentColor" strokeLinecap="round" />
+ <path d="M3.5 9.5L7 3.5" stroke="currentColor" strokeLinecap="round" />
+ </symbol>
+ <symbol id={DOT_ID}>
+ <circle cx="3" cy="3" r="3" fill="currentColor" />
+ </symbol>
  </Svg>
  );
 };
 
-export const UseSymbol: FC<{ type: 'group' | 'component' | 'document' | 'story' }> = ({ type }) => {
+export const UseSymbol: FC<{
+ type: 'group' | 'component' | 'document' | 'story' | 'error' | 'warning' | 'dot';
+}> = ({ type }) => {
  if (type === 'group') return <use xlinkHref={`#${GROUP_ID}`} />;
  if (type === 'component') return <use xlinkHref={`#${COMPONENT_ID}`} />;
  if (type === 'document') return <use xlinkHref={`#${DOCUMENT_ID}`} />;
  if (type === 'story') return <use xlinkHref={`#${STORY_ID}`} />;
+ if (type === 'error') return <use xlinkHref={`#${ERROR_ID}`} />;
+ if (type === 'warning') return <use xlinkHref={`#${WARNING_ID}`} />;
+ if (type === 'dot') return <use xlinkHref={`#${DOT_ID}`} />;
  return null;
 };

code/core/src/manager/components/sidebar/StatusContext.tsx

@@ -0,0 +1,37 @@
+import type { API_StatusObject, API_StatusState, API_StatusValue, StoryId } from '@storybook/types';
+import { createContext, useContext } from 'react';
+import type { ComponentEntry, GroupEntry, StoriesHash } from '../../../manager-api';
+import { getDescendantIds } from '../../utils/tree';
+
+export const StatusContext = createContext<{
+ data?: StoriesHash;
+ status?: API_StatusState;
+ groupStatus?: Record<StoryId, API_StatusValue>;
+}>({});
+
+export const useStatusSummary = (item: GroupEntry | ComponentEntry) => {
+ const { data, status, groupStatus } = useContext(StatusContext);
+ if (
+ !data ||
+ !status ||
+ !groupStatus ||
+ !['pending', 'warn', 'error'].includes(groupStatus[item.id])
+ ) {
+ return { errors: {}, warnings: {} };
+ }
+
+ return getDescendantIds(data, item.id, false).reduce<{
+ errors: Record<StoryId, API_StatusObject[]>;
+ warnings: Record<StoryId, API_StatusObject[]>;
+ }>(
+ (acc, storyId) => {
+ const statuses = Object.values(status[storyId] || {});
+ const errs = statuses.filter((v) => v.status === 'error');
+ const warns = statuses.filter((v) => v.status === 'warn');
+ if (errs.length) acc.errors[storyId] = errs;
+ if (warns.length) acc.warnings[storyId] = warns;
+ return acc;
+ },
+ { errors: {}, warnings: {} }
+ );
+};