fix: use storyNames in tree if available (#697)

Co-authored-by: Daniel Williams <[email protected]>

Author: aniretaketea

packages/react-native-ui/src/Tree.stories.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import type { ComponentEntry, IndexHash } from '@storybook/core/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 = {
+  storyName: '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}
+      />
+    );
+  },
+};

packages/react-native/src/Start.tsx

@@ -89,27 +89,27 @@ export function prepareStories({
 
   storyEntries.forEach((specifier) => {
     const { req, directory: root } = specifier;
+
     req.keys().forEach((filename: string) => {
       try {
-        // console.log('req', req.resolve(filename));
-        // console.log('filename', filename);
         const fileExports = req(filename);
         // TODO: should this be here?
         if (!fileExports.default) return;
         const meta = fileExports.default;
+
         Object.keys(fileExports).forEach((key) => {
           if (key === 'default') return;
           if (!isExportStory(key, fileExports.default)) return;
 
           const exportValue = fileExports[key];
           if (!exportValue) return;
 
-          //FIXME: autotitle
-          const name = storyNameFromExport(key);
           const title = makeTitle(filename, specifier, meta.title);
 
           if (title) {
-            const id = toId(title, name);
+            const nameFromExport = storyNameFromExport(key);
+            const id = toId(title, nameFromExport);
+            const name = exportValue.storyName || nameFromExport;
 
             index.entries[id] = {
               type: 'story',
@@ -124,6 +124,7 @@ export function prepareStories({
             const stories = Object.entries(importedStories).reduce(
               (carry, [storyKey, story]: [string, Readonly<Record<string, unknown>>]) => {
                 if (!isExportStory(storyKey, fileExports.default)) return carry;
+
                 if (story.play && !options?.playFn) {
                   // play functions are not yet fully supported on native.
                   // There is a new option in main.js to turn them on for future use.