fix: dont render addons if no story selected and update number range on slide end

addons/ondevice-controls/src/ControlsPanel.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/native';
+import { Channel } from '@storybook/addons';
 import { API } from '@storybook/api';
-import React, { useState, useCallback } from 'react';
-import { Args, StoryContext } from '@storybook/addons';
-
+import type { StoryContextForLoaders, Args } from '@storybook/csf';
+import type { Selection } from '@storybook/store';
+import React, { ComponentType, ReactElement, useCallback, useState } from 'react';
 import { useArgs } from './hooks';
 import NoControlsWarning from './NoControlsWarning';
 import PropForm from './PropForm';
@@ -48,49 +49,73 @@ export interface ArgTypes {
   [key: string]: ArgType;
 }
 
+export type ReactNativeFramework = {
+  component: ComponentType<any>;
+  storyResult: ReactElement<unknown>;
+};
+
+type ApiStore = {
+  fromId: (id: any) => Omit<StoryContextForLoaders<ReactNativeFramework, Args>, 'viewMode'>;
+  getSelection: () => Selection;
+  _channel: Channel;
+};
+
 const ControlsPanel = ({ api }: { api: API }) => {
-  const store = api.store();
-  const storyId = store.getSelection().storyId;
+  const store: ApiStore = api.store();
+
+  const storyId = store.getSelection()?.storyId;
+
   const [isPristine, setIsPristine] = useState(true);
+
   const [argsFromHook, updateArgs, resetArgs] = useArgs(storyId, store);
+
   const { argsObject, argTypes, parameters } = React.useMemo(() => {
-    const { argTypes: storyArgTypes, parameters: storyParameters } = store.fromId(
-      storyId
-    ) as StoryContext;
-    const storyArgsObject = Object.entries(storyArgTypes).reduce((prev, [key, argType]) => {
-      const isControl = Boolean(argType?.control);
-      return isControl
-        ? {
-            ...prev,
-            [key]: {
-              ...argType,
-              name: key,
-              type: argType?.control?.type,
-              value: argsFromHook[key],
-            },
-          }
-        : prev;
-    }, {});
+    const { argTypes: storyArgTypes, parameters: storyParameters } = store.fromId(storyId);
+
+    const storyArgsObject = Object.entries(storyArgTypes).reduce(
+      (prev, [key, argType]: [string, ArgType]) => {
+        const isControl = Boolean(argType?.control);
+
+        return isControl
+          ? {
+              ...prev,
+              [key]: {
+                ...argType,
+                name: key,
+                type: argType?.control?.type,
+                value: argsFromHook[key],
+              },
+            }
+          : prev;
+      },
+      {}
+    );
+
     return {
       argTypes: storyArgTypes,
       parameters: storyParameters,
       argsObject: storyArgsObject,
     };
   }, [store, storyId, argsFromHook]);
+
   const hasControls = Object.keys(argTypes).length > 0;
+
   const isArgsStory = parameters.__isArgsStory;
+
   const showWarning = !(hasControls && isArgsStory);
 
   const updateArgsOnFieldChange = useCallback(
     (args: Args) => {
       updateArgs(args);
+
       setIsPristine(false);
     },
     [updateArgs]
   );
 
   const handleReset = useCallback(() => {
     resetArgs();
+
     setIsPristine(true);
   }, [resetArgs]);
 
@@ -101,6 +126,7 @@ const ControlsPanel = ({ api }: { api: API }) => {
   return (
     <>
       <PropForm args={argsObject} isPristine={isPristine} onFieldChange={updateArgsOnFieldChange} />
+
       <ButtonTouchable onPress={handleReset}>
         <ButtonText>RESET</ButtonText>
       </ButtonTouchable>

addons/ondevice-controls/src/types/Number.tsx

@@ -70,7 +70,7 @@ const NumberType = ({ arg, isPristine, onChange = (value) => value }: NumberProp
           maximumValue={arg.max}
           step={arg.step}
           value={arg.value}
-          onValueChange={(val) => {
+          onSlidingComplete={(val) => {
             onChange(val);
             setCurrentValue(val);
           }}

app/react-native/src/preview/components/OnDeviceUI/addons/Addons.tsx

@@ -1,18 +1,33 @@
 import React from 'react';
-import { Text } from 'react-native';
+
 import { addons } from '@storybook/addons';
-import { useSelectedAddon } from '../../../../hooks';
+import { useSelectedAddon, useStoryContext } from '../../../../hooks';
 import AddonsList from './List';
 import AddonWrapper from './Wrapper';
 import { Box } from '../../Shared/layout';
+import styled from '@emotion/native';
 
 interface AddonsProps {
   active: boolean;
 }
 
+const Text = styled.Text(({ theme }: any) => ({
+  marginTop: theme.tokens.spacing4,
+}));
+
 const Addons = ({ active }: AddonsProps) => {
   const panels = addons.getElements('panel');
   const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
+  const context = useStoryContext();
+  const id = context?.id;
+
+  if (!id) {
+    return (
+      <Box alignItems="center" justifyContent="center">
+        <Text>No Story Selected</Text>
+      </Box>
+    );
+  }
 
   if (Object.keys(panels).length === 0) {
     return (