@storybook/react-native-ui 9.0.0-alpha.1 → 9.0.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "9.0.0-alpha.1",
+  "version": "9.0.0-alpha.10",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,8 +58,8 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@storybook/react": "9.0.0-alpha.3",
-    "@storybook/react-native-theming": "^9.0.0-alpha.1",
+    "@storybook/react": "9.0.0-alpha.16",
+    "@storybook/react-native-theming": "^9.0.0-alpha.10",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -72,7 +72,8 @@
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": ">=3",
     "react-native-safe-area-context": "*",
-    "react-native-svg": ">=14"
+    "react-native-svg": ">=14",
+    "storybook": "9.0.0-alpha.16"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -80,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ec42eef3ebdf389ebf9cf669d425712db99f9e37"
+  "gitHead": "19e0e4e5908e11d42e00dc508d58a0a4dc9abd3c"
 }

package/src/Layout.tsx

@@ -30,14 +30,13 @@ const desktopLogoContainer = {
   paddingRight: 10,
   justifyContent: 'space-between',
 } satisfies ViewStyle;
+
 const contentContainerStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
 
 const mobileContentStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
 
 const placeholderObject = {};
 
-const placeholderArray = [];
-
 const iconFloatRightStyle = { marginLeft: 'auto' } satisfies ViewStyle;
 
 const navButtonStyle = { flexShrink: 1 } satisfies ViewStyle;
@@ -177,7 +176,6 @@ export const Layout = ({
               </View>
 
               <Sidebar
-                extra={placeholderArray}
                 previewInitialized
                 indexError={undefined}
                 refs={placeholderObject}
@@ -257,7 +255,6 @@ export const Layout = ({
             </View>
 
             <Sidebar
-              extra={placeholderArray}
               previewInitialized
               indexError={undefined}
               refs={placeholderObject}

package/src/Search.tsx

@@ -1,8 +1,8 @@
-import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { BottomSheetTextInput, useBottomSheetInternal } from '@gorhom/bottom-sheet';
 import { styled } from '@storybook/react-native-theming';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
-import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
+import React, { useCallback, useContext, useDeferredValue, useRef, useState } from 'react';
 import { Platform, TextInput, View } from 'react-native';
 import { CloseIcon } from './icon/CloseIcon';
 import { SearchIcon } from './icon/SearchIcon';
@@ -16,7 +16,6 @@ import {
   type SearchResult,
   type Selection,
 } from './types';
-import { getGroupStatus, getHighestStatus } from './util/status';
 import { searchItem } from './util/tree';
 import { useSelectedNode } from './SelectedNodeProvider';
 
@@ -106,6 +105,9 @@ export const Search = React.memo<{
   getLastViewed: () => Selection[];
   initialQuery?: string;
 }>(function Search({ children, dataset, setSelection, getLastViewed, initialQuery = '' }) {
+  const context = useBottomSheetInternal(true);
+  const isBottomSheet = context !== null;
+
   const inputRef = useRef<TextInput>(null);
   const [inputValue, setInputValue] = useState(initialQuery);
   const [isOpen, setIsOpen] = useState(false);
@@ -153,20 +155,11 @@ export const Search = React.memo<{
   );
 
   const makeFuse = useCallback(() => {
-    const list = dataset.entries.reduce<SearchItem[]>((acc, [refId, { index, status }]) => {
-      const groupStatus = getGroupStatus(index || {}, status);
-
+    const list = dataset.entries.reduce<SearchItem[]>((acc, [refId, { index }]) => {
       if (index) {
         acc.push(
           ...Object.values(index).map((item) => {
-            const statusValue =
-              status && status[item.id]
-                ? getHighestStatus(Object.values(status[item.id] || {}).map((s) => s.status))
-                : null;
-            return {
-              ...searchItem(item, dataset.hash[refId]),
-              status: statusValue || groupStatus[item.id] || null,
-            };
+            return searchItem(item, dataset.hash[refId]);
           })
         );
       }
@@ -235,7 +228,7 @@ export const Search = React.memo<{
           <SearchIcon />
         </SearchIconWrapper>
 
-        {isMobile ? (
+        {isBottomSheet ? (
           <BottomSheetInput
             ref={inputRef as any} // TODO find solution for this
             onChangeText={setInputValue}

package/src/Sidebar.stories.tsx

@@ -1,16 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import type { IndexHash, State } from 'storybook/internal/manager-api';
-import { types } from 'storybook/internal/manager-api';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { Addon_SidebarTopType } from 'storybook/internal/types';
+import { Button } from './Button';
+import { LayoutProvider } from './LayoutProvider';
 import { Sidebar } from './Sidebar';
+import { DEFAULT_REF_ID } from './constants';
 import { mockDataset } from './mockdata';
 import type { RefType } from './types';
-import { LayoutProvider } from './LayoutProvider';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
-import { FaceHappyIcon } from './icon/FaceHappyIcon';
-import { DEFAULT_REF_ID } from './constants';
 
 const index = mockDataset.withRoot as IndexHash;
 const storyId = 'root-1-child-a2--grandchild-a1-1';
@@ -22,7 +18,6 @@ const meta = {
   parameters: { layout: 'fullscreen' },
   args: {
     previewInitialized: true,
-    extra: [] as Addon_SidebarTopType[],
     index: index,
     storyId,
     refId: DEFAULT_REF_ID,
@@ -159,37 +154,6 @@ export const Searching: Story = {
   parameters: { chromatic: { delay: 2200 } },
 };
 
-export const Bottom: Story = {
-  args: {
-    bottom: [
-      {
-        id: '1',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <Button>
-            <FaceHappyIcon />
-            Custom addon A
-          </Button>
-        ),
-      },
-      {
-        id: '2',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => <Button text="Custom addon B" Icon={FaceHappyIcon} />,
-      },
-      {
-        id: '3',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <IconButton>
-            <FaceHappyIcon />
-          </IconButton>
-        ),
-      },
-    ],
-  },
-};
-
 /**
  * Given the following sequence of events:
  * 1. Story is selected at the top of the sidebar

package/src/Sidebar.tsx

@@ -1,11 +1,7 @@
 import React, { useMemo } from 'react';
 import { styled } from '@storybook/react-native-theming';
 import type { State } from 'storybook/internal/manager-api';
-import type {
-  Addon_SidebarBottomType,
-  Addon_SidebarTopType,
-  API_LoadedRefData,
-} from 'storybook/internal/types';
+import type { API_LoadedRefData } from 'storybook/internal/types';
 import { Explorer } from './Explorer';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
@@ -74,8 +70,6 @@ export const useCombination = (
 export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
-  extra: Addon_SidebarTopType[];
-  bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;

package/src/Tree.stories.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { ComponentEntry, IndexHash } from 'storybook/internal/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
 import { Tree } from './Tree';
+import type { Dataset } from './types';
 import { index } from './mockdata.large';
 import { DEFAULT_REF_ID } from './constants';
 import { ScrollView, Text } from 'react-native';
@@ -138,3 +139,39 @@ export const SingleStoryComponents: Story = {
     );
   },
 };
+
+const dataWithStoryName: Dataset = {
+  images: {
+    name: 'Testing storyNames support',
+    id: 'images',
+    depth: 0,
+    children: [],
+    type: 'component',
+    tags: [],
+  },
+};
+
+export const WithStoryNames: Story = {
+  name: 'Story with a storyName',
+  args: {
+    docsMode: false,
+    isBrowsing: true,
+    isMain: true,
+    refId: DEFAULT_REF_ID,
+    data: undefined,
+    onSelectStoryId: () => {},
+    selectedStoryId: 'some-component',
+    status: undefined,
+  },
+  render: function Render(args) {
+    const [selectedId, setSelectedId] = useState(storyId);
+    return (
+      <Tree
+        {...args}
+        data={dataWithStoryName}
+        selectedStoryId={selectedId}
+        onSelectStoryId={setSelectedId}
+      />
+    );
+  },
+};

package/src/Tree.tsx

@@ -299,8 +299,6 @@ export const Tree = React.memo<{
     onSelectStoryId,
   });
 
-  const groupStatus = useMemo(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
-
   const treeItems = useMemo(() => {
     return collapsedItems.map((itemId) => {
       const item = collapsedData[itemId];
@@ -330,7 +328,6 @@ export const Tree = React.memo<{
       }
 
       const isDisplayed = !item.parent || ancestry[itemId].every((a: string) => expanded[a]);
-      const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null;
 
       return (
         <Node
@@ -338,7 +335,7 @@ export const Tree = React.memo<{
           item={item}
           status={status?.[itemId]}
           refId={refId}
-          color={color}
+          color={null}
           docsMode={docsMode}
           isOrphan={orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`))}
           isDisplayed={isDisplayed}
@@ -356,7 +353,6 @@ export const Tree = React.memo<{
     docsMode,
     expandableDescendants,
     expanded,
-    groupStatus,
     onSelectStoryId,
     orphanIds,
     refId,

package/src/types.ts

@@ -1,10 +1,10 @@
 import type { StoriesHash, State } from 'storybook/internal/manager-api';
-import type { API_StatusState, API_StatusValue } from 'storybook/internal/types';
+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] & { status?: API_StatusState };
+export type RefType = Refs[keyof Refs] & { allStatuses?: StatusesByStoryIdAndTypeId };
 export type Item = StoriesHash[keyof StoriesHash];
 export type Dataset = Record<string, Item>;
 
@@ -38,7 +38,7 @@ export interface ExpandType {
 export type SearchItem = Item & {
   refId: string;
   path: string[];
-  status?: API_StatusValue;
+  status?: StatusValue;
   showAll?: () => void;
 };
 

package/src/util/status.tsx

@@ -1,5 +1,9 @@
 import { useMemo, type ReactElement } from 'react';
-import type { API_HashEntry, API_StatusState, API_StatusValue } from 'storybook/internal/types';
+import type {
+  API_HashEntry,
+  StatusValue,
+  StatusesByStoryIdAndTypeId,
+} from 'storybook/internal/types';
 
 import { useTheme } from '@storybook/react-native-theming';
 
@@ -29,19 +33,33 @@ function LoadingIcons(props: SvgProps) {
   return <SmallIcons color={color} {...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 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 => {
+// 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, status) => (statuses.includes(status) ? status : acc),
-    'unknown'
+    (acc, value) => (statusValues.includes(value) ? value : acc),
+    'status-value:unknown'
   );
 };
 
@@ -49,16 +67,16 @@ 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) => {
+  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 = getHighestStatus(
-        leafs.flatMap((story) => Object.values(status?.[story.id] || {})).map((s) => s.status)
+      const combinedStatus = getMostCriticalStatusValue(
+        leafs.flatMap((story) => Object.values(allStatuses[story.id] || {})).map((s) => s.value)
       );
 
       if (combinedStatus) {