refactor(app): switch to @phosphor-icons/core and format files

src/components/App/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   const { getByText } = render(<App />);
   const linkElement = getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -5,13 +5,16 @@ interface ErrorBoundaryProps {
 }
 
 interface ErrorBoundaryState {
-  errorMessage?: string
+  errorMessage?: string;
 }
 
-export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export default class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
   constructor(props: any) {
     super(props);
-    this.state = { errorMessage: "" }
+    this.state = { errorMessage: "" };
   }
 
   static getDerivedStateFromError(error: any) {

src/components/Footer/Footer.tsx

@@ -34,8 +34,8 @@ const Footer: React.FC<FooterProps> = () => {
             a little quirky, too.
           </p>
           <p>
-            We're thankful for the tools we've benefited from and
-            this is our contribution towards a collaborative community.
+            We're thankful for the tools we've benefited from and this is our
+            contribution towards a collaborative community.
           </p>
           <p>
             Phosphor is free and open-source, licensed under{" "}

src/components/Notice/Notice.tsx

@@ -11,7 +11,11 @@ interface NoticeProps {
   type?: "wait" | "help" | "warn" | "none";
 }
 
-const Notice: React.FC<NoticeProps> = ({ message, type = "warn", children }) => {
+const Notice: React.FC<NoticeProps> = ({
+  message,
+  type = "warn",
+  children,
+}) => {
   const isDark = useRecoilValue(isDarkThemeSelector);
   const query = useRecoilValue(searchQueryAtom);
 

src/components/SearchInput/SearchInput.tsx

@@ -19,7 +19,8 @@ type SearchInputProps = {};
 const SearchInput: React.FC<SearchInputProps> = () => {
   const [value, setValue] = useState<string>("");
   const [query, setQuery] = useRecoilState(searchQueryAtom);
-  const inputRef = useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>;
+  const inputRef =
+    useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>;
 
   useHotkeys("ctrl+k,cmd+k", (e) => {
     e.preventDefault();

src/components/StyleInput/StyleInput.tsx

@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
 import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
+import { IconStyle } from "@phosphor-icons/core";
 
 import { iconWeightAtom } from "../../state/atoms";
-import { IconStyle } from "../../lib";
 import "./StyleInput.css";
 
 type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };