JS Package Cleanup

.bazelignore

@@ -63,7 +63,7 @@ plugins/stage-revert-data/core/node_modules
 tools/asset-testing-library/core/node_modules
 docs/storybook/node_modules
 plugins/reference-assets/mocks/node_modules
-tools/addon-storybook/node_modules
+tools/storybook/node_modules
 tools/components/node_modules
 tools/mocks/node_modules
 docs/site/node_modules

docs/storybook/.storybook/main.ts

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

docs/storybook/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { PlayerDecorator } from "@player-ui/storybook-addon-player";
+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";

docs/storybook/BUILD

@@ -14,7 +14,7 @@ deps = [
     ":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-addon-player",
+    ":node_modules/@player-ui/storybook",
     "//:node_modules/@babel/preset-typescript",
     "//:node_modules/@babel/preset-env",
     "//:node_modules/@storybook/react-webpack5",
@@ -37,6 +37,7 @@ deps = [
     "//:node_modules/raw-loader",
     "//:node_modules/react",
     "//:node_modules/react-dom",
+    "//:node_modules/@storybook/addon-webpack5-compiler-babel",
     "//:typings",
     "tsconfig.json",
     "package.json",

docs/storybook/package.json

@@ -11,6 +11,6 @@
     "@player-ui/reference-assets-plugin-components": "workspace:*",
     "@player-ui/mocks": "workspace:*",
     "@player-ui/react": "workspace:*",
-    "@player-ui/storybook-addon-player": "workspace:*"
+    "@player-ui/storybook": "workspace:*"
   }
 }

docs/storybook/src/ManagedPlayer.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SuspenseSpinner } from "@player-ui/storybook-addon-player";
+import { SuspenseSpinner } from "@player-ui/storybook";
 import { Meta, StoryObj } from "@storybook/react";
 import { ManagedPlayer } from "@player-ui/react";
 import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";

docs/storybook/src/Player.stories.tsx

@@ -1,4 +1,4 @@
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Meta } from "@storybook/react";
 
 const meta: Meta = {

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory, PlayerStory } from "@player-ui/storybook";
 import { Action } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Action> = {
@@ -10,29 +10,23 @@ const meta: Meta<typeof Action> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/action/action-basic.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/action/action-basic.tsx"),
 );
 
 export const Expression = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/action/action-counter.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/action/action-counter.tsx"),
 );
 
 export const Navigation = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/action/action-navigation.tsx"
-    ),
+  () => import("!!raw-loader!@player-ui/mocks/action/action-navigation.tsx"),
 );
 
-export const TransitionToEnd = createDSLStory(
-  () =>
-    import(
-      "!!raw-loader!@player-ui/mocks/action/action-transition-to-end.tsx"
-    ),
+export const TransitionToEnd = () => (
+  <PlayerStory
+    flow={() =>
+      import(
+        "@player-ui/mocks/action/action-transition-to-end.json"
+      )
+    }
+  />
 );

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Choice } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Choice> = {

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Collection } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Collection> = {

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Image } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Image> = {

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Info } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Info> = {

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Input } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Input> = {

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

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { createDSLStory } from "@player-ui/storybook";
 import { Text } from "@player-ui/reference-assets-plugin-react";
 
 const meta: Meta<typeof Text> = {

package.json

@@ -46,6 +46,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/builder-vite": "^7.6.10",
     "@storybook/channels": "^7.6.10",
     "@storybook/components": "^7.6.10",

plugins/pubsub/core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@player-ui/pubsub",
+  "name": "@player-ui/pubsub-plugin",
   "version": "0.0.0-PLACEHOLDER",
   "main": "src/index.ts",
   "peerDependencies": {

tools/addon-storybook/BUILD → tools/storybook/BUILD

@@ -1,12 +1,16 @@
 load("@aspect_rules_js//npm:defs.bzl", "npm_package")
 load("@aspect_rules_js//js:defs.bzl", "js_library")
+load("@rules_player//javascript:defs.bzl", "create_package_json")
+load("@aspect_rules_js//js:defs.bzl", "js_binary")
 load("@npm//:tsup/package_json.bzl", tsup_bin = "bin")
 load("@npm//:defs.bzl", "npm_link_all_packages")
 
 npm_link_all_packages(
     name = "node_modules",
 )
 
+name = "storybook"
+
 dependencies = [
     "//:node_modules/@storybook/manager-api",
     "//:node_modules/@storybook/preview-api",
@@ -24,8 +28,11 @@ dev_dependencies = [
     "//:node_modules/@storybook/preview",
 ]
 
+tsup_name = name + "_tsup"
+tsup_target = ":" + tsup_name
+
 tsup_bin.tsup_node(
-    name = "addon-storybook-tsup",
+    name = tsup_name,
     srcs = glob(["src/**"]) + [
         "package.json",
         "tsconfig.json",
@@ -40,22 +47,55 @@ tsup_bin.tsup_node(
     chdir = package_name(),
 )
 
+package_json_name = name + "_package_json"
+package_json_target = ":" + package_json_name
+
+create_package_json(
+    name = package_json_name,
+    base_package_json = "package.json",
+    root_package_json = "//:package.json",
+    dependencies = dependencies,
+    stamp = -1,
+    substitutions = {
+        "0.0.0-PLACEHOLDER": "{STABLE_VERSION}",
+    },
+    custom_entrypoints = True,
+)
+
+library_name = name + "_library"
+library_target = ":" + library_name
+
 js_library(
-    name = "addon-storybook-library",
+    name = library_name,
     srcs = glob(["src/**"]) + [
         "manager.mjs",
-        "package.json",
         "preview.mjs",
-        ":addon-storybook-tsup",
+        tsup_target,
+        package_json_target,
     ],
 )
 
+pkg_name = name
+pkg_target = ":" + pkg_name
+
 npm_package(
-    name = "addon-storybook",
+    name = pkg_name,
+    package = pkg_name,
     srcs = [
-        ":addon-storybook-library",
-        ":addon-storybook-tsup",
+        library_target
     ],
-    package = "@player-ui/storybook-addon-player",
+    allow_overwrites = True,
+    replace_prefixes = {
+        package_json_name: "package",
+    },
     visibility = ["//visibility:public"],
 )
+
+js_binary(
+    name = name + ".npm-publish",
+    chdir = package_name() + "/" + pkg_name,
+    data = [pkg_target],
+    entry_point = "@aspect_rules_js//npm/private:npm_publish_mjs",
+    # required to make npm to be available in PATH
+    include_npm = True,
+)

tools/addon-storybook/package.json → tools/storybook/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@player-ui/storybook-addon-player",
+  "name": "@player-ui/storybook",
   "version": "0.0.0-PLACEHOLDER",
   "exports": {
     ".": {