From 6dee5b132f4e8f3d3cbdd4900a0e1758c507e972 Mon Sep 17 00:00:00 2001
From: Keith Stevens <fozziethebeat@gmail.com>
Date: Fri, 13 Jan 2023 10:26:57 +0900
Subject: [PATCH] Deleting a small set of components that aren't used within
 the project anymore

---
 website/src/components/Fields.tsx             | 30 ------------
 .../components/Header/NavLinks.stories.jsx    | 15 ------
 website/src/components/Header/NavLinks.tsx    | 49 -------------------
 website/src/components/Header/index.ts        |  1 -
 .../TaskSelection/TaskOption.test.tsx         | 34 -------------
 .../src/components/UI/ColorModeIconToggle.tsx | 23 ---------
 website/src/components/UI/ColorModeSwitch.tsx | 16 ------
 7 files changed, 168 deletions(-)
 delete mode 100644 website/src/components/Fields.tsx
 delete mode 100644 website/src/components/Header/NavLinks.stories.jsx
 delete mode 100644 website/src/components/Header/NavLinks.tsx
 delete mode 100644 website/src/components/TaskSelection/TaskOption.test.tsx
 delete mode 100644 website/src/components/UI/ColorModeIconToggle.tsx
 delete mode 100644 website/src/components/UI/ColorModeSwitch.tsx

diff --git a/website/src/components/Fields.tsx b/website/src/components/Fields.tsx
deleted file mode 100644
index 2233318e..00000000
--- a/website/src/components/Fields.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import clsx from "clsx";
-
-const formClasses =
-  "block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm";
-
-function Label({ id, children }) {
-  return (
-    <label htmlFor={id} className="mb-2 block text-sm font-semibold text-gray-900">
-      {children}
-    </label>
-  );
-}
-
-export function TextField({ id, label, type = "text", className, ...props }) {
-  return (
-    <div className={className}>
-      {label && <Label id={id}>{label}</Label>}
-      <input id={id} type={type} {...props} className={formClasses} />
-    </div>
-  );
-}
-
-export function SelectField({ id, label, className, ...props }) {
-  return (
-    <div className={className}>
-      {label && <Label id={id}>{label}</Label>}
-      <select id={id} {...props} className={clsx(formClasses, "pr-8")} />
-    </div>
-  );
-}
diff --git a/website/src/components/Header/NavLinks.stories.jsx b/website/src/components/Header/NavLinks.stories.jsx
deleted file mode 100644
index 9f21e151..00000000
--- a/website/src/components/Header/NavLinks.stories.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NavLinks } from "./NavLinks";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
-  title: "Header/NavLinks",
-  component: NavLinks,
-};
-
-const Template = (args) => (
-  <div className="hidden lg:flex lg:gap-10">
-    <NavLinks {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
diff --git a/website/src/components/Header/NavLinks.tsx b/website/src/components/Header/NavLinks.tsx
deleted file mode 100644
index 47bd90be..00000000
--- a/website/src/components/Header/NavLinks.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Text, useColorMode } from "@chakra-ui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import Link from "next/link";
-import { useState } from "react";
-import { colors } from "styles/Theme/colors";
-
-export function NavLinks(): JSX.Element {
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  const { colorMode } = useColorMode();
-
-  const linkColor = colorMode === "light" ? "text-gray-700 hover:text-gray-900" : "text-gray-50 hover:text-white";
-
-  const hoverBgColor = colorMode === "light" ? "bg-gray-100" : "bg-gray-800";
-
-  return (
-    <>
-      {[
-        ["FAQ", "/#faq"],
-        ["Join Us", "/#join-us"],
-      ].map(([label, href], index) => (
-        <Link
-          key={label}
-          href={href}
-          className={`${linkColor} relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm transition-colors delay-150 hover:delay-[0ms]`}
-          onMouseEnter={() => setHoveredIndex(index)}
-          onMouseLeave={() => setHoveredIndex(null)}
-        >
-          <AnimatePresence>
-            {hoveredIndex === index && (
-              <motion.span
-                className={`${hoverBgColor} absolute inset-0 rounded-lg`}
-                layoutId="hoverBackground"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1, transition: { duration: 0.15 } }}
-                exit={{
-                  opacity: 0,
-                  transition: { duration: 0.15, delay: 0.2 },
-                }}
-              />
-            )}
-          </AnimatePresence>
-          <Text color={colorMode === "light" ? colors.light.text : colors.dark.text} className="relative z-10">
-            {label}
-          </Text>
-        </Link>
-      ))}
-    </>
-  );
-}
diff --git a/website/src/components/Header/index.ts b/website/src/components/Header/index.ts
index 3d5a7125..0b23ba9e 100644
--- a/website/src/components/Header/index.ts
+++ b/website/src/components/Header/index.ts
@@ -1,3 +1,2 @@
 export { Header } from "./Header";
-export { NavLinks } from "./NavLinks";
 export { UserMenu } from "./UserMenu";
diff --git a/website/src/components/TaskSelection/TaskOption.test.tsx b/website/src/components/TaskSelection/TaskOption.test.tsx
deleted file mode 100644
index 75eb6070..00000000
--- a/website/src/components/TaskSelection/TaskOption.test.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { RouterContext } from "next/dist/shared/lib/router-context";
-import React from "react";
-import { createMockRouter } from "src/test-utils/createMockRouter";
-
-import { OptionProps, TaskOption } from "./TaskOption";
-
-describe("TaskOption component", () => {
-  const testProps: OptionProps = {
-    title: "Task Title",
-    alt: "Task Title",
-    img: "/imgPath",
-    link: "/fake/path",
-  };
-
-  it("should render", () => {
-    render(<TaskOption {...testProps} />);
-    expect(screen.getByRole("heading")).toHaveTextContent("Task Title");
-    expect(screen.getByRole("img")).toHaveAttribute("alt", "Task Title");
-    expect(screen.getByRole("link")).toHaveAttribute("href", "/fake/path");
-  });
-
-  it("should navigate properly on click", () => {
-    const router = createMockRouter({ pathname: "/fake/path" });
-    render(
-      <RouterContext.Provider value={router}>
-        <TaskOption {...testProps} />
-      </RouterContext.Provider>
-    );
-    expect(screen.getByRole("link")).toHaveAttribute("href", "/fake/path");
-    fireEvent.click(screen.getByRole("link"));
-    expect(router.push).toHaveBeenCalledWith("/fake/path", expect.anything(), expect.anything());
-  });
-});
diff --git a/website/src/components/UI/ColorModeIconToggle.tsx b/website/src/components/UI/ColorModeIconToggle.tsx
deleted file mode 100644
index 0b846e0b..00000000
--- a/website/src/components/UI/ColorModeIconToggle.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useColorMode } from "@chakra-ui/react";
-import { CiDark } from "react-icons/ci";
-import { CiLight } from "react-icons/ci";
-
-export function ColorModeIconToggle(props) {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const propsClassName = props.className ?? "";
-
-  return (
-    <button
-      type="button"
-      className={`flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5 ${propsClassName}`}
-      aria-label="Toggle dark mode"
-      onClick={toggleColorMode}
-    >
-      {colorMode === "light" ? (
-        <CiDark className="h-5 w-5 stroke-zinc-900" />
-      ) : (
-        <CiLight className="h-5 w-5 stroke-white" />
-      )}
-    </button>
-  );
-}
diff --git a/website/src/components/UI/ColorModeSwitch.tsx b/website/src/components/UI/ColorModeSwitch.tsx
deleted file mode 100644
index 05c9bde3..00000000
--- a/website/src/components/UI/ColorModeSwitch.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Switch, useColorMode } from "@chakra-ui/react";
-import React from "react";
-
-const ColorModeSwitch = () => {
-  const { colorMode, toggleColorMode } = useColorMode();
-  return (
-    <Switch
-      onChange={toggleColorMode}
-      defaultChecked={colorMode === "light"}
-      checked={colorMode === "light"}
-      size="lg"
-    />
-  );
-};
-
-export default ColorModeSwitch;