feat: add annotations support for addons

examples/expo-example/.storybook-web/main.ts

@@ -21,6 +21,7 @@ const main: ServerStorybookConfig = {
     '@storybook/addon-react-native-web',
     // note why does this break with get absolute?
     '@storybook/addon-react-native-server',
+    'storybook-addon-deep-controls',
   ],
   // logLevel: 'debug',
   framework: getAbsolutePath('@storybook/react-webpack5'),

examples/expo-example/.storybook/main.ts

@@ -21,6 +21,7 @@ const main: StorybookConfig = {
     '@storybook/addon-ondevice-backgrounds',
     '@storybook/addon-ondevice-actions',
     '@storybook/addon-ondevice-notes',
+    'storybook-addon-deep-controls',
   ],
   reactNative: {
     playFn: false,

examples/expo-example/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { View, Appearance } from 'react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import type { Preview } from '@storybook/react';

examples/expo-example/.storybook/storybook.requires.ts

@@ -6,6 +6,7 @@ import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 import "@storybook/addon-ondevice-notes/register";
+import "storybook-addon-deep-controls/register";
 
 const normalizedStories = [
   {
@@ -57,7 +58,8 @@ declare global {
 const annotations = [
   require("./preview"),
   require("@storybook/react-native/dist/preview"),
-  require("@storybook/addon-actions/preview"),
+  require("@storybook/addon-ondevice-actions/preview"),
+  require("storybook-addon-deep-controls/preview"),
 ];
 
 global.STORIES = normalizedStories;

examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Text } from 'react-native';
+
+const DeepControls = () => {
+  return <Text>Testing story with deep controls (storybook-addon-deep-controls)</Text>;
+};
+
+export default {
+  title: 'DeepControls',
+  component: DeepControls,
+} satisfies Meta<typeof DeepControls>;
+
+export const Basic: StoryObj<typeof DeepControls> = {
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  args: {
+    objectArg: {
+      string: 'foo',
+      number: 42,
+      boolean: true,
+      enumString: 'value2', // we only want specific values for this
+      nested: {
+        number: 222,
+        boolean: false,
+      },
+    },
+  },
+  argTypes: {
+    // so we define an argType for the property to use a radio control with specific values
+    'objectArg.enumString': {
+      control: 'radio',
+      options: ['value1', 'value2', 'value3'],
+    },
+  },
+};

examples/expo-example/package.json

@@ -56,6 +56,7 @@
     "react-native-web": "~0.19.10",
     "react-router": "^6.26.2",
     "storybook": "^8.3.5",
+    "storybook-addon-deep-controls": "^0.8.2",
     "ws": "^8.18.0"
   },
   "devDependencies": {

packages/ondevice-actions/preview.js

@@ -0,0 +1 @@
+export * from '@storybook/addon-actions/preview';

packages/ondevice-actions/src/preview.ts

@@ -0,0 +1 @@
+export * from '@storybook/addon-actions/preview';

packages/react-native/scripts/__snapshots__/generate.test.js.snap

@@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
 
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
 
@@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
 
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
 
@@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
 
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
 
@@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register";
     }
 
 
-  const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
 
@@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register";
 
 
 
-  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
   global.STORIES = normalizedStories;
 

packages/react-native/scripts/generate.js

@@ -50,10 +50,21 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   const doctools = 'require("@storybook/react-native/dist/preview")';
 
-  // TODO: implement presets or something similar
-  const enhancer = main.addons?.includes('@storybook/addon-ondevice-actions')
-    ? "require('@storybook/addon-actions/preview')"
-    : '';
+  const enhancer = [];
+
+  main.addons?.forEach((addon) => {
+    let addonPath;
+    try {
+      addonPath = path.dirname(require.resolve(addon));
+    } catch (error) {
+      console.error(`Failed to resolve addon: ${addon}`, error);
+      return null; // Skip this addon if it cannot be resolved
+    }
+    const isPreviewFileExists = getPreviewExists({ configPath: addonPath });
+    if (isPreviewFileExists) {
+      enhancer.push(`require('${addon}/preview')`);
+    }
+  });
 
   let options = '';
   let optionsVar = '';

yarn.lock

@@ -9730,6 +9730,7 @@ __metadata:
     react-native-web: "npm:~0.19.10"
     react-router: "npm:^6.26.2"
     storybook: "npm:^8.3.5"
+    storybook-addon-deep-controls: "npm:^0.8.2"
     typescript: "npm:^5.3.3"
     ws: "npm:^8.18.0"
   languageName: unknown
@@ -17640,6 +17641,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-addon-deep-controls@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "storybook-addon-deep-controls@npm:0.8.2"
+  peerDependencies:
+    "@storybook/addon-controls": 7.x.x || 8.x.x
+    "@storybook/types": 7.x.x || 8.x.x
+    storybook: 7.x.x || 8.x.x
+  checksum: 10/79fcd1f96d0e9472b195d14335268d2bab9da087ab348f1e243349acb69265e552536ea57f0d885a317c9f6f48a130d358f73f392aab68f56401c3a4010f70ec
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^8.3.5":
   version: 8.3.5
   resolution: "storybook@npm:8.3.5"