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

package/src/mockdata.ts

@@ -0,0 +1,287 @@
+import type { API_HashEntry } from '@storybook/types';
+
+export type MockDataSet = Record<string, Record<string, Partial<API_HashEntry>>>;
+
+export const mockDataset: MockDataSet = {
+  withRoot: {
+    'group-1': {
+      type: 'group',
+      children: ['group-1--child-b1', 'group-1--child-b2'],
+      depth: 0,
+      id: 'group-1',
+      name: 'Group 1',
+    },
+    'group-1--child-b1': {
+      type: 'story',
+      prepared: true,
+      id: 'group-1--child-b1',
+      depth: 1,
+      name: 'Child B1',
+      parent: 'group-1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'group-1--child-b2': {
+      type: 'story',
+      prepared: true,
+      id: 'group-1--child-b2',
+      depth: 1,
+      name: 'Child B2',
+      parent: 'group-1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-1': {
+      type: 'root',
+      children: ['root-1-child-a1', 'root-1-child-a2'],
+      depth: 0,
+      id: 'root-1',
+      name: 'Root 1',
+    },
+    'root-1-child-a1': {
+      type: 'component',
+      id: 'root-1-child-a1',
+      parent: 'root-1',
+      depth: 1,
+      name: 'Child A1',
+      children: [],
+    },
+    'root-1-child-a2': {
+      type: 'component',
+      id: 'root-1-child-a2',
+      parent: 'root-1',
+      name: 'Child A2',
+      depth: 1,
+      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-2'],
+    },
+    'root-1-child-a2--grandchild-a1-1': {
+      type: 'story',
+      prepared: true,
+      id: 'root-1-child-a2--grandchild-a1-1',
+      parent: 'root-1-child-a2',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-1-child-a2--grandchild-a1-2': {
+      type: 'story',
+      prepared: true,
+      id: 'root-1-child-a2--grandchild-a1-2',
+      parent: 'root-1-child-a2',
+      depth: 2,
+      name: 'GrandChild A1.2',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-3': {
+      type: 'root',
+      children: ['root-3--child-a1', 'root-3-child-a2'],
+      depth: 0,
+      id: 'root-3',
+      name: 'Root 3',
+    },
+    'root-3--child-a1': {
+      type: 'story',
+      prepared: true,
+      id: 'root-3--child-a1',
+      depth: 1,
+      name: 'Child A1',
+      parent: 'root-3',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-3-child-a2': {
+      type: 'component',
+      id: 'root-3-child-a2',
+      name: 'Child A2',
+      depth: 1,
+      children: ['root-3-child-a2--grandchild-a1-1', 'root-3-child-a2--grandchild-a1-2'],
+      parent: 'root-3',
+    },
+    'root-3-child-a2--grandchild-a1-1': {
+      type: 'story',
+      prepared: true,
+      id: 'root-3-child-a2--grandchild-a1-1',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      parent: 'root-3-child-a2',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-3-child-a2--grandchild-a1-2': {
+      type: 'story',
+      prepared: true,
+      id: 'root-3-child-a2--grandchild-a1-2',
+      depth: 2,
+      name: 'GrandChild A1.2',
+      parent: 'root-3-child-a2',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+  },
+  noRoot: {
+    'root-1': {
+      children: ['root-1-child-a1', 'root-1-child-a2'],
+      type: 'group',
+      depth: 0,
+      id: 'root-1',
+      name: 'Parent A',
+    },
+    'group-1': {
+      children: ['group-1--child-b1', 'group-1--child-b2'],
+      type: 'component',
+      depth: 0,
+      id: 'group-1',
+      name: 'Parent B',
+    },
+    'root-1-child-a1': {
+      id: 'root-1-child-a1',
+      depth: 1,
+      name: 'Child A1',
+      type: 'story',
+      prepared: true,
+      parent: 'root-1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-1-child-a2--grandchild-a1-1': {
+      id: 'root-1-child-a2--grandchild-a1-1',
+      depth: 2,
+      name: 'GrandChild A1.1',
+      type: 'story',
+      prepared: true,
+      parent: 'root-1-child-a2',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-1-child-a2--grandchild-a1-2': {
+      id: 'root-1-child-a2--grandchild-a1-2',
+      depth: 2,
+      name: 'GrandChild A1.2',
+      type: 'story',
+      prepared: true,
+      parent: 'root-1-child-a2',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'root-1-child-a2': {
+      id: 'root-1-child-a2',
+      name: 'Child A2',
+      depth: 1,
+      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-2'],
+      type: 'component',
+      parent: 'root-1',
+    },
+    'group-1--child-b1': {
+      id: 'group-1--child-b1',
+      depth: 1,
+      name: 'Child B1',
+      type: 'story',
+      prepared: true,
+      parent: 'group-1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+    'group-1--child-b2': {
+      id: 'group-1--child-b2',
+      depth: 1,
+      name: 'Child B2',
+      type: 'story',
+      prepared: true,
+      parent: 'group-1',
+      title: '',
+      args: {},
+      initialArgs: {},
+      importPath: './importPath.js',
+    },
+  },
+};
+
+export const mockSelected = {
+  withRoot: {
+    'root-1': false,
+    'group-1': false,
+    'root-1-child-a1': false,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+    'root-3': false,
+    'root-3--child-a1': false,
+    'root-3-child-a2': false,
+    'root-3-child-a2--grandchild-a1-1': false,
+    'root-3-child-a2--grandchild-a1-2': false,
+  },
+  noRoot: {
+    'root-1': false,
+    'group-1': false,
+    'root-1-child-a1': false,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+  },
+};
+
+export const mockExpanded = {
+  withRoot: {
+    'root-1': true,
+    'group-1': false,
+    'root-1-child-a1': true,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+    'root-3': false,
+    'root-3--child-a1': false,
+    'root-3-child-a2': false,
+    'root-3-child-a2--grandchild-a1-1': false,
+    'root-3-child-a2--grandchild-a1-2': false,
+  },
+  noRoot: {
+    'root-1': true,
+    'group-1': false,
+    'root-1-child-a1': true,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+  },
+  noRootSecond: {
+    'root-1': true,
+    'group-1': false,
+    'root-1-child-a1': true,
+    'root-1-child-a2--grandchild-a1-1': true,
+    'root-1-child-a2--grandchild-a1-2': true,
+    'root-1-child-a2': true,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+  },
+};

package/src/types.ts

@@ -0,0 +1,78 @@
+import type { StoriesHash, State } from '@storybook/manager-api';
+// import type { ControllerStateAndHelpers } from 'downshift';
+import type { API_StatusState, API_StatusValue } from '@storybook/types';
+import * as Fuse from 'fuse.js';
+import { PressableProps } from 'react-native';
+
+export type Refs = State['refs'];
+export type RefType = Refs[keyof Refs] & { status?: API_StatusState };
+export type Item = StoriesHash[keyof StoriesHash];
+export type Dataset = Record<string, Item>;
+
+export interface CombinedDataset {
+  hash: Refs;
+  entries: [string, RefType][];
+}
+
+export interface ItemRef {
+  itemId: string;
+  refId: string;
+}
+export interface StoryRef {
+  storyId: string;
+  refId: string;
+}
+
+export type Highlight = ItemRef | null;
+export type Selection = StoryRef | null;
+
+// export interface Match {
+//   value: string;
+//   indices: [number, number][];
+//   key: 'name' | 'path';
+//   arrayIndex: number;
+// }
+
+export function isExpandType(x: any): x is ExpandType {
+  return !!(x && x.showAll);
+}
+// export function isSearchResult(x: any): x is SearchResult {
+//   return !!(x && x.item);
+// }
+export interface ExpandType {
+  showAll: () => void;
+  totalCount: number;
+  moreCount: number;
+}
+
+export type SearchItem = Item & {
+  refId: string;
+  path: string[];
+  status?: API_StatusValue;
+  showAll?: () => void;
+};
+
+export type SearchResult = Fuse.FuseResult<SearchItem>;
+
+export type SearchResultProps = SearchResult & {
+  icon: string;
+  isHighlighted: boolean;
+  onPress: PressableProps['onPress'];
+};
+
+// export type DownshiftItem = SearchResult | ExpandType;
+export type GetSearchItemProps = (args: {
+  item: SearchResult;
+  index: number;
+  key: string;
+}) => SearchResultProps;
+
+export type SearchChildrenFn = (args: {
+  query: string;
+  results: SearchResult[]; // TODO fix this type
+  isBrowsing: boolean;
+  closeMenu: (cb?: () => void) => void;
+  // getMenuProps: ControllerStateAndHelpers<DownshiftItem>['getMenuProps'];
+  getItemProps: GetSearchItemProps;
+  highlightedIndex: number | null;
+}) => React.ReactNode;

package/src/useExpanded.ts

@@ -0,0 +1,130 @@
+import type { StoriesHash } from '@storybook/manager-api';
+import { useStorybookApi } from '@storybook/manager-api';
+import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events';
+
+import type { Dispatch, /* MutableRefObject, */ Reducer } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
+// import type { Highlight } from './types';
+
+import { /* isAncestor */ getAncestorIds /* getDescendantIds */ } from './util/tree';
+
+export type ExpandedState = Record<string, boolean>;
+
+export interface ExpandAction {
+  ids: string[];
+  value: boolean;
+}
+
+export interface ExpandedProps {
+  //   containerRef: MutableRefObject<HTMLElement>;
+  //   isBrowsing: boolean;
+  refId: string;
+  data: StoriesHash;
+  initialExpanded?: ExpandedState;
+  rootIds: string[];
+  //   highlightedRef: MutableRefObject<Highlight>;
+  //   setHighlightedItemId: (storyId: string) => void;
+  selectedStoryId: string | null;
+  onSelectStoryId: (storyId: string) => void;
+}
+
+const initializeExpanded = ({
+  //   refId,
+  //   data,
+  initialExpanded,
+  //   highlightedRef,
+  rootIds,
+}: {
+  refId: string;
+  data: StoriesHash;
+  initialExpanded?: ExpandedState;
+  //   highlightedRef: MutableRefObject<Highlight>;
+  rootIds: string[];
+}) => {
+  const highlightedAncestors = [];
+  return [...rootIds, ...highlightedAncestors].reduce<ExpandedState>(
+    (acc, id) => Object.assign(acc, { [id]: id in initialExpanded ? initialExpanded[id] : true }),
+    {}
+  );
+};
+
+const noop = () => {};
+
+export const useExpanded = ({
+  //   containerRef,
+  //   isBrowsing,
+  refId,
+  data,
+  initialExpanded,
+  rootIds,
+  //   highlightedRef,
+  //   setHighlightedItemId,
+  // onSelectStoryId,
+  selectedStoryId,
+}: ExpandedProps): [ExpandedState, Dispatch<ExpandAction>] => {
+  const api = useStorybookApi();
+
+  // Track the set of currently expanded nodes within this tree.
+  // Root nodes are expanded by default.
+  const [expanded, setExpanded] = useReducer<
+    Reducer<ExpandedState, ExpandAction>,
+    {
+      refId: string;
+      data: StoriesHash;
+      //   highlightedRef: MutableRefObject<Highlight>;
+      rootIds: string[];
+      initialExpanded: ExpandedState;
+    }
+  >(
+    (state, { ids, value }) =>
+      ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
+    { refId, data, /* highlightedRef */ rootIds, initialExpanded },
+    initializeExpanded
+  );
+
+  //   const highlightElement = useCallback(
+  //     (element: Element) => {
+  //       setHighlightedItemId(element.getAttribute('data-item-id'));
+  //     //   scrollIntoView(element);
+  //     },
+  //     [setHighlightedItemId]
+  //   );
+
+  const updateExpanded = useCallback(({ ids, value }: ExpandAction) => {
+    setExpanded({ ids, value });
+    //   if (ids.length === 1) {
+    //     const element = containerRef.current?.querySelector(
+    //       `[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
+    //     );
+    //     if (element) highlightElement(element);
+    //   }
+  }, []);
+
+  // Expand the whole ancestry of the currently selected story whenever it changes.
+  useEffect(() => {
+    setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
+  }, [data, selectedStoryId]);
+
+  const collapseAll = useCallback(() => {
+    const ids = Object.keys(data).filter((id) => !rootIds.includes(id));
+    setExpanded({ ids, value: false });
+  }, [data, rootIds]);
+
+  const expandAll = useCallback(() => {
+    setExpanded({ ids: Object.keys(data), value: true });
+  }, [data]);
+
+  useEffect(() => {
+    if (!api) return noop;
+
+    api.on(STORIES_COLLAPSE_ALL, collapseAll);
+    api.on(STORIES_EXPAND_ALL, expandAll);
+
+    return () => {
+      api.off(STORIES_COLLAPSE_ALL, collapseAll);
+      api.off(STORIES_EXPAND_ALL, expandAll);
+    };
+  }, [api, collapseAll, expandAll]);
+
+  return [expanded, updateExpanded];
+};

package/src/useLastViewed.ts

@@ -0,0 +1,48 @@
+import debounce from 'lodash/debounce.js';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import store from 'store2';
+
+import type { Selection, StoryRef } from './types';
+
+const save = debounce((value) => store.set('lastViewedStoryIds', value), 1000);
+
+export const useLastViewed = (selection: Selection) => {
+  const initialLastViewedStoryIds = useMemo((): StoryRef[] => {
+    const items = store.get('lastViewedStoryIds');
+    if (!items || !Array.isArray(items)) return [];
+    if (!items.some((item) => typeof item === 'object' && item.storyId && item.refId)) return [];
+    return items;
+  }, []);
+
+  const lastViewedRef = useRef(initialLastViewedStoryIds);
+
+  const updateLastViewed = useCallback(
+    (story: StoryRef) => {
+      const items = lastViewedRef.current;
+      const index = items.findIndex(
+        ({ storyId, refId }) => storyId === story.storyId && refId === story.refId
+      );
+      if (index === 0) return;
+      if (index === -1) {
+        lastViewedRef.current = [story, ...items];
+      } else {
+        lastViewedRef.current = [story, ...items.slice(0, index), ...items.slice(index + 1)];
+      }
+      save(lastViewedRef.current);
+    },
+    [lastViewedRef]
+  );
+
+  useEffect(() => {
+    if (selection) updateLastViewed(selection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selection]);
+
+  return {
+    getLastViewed: useCallback(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: useCallback(() => {
+      lastViewedRef.current = lastViewedRef.current.slice(0, 1);
+      save(lastViewedRef.current);
+    }, [lastViewedRef]),
+  };
+};

package/src/util/status.tsx

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/types';
+
+import { useTheme } from '@storybook/react-native-theming';
+
+import { getDescendantIds } from './tree';
+
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+function CircleIcon({ height = 14, width = 14, color, ...props }: SvgProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path d="M14 7A7 7 0 110 7a7 7 0 0114 0z" fill={color} />
+    </Svg>
+  );
+}
+
+function SmallIcons(props: SvgProps) {
+  return <CircleIcon width={6} height={6} {...props} />;
+}
+
+function LoadingIcons(props: SvgProps) {
+  const theme = useTheme();
+  return (
+    <SmallIcons
+      color={theme.base === 'light' ? theme.color.mediumdark : theme.color.darker}
+      {...props}
+    />
+  );
+}
+
+export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error'];
+export const statusMapping: Record<API_StatusValue, [ReactElement | null, string | null]> = {
+  unknown: [null, null],
+  pending: [<LoadingIcons key="icon" />, 'currentColor'],
+  success: [<SmallIcons key="icon" color="green" />, 'currentColor'],
+  warn: [<SmallIcons key="icon" color="orange" />, '#A15C20'],
+  error: [<SmallIcons key="icon" color="red" />, 'brown'],
+};
+
+export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => {
+  return statusPriority.reduce(
+    (acc, status) => (statuses.includes(status) ? status : acc),
+    'unknown'
+  );
+};
+
+export function getGroupStatus(
+  collapsedData: {
+    [x: string]: Partial<API_HashEntry>;
+  },
+  status: API_StatusState
+): Record<string, API_StatusValue> {
+  return Object.values(collapsedData).reduce<Record<string, API_StatusValue>>((acc, item) => {
+    if (item.type === 'group' || item.type === 'component') {
+      const leafs = getDescendantIds(collapsedData as any, item.id, false)
+        .map((id) => collapsedData[id])
+        .filter((i) => i.type === 'story');
+
+      const combinedStatus = getHighestStatus(
+        leafs.flatMap((story) => Object.values(status?.[story.id] || {})).map((s) => s.status)
+      );
+
+      if (combinedStatus) {
+        acc[item.id] = combinedStatus;
+      }
+    }
+    return acc;
+  }, {});
+}

package/src/util/tree.ts

@@ -0,0 +1,91 @@
+import memoize from 'memoizerific';
+import type { SyntheticEvent } from 'react';
+import type { IndexHash } from '@storybook/manager-api';
+
+import { DEFAULT_REF_ID } from '../constants';
+import type { Item, RefType, Dataset, SearchItem } from '../types';
+
+export const createId = (itemId: string, refId?: string) =>
+  !refId || refId === DEFAULT_REF_ID ? itemId : `${refId}_${itemId}`;
+
+export const prevent = (e: SyntheticEvent) => {
+  e.preventDefault();
+  return false;
+};
+
+export const get = memoize(1000)((id: string, dataset: Dataset) => dataset[id]);
+
+export const getParent = memoize(1000)((id: string, dataset: Dataset) => {
+  const item = get(id, dataset);
+  return item && item.type !== 'root' ? get(item.parent, dataset) : undefined;
+});
+
+export const getParents = memoize(1000)((id: string, dataset: Dataset): Item[] => {
+  const parent = getParent(id, dataset);
+  return parent ? [parent, ...getParents(parent.id, dataset)] : [];
+});
+
+export const getAncestorIds = memoize(1000)((data: IndexHash, id: string): string[] =>
+  getParents(id, data).map((item) => item.id)
+);
+
+export const getDescendantIds = memoize(1000)(
+  (data: IndexHash, id: string, skipLeafs: boolean): string[] => {
+    const entry = data[id];
+    const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
+    return children.reduce((acc, childId) => {
+      const child = data[childId];
+      if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) return acc;
+      acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
+      return acc;
+    }, []);
+  }
+);
+
+export function getPath(item: Item, ref: RefType): string[] {
+  const parent = item.type !== 'root' && item.parent ? ref.index[item.parent] : null;
+  if (parent) return [...getPath(parent, ref), parent.name];
+  return ref.id === DEFAULT_REF_ID ? [] : [ref.title || ref.id];
+}
+
+export const searchItem = (item: Item, ref: RefType): SearchItem => {
+  return { ...item, refId: ref.id, path: getPath(item, ref) };
+};
+
+export function cycle<T>(array: T[], index: number, delta: number): number {
+  let next = index + (delta % array.length);
+  if (next < 0) next = array.length + next;
+  if (next >= array.length) next -= array.length;
+  return next;
+}
+
+export const getStateType = (
+  isLoading: boolean,
+  isAuthRequired: boolean,
+  isError: boolean,
+  isEmpty: boolean
+) => {
+  switch (true) {
+    case isAuthRequired:
+      return 'auth';
+    case isError:
+      return 'error';
+    case isLoading:
+      return 'loading';
+    case isEmpty:
+      return 'empty';
+    default:
+      return 'ready';
+  }
+};
+
+export const isAncestor = (element?: Element, maybeAncestor?: Element): boolean => {
+  if (!element || !maybeAncestor) return false;
+  if (element === maybeAncestor) return true;
+  return isAncestor(element.parentElement, maybeAncestor);
+};
+
+export const removeNoiseFromName = (storyName: string) => storyName.replaceAll(/(\s|-|_)/gi, '');
+
+export const isStoryHoistable = (storyName: string, componentName: string) =>
+  removeNoiseFromName(storyName) === removeNoiseFromName(componentName);