Skip to content

Commit

Permalink
Update storybook for bazel migration (#265)
Browse files Browse the repository at this point in the history
* Storybook 7 + Bazel 6

* Fix react references with storybook & pnpm

* Update storybook to bazel 6 and storybook 7

* Convert rest of mocks to use tsx. Update all stories

* Use rules_bazel commit sha

* Fix some styling

* Remove chakra from reference assets

* Update rules
  • Loading branch information
adierkens authored Mar 6, 2024
1 parent 32f20d6 commit f2f3c53
Show file tree
Hide file tree
Showing 144 changed files with 7,826 additions and 9,220 deletions.
6 changes: 5 additions & 1 deletion .bazelignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 4 additions & 1 deletion BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [])
Expand Down
8 changes: 4 additions & 4 deletions MODULE.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand All @@ -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")
Expand All @@ -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
Expand Down
17 changes: 0 additions & 17 deletions babel.config.js

This file was deleted.

3 changes: 0 additions & 3 deletions core/player/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:*"
}
}
1 change: 0 additions & 1 deletion core/player/src/binding-grammar/custom/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const parse: Parser = (path) => {

ch = path.charAt(index);
index += 1;
// console.log(`Index: ${index} Char: ${ch}`);
return ch;
};

Expand Down
1 change: 0 additions & 1 deletion core/player/src/binding-grammar/ebnf/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
72 changes: 36 additions & 36 deletions docs/site/components/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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) {
Expand All @@ -48,7 +48,7 @@ const getPathFromRoute = (route: Route): string => {
}
}

return '';
return "";
};

const PlatformIcon = (props: any) => {
Expand All @@ -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 (
Expand All @@ -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">
Expand Down Expand Up @@ -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,
Expand All @@ -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}`);
}}
Expand All @@ -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">
Expand All @@ -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"
>
Expand All @@ -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) => {
Expand All @@ -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"
Expand Down Expand Up @@ -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
Expand Down
26 changes: 0 additions & 26 deletions docs/storybook/.storybook/main.js

This file was deleted.

34 changes: 34 additions & 0 deletions docs/storybook/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -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;
36 changes: 18 additions & 18 deletions docs/storybook/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -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"],
],
},
},
};
Loading

0 comments on commit f2f3c53

Please sign in to comment.