chore(test): replace react-icons with local icon lib, default dark mo…

…de, resume testing
Slick-Telemetry · May 6, 2024 · 79228b2 · 79228b2
1 parent 67f6eba
commit 79228b2
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 33 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -34,11 +34,11 @@ jobs:
       - name: 💅 Prettier check
         run: pnpm format:check
 
-      # - name: ✅ Cypress tests
-      #   uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a
-      #   with:
-      #     browser: chrome
-      #     build: pnpm build
-      #     component: true
-      #     start: pnpm start
-      #     wait-on: 'http://localhost:3000'
+      - name: ✅ Cypress tests
+        uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a
+        with:
+          browser: chrome
+          build: pnpm build
+          component: true
+          start: pnpm start
+          wait-on: 'http://localhost:3000'
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "frontwing",
   "description": "Slick Telemetry frontend written in typescript with nextjs and vercel",
   "author": "Slick Telemetry",
   "license": "GPL-3.0-only",
@@ -31,10 +31,10 @@
     "jotai": "latest",
     "jotai-effect": "latest",
     "lucide-react": "latest",
+    "moment": "latest",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-icons": "latest",
     "tailwind-merge": "latest",
     "tailwindcss-animate": "latest"
   },
@@ -49,7 +49,7 @@
     "@typescript-eslint/parser": "latest",
     "autoprefixer": "latest",
     "cypress": "latest",
-    "eslint": "latest",
+    "eslint": "8.56.0",
     "eslint-config-next": "latest",
     "eslint-config-prettier": "latest",
     "eslint-plugin-cypress": "latest",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang='en'>
+    <html lang='en' className='dark'>
       <body className={clsx('min-h-screen', inter.className)}>
         <Provider>
           <TopNav />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
-import { BsPlusCircle } from 'react-icons/bs';
 
+import { PlusCircle } from '@/components/icons/PlusCircle';
 import { NextEvent } from '@/components/SelectionData';
 
 export default function Home() {
@@ -25,7 +25,7 @@ const Hero = () => (
         </p>
       </div>
 
-      <BsPlusCircle className='h-8 w-8 lg:h-16 lg:w-16 ' />
+      <PlusCircle className='h-8 w-8 lg:h-16 lg:w-16 ' />
 
       {/* Formula */}
       <div className='grid flex-1 gap-2 text-center'>

diff --git a/src/components/QueryNav/Dropdown.tsx b/src/components/QueryNav/Dropdown.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { BsFillCaretDownFill } from 'react-icons/bs';
+
+import { CaretDownFill } from '@/components/icons/CaretDownFill';
 
 import {
   DropdownMenu,
@@ -30,7 +31,7 @@ export const Dropdown = ({ value, items, action }: IDropdown) => {
         className='flex items-center gap-x-2 rounded-full px-4 py-2 disabled:text-muted-foreground'
       >
         <span data-cy='dropdown'>{value}</span>
-        <BsFillCaretDownFill />
+        <CaretDownFill />
       </DropdownMenuTrigger>
       <DropdownMenuContent className='max-h-56 overflow-scroll'>
         <DropdownMenuRadioGroup value={value} onValueChange={handleClick}>

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import { atom, useAtom } from 'jotai';
-import { FaChevronLeft } from 'react-icons/fa';
 
 import { cn } from '@/lib/utils';
 
+import { ChevronLeft } from '@/components/icons/ChevronLeft';
+
 import {
   DriverState,
   EventState,
@@ -46,7 +47,7 @@ export const Sidebar = () => {
         className='absolute right-0 top-0 h-6 w-6 translate-x-2/4 rounded-full'
         onClick={() => setSidebarOpen(!sidebarOpen)}
       >
-        <FaChevronLeft
+        <ChevronLeft
           className={cn('h-2 w-2 transition-transform duration-200', {
             '-rotate-180': sidebarOpen,
           })}

diff --git a/src/components/TopNav/UserNav.tsx b/src/components/TopNav/UserNav.tsx
@@ -1,4 +1,4 @@
-import { BsPersonCircle } from 'react-icons/bs';
+import { PersonCircle } from '@/components/icons/PersonCircle';
 
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import { Button } from '../ui/button';
@@ -20,7 +20,7 @@ export function UserNav() {
           <Avatar className='h-8 w-8'>
             <AvatarImage src='/avatars/01.png' alt='@shadcn' />
             <AvatarFallback>
-              <BsPersonCircle />
+              <PersonCircle />
             </AvatarFallback>
           </Avatar>
         </Button>

diff --git a/src/components/icons/CaretDownFill.tsx b/src/components/icons/CaretDownFill.tsx
@@ -0,0 +1,12 @@
+export const CaretDownFill = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    fill='currentColor'
+    className='bi bi-caret-down-fill'
+    viewBox='0 0 16 16'
+  >
+    <path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' />
+  </svg>
+);
diff --git a/src/components/icons/ChevronLeft.tsx b/src/components/icons/ChevronLeft.tsx
@@ -0,0 +1,20 @@
+import { JSX, SVGProps } from 'react';
+
+export const ChevronLeft = (
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    fill='currentColor'
+    className='bi bi-chevron-left'
+    viewBox='0 0 16 16'
+    {...props}
+  >
+    <path
+      fill-rule='evenodd'
+      d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'
+    />
+  </svg>
+);
diff --git a/src/components/icons/PersonCircle.tsx b/src/components/icons/PersonCircle.tsx
@@ -0,0 +1,16 @@
+export const PersonCircle = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    fill='currentColor'
+    className='bi bi-person-circle'
+    viewBox='0 0 16 16'
+  >
+    <path d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0' />
+    <path
+      fill-rule='evenodd'
+      d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'
+    />
+  </svg>
+);
diff --git a/src/components/icons/PlusCircle.tsx b/src/components/icons/PlusCircle.tsx
@@ -0,0 +1,18 @@
+import { JSX, SVGProps } from 'react';
+
+export const PlusCircle = (
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
+    fill='currentColor'
+    className='bi bi-plus-circle'
+    viewBox='0 0 16 16'
+    {...props}
+  >
+    <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16' />
+    <path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4' />
+  </svg>
+);