feat: Hide controls if they are disabled using the built-in includeConditionalArg function (#714)

* Hide controls if they are disabled using the built-in `includeConditionalArg` function

* Update packages/ondevice-controls/src/ControlsPanel.tsx

* fix: use function to get include value

* fix: tests

---------

Co-authored-by: Daniel Williams <[email protected]>

Author: daviegourevitch

examples/expo-example/components/HiddenControls/HiddenControls.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Text, View } from 'react-native';
+
+type HiddenControlsProps = {
+  value: number;
+  padding: number;
+  advanced: boolean;
+};
+const HiddenControls = ({ value, padding }: HiddenControlsProps) => {
+  return (
+    <View style={{ padding, gap: 10 }}>
+      <Text>
+        This is a story that allows you to hide controls based on other args. By default, you should
+        be able to modify the value but not the padding of this component
+      </Text>
+      <Text>Your current chosen value is: {value}</Text>
+    </View>
+  );
+};
+
+const meta = {
+  component: HiddenControls,
+} satisfies Meta<typeof HiddenControls>;
+
+export default meta;
+
+type HiddenControlsStory = StoryObj<typeof meta>;
+
+export const Basic: HiddenControlsStory = {
+  argTypes: {
+    value: { control: 'number' },
+    advanced: { control: 'boolean' },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+  },
+  args: {
+    padding: 10,
+    value: 42,
+    advanced: false,
+  },
+};

packages/ondevice-controls/src/ControlsPanel.tsx

@@ -1,6 +1,10 @@
 import type { API } from 'storybook/internal/manager-api';
 import { Channel } from 'storybook/internal/channels';
-import type { Args, StoryContextForLoaders } from 'storybook/internal/csf';
+import {
+  type Args,
+  type StoryContextForLoaders,
+  includeConditionalArg,
+} from 'storybook/internal/csf';
 import type { Renderer } from 'storybook/internal/types';
 import React, { ComponentType, ReactElement, useCallback, useState } from 'react';
 import NoControlsWarning from './NoControlsWarning';
@@ -47,6 +51,14 @@ type ApiStore = {
   _channel: Channel;
 };
 
+function shouldIncludeArg(argType: ArgType, args: Args) {
+  try {
+    return includeConditionalArg(argType, args, {});
+  } catch {
+    return true;
+  }
+}
+
 const ControlsPanel = ({ api }: { api: API }) => {
   const store: ApiStore = api.store();
 
@@ -63,7 +75,9 @@ const ControlsPanel = ({ api }: { api: API }) => {
       (prev, [key, argType]: [string, ArgType]) => {
         const isControl = Boolean(argType?.control);
 
-        return isControl
+        const shouldInclude = shouldIncludeArg(argType, argsFromHook);
+
+        return isControl && shouldInclude
           ? {
               ...prev,
               [key]: {

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

@@ -4,7 +4,7 @@ exports[`loader writeRequires when there are different file extensions writes th
 "
   /* do not change this file, it is auto generated by storybook. */
 
-  import { start, updateView } from '@storybook/react-native';
+  import { start, updateView, View } from '@storybook/react-native';
 
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -23,7 +23,7 @@ import "@storybook/addon-ondevice-actions/register";
 
   
     declare global {
-      var view: ReturnType<typeof start>;
+      var view: View;
       var STORIES: typeof normalizedStories;
     }
   
@@ -47,15 +47,15 @@ import "@storybook/addon-ondevice-actions/register";
     updateView(global.view, annotations, normalizedStories, );
   }
 
-  export const view: ReturnType<typeof start> = global.view;
+  export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a configuration object writes the story imports 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
 
-  import { start, updateView } from '@storybook/react-native';
+  import { start, updateView, View } from '@storybook/react-native';
 
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -74,7 +74,7 @@ import "@storybook/addon-ondevice-actions/register";
 
   
     declare global {
-      var view: ReturnType<typeof start>;
+      var view: View;
       var STORIES: typeof normalizedStories;
     }
   
@@ -98,15 +98,15 @@ import "@storybook/addon-ondevice-actions/register";
     updateView(global.view, annotations, normalizedStories, );
   }
 
-  export const view: ReturnType<typeof start> = global.view;
+  export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a story glob writes the story imports 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
 
-  import { start, updateView } from '@storybook/react-native';
+  import { start, updateView, View } from '@storybook/react-native';
 
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -125,7 +125,7 @@ import "@storybook/addon-ondevice-actions/register";
 
   
     declare global {
-      var view: ReturnType<typeof start>;
+      var view: View;
       var STORIES: typeof normalizedStories;
     }
   
@@ -149,15 +149,15 @@ import "@storybook/addon-ondevice-actions/register";
     updateView(global.view, annotations, normalizedStories, );
   }
 
-  export const view: ReturnType<typeof start> = global.view;
+  export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = `
 "
   /* do not change this file, it is auto generated by storybook. */
 
-  import { start, updateView } from '@storybook/react-native';
+  import { start, updateView, View } from '@storybook/react-native';
 
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -176,7 +176,7 @@ import "@storybook/addon-ondevice-actions/register";
 
   
     declare global {
-      var view: ReturnType<typeof start>;
+      var view: View;
       var STORIES: typeof normalizedStories;
     }
   
@@ -200,7 +200,7 @@ import "@storybook/addon-ondevice-actions/register";
     updateView(global.view, annotations, normalizedStories, );
   }
 
-  export const view: ReturnType<typeof start> = global.view;
+  export const view: View = global.view;
 "
 `;