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

package.json

@@ -60,15 +60,17 @@
     "glob": "^11.0.0",
     "lucide-react": "^0.487.0",
     "radix-ui": "^1.4.2",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
     "react-hook-form": "^7.63.0",
     "shadcn": "^2.5.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.2.0",
     "tw-animate-css": "^1.2.5",
     "zod": "^4.1.11"
   },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.1",
     "@figma/code-connect": "^1.3.4",
@@ -82,8 +84,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-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
     "axe-core": "^4.10.3",
@@ -95,6 +97,8 @@
     "next": "15.5.18",
     "playwright": "^1.51.1",
     "prettier": "^3.6.2",
+    "react": "^19",
+    "react-dom": "^19",
     "storybook": "^10.3.5",
     "tailwindcss": "^4",
     "tsc-alias": "^1.8.16",

src/components/ui/button/index.tsx

@@ -258,10 +258,17 @@ 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"> {
+  extends Omit<NativeButtonProps, "onClick" | "onKeyDown" | "ref"> {
+  /**
+   * ルート要素への ref。`asChild` で `<a>` 等を差し込むケースを受け入れるため
+   * `HTMLButtonElement` ではなく `HTMLElement` で広く受ける
+   * en: Ref to the root element. Typed as `HTMLElement` (not `HTMLButtonElement`)
+   * so `asChild` targets such as `<a>` are accepted.
+   */
+  ref?: React.Ref<HTMLElement>;
   /**
    * ボタンのサイズバリエーション
    * en: Size variation of the button
@@ -397,23 +404,21 @@ export interface ButtonProps
  *
  * @param {ButtonProps} props
  */
-const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(
-  {
-    className,
-    variant,
-    size,
-    theme,
-    isLoading = false,
-    isDisabled = false,
-    asChild = false,
-    disabled,
-    prefixIcon,
-    suffixIcon,
-    children,
-    ...props
-  },
-  ref
-) {
+function Button({
+  className,
+  variant,
+  size,
+  theme,
+  isLoading = false,
+  isDisabled = false,
+  asChild = false,
+  disabled,
+  prefixIcon,
+  suffixIcon,
+  ref,
+  children,
+  ...props
+}: ButtonProps) {
   const Comp = asChild ? SlotPrimitive.Slot : "button";
 
   // disabled状態の管理（isDisabled、disabled、またはisLoadingがtrueの場合）
@@ -544,7 +549,7 @@ const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(
       )}
     </Comp>
   );
-});
+}
 
 Button.displayName = "Button";
 

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";