Lint

simonkellly · May 24, 2024 · bea7833 · bea7833
1 parent e478a4d
commit bea7833
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 156 deletions.
diff --git a/src/components/layout/ActionBar.tsx b/src/components/layout/ActionBar.tsx
@@ -1,67 +1,84 @@
-import { cn } from "@/lib/utils";
-import { HTMLAttributes, forwardRef } from "react";
-import { Button, ButtonProps } from "../ui/button";
-import { LucideIcon, LucideProps } from "lucide-react";
+import { LucideIcon, LucideProps } from 'lucide-react';
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Button, ButtonProps } from '../ui/button';
 
-export const ActionIcon = forwardRef<SVGSVGElement, LucideProps & { icon: LucideIcon }>(({ ...props }, ref) => (
-  <props.icon
-    className={cn("h-4 w-4", props.className)}
-    ref={ref}
-  />
+export const ActionIcon = forwardRef<
+  SVGSVGElement,
+  LucideProps & { icon: LucideIcon }
+>(({ ...props }, ref) => (
+  <props.icon className={cn('h-4 w-4', props.className)} ref={ref} />
 ));
 
-export const ActionButton = forwardRef<HTMLButtonElement, ButtonProps & { icon?: LucideIcon }>(
-  ({ children, className, ...props }, ref) => (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size={null}
-      className={cn('h-full aspect-square p-1', className)}
-      onClick={e => {
-        e.currentTarget.blur();
-        if (props.onClick) {
-          props.onClick(e);
-        }
-      }}
-      {...props}
-    >
-      {children || (props.icon && <ActionIcon icon={props.icon} />)}  
-    </Button>
-  )
-);
+export const ActionButton = forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { icon?: LucideIcon }
+>(({ children, className, ...props }, ref) => (
+  <Button
+    ref={ref}
+    variant="ghost"
+    size={null}
+    className={cn('h-full aspect-square p-1', className)}
+    onClick={e => {
+      e.currentTarget.blur();
+      if (props.onClick) {
+        props.onClick(e);
+      }
+    }}
+    {...props}
+  >
+    {children || (props.icon && <ActionIcon icon={props.icon} />)}
+  </Button>
+));
 
-export const ActionStart = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => (
+export const ActionStart = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ ...props }, ref) => (
   <div
-    className={cn("flex flex-row h-full basis-1/3", props.className)}
+    className={cn('flex flex-row h-full basis-1/3', props.className)}
     ref={ref}
     {...props}
   />
 ));
 
-export const ActionMiddle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => (
+export const ActionMiddle = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ ...props }, ref) => (
   <div
-    className={cn("flex flex-row h-full basis-1/3 grow justify-center", props.className)}
+    className={cn(
+      'flex flex-row h-full basis-1/3 grow justify-center',
+      props.className
+    )}
     ref={ref}
     {...props}
   />
 ));
 
-export const ActionEnd = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => (
+export const ActionEnd = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ ...props }, ref) => (
   <div
-    className={cn("flex flex-row-reverse h-full basis-1/3", props.className)}
+    className={cn('flex flex-row-reverse h-full basis-1/3', props.className)}
     ref={ref}
     {...props}
   />
 ));
 
-export const ActionBar = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ children, ...props }, ref) => (
+export const ActionBar = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ children, ...props }, ref) => (
   <div
-    className={cn("bg-card rounded-lg border w-full h-12 p-1 relative", props.className)}
+    className={cn(
+      'bg-card rounded-lg border w-full h-12 p-1 relative',
+      props.className
+    )}
     ref={ref}
     {...props}
   >
-    <div className="h-full flex justify-between">
-      {children}
-    </div>
+    <div className="h-full flex justify-between">{children}</div>
   </div>
 ));
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -40,7 +40,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-  VariantProps<typeof toastVariants>
+    VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -76,7 +76,7 @@ function Index() {
           <CardDescription>Under construction.</CardDescription>
         </CardHeader>
         <CardContent>
-        <p>
+          <p>
             Use the smart timer{' '}
             <Link to="/timer" className="underline">
               here

diff --git a/src/routes/timer.tsx b/src/routes/timer.tsx
@@ -10,10 +10,7 @@ import DrawScrambleCard from '@/timer/drawScrambleCard';
 import LiveCubeCard from '@/timer/liveCubeCard';
 import ResultsCard from '@/timer/resultsCard';
 import ScrambleDisplay from '@/timer/scrambleDisplay';
-import useCubeTimer, {
-  HOLD_DOWN_TIME,
-  TimerState,
-} from '@/timer/useCubeTimer';
+import useCubeTimer, { HOLD_DOWN_TIME, TimerState } from '@/timer/useCubeTimer';
 
 export const Route = createFileRoute('/timer')({
   component: Timer,

diff --git a/src/routes/trainer.tsx b/src/routes/trainer.tsx
@@ -1,20 +1,20 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
-import LiveCubeCard from "@/timer/liveCubeCard";
-import DrawSolutionCard from "@/trainer/DrawSolutionCard";
-import SolutionDisplay from "@/trainer/SolutionDisplay";
-import TrainerBar from "@/trainer/TrainerBar";
-import { TrainerStore } from "@/trainer/trainerStore";
-import useAlgTrainer from "@/trainer/useAlgTrainer";
-import { createFileRoute } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
+import { createFileRoute } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import LiveCubeCard from '@/timer/liveCubeCard';
+import DrawSolutionCard from '@/trainer/DrawSolutionCard';
+import SolutionDisplay from '@/trainer/SolutionDisplay';
+import TrainerBar from '@/trainer/TrainerBar';
+import { TrainerStore } from '@/trainer/trainerStore';
+import useAlgTrainer from '@/trainer/useAlgTrainer';
 
 export const Route = createFileRoute('/trainer')({
   component: Trainer,
 });
 
-function Trainer() {  
+function Trainer() {
   useAlgTrainer();
-  const alg = useStore(TrainerStore, (state) => state.alg);
+  const alg = useStore(TrainerStore, state => state.alg);
 
   return (
     <div className="flex flex-col justify-between h-dvh w-screen p-2">
@@ -23,7 +23,14 @@ function Trainer() {
         <SolutionDisplay />
         <div className="absolute top-0 left-0 w-full h-full flex">
           <h1 className="m-auto text-6xl sm:text-7xl md:text-9xl font-extrabold select-none">
-            {alg ? <>{alg.case.first}{alg.case.second}</> : "--"}
+            {alg ? (
+              <>
+                {alg.case.first}
+                {alg.case.second}
+              </>
+            ) : (
+              '--'
+            )}
           </h1>
         </div>
       </div>
@@ -35,4 +42,4 @@ function Trainer() {
       </ScrollArea>
     </div>
   );
-}
+}
diff --git a/src/timer/TimerBar.tsx b/src/timer/TimerBar.tsx
@@ -1,10 +1,23 @@
-import CubeName from "@/components/cubing/cubeName";
-import { ActionBar, ActionStart, ActionButton, ActionMiddle, ActionEnd, ActionIcon } from "@/components/layout/ActionBar";
-import { useTheme } from "@/components/theme-provider";
-import { CubeStore, connect, reset } from "@/lib/smartCube";
-import { Link } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
-import { ArrowLeft, Bluetooth, BluetoothConnected, Moon, RotateCcw, Sun } from "lucide-react";
+import { Link } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import {
+  ArrowLeft,
+  Bluetooth,
+  BluetoothConnected,
+  Moon,
+  RotateCcw,
+  Sun,
+} from 'lucide-react';
+import CubeName from '@/components/cubing/cubeName';
+import {
+  ActionBar,
+  ActionStart,
+  ActionButton,
+  ActionMiddle,
+  ActionEnd,
+  ActionIcon,
+} from '@/components/layout/ActionBar';
+import { useTheme } from '@/components/theme-provider';
 import {
   Select,
   SelectContent,
@@ -14,6 +27,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { CubeStore, connect, reset } from '@/lib/smartCube';
 
 function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -43,8 +57,12 @@ export function SessionSelector() {
         <SelectGroup>
           <SelectLabel>Sessions</SelectLabel>
           <SelectItem value="3bld">3BLD</SelectItem>
-          <SelectItem value="edges" disabled>Edges</SelectItem>
-          <SelectItem value="corners" disabled>Corners</SelectItem>
+          <SelectItem value="edges" disabled>
+            Edges
+          </SelectItem>
+          <SelectItem value="corners" disabled>
+            Corners
+          </SelectItem>
         </SelectGroup>
       </SelectContent>
     </Select>
@@ -68,14 +86,17 @@ export default function TimerBar() {
         <SessionSelector />
       </ActionMiddle>
       <ActionEnd>
-        <ActionButton className="gap-2 sm:aspect-auto sm:px-2" onClick={() => connect()}>
+        <ActionButton
+          className="gap-2 sm:aspect-auto sm:px-2"
+          onClick={() => connect()}
+        >
           <ActionIcon icon={cube ? BluetoothConnected : Bluetooth} />
           <span className="hidden sm:inline">
             <CubeName />
           </span>
         </ActionButton>
-        {cube && <ActionButton icon={RotateCcw} onClick={() => reset()}/>}
+        {cube && <ActionButton icon={RotateCcw} onClick={() => reset()} />}
       </ActionEnd>
     </ActionBar>
   );
-}
+}
diff --git a/src/timer/useCubeTimer.tsx b/src/timer/useCubeTimer.tsx
@@ -15,8 +15,8 @@ import { Solve, db } from '@/lib/db';
 import { SOLVED, dnfAnalyser } from '@/lib/dnfAnalyser';
 import { CubeStore } from '@/lib/smartCube';
 import { extractAlgs } from '@/lib/solutionParser';
-import { TimerStore } from './timerStore';
 import { shouldIgnoreEvent } from '@/lib/utils';
+import { TimerStore } from './timerStore';
 
 export enum TimerState {
   Inactive = 'INACTIVE',

diff --git a/src/trainer/DrawSolutionCard.tsx b/src/trainer/DrawSolutionCard.tsx
@@ -4,7 +4,9 @@ import { Badge } from '@/components/ui/badge';
 import { TrainerStore } from './trainerStore';
 
 export default function DrawSolutionCard() {
-  const scramble = useStore(TrainerStore, state => state.moves).map(m => m.move).join(' ');
+  const scramble = useStore(TrainerStore, state => state.moves)
+    .map(m => m.move)
+    .join(' ');
 
   return (
     <fieldset className="bg-card rounded-lg border px-4 col-span-1 h-72">

diff --git a/src/trainer/SolutionDisplay.tsx b/src/trainer/SolutionDisplay.tsx
@@ -1,7 +1,7 @@
 import { useStore } from '@tanstack/react-store';
+import { simplify } from '@/lib/solutionParser';
 import { cn } from '@/lib/utils';
 import { TrainerStore } from './trainerStore';
-import { simplify } from '@/lib/solutionParser';
 
 export default function SolutionDisplay() {
   const moves = useStore(TrainerStore, state => state.moves).map(m => m.move);
@@ -14,7 +14,7 @@ export default function SolutionDisplay() {
       <h2 className="text-1xl sm:text-3xl font-semibold text-center p-4 pb-0 flex-none select-none">
         {splitMoves.map((move, i) => {
           const className = cn(
-            'inline-block px-1 mx-0.5 py-0.5 sm:px-2 sm:mx-1 sm:py-1 rounded-lg',
+            'inline-block px-1 mx-0.5 py-0.5 sm:px-2 sm:mx-1 sm:py-1 rounded-lg'
           );
           return (
             <div key={movesTotal + ' ' + i} className={className}>

diff --git a/src/trainer/TrainerBar.tsx b/src/trainer/TrainerBar.tsx
@@ -1,10 +1,23 @@
-import CubeName from "@/components/cubing/cubeName";
-import { ActionBar, ActionStart, ActionButton, ActionEnd, ActionIcon } from "@/components/layout/ActionBar";
-import { useTheme } from "@/components/theme-provider";
-import { CubeStore, connect, reset } from "@/lib/smartCube";
-import { Link } from "@tanstack/react-router";
-import { useStore } from "@tanstack/react-store";
-import { ArrowLeft, Bluetooth, BluetoothConnected, Moon, RotateCcw, Sun } from "lucide-react";
+import { Link } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import {
+  ArrowLeft,
+  Bluetooth,
+  BluetoothConnected,
+  Moon,
+  RotateCcw,
+  Sun,
+} from 'lucide-react';
+import CubeName from '@/components/cubing/cubeName';
+import {
+  ActionBar,
+  ActionStart,
+  ActionButton,
+  ActionEnd,
+  ActionIcon,
+} from '@/components/layout/ActionBar';
+import { useTheme } from '@/components/theme-provider';
+import { CubeStore, connect, reset } from '@/lib/smartCube';
 
 function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -38,14 +51,17 @@ export default function TrainerBar() {
         <ThemeToggle />
       </ActionStart>
       <ActionEnd>
-        <ActionButton className="gap-2 sm:aspect-auto sm:px-2" onClick={() => connect()}>
+        <ActionButton
+          className="gap-2 sm:aspect-auto sm:px-2"
+          onClick={() => connect()}
+        >
           <ActionIcon icon={cube ? BluetoothConnected : Bluetooth} />
           <span className="hidden sm:inline">
             <CubeName />
           </span>
         </ActionButton>
-        {cube && <ActionButton icon={RotateCcw} onClick={() => reset()}/>}
+        {cube && <ActionButton icon={RotateCcw} onClick={() => reset()} />}
       </ActionEnd>
     </ActionBar>
   );
-}
+}