Merge pull request #3004 from pyth-network/feat/search-button-component

feat: search button component

Author: alexcambose

apps/developer-hub/src/components/search-button.tsx

@@ -1,26 +1,24 @@
 "use client";
 
-import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
-import { Button } from "@pythnetwork/component-library/Button";
+import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton";
 import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 export const SearchButton = () => {
   const [open, setOpen] = useState(false);
 
+  const handleSearch = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
     <>
-      <Button
-        onClick={() => {
-          setOpen(true);
-        }}
-        variant="outline"
+      <SearchButtonComponent
         size="sm"
-        rounded
-        beforeIcon={<MagnifyingGlass size={16} />}
-      >
-        Search
-      </Button>
+        smallScreenContent="Search"
+        largeScreenContent="Search"
+        onClick={handleSearch}
+      />
       <DefaultSearchDialog
         open={open}
         onOpenChange={setOpen}

apps/insights/src/cache.ts

@@ -12,7 +12,6 @@ const transformer = {
 // export const DEFAULT_CACHE_TTL = 3600; // 1 hour
 // export const DEFAULT_CACHE_STALE = 86_400; // 24 hours
 
-
 export const DEFAULT_CACHE_TTL = 60; // 1 minute
 export const DEFAULT_CACHE_STALE = 60; // 1 minute
 

apps/insights/src/components/Root/search-button.module.scss

@@ -1,21 +1,5 @@
 @use "@pythnetwork/component-library/theme";
 
-.searchButton {
-  .largeScreenSearchButton {
-    display: none;
-
-    @include theme.breakpoint("md") {
-      display: inline-flex;
-    }
-  }
-
-  .smallScreenSearchButton {
-    @include theme.breakpoint("md") {
-      display: none;
-    }
-  }
-}
-
 .searchDialogContents {
   gap: theme.spacing(1);
   display: flex;

apps/insights/src/components/Root/search-button.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
 import { XCircle } from "@phosphor-icons/react/dist/ssr/XCircle";
 import { Badge } from "@pythnetwork/component-library/Badge";
 import type { Props as ButtonProps } from "@pythnetwork/component-library/Button";
 import { Button } from "@pythnetwork/component-library/Button";
 import { NoResults } from "@pythnetwork/component-library/NoResults";
+import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup";
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import {
-  Virtualizer,
   ListLayout,
+  Virtualizer,
 } from "@pythnetwork/component-library/Virtualizer";
 import type { Button as UnstyledButton } from "@pythnetwork/component-library/unstyled/Button";
 import {
@@ -21,15 +21,15 @@ import {
 import { useDrawer } from "@pythnetwork/component-library/useDrawer";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
 import type { ReactNode } from "react";
-import { useMemo, useCallback, useEffect, useState } from "react";
-import { useIsSSR, useCollator, useFilter } from "react-aria";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCollator, useFilter, useIsSSR } from "react-aria";
 
-import styles from "./search-button.module.scss";
 import { Cluster, ClusterToName } from "../../services/pyth";
 import { AssetClassBadge } from "../AssetClassBadge";
 import { PriceFeedTag } from "../PriceFeedTag";
 import { PublisherTag } from "../PublisherTag";
 import { Score } from "../Score";
+import styles from "./search-button.module.scss";
 
 const INPUTS = new Set(["input", "select", "button", "textarea"]);
 
@@ -73,29 +73,12 @@ const ResolvedSearchButton = (props: ResolvedSearchButtonProps) => {
 const SearchButtonImpl = (
   props: Omit<ButtonProps<typeof UnstyledButton>, "children">,
 ) => (
-  <div className={styles.searchButton}>
-    <Button
-      className={styles.largeScreenSearchButton ?? ""}
-      variant="outline"
-      beforeIcon={<MagnifyingGlass />}
-      size="sm"
-      rounded
-      {...props}
-    >
-      <SearchShortcutText />
-    </Button>
-    <Button
-      className={styles.smallScreenSearchButton ?? ""}
-      hideText
-      variant="ghost"
-      beforeIcon={<MagnifyingGlass />}
-      size="sm"
-      rounded
-      {...props}
-    >
-      Search
-    </Button>
-  </div>
+  <SearchButtonComponent
+    size="sm"
+    {...props}
+    smallScreenContent={<SearchShortcutText />}
+    largeScreenContent={<SearchShortcutText />}
+  />
 );
 
 const useSearchDrawer = ({ feeds, publishers }: ResolvedSearchButtonProps) => {

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

@@ -0,0 +1,17 @@
+@use "../theme";
+
+.searchButton {
+  .largeScreenSearchButton {
+    display: none;
+
+    @include theme.breakpoint("md") {
+      display: inline-flex;
+    }
+  }
+
+  .smallScreenSearchButton {
+    @include theme.breakpoint("md") {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import * as icons from "@phosphor-icons/react/dist/ssr";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SearchButton as SearchButtonComponent } from "./index.jsx";
+import { SIZES } from "../Button/index.jsx";
+
+const iconControl = {
+  control: "select",
+  options: Object.keys(icons),
+  mapping: Object.fromEntries(
+    Object.entries(icons).map(([iconName, Icon]) => [
+      iconName,
+      <Icon key={iconName} weights={new Map()} />,
+    ]),
+  ),
+} as const;
+
+const meta = {
+  component: SearchButtonComponent,
+  argTypes: {
+    size: {
+      control: "inline-radio",
+      options: SIZES,
+      table: {
+        category: "Variant",
+      },
+    },
+    beforeIcon: {
+      ...iconControl,
+      table: {
+        category: "Contents",
+      },
+    },
+  },
+} satisfies Meta<typeof SearchButtonComponent>;
+export default meta;
+
+export const SearchButton = {
+  args: {
+    largeScreenContent: "Search",
+    smallScreenContent: "Search",
+    size: "sm",
+  },
+} satisfies StoryObj<typeof SearchButtonComponent>;

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { Button as BaseButton } from "react-aria-components";
+
+import type { Props as ButtonProps } from "../Button";
+import { Button } from "../Button";
+import styles from "./index.module.scss";
+
+type OwnProps = {
+  largeScreenContent?: ReactNode;
+  smallScreenContent?: ReactNode;
+};
+
+type Props = Pick<
+  ButtonProps<typeof BaseButton>,
+  "beforeIcon" | "size" | "onClick" | "className" | "isPending"
+> &
+  OwnProps;
+
+export const SearchButton = ({
+  beforeIcon,
+  largeScreenContent,
+  smallScreenContent,
+  ...props
+}: Props) => {
+  return (
+    <div className={styles.searchButton}>
+      <Button
+        className={clsx(styles.largeScreenSearchButton, props.className)}
+        variant="outline"
+        beforeIcon={beforeIcon ?? <MagnifyingGlass />}
+        size="sm"
+        rounded
+        {...props}
+      >
+        {largeScreenContent}
+      </Button>
+      <Button
+        className={clsx(styles.smallScreenSearchButton, props.className)}
+        hideText
+        variant="ghost"
+        beforeIcon={beforeIcon ?? <MagnifyingGlass />}
+        size="sm"
+        rounded
+        {...props}
+      >
+        {smallScreenContent}
+      </Button>
+    </div>
+  );
+};