From 8186eda633542d729da867ca5253dfb0477bafeb Mon Sep 17 00:00:00 2001
From: Pedro Pupo Sa da Costa <pedro.pupo@ist.utl.pt>
Date: Sat, 20 Jan 2024 11:32:52 +0000
Subject: [PATCH] refactor: add stories and change names for consistency

---
 .../src/cta-search/cta-search.stories.tsx     | 14 ----
 .../src/cta-search/cta-search.test.tsx        | 30 -------
 .../components/src/cta-search/cta-search.tsx  | 82 -------------------
 libs/react/components/src/cta-search/index.ts |  2 -
 libs/react/components/src/index.ts            | 16 ++--
 .../src/search-filters/search-filters.tsx     |  2 +-
 .../learning-objectives-search.tsx            |  4 +-
 .../overview-module/overview-module.tsx       |  4 +-
 .../question-search/question-search.tsx       |  4 +-
 9 files changed, 15 insertions(+), 143 deletions(-)
 delete mode 100644 libs/react/components/src/cta-search/cta-search.stories.tsx
 delete mode 100644 libs/react/components/src/cta-search/cta-search.test.tsx
 delete mode 100644 libs/react/components/src/cta-search/cta-search.tsx
 delete mode 100644 libs/react/components/src/cta-search/index.ts

diff --git a/libs/react/components/src/cta-search/cta-search.stories.tsx b/libs/react/components/src/cta-search/cta-search.stories.tsx
deleted file mode 100644
index 6243e3205..000000000
--- a/libs/react/components/src/cta-search/cta-search.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CtaSearch } from "./cta-search";
-import type { Meta, StoryObj } from "@storybook/react";
-
-type Story = StoryObj<typeof CtaSearch>;
-
-export const Playground: Story = {};
-
-const meta: Meta<typeof CtaSearch> = {
-  title: "Components/CtaSearch",
-  component: CtaSearch,
-  tags: ["autodocs"],
-};
-
-export default meta;
diff --git a/libs/react/components/src/cta-search/cta-search.test.tsx b/libs/react/components/src/cta-search/cta-search.test.tsx
deleted file mode 100644
index c4e0da3cb..000000000
--- a/libs/react/components/src/cta-search/cta-search.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import { default as userEvent } from "@testing-library/user-event";
-import { CtaSearch } from "./cta-search";
-
-describe("CtaSearch", () => {
-  it("debounces fast typing", async () => {
-    const onChange = vi.fn();
-    render(<CtaSearch onChange={onChange} value={""} />);
-    const input = screen.getByRole("search");
-    await userEvent.type(input, "123", { delay: 50 });
-
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledWith("123");
-    });
-  });
-
-  it("does not debounce slow typing", async () => {
-    const onChange = vi.fn();
-    render(<CtaSearch onChange={onChange} value={""} />);
-    const input = screen.getByRole("search");
-    await userEvent.type(input, "123", { delay: 300 });
-
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledTimes(3);
-      expect(onChange).toHaveBeenCalledWith("1");
-      expect(onChange).toHaveBeenCalledWith("12");
-      expect(onChange).toHaveBeenCalledWith("123");
-    });
-  });
-});
diff --git a/libs/react/components/src/cta-search/cta-search.tsx b/libs/react/components/src/cta-search/cta-search.tsx
deleted file mode 100644
index 5c60924f9..000000000
--- a/libs/react/components/src/cta-search/cta-search.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { forwardRef, useEffect, useState } from "react";
-import { default as SearchIcon } from "@mui/icons-material/Search";
-import { CircularProgress, Input } from "@mui/joy";
-import type { InputProps } from "@mui/joy";
-
-export type CtaSearchProps = {
-  value: string;
-  onChange: (value: string) => void;
-  loading?: boolean;
-  disableLabel?: boolean;
-} & Omit<InputProps, "value" | "onChange" | "startDecorator">;
-
-/**
- * A search box to interact with our search API.
- *
- * It uses a debounce to avoid sending too many requests to the API, and displays
- * a fake loading spinner as soon as the user starts typing.
- */
-export const CtaSearch = forwardRef<HTMLInputElement, CtaSearchProps>(
-  (
-    {
-      value,
-      onChange,
-      loading,
-      sx,
-      disableLabel,
-      type = "search",
-      role = "search",
-      size = "lg",
-      ...props
-    },
-    ref,
-  ) => {
-    const [search, setSearch] = useState<string>(value);
-    const [isDebouncing, setIsDebouncing] = useState(false);
-
-    useEffect(
-      function callbackWitDebounce() {
-        if (search === value) return;
-        const timer = setTimeout(() => {
-          onChange(search);
-        }, 200);
-        return () => {
-          clearTimeout(timer);
-        };
-      },
-      [value, search, onChange],
-    );
-
-    useEffect(
-      function cancelLoadStateWhenInSync() {
-        if (value === search) {
-          setIsDebouncing(false);
-        }
-      },
-      [value, search],
-    );
-
-    const isLoading = isDebouncing || loading;
-
-    return (
-      <Input
-        {...props}
-        ref={ref}
-        type={type}
-        role={role}
-        size={size}
-        value={search}
-        sx={sx}
-        onChange={(e) => {
-          setIsDebouncing(true);
-          setSearch(e.target.value);
-        }}
-        startDecorator={
-          isLoading ? <CircularProgress size="sm" /> : <SearchIcon />
-        }
-      />
-    );
-  },
-);
-
-CtaSearch.displayName = "CtaSearch";
diff --git a/libs/react/components/src/cta-search/index.ts b/libs/react/components/src/cta-search/index.ts
deleted file mode 100644
index 276332782..000000000
--- a/libs/react/components/src/cta-search/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CtaSearch } from "./cta-search";
-export type { CtaSearchProps } from "./cta-search";
diff --git a/libs/react/components/src/index.ts b/libs/react/components/src/index.ts
index 4d666bc2a..896f937d8 100644
--- a/libs/react/components/src/index.ts
+++ b/libs/react/components/src/index.ts
@@ -4,32 +4,32 @@ import "@chair-flight/base/types";
 export * from "./app-buttons";
 export * from "./app-head";
 export * from "./app-logo";
+export * from "./background-faded-image";
+export * from "./background-sliding-images";
 export * from "./blog-post-chip";
 export * from "./container-wrapper";
-export * from "./background-sliding-images";
-export * from "./background-faded-image";
 export * from "./count-up";
-export * from "./cta-search";
 export * from "./flashcard";
 export * from "./flashcard-tinder";
 export * from "./hook-form";
+export * from "./hooks/use-disclose";
 export * from "./hooks/use-media-query";
 export * from "./hooks/use-window-resize";
-export * from "./hooks/use-disclose";
-export * from "./module-selection-button";
 export * from "./image-viewer/image-viewer";
 export * from "./input-slider";
 export * from "./markdown-client";
+export * from "./module-selection-button";
 export * from "./nested-checkbox-select";
+export * from "./question-list";
 export * from "./question-multiple-choice";
+export * from "./question-navigation";
 export * from "./question-variant-preview";
-export * from "./question-list";
+export * from "./search-filters";
+export * from "./search-query";
 export * from "./sidebar";
 export * from "./test-preview";
-export * from "./question-navigation";
 export * from "./test-question-result";
 export * from "./theme";
 export * from "./toaster";
 export * from "./typical";
 export * from "./ups";
-export * from "./search-filters";
diff --git a/libs/react/components/src/search-filters/search-filters.tsx b/libs/react/components/src/search-filters/search-filters.tsx
index 81cb99a10..0a109f49e 100644
--- a/libs/react/components/src/search-filters/search-filters.tsx
+++ b/libs/react/components/src/search-filters/search-filters.tsx
@@ -26,7 +26,7 @@ export type SearchFiltersProps = {
  * Opinionated component to display search filters. Includes a `NoSsr`boundary
  * to make it safe to render when filter information is persisted client side.
  *
- * provided `fallback`should closely mirror `filters`.
+ * Provided `fallback`should closely mirror `filters`.
  */
 export const SearchFilters: FC<SearchFiltersProps> = ({
   filters: filters,
diff --git a/libs/react/containers/src/learning-objectives/learning-objectives-search/learning-objectives-search.tsx b/libs/react/containers/src/learning-objectives/learning-objectives-search/learning-objectives-search.tsx
index f3566cd8c..53baae16c 100644
--- a/libs/react/containers/src/learning-objectives/learning-objectives-search/learning-objectives-search.tsx
+++ b/libs/react/containers/src/learning-objectives/learning-objectives-search/learning-objectives-search.tsx
@@ -21,7 +21,7 @@ import {
 } from "@mui/joy";
 import { CourseNames } from "@chair-flight/core/app";
 import {
-  CtaSearch,
+  SearchQuery,
   HookFormSelect,
   MarkdownClientCompressed,
   SearchFilters,
@@ -105,7 +105,7 @@ export const LearningObjectivesSearch = container<Props, Params, Data>(
             [`& .${selectClasses.root}`]: { width: "13em" },
           }}
         >
-          <CtaSearch
+          <SearchQuery
             size="sm"
             value={search}
             loading={isLoading}
diff --git a/libs/react/containers/src/overviews/overview-module/overview-module.tsx b/libs/react/containers/src/overviews/overview-module/overview-module.tsx
index 23419130f..e0d3eb2d2 100644
--- a/libs/react/containers/src/overviews/overview-module/overview-module.tsx
+++ b/libs/react/containers/src/overviews/overview-module/overview-module.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Button, Divider, Grid, Typography } from "@mui/joy";
-import { CtaSearch } from "@chair-flight/react/components";
+import { SearchQuery } from "@chair-flight/react/components";
 import { trpc } from "@chair-flight/trpc/client";
 import { LayoutModule } from "../../layouts/layout-module";
 import { container, getRequiredParam } from "../../wraper";
@@ -45,7 +45,7 @@ export const OverviewModule = container<Props, Params, Data>(
           <Grid xs={12} md={6}>
             <Typography level="h2">Search Questions</Typography>
             <Divider sx={{ mb: 2 }} />
-            <CtaSearch
+            <SearchQuery
               disableLabel
               value={searchQuestion}
               onChange={(v) => setQuestionSearch(v)}
diff --git a/libs/react/containers/src/questions/question-search/question-search.tsx b/libs/react/containers/src/questions/question-search/question-search.tsx
index 7279c8b1f..46ce105b0 100644
--- a/libs/react/containers/src/questions/question-search/question-search.tsx
+++ b/libs/react/containers/src/questions/question-search/question-search.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { FormProvider } from "react-hook-form";
 import { Select, Stack, Option, selectClasses } from "@mui/joy";
 import {
-  CtaSearch,
+  SearchQuery,
   HookFormSelect,
   QuestionList,
   SearchFilters,
@@ -65,7 +65,7 @@ export const QuestionSearch = container<Props, Params, Data>(
             },
           }}
         >
-          <CtaSearch
+          <SearchQuery
             size="sm"
             value={search}
             loading={isLoading}