From ef7667501ba9c0defb7b2cf5b32aca7e48735b06 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 23 May 2025 12:27:10 +0200 Subject: [PATCH] Add eslint to ci --- agent.json | 2 +- package.json | 2 +- src/components/ui/alert-dialog.tsx | 2 +- src/components/ui/badge-variants.ts | 21 ++++++ src/components/ui/badge.tsx | 25 +------ src/components/ui/button-variants.ts | 30 +++++++++ src/components/ui/button.tsx | 34 +--------- src/components/ui/calendar.tsx | 2 +- src/components/ui/command.tsx | 2 +- src/components/ui/form-utils.ts | 48 +++++++++++++ src/components/ui/form.tsx | 45 +------------ src/components/ui/navigation-menu-variants.ts | 5 ++ src/components/ui/navigation-menu.tsx | 7 +- src/components/ui/pagination.tsx | 3 +- src/components/ui/sidebar-utils.ts | 52 ++++++++++++++ src/components/ui/sidebar.tsx | 67 +++++-------------- src/components/ui/textarea.tsx | 3 +- src/components/ui/toggle-group.tsx | 2 +- src/components/ui/toggle-variants.ts | 23 +++++++ src/components/ui/toggle.tsx | 27 +------- tailwind.config.ts | 3 +- 21 files changed, 216 insertions(+), 189 deletions(-) create mode 100644 src/components/ui/badge-variants.ts create mode 100644 src/components/ui/button-variants.ts create mode 100644 src/components/ui/form-utils.ts create mode 100644 src/components/ui/navigation-menu-variants.ts create mode 100644 src/components/ui/sidebar-utils.ts create mode 100644 src/components/ui/toggle-variants.ts diff --git a/agent.json b/agent.json index a74a6a2..e1292bd 100644 --- a/agent.json +++ b/agent.json @@ -1,5 +1,5 @@ { - "model": "claude-sonnet-4", + "model": "claude-opus-4", "mcpServers": { "js-dev": { "type": "stdio", diff --git a/package.json b/package.json index 1ef453c..0e146a3 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dev": "npm i && vite", "build": "npm i && vite build && cp dist/index.html dist/404.html", "build:dev": "npm i && vite build --mode development", - "ci": "npm i && tsc -p tsconfig.app.json --noEmit && vite build", + "ci": "npm i && tsc -p tsconfig.app.json --noEmit && eslint && vite build", "lint": "npm i && eslint .", "preview": "npm i && vite preview", "deploy": "npm run build && npx -y surge@latest dist" diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx index 8722561..4bd7937 100644 --- a/src/components/ui/alert-dialog.tsx +++ b/src/components/ui/alert-dialog.tsx @@ -2,7 +2,7 @@ import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { buttonVariants } from "@/components/ui/button-variants" const AlertDialog = AlertDialogPrimitive.Root diff --git a/src/components/ui/badge-variants.ts b/src/components/ui/badge-variants.ts new file mode 100644 index 0000000..f6b20a6 --- /dev/null +++ b/src/components/ui/badge-variants.ts @@ -0,0 +1,21 @@ +import { cva } from "class-variance-authority" + +export const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) \ No newline at end of file diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index f000e3e..0abefc2 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,27 +1,8 @@ import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" +import { type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" - -const badgeVariants = cva( - "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", - { - variants: { - variant: { - default: - "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", - secondary: - "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", - destructive: - "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", - outline: "text-foreground", - }, - }, - defaultVariants: { - variant: "default", - }, - } -) +import { badgeVariants } from "./badge-variants" export interface BadgeProps extends React.HTMLAttributes, @@ -33,4 +14,4 @@ function Badge({ className, variant, ...props }: BadgeProps) { ) } -export { Badge, badgeVariants } +export { Badge } diff --git a/src/components/ui/button-variants.ts b/src/components/ui/button-variants.ts new file mode 100644 index 0000000..be181f9 --- /dev/null +++ b/src/components/ui/button-variants.ts @@ -0,0 +1,30 @@ +import { cva } from "class-variance-authority" + +export const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) \ No newline at end of file diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 36496a2..25fa2bd 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,37 +1,9 @@ import * as React from "react" import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +import { type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" - -const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - } -) +import { buttonVariants } from "./button-variants" export interface ButtonProps extends React.ButtonHTMLAttributes, @@ -53,4 +25,4 @@ const Button = React.forwardRef( ) Button.displayName = "Button" -export { Button, buttonVariants } +export { Button } diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 3160ad0..169142b 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -3,7 +3,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react"; import { DayPicker } from "react-day-picker"; import { cn } from "@/lib/utils"; -import { buttonVariants } from "@/components/ui/button"; +import { buttonVariants } from "@/components/ui/button-variants"; export type CalendarProps = React.ComponentProps; diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx index 56a0979..69d63a4 100644 --- a/src/components/ui/command.tsx +++ b/src/components/ui/command.tsx @@ -21,7 +21,7 @@ const Command = React.forwardRef< )) Command.displayName = CommandPrimitive.displayName -interface CommandDialogProps extends DialogProps {} +type CommandDialogProps = DialogProps const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( diff --git a/src/components/ui/form-utils.ts b/src/components/ui/form-utils.ts new file mode 100644 index 0000000..c765ff2 --- /dev/null +++ b/src/components/ui/form-utils.ts @@ -0,0 +1,48 @@ +import * as React from "react" +import { + FieldPath, + FieldValues, + useFormContext, +} from "react-hook-form" + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +> = { + name: TName +} + +export const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) + +type FormItemContextValue = { + id: string +} + +export const FormItemContext = React.createContext( + {} as FormItemContextValue +) + +export const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState, formState } = useFormContext() + + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error("useFormField should be used within ") + } + + const { id } = itemContext + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + } +} \ No newline at end of file diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx index 4603f8b..b7a6301 100644 --- a/src/components/ui/form.tsx +++ b/src/components/ui/form.tsx @@ -7,25 +7,14 @@ import { FieldPath, FieldValues, FormProvider, - useFormContext, } from "react-hook-form" import { cn } from "@/lib/utils" import { Label } from "@/components/ui/label" +import { FormFieldContext, FormItemContext, useFormField } from "./form-utils" const Form = FormProvider -type FormFieldContextValue< - TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath -> = { - name: TName -} - -const FormFieldContext = React.createContext( - {} as FormFieldContextValue -) - const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath @@ -39,37 +28,6 @@ const FormField = < ) } -const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext) - const itemContext = React.useContext(FormItemContext) - const { getFieldState, formState } = useFormContext() - - const fieldState = getFieldState(fieldContext.name, formState) - - if (!fieldContext) { - throw new Error("useFormField should be used within ") - } - - const { id } = itemContext - - return { - id, - name: fieldContext.name, - formItemId: `${id}-form-item`, - formDescriptionId: `${id}-form-item-description`, - formMessageId: `${id}-form-item-message`, - ...fieldState, - } -} - -type FormItemContextValue = { - id: string -} - -const FormItemContext = React.createContext( - {} as FormItemContextValue -) - const FormItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes @@ -165,7 +123,6 @@ const FormMessage = React.forwardRef< FormMessage.displayName = "FormMessage" export { - useFormField, Form, FormItem, FormLabel, diff --git a/src/components/ui/navigation-menu-variants.ts b/src/components/ui/navigation-menu-variants.ts new file mode 100644 index 0000000..403e12f --- /dev/null +++ b/src/components/ui/navigation-menu-variants.ts @@ -0,0 +1,5 @@ +import { cva } from "class-variance-authority" + +export const navigationMenuTriggerStyle = cva( + "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" +) \ No newline at end of file diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx index 1419f56..0e1499b 100644 --- a/src/components/ui/navigation-menu.tsx +++ b/src/components/ui/navigation-menu.tsx @@ -1,9 +1,9 @@ import * as React from "react" import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" -import { cva } from "class-variance-authority" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" +import { navigationMenuTriggerStyle } from "./navigation-menu-variants" const NavigationMenu = React.forwardRef< React.ElementRef, @@ -40,10 +40,6 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName const NavigationMenuItem = NavigationMenuPrimitive.Item -const navigationMenuTriggerStyle = cva( - "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" -) - const NavigationMenuTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -116,7 +112,6 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName export { - navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx index ea40d19..5bacb4a 100644 --- a/src/components/ui/pagination.tsx +++ b/src/components/ui/pagination.tsx @@ -2,7 +2,8 @@ import * as React from "react" import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" -import { ButtonProps, buttonVariants } from "@/components/ui/button" +import { ButtonProps } from "@/components/ui/button" +import { buttonVariants } from "@/components/ui/button-variants" const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (