feat: add button and input components

apps/mobile/package.json

@@ -28,6 +28,8 @@
 		"@tanstack/react-query": "4.36.1",
 		"@trpc/client": "10.45.0",
 		"@trpc/react-query": "10.45.0",
+		"class-variance-authority": "0.7.0",
+		"clsx": "2.1.0",
 		"expo": "50.0.3",
 		"expo-asset": "9.0.2",
 		"expo-build-properties": "0.11.0",
@@ -55,6 +57,7 @@
 		"react-native-url-polyfill": "2.0.0",
 		"react-native-video": "6.0.0-beta.4",
 		"superjson": "2.2.1",
+		"tailwind-merge": "2.2.1",
 		"zustand": "4.5.0"
 	},
 	"devDependencies": {

apps/mobile/src/app/profile.tsx

@@ -1,6 +1,38 @@
 import React from "react"
 import { View } from "react-native"
+import { Button } from "~/components/Button"
+import { Input } from "~/components/Input"
 
 export default function Profile() {
-	return <View className="bg-[#000A14] h-full w-full"></View>
+	return (
+		<View className="bg-[#000A14] px-4 flex justify-center items-center h-full w-full">
+			<Button className="mb-5" variant="gradient">
+				Gradient
+			</Button>
+			<Button className="mb-5" disabled variant="gradient">
+				Gradient (Disabled)
+			</Button>
+			<View className="flex-row mb-5 gap-2 w-full">
+				<View className="flex-1">
+					<Button>Default</Button>
+				</View>
+				<View className="flex-1">
+					<Button disabled>(Disabled)</Button>
+				</View>
+			</View>
+			<View className="bg-white w-full p-2">
+				<Input
+					placeholder="Full name"
+					errorMsg="This username isn't available. try a suggested username, or enter a new one."
+				/>
+			</View>
+			<View className="bg-white w-full p-2">
+				<Input
+					type="password"
+					placeholder="Password"
+					errorMsg="This password isn't strong enough"
+				/>
+			</View>
+		</View>
+	)
 }

apps/mobile/src/components/Button.tsx

@@ -0,0 +1,134 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import React, { useRef } from "react"
+import { cn } from "~/utils/style"
+import { Pressable, Text, View, Animated } from "react-native"
+import { LinearGradient } from "expo-linear-gradient"
+
+const buttonVariants = cva(
+	["flex-row items-center w-full justify-center rounded-[36px] overflow-hidden"],
+	{
+		variants: {
+			variant: {
+				default: "bg-[#007EE5]",
+				gradient: "",
+			},
+			size: {
+				default: "h-11",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+)
+
+const buttonTextVariants = cva("text-base px-2", {
+	variants: {
+		variant: {
+			default: "text-white",
+			gradient: "text-white",
+		},
+		size: {
+			default: "font-ns-bold",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+})
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
+
+const Button = React.forwardRef<
+	React.ElementRef<typeof Pressable>,
+	React.ComponentPropsWithoutRef<typeof Pressable> &
+		VariantProps<typeof buttonVariants> & {
+			textClass?: string
+		}
+>(({ className, textClass, variant = "default", size, children, disabled, ...props }, ref) => {
+	const fadeAnim = useRef(new Animated.Value(0)).current
+
+	const animateGradient = () => {
+		Animated.timing(fadeAnim, {
+			toValue: 1,
+			duration: 300,
+			useNativeDriver: true,
+		}).start()
+	}
+
+	const resetGradient = () => {
+		Animated.timing(fadeAnim, {
+			toValue: 0,
+			duration: 300,
+			useNativeDriver: true,
+		}).start()
+	}
+
+	return (
+		<View>
+			<Pressable
+				className={cn(
+					buttonVariants({
+						variant,
+						size,
+						className: cn(
+							className,
+							disabled && "web:cursor-default",
+							disabled && variant === "default" && "bg-[#D9DCDD]",
+						),
+					}),
+				)}
+				ref={ref}
+				onPressIn={animateGradient}
+				onPressOut={resetGradient}
+				disabled={disabled}
+				{...props}
+			>
+				{({ pressed }) =>
+					variant === "gradient" ? (
+						<View
+							className="flex-row w-full h-full justify-center items-center"
+							style={{ position: "relative" }}
+						>
+							<LinearGradient
+								colors={["#9747FF", "#007EE5"]}
+								start={{ x: 0, y: 0 }}
+								end={{ x: 1, y: 0 }}
+								className="absolute w-full h-full"
+							/>
+							<AnimatedLinearGradient
+								colors={["#007EE5", "#9747FF"]}
+								start={{ x: 0, y: 0 }}
+								end={{ x: 1, y: 0 }}
+								className="absolute w-full h-full"
+								style={{ opacity: fadeAnim }}
+							/>
+							<Text
+								className={cn(
+									pressed && "opacity-70",
+									buttonTextVariants({ variant, size, className: textClass }),
+								)}
+							>
+								{children as string | string[]}
+							</Text>
+						</View>
+					) : (
+						<Text
+							className={cn(
+								pressed && "opacity-70",
+								buttonTextVariants({ variant, size, className: textClass }),
+								disabled && variant === "default" && "text-[#9A9BA2]",
+							)}
+						>
+							{children as string | string[]}
+						</Text>
+					)
+				}
+			</Pressable>
+		</View>
+	)
+})
+Button.displayName = "Button"
+
+export { Button, buttonTextVariants, buttonVariants }

apps/mobile/src/components/Input.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from "react"
+import { TextInput, View, TouchableOpacity, Text } from "react-native"
+import { cn } from "~/utils/style"
+import { Icon } from "./Icon"
+
+const Input = React.forwardRef<
+	React.ElementRef<typeof TextInput>,
+	React.ComponentPropsWithoutRef<typeof TextInput> & {
+		type?: "text" | "password"
+		errorMsg: string
+	}
+>(({ className, errorMsg, type = "text", ...props }, ref) => {
+	const [text, setText] = useState("")
+	// const [error, setError] = useState(false)
+	const [isSecure, setIsSecure] = useState(type === "password")
+
+	useEffect(() => {
+		if (props.value !== undefined && props.value !== text) {
+			setText(props.value)
+		}
+	}, [props.value, text])
+
+	const handleClearText = () => {
+		setText("")
+		if (props.onChangeText) {
+			props.onChangeText("")
+		}
+	}
+
+	const toggleSecureEntry = () => {
+		setIsSecure(!isSecure)
+		if (props.onChangeText) {
+			props.onChangeText(text)
+		}
+	}
+
+	return (
+		<View className="relative">
+			<TextInput
+				ref={ref}
+				className={cn(
+					"rounded-lg border font-ns-body w-full border-[#D9DCDD] bg-[#000A140F] px-3 py-2.5 text-base h-12 leading-[24px] text-[#181818] items-center placeholder:text-[#9A9BA2] disabled:opacity-50",
+					className,
+				)}
+				onChangeText={(text) => setText(text)}
+				value={text}
+				secureTextEntry={isSecure}
+				{...props}
+			/>
+			{text.length > 0 && (
+				<TouchableOpacity
+					className="absolute right-3 top-[13px]"
+					onPress={type === "password" ? toggleSecureEntry : handleClearText}
+					accessibilityLabel={
+						type === "password" ? "Toggle password visibility" : "Clear text"
+					}
+				>
+					<Icon
+						color="#9A9BA2"
+						size={20}
+						name={type === "password" ? (isSecure ? "eye" : "eye-off") : "x-circle"}
+					/>
+				</TouchableOpacity>
+			)}
+			{type === "password" && (
+				<View className="mt-1 flex-row justify-between">
+					<Text className="text-[#9A9BA2] font-ns-body">
+						Letters, numbers, and special characters
+					</Text>
+					<Text className="text-[#9A9BA2] font-ns-body">{text.length}/16</Text>
+				</View>
+			)}
+			{false && (
+				<View className="mt-1">
+					<Text className="text-[#FF6C7E] font-ns-body">{errorMsg}</Text>
+				</View>
+			)}
+		</View>
+	)
+})
+
+Input.displayName = "Input"
+
+export { Input }

apps/mobile/src/utils/style.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}