diff --git a/examples/expo-example/.storybook-web/main.ts b/examples/expo-example/.storybook-web/main.ts
index d83ffb945e..b9307b76ea 100644
--- a/examples/expo-example/.storybook-web/main.ts
+++ b/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'),
diff --git a/examples/expo-example/.storybook/main.ts b/examples/expo-example/.storybook/main.ts
index 3b8df3d9dd..8c0b52f8e4 100644
--- a/examples/expo-example/.storybook/main.ts
+++ b/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,
diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx
index 0ed21ed447..5f8e781573 100644
--- a/examples/expo-example/.storybook/preview.tsx
+++ b/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';
diff --git a/examples/expo-example/.storybook/storybook.requires.ts b/examples/expo-example/.storybook/storybook.requires.ts
index 0c7deb9167..3d6d43459e 100644
--- a/examples/expo-example/.storybook/storybook.requires.ts
+++ b/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;
diff --git a/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx b/examples/expo-example/other_components/DeepControls/DeepControls.stories.tsx
new file mode 100644
index 0000000000..796be2dedc
--- /dev/null
+++ b/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 Testing story with deep controls (storybook-addon-deep-controls);
+};
+
+export default {
+ title: 'DeepControls',
+ component: DeepControls,
+} satisfies Meta;
+
+export const Basic: StoryObj = {
+ 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'],
+ },
+ },
+};
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
index 71f815ff1e..fe150e9840 100644
--- a/examples/expo-example/package.json
+++ b/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": {
diff --git a/packages/ondevice-actions/preview.js b/packages/ondevice-actions/preview.js
new file mode 100644
index 0000000000..0d7d5c6c33
--- /dev/null
+++ b/packages/ondevice-actions/preview.js
@@ -0,0 +1 @@
+export * from '@storybook/addon-actions/preview';
diff --git a/packages/ondevice-actions/src/preview.ts b/packages/ondevice-actions/src/preview.ts
new file mode 100644
index 0000000000..0d7d5c6c33
--- /dev/null
+++ b/packages/ondevice-actions/src/preview.ts
@@ -0,0 +1 @@
+export * from '@storybook/addon-actions/preview';
diff --git a/packages/react-native/scripts/__snapshots__/generate.test.js.snap b/packages/react-native/scripts/__snapshots__/generate.test.js.snap
index a3f86d23f9..7dff189ccb 100644
--- a/packages/react-native/scripts/__snapshots__/generate.test.js.snap
+++ b/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;
diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js
index d11ab1920d..51aad530ae 100644
--- a/packages/react-native/scripts/generate.js
+++ b/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 = '';
diff --git a/yarn.lock b/yarn.lock
index df3bd204ec..6c8c2fd186 100644
--- a/yarn.lock
+++ b/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"