chore: move component library from tailwind to sass

Author: cprussin

apps/api-reference/package.json

@@ -13,8 +13,8 @@
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_gbljYVzp0m5EpCuOF6nZpM4WMFM6 vercel env pull",
     "start:dev": "next dev --port 3002",
     "start:prod": "next start --port 3002",
-    "test:format": "jest --selectProjects format",
-    "test:lint": "jest --selectProjects lint",
+    "test:format": "prettier --check .",
+    "test:lint": "eslint .",
     "test:types": "tsc"
   },
   "dependencies": {

apps/insights/eslint.config.js

@@ -1,9 +1 @@
-import { fileURLToPath } from "node:url";
-
-import { nextjs, tailwind, storybook } from "@cprussin/eslint-config";
-
-const tailwindConfig = fileURLToPath(
-  import.meta.resolve(`./tailwind.config.ts`),
-);
-
-export default [...nextjs, ...tailwind(tailwindConfig), ...storybook];
+export { nextjs as default } from "@cprussin/eslint-config";

apps/insights/package.json

@@ -14,7 +14,7 @@
     "start:dev": "next dev --port 3003",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
-    "test:lint": "jest --selectProjects lint",
+    "test:lint": "eslint .",
     "test:types": "tsc"
   },
   "dependencies": {
@@ -55,7 +55,7 @@
     "jest": "catalog:",
     "postcss": "catalog:",
     "prettier": "catalog:",
-    "tailwindcss": "catalog:",
+    "sass": "catalog:",
     "typescript": "catalog:",
     "vercel": "catalog:"
   }

apps/insights/postcss.config.js

@@ -1,9 +1 @@
-import { fileURLToPath } from "node:url";
-
-import { base, tailwind, mergeConfigs } from "@cprussin/prettier-config";
-
-const tailwindConfig = fileURLToPath(
-  import.meta.resolve(`./tailwind.config.ts`),
-);
-
-export default mergeConfigs([base, tailwind(tailwindConfig)]);
+export { base as default } from "@cprussin/prettier-config";

apps/insights/prettier.config.js

@@ -1,4 +1,2 @@
-import "../tailwind.css";
-
 export { Root as default } from "../components/Root";
 export { metadata, viewport } from "../metadata";

apps/insights/src/app/layout.ts

@@ -0,0 +1,66 @@
+@use "@pythnetwork/component-library/theme.scss";
+
+.copyButton {
+  margin: -#{theme.spacing(0.5)} -0.5em;
+  display: inline-block;
+  white-space: nowrap;
+  border-radius: theme.border-radius("md");
+  padding: theme.spacing(0.5) 0.5em;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: background-color 100ms linear;
+  outline: none;
+
+  .iconContainer {
+    position: relative;
+    top: 0.125em;
+    margin-left: theme.spacing(1);
+    display: inline-block;
+
+    .copyIconContainer {
+      opacity: 0.5;
+      transition: opacity 100ms linear;
+
+      .copyIcon {
+        width: 1em;
+        height: 1em;
+      }
+
+      .copyIconLabel {
+        @include theme.sr-only;
+      }
+    }
+
+    .checkIcon {
+      position: absolute;
+      inset: 0;
+      color: theme.color("states", "success", "normal");
+      opacity: 0;
+      transition: opacity 100ms linear;
+    }
+  }
+
+  &[data-hovered] {
+    background-color: theme.color("button", "outline", "background", "hover");
+  }
+
+  &[data-pressed] {
+    background-color: theme.color("button", "outline", "background", "active");
+  }
+
+  &[data-focus-visible] {
+    outline: 1px auto currentcolor;
+    outline-offset: theme.spacing(1);
+  }
+
+  &[data-is-copied] .iconContainer {
+    .copyIconContainer {
+      opacity: 0;
+    }
+
+    .checkIcon {
+      opacity: 1;
+    }
+  }
+}

apps/insights/src/components/CopyButton/index.module.scss

@@ -1,11 +1,14 @@
 "use client";
 
-import { Copy, Check } from "@phosphor-icons/react/dist/ssr";
+import { Check } from "@phosphor-icons/react/dist/ssr/Check";
+import { Copy } from "@phosphor-icons/react/dist/ssr/Copy";
 import { useLogger } from "@pythnetwork/app-logger";
 import { UnstyledButton } from "@pythnetwork/component-library/UnstyledButton";
 import clsx from "clsx";
 import { type ComponentProps, useCallback, useEffect, useState } from "react";
 
+import styles from "./index.module.scss";
+
 type CopyButtonProps = ComponentProps<typeof UnstyledButton> & {
   text: string;
 };
@@ -51,11 +54,7 @@ export const CopyButton = ({
   return (
     <UnstyledButton
       onPress={copy}
-      isDisabled={isCopied}
-      className={clsx(
-        "group/copy-button mx-[-0.5em] -mt-0.5 inline-block whitespace-nowrap rounded-md px-[0.5em] py-0.5 outline-none outline-0 outline-steel-600 transition data-[hovered]:bg-black/5 data-[focus-visible]:outline-2 dark:outline-steel-300 dark:data-[hovered]:bg-white/10",
-        className,
-      )}
+      className={clsx(styles.copyButton, className)}
       {...(isCopied && { "data-is-copied": true })}
       {...props}
     >
@@ -64,12 +63,12 @@ export const CopyButton = ({
           <span>
             {typeof children === "function" ? children(...args) : children}
           </span>
-          <span className="relative top-[0.125em] ml-1 inline-block">
-            <span className="opacity-50 transition-opacity duration-100 group-data-[is-copied]/copy-button:opacity-0">
-              <Copy className="size-[1em]" />
-              <div className="sr-only">Copy to clipboard</div>
+          <span className={styles.iconContainer}>
+            <span className={styles.copyIconContainer}>
+              <Copy className={styles.copyIcon} />
+              <div className={styles.copyIconLabel}>Copy to clipboard</div>
             </span>
-            <Check className="absolute inset-0 text-green-600 opacity-0 transition-opacity duration-100 group-data-[is-copied]/copy-button:opacity-100" />
+            <Check className={styles.checkIcon} />
           </span>
         </>
       )}

apps/insights/src/components/CopyButton/index.tsx

@@ -2,8 +2,6 @@ import { useLogger } from "@pythnetwork/app-logger";
 import { Button } from "@pythnetwork/component-library/Button";
 import { useEffect } from "react";
 
-import { MaxWidth } from "../MaxWidth";
-
 type Props = {
   error: Error & { digest?: string };
   reset?: () => void;
@@ -17,13 +15,13 @@ export const Error = ({ error, reset }: Props) => {
   }, [error, logger]);
 
   return (
-    <MaxWidth>
+    <div>
       <h1>Uh oh!</h1>
       <h2>Something went wrong</h2>
       <p>
         Error Details: <strong>{error.digest ?? error.message}</strong>
       </p>
       {reset && <Button onPress={reset}>Reset</Button>}
-    </MaxWidth>
+    </div>
   );
 };

apps/insights/src/components/Error/index.tsx

@@ -0,0 +1,6 @@
+@use "@pythnetwork/component-library/theme.scss";
+
+.h1 {
+  font-size: theme.font-size("2xl");
+  font-weight: theme.font-weight("medium");
+}

apps/insights/src/components/H1/index.module.scss

@@ -1,8 +1,10 @@
 import clsx from "clsx";
 import type { ComponentProps } from "react";
 
+import styles from "./index.module.scss";
+
 export const H1 = ({ className, children, ...props }: ComponentProps<"h1">) => (
-  <h1 className={clsx(className, "text-2xl font-medium")} {...props}>
+  <h1 className={clsx(styles.h1, className)} {...props}>
     {children}
   </h1>
 );

apps/insights/src/components/H1/index.tsx

@@ -0,0 +1,5 @@
+@use "@pythnetwork/component-library/theme.scss";
+
+.loading {
+  @include theme.max-width;
+}

apps/insights/src/components/Loading/index.module.scss

@@ -1,12 +1,12 @@
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 
+import styles from "./index.module.scss";
 import { H1 } from "../H1";
-import { MaxWidth } from "../MaxWidth";
 
 export const Loading = () => (
-  <MaxWidth>
+  <div className={styles.loading}>
     <H1>
-      <Skeleton className="w-60" />
+      <Skeleton width={60} />
     </H1>
-  </MaxWidth>
+  </div>
 );

apps/insights/src/components/Loading/index.tsx

@@ -1,11 +1,9 @@
 import { ButtonLink } from "@pythnetwork/component-library/Button";
 
-import { MaxWidth } from "../MaxWidth";
-
 export const NotFound = () => (
-  <MaxWidth>
+  <div>
     <h1>Not Found</h1>
     <p>{"The page you're looking for isn't here"}</p>
     <ButtonLink href="/">Go Home</ButtonLink>
-  </MaxWidth>
+  </div>
 );

apps/insights/src/components/MaxWidth/index.tsx

@@ -0,0 +1,5 @@
+@use "@pythnetwork/component-library/theme.scss";
+
+.overview {
+  @include theme.max-width;
+}

apps/insights/src/components/NotFound/index.tsx

@@ -1,8 +1,8 @@
+import styles from "./index.module.scss";
 import { H1 } from "../H1";
-import { MaxWidth } from "../MaxWidth";
 
 export const Overview = () => (
-  <MaxWidth>
+  <div className={styles.overview}>
     <H1>Overview</H1>
-  </MaxWidth>
+  </div>
 );