Automated PR: staging to main

package.json

@@ -62,6 +62,7 @@
     "@storybook/react": "^8.0.10",
     "commander": "^12.0.0",
     "contentstack": "^3.19.2",
+    "fuse.js": "^7.0.0",
     "lodash": "^4.17.21",
     "marked": "^12.0.2",
     "next": "14.2.3",

src/app/component/[component]/design-docs/client.tsx

@@ -1,13 +1,21 @@
 'use client';
 
+import { css } from '@emotion/css';
 import { ContentstackRichText } from '@/components/content-stack';
 import { CSNode } from '@/components/content-stack/types';
-import { ErrorBoundary } from 'next/dist/client/components/error-boundary';
 
 interface DesignDocsContentProps {
   content?: CSNode;
 }
 
 export const DesignDocsContent = ({ content }: DesignDocsContentProps) => {
-  return <ContentstackRichText content={content} />;
+  return (
+    <div
+      className={css`
+        max-width: 700px;
+      `}
+    >
+      <ContentstackRichText content={content} />
+    </div>
+  );
 };

src/app/component/[component]/design-docs/page.tsx

@@ -1,5 +1,3 @@
-import { css } from '@emotion/css';
-
 import { fetchComponent } from '@/utils/ContentStack/getContentstackResources';
 import { DesignDocsContent } from './client';
 
@@ -13,11 +11,7 @@ export default async function Page({
   });
 
   return (
-    <div
-      className={css`
-        max-width: 700px; // TODO: Make this responsive
-      `}
-    >
+    <div>
       <DesignDocsContent content={component?.designguidelines} />
     </div>
   );

src/app/component/[component]/layout.tsx

@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { css } from "@emotion/css";
-import { useRouter, usePathname } from "next/navigation";
-import React from "react";
+import { css } from '@emotion/css';
+import { useRouter, usePathname } from 'next/navigation';
+import React from 'react';
 
-import IconButton from "@leafygreen-ui/icon-button";
-import { CodeSandbox, Figma, Github } from "@/components/glyphs";
-import { useDarkMode } from "@leafygreen-ui/leafygreen-provider";
-import { Tabs, Tab } from "@leafygreen-ui/tabs";
-import { color, spacing } from "@leafygreen-ui/tokens";
-import { H2 } from "@leafygreen-ui/typography";
+import IconButton from '@leafygreen-ui/icon-button';
+import { CodeSandbox, Figma, Github } from '@/components/glyphs';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { Tabs, Tab } from '@leafygreen-ui/tabs';
+import { color, spacing } from '@leafygreen-ui/tokens';
+import { H2 } from '@leafygreen-ui/typography';
 
-import useComponentFields from "@/hooks/useComponentFields";
-import { getGithubLink } from "@/utils";
+import { useComponentFields } from '@/hooks';
+import { getGithubLink } from '@/utils';
 
-const liveExamplePath = "live-example";
-const designDocsPath = "design-docs";
-const codeDocsPath = "code-docs";
+const liveExamplePath = 'live-example';
+const designDocsPath = 'design-docs';
+const codeDocsPath = 'code-docs';
 
 export default function ComponentLayout({
   children,
@@ -25,13 +25,13 @@ export default function ComponentLayout({
 }) {
   const router = useRouter();
   const pathname = usePathname();
-  const currentComponent = pathname.split("/")[2];
+  const currentComponent = pathname.split('/')[2];
   const { theme } = useDarkMode();
 
   const component = useComponentFields({ componentName: currentComponent });
 
   const getSelected = () => {
-    const suffix = pathname.split("/")[3];
+    const suffix = pathname.split('/')[3];
     if (suffix === liveExamplePath) {
       return 0;
     }
@@ -61,7 +61,7 @@ export default function ComponentLayout({
       href: component?.codesandbox_url?.href,
       icon: <CodeSandbox />,
     },
-  ]
+  ];
 
   return (
     <div
@@ -75,7 +75,7 @@ export default function ComponentLayout({
           margin-bottom: ${spacing[600]}px;
         `}
       >
-        {currentComponent.split("-").join(" ")}
+        {currentComponent.split('-').join(' ')}
       </H2>
       <Tabs
         selected={getSelected()}
@@ -94,18 +94,20 @@ export default function ComponentLayout({
               height: 100%;
             `}
           >
-            {externalLinks.map(({ 'aria-label': ariaLabel, href, icon }, index) => (
-              <IconButton
-                key={ariaLabel + index}
-                aria-label={ariaLabel}
-                size="large"
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {icon}
-              </IconButton>
-            ))}
+            {externalLinks.map(
+              ({ 'aria-label': ariaLabel, href, icon }, index) => (
+                <IconButton
+                  key={ariaLabel + index}
+                  aria-label={ariaLabel}
+                  size="large"
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {icon}
+                </IconButton>
+              ),
+            )}
           </div>
         }
       >

src/app/layout.tsx

@@ -2,7 +2,7 @@
 
 import { css } from '@emotion/css';
 import { RootStyleRegistry } from '@/components/global';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '@/hooks';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';

src/app/private/page.tsx

@@ -1,34 +1,27 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import Button from "@leafygreen-ui/button";
-import { BasicEmptyState } from "@leafygreen-ui/empty-state";
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Button from '@leafygreen-ui/button';
+import { BasicEmptyState } from '@leafygreen-ui/empty-state';
 // @ts-expect-error
-import ArrowLeftIcon from "@leafygreen-ui/icon/dist/ArrowLeft";
+import ArrowLeftIcon from '@leafygreen-ui/icon/dist/ArrowLeft';
 // @ts-expect-error
-import LogInIcon from "@leafygreen-ui/icon/dist/LogIn";
-import { getSession, login, Session } from "@/auth";
-import { ComingSoon, Security } from "@/components/glyphs";
+import LogInIcon from '@leafygreen-ui/icon/dist/LogIn';
+import { getSession, login, Session } from '@/auth';
+import { ComingSoon, Security } from '@/components/glyphs';
+import { useSession } from '@/hooks';
 
 export default function Private() {
   const router = useRouter();
-  const [session, setSession] = useState<Session | undefined>();
-
-  useEffect(() => {
-    getSession().then((response) => {
-      if (response !== null) {
-        setSession(response);
-      }
-    });
-  }, []);
+  const session = useSession();
 
   return session?.user ? (
     <BasicEmptyState
       title="Coming Soon"
       description="Check back for updates soon"
       primaryButton={
-        <Button leftGlyph={<ArrowLeftIcon />} onClick={() => router.push("/")}>
+        <Button leftGlyph={<ArrowLeftIcon />} onClick={() => router.push('/')}>
           Return to home
         </Button>
       }

src/app/template.tsx

@@ -10,8 +10,9 @@ import {
   Footer,
   UserMenu,
   SideNavigation,
+  Search,
 } from '@/components/global';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useMediaQuery } from '@/hooks';
 import { SIDE_NAV_WIDTH } from '@/constants';
 import { ContentStackContextProvider } from '@/contexts/ContentStackContext';
 import { ComponentFields, ContentPageGroup } from '@/utils/ContentStack/types';
@@ -54,7 +55,6 @@ export default function Template({ children }: { children: React.ReactNode }) {
   return (
     <div
       className={css`
-        position: relative;
         min-height: 100vh;
         height: 100%;
         width: 100%;
@@ -78,8 +78,8 @@ export default function Template({ children }: { children: React.ReactNode }) {
           right: 0;
         `}
       >
-        <DarkModeToggle />
         <UserMenu />
+        <DarkModeToggle />
       </div>
 
       <div

src/components/global/Search.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Link from 'next/link';
+import { css } from '@emotion/css';
+import Fuse, { IFuseOptions } from 'fuse.js';
+import debounce from 'lodash/debounce';
+// @ts-expect-error
+import LockIcon from '@leafygreen-ui/icon/dist/Lock';
+import { SearchInput, SearchResult } from '@leafygreen-ui/search-input';
+import { spacing } from '@leafygreen-ui/tokens';
+import { useSession } from '@/hooks';
+import { components } from '@/utils/components';
+
+const fuseOptions = {
+  includeScore: true,
+  keys: ['name', 'subComponents', 'group'],
+};
+
+const useFuseSearch = (data: any[], options: IFuseOptions<any>) => {
+  const fuse = new Fuse(data, options);
+  return (term: string) =>
+    term ? fuse.search(term).map(result => result.item) : data;
+};
+
+export function Search() {
+  const session = useSession();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [results, setResults] = useState(components);
+
+  const search = useFuseSearch(components, fuseOptions);
+
+  const debouncedSearch = debounce((term: string) => {
+    setResults(search(term));
+  }, 300);
+
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const term = e.target.value;
+      setSearchTerm(term);
+
+      debouncedSearch(term);
+    },
+    [debouncedSearch],
+  );
+
+  useEffect(() => {
+    if (!searchTerm) {
+      setResults(components);
+    }
+  }, [searchTerm]);
+
+  return (
+    <SearchInput
+      aria-label="Search Components"
+      size="small"
+      value={searchTerm}
+      onChange={handleSearchChange}
+      className={css`
+        margin: ${spacing[400]}px ${spacing[600]}px;
+      `}
+    >
+      {results.map(item => (
+        <SearchResult
+          key={item.name}
+          description={
+            <div
+              className={css`
+                text-transform: capitalize;
+              `}
+            >
+              {item.group.split('-').join(' ')}
+            </div>
+          }
+          href={item.navPath ?? '/'}
+          // @ts-expect-error Polymorphic
+          as={Link}
+        >
+          <div
+            className={css`
+              display: flex;
+              align-items: center;
+
+              gap: ${spacing[200]}px;
+            `}
+          >
+            {item.name}
+            {item.isPrivate && !session?.user && <LockIcon size="small" />}
+          </div>
+        </SearchResult>
+      ))}
+    </SearchInput>
+  );
+}