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";
 

apps/insights/src/use-query-param-filter-pagination.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useLogger } from "@pythnetwork/app-logger";
+import type { SortDescriptor } from "@pythnetwork/component-library/unstyled/Table";
 import { usePathname } from "next/navigation";
 import {
   parseAsString,
@@ -10,7 +11,6 @@ import {
   createSerializer,
 } from "nuqs";
 import { useCallback, useMemo } from "react";
-import type { SortDescriptor } from "react-aria-components";
 
 export const useQueryParamFilterPagination = <T>(
   items: T[],

packages/component-library/package.json

@@ -22,6 +22,7 @@
     "test:types": "tsc"
   },
   "peerDependencies": {
+    "next": "catalog:",
     "react": "catalog:"
   },
   "dependencies": {
@@ -51,6 +52,7 @@
     "css-loader": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",
+    "next": "catalog:",
     "postcss": "catalog:",
     "postcss-loader": "catalog:",
     "prettier": "catalog:",

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

@@ -9,9 +9,9 @@ import styles from "./index.module.scss";
 import { Button } from "../Button/index.js";
 import { Link } from "../Link/index.js";
 import {
-  UnstyledBreadcrumbs,
-  UnstyledBreadcrumb,
-} from "../UnstyledBreadcrumbs/index.js";
+  Breadcrumbs as UnstyledBreadcrumbs,
+  Breadcrumb,
+} from "../unstyled/Breadcrumbs/index.js";
 
 type OwnProps = {
   label: string;
@@ -37,7 +37,7 @@ export const Breadcrumbs = ({ label, className, items, ...props }: Props) => (
       {...props}
     >
       {(item) => (
-        <UnstyledBreadcrumb className={styles.breadcrumb ?? ""}>
+        <Breadcrumb className={styles.breadcrumb ?? ""}>
           {"href" in item ? (
             <>
               {item.href === "/" ? (
@@ -65,7 +65,7 @@ export const Breadcrumbs = ({ label, className, items, ...props }: Props) => (
           ) : (
             <div className={styles.current}>{item.label}</div>
           )}
-        </UnstyledBreadcrumb>
+        </Breadcrumb>
       )}
     </UnstyledBreadcrumbs>
   </nav>

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

@@ -7,8 +7,8 @@ import type {
 } from "react";
 
 import styles from "./index.module.scss";
-import { UnstyledButton } from "../UnstyledButton/index.js";
-import { UnstyledLink } from "../UnstyledLink/index.js";
+import { Button as UnstyledButton } from "../unstyled/Button/index.js";
+import { Link } from "../unstyled/Link/index.js";
 
 export const VARIANTS = [
   "primary",
@@ -38,10 +38,10 @@ export type Props<T extends ElementType> = Omit<
   OwnProps;
 
 export const Button = (
-  props: Props<typeof UnstyledButton> | Props<typeof UnstyledLink>,
+  props: Props<typeof UnstyledButton> | Props<typeof Link>,
 ) =>
   "href" in props ? (
-    <UnstyledLink {...buttonProps(props)} />
+    <Link {...buttonProps(props)} />
   ) : (
     <UnstyledButton {...buttonProps(props)} />
   );

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

@@ -10,8 +10,8 @@ import {
 import { OverlayTriggerStateContext } from "react-aria-components";
 
 import styles from "./index.module.scss";
-import { UnstyledButton } from "../UnstyledButton/index.js";
-import { UnstyledLink } from "../UnstyledLink/index.js";
+import { Button } from "../unstyled/Button/index.js";
+import { Link } from "../unstyled/Link/index.js";
 
 export const VARIANTS = ["primary", "secondary", "tertiary"] as const;
 
@@ -30,17 +30,14 @@ export type Props<T extends ElementType> = Omit<
   OwnProps;
 
 export const Card = (
-  props:
-    | Props<"div">
-    | Props<typeof UnstyledLink>
-    | Props<typeof UnstyledButton>,
+  props: Props<"div"> | Props<typeof Link> | Props<typeof Button>,
 ) => {
   const overlayState = use(OverlayTriggerStateContext);
 
   if (overlayState !== null || "onPress" in props) {
-    return <UnstyledButton {...cardProps(props)} />;
+    return <Button {...cardProps(props)} />;
   } else if ("href" in props) {
-    return <UnstyledLink {...cardProps(props)} />;
+    return <Link {...cardProps(props)} />;
   } else {
     return <div {...cardProps(props)} />;
   }

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

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import type { ComponentProps } from "react";
 
 import styles from "./index.module.scss";
-import { UnstyledLink } from "../UnstyledLink/index.js";
+import { Link as UnstyledLink } from "../unstyled/Link/index.js";
 
 type OwnProps = {
   invert?: boolean | undefined;

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { MainNavTabs as MainNavTabsComponent } from "./index.js";
-import { UnstyledTabs } from "../UnstyledTabs/index.js";
+import { Tabs } from "../unstyled/Tabs/index.js";
 
 const meta = {
   component: MainNavTabsComponent,
@@ -18,9 +18,9 @@ export default meta;
 export const MainNavTabs = {
   decorators: [
     (Story) => (
-      <UnstyledTabs>
+      <Tabs>
         <Story />
-      </UnstyledTabs>
+      </Tabs>
     ),
   ],
   args: {

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

@@ -6,24 +6,23 @@ import type { ComponentProps } from "react";
 
 import styles from "./index.module.scss";
 import buttonStyles from "../Button/index.module.scss";
-import { UnstyledTab, UnstyledTabList } from "../UnstyledTabs/index.js";
+import { Tab, TabList } from "../unstyled/Tabs/index.js";
 
 type OwnProps = {
   pathname?: string | undefined;
-  items: ComponentProps<typeof UnstyledTab>[];
+  items: ComponentProps<typeof Tab>[];
 };
-type Props = Omit<ComponentProps<typeof UnstyledTabList>, keyof OwnProps> &
-  OwnProps;
+type Props = Omit<ComponentProps<typeof TabList>, keyof OwnProps> & OwnProps;
 
 export const MainNavTabs = ({ className, pathname, ...props }: Props) => (
-  <UnstyledTabList
+  <TabList
     aria-label="Main Navigation"
     className={clsx(styles.mainNavTabs, className)}
     dependencies={[pathname]}
     {...props}
   >
     {({ className: tabClassName, children, ...tab }) => (
-      <UnstyledTab
+      <Tab
         className={clsx(styles.tab, buttonStyles.button, tabClassName)}
         data-size="sm"
         data-variant="ghost"
@@ -46,7 +45,7 @@ export const MainNavTabs = ({ className, pathname, ...props }: Props) => (
             </span>
           </>
         )}
-      </UnstyledTab>
+      </Tab>
     )}
-  </UnstyledTabList>
+  </TabList>
 );