add deep controls (#1)

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.1",
     "ws": "^8.18.0"
   },
   "devDependencies": {

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.1"
     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.1":
+  version: 0.8.1
+  resolution: "storybook-addon-deep-controls@npm:0.8.1"
+  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/e44e9ea8b9cb6277d8e129a9782dd32c6e814a9640324f0c852754c26467ce64ec3abc8ad7290afac240d99c349e86774012be331813b6b650e99d934b8632b9
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^8.3.5":
   version: 8.3.5
   resolution: "storybook@npm:8.3.5"