From 2295f24622359872192dca382954781806c17f05 Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Tue, 13 Dec 2022 15:11:45 +0100
Subject: [PATCH 01/10] Use URL params as single source of truth

---
 .../issues/components/filters/filters.tsx     | 44 ++----------------
 features/issues/context/filters-context.tsx   | 46 -------------------
 features/issues/context/index.ts              |  1 -
 features/issues/hooks/use-filters.ts          | 21 +++++++--
 features/issues/index.ts                      |  1 -
 features/ui/page-container/page-container.tsx | 33 ++++++-------
 pages/dashboard/issues.tsx                    | 15 +++---
 7 files changed, 43 insertions(+), 118 deletions(-)
 delete mode 100644 features/issues/context/filters-context.tsx
 delete mode 100644 features/issues/context/index.ts

diff --git a/features/issues/components/filters/filters.tsx b/features/issues/components/filters/filters.tsx
index 5b92d0d..4410de5 100644
--- a/features/issues/components/filters/filters.tsx
+++ b/features/issues/components/filters/filters.tsx
@@ -1,11 +1,4 @@
-import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useContext,
-} from "react";
-import { useRouter } from "next/router";
+import React, { useState, useCallback, useContext } from "react";
 import { useWindowSize } from "react-use";
 import { Select, Option, Input, NavigationContext } from "@features/ui";
 import { useFilters } from "../../hooks/use-filters";
@@ -16,15 +9,14 @@ import * as S from "./filters.styled";
 export function Filters() {
   const { handleFilters, filters } = useFilters();
   const { data: projects } = useProjects();
-  const router = useRouter();
-  const routerQueryProjectName =
-    (router.query.projectName as string)?.toLowerCase() || undefined;
+
   const [inputValue, setInputValue] = useState<string>("");
   const projectNames = projects?.map((project) => project.name.toLowerCase());
-  const isFirst = useRef(true);
+
   const { width } = useWindowSize();
   const isMobileScreen = width <= 1023;
   const { isMobileMenuOpen } = useContext(NavigationContext);
+
   const handleChange = (input: string) => {
     setInputValue(input);
 
@@ -65,34 +57,6 @@ export function Filters() {
     [handleFilters]
   );
 
-  useEffect(() => {
-    const newObj: { [key: string]: string } = {
-      ...filters,
-    };
-
-    Object.keys(newObj).forEach((key) => {
-      if (newObj[key] === undefined) {
-        delete newObj[key];
-      }
-    });
-
-    const url = {
-      pathname: router.pathname,
-      query: {
-        page: router.query.page || 1,
-        ...newObj,
-      },
-    };
-
-    if (routerQueryProjectName && isFirst) {
-      handleProjectName(routerQueryProjectName);
-      setInputValue(routerQueryProjectName || "");
-      isFirst.current = false;
-    }
-
-    router.push(url, undefined, { shallow: false });
-  }, [filters.level, filters.status, filters.project, router.query.page]);
-
   return (
     <S.Container>
       <Select
diff --git a/features/issues/context/filters-context.tsx b/features/issues/context/filters-context.tsx
deleted file mode 100644
index a7472ee..0000000
--- a/features/issues/context/filters-context.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, {
-  useState,
-  useMemo,
-  useCallback,
-  createContext,
-  ReactNode,
-} from "react";
-import { IssueFilters } from "@api/issues.types";
-
-export const FiltersContext = createContext<{
-  filters: IssueFilters;
-  handleFilters: (filter: IssueFilters) => unknown;
-}>({
-  filters: { status: undefined, level: undefined, project: undefined },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-  handleFilters: (_filter: IssueFilters) => {},
-});
-
-type FiltersProviderProps = {
-  children: ReactNode | ReactNode[];
-};
-
-export function FiltersProvider({ children }: FiltersProviderProps) {
-  const [filters, setFilters] = useState<IssueFilters>({
-    status: undefined,
-    level: undefined,
-    project: undefined,
-  });
-
-  const handleFilters = useCallback(
-    (filter: any) =>
-      setFilters((prevFilters) => ({ ...prevFilters, ...filter })),
-    []
-  );
-
-  const memoizedValue = useMemo(
-    () => ({ filters, handleFilters }),
-    [filters, handleFilters]
-  );
-
-  return (
-    <FiltersContext.Provider value={memoizedValue}>
-      {children}
-    </FiltersContext.Provider>
-  );
-}
diff --git a/features/issues/context/index.ts b/features/issues/context/index.ts
deleted file mode 100644
index cfeccc8..0000000
--- a/features/issues/context/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./filters-context";
diff --git a/features/issues/hooks/use-filters.ts b/features/issues/hooks/use-filters.ts
index 8ebce02..2256aca 100644
--- a/features/issues/hooks/use-filters.ts
+++ b/features/issues/hooks/use-filters.ts
@@ -1,4 +1,19 @@
-import { useContext } from "react";
-import { FiltersContext } from "../context/filters-context";
+import { useRouter } from "next/router";
+import { IssueFilters } from "@api/issues.types";
 
-export const useFilters = () => useContext(FiltersContext);
+export const useFilters = () => {
+  const router = useRouter();
+
+  const filters = {
+    status: router.query.status,
+    level: router.query.level,
+    project: router.query.project,
+  } as IssueFilters;
+
+  const handleFilters = (newFilters: IssueFilters) => {
+    const query = { ...router.query, ...newFilters };
+    router.push({ query });
+  };
+
+  return { filters, handleFilters };
+};
diff --git a/features/issues/index.ts b/features/issues/index.ts
index 4818906..8e6318f 100644
--- a/features/issues/index.ts
+++ b/features/issues/index.ts
@@ -1,3 +1,2 @@
 export * from "./api";
 export * from "./components/issue-list";
-export * from "./context";
diff --git a/features/ui/page-container/page-container.tsx b/features/ui/page-container/page-container.tsx
index d5e132d..4f97f80 100644
--- a/features/ui/page-container/page-container.tsx
+++ b/features/ui/page-container/page-container.tsx
@@ -3,7 +3,6 @@ import Head from "next/head";
 import styled from "styled-components";
 import { SidebarNavigation } from "../sidebar-navigation";
 import { color, displayFont, textFont, space, breakpoint } from "@styles/theme";
-import { FiltersProvider } from "@features/issues";
 
 type PageContainerProps = {
   children: React.ReactNode;
@@ -58,23 +57,21 @@ export function PageContainer({ children, title, info }: PageContainerProps) {
   // "Warning: A title element received an array with more than 1 element as children."
   const documentTitle = `ProLog - ${title}`;
   return (
-    <FiltersProvider>
-      <Container>
-        <Head>
-          <title>{documentTitle}</title>
-          <meta name="description" content="Error monitoring" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
+    <Container>
+      <Head>
+        <title>{documentTitle}</title>
+        <meta name="description" content="Error monitoring" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
 
-        <SidebarNavigation />
-        <Main>
-          <ContentContainer>
-            <Title>{title}</Title>
-            <Info>{info}</Info>
-            {children}
-          </ContentContainer>
-        </Main>
-      </Container>
-    </FiltersProvider>
+      <SidebarNavigation />
+      <Main>
+        <ContentContainer>
+          <Title>{title}</Title>
+          <Info>{info}</Info>
+          {children}
+        </ContentContainer>
+      </Main>
+    </Container>
   );
 }
diff --git a/pages/dashboard/issues.tsx b/pages/dashboard/issues.tsx
index 933f1cd..73a91ce 100644
--- a/pages/dashboard/issues.tsx
+++ b/pages/dashboard/issues.tsx
@@ -1,18 +1,15 @@
 import { PageContainer } from "@features/ui";
 import { IssueList } from "@features/issues";
-import { FiltersProvider } from "@features/issues";
 import type { NextPage } from "next";
 
 const IssuesPage: NextPage = () => {
   return (
-    <FiltersProvider>
-      <PageContainer
-        title="Issues"
-        info="Overview of errors, warnings, and events logged from your projects."
-      >
-        <IssueList />
-      </PageContainer>
-    </FiltersProvider>
+    <PageContainer
+      title="Issues"
+      info="Overview of errors, warnings, and events logged from your projects."
+    >
+      <IssueList />
+    </PageContainer>
   );
 };
 

From f15404bf19bd5e40bc6c9f4d4fa6ced970619023 Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Tue, 13 Dec 2022 15:48:56 +0100
Subject: [PATCH 02/10] Initialize input default values

---
 .../issues/components/filters/filters.tsx     | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/features/issues/components/filters/filters.tsx b/features/issues/components/filters/filters.tsx
index 4410de5..3db0749 100644
--- a/features/issues/components/filters/filters.tsx
+++ b/features/issues/components/filters/filters.tsx
@@ -2,15 +2,33 @@ import React, { useState, useCallback, useContext } from "react";
 import { useWindowSize } from "react-use";
 import { Select, Option, Input, NavigationContext } from "@features/ui";
 import { useFilters } from "../../hooks/use-filters";
-import { IssueLevel, IssueStatus } from "@api/issues.types";
+import { IssueFilters, IssueLevel, IssueStatus } from "@api/issues.types";
 import { useProjects } from "@features/projects";
 import * as S from "./filters.styled";
+import { capitalize } from "lodash";
+
+function getStatusDefaultValue(filters: IssueFilters) {
+  if (!filters.status) {
+    return "Status";
+  }
+  if (filters.status === IssueStatus.open) {
+    return "Unresolved";
+  }
+  return "Resolved";
+}
+
+function getLevelDefaultValue(filters: IssueFilters) {
+  if (!filters.level) {
+    return "Level";
+  }
+  return capitalize(filters.level);
+}
 
 export function Filters() {
   const { handleFilters, filters } = useFilters();
   const { data: projects } = useProjects();
 
-  const [inputValue, setInputValue] = useState<string>("");
+  const [inputValue, setInputValue] = useState(filters.project || "");
   const projectNames = projects?.map((project) => project.name.toLowerCase());
 
   const { width } = useWindowSize();
@@ -61,7 +79,7 @@ export function Filters() {
     <S.Container>
       <Select
         placeholder="Status"
-        defaultValue="Status"
+        defaultValue={getStatusDefaultValue(filters)}
         width={isMobileScreen ? "97%" : "8rem"}
         style={{
           ...(isMobileMenuOpen && {
@@ -82,7 +100,7 @@ export function Filters() {
 
       <Select
         placeholder="Level"
-        defaultValue="Level"
+        defaultValue={getLevelDefaultValue(filters)}
         width={isMobileScreen ? "97%" : "8rem"}
         style={{
           ...(isMobileMenuOpen && {

From 38f6b406efc69a1af9a716f36a1390447b4ccf5e Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Tue, 13 Dec 2022 16:01:45 +0100
Subject: [PATCH 03/10] Replace project input autocomplete with debounce

---
 .../issues/components/filters/filters.tsx     | 35 +++++--------------
 package-lock.json                             | 20 ++++++++++-
 package.json                                  |  3 +-
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/features/issues/components/filters/filters.tsx b/features/issues/components/filters/filters.tsx
index 3db0749..c5d03ed 100644
--- a/features/issues/components/filters/filters.tsx
+++ b/features/issues/components/filters/filters.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useCallback, useContext } from "react";
+import React, { useState, useContext } from "react";
 import { useWindowSize } from "react-use";
+import { useDebouncedCallback } from "use-debounce";
+import { capitalize } from "lodash";
 import { Select, Option, Input, NavigationContext } from "@features/ui";
-import { useFilters } from "../../hooks/use-filters";
 import { IssueFilters, IssueLevel, IssueStatus } from "@api/issues.types";
-import { useProjects } from "@features/projects";
+import { useFilters } from "../../hooks/use-filters";
 import * as S from "./filters.styled";
-import { capitalize } from "lodash";
 
 function getStatusDefaultValue(filters: IssueFilters) {
   if (!filters.status) {
@@ -26,30 +26,17 @@ function getLevelDefaultValue(filters: IssueFilters) {
 
 export function Filters() {
   const { handleFilters, filters } = useFilters();
-  const { data: projects } = useProjects();
 
+  const debouncedHandleFilters = useDebouncedCallback(handleFilters, 300);
   const [inputValue, setInputValue] = useState(filters.project || "");
-  const projectNames = projects?.map((project) => project.name.toLowerCase());
 
   const { width } = useWindowSize();
   const isMobileScreen = width <= 1023;
   const { isMobileMenuOpen } = useContext(NavigationContext);
 
-  const handleChange = (input: string) => {
-    setInputValue(input);
-
-    if (inputValue?.length < 2) {
-      handleProjectName(undefined);
-      return;
-    }
-
-    const name = projectNames?.find((name) =>
-      name?.toLowerCase().includes(inputValue.toLowerCase())
-    );
-
-    if (name) {
-      handleProjectName(name);
-    }
+  const handleChange = (project: string) => {
+    setInputValue(project);
+    debouncedHandleFilters({ project: project.toLowerCase() });
   };
 
   const handleLevel = (level?: string) => {
@@ -69,12 +56,6 @@ export function Filters() {
     handleFilters({ status: status as IssueStatus });
   };
 
-  const handleProjectName = useCallback(
-    (projectName?: string) =>
-      handleFilters({ project: projectName?.toLowerCase() }),
-    [handleFilters]
-  );
-
   return (
     <S.Container>
       <Select
diff --git a/package-lock.json b/package-lock.json
index 5cbf726..04f398a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "react-dom": "^18.2.0",
         "react-use": "^17.4.0",
         "styled-components": "^5.3.6",
-        "styled-normalize": "^8.0.7"
+        "styled-normalize": "^8.0.7",
+        "use-debounce": "^9.0.2"
       },
       "devDependencies": {
         "@babel/core": "^7.17.5",
@@ -30809,6 +30810,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.2.tgz",
+      "integrity": "sha512-QLyB0sxt9F5AisGDrUybCRJSLE60bTQR0yXc+IebNGUu1GCXwii1zsZl82mPGdWqDVQy7+1FKMLHQUixxf5Nbw==",
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -55544,6 +55556,12 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "use-debounce": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.2.tgz",
+      "integrity": "sha512-QLyB0sxt9F5AisGDrUybCRJSLE60bTQR0yXc+IebNGUu1GCXwii1zsZl82mPGdWqDVQy7+1FKMLHQUixxf5Nbw==",
+      "requires": {}
+    },
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/package.json b/package.json
index 1fd4b26..0aae8a2 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "react-dom": "^18.2.0",
     "react-use": "^17.4.0",
     "styled-components": "^5.3.6",
-    "styled-normalize": "^8.0.7"
+    "styled-normalize": "^8.0.7",
+    "use-debounce": "^9.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",

From 1f7467d0c237094f6f4b0bc97c21eb0d81cedc16 Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Tue, 13 Dec 2022 16:08:04 +0100
Subject: [PATCH 04/10] Fix select options overlaying navigation on mobile

---
 .../issues/components/filters/filters.tsx     | 21 ++-----------------
 .../sidebar-navigation/sidebar-navigation.tsx |  1 +
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/features/issues/components/filters/filters.tsx b/features/issues/components/filters/filters.tsx
index c5d03ed..7d23dcf 100644
--- a/features/issues/components/filters/filters.tsx
+++ b/features/issues/components/filters/filters.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
 import { useWindowSize } from "react-use";
 import { useDebouncedCallback } from "use-debounce";
 import { capitalize } from "lodash";
-import { Select, Option, Input, NavigationContext } from "@features/ui";
+import { Select, Option, Input } from "@features/ui";
 import { IssueFilters, IssueLevel, IssueStatus } from "@api/issues.types";
 import { useFilters } from "../../hooks/use-filters";
 import * as S from "./filters.styled";
@@ -32,7 +32,6 @@ export function Filters() {
 
   const { width } = useWindowSize();
   const isMobileScreen = width <= 1023;
-  const { isMobileMenuOpen } = useContext(NavigationContext);
 
   const handleChange = (project: string) => {
     setInputValue(project);
@@ -62,11 +61,6 @@ export function Filters() {
         placeholder="Status"
         defaultValue={getStatusDefaultValue(filters)}
         width={isMobileScreen ? "97%" : "8rem"}
-        style={{
-          ...(isMobileMenuOpen && {
-            opacity: 0,
-          }),
-        }}
       >
         <Option value={undefined} handleCallback={handleStatus}>
           --None--
@@ -83,11 +77,6 @@ export function Filters() {
         placeholder="Level"
         defaultValue={getLevelDefaultValue(filters)}
         width={isMobileScreen ? "97%" : "8rem"}
-        style={{
-          ...(isMobileMenuOpen && {
-            opacity: 0,
-          }),
-        }}
       >
         <Option value={undefined} handleCallback={handleLevel}>
           --None--
@@ -109,12 +98,6 @@ export function Filters() {
         label="project name"
         placeholder="Project Name"
         iconSrc="/icons/search-icon.svg"
-        style={{
-          ...(isMobileScreen && { width: "94%", marginRight: "3rem" }),
-          ...(isMobileMenuOpen && {
-            opacity: 0,
-          }),
-        }}
       />
     </S.Container>
   );
diff --git a/features/ui/sidebar-navigation/sidebar-navigation.tsx b/features/ui/sidebar-navigation/sidebar-navigation.tsx
index 54c3047..5569c4b 100644
--- a/features/ui/sidebar-navigation/sidebar-navigation.tsx
+++ b/features/ui/sidebar-navigation/sidebar-navigation.tsx
@@ -49,6 +49,7 @@ const Container = styled.div<{ isCollapsed: boolean }>`
 const FixedContainer = styled.div`
   ${containerStyles}
   position: fixed;
+  z-index: 1;
 `;
 
 const Header = styled.header`

From 185d3aa91a1256e9536fd7dc8499ac9162f29c8f Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Wed, 14 Dec 2022 11:57:47 +0100
Subject: [PATCH 05/10] Replace programmatic mobile styles with CSS

---
 .../components/filters/filters.styled.ts       | 16 +++++++++++++++-
 features/issues/components/filters/filters.tsx | 18 ++++++------------
 features/ui/input/input.styled.ts              |  1 +
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/features/issues/components/filters/filters.styled.ts b/features/issues/components/filters/filters.styled.ts
index 7d9c604..55190dd 100644
--- a/features/issues/components/filters/filters.styled.ts
+++ b/features/issues/components/filters/filters.styled.ts
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { breakpoint } from "@styles/theme";
+import { Select as UnstyledSelect, Input as UnstyledInput } from "@features/ui";
 
 export const Container = styled.div`
   display: flex;
@@ -12,7 +13,20 @@ export const Container = styled.div`
     flex-direction: row;
     justify-content: flex-end;
     order: initial;
-    gap: 3rem;
     flex-wrap: wrap;
   }
 `;
+
+export const Select = styled(UnstyledSelect)`
+  width: 100%;
+  @media (min-width: ${breakpoint("desktop")}) {
+    width: 10rem;
+  }
+`;
+
+export const Input = styled(UnstyledInput)`
+  width: 100%;
+  @media (min-width: ${breakpoint("desktop")}) {
+    width: 17.5rem;
+  }
+`;
diff --git a/features/issues/components/filters/filters.tsx b/features/issues/components/filters/filters.tsx
index 7d23dcf..9155675 100644
--- a/features/issues/components/filters/filters.tsx
+++ b/features/issues/components/filters/filters.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import { useWindowSize } from "react-use";
 import { useDebouncedCallback } from "use-debounce";
 import { capitalize } from "lodash";
-import { Select, Option, Input } from "@features/ui";
+import { Option } from "@features/ui";
 import { IssueFilters, IssueLevel, IssueStatus } from "@api/issues.types";
 import { useFilters } from "../../hooks/use-filters";
 import * as S from "./filters.styled";
@@ -30,9 +29,6 @@ export function Filters() {
   const debouncedHandleFilters = useDebouncedCallback(handleFilters, 300);
   const [inputValue, setInputValue] = useState(filters.project || "");
 
-  const { width } = useWindowSize();
-  const isMobileScreen = width <= 1023;
-
   const handleChange = (project: string) => {
     setInputValue(project);
     debouncedHandleFilters({ project: project.toLowerCase() });
@@ -57,10 +53,9 @@ export function Filters() {
 
   return (
     <S.Container>
-      <Select
+      <S.Select
         placeholder="Status"
         defaultValue={getStatusDefaultValue(filters)}
-        width={isMobileScreen ? "97%" : "8rem"}
       >
         <Option value={undefined} handleCallback={handleStatus}>
           --None--
@@ -71,12 +66,11 @@ export function Filters() {
         <Option value="Resolved" handleCallback={handleStatus}>
           Resolved
         </Option>
-      </Select>
+      </S.Select>
 
-      <Select
+      <S.Select
         placeholder="Level"
         defaultValue={getLevelDefaultValue(filters)}
-        width={isMobileScreen ? "97%" : "8rem"}
       >
         <Option value={undefined} handleCallback={handleLevel}>
           --None--
@@ -90,9 +84,9 @@ export function Filters() {
         <Option value="Info" handleCallback={handleLevel}>
           Info
         </Option>
-      </Select>
+      </S.Select>
 
-      <Input
+      <S.Input
         handleChange={handleChange}
         value={inputValue}
         label="project name"
diff --git a/features/ui/input/input.styled.ts b/features/ui/input/input.styled.ts
index c5ce947..a410060 100644
--- a/features/ui/input/input.styled.ts
+++ b/features/ui/input/input.styled.ts
@@ -17,6 +17,7 @@ export const InputContainer = styled.input<{
   border-radius: 7px;
   width: calc(${space(20)} * 4 - ${space(6)});
   padding: ${space(2, 3)};
+  box-sizing: border-box;
   letter-spacing: 0.05rem;
   color: ${color("gray", 900)};
   ${textFont("md", "regular")};

From 7e64823904b3ddeba23558df25274a012587af34 Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Wed, 7 Dec 2022 13:51:44 +0100
Subject: [PATCH 06/10] Migrate to controlled component

---
 features/ui/select/option.tsx         |  27 +++----
 features/ui/select/select.stories.tsx |  38 +++++----
 features/ui/select/select.tsx         | 109 ++++++++++++++------------
 3 files changed, 85 insertions(+), 89 deletions(-)

diff --git a/features/ui/select/option.tsx b/features/ui/select/option.tsx
index f21fdc7..cab34f6 100644
--- a/features/ui/select/option.tsx
+++ b/features/ui/select/option.tsx
@@ -1,32 +1,25 @@
 import React, { ReactNode } from "react";
-import { useSelectContext } from "./select-context";
 import * as S from "./option.styled";
 
 type OptionProps = {
-  children: ReactNode | ReactNode[];
-  value: any;
-  handleCallback?: (value: any) => unknown;
+  children: ReactNode;
+  value: unknown;
+  isSelected: boolean;
+  onClick: (value: unknown) => void;
 };
 
-export function Option({ children, value, handleCallback }: OptionProps) {
-  const { changeSelectedOption, selectedOption } = useSelectContext();
-  const isCurrentlySelected = selectedOption === value;
-
+export function Option({ children, value, onClick, isSelected }: OptionProps) {
   return (
     <S.ListItem
-      isCurrentlySelected={isCurrentlySelected}
-      aria-selected={isCurrentlySelected}
-      onClick={() => {
-        changeSelectedOption(value);
-        if (handleCallback) {
-          handleCallback(value);
-        }
-      }}
+      isCurrentlySelected={isSelected}
+      aria-selected={isSelected}
+      onClick={() => onClick(value)}
       role="option"
+      tabIndex={0}
     >
       {children}
       <S.ListItemIcon
-        isCurrentlySelected={isCurrentlySelected}
+        isCurrentlySelected={isSelected}
         src="/icons/checked.svg"
       />
     </S.ListItem>
diff --git a/features/ui/select/select.stories.tsx b/features/ui/select/select.stories.tsx
index 9a8637c..59443c5 100644
--- a/features/ui/select/select.stories.tsx
+++ b/features/ui/select/select.stories.tsx
@@ -1,7 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Select, Option } from "./";
-
+import { Select } from "./select";
 export default {
   title: "UI/Select",
   component: Select,
@@ -9,30 +8,29 @@ export default {
     layout: "fullscreen",
   },
 } as ComponentMeta<typeof Select>;
-
-const selectData = [
-  "Phoenix Baker",
-  "Olivia Rhye",
-  "Lana Steiner",
-  "Demi Wilkinson",
-  "Candice Wu",
-  "Natali Craig",
-  "Drew Cano",
+const options = [
+  { label: "Phoenix Baker", value: 1 },
+  { label: "Olivia Rhye", value: 2 },
+  { label: "Lana Steiner", value: 3 },
+  { label: "Demi Wilkinson", value: 4 },
+  { label: "Candice Wu", value: 5 },
+  { label: "Natali Craig", value: 6 },
+  { label: "Drew Cano", value: 7 },
 ];
-
 const Template: ComponentStory<typeof Select> = (props) => {
+  const [selectedValue, setSelectedValue] = useState<number>();
   return (
     <div style={{ padding: 50, height: 400 }}>
-      <Select {...props}>
-        {selectData.map((name) => (
-          <Option key={name} value={name}>
-            {name}
-          </Option>
-        ))}
-      </Select>
+      <Select
+        {...props}
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value as number)}
+      />
     </div>
   );
 };
+
 export const Default = Template.bind({});
 Default.args = {
   disabled: false,
diff --git a/features/ui/select/select.tsx b/features/ui/select/select.tsx
index 58fc19a..21060d3 100644
--- a/features/ui/select/select.tsx
+++ b/features/ui/select/select.tsx
@@ -1,17 +1,17 @@
-import React, {
-  useState,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useRef,
-  SelectHTMLAttributes,
-} from "react";
+import React, { useState, useRef } from "react";
 import { useClickAway } from "react-use";
-import { SelectContext } from "./select-context";
+import { Option } from "./option";
 import * as S from "./select.styled";
 
-type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
-  children: ReactNode | ReactNode[];
+type Option = {
+  value: unknown;
+  label: React.ReactNode;
+};
+
+type SelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  options: Option[];
+  value: unknown;
+  onChange: (value: unknown) => void;
   errorMessage?: string;
   defaultValue?: string;
   placeholder?: string;
@@ -23,6 +23,9 @@ type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
 };
 
 export function Select({
+  options,
+  value,
+  onChange,
   placeholder = "Choose an option",
   defaultValue = "",
   iconSrc = "",
@@ -31,10 +34,8 @@ export function Select({
   hint = "",
   errorMessage = "",
   width = "",
-  children,
   ...props
 }: SelectProps) {
-  const [selectedOption, setSelectedOption] = useState(defaultValue || "");
   const [showDropdown, setShowDropdown] = useState(false);
   const ref = useRef(null);
 
@@ -43,55 +44,59 @@ export function Select({
     setShowDropdown(false);
   });
 
-  const showDropdownHandler = useCallback(
-    () => setShowDropdown((prevShowDropdown) => !prevShowDropdown),
-    []
-  );
+  const showDropdownHandler = () =>
+    setShowDropdown((prevShowDropdown) => !prevShowDropdown);
 
-  const updateSelectedOption = useCallback((option: string) => {
-    setSelectedOption(option);
+  const onClickOption = (newValue: unknown) => {
+    onChange(newValue);
     setShowDropdown(false);
-  }, []);
+  };
 
-  const value = useMemo(
-    () => ({ selectedOption, changeSelectedOption: updateSelectedOption }),
-    [selectedOption, updateSelectedOption]
+  const selectedOption = options.find(
+    (option) => option.value === (value || defaultValue)
   );
 
   return (
-    <SelectContext.Provider value={value}>
-      <S.Container ref={ref} width={width} {...props}>
-        {label && <S.Label>{label}</S.Label>}
+    <S.Container ref={ref} width={width} {...props}>
+      {label && <S.Label>{label}</S.Label>}
 
-        <S.SelectedOption
-          onClick={showDropdownHandler}
-          selectedOption={selectedOption}
-          disabled={disabled}
-          errorMessage={errorMessage}
-          aria-expanded={showDropdown}
-          width={width}
-        >
-          <S.LeftContainer>
-            {iconSrc && <S.OptionalIcon src={iconSrc} />}
-            {selectedOption || placeholder}
-          </S.LeftContainer>
+      <S.SelectedOption
+        onClick={showDropdownHandler}
+        selectedOption={selectedOption}
+        disabled={disabled}
+        errorMessage={errorMessage}
+        aria-expanded={showDropdown}
+        width={width}
+      >
+        <S.LeftContainer>
+          {iconSrc && <S.OptionalIcon src={iconSrc} />}
+          {selectedOption?.label || placeholder}
+        </S.LeftContainer>
 
-          <S.SelectArrowIcon
-            src="/icons/chevron-down.svg"
-            showDropdown={showDropdown}
-          />
-        </S.SelectedOption>
+        <S.SelectArrowIcon
+          src="/icons/chevron-down.svg"
+          showDropdown={showDropdown}
+        />
+      </S.SelectedOption>
 
-        {hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
+      {hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
 
-        {errorMessage && !showDropdown && !disabled && (
-          <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
-        )}
+      {errorMessage && !showDropdown && !disabled && (
+        <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
+      )}
 
-        <S.List showDropdown={showDropdown} role="listbox" tabIndex={-1}>
-          {children}
-        </S.List>
-      </S.Container>
-    </SelectContext.Provider>
+      <S.List showDropdown={showDropdown} role="listbox" tabIndex={-1}>
+        {options.map((option) => (
+          <Option
+            key={String(option.value)}
+            value={option.value}
+            isSelected={value === option.value}
+            onClick={onClickOption}
+          >
+            {option.label}
+          </Option>
+        ))}
+      </S.List>
+    </S.Container>
   );
 }

From 70a759b6f249240ec82b3a6669fc38e0a590aadd Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Wed, 7 Dec 2022 14:00:16 +0100
Subject: [PATCH 07/10] Support keyboard events

---
 features/ui/select/option.tsx         | 16 +++++++---
 features/ui/select/select.stories.tsx |  2 +-
 features/ui/select/select.tsx         | 46 ++++++++++++++++++++-------
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/features/ui/select/option.tsx b/features/ui/select/option.tsx
index cab34f6..a9fa475 100644
--- a/features/ui/select/option.tsx
+++ b/features/ui/select/option.tsx
@@ -1,19 +1,27 @@
 import React, { ReactNode } from "react";
 import * as S from "./option.styled";
 
-type OptionProps = {
+type OptionProps<P> = {
   children: ReactNode;
-  value: unknown;
+  value: P;
   isSelected: boolean;
-  onClick: (value: unknown) => void;
+  onClick: (value: P) => void;
+  onKeyDown: (event: React.KeyboardEvent, value: P) => void;
 };
 
-export function Option({ children, value, onClick, isSelected }: OptionProps) {
+export function Option<P>({
+  children,
+  value,
+  onClick,
+  onKeyDown,
+  isSelected,
+}: OptionProps<P>) {
   return (
     <S.ListItem
       isCurrentlySelected={isSelected}
       aria-selected={isSelected}
       onClick={() => onClick(value)}
+      onKeyDown={(event) => onKeyDown(event, value)}
       role="option"
       tabIndex={0}
     >
diff --git a/features/ui/select/select.stories.tsx b/features/ui/select/select.stories.tsx
index 59443c5..54b1dd1 100644
--- a/features/ui/select/select.stories.tsx
+++ b/features/ui/select/select.stories.tsx
@@ -25,7 +25,7 @@ const Template: ComponentStory<typeof Select> = (props) => {
         {...props}
         options={options}
         value={selectedValue}
-        onChange={(value) => setSelectedValue(value as number)}
+        onChange={(value) => setSelectedValue(value)}
       />
     </div>
   );
diff --git a/features/ui/select/select.tsx b/features/ui/select/select.tsx
index 21060d3..9593bdd 100644
--- a/features/ui/select/select.tsx
+++ b/features/ui/select/select.tsx
@@ -3,15 +3,15 @@ import { useClickAway } from "react-use";
 import { Option } from "./option";
 import * as S from "./select.styled";
 
-type Option = {
-  value: unknown;
+type Option<T> = {
+  value: T;
   label: React.ReactNode;
 };
 
-type SelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
-  options: Option[];
+type SelectProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  options: Option<T>[];
   value: unknown;
-  onChange: (value: unknown) => void;
+  onChange: (value: T) => void;
   errorMessage?: string;
   defaultValue?: string;
   placeholder?: string;
@@ -22,7 +22,7 @@ type SelectProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
   hint?: string;
 };
 
-export function Select({
+export function Select<T>({
   options,
   value,
   onChange,
@@ -35,7 +35,7 @@ export function Select({
   errorMessage = "",
   width = "",
   ...props
-}: SelectProps) {
+}: SelectProps<T>) {
   const [showDropdown, setShowDropdown] = useState(false);
   const ref = useRef(null);
 
@@ -44,14 +44,34 @@ export function Select({
     setShowDropdown(false);
   });
 
-  const showDropdownHandler = () =>
+  const toggleDropdown = () =>
     setShowDropdown((prevShowDropdown) => !prevShowDropdown);
 
-  const onClickOption = (newValue: unknown) => {
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === "Space" || event.code === "ArrowDown") {
+      event.preventDefault();
+      toggleDropdown();
+    }
+    if (event.code === "Escape") {
+      setShowDropdown(false);
+    }
+  };
+
+  const onClickOption = (newValue: T) => {
     onChange(newValue);
     setShowDropdown(false);
   };
 
+  const onKeyDownOption = (event: React.KeyboardEvent, value: T) => {
+    if (event.code === "Space") {
+      event.preventDefault();
+      onClickOption(value);
+    }
+    if (event.code === "Escape") {
+      setShowDropdown(false);
+    }
+  };
+
   const selectedOption = options.find(
     (option) => option.value === (value || defaultValue)
   );
@@ -61,12 +81,13 @@ export function Select({
       {label && <S.Label>{label}</S.Label>}
 
       <S.SelectedOption
-        onClick={showDropdownHandler}
-        selectedOption={selectedOption}
+        onClick={toggleDropdown}
+        hasValue={!!selectedOption}
+        hasError={!!errorMessage}
         disabled={disabled}
-        errorMessage={errorMessage}
         aria-expanded={showDropdown}
         width={width}
+        onKeyDown={onKeyDown}
       >
         <S.LeftContainer>
           {iconSrc && <S.OptionalIcon src={iconSrc} />}
@@ -92,6 +113,7 @@ export function Select({
             value={option.value}
             isSelected={value === option.value}
             onClick={onClickOption}
+            onKeyDown={onKeyDownOption}
           >
             {option.label}
           </Option>

From c9e5ad5ba18ae17dc04510d6c8e972ce39b0d180 Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Wed, 7 Dec 2022 14:08:16 +0100
Subject: [PATCH 08/10] Clean up styles

---
 features/ui/select/option.styled.ts   |  36 +++-----
 features/ui/select/option.tsx         |   7 +-
 features/ui/select/select.stories.tsx |   3 +-
 features/ui/select/select.styled.ts   | 124 ++++++++++++--------------
 features/ui/select/select.tsx         |  17 ++--
 5 files changed, 76 insertions(+), 111 deletions(-)

diff --git a/features/ui/select/option.styled.ts b/features/ui/select/option.styled.ts
index 445036f..3da082b 100644
--- a/features/ui/select/option.styled.ts
+++ b/features/ui/select/option.styled.ts
@@ -1,40 +1,24 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
-export const ListItem = styled.li.attrs(() => ({
-  tabIndex: 0,
-}))<{ isCurrentlySelected: boolean }>`
-  margin: 0;
-  padding: 0;
+export const ListItem = styled.li<{ isSelected: boolean }>`
   display: flex;
-  width: 100%;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
   list-style-type: none;
-  padding-inline: 0.75rem;
-  padding-block: calc(0.75rem - 0.1rem);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  padding: 0.625rem 0.75rem;
   cursor: pointer;
-  z-index: 100;
   color: #1d2939;
-  background-color: #fff;
-  box-sizing: border-box;
-  ${({ isCurrentlySelected }) =>
-    isCurrentlySelected &&
-    css`
-      background-color: #fcfaff;
-    `};
-
+  background-color: ${({ isSelected }) => (isSelected ? "#fcfaff" : "#ffffff")};
   &:hover {
-    background: #f4ebff;
+    background-color: #f4ebff;
   }
 `;
 
-export const ListItemIcon = styled.img<{ isCurrentlySelected: boolean }>`
-  display: ${({ isCurrentlySelected }) =>
-    isCurrentlySelected ? "block" : "none"};
-  padding: 0;
+export const ListItemIcon = styled.img`
   width: 1rem;
   height: 1rem;
 `;
diff --git a/features/ui/select/option.tsx b/features/ui/select/option.tsx
index a9fa475..37a3c34 100644
--- a/features/ui/select/option.tsx
+++ b/features/ui/select/option.tsx
@@ -18,7 +18,7 @@ export function Option<P>({
 }: OptionProps<P>) {
   return (
     <S.ListItem
-      isCurrentlySelected={isSelected}
+      isSelected={isSelected}
       aria-selected={isSelected}
       onClick={() => onClick(value)}
       onKeyDown={(event) => onKeyDown(event, value)}
@@ -26,10 +26,7 @@ export function Option<P>({
       tabIndex={0}
     >
       {children}
-      <S.ListItemIcon
-        isCurrentlySelected={isSelected}
-        src="/icons/checked.svg"
-      />
+      {isSelected && <S.ListItemIcon src="/icons/checked.svg" />}
     </S.ListItem>
   );
 }
diff --git a/features/ui/select/select.stories.tsx b/features/ui/select/select.stories.tsx
index 54b1dd1..830eb20 100644
--- a/features/ui/select/select.stories.tsx
+++ b/features/ui/select/select.stories.tsx
@@ -20,7 +20,7 @@ const options = [
 const Template: ComponentStory<typeof Select> = (props) => {
   const [selectedValue, setSelectedValue] = useState<number>();
   return (
-    <div style={{ padding: 50, height: 400 }}>
+    <div style={{ padding: 50, height: 400, width: 320 }}>
       <Select
         {...props}
         options={options}
@@ -40,7 +40,6 @@ Default.args = {
   hint: "This is a hint text to help user.",
   defaultValue: "Demi Wilkinson",
   errorMessage: "",
-  width: "",
 };
 Default.parameters = {
   viewMode: "docs",
diff --git a/features/ui/select/select.styled.ts b/features/ui/select/select.styled.ts
index eaad75d..9d4f9bf 100644
--- a/features/ui/select/select.styled.ts
+++ b/features/ui/select/select.styled.ts
@@ -1,42 +1,50 @@
 import styled, { css } from "styled-components";
 
-export const Container = styled.div<any>`
+export const Container = styled.div`
   position: relative;
-  display: block;
-  width: ${({ width }) => width || `calc(5rem * 4)`};
-  background-color: #fff;
+  letter-spacing: 0.04rem;
 `;
 
-export const SelectedOption = styled.div.attrs(() => ({
-  tabIndex: 0,
-  ariaHasPopup: "listbox",
-}))<any>`
-  border: 1px solid;
-  border-color: ${({ disabled, errorMessage }) =>
-    !disabled && errorMessage ? "#FDA29B" : "#D0D5DD"};
-  border-radius: 7px;
-  width: ${({ width }) => width || `calc(5rem * 4 - 1.5rem)`};
-  padding: 0.5rem 0.75rem;
-  color: ${({ selectedOption }) => (selectedOption ? "#101828" : "#667085")};
-  cursor: pointer;
+export const SelectedOption = styled.div<{
+  disabled: boolean;
+  hasError: boolean;
+  hasValue: boolean;
+}>`
   display: flex;
-  justify-content: space-between;
-  letter-spacing: 0.052rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  align-items: center;
+  padding: 0.6875rem 0.875rem;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  cursor: pointer;
+  color: #667085;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   &:focus {
-    outline: 3px solid;
-    outline-color: ${({ disabled, errorMessage }) =>
-      !disabled && errorMessage ? "#FEE4E2" : "#E9D7FE"};
+    outline: none;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #f4ebff;
   }
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      color: #667085;
-      background-color: #f2f4f7;
-      pointer-events: none;
-    `}
+  ${({ hasValue, hasError, disabled }) => {
+    if (disabled) {
+      return css`
+        color: #667085;
+        background-color: #f2f4f7;
+        pointer-events: none;
+      `;
+    }
+    if (hasError) {
+      return css`
+        border-color: #fda29b;
+        &:focus {
+          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
+            0px 0px 0px 4px #fee4e2;
+        }
+      `;
+    }
+    if (hasValue) {
+      return css`
+        color: #101828;
+      `;
+    }
+  }}
 `;
 
 export const SelectArrowIcon = styled.img<{
@@ -44,73 +52,53 @@ export const SelectArrowIcon = styled.img<{
 }>`
   transform: ${({ showDropdown }) =>
     showDropdown ? "rotate(180deg)" : "none"};
-  padding-inline: 0.25rem;
 `;
 
 export const OptionalIcon = styled.img`
   width: 1.25rem;
   height: 1.25rem;
-  padding-inline: 0.25rem 0.5rem;
 `;
 
-export const LeftContainer = styled.div`
-  display: flex;
-  align-items: center;
+export const SelectedText = styled.span`
+  flex: 1;
+  padding: 0 0.5rem;
 `;
 
-export const Label = styled.p`
-  margin: 0;
+export const Label = styled.div`
   margin-bottom: 0.25rem;
   color: #344054;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: 0.025rem;
 `;
 
 export const List = styled.ul<{ showDropdown: boolean }>`
-  display: block;
+  display: none;
+  position: absolute;
   width: 100%;
   margin: 0.5rem 0 0;
   padding: 0;
-  position: absolute;
+  z-index: 1;
   background: white;
-  box-shadow: 0 7px 12px -6px #d0d5dd;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
     0px 4px 6px -2px rgba(16, 24, 40, 0.05);
   border-radius: 8px;
   overflow: hidden;
-
   ${({ showDropdown }) =>
-    showDropdown
-      ? css`
-          opacity: 1;
-          visibility: visible;
-          position: absolute;
-          height: auto;
-          z-index: 200;
-        `
-      : css`
-          opacity: 0;
-          visibility: hidden;
-        `};
+    showDropdown &&
+    css`
+      display: block;
+    `}
 `;
 
-export const Hint = styled.p`
-  margin: 0;
+export const Hint = styled.div`
   margin-top: 0.25rem;
   color: #667085;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0.05rem;
+  letter-spacing: 0.025rem;
 `;
 
-export const ErrorMessage = styled.p`
-  margin: 0;
-  margin-top: 0.25rem;
+export const ErrorMessage = styled(Hint)`
   color: #f04438;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  letter-spacing: 0.05rem;
 `;
diff --git a/features/ui/select/select.tsx b/features/ui/select/select.tsx
index 9593bdd..3969a67 100644
--- a/features/ui/select/select.tsx
+++ b/features/ui/select/select.tsx
@@ -17,7 +17,6 @@ type SelectProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
   placeholder?: string;
   disabled?: boolean;
   iconSrc?: string;
-  width?: string | number;
   label?: string;
   hint?: string;
 };
@@ -33,7 +32,6 @@ export function Select<T>({
   label = "",
   hint = "",
   errorMessage = "",
-  width = "",
   ...props
 }: SelectProps<T>) {
   const [showDropdown, setShowDropdown] = useState(false);
@@ -77,7 +75,7 @@ export function Select<T>({
   );
 
   return (
-    <S.Container ref={ref} width={width} {...props}>
+    <S.Container ref={ref} {...props}>
       {label && <S.Label>{label}</S.Label>}
 
       <S.SelectedOption
@@ -86,13 +84,12 @@ export function Select<T>({
         hasError={!!errorMessage}
         disabled={disabled}
         aria-expanded={showDropdown}
-        width={width}
         onKeyDown={onKeyDown}
+        tabIndex={disabled ? -1 : 0}
+        aria-haspopup="listbox"
       >
-        <S.LeftContainer>
-          {iconSrc && <S.OptionalIcon src={iconSrc} />}
-          {selectedOption?.label || placeholder}
-        </S.LeftContainer>
+        {iconSrc && <S.OptionalIcon src={iconSrc} />}
+        <S.SelectedText>{selectedOption?.label || placeholder}</S.SelectedText>
 
         <S.SelectArrowIcon
           src="/icons/chevron-down.svg"
@@ -100,9 +97,9 @@ export function Select<T>({
         />
       </S.SelectedOption>
 
-      {hint && !showDropdown && !errorMessage && <S.Hint>{hint}</S.Hint>}
+      {hint && !errorMessage && <S.Hint>{hint}</S.Hint>}
 
-      {errorMessage && !showDropdown && !disabled && (
+      {errorMessage && !disabled && (
         <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
       )}
 

From 3a135894877778febf9f33e5f2b4a8066f7a555e Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Wed, 7 Dec 2022 14:08:32 +0100
Subject: [PATCH 09/10] Final clean up

---
 features/ui/select/select.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/features/ui/select/select.tsx b/features/ui/select/select.tsx
index 3969a67..63bd4d0 100644
--- a/features/ui/select/select.tsx
+++ b/features/ui/select/select.tsx
@@ -26,12 +26,12 @@ export function Select<T>({
   value,
   onChange,
   placeholder = "Choose an option",
-  defaultValue = "",
-  iconSrc = "",
+  defaultValue,
+  iconSrc,
   disabled = false,
-  label = "",
-  hint = "",
-  errorMessage = "",
+  label,
+  hint,
+  errorMessage,
   ...props
 }: SelectProps<T>) {
   const [showDropdown, setShowDropdown] = useState(false);

From 0c7181ef8094a93872192a611219bca5c3c316fd Mon Sep 17 00:00:00 2001
From: Johannes Kettmann <jkettmann@gmx.net>
Date: Wed, 21 Dec 2022 16:51:34 +0100
Subject: [PATCH 10/10] Use refactored Select in Filters component

---
 .../components/filters/filters.styled.ts      |  2 +-
 .../issues/components/filters/filters.tsx     | 82 +++++--------------
 2 files changed, 21 insertions(+), 63 deletions(-)

diff --git a/features/issues/components/filters/filters.styled.ts b/features/issues/components/filters/filters.styled.ts
index 55190dd..6c70271 100644
--- a/features/issues/components/filters/filters.styled.ts
+++ b/features/issues/components/filters/filters.styled.ts
@@ -22,7 +22,7 @@ export const Select = styled(UnstyledSelect)`
   @media (min-width: ${breakpoint("desktop")}) {
     width: 10rem;
   }
-`;
+` as typeof UnstyledSelect;
 
 export const Input = styled(UnstyledInput)`
   width: 100%;
diff --git a/features/issues/components/filters/filters.tsx b/features/issues/components/filters/filters.tsx
index 9155675..02379da 100644
--- a/features/issues/components/filters/filters.tsx
+++ b/features/issues/components/filters/filters.tsx
@@ -1,27 +1,21 @@
 import React, { useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import { capitalize } from "lodash";
-import { Option } from "@features/ui";
-import { IssueFilters, IssueLevel, IssueStatus } from "@api/issues.types";
+import { IssueLevel, IssueStatus } from "@api/issues.types";
 import { useFilters } from "../../hooks/use-filters";
 import * as S from "./filters.styled";
 
-function getStatusDefaultValue(filters: IssueFilters) {
-  if (!filters.status) {
-    return "Status";
-  }
-  if (filters.status === IssueStatus.open) {
-    return "Unresolved";
-  }
-  return "Resolved";
-}
+const statusOptions = [
+  { value: undefined, label: "--None--" },
+  { value: IssueStatus.open, label: "Unresolved" },
+  { value: IssueStatus.resolved, label: "Resolved" },
+];
 
-function getLevelDefaultValue(filters: IssueFilters) {
-  if (!filters.level) {
-    return "Level";
-  }
-  return capitalize(filters.level);
-}
+const levelOptions = [
+  { value: undefined, label: "--None--" },
+  { value: IssueLevel.error, label: "Error" },
+  { value: IssueLevel.warning, label: "Warning" },
+  { value: IssueLevel.info, label: "Info" },
+];
 
 export function Filters() {
   const { handleFilters, filters } = useFilters();
@@ -34,57 +28,21 @@ export function Filters() {
     debouncedHandleFilters({ project: project.toLowerCase() });
   };
 
-  const handleLevel = (level?: string) => {
-    if (level) {
-      level = level.toLowerCase();
-    }
-    handleFilters({ level: level as IssueLevel });
-  };
-
-  const handleStatus = (status?: string) => {
-    if (status === "Unresolved") {
-      status = "open";
-    }
-    if (status) {
-      status = status.toLowerCase();
-    }
-    handleFilters({ status: status as IssueStatus });
-  };
-
   return (
     <S.Container>
       <S.Select
         placeholder="Status"
-        defaultValue={getStatusDefaultValue(filters)}
-      >
-        <Option value={undefined} handleCallback={handleStatus}>
-          --None--
-        </Option>
-        <Option value="Unresolved" handleCallback={handleStatus}>
-          Unresolved
-        </Option>
-        <Option value="Resolved" handleCallback={handleStatus}>
-          Resolved
-        </Option>
-      </S.Select>
+        value={filters.status}
+        options={statusOptions}
+        onChange={(status) => handleFilters({ status })}
+      />
 
       <S.Select
         placeholder="Level"
-        defaultValue={getLevelDefaultValue(filters)}
-      >
-        <Option value={undefined} handleCallback={handleLevel}>
-          --None--
-        </Option>
-        <Option value="Error" handleCallback={handleLevel}>
-          Error
-        </Option>
-        <Option value="Warning" handleCallback={handleLevel}>
-          Warning
-        </Option>
-        <Option value="Info" handleCallback={handleLevel}>
-          Info
-        </Option>
-      </S.Select>
+        value={filters.level}
+        options={levelOptions}
+        onChange={(level) => handleFilters({ level })}
+      />
 
       <S.Input
         handleChange={handleChange}