feat: nested grouping of stories with "group/story" syntax (#486)

.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/BackgroundExample/Background.stories.tsx

@@ -6,7 +6,7 @@ import { Text } from 'react-native';
 // Remember to also include '@storybook/addon-ondevice-backgrounds' in your addons config: see /examples/expo-example/.storybook/main.js
 addDecorator(withBackgrounds);
 
-storiesOf('Background StoriesOf', module)
+storiesOf('BackgroundExample/Background StoriesOf', module)
   .addParameters({
     backgrounds: {
       default: 'warm',

examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx

@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
 });
 
 const BackgroundMeta: ComponentMeta<typeof Background> = {
-  title: 'Background CSF',
+  title: 'BackgroundExample/Background CSF',
   component: Background,
   decorators: [withBackgrounds],
   parameters: {

examples/expo-example/components/ControlExamples/Array/Array.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import { Array } from './Array';
 const ArrayMeta: ComponentMeta<typeof Array> = {
-  title: 'Array control',
+  title: 'ControlExamples/Array control',
   component: Array,
   args: {
     list: ['a', 'b', 'c'],

examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx

@@ -2,7 +2,7 @@ import { ComponentMeta, ComponentStoryObj } from '@storybook/react-native';
 import { Switch } from './Boolean';
 
 const BooleanExample: ComponentMeta<typeof Switch> = {
-  title: 'Boolean Control',
+  title: 'ControlExamples/Boolean Control',
   component: Switch,
 };
 

examples/expo-example/components/ControlExamples/Color/Color.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import { Color } from './Color';
 
 const ColorMeta: ComponentMeta<typeof Color> = {
-  title: 'Color control',
+  title: 'ControlExamples/Color control',
   parameters: { notes: '- test' },
   argTypes: {
     color: {

examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react-native';
 import { ControlExample } from './ControlExample';
 
 export default {
-  title: 'Control Example',
+  title: 'ControlExamples/Control Example',
   component: ControlExample,
   args: {
     name: 'Storyteller',

examples/expo-example/components/ControlExamples/Date/Date.stories.tsx

@@ -5,7 +5,7 @@ import { DateString } from './Date';
 const date = new Date(1983, 1, 25);
 
 const DateMeta: ComponentMeta<typeof DateString> = {
-  title: 'Date',
+  title: 'ControlExamples/Date',
   component: DateString,
   args: { date: date },
   argTypes: { date: { control: { type: 'date' } } },

examples/expo-example/components/ControlExamples/Object/Object.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import { Movie } from './Object';
 
 const ObjectMeta: ComponentMeta<typeof Movie> = {
-  title: 'Object control',
+  title: 'ControlExamples/Object control',
   component: Movie,
   args: {
     filmInfo: {

examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx

@@ -5,7 +5,7 @@ import { Radio } from './Radio';
 const radio_stations = ['104.8MHz', '909 kHz', '90FM'];
 
 const RadioMeta: ComponentMeta<typeof Radio> = {
-  title: 'Radio control',
+  title: 'ControlExamples/Radio control',
   component: Radio,
   args: {
     selection: radio_stations[0],

examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
 import { MyButton } from './SelectWithNumber';
 
 export default {
-  title: 'SelectWithNumber',
+  title: 'ControlExamples/SelectWithNumber',
   component: MyButton,
 } as ComponentMeta<typeof MyButton>;
 

examples/expo-example/components/ControlExamples/Select/Select.stories.tsx

@@ -5,7 +5,7 @@ import { SelectExample } from './Select';
 const arrows = { ArrowUp: '⬆', ArrowDown: '⬇', ArrowLeft: '⬅️', ArrowRight: '➡️' };
 
 const SelectExampleMeta: ComponentMeta<typeof SelectExample> = {
-  title: 'Select control',
+  title: 'ControlExamples/Select control',
   component: SelectExample,
   argTypes: {
     arrow: {

examples/expo-example/components/ControlExamples/Text/Text.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import { Heading } from './Text';
 
 const TextMeta: ComponentMeta<typeof Heading> = {
-  title: 'Text control',
+  title: 'ControlExamples/Text control',
   component: Heading,
   args: { text: 'Hello world!' },
 };

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: 'NestingExample/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: 'NestingExample/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/ChatMessageBubbleAgain.stories.tsx

@@ -0,0 +1,24 @@
+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:
+    'NestingExample/Message/bubble/a very long name for a title that just keeps going and going',
+  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: 'NestingExample/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: 'NestingExample/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/components/SafeAreaExample/SafeAreaInside.stories.tsx

@@ -4,7 +4,7 @@ import { AButton } from './AButton';
 import { ScrollView } from 'react-native';
 
 const SafeAreaInsideMeta: ComponentMeta<typeof AButton> = {
-  title: 'SafeArea Inside',
+  title: 'SafeAreaExamples/SafeArea Inside',
   component: AButton,
   argTypes: {
     onPress: { action: 'pressed the button' },

examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx

@@ -4,7 +4,7 @@ import { AButton } from './AButton';
 import { ScrollView } from 'react-native';
 
 const SafeAreaOutsideMeta: ComponentMeta<typeof AButton> = {
-  title: 'SafeArea Outside',
+  title: 'SafeAreaExamples/SafeArea Outside',
   component: AButton,
   parameters: { noSafeArea: true },
   argTypes: {

examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react-native';
 import { View, StyleSheet, Text } from 'react-native';
 
 const UsableAreaMeta: ComponentMeta<any> = {
-  title: 'Usable Area',
+  title: 'SafeAreaExamples/Usable Area',
 };
 export default UsableAreaMeta;
 

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"