@nativetail/ui 0.0.8 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativetail/ui",
-	"version": "0.0.8",
+	"version": "0.1.0",
 	"description": "",
 	"main": "src/index.ts",
 	"scripts": {},
@@ -26,12 +26,13 @@
 		"react-native": ">=0.63.0"
 	},
 	"dependencies": {
-		"@gorhom/bottom-sheet": "^5.0.0-alpha.10",
+		"@hookform/resolvers": "^3.6.0",
+		"@nativetail/core": "^0.0.2",
 		"@shopify/flash-list": "^1.7.0",
+		"countries-list": "^3.1.0",
 		"expo-blur": "^13.0.2",
 		"expo-linear-gradient": "~13.0.2",
 		"moti": "^0.29.0",
-		"@nativetail/core": "*",
 		"react": "18.2.0",
 		"react-hook-form": "^7.51.0",
 		"react-native": "0.74.3",
@@ -40,8 +41,7 @@
 		"react-native-reanimated": "~3.10.1",
 		"react-native-safe-area-context": "4.10.1",
 		"tailwind-merge": "^2.3.0",
-		"zustand": "^4.5.2",
-		"@hookform/resolvers": "^3.6.0"
+		"zustand": "^4.5.2"
 	},
 	"devDependencies": {
 		"metro-react-native-babel-preset": "^0.77.0",

package/src/components/bottom-sheet/index.tsx

@@ -11,6 +11,7 @@ export type BottomSheetProps = ActionSheetProps & {
 	indicatorClassName?: string;
 	useBlur?: boolean;
 };
+export type BottomSheetRef = ActionSheetRef;
 export const BottomSheet = forwardRef<ActionSheetRef, BottomSheetProps>(
 	function BottomSheet(
 		{
@@ -27,7 +28,7 @@ export const BottomSheet = forwardRef<ActionSheetRef, BottomSheetProps>(
 		return (
 			<ActionSheet
 				ref={ref}
-				containerStyle={tw.style("bg-background/95", containerClassName)}
+				containerStyle={tw.style("bg-background", containerClassName)}
 				gestureEnabled
 				indicatorStyle={tw.style("bg-muted/15", indicatorClassName)}
 				{...props}
@@ -42,4 +43,3 @@ export const BottomSheet = forwardRef<ActionSheetRef, BottomSheetProps>(
 		);
 	}
 );
-export { ActionSheetRef as BottomSheetRef };

package/src/components/form-builder/index.tsx

@@ -0,0 +1,141 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn, TextInputProps, View } from "@nativetail/core";
+import React, { ComponentPropsWithoutRef } from "react";
+import { Control, DefaultValues, useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "../button";
+import {
+	FloatingInput,
+	FloatingInputProps,
+	Input,
+	InputProps,
+	PhoneInput,
+	PinInput,
+	PinInputProps,
+} from "../input";
+import { MultiSelect, MultiSelectProps, Select, SelectProps } from "../select";
+
+export type FormBuilderProps<
+	T extends z.ZodRawShape,
+	IValues = z.infer<z.ZodObject<T>>,
+> = {
+	schema: z.ZodObject<T>;
+	inputs?: Partial<
+		Record<
+			keyof T,
+			{
+				render?: (props: {
+					control: Control<IValues, any>;
+					name: keyof T;
+				}) => React.ReactElement;
+			} & InputType
+		>
+	>;
+	containerClassname?: string;
+	submitButtonProps?: ComponentPropsWithoutRef<typeof Button>;
+	onSubmit?: (values: IValues) => void;
+	onError?: (values: Partial<Record<keyof T, any>>) => void;
+	isSubmitting?: boolean;
+	defaultValues?: DefaultValues<IValues>;
+};
+export function FormBuilder<T extends z.ZodRawShape>({
+	schema,
+	inputs,
+	containerClassname,
+	submitButtonProps,
+	onSubmit,
+	onError,
+	isSubmitting,
+	defaultValues,
+}: FormBuilderProps<T>) {
+	const shape = schema.shape;
+	const keys = Object.keys(shape);
+	type FormSchemaType = z.infer<typeof schema>;
+	const form = useForm<FormSchemaType>({
+		resolver: zodResolver(schema),
+		defaultValues: defaultValues,
+	});
+	return (
+		<View className={cn("gap-2", containerClassname)}>
+			{keys.map((inputKey) => {
+				const Input = inputs[inputKey];
+				const Render = Input.render;
+				if (!Render) {
+					return (
+						<InputComponent
+							control={form.control}
+							name={inputKey}
+							{...Input}
+							key={inputKey}
+						/>
+					);
+				}
+				return <Render control={form.control} name={inputKey} key={inputKey} />;
+			})}
+			<Button
+				className="w-full"
+				children={"Submit"}
+				{...submitButtonProps}
+				onPress={form.handleSubmit(onSubmit, onError)}
+				isLoading={isSubmitting}
+			/>
+		</View>
+	);
+}
+const InputComponent = ({
+	control,
+	name,
+	props,
+	type,
+}: {
+	control: Control<any>;
+	name: string;
+} & InputType) => {
+	switch (type) {
+		case "text":
+			return <Input control={control} name={name} {...props} />;
+		case "floating":
+			return <FloatingInput control={control} name={name} {...props} />;
+		case "select":
+			return <Select control={control} name={name} {...props} />;
+		case "multi-select":
+			return <MultiSelect control={control} name={name} {...props} />;
+		case "pin":
+			return <PinInput control={control} name={name} {...props} />;
+		case "phone":
+			return <PhoneInput control={control} name={name} {...props} />;
+	}
+	return null;
+};
+
+type TextInputType = {
+	type: "text";
+	props: InputProps;
+};
+type FloatingInputType = {
+	type: "floating";
+	props: FloatingInputProps;
+};
+type SelectInputType = {
+	type: "select";
+	props: SelectProps;
+};
+type MultiSelectInputType = {
+	type: "multi-select";
+	props: MultiSelectProps;
+};
+type PinInputType = {
+	type: "pin";
+	props: PinInputProps;
+};
+type PhoneInputType = {
+	type: "phone";
+	props: TextInputProps;
+};
+type InputType =
+	| TextInputType
+	| FloatingInputType
+	| SelectInputType
+	| MultiSelectInputType
+	| PinInputType
+	| PhoneInputType;

package/src/components/index.ts

@@ -13,3 +13,4 @@ export * from "./blur";
 export * from "./progress";
 export * from "./counter";
 export * from "./tabs";
+export * from "./form-builder";

package/src/components/input/index.ts

@@ -1,3 +1,4 @@
 export * from "./floating-input";
 export * from "./input";
 export * from "./pin-input";
+export * from "./phone-input";

package/src/components/input/input.tsx

@@ -1,12 +1,14 @@
 import {
 	cn,
+	Pressable,
 	Text,
 	TextInput,
 	TextInputProps,
 	useTw,
 	View,
 } from "@nativetail/core";
-import React, { LegacyRef, useState } from "react";
+import { MotiView } from "moti";
+import React, { createRef, useState } from "react";
 import { Control, Controller, Path } from "react-hook-form";
 import { TextInput as NativeTextInput } from "react-native";
 import ShowPassword from "./show-password";
@@ -22,7 +24,9 @@ export type InputProps<T = Record<string, any>> = TextInputProps & {
 	value?: string;
 	control?: Control<T, any>;
 	name?: Path<T>;
-	inputRef?: LegacyRef<NativeTextInput>;
+	inputRef?: React.RefObject<NativeTextInput>;
+	inputContainerClassName?: string;
+	formatter?: (value: string) => string;
 };
 
 export const Input = <T extends Record<string, any>>({
@@ -64,7 +68,9 @@ const BaseInput = <T extends Record<string, any>>({
 	rightElement,
 	helperText,
 	leftElement,
-	inputRef,
+	inputRef = createRef<NativeTextInput>(),
+	inputContainerClassName,
+	formatter,
 	...props
 }: InputProps<T>) => {
 	const tw = useTw();
@@ -72,34 +78,65 @@ const BaseInput = <T extends Record<string, any>>({
 	const [showPassword, setShowPassword] = useState(
 		isSecretToggleable ? false : true
 	);
+	const [isFocused, setIsFocused] = useState(false);
 	return (
 		<View className={cn("w-full gap-1", containerClassName)}>
 			<Text className={cn("text-muted/75 duration-75 text-sm")}>{label}</Text>
 
-			<TextInput
-				value={value}
-				onChangeText={onChangeText}
-				ref={inputRef}
+			<View
 				className={cn(
-					"p-3 bg-card rounded-lg w-full border border-muted/15 h-12 text-foreground -z-5 text-[16px]",
-					className,
-					isSecretToggleable || rightElement ? "pr-12" : "",
-					leftElement ? "pl-12" : "",
-					error && "border-danger"
+					" bg-card flex-row h-12 rounded-lg w-full border border-muted/15 ",
+					inputContainerClassName,
+					error && "border-danger",
+					isFocused && "border-foreground"
+				)}
+			>
+				{leftElement}
+				<TextInput
+					value={value}
+					onChangeText={onChangeText}
+					ref={inputRef}
+					className={cn(
+						" text-foreground p-2 rounded-lg flex-1 text-[16px]",
+						formatter && "opacity-0 scale-0 flex-0 absolute",
+						className
+					)}
+					placeholderTextColor={tw.color("muted")}
+					secureTextEntry={!showPassword}
+					{...props}
+					onFocus={(e) => {
+						setIsFocused(true);
+						props?.onFocus?.(e);
+					}}
+					onBlur={(e) => {
+						setIsFocused(false);
+						props?.onBlur?.(e);
+					}}
+				/>
+				{formatter && (
+					<Pressable
+						className={cn(
+							" text-foreground p-2 flex-row rounded-lg text-left items-center h-full flex-1 text-[16px]",
+							className
+						)}
+						onPress={() => {
+							inputRef?.current?.focus();
+						}}
+					>
+						{formatter(value)}
+						{isFocused && <InputBlink />}
+						{!value && (
+							<Text className={cn("text-muted/75 absolute left-0 p-2")}>
+								{props.placeholder}
+							</Text>
+						)}
+					</Pressable>
 				)}
-				placeholderTextColor={tw.color("muted")}
-				secureTextEntry={!showPassword}
-				{...props}
-			/>
-			{helperText && <Text className="text-muted text-sm">{helperText}</Text>}
 
-			{leftElement && (
-				<View className="absolute left-2 bottom-2">{leftElement}</View>
-			)}
+				{rightElement}
+			</View>
+			{helperText && <Text className="text-muted text-sm">{helperText}</Text>}
 
-			{rightElement && (
-				<View className="absolute right-2 bottom-2">{rightElement}</View>
-			)}
 			{error && <Text className="text-danger text-sm">{error}</Text>}
 
 			{isSecretToggleable && (
@@ -111,3 +148,28 @@ const BaseInput = <T extends Record<string, any>>({
 		</View>
 	);
 };
+
+const InputBlink = () => {
+	const tw = useTw();
+	return (
+		<MotiView
+			style={{
+				width: 0.1,
+				height: "90%",
+				opacity: 1,
+				marginHorizontal: 0.8,
+				backgroundColor: tw.color("foreground/85"),
+			}}
+			from={{
+				opacity: 0,
+			}}
+			animate={{
+				opacity: 1,
+			}}
+			transition={{
+				duration: 650,
+				loop: true,
+			}}
+		/>
+	);
+};

package/src/components/input/phone-input.tsx

@@ -0,0 +1,242 @@
+import { cn, Pressable, Text, View } from "@nativetail/core";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Controller } from "react-hook-form";
+import { FlashList, FlatList } from "react-native-actions-sheet";
+import { Iconify } from "react-native-iconify";
+import { BottomSheet, BottomSheetRef } from "../bottom-sheet";
+import { Input, InputProps } from "./input";
+
+import { countries, ICountry } from "countries-list";
+import { FloatingInput } from "./floating-input";
+type CountryType = ICountry & {
+	code: string;
+};
+export const PhoneInput = <T extends Record<string, any>>({
+	name,
+	control,
+	...props
+}: InputProps<T>) => {
+	if (control) {
+		return (
+			<Controller
+				name={name}
+				control={control}
+				render={({ field, fieldState }) => {
+					return (
+						<BaseInput
+							{...props}
+							value={field.value}
+							onChangeText={(text) => {
+								field.onChange(text);
+							}}
+							error={fieldState.error?.message}
+						/>
+					);
+				}}
+			/>
+		);
+	}
+	return <BaseInput {...props} />;
+};
+
+const BaseInput = <T extends Record<string, any>>(props: InputProps<T>) => {
+	const [selectedCountry, setSelectedCountry] = useState<CountryType>({
+		...countries.US,
+		code: "US",
+	});
+	return (
+		<Input
+			{...props}
+			leftElement={
+				<SelectCountry
+					selectedCountry={selectedCountry}
+					setSelectedCountry={setSelectedCountry}
+				/>
+			}
+			placeholder="(123) 456-7890"
+			value={props.value}
+			formatter={(value) => {
+				// Remove all non-numeric characters
+				const cleaned = ("" + value).replace(/\D/g, "");
+
+				// Format the cleaned number
+				const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+				if (match) {
+					return `(${match[1]}) ${match[2]}-${match[3]}`;
+				}
+
+				return value;
+			}}
+			onChangeText={(text) => {
+				props.onChangeText?.(text);
+			}}
+		/>
+	);
+};
+
+const SelectCountry = ({
+	selectedCountry,
+	setSelectedCountry,
+}: {
+	selectedCountry: CountryType;
+	setSelectedCountry: (country: CountryType) => void;
+}) => {
+	const sheetRef = useRef<BottomSheetRef>(null);
+	const flag = useMemo(
+		() => selectedCountry && getFlagEmoji(selectedCountry.code),
+		[selectedCountry]
+	);
+	return (
+		<>
+			<Pressable
+				className=" p-2 h-full items-center justify-center flex-row gap-0.5 active:opacity-75 opacity-100 border-r border-muted/15 pr-1"
+				onPress={() => {
+					sheetRef.current?.show();
+				}}
+			>
+				<Text>
+					<Text className="mr-1">{flag}</Text>+{selectedCountry.phone?.[0]}
+				</Text>
+				<Iconify icon="mingcute:down-line" size={24} color="gray" />
+			</Pressable>
+			<CountryBottomSheet
+				selectedCountry={selectedCountry}
+				setSelectedCountry={setSelectedCountry}
+				sheetRef={sheetRef}
+			/>
+		</>
+	);
+};
+
+const CountryBottomSheet = ({
+	selectedCountry,
+	setSelectedCountry,
+	sheetRef,
+}: {
+	selectedCountry: CountryType;
+	setSelectedCountry: (code: CountryType) => void;
+	sheetRef: React.RefObject<BottomSheetRef>;
+}) => {
+	const [search, setSearch] = useState("");
+	const [open, setOpen] = useState(false);
+	const allCountries = useMemo(
+		() =>
+			Object.entries(countries)
+				.map(([code, country]) => {
+					return {
+						code,
+						name: country.name,
+						...country,
+					};
+				})
+				.filter((country) =>
+					country.name?.toLowerCase()?.includes(search?.toLowerCase())
+				),
+		[search]
+	);
+	return (
+		<BottomSheet
+			ref={sheetRef}
+			onOpen={() => setOpen(true)}
+			onClose={() => setOpen(false)}
+			contentClassName=""
+		>
+			<View className="max-w-2xl mx-auto w-full max-h-[90%]">
+				{open && (
+					<CountryList
+						countries={allCountries}
+						search={search}
+						setSearch={setSearch}
+						selectedCountry={selectedCountry}
+						setSelectedCountry={setSelectedCountry}
+						close={() => {
+							sheetRef.current?.hide();
+						}}
+					/>
+				)}
+			</View>
+		</BottomSheet>
+	);
+};
+const CountryList = memo(
+	({
+		countries,
+		search,
+		setSearch,
+		selectedCountry,
+		setSelectedCountry,
+		close,
+	}: {
+		countries: CountryType[];
+		search: string;
+		setSearch: (search: string) => void;
+
+		selectedCountry: CountryType;
+		setSelectedCountry: (code: CountryType) => void;
+		close: () => void;
+	}) => {
+		const renderItem = useCallback(
+			({
+				item,
+			}: {
+				item: ICountry & {
+					code: string;
+				};
+			}) => {
+				const isActive = selectedCountry.code === item.code;
+				return (
+					<Pressable
+						onPress={() => {
+							setSelectedCountry(item);
+							close();
+						}}
+						className={cn(
+							"p-3 bg-card rounded-xl border h-12 border-muted/15 flex-row gap-4 w-full",
+							isActive && "bg-primary/10 border-primary"
+						)}
+						containerClassName="w-full"
+					>
+						{getFlagEmoji(item.code)}
+						<Text>+{item.phone?.[0]}</Text>
+						<Text className="font-medium">{item.name}</Text>
+					</Pressable>
+				);
+			},
+			[selectedCountry, setSelectedCountry, close]
+		);
+
+		return (
+			<View className="overflow-x-hidden h-full">
+				<>
+					<Text className="text-center text-lg font-medium mb-2">
+						Select Country
+					</Text>
+					<FloatingInput
+						value={search}
+						onChangeText={setSearch}
+						label="Search Country"
+						containerClassName="mb-2"
+					/>
+				</>
+				<View>
+					<FlashList
+						data={countries.slice(0, 15)}
+						renderItem={renderItem}
+						estimatedItemSize={100}
+						showsVerticalScrollIndicator
+						showsHorizontalScrollIndicator={false}
+						ItemSeparatorComponent={() => <View className="h-1" />}
+						keyExtractor={(item) => item.code}
+					/>
+				</View>
+			</View>
+		);
+	}
+);
+function getFlagEmoji(countryCode) {
+	const codePoints = countryCode
+		.toUpperCase()
+		.split("")
+		.map((char) => 127397 + char.charCodeAt());
+	return String.fromCodePoint(...codePoints);
+}

package/src/components/select/multi-select.tsx

@@ -11,7 +11,7 @@ import { memo, useCallback, useMemo } from "react";
 import { Iconify } from "react-native-iconify";
 import { Control, Controller, Path } from "react-hook-form";
 
-type SelectProps<T extends Record<string, any>> = PressableProps & {
+export type MultiSelectProps<T = Record<string, any>> = PressableProps & {
 	containerClassName?: string;
 	label?: string;
 	error?: string;
@@ -31,7 +31,7 @@ export const MultiSelect = <T extends Record<string, any>>({
 	name,
 	control,
 	...props
-}: SelectProps<T>) => {
+}: MultiSelectProps<T>) => {
 	if (control) {
 		return (
 			<Controller
@@ -65,7 +65,7 @@ function BaseSelect<T extends Record<string, any>>({
 	placeholder,
 	options,
 	...props
-}: SelectProps<T>) {
+}: MultiSelectProps<T>) {
 	const tw = useTw();
 	const renderOptions = useCallback(() => {
 		return options.map((option, index) => (
@@ -112,11 +112,11 @@ const SelectTrigger = memo(
 		error,
 		...props
 	}: PressableProps & {
-		options: SelectProps<T>["options"];
-		value: SelectProps<T>["value"];
-		onChange: SelectProps<T>["onChange"];
-		placeholder: SelectProps<T>["placeholder"];
-		error: SelectProps<T>["error"];
+		options: MultiSelectProps<T>["options"];
+		value: MultiSelectProps<T>["value"];
+		onChange: MultiSelectProps<T>["onChange"];
+		placeholder: MultiSelectProps<T>["placeholder"];
+		error: MultiSelectProps<T>["error"];
 	}) => {
 		const selectedOptions = useMemo(
 			() => options.filter((option) => value?.includes?.(option.value)),

package/src/components/select/select.tsx

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo } from "react";
 import { Iconify } from "react-native-iconify";
 import { Control, Controller, Path } from "react-hook-form";
 
-type SelectProps<T extends Record<string, any>> = PressableProps & {
+export type SelectProps<T = Record<string, any>> = PressableProps & {
 	containerClassName?: string;
 	label?: string;
 	error?: string;

package/src/components/toast/index.tsx

@@ -1,6 +1,7 @@
 import { cn, Pressable, Text, useTw, View } from "@nativetail/core";
 import { AnimatePresence } from "moti";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { Modal } from "react-native";
 import { Iconify } from "react-native-iconify";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { create } from "zustand";
@@ -19,6 +20,8 @@ type ToastType = {
 
 	containerClassName?: string;
 	type?: "success" | "danger" | "info" | "warning";
+	modal?: boolean;
+	icon?: React.ReactNode;
 };
 type InsertToastType = Omit<ToastType, "id">;
 type ToastStore = {
@@ -57,7 +60,6 @@ export function Toaster() {
 	const bottomToasts = toasts.filter((toast) =>
 		toast.position.includes("bottom")
 	);
-
 	const safeInsets = useSafeAreaInsets();
 	return (
 		<AnimatePresence exitBeforeEnter presenceAffectsLayout>
@@ -93,6 +95,34 @@ const Toast = (
 	toast: ToastType & {
 		index: number;
 	}
+) => {
+	const safeInsets = useSafeAreaInsets();
+	const [visible, setVisible] = useState(true);
+	const close = useCallback(() => {
+		setVisible(false);
+	}, [setVisible]);
+	if (toast.modal)
+		return (
+			<Modal visible={visible} onRequestClose={close} transparent>
+				<Pressable
+					className={cn(
+						"absolute w-full h-full bg-black/15 left-0 justify-start z-50 gap-2",
+						toast.position.includes("top")
+							? `pt-[${safeInsets.top + 10}px]`
+							: `pb-[${safeInsets.bottom + 10}px]`
+					)}
+					onPress={close}
+				>
+					<BaseToast {...toast} />
+				</Pressable>
+			</Modal>
+		);
+	return <BaseToast {...toast} />;
+};
+const BaseToast = (
+	toast: ToastType & {
+		index: number;
+	}
 ) => {
 	const [open, setOpen] = useState(true);
 	const tw = useTw();
@@ -136,7 +166,7 @@ const Toast = (
 		),
 	};
 
-	const Icon = Icons[toast.type];
+	const Icon = toast.icon || Icons[toast.type];
 	const horizontalPositions = {
 		center: "items-center",
 		left: "items-start",