diff --git a/.bazelignore b/.bazelignore index beb4c9989..debd2f487 100644 --- a/.bazelignore +++ b/.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 \ No newline at end of file diff --git a/docs/storybook/.storybook/main.ts b/docs/storybook/.storybook/main.ts index 5e86cd2aa..4b045b353 100644 --- a/docs/storybook/.storybook/main.ts +++ b/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, }, diff --git a/docs/storybook/.storybook/preview.js b/docs/storybook/.storybook/preview.js index 03496a0dd..4d87a9ac1 100644 --- a/docs/storybook/.storybook/preview.js +++ b/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"; diff --git a/docs/storybook/BUILD b/docs/storybook/BUILD index 0caa5bfb3..865768aa4 100644 --- a/docs/storybook/BUILD +++ b/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", diff --git a/docs/storybook/package.json b/docs/storybook/package.json index de86b8e0f..35342f833 100644 --- a/docs/storybook/package.json +++ b/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:*" } } diff --git a/docs/storybook/src/ManagedPlayer.stories.tsx b/docs/storybook/src/ManagedPlayer.stories.tsx index 09d09b51e..99b756406 100644 --- a/docs/storybook/src/ManagedPlayer.stories.tsx +++ b/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"; diff --git a/docs/storybook/src/Player.stories.tsx b/docs/storybook/src/Player.stories.tsx index 037b1dfaa..14280492f 100644 --- a/docs/storybook/src/Player.stories.tsx +++ b/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 = { diff --git a/docs/storybook/src/reference-assets/Action.stories.tsx b/docs/storybook/src/reference-assets/Action.stories.tsx index 47917d32f..48ebb876e 100644 --- a/docs/storybook/src/reference-assets/Action.stories.tsx +++ b/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 = { @@ -10,29 +10,23 @@ const meta: Meta = { 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 = () => ( + + import( + "@player-ui/mocks/action/action-transition-to-end.json" + ) + } + /> ); diff --git a/docs/storybook/src/reference-assets/Choice.stories.tsx b/docs/storybook/src/reference-assets/Choice.stories.tsx index 21e7f7d0a..bd5a99645 100644 --- a/docs/storybook/src/reference-assets/Choice.stories.tsx +++ b/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 = { diff --git a/docs/storybook/src/reference-assets/Collection.stories.tsx b/docs/storybook/src/reference-assets/Collection.stories.tsx index 861b00ed2..ec549aa62 100644 --- a/docs/storybook/src/reference-assets/Collection.stories.tsx +++ b/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 = { diff --git a/docs/storybook/src/reference-assets/Image.stories.tsx b/docs/storybook/src/reference-assets/Image.stories.tsx index ea5f6fa76..8c191fafb 100644 --- a/docs/storybook/src/reference-assets/Image.stories.tsx +++ b/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 = { diff --git a/docs/storybook/src/reference-assets/Info.stories.tsx b/docs/storybook/src/reference-assets/Info.stories.tsx index ffedb7c47..d83133263 100644 --- a/docs/storybook/src/reference-assets/Info.stories.tsx +++ b/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 = { diff --git a/docs/storybook/src/reference-assets/Input.stories.tsx b/docs/storybook/src/reference-assets/Input.stories.tsx index d70a7f1ea..0282d0218 100644 --- a/docs/storybook/src/reference-assets/Input.stories.tsx +++ b/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 = { diff --git a/docs/storybook/src/reference-assets/Text.stories.tsx b/docs/storybook/src/reference-assets/Text.stories.tsx index f290397f3..0c723cb2b 100644 --- a/docs/storybook/src/reference-assets/Text.stories.tsx +++ b/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 = { diff --git a/package.json b/package.json index ff2322fa5..3614359c4 100644 --- a/package.json +++ b/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", diff --git a/plugins/pubsub/core/package.json b/plugins/pubsub/core/package.json index e331871f2..62974819b 100644 --- a/plugins/pubsub/core/package.json +++ b/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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b83f947b9..c4e77bd12 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,6 +93,9 @@ importers: '@storybook/addon-docs': specifier: ^7.6.10 version: 7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1) + '@storybook/addon-webpack5-compiler-babel': + specifier: ^3.0.3 + version: 3.0.3(webpack@5.91.0) '@storybook/builder-vite': specifier: ^7.6.10 version: 7.6.19(typescript@5.3.2)(vite@4.5.3) @@ -568,9 +571,9 @@ importers: '@player-ui/reference-assets-plugin-react': specifier: workspace:* version: link:../../plugins/reference-assets/react - '@player-ui/storybook-addon-player': + '@player-ui/storybook': specifier: workspace:* - version: link:../../tools/addon-storybook + version: link:../../tools/storybook plugins/asset-provider/react: dependencies: @@ -985,7 +988,21 @@ importers: react/subscribe: {} - tools/addon-storybook: + tools/asset-testing-library/core: + dependencies: + '@player-ui/asset-transform-plugin': + specifier: workspace:* + version: link:../../../plugins/asset-transform/core + '@player-ui/make-flow': + specifier: workspace:* + version: link:../../../core/make-flow + '@player-ui/player': + specifier: workspace:* + version: link:../../../core/player + + tools/mocks: {} + + tools/storybook: dependencies: '@player-ui/beacon-plugin-react': specifier: workspace:* @@ -1006,20 +1023,6 @@ importers: specifier: workspace:* version: link:../../core/types - tools/asset-testing-library/core: - dependencies: - '@player-ui/asset-transform-plugin': - specifier: workspace:* - version: link:../../../plugins/asset-transform/core - '@player-ui/make-flow': - specifier: workspace:* - version: link:../../../core/make-flow - '@player-ui/player': - specifier: workspace:* - version: link:../../../core/player - - tools/mocks: {} - packages: /@adobe/css-tools@4.3.3: @@ -6290,6 +6293,17 @@ packages: - supports-color dev: false + /@storybook/addon-webpack5-compiler-babel@3.0.3(webpack@5.91.0): + resolution: {integrity: sha512-rVQTTw+oxJltbVKaejIWSHwVKOBJs3au21f/pYXhV0aiNgNhxEa3vr79t/j0j8ox8uJtzM8XYOb7FlkvGfHlwQ==, tarball: https://registry.npmjs.org/@storybook/addon-webpack5-compiler-babel/-/addon-webpack5-compiler-babel-3.0.3.tgz} + engines: {node: '>=18'} + dependencies: + '@babel/core': 7.24.5 + babel-loader: 9.1.3(@babel/core@7.24.5)(webpack@5.91.0) + transitivePeerDependencies: + - supports-color + - webpack + dev: false + /@storybook/blocks@7.6.19(@types/react-dom@18.3.0)(@types/react@18.3.2)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-/c/bVQRmyRPoviJhPrFdLfubRcrnZWTwkjxsCvrOTJ/UDOyEl0t/H8yY1mGq7KWWTdbIznnZWhAIofHnH4/Esw==, tarball: https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.19.tgz} peerDependencies: diff --git a/tools/addon-storybook/BUILD b/tools/storybook/BUILD similarity index 50% rename from tools/addon-storybook/BUILD rename to tools/storybook/BUILD index ee336bc54..48681daff 100644 --- a/tools/addon-storybook/BUILD +++ b/tools/storybook/BUILD @@ -1,5 +1,7 @@ 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") @@ -7,6 +9,8 @@ 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, +) \ No newline at end of file diff --git a/tools/addon-storybook/manager.mjs b/tools/storybook/manager.mjs similarity index 100% rename from tools/addon-storybook/manager.mjs rename to tools/storybook/manager.mjs diff --git a/tools/addon-storybook/package.json b/tools/storybook/package.json similarity index 93% rename from tools/addon-storybook/package.json rename to tools/storybook/package.json index 622e88c98..5455bd6ab 100644 --- a/tools/addon-storybook/package.json +++ b/tools/storybook/package.json @@ -1,5 +1,5 @@ { - "name": "@player-ui/storybook-addon-player", + "name": "@player-ui/storybook", "version": "0.0.0-PLACEHOLDER", "exports": { ".": { diff --git a/tools/addon-storybook/preview.mjs b/tools/storybook/preview.mjs similarity index 100% rename from tools/addon-storybook/preview.mjs rename to tools/storybook/preview.mjs diff --git a/tools/addon-storybook/src/addons/appetize/index.tsx b/tools/storybook/src/addons/appetize/index.tsx similarity index 100% rename from tools/addon-storybook/src/addons/appetize/index.tsx rename to tools/storybook/src/addons/appetize/index.tsx diff --git a/tools/addon-storybook/src/addons/constants.ts b/tools/storybook/src/addons/constants.ts similarity index 100% rename from tools/addon-storybook/src/addons/constants.ts rename to tools/storybook/src/addons/constants.ts diff --git a/tools/addon-storybook/src/addons/editor/index.tsx b/tools/storybook/src/addons/editor/index.tsx similarity index 100% rename from tools/addon-storybook/src/addons/editor/index.tsx rename to tools/storybook/src/addons/editor/index.tsx diff --git a/tools/addon-storybook/src/addons/events/events.css b/tools/storybook/src/addons/events/events.css similarity index 100% rename from tools/addon-storybook/src/addons/events/events.css rename to tools/storybook/src/addons/events/events.css diff --git a/tools/addon-storybook/src/addons/events/index.tsx b/tools/storybook/src/addons/events/index.tsx similarity index 100% rename from tools/addon-storybook/src/addons/events/index.tsx rename to tools/storybook/src/addons/events/index.tsx diff --git a/tools/addon-storybook/src/addons/refresh/index.tsx b/tools/storybook/src/addons/refresh/index.tsx similarity index 100% rename from tools/addon-storybook/src/addons/refresh/index.tsx rename to tools/storybook/src/addons/refresh/index.tsx diff --git a/tools/addon-storybook/src/addons/useDarkMode.ts b/tools/storybook/src/addons/useDarkMode.ts similarity index 100% rename from tools/addon-storybook/src/addons/useDarkMode.ts rename to tools/storybook/src/addons/useDarkMode.ts diff --git a/tools/addon-storybook/src/decorator/index.tsx b/tools/storybook/src/decorator/index.tsx similarity index 100% rename from tools/addon-storybook/src/decorator/index.tsx rename to tools/storybook/src/decorator/index.tsx diff --git a/tools/addon-storybook/src/dsl/createDSLStory.tsx b/tools/storybook/src/dsl/createDSLStory.tsx similarity index 100% rename from tools/addon-storybook/src/dsl/createDSLStory.tsx rename to tools/storybook/src/dsl/createDSLStory.tsx diff --git a/tools/addon-storybook/src/dsl/index.ts b/tools/storybook/src/dsl/index.ts similarity index 100% rename from tools/addon-storybook/src/dsl/index.ts rename to tools/storybook/src/dsl/index.ts diff --git a/tools/addon-storybook/src/dsl/transpile.ts b/tools/storybook/src/dsl/transpile.ts similarity index 100% rename from tools/addon-storybook/src/dsl/transpile.ts rename to tools/storybook/src/dsl/transpile.ts diff --git a/tools/addon-storybook/src/index.ts b/tools/storybook/src/index.ts similarity index 100% rename from tools/addon-storybook/src/index.ts rename to tools/storybook/src/index.ts diff --git a/tools/addon-storybook/src/manager.tsx b/tools/storybook/src/manager.tsx similarity index 100% rename from tools/addon-storybook/src/manager.tsx rename to tools/storybook/src/manager.tsx diff --git a/tools/addon-storybook/src/player/Appetize.tsx b/tools/storybook/src/player/Appetize.tsx similarity index 100% rename from tools/addon-storybook/src/player/Appetize.tsx rename to tools/storybook/src/player/Appetize.tsx diff --git a/tools/addon-storybook/src/player/PlayerFlowSummary.tsx b/tools/storybook/src/player/PlayerFlowSummary.tsx similarity index 100% rename from tools/addon-storybook/src/player/PlayerFlowSummary.tsx rename to tools/storybook/src/player/PlayerFlowSummary.tsx diff --git a/tools/addon-storybook/src/player/PlayerStory.tsx b/tools/storybook/src/player/PlayerStory.tsx similarity index 100% rename from tools/addon-storybook/src/player/PlayerStory.tsx rename to tools/storybook/src/player/PlayerStory.tsx diff --git a/tools/addon-storybook/src/player/index.ts b/tools/storybook/src/player/index.ts similarity index 100% rename from tools/addon-storybook/src/player/index.ts rename to tools/storybook/src/player/index.ts diff --git a/tools/addon-storybook/src/player/storybookReactPlayerPlugin.ts b/tools/storybook/src/player/storybookReactPlayerPlugin.ts similarity index 100% rename from tools/addon-storybook/src/player/storybookReactPlayerPlugin.ts rename to tools/storybook/src/player/storybookReactPlayerPlugin.ts diff --git a/tools/addon-storybook/src/player/useFlowSet.tsx b/tools/storybook/src/player/useFlowSet.tsx similarity index 100% rename from tools/addon-storybook/src/player/useFlowSet.tsx rename to tools/storybook/src/player/useFlowSet.tsx diff --git a/tools/addon-storybook/src/preview.tsx b/tools/storybook/src/preview.tsx similarity index 100% rename from tools/addon-storybook/src/preview.tsx rename to tools/storybook/src/preview.tsx diff --git a/tools/addon-storybook/src/redux/index.tsx b/tools/storybook/src/redux/index.tsx similarity index 100% rename from tools/addon-storybook/src/redux/index.tsx rename to tools/storybook/src/redux/index.tsx diff --git a/tools/addon-storybook/src/state/events.ts b/tools/storybook/src/state/events.ts similarity index 100% rename from tools/addon-storybook/src/state/events.ts rename to tools/storybook/src/state/events.ts diff --git a/tools/addon-storybook/src/state/index.ts b/tools/storybook/src/state/index.ts similarity index 100% rename from tools/addon-storybook/src/state/index.ts rename to tools/storybook/src/state/index.ts diff --git a/tools/addon-storybook/src/types.ts b/tools/storybook/src/types.ts similarity index 100% rename from tools/addon-storybook/src/types.ts rename to tools/storybook/src/types.ts diff --git a/tools/addon-storybook/tsconfig.json b/tools/storybook/tsconfig.json similarity index 100% rename from tools/addon-storybook/tsconfig.json rename to tools/storybook/tsconfig.json diff --git a/tools/addon-storybook/tsup.config.ts b/tools/storybook/tsup.config.ts similarity index 100% rename from tools/addon-storybook/tsup.config.ts rename to tools/storybook/tsup.config.ts