chore: refactor idp buttons

apps/login/src/components/idps/base-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { clsx } from "clsx";
+import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
+
+export type SignInWithIdentityProviderProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  name?: string;
+  e2e?: string;
+};
+
+export const BaseButton = forwardRef<
+  HTMLButtonElement,
+  SignInWithIdentityProviderProps
+>(function BaseButton(props, ref) {
+  return (
+    <button
+      {...props}
+      type="button"
+      ref={ref}
+      className={clsx(
+        "transition-all cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm",
+        props.className,
+      )}
+    />
+  );
+});

apps/login/src/components/idps/classes.tsx

@@ -1,17 +0,0 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
-
-export const IdpButtonClasses =
-  "transition-all w-full cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";
-
-export interface SignInWithIDPProps {
-  children?: ReactNode;
-  orgId?: string;
-}
-
-export type SignInWithIdentityProviderProps = DetailedHTMLProps<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  name?: string;
-  e2e?: string;
-};

apps/login/src/components/idps/sign-in-with-apple.tsx

@@ -1,19 +1,15 @@
 "use client";
 
-import { ReactNode, forwardRef } from "react";
-import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
+import { forwardRef } from "react";
+import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
 export const SignInWithApple = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
->(
-  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`${IdpButtonClasses} ${className}`}
-      {...props}
-    >
+>(function SignInWithApple(props, ref) {
+  const { children, name, ...restProps } = props;
+  return (
+    <BaseButton {...restProps} ref={ref}>
       <div className="h-12 w-12 flex items-center justify-center">
         <div className="h-6 w-6">
           <svg viewBox="0 0 170 170" fill="currentColor">
@@ -27,8 +23,6 @@ export const SignInWithApple = forwardRef<
       ) : (
         <span className="ml-4">{name ? name : "Sign in with Apple"}</span>
       )}
-    </button>
-  ),
-);
-
-SignInWithApple.displayName = "SignInWithApple";
+    </BaseButton>
+  );
+});

apps/login/src/components/idps/sign-in-with-azure-ad.tsx

@@ -1,19 +1,15 @@
 "use client";
 
-import { ReactNode, forwardRef } from "react";
-import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
+import { forwardRef } from "react";
+import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
 export const SignInWithAzureAd = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
->(
-  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`${IdpButtonClasses} ${className}`}
-      {...props}
-    >
+>(function SignInWithAzureAd(props, ref) {
+  const { children, name, ...restProps } = props;
+  return (
+    <BaseButton {...restProps} ref={ref}>
       <div className="h-12 p-[10px] w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -33,8 +29,6 @@ export const SignInWithAzureAd = forwardRef<
       ) : (
         <span className="ml-4">{name ? name : "Sign in with AzureAD"}</span>
       )}
-    </button>
-  ),
-);
-
-SignInWithAzureAd.displayName = "SignInWithAzureAD";
+    </BaseButton>
+  );
+});

apps/login/src/components/idps/sign-in-with-generic.tsx

@@ -1,25 +1,21 @@
 "use client";
 
-import { ReactNode, forwardRef } from "react";
-import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
+import { forwardRef } from "react";
+import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
 export const SignInWithGeneric = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
->(
-  (
-    { children, className = "h-[50px] pl-20", name = "", ...props },
-    ref,
-  ): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`${IdpButtonClasses} ${className}`}
-      {...props}
-    >
-      {children ? children : <span className="">{name}</span>}
-    </button>
-  ),
-);
-
-SignInWithGeneric.displayName = "SignInWithGeneric";
+>(function SignInWithGeneric(props, ref) {
+  const {
+    children,
+    name = "",
+    className = "h-[50px] pl-20",
+    ...restProps
+  } = props;
+  return (
+    <BaseButton {...restProps} ref={ref} className={className}>
+      {children ? children : <span>{name}</span>}
+    </BaseButton>
+  );
+});

apps/login/src/components/idps/sign-in-with-github.tsx

@@ -1,27 +1,21 @@
 "use client";
 
-import { ReactNode, forwardRef } from "react";
-import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
+import { forwardRef } from "react";
+import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
 export const SignInWithGithub = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
->(
-  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`${IdpButtonClasses} ${className}`}
-      {...props}
-    >
-      <div className="h-8 w-8 mx-2 flex items-center justify-center">
+>(function SignInWithGithub(props, ref) {
+  const { children, name, ...restProps } = props;
+  return (
+    <BaseButton {...restProps} ref={ref}>
+      <div className="mx-2 my-2 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="1024"
-          height="1024"
           fill="none"
           viewBox="0 0 1024 1024"
-          className="hidden dark:block"
+          className="h-8 w-8 hidden dark:block"
         >
           <path
             fill="#fafafa"
@@ -32,11 +26,9 @@ export const SignInWithGithub = forwardRef<
         </svg>
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="1024"
-          height="1024"
           fill="none"
           viewBox="0 0 1024 1024"
-          className="block dark:hidden"
+          className="h-8 w-8 block dark:hidden"
         >
           <path
             fill="#1B1F23"
@@ -51,8 +43,6 @@ export const SignInWithGithub = forwardRef<
       ) : (
         <span className="ml-4">{name ? name : "Sign in with GitHub"}</span>
       )}
-    </button>
-  ),
-);
-
-SignInWithGithub.displayName = "SignInWithGithub";
+    </BaseButton>
+  );
+});

apps/login/src/components/idps/sign-in-with-gitlab.tsx

@@ -1,19 +1,15 @@
 "use client";
 
-import { ReactNode, forwardRef } from "react";
-import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
+import { forwardRef } from "react";
+import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
 export const SignInWithGitlab = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
->(
-  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`${IdpButtonClasses} ${className}`}
-      {...props}
-    >
+>(function SignInWithGitlab(props, ref) {
+  const { children, name, ...restProps } = props;
+  return (
+    <BaseButton {...restProps} ref={ref}>
       <div className="h-12 w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -44,8 +40,6 @@ export const SignInWithGitlab = forwardRef<
       ) : (
         <span className="ml-4">{name ? name : "Sign in with GitLab"}</span>
       )}
-    </button>
-  ),
-);
-
-SignInWithGitlab.displayName = "SignInWithGitlab";
+    </BaseButton>
+  );
+});

apps/login/src/components/idps/sign-in-with-google.tsx

@@ -1,19 +1,15 @@
 "use client";
 
-import { ReactNode, forwardRef } from "react";
-import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
+import { forwardRef } from "react";
+import { BaseButton, SignInWithIdentityProviderProps } from "./base-button";
 
 export const SignInWithGoogle = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
->(
-  ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`${IdpButtonClasses} ${className}`}
-      {...props}
-    >
+>(function SignInWithGoogle(props, ref) {
+  const { children, name, ...restProps } = props;
+  return (
+    <BaseButton {...restProps} ref={ref}>
       <div className="h-12 w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -57,8 +53,6 @@ export const SignInWithGoogle = forwardRef<
       ) : (
         <span className="ml-4">{name ? name : "Sign in with Google"}</span>
       )}
-    </button>
-  ),
-);
-
-SignInWithGoogle.displayName = "SignInWithGoogle";
+    </BaseButton>
+  );
+});