Skip to content

Commit f394787

Browse files
authored
Merge pull request #2685 from pyth-network/cprussin/turbopack
dev: use turbopack for local development
2 parents becf76c + 8c25265 commit f394787

File tree

88 files changed

+300
-210
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+300
-210
lines changed

apps/entropy-explorer/next.config.js

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@ const config = {
99
},
1010
},
1111

12+
turbopack: {
13+
rules: {
14+
"*.svg": {
15+
loaders: ["@svgr/webpack"],
16+
as: "*.js",
17+
},
18+
},
19+
},
20+
1221
webpack(config) {
1322
config.module.rules.push({
1423
test: /\.svg$/i,
1524
use: ["@svgr/webpack"],
1625
});
17-
18-
config.resolve.extensionAlias = {
19-
".js": [".js", ".ts", ".tsx"],
20-
};
21-
2226
return config;
2327
},
2428

apps/entropy-explorer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"fix:lint:eslint": "eslint --fix .",
1313
"fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
1414
"pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_34F8THr7mZ3eAOQoCLdo8xWj9fdT vercel env pull",
15-
"start:dev": "next dev --port 3006",
15+
"start:dev": "next dev --port 3006 --turbopack",
1616
"start:prod": "next start --port 3006",
1717
"test:format": "prettier --check .",
1818
"test:lint:eslint": "eslint . --max-warnings 0",

apps/insights/next.config.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,21 @@ const config = {
1313
},
1414
},
1515

16+
turbopack: {
17+
rules: {
18+
"*.svg": {
19+
loaders: ["@svgr/webpack"],
20+
as: "*.js",
21+
},
22+
},
23+
},
24+
1625
webpack(config) {
1726
config.module.rules.push({
1827
test: /\.svg$/i,
1928
use: ["@svgr/webpack"],
2029
});
2130

22-
config.resolve.extensionAlias = {
23-
".js": [".js", ".ts", ".tsx"],
24-
};
25-
2631
return config;
2732
},
2833

apps/insights/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"fix:lint:eslint": "eslint --fix .",
1313
"fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
1414
"pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
15-
"start:dev": "next dev --port 3003",
15+
"start:dev": "next dev --port 3003 --turbopack",
1616
"start:prod": "next start --port 3003",
1717
"test:format": "prettier --check .",
1818
"test:lint:eslint": "eslint . --max-warnings 0",

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,3 @@
8787
}
8888
}
8989
}
90-
91-
:export {
92-
// stylelint-disable-next-line property-no-unknown
93-
headerHeight: theme.$header-height;
94-
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -489,7 +489,7 @@ export const PriceComponentsCardContents = <
489489
label={label}
490490
fill
491491
rounded
492-
stickyHeader={styles.headerHeight}
492+
stickyHeader
493493
className={styles.table ?? ""}
494494
columns={[
495495
{
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.chart {
4+
--border-light: #{theme.pallette-color("stone", 300)};
5+
--border-dark: #{theme.pallette-color("steel", 600)};
6+
--muted-light: #{theme.pallette-color("stone", 700)};
7+
--muted-dark: #{theme.pallette-color("steel", 300)};
8+
--chart-series-primary-light: #{theme.pallette-color("violet", 500)};
9+
--chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
10+
--chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
11+
--chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
12+
}

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

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type { RefObject } from "react";
99
import { useEffect, useRef, useCallback } from "react";
1010
import { z } from "zod";
1111

12-
import theme from "./theme.module.scss";
12+
import styles from "./chart.module.scss";
1313
import { useLivePriceData } from "../../hooks/use-live-price-data";
1414
import { Cluster } from "../../services/pyth";
1515

@@ -22,14 +22,18 @@ export const Chart = ({ symbol, feedId }: Props) => {
2222
const chartContainerRef = useChart(symbol, feedId);
2323

2424
return (
25-
<div style={{ width: "100%", height: "100%" }} ref={chartContainerRef} />
25+
<div
26+
style={{ width: "100%", height: "100%" }}
27+
className={styles.chart}
28+
ref={chartContainerRef}
29+
/>
2630
);
2731
};
2832

2933
const useChart = (symbol: string, feedId: string) => {
3034
const { chartContainerRef, chartRef } = useChartElem(symbol, feedId);
3135
useChartResize(chartContainerRef, chartRef);
32-
useChartColors(chartRef);
36+
useChartColors(chartContainerRef, chartRef);
3337
return chartContainerRef;
3438
};
3539

@@ -217,17 +221,24 @@ const useChartResize = (
217221
});
218222
};
219223

220-
const useChartColors = (chartRef: RefObject<ChartRefContents | undefined>) => {
224+
const useChartColors = (
225+
chartContainerRef: RefObject<HTMLDivElement | null>,
226+
chartRef: RefObject<ChartRefContents | undefined>,
227+
) => {
221228
const { resolvedTheme } = useTheme();
222229
useEffect(() => {
223-
if (chartRef.current && resolvedTheme) {
224-
applyColors(chartRef.current, resolvedTheme);
230+
if (chartRef.current && chartContainerRef.current && resolvedTheme) {
231+
applyColors(chartRef.current, chartContainerRef.current, resolvedTheme);
225232
}
226-
}, [resolvedTheme, chartRef]);
233+
}, [resolvedTheme, chartRef, chartContainerRef]);
227234
};
228235

229-
const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
230-
const colors = getColors(theme);
236+
const applyColors = (
237+
{ chart, ...series }: ChartRefContents,
238+
container: HTMLDivElement,
239+
theme: string,
240+
) => {
241+
const colors = getColors(container, theme);
231242
chart.applyOptions({
232243
grid: {
233244
horzLines: {
@@ -260,12 +271,20 @@ const applyColors = ({ chart, ...series }: ChartRefContents, theme: string) => {
260271
}
261272
};
262273

263-
const getColors = (resolvedTheme: string) => ({
264-
border: theme[`border-${resolvedTheme}`] ?? "red",
265-
muted: theme[`muted-${resolvedTheme}`] ?? "",
266-
chartNeutral: theme[`chart-series-neutral-${resolvedTheme}`] ?? "",
267-
chartPrimary: theme[`chart-series-primary-${resolvedTheme}`] ?? "",
268-
});
274+
const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
275+
const style = getComputedStyle(container);
276+
277+
return {
278+
border: style.getPropertyValue(`--border-${resolvedTheme}`),
279+
muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
280+
chartNeutral: style.getPropertyValue(
281+
`--chart-series-neutral-${resolvedTheme}`,
282+
),
283+
chartPrimary: style.getPropertyValue(
284+
`--chart-series-primary-${resolvedTheme}`,
285+
),
286+
};
287+
};
269288

270289
const getLocalTimestamp = (date: Date): UTCTimestamp =>
271290
(Date.UTC(

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,3 @@
2121
}
2222
}
2323
}
24-
25-
:export {
26-
// stylelint-disable-next-line property-no-unknown
27-
headerHeight: theme.$header-height;
28-
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
319319
rounded
320320
fill
321321
label="Price Feeds"
322-
stickyHeader={styles.headerHeight}
322+
stickyHeader
323323
className={styles.table ?? ""}
324324
columns={[
325325
{

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,9 @@
4545
.chartArea {
4646
color: theme.color("button", "primary", "background", "normal");
4747

48-
:global {
49-
// stylelint-disable-next-line selector-class-pattern
50-
.recharts-area-area {
51-
fill: theme.color("states", "data", "background");
52-
}
48+
// stylelint-disable-next-line selector-class-pattern
49+
:global(.recharts-area-area) {
50+
fill: theme.color("states", "data", "background");
5351
}
5452
}
5553
}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,3 @@
3939
}
4040
}
4141
}
42-
43-
:export {
44-
// stylelint-disable-next-line property-no-unknown
45-
headerHeight: theme.$header-height;
46-
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ const PublishersCardContents = ({
323323
rounded
324324
fill
325325
label="Publishers"
326-
stickyHeader={styles.headerHeight}
326+
stickyHeader
327327
className={styles.table ?? ""}
328328
columns={[
329329
{

packages/component-library/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
storybook-static
2+
dist/
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
dist/
12
coverage/
23
node_modules/

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ const config = {
6262
...config.resolve,
6363
extensionAlias: {
6464
...config.resolve?.extensionAlias,
65-
".js": [".js", ".ts", ".tsx"],
65+
".js": [".js", ".ts"],
66+
".jsx": [".jsx", ".tsx"],
6667
},
6768
};
6869

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import type { Preview, Decorator } from "@storybook/react";
22
import { useEffect } from "react";
33

44
import styles from "./storybook.module.scss";
5-
import { BodyProviders } from "../src/AppShell/body-providers.js";
5+
import { BodyProviders } from "../src/AppShell/body-providers.jsx";
66
import { sans } from "../src/AppShell/fonts";
7-
import { RootProviders } from "../src/AppShell/index.js";
7+
import { RootProviders } from "../src/AppShell/index.jsx";
88
import shellStyles from "../src/AppShell/index.module.scss";
99

1010
const preview = {

packages/component-library/package.json

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,21 @@
77
"node": "22"
88
},
99
"exports": {
10-
"./*": "./src/*/index.tsx",
11-
"./useData": "./src/useData/index.ts",
12-
"./theme": "./src/theme.scss"
10+
"./*": {
11+
"types": "./dist/esm/*/index.d.ts",
12+
"default": "./dist/esm/*/index.jsx"
13+
},
14+
"./useData": {
15+
"types": "./dist/esm/useData/index.d.ts",
16+
"default": "./dist/esm/useData/index.js"
17+
},
18+
"./theme": "./dist/esm/theme.scss"
1319
},
1420
"scripts": {
21+
"build:esm": "tsc --project tsconfig.build.json --outDir ./dist/esm && echo '{\"type\":\"module\"}' > dist/esm/package.json",
22+
"build:scss": "copyfiles -u 1 \"src/**/*.scss\" dist/esm",
1523
"build:storybook": "storybook build",
24+
"build:svg": "copyfiles -u 1 \"src/**/*.svg\" dist/esm",
1625
"fix:format": "prettier --write .",
1726
"fix:lint:eslint": "eslint --fix .",
1827
"fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
@@ -60,6 +69,7 @@
6069
"@types/react": "catalog:",
6170
"@types/react-dom": "catalog:",
6271
"autoprefixer": "catalog:",
72+
"copyfiles": "catalog:",
6373
"css-loader": "catalog:",
6474
"eslint": "catalog:",
6575
"jest": "catalog:",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { ThemeProvider } from "next-themes";
44
import type { ComponentProps, CSSProperties } from "react";
55
import { useState } from "react";
66

7-
import { OverlayVisibleContext } from "../overlay-visible-context.js";
8-
import { AlertProvider } from "../useAlert/index.js";
9-
import { DrawerProvider } from "../useDrawer/index.js";
7+
import { OverlayVisibleContext } from "../overlay-visible-context.jsx";
8+
import { AlertProvider } from "../useAlert/index.jsx";
9+
import { DrawerProvider } from "../useDrawer/index.jsx";
1010

1111
type TabRootProps = ComponentProps<"div"> & {
1212
theme?: "dark" | "light" | undefined;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55

66
--header-height: #{theme.spacing(18)};
77

8+
@each $name, $breakpoint in theme.$breakpoints {
9+
--breakpoint-#{$name}: #{$breakpoint};
10+
}
11+
812
@include theme.breakpoint("md") {
913
--header-height: #{theme.spacing(20)};
1014
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22

3-
import { AppBody as AppShellComponent } from "./index.js";
3+
import { AppBody as AppShellComponent } from "./index.jsx";
44

55
const meta = {
66
component: AppShellComponent,

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@ import clsx from "clsx";
33
import dynamic from "next/dynamic";
44
import type { ComponentProps, ReactNode } from "react";
55

6-
import { Amplitude } from "./amplitude.js";
7-
import { BodyProviders } from "./body-providers.js";
6+
import { Amplitude } from "./amplitude.jsx";
7+
import { BodyProviders } from "./body-providers.jsx";
88
import { sans } from "./fonts.js";
9-
import { HtmlWithLang } from "./html-with-lang.js";
10-
import { I18nProvider } from "./i18n-provider.js";
9+
import { HtmlWithLang } from "./html-with-lang.jsx";
10+
import { I18nProvider } from "./i18n-provider.jsx";
1111
import styles from "./index.module.scss";
12-
import { TabRoot, TabPanel } from "./tabs";
13-
import { Footer } from "../Footer/index.js";
14-
import { Header } from "../Header/index.js";
15-
import { MainNavTabs } from "../MainNavTabs/index.js";
16-
import { MobileNavTabs } from "../MobileNavTabs/index.js";
17-
import { ComposeProviders } from "../compose-providers.js";
18-
import { RouterProvider } from "./router-provider.js";
19-
import { LoggerProvider } from "../useLogger/index.js";
12+
import { TabRoot, TabPanel } from "./tabs.jsx";
13+
import { Footer } from "../Footer/index.jsx";
14+
import { Header } from "../Header/index.jsx";
15+
import { MainNavTabs } from "../MainNavTabs/index.jsx";
16+
import { MobileNavTabs } from "../MobileNavTabs/index.jsx";
17+
import { ComposeProviders } from "../compose-providers.jsx";
18+
import { RouterProvider } from "./router-provider.jsx";
19+
import { LoggerProvider } from "../useLogger/index.jsx";
2020

2121
import "./base.scss";
2222

packages/component-library/src/AppShell/report-accessibility.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
"use client";
22

3-
import { useEffect } from "react";
4-
import * as React from "react";
5-
import * as ReactDOM from "react-dom";
3+
import React, { useEffect } from "react";
4+
import ReactDOM from "react-dom";
65

7-
import { useLogger } from "../useLogger/index.js";
6+
import { useLogger } from "../useLogger/index.jsx";
87

98
const AXE_TIMEOUT = 1000;
109

0 commit comments

Comments
 (0)