Storybookk page reloads when the package in the parent changes

.storybook/main.js

@@ -1,13 +0,0 @@
-module.exports = {
-  "stories": [
-    "../examples/stories/*.stories.mdx",
-    "../examples/stories/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
-  ],
-  "framework": "@storybook/react",
-  staticDirs: ['../examples/stories/assets'],
-}

.storybook/preview-head.html

@@ -1,17 +0,0 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  rel="stylesheet"
-  data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap"
-/>
-<link
-  rel="stylesheet"
-  data-href="https://fonts.googleapis.com/css2?family=Roboto+Mono&amp;display=swap"
-/>
-
-<style>
-  body {
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-  }
-</style>

.storybook/preview.js

@@ -1,39 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  options: {
-    storySort: {
-      method: 'alphabetical',
-      order: ['Overview', 'Playback Controls', 'State Machines'],
-    },
-  },
-  viewMode: 'docs',
-};
-
-// The below function helps to default to the docs page, which contains all the documentation and examples
-function clickDocsButtonOnFirstLoad() {
-  window.removeEventListener("load", clickDocsButtonOnFirstLoad);
-
-  try {
-    const docsButtonSelector = window.parent.document.evaluate(
-      "//button[contains(., 'Docs')]",
-      window.parent.document,
-      null,
-      XPathResult.ANY_TYPE,
-      null
-    );
-
-    const button = docsButtonSelector.iterateNext();
-
-    button.click();
-  } catch (error) {
-    // Do nothing if it wasn't able to click on Docs button.
-  }
-}
-
-window.addEventListener("load", clickDocsButtonOnFirstLoad);

examples/.storybook/main.ts

@@ -1,22 +1,66 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
   ],
-  "addons": [
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/react-webpack5",
-    "options": {}
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    if (!config.resolve) config.resolve = {};
+    if (!config.resolve.alias) config.resolve.alias = {};
+
+    config.resolve.alias['@rive-app/react-canvas'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+    config.resolve.alias['@rive-app/react-canvas-lite'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+    config.resolve.alias['@rive-app/react-webgl'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+    config.resolve.alias['@rive-app/react-webgl2'] = path.resolve(
+      __dirname,
+      '../../'
+    );
+
+    config.module?.rules?.push({
+      test: /\.(ts|tsx|js|jsx)$/,
+      include: [
+        path.resolve(__dirname, '../src'),
+        path.resolve(__dirname, '../../'),
+      ],
+      use: {
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [
+            require.resolve('@babel/preset-env'),
+            require.resolve('@babel/preset-react'),
+            require.resolve('@babel/preset-typescript'),
+          ],
+        },
+      },
+    });
+
+    config.watchOptions = {
+      ignored: /node_modules/,
+      poll: 1000,
+      aggregateTimeout: 300,
+    };
+
+    return config;
   },
-  "staticDirs": [
-    "../public"
-  ]
 };
-export default config;
+
+export default config;

examples/src/App.tsx

@@ -1,24 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
+import { RiveThing } from './components/RiveThing';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <RiveThing />
     </div>
   );
 }

examples/src/components/RiveThing.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useRive } from '@rive-app/react-canvas';
+
+type User = {
+  name: string;
+};
+
+export interface HeaderProps {
+  user?: User;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
+}
+
+export const RiveThing = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => {
+  const { RiveComponent } = useRive({
+    src: 'https://cdn.rive.app/animations/vehicles.riv',
+    stateMachines: 'bumpy',
+    autoplay: true,
+  });
+
+  return (
+    <header className="header">
+      <RiveComponent />
+    </header>
+  );
+};

package.json

@@ -15,8 +15,6 @@
     "format": "prettier --write src",
     "types:check": "tsc --noEmit",
     "release": "release-it",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs-build",
     "release:patch": "npm run release -- --ci",
     "release:minor": "npm run release -- minor --ci",
     "release:major": "npm run release -- major --ci",
@@ -46,14 +44,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
-    "@storybook/addon-actions": "^6.5.3",
-    "@storybook/addon-essentials": "^6.5.3",
-    "@storybook/addon-interactions": "^6.5.3",
-    "@storybook/addon-links": "^6.5.3",
-    "@storybook/builder-webpack4": "^6.5.3",
-    "@storybook/manager-webpack4": "^6.5.3",
-    "@storybook/react": "^6.5.3",
-    "@storybook/testing-library": "^0.0.11",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
@@ -75,7 +65,6 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.5.12",
     "jest": "^27.0.4",
     "prettier": "^2.3.1",
     "react": "^17.0.2",

src/hooks/useRive.tsx

@@ -148,10 +148,10 @@ export default function useRive(
       });
     }
     return () => {
-      if(!isLoaded) {
+      if (!isLoaded) {
         r?.cleanup();
       }
-    }
+    };
   }, [canvasElem, isParamsLoaded, rive]);
   /**
    * Ref callback called when the container element mounts