import React from 'react'; import { NewPage } from 'mich-pages'; import { User, Phone } from 'lucide-react'; const pageConfig = { type: "CREATE", name: "User Profile", icon: <User />, id: "user-form", categories: [ { key: "personal", name: "Personal Information" } ], headings: [ { key: "name", name: "Full Name", category: "personal", placeholder: "Enter your full name", formType: "text", prefixIcons: <User />, required: true }, { key: "phone", name: "Phone Number", category: "personal", placeholder: "Enter phone number", formType: "text", prefixIcons: <Phone /> } ], data: {}, showButton: { createButton: true }, create: { create: async (data) => { console.log("Form submitted:", data); return "isSuccess"; }, createStatus: "none" } }; export function UserForm() { return <NewPage data={pageConfig} />; }

const advancedField = { key: "email", name: "Email Address", category: "contact", placeholder: "Enter your email", formType: "email", required: true, prefixIcons: <Mail />, suffixIcons: <Check />, helper: "We'll never share your email", useRegex: [ { regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: "Please enter a valid email address" } ] };

import { useState } from "react"; import { NewPage } from "mich-pages"; import { Lock, Eye, EyeOff } from "lucide-react"; export function SecureForm() { const [showPassword, setShowPassword] = useState(false); const passwordField = { key: "password", name: "Password", category: "security", placeholder: "Create a strong password", required: true, formType: showPassword ? "text" : "password", prefixIcons: <Lock />, suffixIcons: ( <button type="button" onClick={() => setShowPassword(!showPassword)} className="p-1 hover:bg-gray-100 rounded" > {showPassword ? <EyeOff size={16} /> : <Eye size={16} />} </button> ), useRegex: [ { regex: /^.{8,}$/, message: "Password must be at least 8 characters long" }, { regex: /[A-Z]/, message: "Password must contain at least one uppercase letter" }, { regex: /[a-z]/, message: "Password must contain at least one lowercase letter" }, { regex: /\d/, message: "Password must contain at least one number" }, { regex: /[!@#$%^&*(),.?":{}|<>]/, message: "Password must contain at least one special character" } ] }; // ... rest of configuration }

const teamMembersField = { key: "teamMembers", name: "Team Members", category: "team", formType: "array", child: [ { key: "name", name: "Member Name", category: "team", formType: "text", required: true, placeholder: "Enter member name" }, { key: "role", name: "Role", category: "team", formType: "select", required: true, keyValue: { developer: { value: "developer", description: "Developer" }, designer: { value: "designer", description: "Designer" }, manager: { value: "manager", description: "Manager" } } }, { key: "email", name: "Email", category: "team", formType: "email", placeholder: "member@company.com" } ] };

const profilePictureField = { key: "profilePicture", name: "Profile Picture", category: "personal", formType: "image", placeholder: "Upload your profile picture", accept: "image/*", maxSize: 5000000, // 5MB helper: "Supported formats: JPG, PNG, GIF (max 5MB)" };

const customTheme = { style: { primary: "#3b82f6", // Primary color for buttons and accents secondary: "#6b7280", // Secondary color for borders and labels tertiary: "#1e293b" // Tertiary color for backgrounds } };