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"