@nativetail/ui 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nativetail/ui",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"description": "",
 	"main": "src/index.ts",
 	"scripts": {},
@@ -38,6 +38,7 @@
 		"react-hook-form": "^7.51.0",
 		"react-native": "0.74.3",
 		"react-native-actions-sheet": "^0.9.6",
+		"react-native-circular-progress-indicator": "^4.4.2",
 		"react-native-gesture-handler": "^2.17.1",
 		"react-native-mask-text": "^0.14.2",
 		"react-native-reanimated": "~3.10.1",

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

@@ -37,6 +37,7 @@ export type FormBuilderProps<
 	onError?: (values: Partial<Record<keyof T, any>>) => void;
 	isSubmitting?: boolean;
 	defaultValues?: DefaultValues<IValues>;
+	inputContainerClassname?: string;
 };
 export function FormBuilder<T extends z.ZodRawShape>({
 	schema,
@@ -47,6 +48,7 @@ export function FormBuilder<T extends z.ZodRawShape>({
 	onError,
 	isSubmitting,
 	defaultValues,
+	inputContainerClassname,
 }: FormBuilderProps<T>) {
 	const shape = schema.shape;
 	const keys = Object.keys(shape);
@@ -56,22 +58,31 @@ export function FormBuilder<T extends z.ZodRawShape>({
 		defaultValues: defaultValues,
 	});
 	return (
-		<View className={cn("gap-2", containerClassname)}>
-			{keys.map((inputKey) => {
-				const Input = inputs[inputKey];
-				const Render = Input.render;
-				if (!Render) {
+		<View className={cn("gap-4", containerClassname)}>
+			<View className={cn("flex-1 gap-2", inputContainerClassname)}>
+				{keys.map((inputKey) => {
+					const Input = inputs[inputKey] || {
+						type: "text",
+						props: {
+							placeholder: inputKey,
+						},
+					};
+					const Render = Input.render;
+					if (!Render) {
+						return (
+							<InputComponent
+								control={form.control}
+								name={inputKey}
+								{...Input}
+								key={inputKey}
+							/>
+						);
+					}
 					return (
-						<InputComponent
-							control={form.control}
-							name={inputKey}
-							{...Input}
-							key={inputKey}
-						/>
+						<Render control={form.control} name={inputKey} key={inputKey} />
 					);
-				}
-				return <Render control={form.control} name={inputKey} key={inputKey} />;
-			})}
+				})}
+			</View>
 			<Button
 				className="w-full"
 				children={"Submit"}
@@ -110,27 +121,27 @@ const InputComponent = ({
 
 type TextInputType = {
 	type: "text";
-	props: InputProps;
+	props?: InputProps;
 };
 type FloatingInputType = {
 	type: "floating";
-	props: FloatingInputProps;
+	props?: FloatingInputProps;
 };
 type SelectInputType = {
 	type: "select";
-	props: SelectProps;
+	props?: SelectProps;
 };
 type MultiSelectInputType = {
 	type: "multi-select";
-	props: MultiSelectProps;
+	props?: MultiSelectProps;
 };
 type PinInputType = {
 	type: "pin";
-	props: PinInputProps;
+	props?: PinInputProps;
 };
 type PhoneInputType = {
 	type: "phone";
-	props: TextInputProps;
+	props?: TextInputProps;
 };
 type InputType =
 	| TextInputType

package/src/components/index.ts

@@ -18,3 +18,5 @@ export * from "./check";
 export * from "./card";
 export * from "./indicator";
 export * from "./loader-dialog";
+export * from "./stepper";
+export * from "./multi-step-form";

package/src/components/input/input.tsx

@@ -133,18 +133,18 @@ const BaseInput = <T extends Record<string, any>>({
 					</Pressable>
 				)}
 
+				{isSecretToggleable && (
+					<ShowPassword
+						showPassword={showPassword}
+						setShowPassword={setShowPassword}
+					/>
+				)}
+
 				{rightElement}
 			</View>
 			{helperText && <Text className="text-muted text-sm">{helperText}</Text>}
 
 			{error && <Text className="text-danger text-sm">{error}</Text>}
-
-			{isSecretToggleable && (
-				<ShowPassword
-					showPassword={showPassword}
-					setShowPassword={setShowPassword}
-				/>
-			)}
 		</View>
 	);
 };

package/src/components/input/show-password.tsx

@@ -11,7 +11,7 @@ export default function ShowPassword({
 	return (
 		<Pressable
 			onPress={() => setShowPassword(!showPassword)}
-			className="absolute right-2 bottom-2"
+			className="absolute right-0 bottom-0 items-center justify-center h-full p-2"
 		>
 			{showPassword ? (
 				<Eye size={20} color={useColor("foreground")} />

package/src/components/multi-step-form/index.tsx

@@ -0,0 +1,27 @@
+import { View } from "@nativetail/core";
+import { FormBuilder, FormBuilderProps } from "../form-builder";
+import { Stepper } from "../stepper";
+import { z } from "zod";
+type FormStep<
+	T extends string,
+	ISchema extends z.ZodRawShape,
+> = FormBuilderProps<ISchema> & {
+	name: T;
+};
+
+type MultiStepFormProps<T extends string, ISchema extends z.ZodRawShape> = {
+	steps: FormStep<T, any>[];
+	activeStep: T;
+};
+export function MultiStepForm<T extends string, ISchema extends z.ZodRawShape>({
+	activeStep,
+	steps,
+}: MultiStepFormProps<T, ISchema>) {
+	const currentStep = steps.find((step) => step.name === activeStep);
+	return (
+		<View className="flex-1">
+			<Stepper steps={steps.map((step) => step.name)} activeStep={activeStep} />
+			<FormBuilder containerClassname="mt-4 flex-1" {...currentStep} />
+		</View>
+	);
+}

package/src/components/stepper/index.tsx

@@ -1,31 +1,45 @@
-import { cn, View } from "@nativetail/core";
-import { useCallback } from "react";
+import CircularProgress from "react-native-circular-progress-indicator";
 
-export type StepperProps = {
-	steps: string[];
-	activeStepIndex: number;
-	setActiveStepIndex?: (index: number) => void;
+import { Text, useColor, View } from "@nativetail/core";
+import { CircularProgressBaseProps } from "react-native-circular-progress-indicator/lib/typescript/types";
+
+export type StepperProps<T extends string> = {
+	steps: T[];
+	activeStep: T;
+	progressProps?: CircularProgressBaseProps;
 };
-export const Stepper = (props: StepperProps) => {
-	const renderSteps = useCallback(() => {
-		return props.steps.map((step, index) => {
-			const isActive = index === props.activeStepIndex;
-			const isCompleted = index < props.activeStepIndex;
-			return (
-				<View key={index} className="flex-row items-center">
-					<View
-						className={cn("w-4 h-4 rounded-full", {
-							"bg-primary": isActive,
-							"bg-gray-300": !isActive && !isCompleted,
-							"bg-success": isCompleted,
-						})}
-					/>
-					{index < props.steps.length - 1 && (
-						<View className="h-0.5 bg-gray-300 w-4" />
-					)}
+export function Stepper<T extends string>({
+	steps,
+	activeStep,
+	progressProps,
+}: StepperProps<T>) {
+	const activeStepIndex = steps.findIndex((step) => step === activeStep);
+	const stepProgresss = ((activeStepIndex + 1) / steps.length) * 100;
+	const nextStep = steps[activeStepIndex + 1];
+	const nextStepData = nextStep ? nextStep : "Completed";
+
+	return (
+		<View className="flex-row items-center gap-2">
+			<View className="w-17 h-17 ">
+				<CircularProgress
+					value={stepProgresss}
+					activeStrokeWidth={8}
+					radius={33}
+					showProgressValue={false}
+					activeStrokeColor={useColor("primary")}
+					inActiveStrokeColor={useColor("primary/15")}
+					{...progressProps}
+				/>
+				<View className="absolute top-0 left-0 w-full h-full text-center flex items-center justify-center ">
+					<Text className="text-sm foreground ">
+						{activeStepIndex + 1} of {steps.length}
+					</Text>
 				</View>
-			);
-		});
-	}, [props.steps, props.activeStepIndex]);
-	return <View className="flex-row items-center">{renderSteps()}</View>;
-};
+			</View>
+			<View className="gap-0.5">
+				<Text className="text-[16px] font-medium">{activeStep}</Text>
+				<Text className="text-sm text-muted">Next: {nextStepData}</Text>
+			</View>
+		</View>
+	);
+}