Add test story

.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   "stories": [
-    "../examples/stories/*.stories.mdx",
-    "../examples/stories/*.stories.@(js|jsx|ts|tsx)"
+    "../examples/**/*.stories.mdx",
+    "../examples/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     "@storybook/addon-links",

examples/stories/components/bareBonesRiveCanvas/Example.css

@@ -0,0 +1,4 @@
+canvas {
+  width: 500px!important;
+  height: 500px!important;
+}

examples/stories/components/bareBonesRiveCanvas/Example.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BareBonesRiveCanvas from './Example';
+
+const meta = {
+  title: 'Components/BareBonesRiveCanvas',
+  component: BareBonesRiveCanvas,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof BareBonesRiveCanvas>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};

examples/stories/components/bareBonesRiveCanvas/Example.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import Bird from './components/Bird';
+import Tree from './components/Tree';
+
+export default function App() {
+  return (
+    <div className="flex size-full justify-center items-center gap-4">
+      <RiveTest />
+      <StaticTest />
+    </div>
+  );
+}
+
+function StaticTest() {
+  const [counter, setCounter] = useState<number>(0);
+
+  const [running, setRunning] = useState<boolean>(false);
+  const intervalRef = useRef<number>();
+  useEffect(() => {
+    if (running) {
+      intervalRef.current = setInterval(() => {
+        setCounter((prev) => prev + 1);
+      }, 100);
+    } else {
+      clearInterval(intervalRef.current);
+    }
+  }, [running]);
+
+  return (
+    <div className="size-full flex items-center justify-center flex-col gap-4">
+      <h1>Static</h1>
+      <Button onClick={() => setRunning((prev) => !prev)}>
+        {running ? 'remounting...' : 'Start'}
+      </Button>
+      <FakeAsset id="🌲" key={counter + 'tree'} />
+      <FakeAsset id="🐓" key={counter + 'bird'} />
+    </div>
+  );
+}
+
+function RiveTest() {
+  const [counter, setCounter] = useState<number>(0);
+
+  const [running, setRunning] = useState<boolean>(false);
+  const intervalRef = useRef<number>();
+  useEffect(() => {
+    if (running) {
+      intervalRef.current = setInterval(() => {
+        setCounter((prev) => prev + 1);
+      }, 100);
+    } else {
+      clearInterval(intervalRef.current);
+    }
+  }, [running]);
+
+  return (
+    <div className="size-full flex items-center justify-center flex-col gap-4">
+      <h1>Rive</h1>
+      <Button onClick={() => setRunning((prev) => !prev)}>
+        {running ? 'remounting...' : 'Start'}
+      </Button>
+      <Tree key={counter + 'tree'} />
+      <Bird key={counter + 'bird'} />
+    </div>
+  );
+}
+
+const useId = () => {
+  // random id
+  return Math.random().toString(36).substring(7);
+};
+
+function FakeAsset({ id }: { id: string; key: string }) {
+  const internalId = useId();
+  useEffect(() => {
+    console.log(`[${internalId}] mount static ${id}`);
+    return () => {
+      console.log(`[${internalId}] unmount static ${id}`);
+    };
+  }, [id, internalId]);
+
+  return (
+    <div
+      id={`Static-${id}`}
+      className="size-[100px] ring-1 text-2xl flex items-center justify-center"
+    >
+      {id}
+    </div>
+  );
+}
+
+// ---
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+function Button({ children, ...props }: ButtonProps) {
+  return (
+    <button className="ring-1 p-4" {...props}>
+      {children}
+    </button>
+  );
+}

examples/stories/components/bareBonesRiveCanvas/components/Bird.tsx

@@ -0,0 +1,24 @@
+import { useRive } from '../../../../../src';
+import React, { useEffect } from 'react';
+
+export default function Bird({}) {
+  const { RiveComponent } = useRive({
+    stateMachines: 'State Machine 1',
+    artboard: 'bird',
+    src: 'map-accessories.riv',
+    autoplay: true,
+  });
+
+  useEffect(() => {
+    // console.log(`mount rive 🐓`);
+    return () => {
+      // console.log(`unmount rive 🐓`);
+    };
+  }, []);
+
+  return (
+    <div id="Rive-🐓" className="size-[100px] ring-1">
+      <RiveComponent />
+    </div>
+  );
+}

examples/stories/components/bareBonesRiveCanvas/components/Tree.tsx

@@ -0,0 +1,25 @@
+import { useRive } from '../../../../../src';
+
+import React, { useEffect } from 'react';
+
+export default function Tree({}) {
+  const { RiveComponent } = useRive({
+    stateMachines: 'State Machine 1',
+    artboard: 'treeComponent',
+    src: 'map-accessories.riv',
+    autoplay: true,
+  });
+
+  useEffect(() => {
+    // console.log(`mount rive 🌲`);
+    return () => {
+      // console.log(`unmount rive 🌲`);
+    };
+  }, []);
+
+  return (
+    <div id="Rive-🌲" className="size-[100px] ring-1">
+      <RiveComponent />
+    </div>
+  );
+}