Apply prettier over all files

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,11 +1,11 @@
-import React, { FunctionComponent } from "react";
-import { UserNav } from "@components/core";
-import { Button } from "@components/ui";
-import { Trash, Cross } from "@components/icon";
-import { useUI } from "@components/ui/context";
+import React, { FunctionComponent } from 'react'
+import { UserNav } from '@components/core'
+import { Button } from '@components/ui'
+import { Trash, Cross } from '@components/icon'
+import { useUI } from '@components/ui/context'
 
 const CartSidebarView: FunctionComponent = () => {
-  const { closeSidebar } = useUI();
+  const { closeSidebar } = useUI()
   return (
     <>
       <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@@ -57,7 +57,7 @@ const CartSidebarView: FunctionComponent = () => {
         <Button>Proceed to Checkout</Button>
       </div>
     </>
-  );
-};
+  )
+}
 
-export default CartSidebarView;
+export default CartSidebarView

components/cart/CartSidebarView/index.ts

@@ -1 +1 @@
-export { default } from "./CartSidebarView";
+export { default } from './CartSidebarView'

components/cart/index.ts

@@ -1 +1 @@
-export { default as CartSidebarView } from "./CartSidebarView";
+export { default as CartSidebarView } from './CartSidebarView'

components/core/Avatar/Avatar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Avatar.module.css";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Avatar.module.css'
 
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const Avatar: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <img
@@ -17,7 +17,7 @@ const Avatar: FunctionComponent<Props> = ({ className }) => {
         alt=""
       ></img>
     </div>
-  );
-};
+  )
+}
 
-export default Avatar;
+export default Avatar

components/core/Avatar/index.ts

@@ -1 +1 @@
-export { default } from "./Avatar";
+export { default } from './Avatar'

components/core/Featurebar/Featurebar.module.css

@@ -13,7 +13,7 @@
 }
 
 .separator:before {
-  content: "";
+  content: '';
 }
 
 .description {

components/core/Featurebar/Featurebar.tsx

@@ -1,11 +1,11 @@
-import cn from "classnames";
-import { FunctionComponent } from "react";
-import s from "./Featurebar.module.css";
+import cn from 'classnames'
+import { FunctionComponent } from 'react'
+import s from './Featurebar.module.css'
 
 interface Props {
-  className?: string;
-  title: string;
-  description: string;
+  className?: string
+  title: string
+  description: string
 }
 
 const Featurebar: FunctionComponent<Props> = ({
@@ -13,14 +13,14 @@ const Featurebar: FunctionComponent<Props> = ({
   description,
   className,
 }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <span className={s.title}>{title}</span>
       <span className={s.separator} />
       <span className={s.description}>{description}</span>
     </div>
-  );
-};
+  )
+}
 
-export default Featurebar;
+export default Featurebar

components/core/Featurebar/index.ts

@@ -1 +1 @@
-export { default } from "./Featurebar";
+export { default } from './Featurebar'

components/core/Footer/Footer.tsx

@@ -1,20 +1,20 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Footer.module.css";
-import { Container } from "@components/ui";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Footer.module.css'
+import { Container } from '@components/ui'
 
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const Footer: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <footer className={rootClassName}>
       <Container className={s.container}></Container>
     </footer>
-  );
-};
+  )
+}
 
-export default Footer;
+export default Footer

components/core/Footer/index.ts

@@ -1 +1 @@
-export { default } from "./Footer";
+export { default } from './Footer'

components/core/Layout/Layout.tsx

@@ -1,19 +1,19 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Layout.module.css";
-import { Navbar, Featurebar } from "@components/core";
-import { Container, Sidebar } from "@components/ui";
-import { CartSidebarView } from "@components/cart";
-import { useUI } from "@components/ui/context";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Layout.module.css'
+import { Navbar, Featurebar } from '@components/core'
+import { Container, Sidebar } from '@components/ui'
+import { CartSidebarView } from '@components/cart'
+import { useUI } from '@components/ui/context'
 
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const Layout: FunctionComponent<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className);
-  const { displaySidebar } = useUI();
+  const rootClassName = cn(s.root, className)
+  const { displaySidebar } = useUI()
   return (
     <div className={rootClassName}>
       <Featurebar
@@ -30,7 +30,7 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
         </Sidebar>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default Layout;
+export default Layout

components/core/Layout/index.ts

@@ -1 +1 @@
-export { default } from "./Layout";
+export { default } from './Layout'

components/core/Navbar/Navbar.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Navbar.module.css";
-import { Logo, Container } from "@components/ui";
-import { Searchbar } from "@components/core";
-import { UserNav } from "@components/core";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Navbar.module.css'
+import { Logo, Container } from '@components/ui'
+import { Searchbar } from '@components/core'
+import { UserNav } from '@components/core'
 interface Props {
-  className?: string;
+  className?: string
 }
 
 const Navbar: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <Container className={rootClassName}>
       <Logo />
@@ -23,7 +23,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
       </div>
       <UserNav />
     </Container>
-  );
-};
+  )
+}
 
-export default Navbar;
+export default Navbar

components/core/Navbar/index.ts

@@ -1 +1 @@
-export { default } from "./Navbar";
+export { default } from './Navbar'

components/core/Searchbar/Searchbar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Searchbar.module.css";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Searchbar.module.css'
 
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const Searchbar: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="flex-1 flex justify-between px-2">
@@ -26,7 +26,7 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Searchbar;
+export default Searchbar

components/core/Searchbar/index.ts

@@ -1 +1 @@
-export { default } from "./Searchbar";
+export { default } from './Searchbar'

components/core/UserNav/UserNav.tsx

@@ -1,17 +1,17 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./UserNav.module.css";
-import { Avatar } from "@components/core";
-import { Heart, Bag } from "@components/icon";
-import { useUI } from "@components/ui/context";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './UserNav.module.css'
+import { Avatar } from '@components/core'
+import { Heart, Bag } from '@components/icon'
+import { useUI } from '@components/ui/context'
 
 interface Props {
-  className?: string;
+  className?: string
 }
 
 const UserNav: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
-  const { openSidebar } = useUI();
+  const rootClassName = cn(s.root, className)
+  const { openSidebar } = useUI()
 
   return (
     <nav className={rootClassName}>
@@ -30,7 +30,7 @@ const UserNav: FunctionComponent<Props> = ({ className }) => {
         </li>
       </ul>
     </nav>
-  );
-};
+  )
+}
 
-export default UserNav;
+export default UserNav

components/core/UserNav/index.ts

@@ -1 +1 @@
-export { default } from "./UserNav";
+export { default } from './UserNav'

components/core/index.ts

@@ -1,7 +1,7 @@
-export { default as Avatar } from "./Avatar";
-export { default as Featurebar } from "./Featurebar";
-export { default as Footer } from "./Footer";
-export { default as Layout } from "./Layout";
-export { default as Navbar } from "./Navbar";
-export { default as Searchbar } from "./Searchbar";
-export { default as UserNav } from "./UserNav";
+export { default as Avatar } from './Avatar'
+export { default as Featurebar } from './Featurebar'
+export { default as Footer } from './Footer'
+export { default as Layout } from './Layout'
+export { default as Navbar } from './Navbar'
+export { default as Searchbar } from './Searchbar'
+export { default as UserNav } from './UserNav'

components/icon/Bag.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 const Bag = ({ ...props }) => {
   return (
@@ -32,7 +32,7 @@ const Bag = ({ ...props }) => {
         strokeLinejoin="round"
       />
     </svg>
-  );
-};
+  )
+}
 
-export default Bag;
+export default Bag

components/icon/Cross.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 const Cross = ({ ...props }) => {
   return (
@@ -10,7 +10,7 @@ const Cross = ({ ...props }) => {
         d="M6 18L18 6M6 6l12 12"
       />
     </svg>
-  );
-};
+  )
+}
 
-export default Cross;
+export default Cross

components/icon/Heart.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 const Heart = ({ ...props }) => {
   return (
@@ -18,7 +18,7 @@ const Heart = ({ ...props }) => {
         strokeLinejoin="round"
       />
     </svg>
-  );
-};
+  )
+}
 
-export default Heart;
+export default Heart

components/icon/Trash.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 
 const Trash = ({ ...props }) => {
   return (
@@ -39,7 +39,7 @@ const Trash = ({ ...props }) => {
         strokeLinejoin="round"
       />
     </svg>
-  );
-};
+  )
+}
 
-export default Trash;
+export default Trash

components/icon/index.ts

@@ -1,4 +1,4 @@
-export { default as Bag } from "./Bag";
-export { default as Heart } from "./Heart";
-export { default as Trash } from "./Trash";
-export { default as Cross } from "./Cross";
+export { default as Bag } from './Bag'
+export { default as Heart } from './Heart'
+export { default as Trash } from './Trash'
+export { default as Cross } from './Cross'

components/product/ProductCard/ProductCard.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
-import s from "./ProductCard.module.css";
-import React, { FunctionComponent } from "react";
-import { Heart } from "@components/icon";
+import cn from 'classnames'
+import s from './ProductCard.module.css'
+import React, { FunctionComponent } from 'react'
+import { Heart } from '@components/icon'
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const ProductCard: FunctionComponent<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="absolute">
@@ -26,7 +26,7 @@ const ProductCard: FunctionComponent<Props> = ({ className }) => {
         <div className="bg-violet h-full"></div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ProductCard;
+export default ProductCard

components/product/ProductCard/index.ts

@@ -1 +1 @@
-export { default } from "./ProductCard";
+export { default } from './ProductCard'

components/product/ProductGrid/ProductGrid.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./ProductGrid.module.css";
-import ProductCard from "@components/ProductCard";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './ProductGrid.module.css'
+import ProductCard from '@components/ProductCard'
 interface Props {
-  className?: string;
-  children?: any;
-  products: [any];
+  className?: string
+  children?: any
+  products: [any]
 }
 
 const ProductView: FunctionComponent<Props> = ({ products, className }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="row-span-2 lg:col-span-2 bg-violet h-full"></div>
@@ -19,7 +19,7 @@ const ProductView: FunctionComponent<Props> = ({ products, className }) => {
       <div className="row-span-2 lg:col-span-2 bg-blue h-full"></div>
       <div className="row-span-1 lg:col-span-1 bg-cyan"></div>
     </div>
-  );
-};
+  )
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductGrid/index.ts

@@ -1 +1 @@
-export { default } from "./ProductGrid";
+export { default } from './ProductGrid'

components/product/ProductView/ProductView.tsx

@@ -1,18 +1,18 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./ProductView.module.css";
-import { Button } from "@components/ui";
-import { Swatch } from "@components/product";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './ProductView.module.css'
+import { Button } from '@components/ui'
+import { Swatch } from '@components/product'
 
 interface Props {
-  className?: string;
-  children?: any;
-  productData: ProductData;
+  className?: string
+  children?: any
+  productData: ProductData
 }
 
 const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
-  const rootClassName = cn(s.root, className);
-  console.log(productData);
+  const rootClassName = cn(s.root, className)
+  console.log(productData)
   return (
     <div className={rootClassName}>
       <div className="absolute">
@@ -53,7 +53,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
         </section>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ProductView;
+export default ProductView

components/product/ProductView/index.ts

@@ -1 +1 @@
-export { default } from "./ProductView";
+export { default } from './ProductView'

components/product/Swatch/Swatch.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Swatch.module.css";
-import { Colors } from "@components/ui/types";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Swatch.module.css'
+import { Colors } from '@components/ui/types'
 
 interface Props {
-  className?: string;
-  children?: any;
-  active?: boolean;
-  color?: Colors;
-  size?: string;
+  className?: string
+  children?: any
+  active?: boolean
+  color?: Colors
+  size?: string
 }
 
 const Swatch: FunctionComponent<Props> = ({
@@ -22,14 +22,14 @@ const Swatch: FunctionComponent<Props> = ({
     {
       [s.active]: active,
       [s.size]: size,
-      [s.colorPink]: color === "pink",
-      [s.colorWhite]: color === "white",
-      [s.colorBlack]: color === "black",
-      [s.colorViolet]: color === "violet",
+      [s.colorPink]: color === 'pink',
+      [s.colorWhite]: color === 'white',
+      [s.colorBlack]: color === 'black',
+      [s.colorViolet]: color === 'violet',
     },
     className
-  );
-  return <span className={rootClassName}>{size ? size : null}</span>;
-};
+  )
+  return <span className={rootClassName}>{size ? size : null}</span>
+}
 
-export default Swatch;
+export default Swatch

components/product/Swatch/index.ts

@@ -1 +1 @@
-export { default } from "./Swatch";
+export { default } from './Swatch'

components/product/index.ts

@@ -1,4 +1,4 @@
-export { default as Swatch } from "./Swatch";
-export { default as ProductView } from "./ProductView";
-export { default as ProductCard } from "./ProductCard";
-export { default as ProductGrid } from "./ProductGrid";
+export { default as Swatch } from './Swatch'
+export { default as ProductView } from './ProductView'
+export { default as ProductCard } from './ProductCard'
+export { default as ProductGrid } from './ProductGrid'

components/product/types.ts

@@ -1,5 +1,5 @@
-import { Colors } from "@components/ui/types";
-export { Product } from "@lib/bigcommerce";
+import { Colors } from '@components/ui/types'
+export { Product } from '@lib/bigcommerce'
 
 // export type ProductData = {
 //   title: string;

components/ui/Button/Button.tsx

@@ -1,43 +1,43 @@
-import cn from "classnames";
-import React, { ButtonHTMLAttributes } from "react";
-import s from "./Button.module.css";
+import cn from 'classnames'
+import React, { ButtonHTMLAttributes } from 'react'
+import s from './Button.module.css'
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  href?: string;
-  className?: string;
-  variant?: "filled" | "outlined" | "flat" | "none";
-  active?: boolean;
-  type?: "submit" | "reset" | "button";
+  href?: string
+  className?: string
+  variant?: 'filled' | 'outlined' | 'flat' | 'none'
+  active?: boolean
+  type?: 'submit' | 'reset' | 'button'
 }
 
 export default class Button extends React.Component<Props> {
   public render() {
     const {
       className,
-      variant = "filled",
+      variant = 'filled',
       children,
       disabled = false,
       href,
       active,
       ...rest
-    } = this.props;
+    } = this.props
 
     let Component: React.ComponentType<
       React.AnchorHTMLAttributes<
         HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
       > &
         React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
-    > = "a" as any;
+    > = 'a' as any
 
     // Catch for buttons / span / stc.
 
     const rootClassName = cn(
       s.root,
       {
-        [s.filled]: variant === "filled",
+        [s.filled]: variant === 'filled',
       },
       className
-    );
+    )
 
     return (
       <Component
@@ -49,6 +49,6 @@ export default class Button extends React.Component<Props> {
       >
         {children}
       </Component>
-    );
+    )
   }
 }

components/ui/Button/index.ts

@@ -1 +1 @@
-export { default } from "./Button";
+export { default } from './Button'

components/ui/ClickOutside/ClickOutside.tsx

@@ -3,47 +3,47 @@ import React, {
   MutableRefObject,
   useEffect,
   useRef,
-} from "react";
+} from 'react'
 
-import { Component } from "react";
-import PropTypes from "prop-types";
+import { Component } from 'react'
+import PropTypes from 'prop-types'
 
 export interface ClickOutsideProps {
-  onClickOutside: (e?: MouseEvent) => void;
-  children: React.ReactNode | any;
-  render: () => void;
+  onClickOutside: (e?: MouseEvent) => void
+  children: React.ReactNode | any
+  render: () => void
 }
 
 export default class ClickOutside extends Component<ClickOutsideProps> {
-  public domNode: Element | null = null;
+  public domNode: Element | null = null
 
   handleRef = (element) => {
-    this.domNode = element;
-  };
+    this.domNode = element
+  }
 
   public componentDidMount() {
-    document.addEventListener("click", this.handleClick, true);
+    document.addEventListener('click', this.handleClick, true)
   }
 
   public componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClick, true);
-    document.removeEventListener("touchstart", this.handleClick, true);
+    document.removeEventListener('mousedown', this.handleClick, true)
+    document.removeEventListener('touchstart', this.handleClick, true)
   }
 
   public handleClick = (event) => {
     function hasParent(element, root) {
-      return root && root.contains(element);
+      return root && root.contains(element)
     }
 
     if (!hasParent(event.target, this.domNode)) {
-      if (typeof this.props.onClickOutside === "function") {
-        this.props.onClickOutside(event);
+      if (typeof this.props.onClickOutside === 'function') {
+        this.props.onClickOutside(event)
       }
     }
-  };
+  }
 
   render() {
-    return null;
+    return null
     // return this.props.render({
     //   innerRef: this.handleRef,
     // });

components/ui/ClickOutside/index.ts

@@ -1 +1 @@
-export { default } from "./ClickOutside";
+export { default } from './ClickOutside'

components/ui/Container/Container.tsx

@@ -1,25 +1,25 @@
-import cn from "classnames";
-import { FunctionComponent } from "react";
-import s from "./Container.module.css";
+import cn from 'classnames'
+import { FunctionComponent } from 'react'
+import s from './Container.module.css'
 
 interface Props {
-  className?: string;
-  children?: any;
-  el?: HTMLElement;
+  className?: string
+  children?: any
+  el?: HTMLElement
 }
 
 const Container: FunctionComponent<Props> = ({
   children,
   className,
-  el = "div",
+  el = 'div',
 }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement
-  >> = el as any;
+  >> = el as any
 
-  return <Component className={rootClassName}>{children}</Component>;
-};
+  return <Component className={rootClassName}>{children}</Component>
+}
 
-export default Container;
+export default Container

components/ui/Container/index.ts

@@ -1 +1 @@
-export { default } from "./Container";
+export { default } from './Container'

components/ui/Logo/Logo.tsx

@@ -35,6 +35,6 @@ const Logo = () => (
       strokeWidth="0.30634"
     />
   </svg>
-);
+)
 
-export default Logo;
+export default Logo

components/ui/Logo/index.ts

@@ -1 +1 @@
-export { default } from "./Logo";
+export { default } from './Logo'

components/ui/Sidebar/Sidebar.tsx

@@ -1,14 +1,14 @@
-import cn from "classnames";
-import React, { FunctionComponent } from "react";
-import s from "./Sidebar.module.css";
+import cn from 'classnames'
+import React, { FunctionComponent } from 'react'
+import s from './Sidebar.module.css'
 
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
-  const rootClassName = cn(s.root, className);
+  const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>
       <div className="fixed inset-0 overflow-hidden shadow-sm bg-black bg-opacity-25">
@@ -23,7 +23,7 @@ const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Sidebar;
+export default Sidebar

components/ui/Sidebar/index.ts

@@ -1 +1 @@
-export { default } from "./Sidebar";
+export { default } from './Sidebar'

components/ui/_BLANK/Featurebar.tsx

@@ -1,15 +1,15 @@
-import cn from "classnames";
-import { FunctionComponent } from "react";
-import s from "./Featurebar.module.css";
+import cn from 'classnames'
+import { FunctionComponent } from 'react'
+import s from './Featurebar.module.css'
 
 interface Props {
-  className?: string;
-  children?: any;
+  className?: string
+  children?: any
 }
 
 const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
-  const rootClassName = cn(s.root, className);
-  return <div className={rootClassName}>{children}</div>;
-};
+  const rootClassName = cn(s.root, className)
+  return <div className={rootClassName}>{children}</div>
+}
 
-export default Featurebar;
+export default Featurebar

components/ui/_BLANK/index.ts

@@ -1 +1 @@
-export { default } from "./Featurebar";
+export { default } from './Featurebar'

components/ui/context.tsx

@@ -1,56 +1,56 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react'
 
 export interface UIState {
-  displaySidebar: boolean;
-  openSidebar: () => {};
-  closeSidebar: () => {};
+  displaySidebar: boolean
+  openSidebar: () => {}
+  closeSidebar: () => {}
 }
 
 const initialState = {
   displaySidebar: false,
   openSidebar: null,
   closeSidebar: null,
-};
+}
 
-export const UIContext = React.createContext(initialState);
-UIContext.displayName = "UIContext";
+export const UIContext = React.createContext(initialState)
+UIContext.displayName = 'UIContext'
 
 export const UIProvider: FunctionComponent = (props) => {
-  const [state, dispatch] = React.useReducer(uiReducer, initialState);
+  const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
-  const openSidebar = () => dispatch("OPEN_SIDEBAR");
-  const closeSidebar = () => dispatch("CLOSE_SIDEBAR");
+  const openSidebar = () => dispatch('OPEN_SIDEBAR')
+  const closeSidebar = () => dispatch('CLOSE_SIDEBAR')
 
   const value = {
     ...state,
     openSidebar,
     closeSidebar,
-  };
+  }
 
-  return <UIContext.Provider value={value} {...props} />;
-};
+  return <UIContext.Provider value={value} {...props} />
+}
 
 export const useUI = () => {
-  const context = React.useContext(UIContext);
+  const context = React.useContext(UIContext)
   if (context === undefined) {
-    throw new Error(`useUI must be used within a UIProvider`);
+    throw new Error(`useUI must be used within a UIProvider`)
   }
-  return context;
-};
+  return context
+}
 
 function uiReducer(state, action) {
   switch (action) {
-    case "OPEN_SIDEBAR": {
+    case 'OPEN_SIDEBAR': {
       return {
         ...state,
         displaySidebar: true,
-      };
+      }
     }
-    case "CLOSE_SIDEBAR": {
+    case 'CLOSE_SIDEBAR': {
       return {
         ...state,
         displaySidebar: false,
-      };
+      }
     }
   }
 }

components/ui/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from "./Button";
-export { default as Container } from "./Container";
-export { default as Sidebar } from "./Sidebar";
-export { default as Logo } from "./Logo";
+export { default as Button } from './Button'
+export { default as Container } from './Container'
+export { default as Sidebar } from './Sidebar'
+export { default as Logo } from './Logo'

components/ui/types.ts

@@ -1 +1 @@
-export type Colors = "violet" | "black" | "pink" | "white";
+export type Colors = 'violet' | 'black' | 'pink' | 'white'