storybookjs · dannyhw · Mar 11, 2026 · Mar 11, 2026 · Mar 11, 2026 · Mar 12, 2026
@@ -64,8 +64,9 @@ const annotations = [
 
 globalThis.STORIES = normalizedStories;
 globalThis.STORYBOOK_WEBSOCKET = {
+  host: '192.168.1.172',
   port: 7007,
-  secured: true,
+  secured: false,
 };
 
 module?.hot?.accept?.();

@@ -4,6 +4,7 @@ import { fn } from 'storybook/test';
 
 const meta = {
   component: ActionButton,
+  tags: ['actions'],
   parameters: {
     notes: `
 # Button

@@ -11,6 +11,7 @@ const styles = StyleSheet.create({
 
 const meta = {
   component: Background,
+  tags: ['backgrounds'],
   // parameters: {
   //   backgrounds: {
   //     default: 'warm',

@@ -23,6 +23,7 @@ const withAppTheme: Meta<typeof ThemedCard>['decorators'] = [
 const meta = {
   title: 'BackgroundExample/ThemedCard',
   component: ThemedCard,
+  tags: ['backgrounds', 'theme'],
   decorators: withAppTheme,
   args: {
     title: 'Themed Card',

@@ -3,6 +3,7 @@ import { Array } from './Array';
 
 const meta = {
   component: Array,
+  tags: ['controls', 'array'],
   args: {
     list: ['a', 'b', 'c'],
   },

@@ -3,6 +3,7 @@ import { Switch } from './Boolean';
 
 const meta = {
   component: Switch,
+  tags: ['controls', 'boolean'],
 } satisfies Meta<typeof Switch>;
 
 export default meta;

@@ -9,6 +9,7 @@ const meta = {
     },
   },
   component: Color,
+  tags: ['controls', 'color'],
 } satisfies Meta<typeof Color>;
 
 export default meta;

@@ -3,6 +3,7 @@ import { ControlExample } from './ControlExample';
 
 const meta = {
   component: ControlExample,
+  tags: ['controls'],
   args: {
     name: 'Storyteller',
     age: 70,

@@ -5,6 +5,7 @@ const date = new Date(1983, 1, 25);
 
 const meta = {
   component: DateString,
+  tags: ['controls', 'date'],
   args: { date: date },
   argTypes: { date: { control: { type: 'date' } } },
 } satisfies Meta<typeof DateString>;

@@ -3,6 +3,7 @@ import { Multiply } from './Number';
 
 const meta = {
   component: Multiply,
+  tags: ['controls', 'number'],
 } satisfies Meta<typeof Multiply>;
 
 export default meta;

@@ -3,6 +3,7 @@ import { Movie } from './Object';
 
 const meta = {
   component: Movie,
+  tags: ['controls', 'object'],
   args: {
     filmInfo: {
       releaseYear: 1982,

@@ -5,6 +5,7 @@ const radio_stations = ['104.8MHz', '909 kHz', '90FM'];
 
 const meta = {
   component: Radio,
+  tags: ['controls', 'radio'],
 
   argTypes: {
     selection: {

@@ -4,6 +4,7 @@ import { MyButton } from './SelectWithNumber';
 
 const meta = {
   component: MyButton,
+  tags: ['controls', 'reproduction'],
 } satisfies Meta<typeof MyButton>;
 
 export default meta;

@@ -59,6 +59,7 @@ const StorySurface = ({
 const meta = {
   title: 'ControlExamples/Reproductions/UseArgsLatency',
   component: StorySurface,
+  tags: ['controls', 'reproduction', 'useargs'],
   args: {
     title: 'useArgs latency repro',
     description: 'Compare how this segmented control feels under different update strategies.',

@@ -5,6 +5,7 @@ const arrows = { ArrowUp: '⬆', ArrowDown: '⬇', ArrowLeft: '⬅️', ArrowRig
 
 const meta = {
   component: SelectExample,
+  tags: ['controls', 'select'],
   argTypes: {
     arrow: {
       options: Object.values(arrows),

@@ -3,6 +3,7 @@ import { Heading } from './Text';
 
 const meta = {
   component: Heading,
+  tags: ['controls', 'text'],
   args: { text: 'Hello world!' },
 } satisfies Meta<typeof Heading>;
 

@@ -12,6 +12,7 @@ const ComponentExample = (props: any) => {
 
 export default {
   component: ComponentExample,
+  tags: ['controls', 'web'],
   argTypes: {
     boolean: { control: 'boolean' },
     color: { control: 'color' },

@@ -22,6 +22,7 @@ const DeepControls = ({
 
 const meta = {
   component: DeepControls,
+  tags: ['controls', 'deep-controls'],
 } satisfies Meta<typeof DeepControls>;
 
 export default meta;
@@ -72,4 +73,5 @@ export const Basic: DeepControlsStory = {
       control: 'number',
     },
   },
+  tags: ['controls', 'deep-controls'],
 };
@@ -20,6 +20,7 @@ const HiddenControls = ({ value, padding }: HiddenControlsProps) => {
 
 const meta = {
   component: HiddenControls,
+  tags: ['controls', 'conditional'],
 } satisfies Meta<typeof HiddenControls>;
 
 export default meta;

@@ -3,6 +3,7 @@ import { Input } from './TextInput';
 
 const meta = {
   component: Input,
+  tags: ['forms', 'input'],
   parameters: {
     notes: 'Use this example to test the software keyboard related issues.',
   },

@@ -6,6 +6,7 @@ const Placeholder = () => <View />;
 
 const meta = {
   component: Placeholder,
+  tags: ['interaction', 'keyboard'],
   parameters: {
     notes: `
 Use these example to test that tapping the story view will dismiss the keyboard,

@@ -4,6 +4,7 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
+  tags: ['docs', 'forms', 'button'],
   args: {
     onPress: fn(),
   },

@@ -4,6 +4,7 @@ import { LoginForm } from './LoginForm';
 
 const meta = {
   component: LoginForm,
+  tags: ['docs', 'forms', 'login'],
   args: {
     onSubmit: fn(),
     emailLabel: 'Email Address',

@@ -3,6 +3,7 @@ import { TextInput } from './TextInput';
 
 const meta = {
   component: TextInput,
+  tags: ['docs', 'forms', 'input'],
   args: {
     placeholder: 'Enter text...',
   },

@@ -3,6 +3,7 @@ import { ChatMessage, ChatMessageProps } from './ChatComponents';
 
 const meta = {
   component: ChatMessage,
+  tags: ['chat', 'message'],
   argTypes: {
     isOwn: { control: 'boolean' },
     showAvatar: { control: 'boolean' },

@@ -4,6 +4,7 @@ import { ChatBubble, ChatBubbleProps } from './ChatComponents';
 const meta = {
   title: 'NestingExample/Message/bubble',
   component: ChatBubble,
+  tags: ['chat', 'bubble'],
   argTypes: {
     isOwn: { control: 'boolean' },
     status: {

@@ -39,6 +39,7 @@ const meta = {
   title:
     'NestingExample/Message/bubble/a very long name for a title that just keeps going and going',
   component: BubbleWithReactions,
+  tags: ['chat', 'bubble'],
   argTypes: {
     isOwn: { control: 'boolean' },
     showReactions: { control: 'boolean' },

@@ -47,6 +47,7 @@ const styles = StyleSheet.create({
 const meta = {
   title: 'NestingExample/MessageInput',
   component: InputDemo,
+  tags: ['chat', 'input'],
   argTypes: {
     disabled: { control: 'boolean' },
   },

@@ -30,6 +30,7 @@ const styles = StyleSheet.create({
 const meta = {
   title: 'NestingExample/Message/Reactions',
   component: ReactionsDemo,
+  tags: ['chat', 'reactions'],
 } satisfies Meta<ChatReactionsProps>;
 
 export default meta;

@@ -2,6 +2,7 @@ import type { StoryObj, Meta } from '@storybook/react-native';
 import { View, StyleSheet, Text } from 'react-native';
 
 const NotesExampleMeta: Meta<any> = {
+  tags: ['notes'],
   parameters: {
     notes: `
 # H1

@@ -4,6 +4,7 @@ import { ScrollView } from 'react-native';
 
 const InsideSafeAreaMeta: Meta<typeof AButton> = {
   component: AButton,
+  tags: ['safe-area', 'inside'],
   argTypes: {
     onPress: { action: 'pressed the button' },
   },

@@ -4,6 +4,7 @@ import { ScrollView } from 'react-native';
 
 const OutsideSafeAreaMeta: Meta<typeof AButton> = {
   component: AButton,
+  tags: ['safe-area', 'outside'],
   parameters: { noSafeArea: true },
   argTypes: {
     onPress: { action: 'pressed the button' },

@@ -18,6 +18,7 @@ function UsableAreaContent() {
 }
 const meta = {
   component: UsableAreaContent,
+  tags: ['safe-area', 'layout'],
 } satisfies Meta<typeof UsableAreaContent>;
 
 export default meta;

@@ -5,6 +5,7 @@ const StoryName = ({ name }: { name: string }) => <Text>{name}</Text>;
 
 const meta = {
   component: StoryName,
+  tags: ['story-name'],
 } satisfies Meta<typeof StoryName>;
 
 export default meta;

@@ -5,6 +5,7 @@ import { UserProfileCard } from './UserProfileCard';
 const meta = {
   title: 'UserProfileCard',
   component: UserProfileCard,
+  tags: ['profile', 'card'],
   args: {
     name: 'Jane Doe',
     email: 'jane.doe@example.com',

@@ -9,6 +9,7 @@ const TestCase = () => {
 
 const meta = {
   component: TestCase,
+  tags: ['testing'],
 } satisfies Meta<typeof TestCase>;
 
 export default meta;

@@ -7,6 +7,7 @@ const TestCase2 = () => {
 
 const meta = {
   component: TestCase2,
+  tags: ['testing', 'globs'],
 } satisfies Meta<typeof TestCase2>;
 
 export default meta;

@@ -39,6 +39,7 @@
     "typescript": "~5.9.3"
   },
   "dependencies": {
+    "@gorhom/portal": "^1.0.14",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "10.3.0-alpha.14",
     "@storybook/react-native-theming": "^10.3.0-next.6",