♻️ refactor: 全コンポーネントを React 19 の ref-as-prop に移行（塩漬け）

package.json

@@ -59,8 +59,8 @@
     "glob": "^11.0.0",
     "lucide-react": "^0.487.0",
     "radix-ui": "^1.4.2",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
+    "react": "^19",
+    "react-dom": "^19",
     "react-hook-form": "^7.63.0",
     "shadcn": "^2.5.0",
     "sonner": "^2.0.7",
@@ -81,8 +81,8 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@vitest/browser": "^3.0.9",
     "@vitest/coverage-v8": "^3.0.9",
     "axe-core": "^4.10.3",
@@ -101,36 +101,6 @@
     "vite": "6.4.2",
     "vitest": "^3.0.9"
   },
-  "pnpm": {
-    "overrides": {
-      "lodash": "^4.17.23",
-      "path-to-regexp": "^8.4.0",
-      "brace-expansion@>=2.0.0 <2.0.3": "^2.0.3",
-      "picomatch": "^4.0.4",
-      "flatted": "^3.4.2",
-      "undici": "^6.24.0",
-      "tar": "^7.5.11",
-      "minimatch@>=7.0.0 <7.4.8": "^7.4.8",
-      "minimatch@>=9.0.0 <9.0.7": "^9.0.7",
-      "minimatch@>=10.0.0 <10.2.3": "^10.2.3",
-      "minimatch@<3.1.3": "^3.1.3",
-      "ajv@<6.14.0": "^6.14.0",
-      "qs@<6.14.2": "^6.14.2",
-      "@modelcontextprotocol/sdk": "^1.26.0",
-      "@isaacs/brace-expansion": "^5.0.1",
-      "diff@>=5.0.0 <5.2.2": "^5.2.2",
-      "body-parser@>=2.2.0 <2.2.1": "^2.2.1",
-      "glob@>=10.2.0 <10.5.0": "^10.5.0",
-      "glob@>=11.0.0 <11.1.0": "^11.1.0",
-      "js-yaml@>=4.0.0 <4.1.1": "^4.1.1",
-      "playwright": "^1.59.1",
-      "form-data": "^4.0.4",
-      "hono": "^4.12.18",
-      "yaml@>=2.0.0 <2.8.3": "^2.8.3",
-      "@eslint/plugin-kit": "^0.3.4",
-      "brace-expansion@<1.1.13": "^1.1.13"
-    }
-  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {

pnpm-workspace.yaml

@@ -16,3 +16,30 @@ onlyBuiltDependencies:
   - sharp
   - style-dictionary
   - unrs-resolver
+overrides:
+  lodash: ^4.17.23
+  path-to-regexp: ^8.4.0
+  brace-expansion@>=2.0.0 <2.0.3: ^2.0.3
+  picomatch: ^4.0.4
+  flatted: ^3.4.2
+  undici: ^6.24.0
+  tar: ^7.5.11
+  minimatch@>=7.0.0 <7.4.8: ^7.4.8
+  minimatch@>=9.0.0 <9.0.7: ^9.0.7
+  minimatch@>=10.0.0 <10.2.3: ^10.2.3
+  minimatch@<3.1.3: ^3.1.3
+  ajv@<6.14.0: ^6.14.0
+  qs@<6.14.2: ^6.14.2
+  '@modelcontextprotocol/sdk': ^1.26.0
+  '@isaacs/brace-expansion': ^5.0.1
+  diff@>=5.0.0 <5.2.2: ^5.2.2
+  body-parser@>=2.2.0 <2.2.1: ^2.2.1
+  glob@>=10.2.0 <10.5.0: ^10.5.0
+  glob@>=11.0.0 <11.1.0: ^11.1.0
+  js-yaml@>=4.0.0 <4.1.1: ^4.1.1
+  playwright: ^1.59.1
+  form-data: ^4.0.4
+  hono: ^4.12.18
+  yaml@>=2.0.0 <2.8.3: ^2.8.3
+  '@eslint/plugin-kit': ^0.3.4
+  brace-expansion@<1.1.13: ^1.1.13

src/components/ui/button/index.tsx

@@ -258,7 +258,7 @@ const buttonVariants = cva(
 );
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-type NativeButtonProps = React.ComponentPropsWithoutRef<"button">;
+type NativeButtonProps = React.ComponentProps<"button">;
 
 export interface ButtonProps
   extends Omit<NativeButtonProps, "onClick" | "onKeyDown"> {
@@ -408,6 +408,7 @@ function Button({
   disabled,
   prefixIcon,
   suffixIcon,
+  ref,
   children,
   ...props
 }: ButtonProps) {
@@ -484,6 +485,7 @@ function Button({
 
   return (
     <Comp
+      ref={ref}
       data-slot="button"
       aria-busy={isLoading || undefined}
       aria-disabled={asChild && isButtonDisabled ? true : undefined}

src/components/ui/card/index.tsx

@@ -6,8 +6,7 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface ClickableCardProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ClickableCardProps extends React.ComponentProps<"button"> {
   /**
    * クリック時の処理
    * en: Click handler function
@@ -36,8 +35,14 @@ export interface ClickableCardProps
  *
  * @param {ClickableCardProps} props
  */
-const ClickableCard = React.forwardRef<HTMLButtonElement, ClickableCardProps>(
-  ({ className, isDisabled, onClick, ...props }, ref) => (
+function ClickableCard({
+  className,
+  isDisabled,
+  onClick,
+  ref,
+  ...props
+}: ClickableCardProps) {
+  return (
     <button
       ref={ref}
       className={cn(
@@ -52,8 +57,8 @@ const ClickableCard = React.forwardRef<HTMLButtonElement, ClickableCardProps>(
       type="button"
       {...props}
     />
-  )
-);
+  );
+}
 ClickableCard.displayName = "ClickableCard";
 
 /**
@@ -80,21 +85,20 @@ ClickableCard.displayName = "ClickableCard";
  * </Card>
  * ```
  *
- * @param {React.HTMLAttributes<HTMLDivElement>} props
+ * @param {React.ComponentProps<"div">} props
  */
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-minimum border border-divider-middle bg-white text-text-middle py-4",
-      className
-    )}
-    {...props}
-  />
-));
+function Card({ className, ref, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-minimum border border-divider-middle bg-white text-text-middle py-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
 Card.displayName = "Card";
 
 /**
@@ -141,31 +145,29 @@ Card.displayName = "Card";
  * ```
 
  */
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "flex flex-row gap-2 justify-between px-6 py-2 items-center",
-      className
-    )}
-    {...props}
-  />
-));
+function CardHeader({ className, ref, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-row gap-2 justify-between px-6 py-2 items-center",
+        className
+      )}
+      {...props}
+    />
+  );
+}
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("character-4-bold-pro flex items-center gap-2", className)}
-    {...props}
-  />
-));
+function CardTitle({ className, ref, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      ref={ref}
+      className={cn("character-4-bold-pro flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
 CardTitle.displayName = "CardTitle";
 
 /**
@@ -210,14 +212,15 @@ CardTitle.displayName = "CardTitle";
  * </CardTitle>
  * ```
 
- * @param {React.HTMLAttributes<HTMLDivElement>} props
+ * @param {React.ComponentProps<"div">} props
  */
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("", className)} {...props} />
-));
+function CardDescription({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<"div">) {
+  return <div ref={ref} className={cn("", className)} {...props} />;
+}
 CardDescription.displayName = "CardDescription";
 
 /**
@@ -248,45 +251,56 @@ CardDescription.displayName = "CardDescription";
  * </CardControl>
  * ```
 
- * @param {React.HTMLAttributes<HTMLDivElement>} props
+ * @param {React.ComponentProps<"div">} props
  */
-const CardControl = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center gap-2", className)} {...props} />
-));
+function CardControl({
+  className,
+  ref,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
 CardControl.displayName = "CardControl";
 
-export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardContentProps extends React.ComponentProps<"div"> {
   /**
    * スペースを入れるかどうか
    * en: Whether to add spacing
    */
   isSpace?: boolean;
 }
 
-const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
-  ({ className, isSpace = true, ...props }, ref) => (
+function CardContent({
+  className,
+  isSpace = true,
+  ref,
+  ...props
+}: CardContentProps) {
+  return (
     <div
       ref={ref}
       className={cn(isSpace ? "px-6 py-2" : "", className)}
       {...props}
     />
-  )
-);
+  );
+}
 CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center justify-end px-6 py-2", className)}
-    {...props}
-  />
-));
+function CardFooter({ className, ref, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-end px-6 py-2", className)}
+      {...props}
+    />
+  );
+}
 CardFooter.displayName = "CardFooter";
 
 export {

src/components/ui/divider/index.tsx

@@ -45,7 +45,7 @@ const dividerVariants = cva("shrink-0", {
 });
 
 export interface DividerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends React.ComponentProps<"div">,
     VariantProps<typeof dividerVariants> {
   /**
    * ディバイダーの強調度（low、middle、high）
@@ -78,24 +78,29 @@ export interface DividerProps
  *
  * @param {DividerProps} props
  */
-const Divider = React.forwardRef<HTMLDivElement, DividerProps>(
-  ({ className, emphasis, lineStyle, direction, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          dividerVariants({
-            emphasis,
-            lineStyle,
-            direction,
-            className,
-          })
-        )}
-        {...props}
-      />
-    );
-  }
-);
+function Divider({
+  className,
+  emphasis,
+  lineStyle,
+  direction,
+  ref,
+  ...props
+}: DividerProps) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        dividerVariants({
+          emphasis,
+          lineStyle,
+          direction,
+          className,
+        })
+      )}
+      {...props}
+    />
+  );
+}
 
 Divider.displayName = "Divider";