chore: port design system to inline tailwind

.vscode/settings.json

@@ -0,0 +1,35 @@
+{
+	"eslint.codeActionsOnSave.mode": "problems",
+	"eslint.workingDirectories": [
+		{ "pattern": "./packages/*/" },
+		{ "pattern": "./apps/*/" }
+	],
+	"[graphql]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		},
+	},
+	"[typescript]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		},
+	},
+	"[typescriptreact]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		},
+	},
+	"eslint.validate": [
+		"graphql",
+		"javascript",
+		"javascriptreact",
+		"typescript",
+		"typescriptreact"
+	],
+	"[graphql][typescript][typescriptreact]": {
+		"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": "explicit"
+		}
+	},
+	"typescript.tsdk": "node_modules/typescript/lib"
+}

apps/storybook/next.config.mjs

@@ -5,16 +5,16 @@ import withPlugins from "next-compose-plugins";
 import remarkGfm from "remark-gfm";
 
 const withBundleAnalyzer = bundleAnalyzerPlugin({
-	enabled: process.env.BUNDLE_ANALYZE === "true",
+    enabled: process.env.BUNDLE_ANALYZE === "true",
 });
 
 const withMdx = mdxPlugin({
-	extension: /\.mdx?$/,
-	options: {
-		providerImportSource: "@mdx-js/react",
-		remarkPlugins:  [frontmatter, remarkGfm],
-		rehypePlugins: [],
-	},
+    extension: /\.mdx?$/,
+    options: {
+        providerImportSource: "@mdx-js/react",
+        remarkPlugins: [frontmatter, remarkGfm],
+        rehypePlugins: [],
+    },
 });
 
 /** @type {import("next").NextConfig} */
@@ -23,22 +23,19 @@ const config = {
         externalDir: true,
     },
     i18n: {
-		locales: ["en-US"],
-		defaultLocale: "en-US",
-	},
+        locales: ["en-US"],
+        defaultLocale: "en-US",
+    },
     images: {
-		deviceSizes: [320, 420, 768, 1024, 1200],
-		domains: [],
-		loader: "default",
-	},
-	pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+        deviceSizes: [320, 420, 768, 1024, 1200],
+        domains: [],
+        loader: "default",
+    },
+    pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
     reactStrictMode: true,
-	env: {
-		WS_ENDPOINT: process.env.WS_ENDPOINT,
-	},
+    env: {
+        WS_ENDPOINT: process.env.WS_ENDPOINT,
+    },
 };
 
-export default withPlugins([
-	withBundleAnalyzer,
-	withMdx,
-], config);
+export default withPlugins([withBundleAnalyzer, withMdx], config);

apps/web/src/components/DocsBreadcrumbs/DocsBreadcrumbs.tsx

@@ -27,9 +27,7 @@ export const DocsBreadcrumbs = memo<DocsBreadcrumbsProps>((props) => {
     const getName = useCallback((slugs: string[]): string | null => {
         const [head, ...tail] = slugs;
 
-        const path = [head, ...tail.map((part) => `[${part}]`)].join(
-            "[children]",
-        );
+        const path = [head, ...tail.map((part) => `[${part}]`)].join("[children]");
 
         return get(routes, `${path}[name]`) ?? null;
     }, []);
@@ -43,11 +41,7 @@ export const DocsBreadcrumbs = memo<DocsBreadcrumbsProps>((props) => {
                 const parts = slugs.slice(0, i + 1);
 
                 return (
-                    <Breadcrumbs.Item
-                        key={slug}
-                        href={`/docs/${parts.join("/")}`}
-                        selected={i === slugs.length - 1}
-                    >
+                    <Breadcrumbs.Item key={slug} href={`/docs/${parts.join("/")}`} selected={i === slugs.length - 1}>
                         {getName(parts)}
                     </Breadcrumbs.Item>
                 );

apps/web/src/components/DocsCard/DocsCard.tsx

@@ -8,7 +8,7 @@ const Root = tw(Paper)`
     items-stretch
     gap-3
     p-4
-    rounded-xl
+    rounded-lg
 `;
 
 const Title = tw.h2`
@@ -29,17 +29,13 @@ export interface DocsCardProps {
     title: string;
 }
 
-export const DocsCard: FC<DocsCardProps> = ({
-    className,
-    description,
-    href,
-    style,
-    title,
-}) => {
+export const DocsCard: FC<DocsCardProps> = ({ className, description, href, style, title }) => {
     return (
-        <Root as={NextLink} className={className} href={href} style={style}>
-            <Title>📄️ {title}</Title>
-            {!!description && <Description>{description}</Description>}
-        </Root>
+        <NextLink className={className} href={href} style={style}>
+            <Root>
+                <Title>📄️ {title}</Title>
+                {!!description && <Description>{description}</Description>}
+            </Root>
+        </NextLink>
     );
 };

apps/web/src/components/DocsSeo/DocsSeo.tsx

@@ -7,11 +7,5 @@ export interface DocsSeoProps {
 }
 
 export const DocsSeo: FC<DocsSeoProps> = ({ description, title }) => {
-    return (
-        <Seo
-            description={description}
-            postfix={!!title}
-            title={title ?? "pluv.io"}
-        />
-    );
+    return <Seo description={description} postfix={!!title} title={title ?? "pluv.io"} />;
 };

apps/web/src/components/DocsTreeViewNavigation/DocsTreeViewNavigation.tsx

@@ -12,22 +12,20 @@ export interface DocsTreeViewNavigationProps {
     style?: CSSProperties;
 }
 
-export const DocsTreeViewNavigation = memo<DocsTreeViewNavigationProps>(
-    (props) => {
-        const { className, onClickLink, style } = props;
+export const DocsTreeViewNavigation = memo<DocsTreeViewNavigationProps>((props) => {
+    const { className, onClickLink, style } = props;
 
-        return (
-            <TreeView className={className} style={style}>
-                <DocsTreeViewNavigationRoutes
-                    baseRoute="/docs"
-                    level={1}
-                    onClickLink={onClickLink}
-                    routes={routes}
-                    selected={true}
-                />
-            </TreeView>
-        );
-    },
-);
+    return (
+        <TreeView className={className} style={style}>
+            <DocsTreeViewNavigationRoutes
+                baseRoute="/docs"
+                level={1}
+                onClickLink={onClickLink}
+                routes={routes}
+                selected={true}
+            />
+        </TreeView>
+    );
+});
 
 DocsTreeViewNavigation.displayName = "DocsTreeViewNavigation";

apps/web/src/components/DocsTreeViewNavigation/DocsTreeViewNavigationRoutes.tsx

@@ -11,9 +11,13 @@ export interface DocsTreeViewNavigationRoutesProps {
     selected?: boolean;
 }
 
-export const DocsTreeViewNavigationRoutes: FC<
-    DocsTreeViewNavigationRoutesProps
-> = ({ baseRoute = "", level, onClickLink, routes, selected }) => {
+export const DocsTreeViewNavigationRoutes: FC<DocsTreeViewNavigationRoutesProps> = ({
+    baseRoute = "",
+    level,
+    onClickLink,
+    routes,
+    selected,
+}) => {
     const router = useRouter();
 
     const sorted = useMemo(() => {
@@ -37,10 +41,7 @@ export const DocsTreeViewNavigationRoutes: FC<
             .split("/");
     }, [baseRoute, router.asPath]);
 
-    const routeSlug = useMemo(
-        () => router.asPath.split("/")[level + 1],
-        [level, router.asPath],
-    );
+    const routeSlug = useMemo(() => router.asPath.split("/")[level + 1], [level, router.asPath]);
 
     const finalSlug = slugs.at(-1);
 

apps/web/src/components/HomeBoxesDemoSection/HomeBoxesDemoSection.tsx

@@ -48,16 +48,13 @@ export interface HomeBoxesDemoSectionProps {
     style?: CSSProperties;
 }
 
-export const HomeBoxesDemoSection: FC<HomeBoxesDemoSectionProps> = ({
-    className,
-    style,
-}) => {
+export const HomeBoxesDemoSection: FC<HomeBoxesDemoSectionProps> = ({ className, style }) => {
     return (
         <Root className={className} style={style}>
             <Title as="h2">Simple-to-use APIs</Title>
             <Info as="h3">
-                Configure your server and client to unlock intuitive APIs that
-                allow you to focus on your end-user experience.
+                Configure your server and client to unlock intuitive APIs that allow you to focus on your end-user
+                experience.
             </Info>
             <CodeDemoContainer>
                 <StyledCodeDemo />

apps/web/src/components/HomeChessDemo/HomeChessDemo.tsx

@@ -1,20 +1,7 @@
-import {
-    ChessBoard,
-    ChessBoardRef,
-    ChessMoveHistory,
-    LoadingChessBoard,
-} from "@pluv-internal/react-chess";
+import { ChessBoard, ChessBoardRef, ChessMoveHistory, LoadingChessBoard } from "@pluv-internal/react-chess";
 import { yjs } from "@pluv/crdt-yjs";
 import ms from "ms";
-import {
-    CSSProperties,
-    FC,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react";
+import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import tw, { styled } from "twin.macro";
 import { useStorage } from "../../pluv-io/cloudflare";
 
@@ -128,20 +115,11 @@ export const HomeChessDemo: FC<HomeChessDemoProps> = ({ className, style }) => {
     const [winner, setWinner] = useState<string | null>();
     const chessRef = useRef<ChessBoardRef>();
 
-    const moveHistory = useMemo(
-        () => demo?.chessHistory?.slice() ?? null,
-        [demo],
-    );
+    const moveHistory = useMemo(() => demo?.chessHistory?.slice() ?? null, [demo]);
 
     const onGameOver = useCallback((winner: "b" | "w" | null) => {
         setGameOver(true);
-        setWinner(
-            winner === "b"
-                ? "Black wins!"
-                : winner === "w"
-                  ? "White wins!"
-                  : "Draw",
-        );
+        setWinner(winner === "b" ? "Black wins!" : winner === "w" ? "White wins!" : "Draw");
     }, []);
 
     useEffect(() => {
@@ -169,10 +147,7 @@ export const HomeChessDemo: FC<HomeChessDemoProps> = ({ className, style }) => {
                         id="home-chess"
                         onGameOver={onGameOver}
                         onMove={({ game }) => {
-                            sharedType?.set(
-                                "chessHistory",
-                                yjs.array(game.history()),
-                            );
+                            sharedType?.set("chessHistory", yjs.array(game.history()));
                         }}
                     />
                 ) : (

apps/web/src/components/HomeChessDemo/useOtherSquares.ts

@@ -2,9 +2,7 @@ import { useOthers } from "pluv-io";
 import { useMemo } from "react";
 
 export const useOtherSquares = (): Record<string, number> => {
-    const otherSquares = useOthers((others) =>
-        others.map((other) => other.presence.demoChessSquare),
-    );
+    const otherSquares = useOthers((others) => others.map((other) => other.presence.demoChessSquare));
 
     return useMemo(() => {
         return otherSquares.reduce<Record<string, number>>(