Merge pull request #47 from DouglasNeuroInformatics/dev

joshunrau · web-flow · commit aae29aaac0b1 · 2025-01-28T18:07:14.000-05:00
chore: update eslint config
diff --git a/package.json b/package.json
@@ -114,7 +114,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@douglasneuroinformatics/eslint-config": "^5.2.1",
+    "@douglasneuroinformatics/eslint-config": "^5.2.4",
     "@douglasneuroinformatics/prettier-config": "^0.0.1",
     "@douglasneuroinformatics/semantic-release": "^0.0.1",
     "@douglasneuroinformatics/tsconfig": "^1.0.2",
@@ -140,7 +140,7 @@
     "@vitejs/plugin-react-swc": "^3.7.1",
     "@vitest/coverage-v8": "^2.1.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.12.0",
+    "eslint": "^9.19.0",
     "happy-dom": "^14.12.0",
     "husky": "^9.1.6",
     "jsdom": "25.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ArrowToggle/ArrowToggle.tsx b/src/components/ArrowToggle/ArrowToggle.tsx
@@ -9,7 +9,7 @@ import { cn } from '@/utils';
 import { Button, type ButtonProps } from '../Button';
 
 export type ArrowToggleProps = Simplify<
-  {
+  React.HTMLAttributes<HTMLButtonElement> & {
     /** Whether or not the arrow is currently toggled */
     isToggled?: boolean;
 
@@ -23,7 +23,7 @@ export type ArrowToggleProps = Simplify<
 
     /** The variant of button to use */
     variant?: Extract<ButtonProps['variant'], 'ghost' | 'outline'>;
-  } & React.HTMLAttributes<HTMLButtonElement>
+  }
 >;
 
 export const ArrowToggle = React.forwardRef<HTMLButtonElement, ArrowToggleProps>(function ArrowToggle(
diff --git a/src/components/Breadcrumb/BreadcrumbLink.tsx b/src/components/Breadcrumb/BreadcrumbLink.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const BreadcrumbLink = forwardRef<
   HTMLAnchorElement,
-  {
+  React.ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean;
-  } & React.ComponentPropsWithoutRef<'a'>
+  }
 >(function BreadcrumbLink({ asChild, className, ...props }, ref) {
   const Comp = asChild ? Slot : 'a';
   return <Comp className={cn('transition-colors hover:text-foreground', className)} ref={ref} {...props} />;
diff --git a/src/components/Breadcrumb/BreadcrumbRoot.tsx b/src/components/Breadcrumb/BreadcrumbRoot.tsx
@@ -2,9 +2,9 @@ import { forwardRef } from 'react';
 
 export const BreadcrumbRoot = forwardRef<
   HTMLElement,
-  {
+  React.ComponentPropsWithoutRef<'nav'> & {
     separator?: React.ReactNode;
-  } & React.ComponentPropsWithoutRef<'nav'>
+  }
 >(function BreadcrumbRoot({ ...props }, ref) {
   return <nav aria-label="breadcrumb" ref={ref} {...props} />;
 });
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -39,12 +39,12 @@ export const buttonVariants = cva(
 );
 
 export type ButtonProps = Simplify<
-  {
-    asChild?: boolean;
-    /** @deprecated - use children   */
-    label?: string;
-  } & React.ButtonHTMLAttributes<HTMLButtonElement> &
-    VariantProps<typeof buttonVariants>
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+      /** @deprecated - use children   */
+      label?: string;
+    }
 >;
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
diff --git a/src/components/Chart/ChartContainer.tsx b/src/components/Chart/ChartContainer.tsx
@@ -11,10 +11,10 @@ import type { ChartConfig } from './types';
 
 export const ChartContainer = forwardRef<
   HTMLDivElement,
-  {
+  React.ComponentProps<'div'> & {
     children: React.ComponentProps<typeof ResponsiveContainer>['children'];
     config: ChartConfig;
-  } & React.ComponentProps<'div'>
+  }
 >(function ChartContainer({ children, className, config, id, ...props }, ref) {
   const uniqueId = useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
diff --git a/src/components/Chart/ChartLegendContent.tsx b/src/components/Chart/ChartLegendContent.tsx
@@ -9,11 +9,11 @@ import { getPayloadConfigFromPayload } from './utils';
 
 export const ChartLegendContent = forwardRef<
   HTMLDivElement,
-  {
-    hideIcon?: boolean;
-    nameKey?: string;
-  } & Pick<LegendProps, 'payload' | 'verticalAlign'> &
-    React.ComponentProps<'div'>
+  Pick<LegendProps, 'payload' | 'verticalAlign'> &
+    React.ComponentProps<'div'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
 >(function ChartLegendContent({ className, hideIcon = false, nameKey, payload, verticalAlign = 'bottom' }, ref) {
   const { config } = useChart();
 
diff --git a/src/components/Chart/ChartTooltipContent.tsx b/src/components/Chart/ChartTooltipContent.tsx
@@ -9,14 +9,14 @@ import { getPayloadConfigFromPayload } from './utils';
 
 export const ChartTooltipContent = forwardRef<
   HTMLDivElement,
-  {
-    hideIndicator?: boolean;
-    hideLabel?: boolean;
-    indicator?: 'dashed' | 'dot' | 'line';
-    labelKey?: string;
-    nameKey?: string;
-  } & React.ComponentProps<'div'> &
-    React.ComponentProps<typeof Tooltip>
+  React.ComponentProps<'div'> &
+    React.ComponentProps<typeof Tooltip> & {
+      hideIndicator?: boolean;
+      hideLabel?: boolean;
+      indicator?: 'dashed' | 'dot' | 'line';
+      labelKey?: string;
+      nameKey?: string;
+    }
 >(function ChartLegendContent(
   {
     active,
diff --git a/src/components/ContextMenu/ContextMenuItem.tsx b/src/components/ContextMenu/ContextMenuItem.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const ContextMenuItem = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  {
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>
+  }
 >(function ContextMenuItem({ className, inset, ...props }, ref) {
   return (
     <ContextMenuPrimitive.Item
diff --git a/src/components/ContextMenu/ContextMenuLabel.tsx b/src/components/ContextMenu/ContextMenuLabel.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const ContextMenuLabel = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  {
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>
+  }
 >(function ContextMenuLabel({ className, inset, ...props }, ref) {
   return (
     <ContextMenuPrimitive.Label
diff --git a/src/components/ContextMenu/ContextMenuSubTrigger.tsx b/src/components/ContextMenu/ContextMenuSubTrigger.tsx
@@ -7,9 +7,9 @@ import { cn } from '@/utils';
 
 export const ContextMenuSubTrigger = forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  {
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>
+  }
 >(function ContextMenuSubTrigger({ children, className, inset, ...props }, ref) {
   return (
     <ContextMenuPrimitive.SubTrigger
diff --git a/src/components/DropdownMenu/DropdownMenuContent.tsx b/src/components/DropdownMenu/DropdownMenuContent.tsx
@@ -4,9 +4,9 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 import { cn } from '@/utils';
 
-export type DropdownMenuContentProps = {
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
   widthFull?: boolean;
-} & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
+};
 export const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   DropdownMenuContentProps
diff --git a/src/components/DropdownMenu/DropdownMenuItem.tsx b/src/components/DropdownMenu/DropdownMenuItem.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const DropdownMenuItem = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
+  }
 >(function DropdownMenuItem({ className, inset, ...props }, ref) {
   return (
     <DropdownMenuPrimitive.Item
diff --git a/src/components/DropdownMenu/DropdownMenuLabel.tsx b/src/components/DropdownMenu/DropdownMenuLabel.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const DropdownMenuLabel = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+  }
 >(function DropdownMenuLabel({ className, inset, ...props }, ref) {
   return (
     <DropdownMenuPrimitive.Label
diff --git a/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx b/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx
@@ -7,9 +7,9 @@ import { cn } from '@/utils';
 
 export const DropdownMenuSubTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>
+  }
 >(function DropdownMenuSubTrigger({ children, className, inset, ...props }, ref) {
   return (
     <DropdownMenuPrimitive.SubTrigger
diff --git a/src/components/Form/BaseRadioField.tsx b/src/components/Form/BaseRadioField.tsx
@@ -20,13 +20,13 @@ const baseRadioFieldVariants = cva('flex', {
 });
 
 export type BaseRadioFieldProps<T extends string> = Simplify<
-  {
+  BaseFieldComponentProps<T> & {
     description?: string;
     disabled?: boolean;
     label: string;
     options: { [K in T]: string };
     orientation?: 'horizontal' | 'vertical';
-  } & BaseFieldComponentProps<T>
+  }
 >;
 
 export const BaseRadioField = <T extends string>({
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 /* eslint-disable perfectionist/sort-objects */
 
 import { useEffect, useState } from 'react';
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -45,7 +45,6 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   validationSchema: z.ZodType<TData>;
 };
 
-// eslint-disable-next-line max-lines-per-function
 const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
   additionalButtons,
   className,
diff --git a/src/components/Form/ScalarField.tsx b/src/components/Form/ScalarField.tsx
@@ -15,22 +15,22 @@ import { StringField, type StringFieldProps } from './StringField';
 
 import type { BaseFieldComponentProps } from './types';
 
-export type ScalarFieldProps = {
+export type ScalarFieldProps = BaseFieldComponentProps<ScalarFieldValue> & {
   field: BooleanFormField | DateFormField | NumberFormField | SetFormField | StringFormField;
-} & BaseFieldComponentProps<ScalarFieldValue>;
+};
 
 export const ScalarField = ({ field, ...props }: ScalarFieldProps) => {
   switch (field.kind) {
-    case 'string':
-      return <StringField {...field} {...(props as StringFieldProps)} />;
-    case 'number':
-      return <NumberField {...field} {...(props as NumberFieldProps)} />;
-    case 'date':
-      return <DateField {...field} {...(props as DateFieldProps)} />;
     case 'boolean':
       return <BooleanField {...field} {...(props as BooleanFieldProps)} />;
+    case 'date':
+      return <DateField {...field} {...(props as DateFieldProps)} />;
+    case 'number':
+      return <NumberField {...field} {...(props as NumberFieldProps)} />;
     case 'set':
       return <SetField {...field} {...(props as SetFieldProps)} />;
+    case 'string':
+      return <StringField {...field} {...(props as StringFieldProps)} />;
     default:
       throw new Error(`Unexpected value for kind: ${Reflect.get(field, 'kind') satisfies never}`);
   }
diff --git a/src/components/Form/SetField/SetFieldListbox.tsx b/src/components/Form/SetField/SetFieldListbox.tsx
@@ -5,9 +5,9 @@ import { FieldGroup } from '../FieldGroup';
 
 import type { SetFieldProps } from './SetField';
 
-export type SetFieldListboxProps<T extends string = string> = {
+export type SetFieldListboxProps<T extends string = string> = SetFieldProps<T> & {
   onCheckedChange: (option: T, isChecked: boolean) => void;
-} & SetFieldProps<T>;
+};
 
 export const SetFieldListbox = <T extends string = string>({
   description,
diff --git a/src/components/Form/SetField/SetFieldSelect.tsx b/src/components/Form/SetField/SetFieldSelect.tsx
@@ -7,9 +7,9 @@ import { FieldGroup } from '../FieldGroup';
 
 import type { SetFieldProps } from './SetField';
 
-export type SetFieldSelectProps<T extends string = string> = {
+export type SetFieldSelectProps<T extends string = string> = SetFieldProps<T> & {
   onCheckedChange: (option: T, isChecked: boolean) => void;
-} & SetFieldProps<T>;
+};
 
 export const SetFieldSelect = <T extends string = string>({
   description,
diff --git a/src/components/LineGraph/LineGraph.tsx b/src/components/LineGraph/LineGraph.tsx
@@ -26,11 +26,14 @@ type LineGraphData = readonly { [key: string]: any }[];
 /** Extract string keys from items in `T` where the value of `T[K]` extends `K` */
 type ExtractValidKeys<T extends LineGraphData, K> = Extract<ConditionalKeys<T[number], K>, string>;
 
-type LineGraphLine<T extends LineGraphData = { [key: string]: any }[]> = {
+type LineGraphLine<T extends LineGraphData = { [key: string]: any }[]> = Pick<
+  LineProps,
+  'legendType' | 'stroke' | 'strokeDasharray' | 'strokeWidth' | 'type'
+> & {
   err?: ExtractValidKeys<T, number>;
   name: string;
   val: ExtractValidKeys<T, number>;
-} & Pick<LineProps, 'legendType' | 'stroke' | 'strokeDasharray' | 'strokeWidth' | 'type'>;
+};
 
 const strokeColors = {
   dark: '#cbd5e1', // slate-300
diff --git a/src/components/MenuBar/MenuBarItem.tsx b/src/components/MenuBar/MenuBarItem.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const MenuBarItem = forwardRef<
   React.ElementRef<typeof Item>,
-  {
+  React.ComponentPropsWithoutRef<typeof Item> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof Item>
+  }
 >(function MenuBarItem({ className, inset, ...props }, ref) {
   return (
     <Item
diff --git a/src/components/MenuBar/MenuBarLabel.tsx b/src/components/MenuBar/MenuBarLabel.tsx
@@ -6,9 +6,9 @@ import { cn } from '@/utils';
 
 export const MenuBarLabel = forwardRef<
   React.ElementRef<typeof Label>,
-  {
+  React.ComponentPropsWithoutRef<typeof Label> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof Label>
+  }
 >(function MenuBarLabel({ className, inset, ...props }, ref) {
   return <Label className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)} ref={ref} {...props} />;
 });
diff --git a/src/components/MenuBar/MenuBarSubTrigger.tsx b/src/components/MenuBar/MenuBarSubTrigger.tsx
@@ -7,9 +7,9 @@ import { cn } from '@/utils';
 
 export const MenuBarSubTrigger = forwardRef<
   React.ElementRef<typeof SubTrigger>,
-  {
+  React.ComponentPropsWithoutRef<typeof SubTrigger> & {
     inset?: boolean;
-  } & React.ComponentPropsWithoutRef<typeof SubTrigger>
+  }
 >(function MenuBarSubTrigger({ children, className, inset, ...props }, ref) {
   return (
     <SubTrigger
diff --git a/src/components/Pagination/PaginationLink.tsx b/src/components/Pagination/PaginationLink.tsx
@@ -7,10 +7,10 @@ import { cn } from '@/utils';
 import { type ButtonProps, buttonVariants } from '../Button';
 
 export type PaginationLinkProps = Simplify<
-  {
-    isActive?: boolean;
-  } & Pick<ButtonProps, 'size'> &
-    React.ComponentProps<'a'>
+  Pick<ButtonProps, 'size'> &
+    React.ComponentProps<'a'> & {
+      isActive?: boolean;
+    }
 >;
 
 export const PaginationLink = ({ children, className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
diff --git a/src/components/Resizable/Resizable.tsx b/src/components/Resizable/Resizable.tsx
@@ -6,11 +6,11 @@ import { ResizableHandle, type ResizableHandleProps } from './ResizableHandle';
 import { ResizablePanelGroup, type ResizablePanelGroupProps } from './ResizablePanelGroup';
 
 type ResizableRootType = React.FC<{ children: React.ReactNode }>;
-type ResizableType = {
+type ResizableType = ResizableRootType & {
   Handle: React.FC<ResizableHandleProps>;
   Panel: React.FC<PanelProps>;
   PanelGroup: React.FC<ResizablePanelGroupProps>;
-} & ResizableRootType;
+};
 
 // This is only for storybook and is unnecessary for real-world use
 const ResizableRoot: ResizableRootType = ({ children }) => <>{children}</>;
diff --git a/src/components/Resizable/ResizableHandle.tsx b/src/components/Resizable/ResizableHandle.tsx
@@ -5,9 +5,9 @@ import { PanelResizeHandle } from 'react-resizable-panels';
 
 import { cn } from '@/utils';
 
-export type ResizableHandleProps = {
+export type ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {
   withHandle?: boolean;
-} & React.ComponentProps<typeof PanelResizeHandle>;
+};
 
 export const ResizableHandle = ({ className, withHandle, ...props }: ResizableHandleProps) => (
   <PanelResizeHandle
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
diff --git a/src/i18n/store.ts b/src/i18n/store.ts
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
