Merge pull request #8 from player-ui/storybook

storybook

.bazelignore

@@ -14,6 +14,7 @@ profile
 
 # Node modules
 node_modules
+addon-storybook/node_modules
 action/node_modules
 collection/node_modules
 navigation/node_modules
@@ -22,6 +23,8 @@ object-inspector/node_modules
 input/node_modules
 plugin/node_modules
 list/node_modules
+docs/storybook/node_modules
+docs/site/node_modules
 
 # Backup files
 _backup

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   extends: [
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:storybook/recommended",
   ],
   parser: "@typescript-eslint/parser",
   ignorePatterns: ["node_modules", "dist", "__snapshots__"],

.gitignore

@@ -79,4 +79,5 @@ ios/*/*/Resources/**/*.js
 # File used in CI to pass build number between iOS and release stage
 .ios-build-number
 
-.bazelrc.local
+.bazelrc.local
+*storybook.log

MODULE.bazel

@@ -2,7 +2,7 @@ module(name = "devtools-ui", version = "1.0")
 
 bazel_dep(name = "rules_player")
 
-git_override(module_name = "rules_player", remote = "https://github.com/player-ui/rules_player.git", commit = "394aaebd9b50fab3719112d89b85e20437bd58e9")
+git_override(module_name = "rules_player", remote = "https://github.com/player-ui/rules_player.git", commit = "56d4319435f0cafe7e6d9b90223e74d3b4dc25ef")
 
 bazel_dep(name = "aspect_bazel_lib", version = "1.39.0")
 bazel_dep(name = "aspect_rules_js", version = "1.34.1")

action/BUILD

@@ -23,11 +23,11 @@ js_pipeline(
         "//:node_modules/@types/react",
         "//:node_modules/framer-motion",
         "//:node_modules/react",
-        "//:node_modules/@devtools-ui/text",
         "//:node_modules/@player-ui/react",
         "//:node_modules/@player-ui/asset-transform-plugin",
         "//:node_modules/@player-ui/player",
         "//:node_modules/dlv",
+        "//:node_modules/eslint-plugin-storybook",
         ":node_modules/@devtools-ui/text",
         ":node_modules/@devtools-ui/collection",
     ],

action/src/dsl/Action.tsx

@@ -2,25 +2,29 @@ import React from "react";
 import {
   AssetPropsWithChildren,
   Asset,
-  ExpressionTemplateInstance,
   createSlot,
+  isTemplateStringInstance,
 } from "@player-tools/dsl";
 import type { Asset as AssetType } from "@player-ui/player";
 import type { ActionAsset } from "../types";
 import { Collection } from "@devtools-ui/collection";
 import { Text } from "@devtools-ui/text";
 
-export const Action = (
-  props: Omit<AssetPropsWithChildren<ActionAsset>, "exp"> & {
-    /** An optional expression to execute before transitioning */
-    exp?: ExpressionTemplateInstance;
-  }
-) => {
+export const Action = (props: AssetPropsWithChildren<ActionAsset>) => {
   const { exp, children, ...rest } = props;
 
+  let expValue: ActionAsset["exp"];
+
+  if (isTemplateStringInstance(exp)) {
+    expValue = exp.toValue();
+  } else if (Array.isArray(exp)) {
+    expValue = exp.map((e) => (typeof e === "string" ? e : e.toValue()));
+  } else if (exp) {
+    expValue = exp;
+  }
+
   return (
-    <Asset type="action" {...rest}>
-      <property name="exp">{exp?.toValue()}</property>
+    <Asset type="action" {...rest} {...(expValue && { exp: expValue })}>
       {children}
     </Asset>
   );

addon-storybook/BUILD

@@ -0,0 +1,76 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+load("@aspect_rules_js//npm:defs.bzl", "npm_package")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//:tsup/package_json.bzl", tsup_bin = "bin")
+
+npm_link_all_packages(
+    name = "node_modules",
+)
+
+dependencies = [
+    "//:node_modules/@storybook/manager-api",
+    "//:node_modules/@storybook/preview-api",
+    "//:node_modules/@storybook/core-events",
+    "//:node_modules/@storybook/components",
+    "//:node_modules/@storybook/icons",
+    "//:node_modules/react-redux",
+    "//:node_modules/redux",
+    "//:node_modules/react",
+    "//:node_modules/@types/react",
+    "//:node_modules/dequal",
+    "//:node_modules/@monaco-editor/react",
+    "//:node_modules/@chakra-ui/react",
+    "//:node_modules/@storybook/types",
+    "//:node_modules/esbuild-wasm",
+    "//:node_modules/@player-tools/dsl",
+    "//:node_modules/@player-ui/react",
+    "//:node_modules/lz-string",
+    "//:node_modules/@player-ui/beacon-plugin-react",
+    "//:node_modules/@player-ui/make-flow",
+    "//:node_modules/@player-ui/metrics-plugin-react",
+    "//:node_modules/@storybook/channels",
+    "//:node_modules/@reduxjs/toolkit",
+    "//:node_modules/@types/redux-state-sync",
+    "//:node_modules/redux-state-sync",
+    "//:node_modules/@types/uuid",
+    "//:node_modules/uuid",
+    "//:node_modules/@storybook/manager",
+    "//:node_modules/tsup",
+    "//:node_modules/@storybook/preview",
+]
+
+tsup_bin.tsup_node(
+    name = "addon-storybook-tsup",
+    srcs = glob(["src/**"]) + [
+        "package.json",
+        "tsconfig.json",
+        "tsup.config.ts",
+    ] + dependencies,
+    outs = [
+        "dist/index.js",
+        "dist/index.mjs",
+    ],
+    args = [
+    ],
+    chdir = package_name(),
+)
+
+js_library(
+    name = "addon-storybook-library",
+    srcs = glob(["src/**"]) + [
+        "manager.mjs",
+        "package.json",
+        ":addon-storybook-tsup",
+    ],
+    deps = dependencies,
+)
+
+npm_package(
+    name = "addon-storybook",
+    srcs = [
+        ":addon-storybook-library",
+        ":addon-storybook-tsup",
+    ],
+    package = "@player-ui/storybook-addon-player",
+    visibility = ["//visibility:public"],
+)

addon-storybook/manager.mjs

@@ -0,0 +1,2 @@
+import { register } from "./dist";
+register();

addon-storybook/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@player-ui/storybook-addon-player",
+  "version": "0.0.0-PLACEHOLDER",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./manager": "./manager.mjs",
+    "./package.json": "./package.json"
+  },
+  "main": "./src/index.ts"
+}

addon-storybook/src/addons/appetize/index.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import type { API } from "@storybook/manager-api";
+import { useParameter } from "@storybook/preview-api";
+import { STORY_CHANGED } from "@storybook/core-events";
+import {
+  IconButton,
+  WithTooltip,
+  TooltipLinkList,
+} from "@storybook/components";
+import { BrowserIcon, MobileIcon } from "@storybook/icons";
+import { useDispatch, useSelector } from "react-redux";
+import type { StateType } from "../../redux";
+import { setPlatform } from "../../redux";
+import type { RenderTarget } from "../../types";
+
+interface RenderSelectionProps {
+  /** storybook api */
+  api: API;
+}
+
+/** Component to show the appetize dropdown */
+export const RenderSelection = ({ api }: RenderSelectionProps) => {
+  const params = useParameter("appetizeTokens", {});
+  const dispatch = useDispatch();
+
+  const selectedPlatform = useSelector<StateType, RenderTarget["platform"]>(
+    (state) => state.platform.platform ?? "web"
+  );
+
+  React.useEffect(() => {
+    /** callback for the subscribe listener */
+    const listener = () => {
+      dispatch(setPlatform({ platform: "web" }));
+    };
+
+    api.getChannel()?.addListener(STORY_CHANGED, listener);
+
+    return () => {
+      api.getChannel()?.removeListener(STORY_CHANGED, listener);
+    };
+  }, [api, dispatch]);
+
+  const mobilePlatforms = Object.keys(params ?? {}) as Array<"ios" | "android">;
+
+  if (mobilePlatforms.length === 0) {
+    // No keys set so don't show
+    return null;
+  }
+
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => (
+        <TooltipLinkList
+          links={(["web", ...mobilePlatforms] as const).map((platform) => ({
+            id: platform,
+            title: platform,
+            onClick: () => {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              setPlatform(platform as any);
+              dispatch(setPlatform({ platform }));
+              onHide();
+            },
+            value: platform,
+            active: platform === selectedPlatform,
+          }))}
+        />
+      )}
+    >
+      <IconButton title="Change the render target">
+        {selectedPlatform === "web" ? <BrowserIcon /> : <MobileIcon />}
+      </IconButton>
+    </WithTooltip>
+  );
+};

addon-storybook/src/addons/constants.ts

@@ -0,0 +1,10 @@
+export const PARAM_KEY = "web-player";
+export const ADDON_ID = "web-player/addon";
+
+export const FLOW_PANEL_ID = `${ADDON_ID}/flow-editor-panel`;
+export const EVENT_PANEL_ID = `${ADDON_ID}/events-panel`;
+export const DOCS_PANEL_ID = `${ADDON_ID}/asset-docs-panel`;
+export const MOBILE_TOOL_ID = `${ADDON_ID}/mobile-tool`;
+export const FLOW_REFRESH_TOOL_ID = `${ADDON_ID}/flow-refresh-tool`;
+export const PLAYER_RENDERER_TOOL_ID = `${ADDON_ID}/player-renderer-tool`;
+export const RENDER_SELECT_TOOL_ID = `${ADDON_ID}/render-select-tool`;