Merge storybook

examples/src/components/DataBinding.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import DataBinding from './DataBinding';
+
+const meta = {
+  title: 'DataBinding',
+  component: DataBinding,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof DataBinding>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

examples/src/components/DataBinding.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import {
+  useRive,
+  useViewModel,
+  useViewModelInstance,
+  useViewModelInstanceColor,
+  useViewModelInstanceNumber,
+} from '@rive-app/react-canvas';
+
+const DataBinding = () => {
+  const { rive, RiveComponent } = useRive({
+    src: 'rewards.riv',
+    artboard: 'Main',
+    stateMachines: 'State Machine 1',
+    autoplay: true,
+    autoBind: false,
+  });
+
+  const viewModel = useViewModel(rive, { name: 'Rewards' });
+
+  // Get the default instance of the view model
+  const viewModelInstance = useViewModelInstance(viewModel);
+  console.log('ViewModelInstance:', viewModelInstance);
+
+  const { value: priceValue, setValue: setPriceValue } =
+    useViewModelInstanceNumber('PriceValue', viewModelInstance);
+
+  const { value: mainColor, setValue: setMainColor } =
+    useViewModelInstanceColor('color', viewModelInstance);
+
+  const { value: lives, setValue: setLives } = useViewModelInstanceNumber(
+    'Button/Lives',
+    viewModelInstance
+  );
+
+  useEffect(() => {
+    setPriceValue(100); // Set the initial price value
+  }, [setPriceValue]);
+
+  useEffect(() => {
+    setMainColor(parseInt('ffc0ffee', 16)); // Set the initial price value
+  }, [setMainColor]);
+
+  useEffect(() => {
+    if (setLives && lives) {
+      console.log('Lives changed:', lives);
+      setLives(3); // Set the initial lives value
+    }
+  }, [setLives, lives]);
+
+  return <RiveComponent />;
+};
+
+export default DataBinding;

src/hooks/useViewModelInstanceEnum.ts

@@ -12,33 +12,34 @@ import { useViewModelInstanceProperty } from './useViewModelInstanceProperty';
  * @returns An object with the enum value, available values, and a setter function
  */
 export default function useViewModelInstanceEnum(
-    path: string,
-    viewModelInstance?: ViewModelInstance | null
+  path: string,
+  viewModelInstance?: ViewModelInstance | null
 ): UseViewModelInstanceEnumResult {
-    const result = useViewModelInstanceProperty<
-        ViewModelInstanceEnum,
-        string,
-        Omit<UseViewModelInstanceEnumResult, 'value' | 'values'>,
-        string[]
-    >(
-        path,
-        viewModelInstance,
-        {
-            getProperty: useCallback((vm, p) => vm.enum(p), []),
-            getValue: useCallback((prop) => prop.value, []),
-            defaultValue: null,
-            getExtendedData: useCallback((prop) => prop.values, []),
-            buildPropertyOperations: useCallback((safePropertyAccess) => ({
-                setValue: (newValue: string) => {
-                    safePropertyAccess(prop => { prop.value = newValue; });
-                }
-            }), [])
-        }
-    );
+  const result = useViewModelInstanceProperty<
+    ViewModelInstanceEnum,
+    string,
+    Omit<UseViewModelInstanceEnumResult, 'value' | 'values'>,
+    string[]
+  >(path, viewModelInstance, {
+    getProperty: useCallback((vm, p) => vm.enum(p), []),
+    getValue: useCallback((prop) => prop.value, []),
+    defaultValue: null,
+    getExtendedData: useCallback((prop: any) => prop.values, []),
+    buildPropertyOperations: useCallback(
+      (safePropertyAccess) => ({
+        setValue: (newValue: string) => {
+          safePropertyAccess((prop) => {
+            prop.value = newValue;
+          });
+        },
+      }),
+      []
+    ),
+  });
 
-    return {
-        value: result.value,
-        values: result.extendedData || [],
-        setValue: result.setValue
-    };
-} 
+  return {
+    value: result.value,
+    values: result.extendedData || [],
+    setValue: result.setValue,
+  };
+}