diff --git a/.bazelignore b/.bazelignore
index 26a3f5553..ab5e6e602 100644
--- a/.bazelignore
+++ b/.bazelignore
@@ -62,4 +62,5 @@ 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
\ No newline at end of file
+tools/components/node_modules
+docs/site/node_modules
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
index 19dd2939c..7c9cbfd36 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
+hoist=false
registry=https://registry.npmjs.com
diff --git a/BUILD.bazel b/BUILD.bazel
index 964305bc0..0b5be3541 100644
--- a/BUILD.bazel
+++ b/BUILD.bazel
@@ -1,9 +1,10 @@
# load("@rules_player//cocoapods:cocoapod.bzl", "pod_push")
# load("@rules_player//internal:stamp.bzl", "stamp")
load("//tools/ios:util.bzl", "assemble_pod")
-
load("@npm//:defs.bzl", "npm_link_all_packages")
load("@aspect_rules_js//js:defs.bzl", "js_library")
+load("@bazel_gazelle//:def.bzl", "gazelle", "gazelle_binary")
+load("@rules_swift_package_manager//swiftpkg:defs.bzl", "swift_update_packages")
package(default_visibility = ["//visibility:public"])
@@ -21,6 +22,7 @@ exports_files([
".editorconfig",
".all-contributorsrc",
"README.md",
+ # "patches/@chakra-ui__system@2.6.2.patch",
])
js_library(
@@ -94,7 +96,7 @@ js_library(
# )
exports_files([
- "PlayerUI.podspec"
+ "PlayerUI.podspec",
])
assemble_pod(
@@ -201,9 +203,6 @@ assemble_pod(
# ],
# )
-load("@bazel_gazelle//:def.bzl", "gazelle", "gazelle_binary")
-load("@rules_swift_package_manager//swiftpkg:defs.bzl", "swift_update_packages")
-
# Ignore the `.build` folder that is created by running Swift package manager
# commands. The Swift Gazelle plugin executes some Swift package manager
# commands to resolve external dependencies. This results in a `.build` file
@@ -236,11 +235,11 @@ gazelle_binary(
swift_update_packages(
name = "swift_update_pkgs",
gazelle = ":gazelle_bin",
+ generate_swift_deps_for_workspace = True,
+ package_manifest = "./xcode/Package.swift",
swift_deps = "swift_deps.bzl",
swift_deps_index = "swift_deps_index.json",
- generate_swift_deps_for_workspace = True,
update_bzlmod_stanzas = False,
- package_manifest = "./xcode/Package.swift"
)
# This target updates the Bazel build files for your project. Run this target
diff --git a/MODULE.bazel b/MODULE.bazel
index e80e24001..be58751d4 100644
--- a/MODULE.bazel
+++ b/MODULE.bazel
@@ -58,6 +58,7 @@ npm.npm_translate_lock(
pnpm_lock = "//:pnpm-lock.yaml",
data = [
"//:package.json",
+ "//:patches/@chakra-ui__system@2.6.2.patch",
],
npmrc = "//:.npmrc",
verify_node_modules_ignored = "//:.bazelignore",
diff --git a/docs/site/BUILD b/docs/site/BUILD
index 9652865d0..634fb642d 100644
--- a/docs/site/BUILD
+++ b/docs/site/BUILD
@@ -1,66 +1,121 @@
-load("@npm//next:index.bzl", "next")
-load("@rules_player//javascript/next:next_build.bzl", "next_export")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//:webpack-cli/package_json.bzl", webpack_bin = "bin")
+load("@npm//:webpack-dev-server/package_json.bzl", webpack_dev_server_bin = "bin")
-package(default_visibility = ["//visibility:public"])
+npm_link_all_packages(
+ name = "node_modules",
+)
srcs = glob([
- "public/**/*",
- "pages/**/*",
- "styles/*",
- "components/**/*",
- "plugins/*",
- "utils/*",
- "config/*",
+ "public/**/*",
+ "pages/**/*",
+ "styles/*",
+ "app/**/*",
+ "components/**/*",
+ "plugins/*",
+ "utils/*",
+ "config/*",
]) + [
- "next.config.mjs",
- "next-env.d.ts",
- "tsconfig.json"
+ "package.json",
+ "tsconfig.json",
+ "webpack.config.ts",
+]
+
+build_deps = [
+ "//:typings",
+ "//:node_modules/webpack",
+ "//:node_modules/ts-loader",
+ "//:node_modules/ts-node",
+ "//:node_modules/html-webpack-plugin",
+ "//:node_modules/css-loader",
+ "//:node_modules/style-loader",
+ "//:node_modules/postcss-loader",
+ "//:node_modules/babel-loader",
+ "//:node_modules/@babel/preset-env",
+ "//:node_modules/@babel/preset-react",
+ "//:node_modules/copy-webpack-plugin",
+ "//:node_modules/terser-webpack-plugin",
]
-data = [
- "//react/player:@player-ui/react",
- "//plugins/reference-assets/react:@player-ui/reference-assets-plugin-react",
- "@npm//typescript",
- "@npm//@types/react",
- "@npm//@types/node",
- "@npm//@chakra-ui/react",
- "@npm//@chakra-ui/skip-nav",
- "@npm//@chakra-ui/icons",
- "@npm//@docsearch/react",
- "@npm//lunr",
- "@npm//globby",
- "@npm//react-icons",
- "@npm//fs-extra",
- "@npm//@mdx-js/loader",
- "@npm//@mdx-js/react",
- "@npm//react-syntax-highlighter",
- "@npm//remark",
- "@npm//remark-html",
- "@npm//remark-smartypants",
- "@npm//rehype-slug",
- "@npm//rehype-autolink-headings",
- "@npm//remove-markdown",
- "@npm//github-slugger",
- "@npm//gray-matter",
- "@npm//nextjs-google-analytics"
+deps = [
+ ":node_modules/@player-ui/react",
+ ":node_modules/@player-ui/reference-assets-plugin-react",
+ ":node_modules/@player-ui/asset-provider-plugin-react",
+ "//:node_modules/typescript",
+ "//:node_modules/tslib",
+ "//:node_modules/@types/react",
+ "//:node_modules/@types/node",
+ # "//:node_modules/next",
+ "//:node_modules/tailwindcss",
+ "//:node_modules/tailwindcss-animate",
+ "//:node_modules/postcss",
+ "//:node_modules/autoprefixer",
+ "//:node_modules/@docsearch/react",
+ "//:node_modules/@docsearch/css",
+ "//:node_modules/@radix-ui/react-label",
+ "//:node_modules/@radix-ui/react-separator",
+ "//:node_modules/@radix-ui/react-slot",
+ "//:node_modules/class-variance-authority",
+ "//:node_modules/clsx",
+ "//:node_modules/@types/react-dom",
+ "//:node_modules/react-router",
+ "//:node_modules/react-router-dom",
+ "//:node_modules/path-browserify",
+ "//:node_modules/@types/path-browserify",
+ "//:node_modules/lucide-react",
+ "//:node_modules/tailwind-merge",
+ "//:node_modules/lunr",
+ "//:node_modules/@types/lunr",
+ "//:node_modules/globby",
+ "//:node_modules/react",
+ "//:node_modules/react-dom",
+ "//:node_modules/null-loader",
+ "//:node_modules/@chakra-ui/react",
+ "//:node_modules/@chakra-ui/skip-nav",
+ "//:node_modules/@chakra-ui/icons",
+ "//:node_modules/react-icons",
+ "//:node_modules/@mdx-js/loader",
+ "//:node_modules/@mdx-js/react",
+ "//:node_modules/@types/mdx-js__react",
+ "//:node_modules/react-syntax-highlighter",
+ "//:node_modules/@types/react-syntax-highlighter",
+ "//:node_modules/remark",
+ "//:node_modules/remark-html",
+ "//:node_modules/remark-smartypants",
+ "//:node_modules/rehype-slug",
+ "//:node_modules/rehype-autolink-headings",
+ "//:node_modules/remove-markdown",
+ "//:node_modules/github-slugger",
+ "//:node_modules/gray-matter",
+ # "//:node_modules/nextjs-google-analytics",
]
-next_export(
- name = "site",
- data = data,
- srcs = srcs,
- env = {
- "NODE_ENV": "production",
- # Need this b/c next will pull from env directly
- # This just maps to a value we can stamp w/ later on
- "NEXT_PUBLIC_GA_MEASUREMENT_ID": "NEXT_PUBLIC_GA_MEASUREMENT_ID",
- },
+webpack_bin.webpack_cli(
+ name = "site",
+ srcs = srcs + deps + build_deps,
+ args = [
+ "build",
+ ],
+ chdir = "docs/site",
+ env = {
+ "NODE_OPTIONS": "--loader ts-node/esm",
+ "NODE_ENV": "production",
+ },
+ out_dirs = ["dist"],
+ visibility = ["//visibility:public"],
)
-next(
- name = "start",
- args = [
- "dev", './docs/site'
- ],
- data = data + srcs,
-)
\ No newline at end of file
+webpack_dev_server_bin.webpack_dev_server_binary(
+ name = "start",
+ args = [],
+ chdir = package_name(),
+ data = srcs + deps + build_deps,
+ env = {
+ "NODE_OPTIONS": "--loader ts-node/esm",
+ "NODE_ENV": "development",
+ },
+ tags = [
+ "ibazel_notify_changes",
+ ],
+ visibility = ["//visibility:public"],
+)
diff --git a/docs/site/components/App.tsx b/docs/site/components/App.tsx
new file mode 100644
index 000000000..6e1a1e18b
--- /dev/null
+++ b/docs/site/components/App.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { ChakraProvider } from "@chakra-ui/react";
+
+import { PATH_TO_NAV } from "../config/navigation";
+import { Context } from "./Context";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ Component: React.lazy(() => import("../pages")),
+ },
+ ...Array.from(PATH_TO_NAV.entries()).map(([path, nav]) => {
+ return {
+ path,
+ Component: React.lazy(() => import(`../pages${path}`)),
+ };
+ }),
+]);
+
+const node = document.getElementById("root") ?? document.createElement("div");
+
+if (!document.body.contains(node)) {
+ document.body.appendChild(node);
+}
+
+const root = createRoot(node);
+root.render(
+
+
+
+
+
+
+
+
+ ,
+);
diff --git a/docs/site/components/Image.tsx b/docs/site/components/Image.tsx
index 644cb2b8b..f6dcb64e1 100644
--- a/docs/site/components/Image.tsx
+++ b/docs/site/components/Image.tsx
@@ -1,13 +1,13 @@
-import path from 'path';
+// import path from "path-browserify";
export function withBasePrefix(location?: string): string | undefined {
if (!location) {
return location;
}
- if (process.env.NEXT_PUBLIC_BASE_PATH) {
- return path.join(process.env.NEXT_PUBLIC_BASE_PATH, location);
- }
+ // if (process.env.NEXT_PUBLIC_BASE_PATH) {
+ // return path.join(process.env.NEXT_PUBLIC_BASE_PATH, location);
+ // }
return location;
}
diff --git a/docs/site/components/Layout/MDXPageLayout.tsx b/docs/site/components/Layout/MDXPageLayout.tsx
index a16d2df55..2579d56b5 100644
--- a/docs/site/components/Layout/MDXPageLayout.tsx
+++ b/docs/site/components/Layout/MDXPageLayout.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Container, Flex } from '@chakra-ui/react';
-import { MDXProvider } from '@mdx-js/react';
-import { MDXComponents } from '../mdx-components';
-import { Page } from '../Page';
+import * as React from "react";
+// import Head from 'next/head';
+import { Container, Flex } from "@chakra-ui/react";
+import { MDXProvider } from "@mdx-js/react";
+import { MDXComponents } from "../mdx-components";
+import { Page } from "../Page";
interface PageFrontmatter {
title: string;
@@ -15,9 +15,9 @@ export default function withDocs(p: PageFrontmatter) {
const LayoutHome = (props: React.PropsWithChildren) => {
return (
-
+ {/*
Player - {p.title}
-
+ */}
diff --git a/docs/site/components/Navigation.tsx b/docs/site/components/Navigation.tsx
index 672cfe49d..141331aae 100644
--- a/docs/site/components/Navigation.tsx
+++ b/docs/site/components/Navigation.tsx
@@ -1,6 +1,5 @@
import React from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import { Link, useLocation, useNavigate } from "react-router-dom";
import {
Flex,
Image,
@@ -69,38 +68,30 @@ const PlatformIcon = (props: any) => {
const NavTitleOrLink = (props: { route: Route }) => {
const { route } = props;
- const { pathname } = useRouter();
- const router = useRouter();
- const langpref = router.query.lang;
+ const { pathname, search } = useLocation();
const selectedButtonColor = useColorModeValue("blue.800", "blue.600");
if (route.path) {
return (
-
-
-
-
-
+
);
}
@@ -130,7 +121,7 @@ const SideNavigationList = (props: { route: Route }) => {
};
export const SideNavigation = () => {
- const { pathname } = useRouter();
+ const { pathname } = useLocation();
const subRoutes = PATH_TO_NAV.get(pathname);
const route = NAV.routes.find((r) => r.title === subRoutes?.[0]);
@@ -152,7 +143,7 @@ export const Footer = () => {
export const GitHubButton = () => {
return (
-
+
{
const data = await response.json();
const versions = data
- .filter((d) => d.type === "dir" && d.name.match(/^v\d/))
- .map((d) => ({
+ .filter((d: any) => d.type === "dir" && d.name.match(/^v\d/))
+ .map((d: any) => ({
label: d.name,
path: d.name,
}));
@@ -202,7 +193,8 @@ const useGetReleasedVersions = () => {
};
export const VersionSelector = () => {
- const router = useRouter();
+ const location = useLocation();
+ const navigate = useNavigate();
const released = useGetReleasedVersions();
return (
@@ -214,23 +206,9 @@ export const VersionSelector = () => {
display: "flex",
flexShrink: "0",
}}
- value={router.basePath || "latest"}
+ value={location.pathname || "/latest"}
onChange={(e) => {
- const currentRoute = router.pathname
- .split('/')
- .filter((s) => {
- // filter out empty string and url elements that include the version
- if (
- s &&
- !['latest', 'next', ...released.map((r) => r.path)].includes(s)
- ) {
- return true;
- }
-
- return false;
- })
- .join('/');
- router.push(`${DOCS_BASE_URL}${e.target.value}/${currentRoute}`);
+ navigate(`${DOCS_BASE_URL}/${e.target.value}`);
}}
>
@@ -245,7 +223,7 @@ export const VersionSelector = () => {
};
export const TopNavigation = () => {
- const { pathname } = useRouter();
+ const { pathname, search } = useLocation();
const subRoutes = PATH_TO_NAV.get(pathname);
const mobileNavDisclosure = useDisclosure();
@@ -277,17 +255,17 @@ export const TopNavigation = () => {
aria-label="Open Side Navigation Menu"
onClick={mobileNavDisclosure.onOpen}
/>
-
-
-
-
-
+
+
+
@@ -300,18 +278,21 @@ export const TopNavigation = () => {
const isSelected = currentTopLevelRoute?.title === topRoute.title;
return (
-
-
-
+
);
})}
diff --git a/docs/site/components/Search.tsx b/docs/site/components/Search.tsx
index 23e869872..caeca7157 100644
--- a/docs/site/components/Search.tsx
+++ b/docs/site/components/Search.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
import {
Input,
Box,
@@ -14,11 +14,11 @@ import {
UnorderedList,
InputLeftElement,
HStack,
-} from '@chakra-ui/react';
-import { SearchIcon, ChevronRightIcon } from '@chakra-ui/icons';
-import Link from 'next/link';
-import lunr from 'lunr';
-import { AlgoliaSearch } from './AlgoliaSearch';
+} from "@chakra-ui/react";
+import { SearchIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { Link } from "react-router-dom";
+import lunr from "lunr";
+import { AlgoliaSearch } from "./AlgoliaSearch";
interface SearchIndex {
/** The title of the page */
@@ -37,16 +37,16 @@ interface SearchIndex {
const createSearchIndex = async () => {
const searchIndex = (await import(
- '../config/search-index.json'
+ "../config/search-index.json"
)) as unknown as {
default: Record;
};
const idx = lunr((builder) => {
- builder.ref('path');
- builder.field('title');
- builder.field('header');
- builder.field('content');
+ builder.ref("path");
+ builder.field("title");
+ builder.field("header");
+ builder.field("content");
Object.values(searchIndex.default).forEach((page) => {
builder.add(page);
@@ -65,7 +65,7 @@ const useSearch = () => {
return {
search: async (query: string) => {
- if (query === '') {
+ if (query === "") {
setResults([]);
} else {
const searchIndex = await index;
@@ -89,7 +89,7 @@ const useSearch = () => {
const SearchResult = (props: SearchIndex) => {
return (
-
+