fix: lint & build error fixes

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.removeUnusedImports": "explicit"
+  }
+}

apps/web/.eslintrc.json

@@ -1,3 +1,4 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:perfectionist/recommended-natural"]
+  "extends": ["next/core-web-vitals", "plugin:perfectionist/recommended-natural"],
+  "rules": { "react-hooks/exhaustive-deps": "off" }
 }

apps/web/app/(main)/code/generate-button.tsx

@@ -43,7 +43,7 @@ function CodeGenerateButton({
   title: CodeButtonTitle
   type: CodeGenerateType
 }) {
-  const { colorPalettes, baseColors } = useColorStore((s) => s.colors)
+  const { baseColors, colorPalettes } = useColorStore((s) => s.colors)
   const { colorMode } = useToolStore()
   const [code, setCode] = useState<string>('')
   const { copyText, isCopied } = useCopyText()

apps/web/app/(main)/code/page.tsx

@@ -12,7 +12,7 @@ import CodeGenerateButton from './generate-button'
 
 type CodeButtonType = {
   available?: boolean
-  icon: React.FC<React.SVGProps<SVGSVGElement>>
+  icon: React.ElementType | React.FC<React.SVGProps<SVGSVGElement>>
   title: CodeButtonTitle
   type: CodeGenerateType
 }
@@ -62,7 +62,14 @@ export default function CodeGenPage() {
   )
 }
 
-const CardButton = ({ available = true, icon: Icon, title, type }) => (
+type CardButtonProps = {
+  available?: boolean
+  icon: React.ElementType | React.FC<React.SVGProps<SVGSVGElement>>
+  title: CodeButtonTitle
+  type: CodeGenerateType
+}
+
+const CardButton = ({ available = true, icon: Icon, title, type }: CardButtonProps) => (
   <Card className="relative flex flex-col items-center justify-center space-y-4 overflow-hidden py-6">
     <div className="relative z-10 flex items-center justify-center rounded-full border border-border/60 p-1.5">
       <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border/20 bg-white/30 shadow-sm backdrop-blur-sm backdrop-saturate-200 dark:bg-background-accent/30">

apps/web/app/(main)/layout.tsx

@@ -6,6 +6,7 @@ import { colorHelper } from '@/lib/colorHelper'
 import { generateBaseColors } from '@/lib/generateBaseColors'
 import { BaseColorTypes } from '@/types/app'
 import '@ui/styles/globals.css'
+import { Suspense } from 'react'
 
 import { getColorNames } from '../actions'
 import StyleSheetInitializer from '../stylesheet-initializer'
@@ -24,7 +25,9 @@ async function MainLayout({ children }: { children: React.ReactNode }) {
   )
   return (
     <ColorStoreProvider {...{ ...baseColors, colorNames, colors }}>
-      <StyleSheetInitializer />
+      <Suspense fallback={null}>
+        <StyleSheetInitializer />
+      </Suspense>
       <SiteHeader />
       <Toolbar />
       {children}

apps/web/app/(main)/page.tsx

@@ -8,6 +8,9 @@ import SearchParamsLoadingIndicator from '../search-params-loading-indicator'
 type Props = {
   searchParams: { colors: string } | undefined
 }
+
+export const dynamic = 'force-dynamic'
+
 export async function generateMetadata({ searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
   const colors = searchParams?.colors
   let paletteColors = ''

apps/web/app/(main)/visualizer/chart/page.tsx

@@ -114,7 +114,7 @@ const OverView = () => {
   )
 }
 
-const BreakDown = ({ factor, seed, title, unit }) => {
+const BreakDown = ({ factor, seed, title, unit }: { factor: number; seed: number; title: string; unit: string }) => {
   const r = () => Math.random() * 90 * factor + 10
   const [pieData, setPieData] = useState([
     { name: 'Group A', value: 0 },

apps/web/app/(main)/visualizer/layout.tsx

@@ -1,24 +1,26 @@
-import ColorPickerFab from "@/components/core/color-picker-fab";
-import GraphicVisualizer from "@/components/graphic-visualizer";
-import { Card } from "ui/components/ui/card";
+import ColorPickerFab from '@/components/core/color-picker-fab'
+import GraphicVisualizer from '@/components/graphic-visualizer'
+import { Suspense } from 'react'
+import { Card } from 'ui/components/ui/card'
 
-import VisualizerNav from "./visualizer-nav";
+import VisualizerNav from './visualizer-nav'
 
-export default function Layout({ children }) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="site-padding mx-auto mt-6 flex w-full max-w-[120rem] flex-1 flex-col pb-20 sm:pb-24 md:mt-8 lg:mt-10">
       <section>
         <Card className="relative flex min-h-[max(80vh,960px)] flex-1 flex-col overflow-hidden">
-          <VisualizerNav />
-          <div className="flex h-full w-full flex-1 flex-col items-stretch justify-center">
-            {children}
-          </div>
+          <Suspense fallback={null}>
+            <VisualizerNav />
+          </Suspense>
+
+          <div className="flex h-full w-full flex-1 flex-col items-stretch justify-center">{children}</div>
         </Card>
       </section>
       <section>
         <GraphicVisualizer />
       </section>
       <ColorPickerFab />
     </div>
-  );
+  )
 }

apps/web/app/api/og/route.tsx

@@ -21,9 +21,9 @@ export async function GET(request: Request) {
     const accent = searchParams.get('accent')
 
     const baseColors = {
+      accent: accent ?? '#0000FF',
       primary: primary ?? '#FF0000',
       secondary: secondary ?? '#00FF00',
-      accent: accent ?? '#0000FF',
     }
 
     const colors = generateColors(baseColors)

apps/web/app/layout.tsx

@@ -2,7 +2,6 @@ import type { Metadata, Viewport } from 'next'
 
 import SiteFooter from '@/components/core/site-footer'
 import { ThemeProvider } from '@/components/core/theme-provider'
-
 import { Toaster } from '@/components/ui/sonner'
 import '@ui/styles/globals.css'
 import { Comfortaa, Inter } from 'next/font/google'
@@ -18,8 +17,8 @@ export const viewport: Viewport = {
   initialScale: 1.0,
   maximumScale: 1.0,
   userScalable: false,
-  width: 'device-width',
   viewportFit: 'cover',
+  width: 'device-width',
 }
 
 export const metadata: Metadata = {

apps/web/components/core/color-picker-fab-button.tsx

@@ -12,8 +12,8 @@ import ColorPickerModal from '../palette/color-picker-modal'
 const ColorPickerFabButton = ({ type }: { type: keyof ColorOptions }) => {
   const [isOpen, setIsOpen] = useState(false)
   const {
-    setColor,
     colors: { baseColors },
+    setColor,
   } = useColorStore((s) => s)
   const colorString = colorHelper.toColorMode(baseColors[type], ColorMode.HEX)
   const shadowColor = {

apps/web/components/core/site-footer.tsx

@@ -1,6 +1,6 @@
+import Link from 'next/link'
 import { cn } from 'ui/lib/utils'
 
-import Link from 'next/link'
 import app from '../../../../package.json'
 
 function SiteFooter() {
@@ -13,7 +13,7 @@ function SiteFooter() {
     >
       <div className="mx-auto max-w-[120rem] px-6 py-4 md:flex md:items-center md:justify-between lg:px-8">
         <div className="flex justify-center space-x-6 md:order-2">
-          <Link href="/how" className="text-xs text-foreground/50 underline">
+          <Link className="text-xs text-foreground/50 underline" href="/how">
             How it works
           </Link>
 

apps/web/components/palette/analogous-mono-palettes.tsx

@@ -36,13 +36,13 @@ const PillPalette = ({ color, type }: { color: string; type: 'analogous' | 'mono
   }
   return (
     <div
-      id={`${type}-palette`}
       className={cn(
         'scroll-mt-8',
         'col-span-2 flex flex-col gap-3 md:gap-4',
         '@md/section-primary:col-span-1',
         '@md/section-secondary:col-span-1'
       )}
+      id={`${type}-palette`}
     >
       {colors.map((c, i) => {
         const isDark = tinycolor(color).isDark()

apps/web/components/palette/base-color-palettes.tsx

@@ -1,21 +1,19 @@
 'use client'
 
 import { useColorStore } from '@/context/color-store-provider'
-
+import { ColorStep, colorStepMap } from '@/lib/colorStepMap'
 import { useToolStore } from '@/store/toolStore'
 import { BaseColorTypes } from '@/types/app'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@ui/components/ui/hover-card'
+import { Separator } from '@ui/components/ui/separator'
 import { cn } from '@ui/lib/utils'
+import { AArrowUp, X } from 'lucide-react'
+import { useState } from 'react'
 
-import { ColorStep, colorStepMap } from '@/lib/colorStepMap'
-import { Separator } from '@ui/components/ui/separator'
 import PaletteButton from './base-palette-button'
 import ColorString from './color-string'
 import ReadabilityString from './readability-string'
 
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '@ui/components/ui/hover-card'
-import { AArrowUp, X } from 'lucide-react'
-import { useState } from 'react'
-
 const ReadabilityBadge = ({ score }: { score?: number }) => {
   if (!score) return null
   const eligibleText = `WCAG compliance level ${score >= 7 ? 'AAA' : 'AA'} with a score of ${score}`
@@ -128,7 +126,7 @@ function BaseColorPalettes() {
   const colorPaletteNames: BaseColorTypes[] = ['primary', 'secondary', 'accent', 'gray']
   const handleDragClipPath = (e: React.MouseEvent) => {
     const { clientX, clientY } = e
-    const { left, right, top, bottom } = e.currentTarget.getBoundingClientRect()
+    const { bottom, left, right, top } = e.currentTarget.getBoundingClientRect()
     const width = right - left
     const cursorX = ((clientX - left) / width) * 100
     const cursorY = ((clientY - top) / (bottom - top)) * 100
@@ -208,20 +206,20 @@ function BaseColorPalettes() {
                     </div>
                   </HoverCardTrigger>
                   <HoverCardContent
+                    className="group/hover-card relative mx-4 flex min-h-[10rem] w-[min(22rem,100svw)] flex-col items-stretch justify-stretch p-0 shadow-2xl"
                     style={{
                       backgroundColor: colorPalettes[type][0]?.color,
                     }}
-                    className="group/hover-card relative mx-4 flex min-h-[10rem] w-[min(22rem,100svw)] flex-col items-stretch justify-stretch p-0 shadow-2xl"
                   >
                     <div
                       className="absolute inset-x-0 inset-y-0 z-[12] w-full cursor-none"
-                      onMouseMove={handleDragClipPath}
                       onMouseLeave={() => {
                         setTimeout(() => {
                           setCusorX(51)
                           setCusorY(50)
                         }, 500)
                       }}
+                      onMouseMove={handleDragClipPath}
                     >
                       <div
                         className="absolute z-[13] size-2 -translate-x-3 -translate-y-1 rounded-full opacity-0 ring-2 ring-foreground ring-offset-1 ring-offset-background transition-opacity group-hover/hover-card:opacity-100"
@@ -238,8 +236,8 @@ function BaseColorPalettes() {
                         <PreviewText color={colorPalettes[type][step]?.color} />
 
                         <PreviewText
-                          color={colorPalettes[type][0]?.color}
                           backgroundColor={colorPalettes[type][step]?.color}
+                          color={colorPalettes[type][0]?.color}
                           cursorX={cursorX}
                         />
                       </div>
@@ -260,8 +258,8 @@ function BaseColorPalettes() {
                       <div className="relative w-full flex-1 items-center justify-center overflow-hidden rounded-b-md">
                         <PreviewText color={colorPalettes[type][step]?.color} />
                         <PreviewText
-                          color={colorPalettes[type][10]?.color}
                           backgroundColor={colorPalettes[type][step]?.color}
+                          color={colorPalettes[type][10]?.color}
                           cursorX={cursorX}
                           index={1}
                         />

apps/web/components/palette/base-palette-button.tsx

@@ -66,9 +66,9 @@ const PaletteButton = ({ animation, step, type }: { animation: number; step: num
         duration: isChanging ? animation * 1.2 : 0.3,
       }}
       type="button"
+      whileFocus={{ scale: 1.05 }}
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
-      whileFocus={{ scale: 1.05 }}
     >
       <motion.div
         animate={{

apps/web/components/palette/color-picker.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useColorStore } from '@/context/color-store-provider'
+import useCopyText from '@/hooks/use-copy-text'
 import { textAnimation } from '@/lib/animation'
 import { colorHelper } from '@/lib/colorHelper'
 import { useToolStore } from '@/store/toolStore'
@@ -10,7 +11,6 @@ import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
 import { CopyIcon, Palette } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
-import useCopyText from '@/hooks/use-copy-text'
 import ColorPickerModal from './color-picker-modal'
 
 function ColorPicker({ className, type }: { className?: string; type: keyof ColorOptions }) {

apps/web/components/toolbar/plugin/cvd.plugin.tsx

@@ -13,8 +13,8 @@ import { devtools } from 'zustand/middleware'
 
 export type PluginCvdState = {
   deuteranopia: [number]
-  protanopia: [number]
   isOn: () => boolean
+  protanopia: [number]
   setDeuteranopia: (value: [number]) => void
   setProtanopia: (value: [number]) => void
   setTritanopia: (value: [number]) => void
@@ -24,8 +24,8 @@ export type PluginCvdState = {
 export const usePluginCvdStore = create<PluginCvdState>()(
   devtools((set, get) => ({
     deuteranopia: [0],
-    protanopia: [0],
     isOn: () => get().deuteranopia[0] > 0 || get().protanopia[0] > 0 || get().tritanopia[0] > 0,
+    protanopia: [0],
     setDeuteranopia: (value) =>
       set(
         produce((state) => {
@@ -196,7 +196,7 @@ function CVDPlugin() {
                   </p>
                   <p className="text-xs">
                     G. M. Machado, M. M. Oliveira and L. A. F. Fernandes,&nbsp;
-                    <em>"A Physiologically-based Model for Simulation of Color Vision Deficiency,"</em>
+                    <em>&quot;A Physiologically-based Model for Simulation of Color Vision Deficiency,&quot;</em>
                     &nbsp;in IEEE Transactions on Visualization and Computer Graphics, vol. 15, no. 6, pp. 1291-1298,
                     Nov.-Dec. 2009,&nbsp;
                     <a href="https://doi.ieeecomputersociety.org/10.1109/TVCG.2009.113">doi: 10.1109/TVCG.2009.113</a>.

apps/web/components/toolbar/plugin/download-base-palette.plugin.tsx

@@ -17,7 +17,7 @@ type GenerateImageOptions = {
 
 function DownloadBasePalettePlugin({ setOpen }: { setOpen: (open: boolean) => void }) {
   const [isLoaded, setisLoaded] = useState(false)
-  const [imageData, setImageData] = useState<string | null>(null)
+  const [imageData, setImageData] = useState<null | string>(null)
   const [desktopSize, setDesktopSize] = useState<boolean | undefined>(undefined)
   const [isDesktopSize, setIsDesktopSize] = useState(false)
   const handleGenerateImage = (options: GenerateImageOptions) => {
@@ -117,7 +117,7 @@ function DownloadBasePalettePlugin({ setOpen }: { setOpen: (open: boolean) => vo
         ) : (
           <div />
         )}
-        <Button className="h-8" onClick={handleDownload} size="sm" disabled={!isLoaded}>
+        <Button className="h-8" disabled={!isLoaded} onClick={handleDownload} size="sm">
           <DownloadIcon className="h-4 w-4" />
           <span className="sr-only sm:not-sr-only sm:ms-2">Download image</span>
         </Button>

apps/web/components/ui/sonner.tsx

@@ -10,17 +10,17 @@ const Toaster = ({ ...props }: ToasterProps) => {
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      theme={theme as ToasterProps["theme"]}
       toastOptions={{
         classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
           actionButton:
             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
           cancelButton:
             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          description: "group-[.toast]:text-muted-foreground",
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
         },
       }}
       {...props}