Update storybook for bazel migration

.bazelignore

@@ -62,4 +62,8 @@ plugins/reference-assets/core/node_modules
 plugins/reference-assets/react/node_modules
 plugins/shared-constants/core/node_modules
 plugins/stage-revert-data/core/node_modules
-tools/asset-testing-library/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/components/node_modules

BUILD.bazel

@@ -77,7 +77,10 @@ js_library(
 
 js_library(
     name = "typings",
-    srcs = ["tsconfig.build.json"] + glob(["typings/*"]),
+    srcs = [
+        "tsconfig.build.json",
+        "tsconfig.json",
+    ] + glob(["typings/*"]),
     visibility = ["//visibility:public"],
 )
 # PlayerUI(deps = [])

MODULE.bazel

@@ -4,13 +4,14 @@ bazel_dep(name = "rules_player")
 
 git_override(
     remote = "https://github.com/player-ui/rules_player.git",
-    commit = "a1626024afabb38b9aca9981cc0e76b704d4fd77",
+    # bazel-6 branch
+    commit = "e71339c96deeec1f4976fbc04815143ee23d8541",
     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.0")
+bazel_dep(name = "aspect_rules_js", version = "1.34.1")
 bazel_dep(name = "bazel_skylib", version = "1.4.1")
 bazel_dep(name = "rules_pkg", version = "0.9.1")
 bazel_dep(name = "aspect_rules_ts", version = "2.1.0")
@@ -21,7 +22,6 @@ node = use_extension("@rules_nodejs//nodejs:extensions.bzl", "node")
 node.toolchain(node_version = "18.18.0")
 #################################
 
-
 # iOS
 
 bazel_dep(name = "rules_swift", version = "1.13.0", repo_name = "build_bazel_rules_swift")
@@ -45,7 +45,7 @@ use_repo(
     swift_deps,
     "swiftpkg_swift_hooks",
     "swiftpkg_viewinspector",
-    "swiftpkg_eyes_xcui_swift_package"
+    "swiftpkg_eyes_xcui_swift_package",
 )
 
 # end iOS

core/player/package.json

@@ -6,8 +6,5 @@
     "@player-ui/partial-match-registry": "workspace:*",
     "@player-ui/make-flow": "workspace:*",
     "@player-ui/types": "workspace:*"
-  },
-  "devDependencies": {
-    "@player-ui/common-types-plugin": "workspace:*"
   }
 }

core/player/src/binding-grammar/custom/index.ts

@@ -65,7 +65,6 @@ export const parse: Parser = (path) => {
 
     ch = path.charAt(index);
     index += 1;
-    // console.log(`Index: ${index} Char: ${ch}`);
     return ch;
   };
 

core/player/src/binding-grammar/ebnf/index.ts

@@ -172,7 +172,6 @@ export const parse: Parser = (path) => {
   }
 
   if (ast.errors.length > 0) {
-    // console.log(ast.errors);
     return {
       status: false,
       error: ast.errors[0].message,

docs/site/components/Navigation.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import {
   Flex,
   Image,
@@ -22,17 +22,17 @@ import {
   AlertTitle,
   AlertDescription,
   Select,
-} from '@chakra-ui/react';
-import { FaReact, FaApple, FaAndroid, FaPuzzlePiece } from 'react-icons/fa';
-import { HamburgerIcon } from '@chakra-ui/icons';
-import type { Route } from '../config/navigation';
-import NAV, { PATH_TO_NAV, Platform } from '../config/navigation';
-import { ColorSchemeSwitch } from './ColorSchemeSwitch';
-import { DOCS_BASE_URL, GITHUB_URL } from '../config/constants';
-import { withBasePrefix } from './Image';
-import { SearchInput } from './Search';
-import { GithubIcon } from './gh-icon';
-import { WarningBanner } from './SiteBanner';
+} from "@chakra-ui/react";
+import { FaReact, FaApple, FaAndroid, FaPuzzlePiece } from "react-icons/fa";
+import { HamburgerIcon } from "@chakra-ui/icons";
+import type { Route } from "../config/navigation";
+import NAV, { PATH_TO_NAV, Platform } from "../config/navigation";
+import { ColorSchemeSwitch } from "./ColorSchemeSwitch";
+import { DOCS_BASE_URL, GITHUB_URL } from "../config/constants";
+import { withBasePrefix } from "./Image";
+import { SearchInput } from "./Search";
+import { GithubIcon } from "./gh-icon";
+import { WarningBanner } from "./SiteBanner";
 
 const getPathFromRoute = (route: Route): string => {
   if (route.path) {
@@ -48,7 +48,7 @@ const getPathFromRoute = (route: Route): string => {
     }
   }
 
-  return '';
+  return "";
 };
 
 const PlatformIcon = (props: any) => {
@@ -72,7 +72,7 @@ const NavTitleOrLink = (props: { route: Route }) => {
   const { pathname } = useRouter();
   const router = useRouter();
   const langpref = router.query.lang;
-  const selectedButtonColor = useColorModeValue('blue.800', 'blue.600');
+  const selectedButtonColor = useColorModeValue("blue.800", "blue.600");
 
   if (route.path) {
     return (
@@ -89,7 +89,7 @@ const NavTitleOrLink = (props: { route: Route }) => {
             size="sm"
             variant="ghost"
             mx="3"
-            colorScheme={pathname === route.path ? 'blue' : 'gray'}
+            colorScheme={pathname === route.path ? "blue" : "gray"}
             color={pathname === route.path ? selectedButtonColor : undefined}
           >
             <HStack spacing="2">
@@ -181,12 +181,12 @@ const useGetReleasedVersions = () => {
   React.useEffect(() => {
     const send = async () => {
       const response = await fetch(
-        'https://api.github.com/repos/player-ui/player-ui.github.io/contents/'
+        "https://api.github.com/repos/player-ui/player-ui.github.io/contents/",
       );
 
       const data = await response.json();
       const versions = data
-        .filter((d) => d.type === 'dir' && d.name.match(/^v\d/))
+        .filter((d) => d.type === "dir" && d.name.match(/^v\d/))
         .map((d) => ({
           label: d.name,
           path: d.name,
@@ -210,11 +210,11 @@ export const VersionSelector = () => {
       aria-label="Select the version of the Player docs you with to see"
       variant="unstyled"
       rootProps={{
-        width: 'auto',
-        display: 'flex',
-        flexShrink: '0',
+        width: "auto",
+        display: "flex",
+        flexShrink: "0",
       }}
-      value={router.basePath || 'latest'}
+      value={router.basePath || "latest"}
       onChange={(e) => {
         router.push(`${DOCS_BASE_URL}/${e.target.value}`);
       }}
@@ -236,21 +236,21 @@ export const TopNavigation = () => {
   const mobileNavDisclosure = useDisclosure();
 
   const currentTopLevelRoute = NAV.routes.find(
-    (r) => r.title === subRoutes?.[0]
+    (r) => r.title === subRoutes?.[0],
   );
 
   const logoSrc = useBreakpointValue({
     base: useColorModeValue(
-      withBasePrefix('/logo/logo-light-small.png'),
-      withBasePrefix('/logo/logo-dark-small.png')
+      withBasePrefix("/logo/logo-light-small.png"),
+      withBasePrefix("/logo/logo-dark-small.png"),
     ),
     lg: useColorModeValue(
-      withBasePrefix('/logo/logo-light-large.png'),
-      withBasePrefix('/logo/logo-dark-large.png')
+      withBasePrefix("/logo/logo-light-large.png"),
+      withBasePrefix("/logo/logo-dark-large.png"),
     ),
   });
 
-  const selectedButtonColor = useColorModeValue('blue.800', 'blue.600');
+  const selectedButtonColor = useColorModeValue("blue.800", "blue.600");
 
   return (
     <Flex w="100%" h="100%" direction="column" align="center">
@@ -259,15 +259,15 @@ export const TopNavigation = () => {
           <IconButton
             variant="ghost"
             icon={<HamburgerIcon />}
-            display={{ base: 'flex', md: 'none' }}
+            display={{ base: "flex", md: "none" }}
             aria-label="Open Side Navigation Menu"
             onClick={mobileNavDisclosure.onOpen}
           />
           <Link passHref href="/">
             <CLink
               display={{
-                base: 'none',
-                md: 'block',
+                base: "none",
+                md: "block",
               }}
               py="2"
             >
@@ -278,7 +278,7 @@ export const TopNavigation = () => {
 
         <Box>
           <HStack spacing="4">
-            <Box display={{ base: 'none', lg: 'block' }}>
+            <Box display={{ base: "none", lg: "block" }}>
               <SearchInput />
             </Box>
             {NAV.routes.map((topRoute) => {
@@ -290,7 +290,7 @@ export const TopNavigation = () => {
                   <Button
                     as="a"
                     variant="ghost"
-                    colorScheme={isSelected ? 'blue' : 'gray'}
+                    colorScheme={isSelected ? "blue" : "gray"}
                     color={isSelected ? selectedButtonColor : undefined}
                     size="md"
                     ml="0"
@@ -323,9 +323,9 @@ export const TopNavigation = () => {
           Player and its documentation are still in early development.
         </AlertTitle>
         <AlertDescription>
-          If you find any issues, please report them to us on{' '}
+          If you find any issues, please report them to us on{" "}
           <CLink
-            color={useColorModeValue('blue.800', 'blue.600')}
+            color={useColorModeValue("blue.800", "blue.600")}
             href="https://github.com/player-ui/player/issues"
           >
             GitHub

docs/storybook/.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.@(stories.@(js|tsx|ts))", "../src/**/*.mdx"],
+  addons: ["@storybook/addon-docs", "@player-ui/storybook-addon-player"],
+  typescript: {
+    reactDocgen: false,
+  },
+  framework: {
+    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,
+    },
+  },
+};
+
+module.exports = config;

docs/storybook/.storybook/preview.js

@@ -1,34 +1,34 @@
-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-addon-player";
+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-plugin-components";
+
+import "@player-ui/reference-assets-plugin-react/dist/index.css";
 
 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-plugin-components": dslRefComponents,
     },
   },
   options: {
     storySort: {
       order: [
-        'Welcome',
-        'Player',
-        'Reference Assets',
-        ['Overview', 'Intro'],
-      ]
-    }
-  }
-}
-
-export const decorators = [PlayerDecorator];
+        "Welcome",
+        "React Player",
+        "Reference Assets",
+        ["Docs", "Overview", "Intro"],
+      ],
+    },
+  },
+};