feat: Dashboards search

apps/builder/app/dashboard/dashboard.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryFn } from "@storybook/react";
 import type { JSX } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { Dashboard } from "./dashboard";
+import { createMemoryRouter, RouterProvider } from "react-router-dom";
+import { Dashboard, DashboardSetup } from "./dashboard";
 import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import type { DashboardProject } from "@webstudio-is/dashboard";
 
@@ -20,14 +20,10 @@ const user = {
   provider: "github",
 };
 
-const createRouter = (element: JSX.Element) =>
-  createBrowserRouter([
-    {
-      path: "*",
-      element,
-      loader: () => null,
-    },
-  ]);
+const createRouter = (element: JSX.Element, path: string, current?: string) =>
+  createMemoryRouter([{ path, element }], {
+    initialEntries: [current ?? path],
+  });
 
 const userPlanFeatures: UserPlanFeatures = {
   hasProPlan: false,
@@ -38,60 +34,85 @@ const userPlanFeatures: UserPlanFeatures = {
   maxDomainsAllowedPerUser: 1,
 };
 
-export const WithProjects: StoryFn<typeof Dashboard> = () => {
-  const projects = [
-    {
-      id: "0",
-      createdAt: new Date().toString(),
-      title: "My Project",
-      domain: "domain.com",
-      userId: "",
-      isDeleted: false,
-      isPublished: false,
-      latestBuild: null,
-      previewImageAsset: null,
-      previewImageAssetId: "",
-      latestBuildVirtual: null,
-      marketplaceApprovalStatus: "UNLISTED" as const,
-    } as DashboardProject,
-  ];
+const projects = [
+  {
+    id: "0",
+    createdAt: new Date().toString(),
+    title: "My Project",
+    domain: "domain.com",
+    userId: "",
+    isDeleted: false,
+    isPublished: false,
+    latestBuild: null,
+    previewImageAsset: null,
+    previewImageAssetId: "",
+    latestBuildVirtual: null,
+    marketplaceApprovalStatus: "UNLISTED" as const,
+  } as DashboardProject,
+];
+
+const data = {
+  user,
+  templates: projects,
+  userPlanFeatures,
+  publisherHost: "https://wstd.work",
+  projects,
+};
+
+export const Welcome: StoryFn<typeof Dashboard> = () => {
+  const router = createRouter(
+    <>
+      <DashboardSetup data={{ ...data, projects: [] }} />
+      <Dashboard />
+    </>,
+    "/dashboard/templates"
+  );
+  return <RouterProvider router={router} />;
+};
+
+export const Projects: StoryFn<typeof Dashboard> = () => {
   const router = createRouter(
-    <Dashboard
-      user={user}
-      welcome={false}
-      projects={projects}
-      userPlanFeatures={userPlanFeatures}
-      publisherHost={"https://wstd.work"}
-    />
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard"
   );
   return <RouterProvider router={router} />;
 };
 
-export const WithTemplates: StoryFn<typeof Dashboard> = () => {
-  const templates = [
-    {
-      id: "0",
-      createdAt: new Date().toString(),
-      title: "My Project",
-      domain: "domain.com",
-      userId: "",
-      isDeleted: false,
-      isPublished: false,
-      latestBuild: null,
-      previewImageAsset: null,
-      previewImageAssetId: "",
-      latestBuildVirtual: null,
-      marketplaceApprovalStatus: "UNLISTED" as const,
-    } as DashboardProject,
-  ];
+export const Templates: StoryFn<typeof Dashboard> = () => {
+  const router = createRouter(
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard/templates"
+  );
+  return <RouterProvider router={router} />;
+};
+
+export const Search: StoryFn<typeof Dashboard> = () => {
+  const router = createRouter(
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard/search",
+    "/dashboard/search?q=my"
+  );
+
+  return <RouterProvider router={router} />;
+};
+
+export const SearchNothingFound: StoryFn<typeof Dashboard> = () => {
   const router = createRouter(
-    <Dashboard
-      user={user}
-      templates={templates}
-      welcome
-      userPlanFeatures={userPlanFeatures}
-      publisherHost={"https://wstd.work"}
-    />
+    <>
+      <DashboardSetup data={data} />
+      <Dashboard />
+    </>,
+    "/dashboard/search",
+    "/dashboard/search?q=notfound"
   );
   return <RouterProvider router={router} />;
 };

apps/builder/app/dashboard/dashboard.tsx

@@ -10,19 +10,21 @@ import {
   globalCss,
   theme,
 } from "@webstudio-is/design-system";
-import type { DashboardProject } from "@webstudio-is/dashboard";
 import { BodyIcon, ExtensionIcon } from "@webstudio-is/icons";
-import type { User } from "~/shared/db/user.server";
-import type { UserPlanFeatures } from "~/shared/db/user-plan-features.server";
 import { NavLink, useLocation, useRevalidator } from "@remix-run/react";
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
 import { CloneProjectDialog } from "~/shared/clone-project";
-import { dashboardPath, templatesPath } from "~/shared/router-utils";
+import { dashboardPath } from "~/shared/router-utils";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { ProfileMenu } from "./profile-menu";
 import { Projects } from "./projects/projects";
 import { Templates } from "./templates/templates";
 import { Header } from "./shared/layout";
 import { help } from "~/shared/help";
+import { SearchResults } from "./search/search-results";
+import type { DashboardData } from "./shared/types";
+import { Search } from "./search/search-field";
 
 const globalStyles = globalCss({
   body: {
@@ -33,7 +35,7 @@ const globalStyles = globalCss({
 const CloneProject = ({
   projectToClone,
 }: {
-  projectToClone: DashboardProps["projectToClone"];
+  projectToClone: DashboardData["projectToClone"];
 }) => {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(projectToClone !== undefined);
@@ -51,20 +53,22 @@ const CloneProject = ({
     window.history.replaceState(currentState, "", location.pathname);
   }, [location.search, location.pathname]);
 
-  return projectToClone !== undefined ? (
-    <CloneProjectDialog
-      isOpen={isOpen}
-      onOpenChange={setIsOpen}
-      project={{
-        id: projectToClone.id,
-        title: projectToClone.title,
-      }}
-      authToken={projectToClone.authToken}
-      onCreate={() => {
-        revalidate();
-      }}
-    />
-  ) : undefined;
+  if (projectToClone !== undefined) {
+    return (
+      <CloneProjectDialog
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        project={{
+          id: projectToClone.id,
+          title: projectToClone.title,
+        }}
+        authToken={projectToClone.authToken}
+        onCreate={() => {
+          revalidate();
+        }}
+      />
+    );
+  }
 };
 
 const sidebarLinkStyle = css({
@@ -99,7 +103,7 @@ const NavigationItems = ({
     <List style={{ padding: 0, margin: 0 }}>
       {items.map((item, index) => {
         return (
-          <ListItem asChild index={index}>
+          <ListItem asChild index={index} key={index}>
             <NavLink
               to={item.to}
               end
@@ -118,30 +122,42 @@ const NavigationItems = ({
   );
 };
 
-type DashboardProps = {
-  user: User;
-  projects?: Array<DashboardProject>;
-  templates?: Array<DashboardProject>;
-  welcome: boolean;
-  userPlanFeatures: UserPlanFeatures;
-  publisherHost: string;
-  projectToClone?: {
-    authToken: string;
-    id: string;
-    title: string;
-  };
-};
+const $data = atom<DashboardData | undefined>();
 
-export const Dashboard = ({
-  user,
-  projects,
-  templates,
-  welcome,
-  userPlanFeatures,
-  publisherHost,
-  projectToClone,
-}: DashboardProps) => {
+export const DashboardSetup = ({ data }: { data: DashboardData }) => {
+  $data.set(data);
   globalStyles();
+  return undefined;
+};
+
+const getView = (pathname: string) => {
+  if (pathname === dashboardPath("templates")) {
+    return "templates";
+  }
+  if (pathname === dashboardPath("search")) {
+    return "search";
+  }
+  return "projects";
+};
+
+export const Dashboard = () => {
+  const data = useStore($data);
+  const location = useLocation();
+
+  if (data === undefined) {
+    return;
+  }
+
+  const {
+    user,
+    userPlanFeatures,
+    publisherHost,
+    projectToClone,
+    projects,
+    templates,
+  } = data;
+  const view = getView(location.pathname);
+  const welcome = view === "templates" && projects.length === 0;
 
   return (
     <TooltipProvider>
@@ -160,26 +176,36 @@ export const Dashboard = ({
           <Header variant="aside">
             <ProfileMenu user={user} userPlanFeatures={userPlanFeatures} />
           </Header>
+          <Flex
+            direction="column"
+            gap="3"
+            css={{
+              paddingInline: theme.spacing[7],
+              paddingBottom: theme.spacing[7],
+            }}
+          >
+            <Search />
+          </Flex>
           <nav>
             <CollapsibleSection label="Workspace" fullWidth>
               <NavigationItems
                 items={
                   welcome
                     ? [
                         {
-                          to: templatesPath(),
+                          to: dashboardPath("templates"),
                           prefix: <ExtensionIcon />,
                           children: "Welcome",
                         },
                       ]
                     : [
                         {
-                          to: dashboardPath(),
+                          to: dashboardPath("projects"),
                           prefix: <BodyIcon />,
                           children: "Projects",
                         },
                         {
-                          to: templatesPath(),
+                          to: dashboardPath("templates"),
                           prefix: <ExtensionIcon />,
                           children: "Starter templates",
                         },
@@ -199,14 +225,17 @@ export const Dashboard = ({
             </CollapsibleSection>
           </nav>
         </Flex>
-        {projects && (
+        {view === "projects" && (
           <Projects
             projects={projects}
             hasProPlan={userPlanFeatures.hasProPlan}
             publisherHost={publisherHost}
           />
         )}
-        {templates && <Templates templates={templates} welcome={welcome} />}
+        {view === "templates" && (
+          <Templates projects={templates} welcome={welcome} />
+        )}
+        {view === "search" && <SearchResults {...data} />}
       </Flex>
       <CloneProject projectToClone={projectToClone} />
       <Toaster />