Simplified Storybook preview setup & Centralized Checkbox variants

frontend/.storybook/decorators/index.ts

@@ -1,2 +1 @@
-export * from "./DocumentDecorator";
 export * from "./RouterDecorator";

frontend/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<style>
+  /*
+   * Add styling here instead of a custom decorator because it is a document-level override for Storybook's iframe and
+   * not story behavior. The app's global base styles set `html` to `overflow: hidden`, but Storybook needs
+   * `overflow: visible` for floating UI to escape the preview viewport
+   */
+  html {
+    overflow: visible;
+  }
+</style>

frontend/.storybook/preview.tsx

@@ -1,11 +1,11 @@
 import type { Preview } from "@storybook/react-vite";
 
-import { DocumentDecorator, RouterDecorator } from "./decorators";
+import { RouterDecorator } from "./decorators";
 
 import "../src/index.css";
 
 const preview: Preview = {
-  decorators: [DocumentDecorator, RouterDecorator],
+  decorators: [RouterDecorator],
   parameters: {
     controls: {
       matchers: {

frontend/src/components/v3/generic/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Checkbox } from "./Checkbox";
+import { Checkbox, checkboxVariantOptions } from "./Checkbox";
 
 /**
  * Checkboxes allow users to select one or more items from a set.
@@ -17,17 +17,7 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: [
-        "outline",
-        "neutral",
-        "success",
-        "info",
-        "warning",
-        "danger",
-        "project",
-        "org",
-        "sub-org"
-      ]
+      options: checkboxVariantOptions
     },
     isChecked: {
       control: "boolean"

frontend/src/components/v3/generic/Checkbox/Checkbox.tsx

@@ -1,12 +1,26 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
 import { CheckboxIndicator, Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
-import { cva, VariantProps } from "cva";
+import { cva } from "cva";
 import { CheckIcon, MinusIcon } from "lucide-react";
 
 import { cn } from "../../utils";
 
-const checkboxVariants = cva(
+export const checkboxVariantOptions = [
+  "outline",
+  "neutral",
+  "project",
+  "org",
+  "sub-org",
+  "success",
+  "info",
+  "warning",
+  "danger"
+] as const;
+
+export type CheckboxVariant = (typeof checkboxVariantOptions)[number];
+
+const checkboxStyles = cva(
   cn(
     "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
     "outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2",
@@ -35,24 +49,24 @@ const checkboxVariants = cva(
           "data-[state=checked]:border-warning/25 data-[state=checked]:bg-warning/10 data-[state=checked]:text-foreground data-[state=checked]:hover:bg-warning/15 data-[state=checked]:hover:border-warning/30",
         danger:
           "data-[state=checked]:border-danger/25 data-[state=checked]:bg-danger/10 data-[state=checked]:text-foreground data-[state=checked]:hover:bg-danger/15 data-[state=checked]:hover:border-danger/30"
-      }
+      } satisfies Record<CheckboxVariant, string>
     },
     defaultVariants: {
       variant: "outline"
     }
   }
 );
 
-type CheckboxProps = Omit<
+export type CheckboxProps = Omit<
   React.ComponentProps<typeof CheckboxPrimitive>,
   "checked" | "disabled" | "required"
-> &
-  VariantProps<typeof checkboxVariants> & {
-    isDisabled?: boolean;
-    isIndeterminate?: boolean;
-    isChecked?: boolean;
-    isRequired?: boolean;
-  };
+> & {
+  variant?: CheckboxVariant;
+  isDisabled?: boolean;
+  isIndeterminate?: boolean;
+  isChecked?: boolean;
+  isRequired?: boolean;
+};
 
 function Checkbox({
   className,
@@ -66,7 +80,7 @@ function Checkbox({
   return (
     <CheckboxPrimitive
       data-slot="checkbox"
-      className={cn(checkboxVariants({ variant }), className)}
+      className={cn(checkboxStyles({ variant }), className)}
       {...props}
       checked={isChecked}
       disabled={isDisabled}