Create custom select, update tests

package.json

@@ -3,12 +3,13 @@
   "version": "1.0.0",
   "license": "MIT",
   "repository": "git@github.com:phntxx/dashboard",
-  "contributors": ["phntxx <hello@phntxx.com>"],
+  "contributors": [
+    "phntxx <hello@phntxx.com>"
+  ],
   "private": false,
   "dependencies": {
     "@types/node": "^14.14.37",
     "@types/react-dom": "^17.0.3",
-    "@types/react-select": "^4.0.13",
     "@types/styled-components": "^5.1.9",
     "browserslist": "^4.16.6",
     "http-server": "^0.12.3",
@@ -16,7 +17,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",
-    "react-select": "^4.3.0",
     "styled-components": "^5.2.1",
     "typescript": "^4.2.3"
   },
@@ -47,7 +47,11 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

src/app.tsx

@@ -43,13 +43,12 @@ const App = () => {
       <GlobalStyle />
       <div>
         <SearchBar search={searchProviderData?.search} />
-        {!themeData.error ||
+        {(!themeData.error || !searchProviderData.error) && (
-          (!searchProviderData.error && (
+          <Settings
-            <Settings
+            themes={themeData?.themes}
-              themes={themeData?.themes}
+            search={searchProviderData?.search}
-              search={searchProviderData?.search}
+          />
-            />
+        )}
-          ))}
         <Greeter data={greeterData.greeter} />
         {!appData.error && (
           <AppList apps={appData.apps} categories={appData.categories} />

src/components/app.tsx

@@ -27,7 +27,7 @@ const DetailsContainer = styled.div`
 `;
 
 const AppName = styled.div`
-  a:hover & {
+  a:hover {
     text-decoration: underline;
   }
 `;

src/components/appCategory.tsx

@@ -24,14 +24,14 @@ const AppCategory = ({ name, items }: IAppCategoryProps) => (
   <CategoryContainer>
     {name && <CategoryHeadline>{name}</CategoryHeadline>}
     <ItemList>
-      {items.map((app, idx) => (
+      {items.map(({ name, icon, displayURL, newTab, url }, index) => (
-        <Item key={[app.name, idx].join("")}>
+        <Item key={[name, index].join("")}>
           <App
-            name={app.name}
+            name={name}
-            icon={app.icon}
+            icon={icon}
-            url={app.url}
+            url={url}
-            displayURL={app.displayURL}
+            displayURL={displayURL}
-            newTab={app.newTab}
+            newTab={newTab}
           />
         </Item>
       ))}

src/components/appList.tsx

@@ -19,8 +19,12 @@ const AppList = ({ categories, apps }: IAppListProps) => {
       <ListContainer>
         <Headline>Applications</Headline>
         {categories &&
-          categories.map(({ name, items }, idx) => (
+          categories.map(({ name, items }, index) => (
-            <AppCategory key={[name, idx].join("")} name={name} items={items} />
+            <AppCategory
+              key={[name, index].join("")}
+              name={name}
+              items={items}
+            />
           ))}
         {apps && (
           <AppCategory

src/components/bookmarks.tsx

@@ -50,8 +50,8 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
   <Item>
     <GroupContainer>
       <SubHeadline>{name}</SubHeadline>
-      {items.map(({ name, url }, idx) => (
+      {items.map(({ name, url }, index) => (
-        <Bookmark key={[name, idx].join("")} href={url}>
+        <Bookmark key={[name, index].join("")} href={url}>
           {name}
         </Bookmark>
       ))}
@@ -68,8 +68,8 @@ const BookmarkList = ({ groups }: IBookmarkListProps) => (
   <ListContainer>
     <Headline>Bookmarks</Headline>
     <ItemList>
-      {groups.map(({ name, items }, idx) => (
+      {groups.map(({ name, items }, index) => (
-        <BookmarkGroup key={[name, idx].join("")} name={name} items={items} />
+        <BookmarkGroup key={[name, index].join("")} name={name} items={items} />
       ))}
     </ItemList>
   </ListContainer>

src/components/elements.tsx

@@ -42,6 +42,7 @@ export const Item = styled.li`
 
 export const Button = styled.button`
   text-transform: uppercase;
+  font-family: Roboto, sans-serif;
   font-weight: 400;
   border: 1px solid ${selectedTheme.mainColor};
   color: ${selectedTheme.mainColor};

src/components/select.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface IItemProps {
+  label: string;
+  value: any;
+}
+
+export interface ISelectProps {
+  items: Array<IItemProps>;
+  onChange: (item: any) => void;
+  className?: string;
+}
+
+const update = (
+  items: Array<IItemProps>,
+  onChange: (item: any) => void,
+  e: React.ChangeEvent<HTMLSelectElement>,
+) => {
+  onChange(items.find((item) => item.value.toString() === e.target.value));
+};
+
+const Select = ({ items, onChange, className }: ISelectProps) => (
+  <select
+    data-testid="select"
+    onChange={(e) => update(items, onChange, e)}
+    className={className}
+  >
+    {items.map(({ label, value }, index) => (
+      <option
+        data-testid={"option-" + index}
+        key={[label, index].join("")}
+        value={value.toString()}
+      >
+        {label}
+      </option>
+    ))}
+  </select>
+);
+
+export default Select;

src/components/settings.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 
-import Select, { ValueType } from "react-select";
+import Select, { IItemProps } from "./select";
 
 import { ISearchProps } from "./searchBar";
 import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
@@ -55,63 +55,21 @@ const Code = styled.p`
   color: ${selectedTheme.accentColor};
 `;
 
-export const SelectorStyle: any = {
+const ThemeSelect = styled(Select)`
-  container: (base: any): any => ({
+  -webkit-appearance: button;
-    ...base,
+  -moz-appearance: button;
-    margin: "0 2px",
+
-  }),
+  text-transform: uppercase;
-  control: (base: any): any => ({
+  font-family: Roboto, sans-serif;
-    ...base,
+  font-weight: 400;
-    fontWeight: 500,
+  border: 1px solid ${selectedTheme.mainColor};
-    color: selectedTheme.mainColor,
+  color: ${selectedTheme.mainColor};
-    textTransform: "uppercase",
+  background: none;
-    width: "12rem",
+
-    background: "none",
+  & > option {
-    borderRadius: 0,
+    background-color: ${selectedTheme.backgroundColor};
-    border: "1px solid",
+  }
-    borderColor: selectedTheme.mainColor,
+`;
-    boxShadow: "none",
-    "&:hover": {
-      border: "1px solid",
-      borderColor: selectedTheme.mainColor,
-    },
-  }),
-  dropdownIndicator: (base: any): any => ({
-    ...base,
-    color: selectedTheme.mainColor,
-    "&:hover": {
-      color: selectedTheme.mainColor,
-    },
-  }),
-  indicatorSeparator: () => ({
-    display: "none",
-  }),
-  menu: (base: any): any => ({
-    ...base,
-    backgroundColor: selectedTheme.backgroundColor,
-    border: "1px solid " + selectedTheme.mainColor,
-    borderRadius: 0,
-    boxShadow: "none",
-    margin: "4px 0",
-  }),
-  option: (base: any): any => ({
-    ...base,
-    fontWeight: 500,
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    borderRadius: 0,
-    boxShadow: "none",
-    backgroundColor: selectedTheme.backgroundColor,
-    "&:hover": {
-      backgroundColor: selectedTheme.mainColor,
-      color: selectedTheme.backgroundColor,
-    },
-  }),
-  singleValue: (base: any): any => ({
-    ...base,
-    color: selectedTheme.mainColor,
-  }),
-};
 
 interface ISettingsProps {
   themes: Array<IThemeProps> | undefined;
@@ -133,15 +91,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
           <Section>
             <SectionHeadline>Theme:</SectionHeadline>
             <FormContainer>
-              <Select
+              <ThemeSelect
-                classNamePrefix="list"
+                items={themes}
-                options={themes}
+                onChange={(theme: IThemeProps) => setNewTheme(theme)}
-                defaultValue={selectedTheme}
+              ></ThemeSelect>
-                onChange={(e: ValueType<IThemeProps, false>) => {
-                  if (e !== null && e !== undefined) setNewTheme(e);
-                }}
-                styles={SelectorStyle}
-              />
               <Button
                 data-testid="button-submit"
                 onClick={() => {
@@ -174,10 +127,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
                       <HeadCell>Search Provider</HeadCell>
                       <HeadCell>Prefix</HeadCell>
                     </TableRow>
-                    {search.providers.map((provider, index) => (
+                    {search.providers.map(({ name, prefix }, index) => (
-                      <TableRow key={provider.name + index}>
+                      <TableRow key={name + index}>
-                        <TableCell>{provider.name}</TableCell>
+                        <TableCell>{name}</TableCell>
-                        <TableCell>{provider.prefix}</TableCell>
+                        <TableCell>{prefix}</TableCell>
                       </TableRow>
                     ))}
                   </tbody>

src/data/greeter.json

@@ -42,7 +42,7 @@
       {
         "greeting": "Good evening!",
         "start": 18,
-        "end": 0
+        "end": 24
       }
     ],
     "dateformat": "%wd, %m %d%e %y"

src/lib/fetcher.d.ts

@@ -1,5 +1,5 @@
 import { ISearchProps } from "../components/searchBar";
-import { IBookmarkGroupProps } from "../components/bookmarkGroup";
+import { IBookmarkGroupProps } from "../components/bookmarks";
 import { IAppCategoryProps } from "../components/appCategory";
 import { IAppProps } from "../components/app";
 import { IThemeProps } from "./theme";

src/lib/theme.tsx

@@ -1,6 +1,6 @@
-export interface IThemeProps {
+import { IItemProps } from "../components/select";
-  label: string;
+
-  value: number;
+export interface IThemeProps extends IItemProps {
   mainColor: string;
   accentColor: string;
   backgroundColor: string;

src/test/components/__snapshots__/elements.spec.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tests Button 1`] = `[Function]`;
-
-exports[`Tests Headline 1`] = `[Function]`;
-
-exports[`Tests Lists 1`] = `[Function]`;
-
-exports[`Tests SubHeadline 1`] = `[Function]`;

src/test/components/__snapshots__/modal.spec.tsx.snap

@@ -7,3 +7,5 @@ exports[`modal.tsx Tests modal with icon button 1`] = `[Function]`;
 exports[`modal.tsx Tests modal with neither 1`] = `[Function]`;
 
 exports[`modal.tsx Tests modal with text button 1`] = `[Function]`;
+
+exports[`modal.tsx Tests modal without onClose behaviour 1`] = `[Function]`;

src/test/components/__snapshots__/select.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`select.tsx Tests select rendering 1`] = `[Function]`;

src/test/components/elements.spec.tsx

@@ -1,39 +0,0 @@
-import { render } from "@testing-library/react";
-import {
-  ListContainer,
-  Headline,
-  SubHeadline,
-  ItemList,
-  Item,
-  Button,
-} from "../../components/elements";
-
-it("Tests Lists", () => {
-  const { asFragment } = render(
-    <ListContainer>
-      <ItemList>
-        <Item>Test</Item>
-      </ItemList>
-    </ListContainer>,
-  );
-
-  expect(asFragment).toMatchSnapshot();
-});
-
-it("Tests Headline", () => {
-  const { asFragment } = render(<Headline>Test</Headline>);
-
-  expect(asFragment).toMatchSnapshot();
-});
-
-it("Tests SubHeadline", () => {
-  const { asFragment } = render(<SubHeadline>Test</SubHeadline>);
-
-  expect(asFragment).toMatchSnapshot();
-});
-
-it("Tests Button", () => {
-  const { asFragment } = render(<Button>Test</Button>);
-
-  expect(asFragment).toMatchSnapshot();
-});

src/test/components/icon.spec.tsx

@@ -4,7 +4,7 @@ import Icon, { IconButton } from "../../components/icon";
 const props = {
   name: "bug_report",
   size: "20px",
-  onClick: () => console.log("test"),
+  onClick: jest.fn(),
 };
 
 it("Icon test", () => {
@@ -18,13 +18,12 @@ it("Icon test (no size)", () => {
 });
 
 it("IconButton test", () => {
-  const { asFragment } = render(
+  const iconButton = render(
     <IconButton icon={props.name} onClick={props.onClick} />,
   );
-  expect(asFragment).toMatchSnapshot();
 
-  const handleClick = jest.fn();
+  expect(iconButton.asFragment).toMatchSnapshot();
-  render(<IconButton icon="question_answer" onClick={handleClick} />);
+
-  fireEvent.click(screen.getByText(/question_answer/i));
+  fireEvent.click(screen.getByText(/bug_report/i));
-  expect(handleClick).toHaveBeenCalledTimes(1);
+  expect(props.onClick).toHaveBeenCalledTimes(1);
 });

src/test/components/modal.spec.tsx

@@ -75,4 +75,11 @@ describe("modal.tsx", () => {
     fireEvent.click(modal.getByTestId("close-button"));
     expect(invalidIconProps.onClose).toHaveBeenCalledTimes(2);
   });
+
+  it("Tests modal without onClose behaviour", () => {
+    const modal = setup(noneProps);
+    expect(modal.asFragment).toMatchSnapshot();
+    fireEvent.click(modal.getByTestId("close-button"));
+    expect(iconProps.onClose).toHaveBeenCalledTimes(0);
+  });
 });

src/test/components/select.spec.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render } from "@testing-library/react";
+import Select, { IItemProps } from "../../components/select";
+
+const onChange = jest.fn();
+const items: Array<IItemProps> = [
+  {
+    label: "Test 1",
+    value: 0,
+  },
+  {
+    label: "Test 2",
+    value: 1,
+  },
+];
+
+describe("select.tsx", () => {
+  it("Tests select rendering", () => {
+    const { asFragment } = render(
+      <Select items={items} onChange={(item) => onChange(item)}></Select>,
+    );
+
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests select onChange", () => {
+    const select = render(
+      <Select items={items} onChange={(item) => onChange(item)}></Select>,
+    );
+
+    fireEvent.change(select.getByTestId("select"), { target: { value: 1 } });
+    expect(onChange).toBeCalledWith(items[1]);
+  });
+
+  it("Tests select onChange with undefined item", () => {
+    const select = render(
+      <Select items={items} onChange={(item) => onChange(item)}></Select>,
+    );
+
+    fireEvent.change(select.getByTestId("select"), { target: { value: 5 } });
+    expect(onChange).toBeCalledWith(undefined);
+  });
+});

src/test/components/settings.spec.tsx

@@ -7,7 +7,6 @@ import Settings, {
   HeadCell,
   Section,
   SectionHeadline,
-  SelectorStyle,
 } from "../../components/settings";
 import { ISearchProps } from "../../components/searchBar";
 import { IThemeProps } from "../../lib/theme";
@@ -22,7 +21,7 @@ const themes: Array<IThemeProps> = [
   },
   {
     label: "Classic",
-    value: 0,
+    value: 1,
     mainColor: "#000000",
     accentColor: "#1e272e",
     backgroundColor: "#ffffff",
@@ -116,27 +115,36 @@ describe("settings.tsx", () => {
 
   it("Tests settings rendering", () => {
     propsList.forEach((props) => {
-      const settings = render(
+      const { asFragment } = render(
         <Settings themes={props.themes} search={props.search} />,
       );
 
-      expect(settings.asFragment).toMatchSnapshot();
+      expect(asFragment).toMatchSnapshot();
     });
   });
 
-  // TODO: Finish this test
+  it("Tests submit button", () => {
-  it("Tests theme setting", () => {
+    const settings = render(<Settings themes={themes} search={search} />);
-    const settings = render(
-      <Settings themes={propsList[0].themes} search={propsList[0].search} />,
-    );
 
-    const toggleButton = settings.getByTestId("toggle-button");
+    fireEvent.click(settings.getByTestId("button-refresh"));
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
+  });
 
-    const submitButton = settings.getByTestId("button-submit");
+  it("Tests theme selection", () => {
-    const refreshButton = settings.getByTestId("button-refresh");
+    const settings = render(<Settings themes={themes} search={search} />);
 
-    fireEvent.click(toggleButton);
+    fireEvent.change(settings.getByTestId("select"), { target: { value: 0 } });
 
-    fireEvent.click(submitButton);
+    fireEvent.click(settings.getByTestId("button-submit"));
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
+  });
+
+  it("Tests theme selection", () => {
+    const settings = render(<Settings themes={themes} search={search} />);
+
+    fireEvent.change(settings.getByTestId("select"), { target: { value: 5 } });
+
+    fireEvent.click(settings.getByTestId("button-submit"));
+    expect(window.location.reload).toHaveBeenCalledTimes(0);
   });
 });

yarn.lock

@@ -1164,7 +1164,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
   integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@@ -1226,22 +1226,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@emotion/cache@^11.4.0":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
-  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/sheet" "^1.0.0"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    stylis "^4.0.3"
-
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
 "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -1254,60 +1238,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/memoize@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
-  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
-
-"@emotion/react@^11.1.1":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"
-  integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.0.1"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
-  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
-  dependencies:
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/unitless" "^0.7.5"
-    "@emotion/utils" "^1.0.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
-  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
-
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
+"@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@emotion/utils@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
-  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
-
-"@emotion/weak-memoize@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
 "@eslint/eslintrc@^0.4.2":
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
@@ -1940,30 +1880,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-dom@*", "@types/react-dom@^17.0.3":
+"@types/react-dom@^17.0.3":
   version "17.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.6.tgz#c158325cf91b196270bc0f4af73463f149e7eafe"
   integrity sha512-MGTI+TudxAnGTj8aco8mogaPSJGK2Whje7OZh1CxNLRyhJpTZg/pGQpIbCT0eCVFQyH7UFpdvCqQEThHIp/gsA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-select@^4.0.13":
-  version "4.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.15.tgz#2e6a1cff22c4bbae6c95b8dbee5b5097c12eae54"
-  integrity sha512-GPyBFYGMVFCtF4eg9riodEco+s2mflR10Nd5csx69+bcdvX6Uo9H/jgrIqovBU9yxBppB9DS66OwD6xxgVqOYQ==
-  dependencies:
-    "@emotion/serialize" "^1.0.0"
-    "@types/react" "*"
-    "@types/react-dom" "*"
-    "@types/react-transition-group" "*"
-
-"@types/react-transition-group@*":
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
-  integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*":
   version "17.0.9"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.9.tgz#1147fb520024a62c9b3841f5cb4db89b73ddb87f"
@@ -4346,14 +4269,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5658,7 +5573,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7288,11 +7203,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memoize-one@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -9051,7 +8961,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9266,13 +9176,6 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-input-autosize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
-  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9354,29 +9257,6 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-select@^4.3.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
-  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.1.1"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    react-input-autosize "^3.0.0"
-    react-transition-group "^4.3.0"
-
-react-transition-group@^4.3.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -10570,11 +10450,6 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-stylis@^4.0.3:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
-
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"