feat: nested grouping of stories with "group/story" syntax

.eslintignore

@@ -14,8 +14,7 @@ built-storybooks
 .yarn
 !.remarkrc.js
 !.babelrc.js
-!.eslintrc.js
-!.eslintrc-markdown.js
+.eslintrc.js
 !.jest.config.js
 !.storybook
 examples/expo-example/metro.config.js

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   root: true,
   extends: '@react-native',
-
-  // overrides: [...conf.overrides, { files: ['*.ts', '*.tsx'], rules: { 'no-undef': 'off' } }],
+  rules: {
+    'react-native/no-inline-styles': 'off',
+  },
 };

.gitignore

@@ -2,8 +2,6 @@ node_modules
 *.log
 .idea
 *.iml
-.vscode/*
-!.vscode/launch.json
 *.sw*
 npm-shrinkwrap.json
 dist

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

examples/expo-example/App.tsx

@@ -1 +1 @@
-export { default } from './.storybook/Storybook';
+export { default } from './.storybook';

examples/expo-example/components/NestingExample/ChatMessage.stories.tsx

@@ -0,0 +1,22 @@
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
+import { Text } from 'react-native';
+import React from 'react';
+
+const MyComponent = ({ text }) => <Text>{text}</Text>;
+
+export default {
+  title: 'Chat/Message',
+  component: MyComponent,
+} as ComponentMeta<typeof MyComponent>;
+
+export const MessageFirst: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    text: 'Hello',
+  },
+};
+
+export const MessageSecond: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    text: 'Message two',
+  },
+};

examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx

@@ -0,0 +1,23 @@
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
+import { Text } from 'react-native';
+import React from 'react';
+
+const MyComponent = ({ text }) => <Text>{text}</Text>;
+
+export default {
+  title: 'Chat/Message/bubble',
+  component: MyComponent,
+} as ComponentMeta<typeof MyComponent>;
+
+export const First: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    text: 'First',
+  },
+};
+
+export const Second: ComponentStoryObj<typeof MyComponent> = {
+  storyName: 'Second Story',
+  args: {
+    text: 'Second',
+  },
+};

examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
+import { Text } from 'react-native';
+import React from 'react';
+
+const MyComponent = ({ text }) => <Text>{text}</Text>;
+
+export default {
+  title: 'Chat/MessageInput',
+  component: MyComponent,
+} as ComponentMeta<typeof MyComponent>;
+
+export const Basic: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    text: 'Hello',
+  },
+};

examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx

@@ -0,0 +1,22 @@
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
+import { Text } from 'react-native';
+import React from 'react';
+
+const MyComponent = ({ text }) => <Text>{text}</Text>;
+
+export default {
+  title: 'Chat/Message/Reactions',
+  component: MyComponent,
+} as ComponentMeta<typeof MyComponent>;
+
+export const MessageOne: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    text: 'Hello',
+  },
+};
+
+export const MessageTwo: ComponentStoryObj<typeof MyComponent> = {
+  args: {
+    text: 'Message two',
+  },
+};

examples/expo-example/components/NestingExample/StoryList.stories.tsx

@@ -0,0 +1,71 @@
+import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import StoryListView from '@storybook/react-native/dist/preview/components/StoryListView/StoryListView';
+
+export default {
+  title: 'StoryListView',
+  component: StoryListView,
+} as ComponentMeta<typeof StoryListView>;
+
+export const Basic: ComponentStoryObj<typeof StoryListView> = {
+  args: {
+    storyIndex: {
+      stories: {
+        'chat-message--message-first': {
+          id: 'chat-message--message-first',
+          importPath: './components/NestingExample/ChatMessage.stories.tsx',
+          name: 'Message First',
+          title: 'Chat/Message',
+        },
+        'chat-message--message-second': {
+          id: 'chat-message--message-second',
+          importPath: './components/NestingExample/ChatMessage.stories.tsx',
+          name: 'Message Second',
+          title: 'Chat/Message',
+        },
+        'chat-message-bubble--first': {
+          id: 'chat-message-bubble--first',
+          importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+          name: 'First',
+          title: 'Chat/Message/bubble',
+        },
+        'chat-message-bubble--second': {
+          id: 'chat-message-bubble--second',
+          importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+          name: 'Second Story',
+          title: 'Chat/Message/bubble',
+        },
+        'chat-message-reactions--message-one': {
+          id: 'chat-message-reactions--message-one',
+          importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+          name: 'Message One',
+          title: 'Chat/Message/Reactions',
+        },
+        'chat-message-reactions--message-two': {
+          id: 'chat-message-reactions--message-two',
+          importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+          name: 'Message Two',
+          title: 'Chat/Message/Reactions',
+        },
+        'chat-messageinput--basic': {
+          id: 'chat-messageinput--basic',
+          importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
+          name: 'Basic',
+          title: 'Chat/MessageInput',
+        },
+        'storylistview--basic': {
+          id: 'storylistview--basic',
+          importPath: './components/NestingExample/StoryList.stories.tsx',
+          name: 'Basic',
+          title: 'StoryListView',
+        },
+        'text-control--basic': {
+          id: 'text-control--basic',
+          importPath: './components/ControlExamples/Text/Text.stories.tsx',
+          name: 'Basic',
+          title: 'Text control',
+        },
+      },
+      v: 3,
+    },
+  },
+};

examples/expo-example/package.json

@@ -39,7 +39,7 @@
     "expo": "^48.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.3",
+    "react-native": "0.71.8",
     "react-native-safe-area-context": "4.5.0",
     "react-native-web": "~0.18.10"
   },

packages/react-native/package.json

@@ -38,6 +38,9 @@
     "test": "jest"
   },
   "jest": {
+    "modulePathIgnorePatterns": [
+      "dist/"
+    ],
     "moduleFileExtensions": [
       "ts",
       "tsx",
@@ -72,6 +75,7 @@
   },
   "devDependencies": {
     "@types/react": "~18.0.27",
+    "@types/jest": "^29.4.3",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
     "react-test-renderer": "18.2.0"

packages/react-native/src/hooks.tsx

@@ -5,6 +5,7 @@ import { useTheme as useEmotionTheme } from 'emotion-theming';
 import type { Theme } from './preview/components/Shared/theme';
 
 import type { ReactNativeFramework } from './types/types-6.0';
+import { StoryIndexEntry } from '@storybook/client-api';
 
 const storyContextAtom = atom(null as StoryContext<ReactNativeFramework> | null);
 
@@ -41,11 +42,31 @@ export function useIsStorySelected(storyId: string) {
 }
 
 /**
- * Hook that indicates if `title` is the currently selected story section.
+ * Hook that indicates if story kind (title) is the currently selected story section.
  */
 export function useIsStorySectionSelected(title: string) {
   return useAtomValue(
-    useMemo(() => atom((get) => get(storyContextAtom)?.title === title), [title])
+    useMemo(
+      () =>
+        atom((get) => {
+          const contextTitle = get(storyContextAtom)?.title;
+          return contextTitle === title || contextTitle?.startsWith(`${title}/`);
+        }),
+      [title]
+    )
+  );
+}
+
+export function useIsChildSelected(entries: StoryIndexEntry[]) {
+  return useAtomValue(
+    useMemo(
+      () =>
+        atom((get) => {
+          const contextId = get(storyContextAtom)?.id;
+          return !!entries.find(({ id }) => id === contextId);
+        }),
+      [entries]
+    )
   );
 }