Merge pull request #2685 from pyth-network/cprussin/turbopack

dev: use turbopack for local development

Author: cprussin

apps/entropy-explorer/next.config.js

@@ -9,16 +9,20 @@ const config = {
     },
   },
 
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
-
-    config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
-    };
-
     return config;
   },
 

apps/entropy-explorer/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_34F8THr7mZ3eAOQoCLdo8xWj9fdT vercel env pull",
-    "start:dev": "next dev --port 3006",
+    "start:dev": "next dev --port 3006 --turbopack",
     "start:prod": "next start --port 3006",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",

apps/insights/next.config.js

@@ -13,16 +13,21 @@ const config = {
     },
   },
 
+  turbopack: {
+    rules: {
+      "*.svg": {
+        loaders: ["@svgr/webpack"],
+        as: "*.js",
+      },
+    },
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,
       use: ["@svgr/webpack"],
     });
 
-    config.resolve.extensionAlias = {
-      ".js": [".js", ".ts", ".tsx"],
-    };
-
     return config;
   },
 

apps/insights/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
-    "start:dev": "next dev --port 3003",
+    "start:dev": "next dev --port 3003 --turbopack",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",

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

@@ -87,8 +87,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

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

@@ -489,7 +489,7 @@ export const PriceComponentsCardContents = <
         label={label}
         fill
         rounded
-        stickyHeader={styles.headerHeight}
+        stickyHeader
         className={styles.table ?? ""}
         columns={[
           {

apps/insights/src/components/PriceFeed/chart.module.scss

@@ -0,0 +1,12 @@
+@use "@pythnetwork/component-library/theme";
+
+.chart {
+  --border-light: #{theme.pallette-color("stone", 300)};
+  --border-dark: #{theme.pallette-color("steel", 600)};
+  --muted-light: #{theme.pallette-color("stone", 700)};
+  --muted-dark: #{theme.pallette-color("steel", 300)};
+  --chart-series-primary-light: #{theme.pallette-color("violet", 500)};
+  --chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
+  --chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
+  --chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
+}

apps/insights/src/components/PriceFeed/chart.tsx

@@ -9,7 +9,7 @@ import type { RefObject } from "react";
 import { useEffect, useRef, useCallback } from "react";
 import { z } from "zod";
 
-import theme from "./theme.module.scss";
+import styles from "./chart.module.scss";
 import { useLivePriceData } from "../../hooks/use-live-price-data";
 import { Cluster } from "../../services/pyth";
 
@@ -22,14 +22,18 @@ export const Chart = ({ symbol, feedId }: Props) => {
   const chartContainerRef = useChart(symbol, feedId);
 
   return (
-    <div style={{ width: "100%", height: "100%" }} ref={chartContainerRef} />
+    <div
+      style={{ width: "100%", height: "100%" }}
+      className={styles.chart}
+      ref={chartContainerRef}
+    />
   );
 };
 
 const useChart = (symbol: string, feedId: string) => {
   const { chartContainerRef, chartRef } = useChartElem(symbol, feedId);
   useChartResize(chartContainerRef, chartRef);
-  useChartColors(chartRef);
+  useChartColors(chartContainerRef, chartRef);
   return chartContainerRef;
 };
 
@@ -217,17 +221,24 @@ const useChartResize = (
   });
 };
 
-const useChartColors = (chartRef: RefObject<ChartRefContents | undefined>) => {
+const useChartColors = (
+  chartContainerRef: RefObject<HTMLDivElement | null>,
+  chartRef: RefObject<ChartRefContents | undefined>,
+) => {
   const { resolvedTheme } = useTheme();
   useEffect(() => {
-    if (chartRef.current && resolvedTheme) {
-      applyColors(chartRef.current, resolvedTheme);
+    if (chartRef.current && chartContainerRef.current && resolvedTheme) {
+      applyColors(chartRef.current, chartContainerRef.current, resolvedTheme);
     }
-  }, [resolvedTheme, chartRef]);
+  }, [resolvedTheme, chartRef, chartContainerRef]);
 };
 
-const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
-  const colors = getColors(theme);
+const applyColors = (
+  { chart, ...series }: ChartRefContents,
+  container: HTMLDivElement,
+  theme: string,
+) => {
+  const colors = getColors(container, theme);
   chart.applyOptions({
     grid: {
       horzLines: {
@@ -260,12 +271,20 @@ const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
   }
 };
 
-const getColors = (resolvedTheme: string) => ({
-  border: theme[`border-${resolvedTheme}`] ?? "red",
-  muted: theme[`muted-${resolvedTheme}`] ?? "",
-  chartNeutral: theme[`chart-series-neutral-${resolvedTheme}`] ?? "",
-  chartPrimary: theme[`chart-series-primary-${resolvedTheme}`] ?? "",
-});
+const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
+  const style = getComputedStyle(container);
+
+  return {
+    border: style.getPropertyValue(`--border-${resolvedTheme}`),
+    muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
+    chartNeutral: style.getPropertyValue(
+      `--chart-series-neutral-${resolvedTheme}`,
+    ),
+    chartPrimary: style.getPropertyValue(
+      `--chart-series-primary-${resolvedTheme}`,
+    ),
+  };
+};
 
 const getLocalTimestamp = (date: Date): UTCTimestamp =>
   (Date.UTC(

apps/insights/src/components/PriceFeed/theme.module.scss

@@ -21,8 +21,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

apps/insights/src/components/PriceFeeds/price-feeds-card.module.scss

@@ -319,7 +319,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       rounded
       fill
       label="Price Feeds"
-      stickyHeader={styles.headerHeight}
+      stickyHeader
       className={styles.table ?? ""}
       columns={[
         {

apps/insights/src/components/PriceFeeds/price-feeds-card.tsx

@@ -45,11 +45,9 @@
     .chartArea {
       color: theme.color("button", "primary", "background", "normal");
 
-      :global {
-        // stylelint-disable-next-line selector-class-pattern
-        .recharts-area-area {
-          fill: theme.color("states", "data", "background");
-        }
+      // stylelint-disable-next-line selector-class-pattern
+      :global(.recharts-area-area) {
+        fill: theme.color("states", "data", "background");
       }
     }
   }

apps/insights/src/components/Publisher/ois-apy-history.module.scss

@@ -39,8 +39,3 @@
     }
   }
 }
-
-:export {
-  // stylelint-disable-next-line property-no-unknown
-  headerHeight: theme.$header-height;
-}

apps/insights/src/components/Publishers/publishers-card.module.scss

@@ -323,7 +323,7 @@ const PublishersCardContents = ({
       rounded
       fill
       label="Publishers"
-      stickyHeader={styles.headerHeight}
+      stickyHeader
       className={styles.table ?? ""}
       columns={[
         {

apps/insights/src/components/Publishers/publishers-card.tsx

@@ -1 +1,2 @@
 storybook-static
+dist/

packages/component-library/.gitignore

@@ -1,2 +1,3 @@
+dist/
 coverage/
 node_modules/

packages/component-library/.prettierignore

@@ -62,7 +62,8 @@ const config = {
       ...config.resolve,
       extensionAlias: {
         ...config.resolve?.extensionAlias,
-        ".js": [".js", ".ts", ".tsx"],
+        ".js": [".js", ".ts"],
+        ".jsx": [".jsx", ".tsx"],
       },
     };
 

packages/component-library/.storybook/main.ts

@@ -2,9 +2,9 @@ import type { Preview, Decorator } from "@storybook/react";
 import { useEffect } from "react";
 
 import styles from "./storybook.module.scss";
-import { BodyProviders } from "../src/AppShell/body-providers.js";
+import { BodyProviders } from "../src/AppShell/body-providers.jsx";
 import { sans } from "../src/AppShell/fonts";
-import { RootProviders } from "../src/AppShell/index.js";
+import { RootProviders } from "../src/AppShell/index.jsx";
 import shellStyles from "../src/AppShell/index.module.scss";
 
 const preview = {

packages/component-library/.storybook/preview.tsx

@@ -7,12 +7,21 @@
     "node": "22"
   },
   "exports": {
-    "./*": "./src/*/index.tsx",
-    "./useData": "./src/useData/index.ts",
-    "./theme": "./src/theme.scss"
+    "./*": {
+      "types": "./dist/esm/*/index.d.ts",
+      "default": "./dist/esm/*/index.jsx"
+    },
+    "./useData": {
+      "types": "./dist/esm/useData/index.d.ts",
+      "default": "./dist/esm/useData/index.js"
+    },
+    "./theme": "./dist/esm/theme.scss"
   },
   "scripts": {
+    "build:esm": "tsc --project tsconfig.build.json --outDir ./dist/esm && echo '{\"type\":\"module\"}' > dist/esm/package.json",
+    "build:scss": "copyfiles -u 1 \"src/**/*.scss\" dist/esm",
     "build:storybook": "storybook build",
+    "build:svg": "copyfiles -u 1 \"src/**/*.svg\" dist/esm",
     "fix:format": "prettier --write .",
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
@@ -60,6 +69,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "copyfiles": "catalog:",
     "css-loader": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",

packages/component-library/package.json

@@ -4,9 +4,9 @@ import { ThemeProvider } from "next-themes";
 import type { ComponentProps, CSSProperties } from "react";
 import { useState } from "react";
 
-import { OverlayVisibleContext } from "../overlay-visible-context.js";
-import { AlertProvider } from "../useAlert/index.js";
-import { DrawerProvider } from "../useDrawer/index.js";
+import { OverlayVisibleContext } from "../overlay-visible-context.jsx";
+import { AlertProvider } from "../useAlert/index.jsx";
+import { DrawerProvider } from "../useDrawer/index.jsx";
 
 type TabRootProps = ComponentProps<"div"> & {
   theme?: "dark" | "light" | undefined;

packages/component-library/src/AppShell/body-providers.tsx

@@ -5,6 +5,10 @@
 
   --header-height: #{theme.spacing(18)};
 
+  @each $name, $breakpoint in theme.$breakpoints {
+    --breakpoint-#{$name}: #{$breakpoint};
+  }
+
   @include theme.breakpoint("md") {
     --header-height: #{theme.spacing(20)};
   }

packages/component-library/src/AppShell/fonts.tsx renamed to packages/component-library/src/AppShell/fonts.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { AppBody as AppShellComponent } from "./index.js";
+import { AppBody as AppShellComponent } from "./index.jsx";
 
 const meta = {
   component: AppShellComponent,

packages/component-library/src/AppShell/index.module.scss

@@ -3,20 +3,20 @@ import clsx from "clsx";
 import dynamic from "next/dynamic";
 import type { ComponentProps, ReactNode } from "react";
 
-import { Amplitude } from "./amplitude.js";
-import { BodyProviders } from "./body-providers.js";
+import { Amplitude } from "./amplitude.jsx";
+import { BodyProviders } from "./body-providers.jsx";
 import { sans } from "./fonts.js";
-import { HtmlWithLang } from "./html-with-lang.js";
-import { I18nProvider } from "./i18n-provider.js";
+import { HtmlWithLang } from "./html-with-lang.jsx";
+import { I18nProvider } from "./i18n-provider.jsx";
 import styles from "./index.module.scss";
-import { TabRoot, TabPanel } from "./tabs";
-import { Footer } from "../Footer/index.js";
-import { Header } from "../Header/index.js";
-import { MainNavTabs } from "../MainNavTabs/index.js";
-import { MobileNavTabs } from "../MobileNavTabs/index.js";
-import { ComposeProviders } from "../compose-providers.js";
-import { RouterProvider } from "./router-provider.js";
-import { LoggerProvider } from "../useLogger/index.js";
+import { TabRoot, TabPanel } from "./tabs.jsx";
+import { Footer } from "../Footer/index.jsx";
+import { Header } from "../Header/index.jsx";
+import { MainNavTabs } from "../MainNavTabs/index.jsx";
+import { MobileNavTabs } from "../MobileNavTabs/index.jsx";
+import { ComposeProviders } from "../compose-providers.jsx";
+import { RouterProvider } from "./router-provider.jsx";
+import { LoggerProvider } from "../useLogger/index.jsx";
 
 import "./base.scss";
 

packages/component-library/src/AppShell/index.stories.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useEffect } from "react";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
 
-import { useLogger } from "../useLogger/index.js";
+import { useLogger } from "../useLogger/index.jsx";
 
 const AXE_TIMEOUT = 1000;