fix: #242 an action appears in the controls tab as an invalid control…

… type (#246)

In the controls panel, filter out the non-control args so that e.g. actions do not incorrectly get shown in the controls tab.

addons/ondevice-controls/src/ControlsPanel.tsx

@@ -48,19 +48,19 @@ const ControlsPanel = ({ api }: { api: API }) => {
   const storyId = store.getSelection().storyId;
   const [argsfromHook, updateArgs, resetArgs] = useArgs(storyId, store);
   const { argTypes, parameters } = store.fromId(storyId);
+  const argsObject = Object.entries(argsfromHook).reduce((prev, [name, value]) => {
+    const isControl = Boolean(argTypes?.[name]?.control);
 
-  const isArgsStory = parameters.__isArgsStory;
-
-  const hasControls = Object.values(argTypes).some((arg: ArgType) => arg?.control);
-  const showWarning = !(hasControls && isArgsStory);
-  const argsObject = hasControls
-    ? Object.entries(argsfromHook).reduce((prev, [name, value]) => {
-        return {
+    return isControl
+      ? {
           ...prev,
           [name]: { ...argTypes?.[name], name, type: argTypes[name]?.control?.type, value },
-        };
-      }, {})
-    : {};
+        }
+      : prev;
+  }, {});
+  const hasControls = Object.keys(argsObject).length > 0;
+  const isArgsStory = parameters.__isArgsStory;
+  const showWarning = !(hasControls && isArgsStory);
 
   return (
     <>

examples/native/components/ActionExample/Actions.stories.tsx

@@ -8,6 +8,9 @@ const ActionButtonMeta: ComponentMeta<typeof ActionButton> = {
   argTypes: {
     onPress: { action: 'pressed the button' },
   },
+  args: {
+    text: 'Press me!',
+  },
 };
 export default ActionButtonMeta;
 

examples/native/components/ActionExample/Actions.tsx

@@ -3,12 +3,13 @@ import { TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 interface ActionButtonProps {
   onPress: () => void;
+  text: string;
 }
 
-export const ActionButton = ({ onPress }: ActionButtonProps) => {
+export const ActionButton = ({ onPress, text }: ActionButtonProps) => {
   return (
     <TouchableOpacity style={styles.container} onPress={onPress}>
-      <Text style={styles.text}>ActionButton</Text>
+      <Text style={styles.text}>{text}</Text>
     </TouchableOpacity>
   );
 };