Merge pull request #2210 from pyth-network/cprussin/price-feed-chart

fix(component-library): fix prefetching react-aria links

Author: cprussin

apps/insights/package.json

@@ -41,7 +41,6 @@
     "nuqs": "catalog:",
     "react": "catalog:",
     "react-aria": "catalog:",
-    "react-aria-components": "catalog:",
     "react-dom": "catalog:",
     "recharts": "catalog:",
     "superjson": "catalog:",

apps/insights/src/components/PriceFeed/price-components-card.tsx

@@ -2,10 +2,13 @@
 
 import { Card } from "@pythnetwork/component-library/Card";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
-import { type RowConfig, Table } from "@pythnetwork/component-library/Table";
+import {
+  type RowConfig,
+  type SortDescriptor,
+  Table,
+} from "@pythnetwork/component-library/Table";
 import { type ReactNode, Suspense, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
-import type { SortDescriptor } from "react-aria-components";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { FormattedNumber } from "../FormattedNumber";

apps/insights/src/components/PriceFeed/price-feed-select.tsx

@@ -1,20 +1,24 @@
 "use client";
 
 import { DropdownCaretDown } from "@pythnetwork/component-library/DropdownCaretDown";
-import { type ReactNode, useMemo, useState } from "react";
-import { useCollator, useFilter } from "react-aria";
 import {
-  Select,
-  Button,
-  Popover,
-  Dialog,
+  Virtualizer,
+  ListLayout,
+} from "@pythnetwork/component-library/Virtualizer";
+import { Button } from "@pythnetwork/component-library/unstyled/Button";
+import { Dialog } from "@pythnetwork/component-library/unstyled/Dialog";
+import {
   ListBox,
   ListBoxItem,
-  UNSTABLE_Virtualizer as Virtualizer,
-  UNSTABLE_ListLayout as ListLayout,
+} from "@pythnetwork/component-library/unstyled/ListBox";
+import { Popover } from "@pythnetwork/component-library/unstyled/Popover";
+import { Select } from "@pythnetwork/component-library/unstyled/Select";
+import {
   TextField,
   Input,
-} from "react-aria-components";
+} from "@pythnetwork/component-library/unstyled/TextField";
+import { type ReactNode, useMemo, useState } from "react";
+import { useCollator, useFilter } from "react-aria";
 
 import styles from "./price-feed-select.module.scss";
 

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

@@ -1,10 +1,10 @@
 "use client";
 
-import { Tabs as TabsComponent } from "@pythnetwork/component-library/Tabs";
+import { TabList } from "@pythnetwork/component-library/TabList";
 import {
-  UnstyledTabPanel,
-  UnstyledTabs,
-} from "@pythnetwork/component-library/UnstyledTabs";
+  TabPanel as UnstyledTabPanel,
+  Tabs as UnstyledTabs,
+} from "@pythnetwork/component-library/unstyled/Tabs";
 import { useSelectedLayoutSegment, usePathname } from "next/navigation";
 import { useMemo, type ComponentProps } from "react";
 
@@ -18,13 +18,10 @@ export const TabRoot = (
   return <UnstyledTabs selectedKey={tabId} {...props} />;
 };
 
-type TabsProps = Omit<
-  ComponentProps<typeof TabsComponent>,
-  "pathname" | "items"
-> & {
+type TabsProps = Omit<ComponentProps<typeof TabList>, "pathname" | "items"> & {
   slug: string;
   items: (Omit<
-    ComponentProps<typeof TabsComponent>["items"],
+    ComponentProps<typeof TabList>["items"],
     "href" | "id"
   >[number] & {
     segment: string | undefined;
@@ -42,7 +39,7 @@ export const Tabs = ({ slug, items, ...props }: TabsProps) => {
     }));
   }, [items, slug]);
 
-  return <TabsComponent pathname={pathname} items={mappedItems} {...props} />;
+  return <TabList pathname={pathname} items={mappedItems} {...props} />;
 };
 
 export const TabPanel = ({

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

@@ -7,11 +7,14 @@ import { Card } from "@pythnetwork/component-library/Card";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { Select } from "@pythnetwork/component-library/Select";
-import { type RowConfig, Table } from "@pythnetwork/component-library/Table";
+import {
+  type RowConfig,
+  type SortDescriptor,
+  Table,
+} from "@pythnetwork/component-library/Table";
 import { useQueryState, parseAsString } from "nuqs";
 import { type ReactNode, Suspense, useCallback, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
-import type { SortDescriptor } from "react-aria-components";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { SKELETON_WIDTH } from "../LivePrices";

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

@@ -5,10 +5,13 @@ import { Badge } from "@pythnetwork/component-library/Badge";
 import { Card } from "@pythnetwork/component-library/Card";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
-import { type RowConfig, Table } from "@pythnetwork/component-library/Table";
+import {
+  type RowConfig,
+  type SortDescriptor,
+  Table,
+} from "@pythnetwork/component-library/Table";
 import { type ReactNode, Suspense, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
-import type { SortDescriptor } from "react-aria-components";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { NoResults } from "../NoResults";

apps/insights/src/components/Publishers/semicircle-meter.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { Meter } from "@pythnetwork/component-library/unstyled/Meter";
 import dynamic from "next/dynamic";
 import { type ComponentProps, Suspense } from "react";
-import { Meter } from "react-aria-components";
 import { PolarAngleAxis, RadialBar } from "recharts";
 
-export { Label } from "react-aria-components";
+export { Label } from "@pythnetwork/component-library/unstyled/Label";
 
 const RadialBarChart = dynamic(
   () => import("recharts").then((recharts) => recharts.RadialBarChart),

apps/insights/src/components/Root/nav-link.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Link } from "@pythnetwork/component-library/unstyled/Link";
 import { useSelectedLayoutSegment } from "next/navigation";
 import type { ReactNode } from "react";
-import { Link } from "react-aria-components";
 
 type Props = {
   href: string;

apps/insights/src/components/Root/tabs.tsx

@@ -2,20 +2,20 @@
 
 import { MainNavTabs as MainNavTabsComponent } from "@pythnetwork/component-library/MainNavTabs";
 import {
-  UnstyledTabPanel,
-  UnstyledTabs,
-} from "@pythnetwork/component-library/UnstyledTabs";
+  TabPanel as UnstyledTabPanel,
+  Tabs,
+} from "@pythnetwork/component-library/unstyled/Tabs";
 import { useSelectedLayoutSegment, usePathname } from "next/navigation";
 import { type ComponentProps } from "react";
 
 import { type VariantArg, LayoutTransition } from "../LayoutTransition";
 
 export const TabRoot = (
-  props: Omit<ComponentProps<typeof UnstyledTabs>, "selectedKey">,
+  props: Omit<ComponentProps<typeof Tabs>, "selectedKey">,
 ) => {
   const tabId = useSelectedLayoutSegment() ?? "";
 
-  return <UnstyledTabs selectedKey={tabId} {...props} />;
+  return <Tabs selectedKey={tabId} {...props} />;
 };
 
 export const MainNavTabs = (

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
+import { Meter } from "@pythnetwork/component-library/unstyled/Meter";
 import type { CSSProperties } from "react";
-import { Meter } from "react-aria-components";
 
 import styles from "./index.module.scss";