Fix react references with storybook & pnpm

player-ui · Jan 8, 2024 · 4ec98a2 · 4ec98a2
1 parent 0d405a4
commit 4ec98a2
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 45 deletions.
diff --git a/MODULE.bazel b/MODULE.bazel
@@ -2,12 +2,12 @@ module(name = "player", version = "1.0")
 
 bazel_dep(name = "rules_player")
 
-# git_override(
-#     remote = "https://github.com/player-ui/rules_player.git",
-#     commit = "a1626024afabb38b9aca9981cc0e76b704d4fd77",
-#     module_name = "rules_player",
-# )
-local_path_override(module_name = "rules_player", path = "../rules_player")
+git_override(
+    remote = "https://github.com/player-ui/rules_player.git",
+    commit = "81c59e2734565307691672109f762b5fc297444e",
+    module_name = "rules_player",
+)
+# local_path_override(module_name = "rules_player", path = "../rules_player")
 
 bazel_dep(name = "aspect_bazel_lib", version = "1.32.0")
 bazel_dep(name = "aspect_rules_js", version = "1.34.1")

diff --git a/docs/storybook/.storybook/main.ts b/docs/storybook/.storybook/main.ts
@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|mdx|tsx|ts)"],
@@ -10,6 +11,19 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {},
   },
+  webpackFinal(config) {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+
+        // storybook + pnpm issue
+        // https://github.com/storybookjs/storybook/discussions/22650#discussioncomment-6414161
+        react: path.resolve(__dirname, "../../../node_modules/react"),
+        "react-dom": path.resolve(__dirname, "../../../node_modules/react-dom"),
+      };
+    }
+    return config;
+  },
   refs: {
     "@chakra-ui/react": {
       disable: true,

diff --git a/docs/storybook/.storybook/preview.js b/docs/storybook/.storybook/preview.js
@@ -1,34 +1,32 @@
-import { PlayerDecorator } from '@player-ui/storybook';
-import { ReferenceAssetsPlugin } from '@player-ui/reference-assets-plugin-react';
-import { CommonTypesPlugin } from '@player-ui/common-types-plugin';
-import { DataChangeListenerPlugin } from '@player-ui/data-change-listener-plugin';
-import { ComputedPropertiesPlugin } from '@player-ui/computed-properties-plugin'
-import * as dslRefComponents from '@player-ui/reference-assets-components';
+import { PlayerDecorator } from "@player-ui/storybook";
+import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
+import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
+import { DataChangeListenerPlugin } from "@player-ui/data-change-listener-plugin";
+import { ComputedPropertiesPlugin } from "@player-ui/computed-properties-plugin";
+import * as dslRefComponents from "@player-ui/reference-assets-components";
+
+import React from "react";
+window.React = React;
 
 const reactPlayerPlugins = [
   new ReferenceAssetsPlugin(),
   new CommonTypesPlugin(),
   new DataChangeListenerPlugin(),
   new ComputedPropertiesPlugin(),
-]
+];
 
 export const parameters = {
   reactPlayerPlugins,
   dslEditor: {
     additionalModules: {
-      '@player-ui/reference-assets-components': dslRefComponents,
+      "@player-ui/reference-assets-components": dslRefComponents,
     },
   },
   options: {
     storySort: {
-      order: [
-        'Welcome',
-        'Player',
-        'Reference Assets',
-        ['Overview', 'Intro'],
-      ]
-    }
-  }
-}
+      order: ["Welcome", "Player", "Reference Assets", ["Overview", "Intro"]],
+    },
+  },
+};
 
-export const decorators = [PlayerDecorator];
+export const decorators = [PlayerDecorator];
diff --git a/docs/storybook/BUILD b/docs/storybook/BUILD
@@ -19,6 +19,8 @@ deps = [
     "//:node_modules/@babel/preset-env",
     "//:node_modules/@storybook/react-webpack5",
     "//:node_modules/raw-loader",
+    "//:node_modules/react",
+    "//:node_modules/react-dom",
     "//:typings",
     "tsconfig.json",
     "package.json",
@@ -54,5 +56,8 @@ storybook_bin.storybook_binary(
         "src/**/*",
         ".storybook/*",
     ]) + deps,
+    tags = [
+        "ibazel_notify_changes",
+    ],
     visibility = ["//visibility:public"],
 )
diff --git a/docs/storybook/src/Player.stories.mdx b/docs/storybook/src/Player.stories.mdx
@@ -1,15 +1,16 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ErrorHandler, StoryWrapper } from './components';
-import { ManagedPlayer } from '@player-ui/react';
-import { PlayerStory } from '@player-ui/storybook';
-import basicFlow from './flows/basic-action';
-import { ReferenceAssetsPlugin } from '@player-ui/reference-assets-plugin-react';
+import { Suspense } from "react";
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { ErrorHandler, StoryWrapper } from "./components";
+import { ManagedPlayer } from "@player-ui/react";
+import { PlayerStory } from "@player-ui/storybook";
+import basicFlow from "./flows/basic-action";
+import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
 import {
   createFlowManager,
   SIMPLE_FLOWS,
   ERROR_CONTENT_FLOW,
   ERROR_ASSET_FLOW,
-} from './flows/managed';
+} from "./flows/managed";
 
 <Meta title="Player" />
 
@@ -51,12 +52,12 @@ Between loading each flow, the `ManagedPlayer` will trigger `React.Suspense` and
 <Canvas>
   <Story name="Managed Web Player">
     <StoryWrapper>
-      <React.Suspense fallback="Loading...">
+      <Suspense fallback="Loading...">
         <ManagedPlayer
           plugins={[new ReferenceAssetsPlugin()]}
           manager={createFlowManager(SIMPLE_FLOWS)}
         />
-      </React.Suspense>
+      </Suspense>
     </StoryWrapper>
   </Story>
 </Canvas>
@@ -73,13 +74,13 @@ This is an example of a flow that triggers an error with an issue within the con
 <Canvas>
   <Story name="Content Errors">
     <StoryWrapper>
-    <React.Suspense fallback="Loading...">
-      <ManagedPlayer
-        fallbackComponent={ErrorHandler}
-        plugins={[new ReferenceAssetsPlugin()]}
-        manager={createFlowManager(ERROR_CONTENT_FLOW)}
-      />
-    </React.Suspense>
+      <Suspense fallback="Loading...">
+        <ManagedPlayer
+          fallbackComponent={ErrorHandler}
+          plugins={[new ReferenceAssetsPlugin()]}
+          manager={createFlowManager(ERROR_CONTENT_FLOW)}
+        />
+      </Suspense>
     </StoryWrapper>
   </Story>
 </Canvas>
@@ -89,15 +90,15 @@ This is an example of a flow that triggers an error with an issue within the con
 This is an example of a flow that triggers an error from the UI -- in this case trying to render as asset type that has no registered handler.
 
 <Canvas>
-  <Story name="Asset Errors">       
+  <Story name="Asset Errors">
     <StoryWrapper>
-      <React.Suspense fallback="Loading...">
+      <Suspense fallback="Loading...">
         <ManagedPlayer
           fallbackComponent={ErrorHandler}
           plugins={[new ReferenceAssetsPlugin()]}
           manager={createFlowManager(ERROR_ASSET_FLOW)}
         />
-      </React.Suspense>
+      </Suspense>
     </StoryWrapper>
   </Story>
 </Canvas>
diff --git a/tools/storybook/src/player/PlayerStory.tsx b/tools/storybook/src/player/PlayerStory.tsx
@@ -278,6 +278,12 @@ export const DSLLocalPlayerStory = (
   return <PlayerJsonEditorStory />;
 };
 
+export const SuspenseWrapper = (props: { children: React.ReactNode }) => {
+  return (
+    <React.Suspense fallback="Loading...">{props.children}</React.Suspense>
+  );
+};
+
 /** A DSL story that handles lazy-loaded content */
 export const DSLPlayerStory = (
   props: Omit<PlayerStoryProps, "flow"> & {
@@ -314,8 +320,8 @@ export const DSLPlayerStory = (
   }, [dslContent]);
 
   return (
-    <React.Suspense fallback="Loading...">
+    <SuspenseWrapper>
       <AsLazyComp />
-    </React.Suspense>
+    </SuspenseWrapper>
   );
 };