Create custom select, update tests

2021-06-30 00:56:01 +02:00 · 2021-06-30 00:56:01 +02:00 · d8c9e57dee
commit d8c9e57dee
parent bfc8caf091
21 changed files with 189 additions and 300 deletions
--- a/package.json
+++ b/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",
--- a/src/app.tsx
+++ b/src/app.tsx
@ -43,13 +43,12 @@ const App = () => {
      <GlobalStyle />
      <div>
        <SearchBar search={searchProviderData?.search} />
-        {!themeData.error ||
-          (!searchProviderData.error && (
+        {(!themeData.error || !searchProviderData.error) && (
          <Settings
            themes={themeData?.themes}
            search={searchProviderData?.search}
          />
-          ))}
+        )}
        <Greeter data={greeterData.greeter} />
        {!appData.error && (
          <AppList apps={appData.apps} categories={appData.categories} />
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@ -27,7 +27,7 @@ const DetailsContainer = styled.div`
 `;

 const AppName = styled.div`
-  a:hover & {
+  a:hover {
    text-decoration: underline;
  }
 `;
--- a/src/components/appCategory.tsx
+++ b/src/components/appCategory.tsx
@ -24,14 +24,14 @@ const AppCategory = ({ name, items }: IAppCategoryProps) => (
  <CategoryContainer>
    {name && <CategoryHeadline>{name}</CategoryHeadline>}
    <ItemList>
-      {items.map((app, idx) => (
-        <Item key={[app.name, idx].join("")}>
+      {items.map(({ name, icon, displayURL, newTab, url }, index) => (
+        <Item key={[name, index].join("")}>
          <App
-            name={app.name}
-            icon={app.icon}
-            url={app.url}
-            displayURL={app.displayURL}
-            newTab={app.newTab}
+            name={name}
+            icon={icon}
+            url={url}
+            displayURL={displayURL}
+            newTab={newTab}
          />
        </Item>
      ))}
--- a/src/components/appList.tsx
+++ b/src/components/appList.tsx
@ -19,8 +19,12 @@ const AppList = ({ categories, apps }: IAppListProps) => {
      <ListContainer>
        <Headline>Applications</Headline>
        {categories &&
-          categories.map(({ name, items }, idx) => (
-            <AppCategory key={[name, idx].join("")} name={name} items={items} />
+          categories.map(({ name, items }, index) => (
+            <AppCategory
+              key={[name, index].join("")}
+              name={name}
+              items={items}
+            />
          ))}
        {apps && (
          <AppCategory
--- a/src/components/bookmarks.tsx
+++ b/src/components/bookmarks.tsx
@ -50,8 +50,8 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
  <Item>
    <GroupContainer>
      <SubHeadline>{name}</SubHeadline>
-      {items.map(({ name, url }, idx) => (
-        <Bookmark key={[name, idx].join("")} href={url}>
+      {items.map(({ name, url }, index) => (
+        <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) => (
-        <BookmarkGroup key={[name, idx].join("")} name={name} items={items} />
+      {groups.map(({ name, items }, index) => (
+        <BookmarkGroup key={[name, index].join("")} name={name} items={items} />
      ))}
    </ItemList>
  </ListContainer>
--- a/src/components/elements.tsx
+++ b/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};
--- a/src/components/select.tsx
+++ b/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;
--- a/src/components/settings.tsx
+++ b/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 = {
-  container: (base: any): any => ({
-    ...base,
-    margin: "0 2px",
-  }),
-  control: (base: any): any => ({
-    ...base,
-    fontWeight: 500,
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    width: "12rem",
-    background: "none",
-    borderRadius: 0,
-    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,
-  }),
-};
+const ThemeSelect = styled(Select)`
+  -webkit-appearance: button;
+  -moz-appearance: button;
+
+  text-transform: uppercase;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  border: 1px solid ${selectedTheme.mainColor};
+  color: ${selectedTheme.mainColor};
+  background: none;
+
+  & > option {
+    background-color: ${selectedTheme.backgroundColor};
+  }
+`;

 interface ISettingsProps {
  themes: Array<IThemeProps> | undefined;
@ -133,15 +91,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
          <Section>
            <SectionHeadline>Theme:</SectionHeadline>
            <FormContainer>
-              <Select
-                classNamePrefix="list"
-                options={themes}
-                defaultValue={selectedTheme}
-                onChange={(e: ValueType<IThemeProps, false>) => {
-                  if (e !== null && e !== undefined) setNewTheme(e);
-                }}
-                styles={SelectorStyle}
-              />
+              <ThemeSelect
+                items={themes}
+                onChange={(theme: IThemeProps) => setNewTheme(theme)}
+              ></ThemeSelect>
              <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) => (
-                      <TableRow key={provider.name + index}>
-                        <TableCell>{provider.name}</TableCell>
-                        <TableCell>{provider.prefix}</TableCell>
+                    {search.providers.map(({ name, prefix }, index) => (
+                      <TableRow key={name + index}>
+                        <TableCell>{name}</TableCell>
+                        <TableCell>{prefix}</TableCell>
                      </TableRow>
                    ))}
                  </tbody>
--- a/src/data/greeter.json
+++ b/src/data/greeter.json
@ -42,7 +42,7 @@
      {
        "greeting": "Good evening!",
        "start": 18,
-        "end": 0
+        "end": 24
      }
    ],
    "dateformat": "%wd, %m %d%e %y"
--- a/src/lib/fetcher.d.ts
+++ b/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";
--- a/src/lib/theme.tsx
+++ b/src/lib/theme.tsx
@ -1,6 +1,6 @@
-export interface IThemeProps {
-  label: string;
-  value: number;
+import { IItemProps } from "../components/select";
+
+export interface IThemeProps extends IItemProps {
  mainColor: string;
  accentColor: string;
  backgroundColor: string;
--- a/src/test/components/snapshots/elements.spec.tsx.snap
+++ b/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]`;
--- a/src/test/components/snapshots/modal.spec.tsx.snap
+++ b/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]`;
--- a/src/test/components/snapshots/select.spec.tsx.snap
+++ b/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]`;
--- a/src/test/components/elements.spec.tsx
+++ b/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();
-});
--- a/src/test/components/icon.spec.tsx
+++ b/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();
-  render(<IconButton icon="question_answer" onClick={handleClick} />);
-  fireEvent.click(screen.getByText(/question_answer/i));
-  expect(handleClick).toHaveBeenCalledTimes(1);
+  expect(iconButton.asFragment).toMatchSnapshot();
+
+  fireEvent.click(screen.getByText(/bug_report/i));
+  expect(props.onClick).toHaveBeenCalledTimes(1);
 });
--- a/src/test/components/modal.spec.tsx
+++ b/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);
+  });
 });
--- a/src/test/components/select.spec.tsx
+++ b/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);
+  });
+});
--- a/src/test/components/settings.spec.tsx
+++ b/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 theme setting", () => {
-    const settings = render(
-      <Settings themes={propsList[0].themes} search={propsList[0].search} />,
-    );
+  it("Tests submit button", () => {
+    const settings = render(<Settings themes={themes} search={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");
-    const refreshButton = settings.getByTestId("button-refresh");
+  it("Tests theme selection", () => {
+    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);
  });
 });
--- a/yarn.lock
+++ b/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"