Storybook Addon Fixes

MODULE.bazel

@@ -4,13 +4,15 @@ module(
 )
 
 bazel_dep(name = "rules_player")
+
 archive_override(
-  module_name = "rules_player",
-  strip_prefix = "rules_player-1.1.3",
-  urls = ["https://github.com/player-ui/rules_player/archive/refs/tags/v1.1.3.tar.gz"],
-  integrity = "sha256-Fqe4Y9aY5R0Y2yL9k+fsNKDrNPFP5/utyS5DQaoeYBA="
+    module_name = "rules_player",
+    strip_prefix = "rules_player-1.1.4",
+    urls = ["https://github.com/player-ui/rules_player/archive/refs/tags/v1.1.4.tar.gz"],
+    integrity = "sha256-5YsvzRBeBV2dVgRorGouQfdkb/lu1W8k24QAIModpLw=",
 )
-#local_path_override(module_name = "rules_player", path = "../rules_player")
+
+# local_path_override(module_name = "rules_player", path = "../rules_player")
 
 bazel_dep(name = "aspect_bazel_lib", version = "2.7.8")
 bazel_dep(name = "aspect_rules_js", version = "1.42.3")

docs/site/pages/tools/storybook.mdx

@@ -10,7 +10,6 @@ The reference asset set, complete with the storybook-plugin integration below is
 
 The `@player-ui/storybook` package is a storybook addon + wrapper that provides easy-to-use mechanisms for integrating Player flows into storybook.
 
-
 ### Installation
 
 There are a few different parts required to integrate with storybook.
@@ -25,60 +24,80 @@ Next, add `@player-ui/storybook` to the `addons` section in `.storybook/main.js`
 
 ```js
 module.exports = {
-  addons: [
-    '@player-ui/storybook'
-  ]
-}
+  addons: ["@player-ui/storybook"],
+};
 ```
 
 In `.storybook/preview.js` add the `PlayerDecorator`:
 
 ```jsx
-import { PlayerDecorator } from '@player-ui/storybook';
+import { PlayerDecorator } from "@player-ui/storybook";
 
-export const decorators = [
-  PlayerDecorator
-];
+export const decorators = [PlayerDecorator];
 ```
 
 Lastly use the `PlayerStory` component to render a flow:
 
 ```jsx
-import { PlayerStory } from '@player-ui/storybook';
+import { PlayerStory } from "@player-ui/storybook";
 
-export const MyStory = (
-  <PlayerStory flow={initialFlow} />
-)
+export const MyStory = <PlayerStory flow={initialFlow} />;
 ```
 
-The `reactPlayerPlugins` story parameter allows you to add any custom plugins (like asset providers) to a story. This can also be set in the `.storybook/preview.js` file as a global option: 
+The `reactPlayerPlugins` story parameter allows you to add any custom plugins (like asset providers) to a story. This can also be set in the `.storybook/preview.js` file as a global option:
 
 ```js
-import { ReferenceAssetsPlugin } from '@player-ui/reference-assets-plugin-react';
+import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
 
 export const parameters = {
-  reactPlayerPlugins: [
-    new ReferenceAssetsPlugin()
-  ],
-}
+  reactPlayerPlugins: [new ReferenceAssetsPlugin()],
+};
 ```
 
 ### Panels
 
 #### Events
 
-The events panel addon shows a timeline of events as the flow is processed. Here you will see logs, render/update metrics, data mutations, and more. 
+The events panel addon shows a timeline of events as the flow is processed. Here you will see logs, render/update metrics, data mutations, and more.
 
 ![Events Addon Panel](/tools/storybook/events-addon.gif)
 
 #### Flow
 
-The flow panel addon enables users to view and edit the JSON content in the running Player. 
+The flow panel addon enables users to view and edit the JSON content in the running Player.
 
 ![Flow Addon Panel](/tools/storybook/flow-addon.gif)
 
+#### Asset Docs
+
+The asset docs panel will show the data-types for the configured Assets.
+
+![Docs Addon Panel](/tools/storybook/docs-addon.gif)
+
+In order to configure the panel to show specific asset documentation, first include the `assetXLRSources` as a parameter in your `preview.js`:
+
+```ts
+import RefXLR from "@player-ui/reference-assets-plugin/dist/xlr/manifest.js";
+
+export const parameters = {
+  assetXLRSources: [RefXLR],
+};
+```
+
+then use the `assetDocs` parameter in each story to set the asset types to render:
+
+```ts
+const meta: Meta<typeof Action> = {
+  title: "Reference Assets/Action",
+  component: Action,
+  parameters: {
+    assetDocs: ["ActionAsset"],
+  },
+};
+```
+
 #### Reset
 
 The reset button in the toolbar will reset the running Player with the initial content. This is useful for clearing any data or validation state, or for resetting a completed flow.
 
-![Flow Reset Button](/tools/storybook/flow-reset.gif)
+![Flow Reset Button](/tools/storybook/flow-reset.gif)

docs/storybook/.storybook/main.ts

@@ -3,7 +3,12 @@ import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.@(stories.@(js|tsx|ts))", "../src/**/*.mdx"],
-  addons: ["@storybook/addon-docs", "@player-ui/storybook", "@storybook/addon-webpack5-compiler-babel"],
+  addons: [
+    "storybook-dark-mode",
+    "@storybook/addon-docs",
+    "@player-ui/storybook",
+    "@storybook/addon-webpack5-compiler-babel",
+  ],
   typescript: {
     reactDocgen: false,
   },

docs/storybook/.storybook/preview.js

@@ -4,6 +4,7 @@ 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-plugin-components";
+import RefXLR from "@player-ui/reference-assets-plugin/dist/xlr/manifest.js";
 
 import "@player-ui/reference-assets-plugin-react/dist/index.css";
 
@@ -16,6 +17,7 @@ const reactPlayerPlugins = [
 
 export const parameters = {
   reactPlayerPlugins,
+  assetXLRSources: [RefXLR],
   dslEditor: {
     additionalModules: {
       "@player-ui/reference-assets-plugin-components": dslRefComponents,
@@ -38,7 +40,7 @@ export const parameters = {
 
 const preview = {
   parameters,
-  decorators: [PlayerDecorator]
+  decorators: [PlayerDecorator],
 };
 
 export default preview;

docs/storybook/BUILD

@@ -8,13 +8,15 @@ npm_link_all_packages(
 deps = [
     ":node_modules/@player-ui/common-types-plugin",
     ":node_modules/@player-ui/make-flow",
+    ":node_modules/@player-ui/reference-assets-plugin",
     ":node_modules/@player-ui/reference-assets-plugin-react",
     ":node_modules/@player-ui/mocks",
     ":node_modules/@player-ui/reference-assets-plugin-components",
     ":node_modules/@player-ui/data-change-listener-plugin",
     ":node_modules/@player-ui/computed-properties-plugin",
     ":node_modules/@player-ui/react",
     ":node_modules/@player-ui/storybook",
+    "//:node_modules/typescript",
     "//:node_modules/@babel/preset-typescript",
     "//:node_modules/@babel/preset-env",
     "//:node_modules/@storybook/react-webpack5",
@@ -52,17 +54,17 @@ storybook_bin.storybook(
         "src/**/*",
         ".storybook/*",
     ]) + deps,
-    chdir = package_name(),
-    env = {
-        "CACHE_DIR": ".cache",
-    },
     args = [
         "build",
         "--output-dir",
         "./storybook",
         "--debug",
         "--disable-telemetry",
     ],
+    chdir = package_name(),
+    env = {
+        "CACHE_DIR": ".cache",
+    },
     out_dirs = ["storybook"],
     visibility = ["//visibility:public"],
 )

docs/storybook/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@player-ui/common-types-plugin": "workspace:*",
     "@player-ui/make-flow": "workspace:*",
+    "@player-ui/reference-assets-plugin": "workspace:*",
     "@player-ui/reference-assets-plugin-react": "workspace:*",
     "@player-ui/data-change-listener-plugin": "workspace:*",
     "@player-ui/computed-properties-plugin": "workspace:*",

docs/storybook/src/Welcome.mdx

@@ -2,8 +2,7 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Welcome" />
 
-![Player Logo](/logo/logo-light-large.png?lightModeOnly)
-![Player Logo](/logo/logo-light-large.png?darkModeOnly)
+![Player Logo](https://player-ui.github.io/latest/logo/logo-light-large.png)
 
 Player is a framework for building cross-platform experiences. The main engine is written in Typescript, with platform specific adapters for iOS, Android, and React (web). It's built from the ground up with plugins in mind to perfectly tailor the experience specifically for your app.
 

docs/storybook/src/reference-assets/Action.stories.tsx

@@ -5,6 +5,9 @@ import { Action } from "@player-ui/reference-assets-plugin-react";
 const meta: Meta<typeof Action> = {
   title: "Reference Assets/Action",
   component: Action,
+  parameters: {
+    assetDocs: ["ActionAsset"],
+  },
 };
 
 export default meta;
@@ -23,10 +26,6 @@ export const Navigation = createDSLStory(
 
 export const TransitionToEnd = () => (
   <PlayerStory
-    flow={() =>
-      import(
-        "@player-ui/mocks/action/action-transition-to-end.json"
-      )
-    }
+    flow={() => import("@player-ui/mocks/action/action-transition-to-end.json")}
   />
 );

docs/storybook/src/reference-assets/Choice.stories.tsx

@@ -5,20 +5,17 @@ import { Choice } from "@player-ui/reference-assets-plugin-react";
 const meta: Meta<typeof Choice> = {
   title: "Reference Assets/Choice",
   component: Choice,
+  parameters: {
+    assetDocs: ["ChoiceAsset"],
+  },
 };
 
 export default meta;
 
 export const Basic = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/choice/choice-basic.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/choice/choice-basic.tsx"),
 );
 
 export const Validation = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/choice/choice-validation.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/choice/choice-validation.tsx"),
 );

docs/storybook/src/reference-assets/Collection.stories.tsx

@@ -5,13 +5,13 @@ import { Collection } from "@player-ui/reference-assets-plugin-react";
 const meta: Meta<typeof Collection> = {
   title: "Reference Assets/Collection",
   component: Collection,
+  parameters: {
+    assetDocs: ["CollectionAsset"],
+  },
 };
 
 export default meta;
 
 export const Basic = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/collection/collection-basic.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/collection/collection-basic.tsx"),
 );

docs/storybook/src/reference-assets/Image.stories.tsx

@@ -5,34 +5,27 @@ import { Image } from "@player-ui/reference-assets-plugin-react";
 const meta: Meta<typeof Image> = {
   title: "Reference Assets/Image",
   component: Image,
+  parameters: {
+    assetDocs: ["ImageAsset"],
+  },
 };
 
 export default meta;
 
 export const Basic = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/image/image-basic.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/image/image-basic.tsx"),
 );
 
 export const Caption = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/image/image-with-caption.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/image/image-with-caption.tsx"),
 );
 
 export const Accessibility = createDSLStory(
   () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/image/image-with-accessibility.tsx"
-    ),
+    import("!!raw-loader!@player-ui/mocks/image/image-with-accessibility.tsx"),
 );
 
 export const Placeholder = createDSLStory(
   () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/image/image-with-placeholder.tsx"
-    ),
+    import("!!raw-loader!@player-ui/mocks/image/image-with-placeholder.tsx"),
 );

docs/storybook/src/reference-assets/Info.stories.tsx

@@ -5,34 +5,25 @@ import { Info } from "@player-ui/reference-assets-plugin-react";
 const meta: Meta<typeof Info> = {
   title: "Reference Assets/Info",
   component: Info,
+  parameters: {
+    assetDocs: ["InfoAsset"],
+  },
 };
 
 export default meta;
 
 export const Basic = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/info/info-basic.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/info/info-basic.tsx"),
 );
 
 export const DynamicFlow = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/info/info-dynamic-flow.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/info/info-dynamic-flow.tsx"),
 );
 
 export const Footer = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/info/info-footer.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/info/info-footer.tsx"),
 );
 
 export const ModalFlow = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/info/info-modal-flow.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/info/info-modal-flow.tsx"),
 );