Merge pull request #277 from k35o/popover

Popoverコンポーネントの作成
k35o · Sep 21, 2024 · ac60985 · ac60985
2 parents 0513c1f + 149b5f0
commit ac60985
Show file tree

Hide file tree

Showing 15 changed files with 983 additions and 276 deletions.
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -1,62 +1,66 @@
 import { cn } from '@/utils/cn';
-import {
-  FC,
-  PropsWithChildren,
-  ReactEventHandler,
-  ReactNode,
-} from 'react';
+import { forwardRef, HTMLProps, ReactNode } from 'react';
 
-export const Button: FC<
-  PropsWithChildren<{
+export const Button = forwardRef<
+  HTMLButtonElement,
+  {
     type?: 'button' | 'submit';
     size?: 'sm' | 'md' | 'lg';
     variant?: 'contained' | 'outlined';
-    disabled?: boolean;
     fullWidth?: boolean;
-    onClick?: ReactEventHandler<HTMLButtonElement>;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
-  }>
-> = ({
-  children,
-  type = 'button',
-  size = 'md',
-  variant = 'contained',
-  disabled = false,
-  fullWidth = false,
-  onClick,
-  startIcon,
-  endIcon,
-}) => {
-  return (
-    <button
-      type={type}
-      className={cn(
-        'rounded-xl font-bold',
-        {
-          ['bg-buttonPrimary text-textOnFill hover:bg-buttonHover active:bg-buttonActive']:
-            variant === 'contained',
-          ['cursor-not-allowed opacity-35 hover:bg-buttonPrimary active:bg-buttonPrimary']:
-            disabled && variant === 'contained',
-          ['border-2 border-buttonPrimary bg-bgBase text-buttonPrimary hover:bg-bgHover active:bg-bgActive']:
-            variant === 'outlined',
-          ['cursor-not-allowed bg-bgBase opacity-35 hover:bg-bgBase active:bg-bgBase']:
-            disabled && variant === 'outlined',
-        },
-        'focus-visible:border-borderTransparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-borderFocus',
-        size === 'sm' && 'px-3 py-1 text-sm',
-        size === 'md' && 'text-md px-4 py-2',
-        size === 'lg' && 'px-6 py-3 text-lg',
-        fullWidth && 'w-full',
-        Boolean(startIcon || endIcon) &&
-          'flex items-center justify-between gap-2',
-      )}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {startIcon}
-      {children}
-      {endIcon}
-    </button>
-  );
-};
+  } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>
+>(
+  (
+    {
+      children,
+      type = 'button',
+      size = 'md',
+      variant = 'contained',
+      disabled = false,
+      fullWidth = false,
+      onClick,
+      startIcon,
+      endIcon,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(
+          'rounded-xl font-bold',
+          {
+            ['bg-buttonPrimary text-textOnFill hover:bg-buttonHover active:bg-buttonActive']:
+              variant === 'contained',
+            ['cursor-not-allowed opacity-35 hover:bg-buttonPrimary active:bg-buttonPrimary']:
+              disabled && variant === 'contained',
+            ['border-2 border-buttonPrimary bg-bgBase text-buttonPrimary hover:bg-bgHover active:bg-bgActive']:
+              variant === 'outlined',
+            ['cursor-not-allowed bg-bgBase opacity-35 hover:bg-bgBase active:bg-bgBase']:
+              disabled && variant === 'outlined',
+          },
+          'focus-visible:border-borderTransparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-borderFocus',
+          size === 'sm' && 'px-3 py-1 text-sm',
+          size === 'md' && 'text-md px-4 py-2',
+          size === 'lg' && 'px-6 py-3 text-lg',
+          fullWidth && 'w-full',
+          Boolean(startIcon || endIcon) &&
+            'flex items-center justify-between gap-2',
+        )}
+        disabled={disabled}
+        onClick={onClick}
+        {...rest}
+      >
+        {startIcon}
+        {children}
+        {endIcon}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';