@storybook/react-native-ui-lite 9.0.0-beta.11

package/src/mockdata.ts

@@ -0,0 +1,287 @@
+import type { API_HashEntry } from 'storybook/internal/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,66 @@
+import type { StoriesHash, State } from 'storybook/internal/manager-api';
+import type { StatusValue, StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
+import * as Fuse from 'fuse.js';
+import { PressableProps } from 'react-native';
+
+export type Refs = State['refs'];
+export type RefType = Refs[keyof Refs] & { allStatuses?: StatusesByStoryIdAndTypeId };
+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 function isExpandType(x: any): x is ExpandType {
+  return !!(x && x.showAll);
+}
+
+export interface ExpandType {
+  showAll: () => void;
+  totalCount: number;
+  moreCount: number;
+}
+
+export type SearchItem = Item & {
+  refId: string;
+  path: string[];
+  status?: StatusValue;
+  showAll?: () => void;
+};
+
+export type SearchResult = Fuse.FuseResult<SearchItem>;
+
+export type SearchResultProps = SearchResult & {
+  icon: string;
+  isHighlighted: boolean;
+  onPress: PressableProps['onPress'];
+};
+
+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;
+  getItemProps: GetSearchItemProps;
+  highlightedIndex: number | null;
+}) => React.ReactNode;

package/src/util/StoryHash.ts

@@ -0,0 +1,249 @@
+import { sanitize } from '@storybook/csf';
+import { type API, type State } from 'storybook/internal/manager-api';
+import type {
+  API_ComponentEntry,
+  API_DocsEntry,
+  API_GroupEntry,
+  API_HashEntry,
+  API_IndexHash,
+  API_PreparedStoryIndex,
+  API_Provider,
+  API_RootEntry,
+  API_StoryEntry,
+  DocsOptions,
+  IndexEntry,
+  StoryIndexV2,
+  StoryIndexV3,
+} from 'storybook/internal/types';
+import countBy from 'lodash/countBy.js';
+import { dedent } from 'ts-dedent';
+import isEqual from 'lodash/isEqual.js';
+import mergeWith from 'lodash/mergeWith.js';
+import { logger } from 'storybook/internal/client-logger';
+
+type ToStoriesHashOptions = {
+  provider: API_Provider<API>;
+  docsOptions: DocsOptions;
+  filters: State['filters'];
+  status: State['status'];
+};
+
+const merge = <TObj = any>(a: TObj, b: Partial<TObj>) =>
+  mergeWith({}, a, b, (objValue: TObj, srcValue: Partial<TObj>) => {
+    if (Array.isArray(srcValue) && Array.isArray(objValue)) {
+      srcValue.forEach((s) => {
+        const existing = objValue.find((o) => o === s || isEqual(o, s));
+        if (!existing) {
+          objValue.push(s);
+        }
+      });
+
+      return objValue;
+    }
+    if (Array.isArray(objValue)) {
+      logger.log(['the types mismatch, picking', objValue]);
+      return objValue;
+    }
+    return undefined;
+  });
+
+const TITLE_PATH_SEPARATOR = /\s*\/\s*/;
+
+export const transformStoryIndexToStoriesHash = (
+  input: API_PreparedStoryIndex | StoryIndexV2 | StoryIndexV3,
+  { provider, docsOptions, filters, status }: ToStoriesHashOptions
+): API_IndexHash | any => {
+  if (!input.v) {
+    throw new Error('Composition: Missing stories.json version');
+  }
+
+  let index = input;
+  index = index.v === 2 ? transformStoryIndexV2toV3(index as any) : index;
+  index = index.v === 3 ? transformStoryIndexV3toV4(index as any) : index;
+  index = index as API_PreparedStoryIndex;
+
+  const entryValues = Object.values(index.entries).filter((entry: any) => {
+    let result = true;
+
+    Object.values(filters).forEach((filter: any) => {
+      if (result === false) {
+        return;
+      }
+      result = filter({ ...entry, status: status[entry.id] });
+    });
+
+    return result;
+  });
+
+  const { sidebar = {} } = provider.getConfig();
+  const { showRoots, collapsedRoots = [], renderLabel }: any = sidebar;
+
+  const setShowRoots = typeof showRoots !== 'undefined';
+
+  const storiesHashOutOfOrder = entryValues.reduce((acc: any, item: any) => {
+    if (docsOptions.docsMode && item.type !== 'docs') {
+      return acc;
+    }
+
+    // First, split the title into a set of names, separated by '/' and trimmed.
+    const { title } = item;
+    const groups = title.trim().split(TITLE_PATH_SEPARATOR);
+    const root = (!setShowRoots || showRoots) && groups.length > 1 ? [groups.shift()] : [];
+    const names = [...root, ...groups];
+
+    // Now create a "path" or sub id for each name
+    const paths = names.reduce((list, name, idx) => {
+      const parent = idx > 0 && list[idx - 1];
+      const id = sanitize(parent ? `${parent}-${name}` : name!);
+
+      if (parent === id) {
+        throw new Error(
+          dedent`
+          Invalid part '${name}', leading to id === parentId ('${id}'), inside title '${title}'
+          
+          Did you create a path that uses the separator char accidentally, such as 'Vue <docs/>' where '/' is a separator char? See https://github.com/storybookjs/storybook/issues/6128
+          `
+        );
+      }
+      list.push(id);
+      return list;
+    }, [] as string[]);
+
+    // Now, let's add an entry to the hash for each path/name pair
+    paths.forEach((id: any, idx: any) => {
+      // The child is the next path, OR the story/docs entry itself
+      const childId = paths[idx + 1] || item.id;
+
+      if (root.length && idx === 0) {
+        acc[id] = merge<API_RootEntry>((acc[id] || {}) as API_RootEntry, {
+          type: 'root',
+          id,
+          name: names[idx],
+          depth: idx,
+          renderLabel,
+          startCollapsed: collapsedRoots.includes(id),
+          // Note that this will later get appended to the previous list of children (see below)
+          children: [childId],
+        });
+        // Usually the last path/name pair will be displayed as a component,
+        // *unless* there are other stories that are more deeply nested under it
+        //
+        // For example, if we had stories for both
+        //   - Atoms / Button
+        //   - Atoms / Button / LabelledButton
+        //
+        // In this example the entry for 'atoms-button' would *not* be a component.
+      } else if ((!acc[id] || acc[id].type === 'component') && idx === paths.length - 1) {
+        acc[id] = merge<API_ComponentEntry>((acc[id] || {}) as API_ComponentEntry, {
+          type: 'component',
+          id,
+          name: names[idx],
+          parent: paths[idx - 1],
+          depth: idx,
+          renderLabel,
+          ...(childId && {
+            children: [childId],
+          }),
+        });
+      } else {
+        acc[id] = merge<API_GroupEntry>((acc[id] || {}) as API_GroupEntry, {
+          type: 'group',
+          id,
+          name: names[idx],
+          parent: paths[idx - 1],
+          depth: idx,
+          renderLabel,
+          ...(childId && {
+            children: [childId],
+          }),
+        });
+      }
+    });
+
+    // Finally add an entry for the docs/story itself
+    acc[item.id] = {
+      type: 'story',
+      ...item,
+      depth: paths.length,
+      parent: paths[paths.length - 1],
+      renderLabel,
+      prepared: !!item.parameters,
+    } as API_DocsEntry | API_StoryEntry;
+
+    return acc;
+  }, {} as API_IndexHash);
+
+  // This function adds a "root" or "orphan" and all of its descendents to the hash.
+  function addItem(acc: API_IndexHash | any, item: API_HashEntry | any) {
+    // If we were already inserted as part of a group, that's great.
+    if (acc[item.id]) {
+      return acc;
+    }
+
+    acc[item.id] = item;
+    // Ensure we add the children depth-first *before* inserting any other entries
+    if (item.type === 'root' || item.type === 'group' || item.type === 'component') {
+      item.children.forEach((childId: any) => addItem(acc, storiesHashOutOfOrder[childId]));
+    }
+    return acc;
+  }
+
+  // We'll do two passes over the data, adding all the orphans, then all the roots
+  const orphanHash = Object.values(storiesHashOutOfOrder)
+    .filter((i: any) => i.type !== 'root' && !i.parent)
+    .reduce(addItem, {});
+
+  return Object.values(storiesHashOutOfOrder)
+    .filter((i: any) => i.type === 'root')
+    .reduce(addItem, orphanHash);
+};
+
+export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 => {
+  return {
+    v: 3,
+    stories: Object.values(index.stories).reduce(
+      (acc, entry) => {
+        acc[entry.id] = {
+          ...entry,
+          title: entry.kind,
+          name: entry.name || entry.story,
+          importPath: entry.parameters.fileName || '',
+        };
+
+        return acc;
+      },
+      {} as StoryIndexV3['stories']
+    ),
+  };
+};
+
+export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStoryIndex => {
+  const countByTitle = countBy(Object.values(index.stories), 'title');
+  return {
+    v: 4,
+    entries: Object.values(index.stories).reduce(
+      (acc, entry: any) => {
+        let type: IndexEntry['type'] = 'story';
+        if (
+          entry.parameters?.docsOnly ||
+          (entry.name === 'Page' && countByTitle[entry.title] === 1)
+        ) {
+          type = 'docs';
+        }
+        acc[entry.id] = {
+          type,
+          ...(type === 'docs' && { tags: ['stories-mdx'], storiesImports: [] }),
+          ...entry,
+        };
+
+        // @ts-expect-error (we're removing something that should not be there)
+        delete acc[entry.id].story;
+        // @ts-expect-error (we're removing something that should not be there)
+        delete acc[entry.id].kind;
+
+        return acc;
+      },
+      {} as API_PreparedStoryIndex['entries']
+    ),
+  };
+};

package/src/util/status.tsx

@@ -0,0 +1,87 @@
+import { useMemo, type ReactElement } from 'react';
+import type {
+  API_HashEntry,
+  StatusValue,
+  StatusesByStoryIdAndTypeId,
+} from 'storybook/internal/types';
+
+import { useTheme } from '@storybook/react-native-theming';
+
+import { getDescendantIds } from './tree';
+
+function CircleIcon({ height = 14, width = 14, color, ...props }: any) {
+  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: any) {
+  return <CircleIcon width={6} height={6} {...props} />;
+}
+
+function LoadingIcons(props: any) {
+  const theme = useTheme();
+
+  const color = useMemo(() => {
+    return theme.base === 'light' ? theme.color.mediumdark : theme.color.darker;
+  }, [theme.base, theme.color.darker, theme.color.mediumdark]);
+
+  return <SmallIcons color={color} {...props} />;
+}
+
+export const statusMapping: Record<StatusValue, [ReactElement | null, string | null]> = {
+  ['status-value:unknown']: [null, null],
+  ['status-value:pending']: [<LoadingIcons key="icon" />, 'currentColor'],
+  ['status-value:success']: [<SmallIcons key="icon" color="green" />, 'currentColor'],
+  ['status-value:warning']: [<SmallIcons key="icon" color="orange" />, '#A15C20'],
+  ['status-value: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 const statusPriority: StatusValue[] = [
+  'status-value:unknown',
+  'status-value:pending',
+  'status-value:success',
+  'status-value:warning',
+  'status-value:error',
+];
+
+export const getMostCriticalStatusValue = (statusValues: StatusValue[]): StatusValue => {
+  return statusPriority.reduce(
+    (acc, value) => (statusValues.includes(value) ? value : acc),
+    'status-value:unknown'
+  );
+};
+
+export function getGroupStatus(
+  collapsedData: {
+    [x: string]: Partial<API_HashEntry>;
+  },
+  allStatuses: StatusesByStoryIdAndTypeId
+): Record<string, StatusValue> {
+  return Object.values(collapsedData).reduce<Record<string, 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 = getMostCriticalStatusValue(
+        leafs.flatMap((story) => Object.values(allStatuses[story.id] || {})).map((s) => s.value)
+      );
+
+      if (combinedStatus) {
+        acc[item.id] = combinedStatus;
+      }
+    }
+    return acc;
+  }, {});
+}