refactor to tamagui

apps/expo/src/components/ui/Button.tsx

@@ -1,60 +1,51 @@
-import type { VariantProps } from "class-variance-authority";
-import type { ReactNode } from "react";
-import type { PressableProps } from "react-native";
-import { Pressable } from "react-native";
-import { cva } from "class-variance-authority";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import type { ButtonProps } from "tamagui";
+import React from "react";
+import { Button, styled } from "tamagui";
 
-import { cn } from "~/lib/utils";
-import { Text } from "./Text";
+const PrimaryButton = styled(Button, {
+  backgroundColor: "$buttonPrimaryBackground",
+  color: "$buttonPrimaryText",
+  fontWeight: "bold",
+});
 
-const buttonVariants = cva(
-  "flex flex-row items-center justify-center gap-4 rounded-md disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-buttons-purple",
-        outline: "border border-buttons-purple bg-transparent",
-        secondary: "bg-buttons-secondary",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+const SecondaryButton = styled(Button, {
+  backgroundColor: "$buttonSecondaryBackground",
+  color: "$buttonSecondaryText",
+  fontWeight: "bold",
+});
 
-export interface ButtonProps
-  extends PressableProps,
-    VariantProps<typeof buttonVariants> {
-  iconLeft?: ReactNode;
-  iconRight?: ReactNode;
-  title: string;
-}
+const PurpleButton = styled(Button, {
+  backgroundColor: "$buttonPurpleBackground",
+  color: "white",
+  fontWeight: "bold",
+});
 
-export function Button({
-  onPress,
-  variant,
-  size,
-  className,
-  iconLeft,
-  iconRight,
-  title,
-}: ButtonProps) {
-  return (
-    <Pressable
-      onPress={onPress}
-      className={cn(buttonVariants({ variant, size, className }))}
-    >
-      {iconLeft}
-      <Text className="font-bold">{title}</Text>
-      {iconRight}
-    </Pressable>
-  );
-}
+const CancelButton = styled(Button, {
+  backgroundColor: "$buttonCancelBackground",
+  color: "white",
+  fontWeight: "bold",
+});
+
+export const MWButton = React.forwardRef<
+  typeof Button,
+  ButtonProps & {
+    type?: "primary" | "secondary" | "purple" | "cancel";
+  }
+>((props, ref) => {
+  const { type, ...rest } = props;
+  switch (type) {
+    case "primary":
+      return <PrimaryButton {...rest} ref={ref as any} />;
+    case "secondary":
+      return <SecondaryButton {...rest} ref={ref as any} />;
+    case "purple":
+      return <PurpleButton {...rest} ref={ref as any} />;
+    case "cancel":
+      return <CancelButton {...rest} ref={ref as any} />;
+    default:
+      return <Button {...rest} ref={ref as any} />;
+  }
+});
+
+MWButton.displayName = "MWButton";