@storybook/react-native-ui 8.0.0-alpha.3

package/src/Tree.tsx

@@ -0,0 +1,441 @@
+import type {
+  API,
+  ComponentEntry,
+  GroupEntry,
+  State,
+  StoriesHash,
+  StoryEntry,
+} from '@storybook/manager-api';
+import { useStorybookApi } from '@storybook/manager-api';
+import { styled } from '@storybook/react-native-theming';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { IconButton } from './IconButton';
+import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
+import { CollapseIcon } from './icon/CollapseIcon';
+import type { ExpandAction, ExpandedState } from './useExpanded';
+import { useExpanded } from './useExpanded';
+import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
+import { getGroupStatus, statusMapping } from './util/status';
+import { Text, View } from 'react-native';
+import { ExpandAllIcon } from './icon/ExpandAllIcon';
+import { CollapseAllIcon } from './icon/CollapseAllIcon';
+import { Item } from './types';
+import { useLayout } from './LayoutProvider';
+
+// export type Item = StoriesHash[keyof StoriesHash];
+
+// export const createId = (itemId: string, refId?: string) =>
+//   !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
+
+// export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error'];
+
+// export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => {
+//   return statusPriority.reduce(
+//     (acc, status) => (statuses.includes(status) ? status : acc),
+//     'unknown'
+//   );
+// };
+
+interface NodeProps {
+  item: Item;
+  refId: string;
+  docsMode: boolean;
+  isOrphan: boolean;
+  isDisplayed: boolean;
+  color: string | undefined;
+  isSelected: boolean;
+  isFullyExpanded?: boolean;
+  isExpanded: boolean;
+  setExpanded: (action: ExpandAction) => void;
+  setFullyExpanded?: () => void;
+  onSelectStoryId: (itemId: string) => void;
+  status: State['status'][keyof State['status']];
+  api: API;
+}
+
+export const Node = React.memo<NodeProps>(function Node({
+  item,
+  //   status,
+  refId,
+  isOrphan,
+  isDisplayed,
+  isSelected,
+  isFullyExpanded,
+  color: _2,
+  setFullyExpanded,
+  isExpanded,
+  setExpanded,
+  onSelectStoryId,
+  api: _1,
+}) {
+  const { isDesktop, isMobile, closeMobileMenu } = useLayout();
+
+  if (!isDisplayed) {
+    return null;
+  }
+
+  const id = createId(item.id, refId);
+
+  if (item.type === 'story') {
+    const LeafNode = StoryNode;
+    // const statusValue = getHighestStatus(Object.values(status || {}).map((s) => s.status));
+    // const [icon, textColor] = statusMapping[statusValue];
+
+    return (
+      <LeafNodeStyleWrapper>
+        <LeafNode
+          selected={isSelected}
+          //   style={isSelected ? {} : { color: textColor }}
+          key={id}
+          //   href={getLink(item, refId)}
+          id={id}
+          depth={isOrphan ? item.depth : item.depth - 1}
+          onPress={() => {
+            onSelectStoryId(item.id);
+            if (isMobile) closeMobileMenu();
+          }}
+        >
+          {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+        </LeafNode>
+      </LeafNodeStyleWrapper>
+    );
+  }
+
+  if (item.type === 'root') {
+    return (
+      <RootNode
+        key={id}
+        id={id}
+        // className="sidebar-subheading"
+        // data-ref-id={refId}
+        // data-item-id={item.id}
+        // data-nodetype="root"
+      >
+        <CollapseButton
+          //   type="button"
+          data-action="collapse-root"
+          onPress={(event) => {
+            event.preventDefault();
+            setExpanded({ ids: [item.id], value: !isExpanded });
+          }}
+          aria-expanded={isExpanded}
+        >
+          <CollapseIcon isExpanded={isExpanded} />
+          <Text>{item.renderLabel?.(item) || item.name}</Text>
+        </CollapseButton>
+        {isExpanded && (
+          <IconButton
+            // className="sidebar-subheading-action"
+            aria-label={isFullyExpanded ? 'Expand' : 'Collapse'}
+            data-action="expand-all"
+            data-expanded={isFullyExpanded}
+            onPress={(event) => {
+              event.preventDefault();
+              setFullyExpanded();
+            }}
+          >
+            {isFullyExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />}
+          </IconButton>
+        )}
+      </RootNode>
+    );
+  }
+
+  if (item.type === 'component' || item.type === 'group') {
+    const BranchNode = item.type === 'component' ? ComponentNode : GroupNode;
+    return (
+      <BranchNode
+        key={id}
+        id={id}
+        // className="sidebar-item"
+        // data-ref-id={refId}
+        // data-item-id={item.id}
+        // data-parent-id={item.parent}
+        // data-nodetype={item.type === 'component' ? 'component' : 'group'}
+        // data-highlightable={isDisplayed}
+        aria-controls={item.children && item.children[0]}
+        aria-expanded={isExpanded}
+        depth={isOrphan ? item.depth : item.depth - 1}
+        isComponent={item.type === 'component'}
+        isExpandable={item.children && item.children.length > 0}
+        isExpanded={isExpanded}
+        onPress={(event) => {
+          event.preventDefault();
+          setExpanded({ ids: [item.id], value: !isExpanded });
+          if (item.type === 'component' && !isExpanded && isDesktop) onSelectStoryId(item.id);
+        }}
+      >
+        {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+      </BranchNode>
+    );
+  }
+
+  return null;
+});
+
+export const LeafNodeStyleWrapper = styled.View(({ theme }) => ({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingRight: 20,
+  color: theme.color.defaultText,
+  background: 'transparent',
+  minHeight: 28,
+  borderRadius: 4,
+}));
+
+export const RootNode = styled.View(({}) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginTop: 16,
+  marginBottom: 4,
+  minHeight: 28,
+}));
+
+export const RootNodeText = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1 - 1,
+  fontWeight: theme.typography.weight.bold,
+  color: theme.textMutedColor,
+  lineHeight: 16,
+  letterSpacing: 2.5,
+  //   letterSpacing: '0.16em',
+  textTransform: 'uppercase',
+}));
+
+const CollapseButton = styled.TouchableOpacity(({}) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  paddingVertical: 0,
+  paddingHorizontal: 8,
+  borderRadius: 4,
+  //   transition: 'color 150ms, box-shadow 150ms',
+  gap: 6,
+  alignItems: 'center',
+  cursor: 'pointer',
+  height: 28,
+}));
+
+export const Tree = React.memo<{
+  isBrowsing: boolean;
+  isMain: boolean;
+  status?: State['status'];
+  refId: string;
+  data: StoriesHash;
+  docsMode: boolean;
+  selectedStoryId: string | null;
+  onSelectStoryId: (storyId: string) => void;
+}>(function Tree({
+  // isBrowsing,
+  isMain,
+  refId,
+  data,
+  status,
+  docsMode,
+  selectedStoryId,
+  onSelectStoryId,
+}) {
+  const containerRef = useRef<View>(null);
+  const api = useStorybookApi();
+
+  // Find top-level nodes and group them so we can hoist any orphans and expand any roots.
+  const [rootIds, orphanIds, initialExpanded] = useMemo(
+    () =>
+      Object.keys(data).reduce<[string[], string[], ExpandedState]>(
+        (acc, id) => {
+          const item = data[id];
+          if (item.type === 'root') acc[0].push(id);
+          else if (!item.parent) acc[1].push(id);
+          if (item.type === 'root' && item.startCollapsed) acc[2][id] = false;
+          return acc;
+        },
+        [[], [], {}]
+      ),
+    [data]
+  );
+
+  // Create a map of expandable descendants for each root/orphan item, which is needed later.
+  // Doing that here is a performance enhancement, as it avoids traversing the tree again later.
+  const { expandableDescendants } = useMemo(() => {
+    return [...orphanIds, ...rootIds].reduce(
+      (acc, nodeId) => {
+        acc.expandableDescendants[nodeId] = getDescendantIds(data, nodeId, false).filter(
+          (d) => !['story', 'docs'].includes(data[d].type)
+        );
+        return acc;
+      },
+      { orphansFirst: [] as string[], expandableDescendants: {} as Record<string, string[]> }
+    );
+  }, [data, rootIds, orphanIds]);
+
+  // Create a list of component IDs which should be collapsed into their (only) child.
+  // That is:
+  //  - components with a single story child with the same name
+  //  - components with only a single docs child
+  const singleStoryComponentIds = useMemo(() => {
+    return Object.keys(data).filter((id) => {
+      const entry = data[id];
+      if (entry.type !== 'component') return false;
+
+      const { children = [], name } = entry;
+      if (children.length !== 1) return false;
+
+      const onlyChild = data[children[0]];
+
+      if (onlyChild.type === 'docs') return true;
+      if (onlyChild.type === 'story') return isStoryHoistable(onlyChild.name, name);
+      return false;
+    });
+  }, [data]);
+
+  // Omit single-story components from the list of nodes.
+  const collapsedItems = useMemo(
+    () => Object.keys(data).filter((id) => !singleStoryComponentIds.includes(id)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [singleStoryComponentIds]
+  );
+
+  // Rewrite the dataset to place the child story in place of the component.
+  const collapsedData = useMemo(() => {
+    return singleStoryComponentIds.reduce(
+      (acc, id) => {
+        const { children, parent, name } = data[id] as ComponentEntry;
+        const [childId] = children;
+        if (parent) {
+          const siblings = [...(data[parent] as GroupEntry).children];
+          siblings[siblings.indexOf(id)] = childId;
+          acc[parent] = { ...data[parent], children: siblings } as GroupEntry;
+        }
+        acc[childId] = {
+          ...data[childId],
+          name,
+          parent,
+          depth: data[childId].depth - 1,
+        } as StoryEntry;
+        return acc;
+      },
+      { ...data }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
+  const ancestry = useMemo(() => {
+    return collapsedItems.reduce(
+      (acc, id) => Object.assign(acc, { [id]: getAncestorIds(collapsedData, id) }),
+      {} as { [key: string]: string[] }
+    );
+  }, [collapsedItems, collapsedData]);
+
+  // Track expanded nodes, keep it in sync with props and enable keyboard shortcuts.
+  const [expanded, setExpanded] = useExpanded({
+    // containerRef,
+    // isBrowsing,
+    refId,
+    data: collapsedData,
+    initialExpanded,
+    rootIds,
+    // highlightedRef,
+    // setHighlightedItemId,
+    selectedStoryId,
+    onSelectStoryId,
+  });
+
+  const groupStatus = useMemo(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
+
+  const treeItems = useMemo(() => {
+    return collapsedItems.map((itemId) => {
+      const item = collapsedData[itemId];
+      const id = createId(itemId, refId);
+
+      if (item.type === 'root') {
+        const descendants = expandableDescendants[item.id];
+        const isFullyExpanded = descendants.every((d: string) => expanded[d]);
+        return (
+          // @ts-expect-error (TODO)
+          <Root
+            key={id}
+            item={item}
+            refId={refId}
+            isOrphan={false}
+            isDisplayed
+            isSelected={selectedStoryId === itemId}
+            isExpanded={!!expanded[itemId]}
+            setExpanded={setExpanded}
+            isFullyExpanded={isFullyExpanded}
+            expandableDescendants={descendants}
+            onSelectStoryId={onSelectStoryId}
+          />
+        );
+      }
+
+      const isDisplayed = !item.parent || ancestry[itemId].every((a: string) => expanded[a]);
+      const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null;
+
+      return (
+        <Node
+          api={api}
+          key={id}
+          item={item}
+          status={status?.[itemId]}
+          refId={refId}
+          color={color}
+          docsMode={docsMode}
+          isOrphan={orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`))}
+          isDisplayed={isDisplayed}
+          isSelected={selectedStoryId === itemId}
+          isExpanded={!!expanded[itemId]}
+          setExpanded={setExpanded}
+          onSelectStoryId={onSelectStoryId}
+        />
+      );
+    });
+  }, [
+    ancestry,
+    api,
+    collapsedData,
+    collapsedItems,
+    docsMode,
+    expandableDescendants,
+    expanded,
+    groupStatus,
+    onSelectStoryId,
+    orphanIds,
+    refId,
+    selectedStoryId,
+    setExpanded,
+    status,
+  ]);
+  return (
+    <Container ref={containerRef} hasOrphans={isMain && orphanIds.length > 0}>
+      {treeItems}
+    </Container>
+  );
+});
+
+const Container = styled.View<{ hasOrphans: boolean }>((props) => ({
+  marginTop: props.hasOrphans ? 20 : 0,
+  marginBottom: 20,
+}));
+
+const Root = React.memo<NodeProps & { expandableDescendants: string[] }>(function Root({
+  setExpanded,
+  isFullyExpanded,
+  expandableDescendants,
+  ...props
+}) {
+  const setFullyExpanded = useCallback(
+    () => setExpanded({ ids: expandableDescendants, value: !isFullyExpanded }),
+    [setExpanded, isFullyExpanded, expandableDescendants]
+  );
+  return (
+    <Node
+      {...props}
+      setExpanded={setExpanded}
+      isFullyExpanded={isFullyExpanded}
+      setFullyExpanded={setFullyExpanded}
+    />
+  );
+});

package/src/TreeNode.stories.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+// import { HighlightStyles } from './HighlightStyles';
+// import { LeafNodeStyleWrapper } from './Tree';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
+import { View } from 'react-native';
+
+// import { IconSymbols } from './IconSymbols';
+
+const meta = {
+  title: 'UI/Sidebar/TreeNode',
+  parameters: { layout: 'fullscreen' },
+  component: StoryNode,
+} satisfies Meta<typeof StoryNode>;
+export default meta;
+
+export const Types: StoryObj<typeof meta> = {
+  render: () => (
+    <View style={{ flex: 1 }}>
+      <ComponentNode>Component</ComponentNode>
+      <GroupNode>Group</GroupNode>
+      <StoryNode>Story</StoryNode>
+    </View>
+  ),
+  args: {
+    children: <></>,
+  },
+};
+
+export const Expandable = () => (
+  <>
+    <ComponentNode isExpandable>Collapsed component</ComponentNode>
+    <ComponentNode isExpandable isExpanded>
+      Expanded component
+    </ComponentNode>
+    <GroupNode isExpandable>Collapsed group</GroupNode>
+    <GroupNode isExpandable isExpanded>
+      Expanded group
+    </GroupNode>
+  </>
+);
+
+export const ExpandableLongName = () => (
+  <>
+    <ComponentNode isExpandable>
+      Collapsed component with a very very very very very very very very very very very very very
+      very very very very very very veryvery very very very very very very very very veryvery very
+      very very very very very very very veryvery very very very very very very very very veryvery
+      very very very very very very very very veryvery very very very very very very very very
+      veryvery very very very very very very very very veryvery very very very very very very very
+      very very long name
+    </ComponentNode>
+    <ComponentNode isExpandable isExpanded>
+      Expanded component with a very very very very very very very very very very very very very
+      very very very very very very veryvery very very very very very very very very veryvery very
+      very very very very very very very veryvery very very very very very very very very veryvery
+      very very very very very very very very veryvery very very very very very very very very
+      veryvery very very very very very very very very veryvery very very very very very very very
+      very very long name
+    </ComponentNode>
+    <GroupNode isExpandable>
+      Collapsed group with a very very very very very very very very very very very very very very
+      very very very very very veryvery very very very very very very very very veryvery very very
+      very very very very very very veryvery very very very very very very very very veryvery very
+      very very very very very very very veryvery very very very very very very very very veryvery
+      very very very very very very very very veryvery very very very very very very very very very
+      long name
+    </GroupNode>
+    <GroupNode isExpandable isExpanded>
+      Expanded group with a very very very very very very very very very very very very very very
+      very very very very very veryvery very very very very very very very very veryvery very very
+      very very very very very very veryvery very very very very very very very very veryvery very
+      very very very very very very very veryvery very very very very very very very very veryvery
+      very very very very very very very very veryvery very very very very very very very very very
+      long name
+    </GroupNode>
+  </>
+);
+
+export const Nested = () => (
+  <>
+    <GroupNode isExpandable isExpanded depth={0}>
+      Zero
+    </GroupNode>
+    <GroupNode isExpandable isExpanded depth={1}>
+      One
+    </GroupNode>
+    <StoryNode depth={2}>Two</StoryNode>
+    <ComponentNode isExpandable isExpanded depth={2}>
+      Two
+    </ComponentNode>
+    <StoryNode depth={3}>Three</StoryNode>
+  </>
+);
+export const Selection = () => (
+  <>
+    <StoryNode selected={false}>Default story</StoryNode>
+    <StoryNode selected>Selected story</StoryNode>
+  </>
+);
+
+export const SelectionWithLongName = () => (
+  <>
+    <StoryNode>
+      Default story with a very very very very very very very very very very very very very very
+      very very very very very veryvery very very very very very very very very veryvery very very
+      very very very very very very veryvery very very very very very very very very veryvery very
+      very very very very very very very veryvery very very very very very very very very veryvery
+      very very very very very very very very veryvery very very very very very very very very very
+      long name
+    </StoryNode>
+
+    <StoryNode selected>
+      Selected story with a very very very very very very very very very very very very very very
+      very very very very very veryvery very very very very very very very very veryvery very very
+      very very very very very very veryvery very very very very very very very very veryvery very
+      very very very very very very very veryvery very very very very very very very very veryvery
+      very very very very very very very very veryvery very very very very very very very very very
+      long name
+    </StoryNode>
+  </>
+);

package/src/TreeNode.tsx

@@ -0,0 +1,146 @@
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { ComponentIcon } from './icon/ComponentIcon';
+import { GroupIcon } from './icon/GroupIcon';
+
+import { StoryIcon } from './icon/StoryIcon';
+import { CollapseIcon } from './icon/CollapseIcon';
+import React, { ComponentProps, FC } from 'react';
+import { transparentize } from 'polished';
+
+export interface NodeProps {
+  children: React.ReactNode | React.ReactNode[];
+  isExpandable?: boolean;
+  isExpanded?: boolean;
+}
+
+const BranchNodeText = styled.Text<{ isSelected?: boolean }>(({ theme }) => ({
+  textAlign: 'left',
+  fontSize: theme.typography.size.s2,
+  flexShrink: 1,
+}));
+
+const BranchNode = styled.TouchableOpacity<{
+  depth?: number;
+  isExpandable?: boolean;
+  isExpanded?: boolean;
+  isComponent?: boolean;
+  isSelected?: boolean;
+}>(({ depth = 0, isExpandable = false, theme }) => ({
+  width: '100%',
+  border: 'none',
+  cursor: 'pointer',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  alignSelf: 'flex-start',
+  paddingLeft: (isExpandable ? 8 : 22) + depth * 18,
+
+  background: 'transparent',
+  minHeight: 28,
+  borderRadius: 4,
+  gap: 6,
+  paddingTop: 5,
+  paddingBottom: 4,
+
+  // will this actually do anything?
+  '&:hover, &:focus': {
+    background: transparentize(0.93, theme.color.secondary),
+    outline: 'none',
+  },
+}));
+
+const LeafNode = styled.TouchableOpacity<{ depth?: number; selected?: boolean }>(
+  ({ depth = 0, selected, theme }) => ({
+    alignSelf: 'flex-start',
+    cursor: 'pointer',
+    color: 'inherit',
+    display: 'flex',
+    gap: 6,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingLeft: 22 + depth * 18,
+    paddingTop: 5,
+    paddingBottom: 4,
+    backgroundColor: selected ? theme.color.secondary : undefined,
+    // flex: 1,
+    // not sure 👇
+    width: '100%',
+    borderRadius: 4,
+    paddingRight: 20,
+    minHeight: 28,
+  })
+);
+
+const LeafNodeText = styled.Text<{ depth?: number; selected?: boolean }>(({ theme, selected }) => ({
+  fontSize: theme.typography.size.s2,
+  flexShrink: 1,
+  color: selected ? theme.color.lightest : theme.color.defaultText,
+}));
+
+const Wrapper = styled.View({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 6,
+  marginTop: 2,
+});
+
+export const GroupNode: FC<
+  ComponentProps<typeof BranchNode> & { isExpanded?: boolean; isExpandable?: boolean }
+> = React.memo(function GroupNode({
+  children,
+  isExpanded = false,
+  isExpandable = false,
+  ...props
+}) {
+  const theme = useTheme();
+
+  return (
+    <BranchNode isExpandable={isExpandable} {...props}>
+      <Wrapper>
+        {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
+        <GroupIcon
+          width="14"
+          height="14"
+          color={theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet}
+        />
+      </Wrapper>
+      <BranchNodeText>{children}</BranchNodeText>
+    </BranchNode>
+  );
+});
+
+export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
+  function ComponentNode({ children, isExpanded, isExpandable, ...props }) {
+    const theme = useTheme();
+    return (
+      <BranchNode isExpandable={isExpandable} {...props}>
+        <Wrapper>
+          {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
+          <ComponentIcon width={12} height={12} color={theme.color.secondary} />
+        </Wrapper>
+        <BranchNodeText>{children}</BranchNodeText>
+      </BranchNode>
+    );
+  }
+);
+
+export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function StoryNode({
+  children,
+  ...props
+}) {
+  const theme = useTheme();
+
+  return (
+    <LeafNode {...props}>
+      <Wrapper>
+        <StoryIcon
+          width={14}
+          height={14}
+          color={props.selected ? theme.color.lightest : theme.color.seafoam}
+        />
+      </Wrapper>
+      <LeafNodeText selected={props.selected}>{children}</LeafNodeText>
+    </LeafNode>
+  );
+});