nexstruct 1.0.0

package/templates/ui/shadcn/src/app/examples/dialog/page.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useState } from 'react';
+import { DialogWrapper } from '@/components/common/dialog/dialog-wrapper.component';
+import { ActionButton } from '@/components/common/button/action-button.component';
+import { Pagination } from '@/components/common/pagination/pagination.component';
+import { Edit, Trash2, Plus, Info, AlertTriangle, CheckCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button.component';
+
+const sampleItems = Array.from({ length: 25 }, (_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`,
+  status: ['Active', 'Pending', 'Archived'][i % 3],
+}));
+
+export default function DialogExamplePage() {
+  const [basicOpen, setBasicOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const perPage = 5;
+  const totalPages = Math.ceil(sampleItems.length / perPage);
+  const paginatedItems = sampleItems.slice((currentPage - 1) * perPage, currentPage * perPage);
+
+  const variants = [
+    { variant: 'default' as const, icon: Info, label: 'Info', desc: 'Default variant' },
+    { variant: 'destructive' as const, icon: Trash2, label: 'Delete', desc: 'Destructive variant' },
+    { variant: 'outline' as const, icon: Edit, label: 'Edit', desc: 'Outline variant' },
+    { variant: 'secondary' as const, icon: CheckCircle, label: 'Confirm', desc: 'Secondary variant' },
+    { variant: 'ghost' as const, icon: Plus, label: 'Add', desc: 'Ghost variant' },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold">Dialog, ActionButton & Pagination Demo</h1>
+        <p className="text-muted-foreground mt-1">Reusable DialogWrapper with sticky header, ActionButton variants with tooltips, and pagination.</p>
+      </div>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">ActionButton Variants</h2>
+        <div className="flex flex-wrap gap-3">
+          {variants.map((v) => (
+            <ActionButton
+              key={v.variant}
+              variant={v.variant}
+              icon={<v.icon className="h-4 w-4" />}
+              buttonContent={v.label}
+              tooltipContent={v.desc}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">ActionButton with Loading</h2>
+        <ActionButton
+          buttonContent="Save Changes"
+          isPending
+          variant="default"
+        />
+        <ActionButton
+          buttonContent="Deleting..."
+          isPending
+          variant="destructive"
+          loadingContent="Please wait..."
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">DialogWrapper</h2>
+        <div className="flex flex-wrap gap-3">
+          <ActionButton buttonContent="Open Basic Dialog" variant="default" icon={<Info className="h-4 w-4" />} handleOpen={() => setBasicOpen(true)} />
+          <ActionButton buttonContent="Confirm Action" variant="destructive" icon={<AlertTriangle className="h-4 w-4" />} handleOpen={() => setConfirmOpen(true)} />
+        </div>
+
+        <DialogWrapper open={basicOpen} setOpen={setBasicOpen} title="Basic Dialog" description="This is a reusable dialog with a sticky header and scrollable content.">
+          <p className="text-muted-foreground">This dialog demonstrates the DialogWrapper component. The header stays fixed while content scrolls.</p>
+          <div className="mt-4 space-y-2">
+            {Array.from({ length: 20 }, (_, i) => (
+              <p key={i} className="text-sm text-muted-foreground">Scrollable content line {i + 1}.</p>
+            ))}
+          </div>
+        </DialogWrapper>
+
+        <DialogWrapper
+          open={confirmOpen} setOpen={setConfirmOpen}
+          title="Confirm Deletion"
+          description="This action cannot be undone."
+          footer={
+            <div className="flex gap-2 ml-auto">
+              <Button variant="outline" onClick={() => setConfirmOpen(false)}>Cancel</Button>
+              <Button variant="destructive" onClick={() => { alert('Confirmed!'); setConfirmOpen(false); }}>
+                Delete
+              </Button>
+            </div>
+          }
+        >
+          <p className="text-muted-foreground">Are you sure you want to proceed with this action?</p>
+        </DialogWrapper>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-lg font-semibold">Pagination</h2>
+        <div className="space-y-2">
+          {paginatedItems.map((item) => (
+            <div key={item.id} className="flex items-center justify-between p-3 border rounded-lg">
+              <span className="font-medium">{item.title}</span>
+              <span className={`text-xs px-2 py-1 rounded ${
+                item.status === 'Active' ? 'bg-green-100 text-green-700' :
+                item.status === 'Pending' ? 'bg-yellow-100 text-yellow-700' :
+                'bg-gray-100 text-gray-700'
+              }`}>
+                {item.status}
+              </span>
+            </div>
+          ))}
+        </div>
+        <Pagination currentPage={currentPage} totalPages={totalPages} setCurrentPage={setCurrentPage} />
+      </section>
+    </div>
+  );
+}

package/templates/ui/shadcn/src/app/examples/form/page.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { CustomField } from '@/components/common/fields/cusInputField.component';
+import { ActionButton } from '@/components/common/button/action-button.component';
+
+const formSchema = z.object({
+  fullName: z.string().min(2, 'Name must be at least 2 characters'),
+  bio: z.string().optional(),
+  age: z.coerce.number().min(1, 'Required').max(150),
+  phone: z.string().optional(),
+  password: z.string().min(6, 'Min 6 characters'),
+  role: z.string().min(1, 'Select a role'),
+  notify: z.boolean().optional(),
+  acceptTerms: z.boolean().refine((v) => v === true, 'You must accept'),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export default function FormExamplePage() {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { fullName: '', bio: '', age: 0, phone: '', password: '', role: '', notify: false, acceptTerms: false },
+  });
+
+  const onSubmit = (data: FormValues) => alert(JSON.stringify(data, null, 2));
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold">CustomField Form Demo</h1>
+        <p className="text-muted-foreground mt-1">All field types with react-hook-form + zod validation.</p>
+      </div>
+
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 max-w-xl">
+        <CustomField.Text
+          form={form}
+          name="fullName"
+          labelName="Full Name"
+          placeholder="Enter your name"
+          required
+        />
+
+        <CustomField.TextArea
+          form={form}
+          name="bio"
+          labelName="Biography"
+          placeholder="Tell us about yourself"
+          rows={3}
+        />
+
+        <CustomField.Number
+          form={form}
+          name="age"
+          labelName="Age"
+          numberType="integer"
+          placeholder="Enter age"
+          required
+        />
+
+        <CustomField.StringNumber
+          form={form}
+          name="phone"
+          labelName="Phone Number"
+          placeholder="Enter digits only"
+        />
+
+        <CustomField.Password
+          form={form}
+          name="password"
+          labelName="Password"
+          placeholder="Min 6 characters"
+          required
+          mode="normal"
+        />
+
+        <CustomField.SingleSelectField
+          form={form}
+          name="role"
+          labelName="Role"
+          placeholder="Select role"
+          options={['Admin', 'Editor', 'Viewer']}
+          required
+        />
+
+        <CustomField.SwitchField
+          form={form}
+          name="notify"
+          labelName="Email Notifications"
+          description="Receive email updates"
+          border
+        />
+
+        <CustomField.SingleCheckField
+          form={form}
+          name="acceptTerms"
+          labelName="I accept the terms and conditions"
+          required
+        />
+
+        <ActionButton type="submit" buttonContent="Submit" btnSize="lg" />
+      </form>
+    </div>
+  );
+}

package/templates/ui/shadcn/src/app/examples/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import Link from 'next/link';
+import { ArrowLeft } from 'lucide-react';
+import { TooltipProvider } from '@/components/ui/tooltip.component';
+
+export default function ExamplesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipProvider>
+      <div className="min-h-screen bg-background">
+        <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur">
+          <div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-4">
+            <Link href="/examples" className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
+              <ArrowLeft className="h-4 w-4" />
+              Examples
+            </Link>
+            <span className="text-sm font-medium">Nexstruct — Component Demo</span>
+          </div>
+        </header>
+        <main className="max-w-6xl mx-auto p-6">{children}</main>
+      </div>
+    </TooltipProvider>
+  );
+}

package/templates/ui/shadcn/src/app/examples/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import Link from 'next/link';
+
+const examples = [
+  { href: '/examples/form', title: 'Form Components', desc: 'All CustomField field types with react-hook-form validation' },
+  { href: '/examples/table', title: 'DynamicTable', desc: 'Config-driven table with loading, empty, and checkbox selection states' },
+  { href: '/examples/dialog', title: 'Dialog, ActionButton & Pagination', desc: 'Reusable dialog wrapper, action button variants, and page navigation' },
+];
+
+export default function ExamplesPage() {
+  return (
+    <div className="min-h-screen p-8 max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-2">Component Examples</h1>
+      <p className="text-muted-foreground mb-8">
+        Interactive demos of the shadcn/ui custom component system.
+      </p>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {examples.map((ex) => (
+          <Link key={ex.href} href={ex.href}
+            className="block p-6 rounded-lg border hover:border-primary hover:shadow-md transition-all"
+          >
+            <h2 className="text-lg font-semibold mb-2">{ex.title}</h2>
+            <p className="text-sm text-muted-foreground">{ex.desc}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/ui/shadcn/src/app/examples/table/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState } from 'react';
+import { DynamicTable, type TableColumn } from '@/components/common/DynamicTable/dynamic-table.component';
+import { Pagination } from '@/components/common/pagination/pagination.component';
+import { LimitField } from '@/components/common/fields/assets/components/limit-field.component';
+import { ActionButton } from '@/components/common/button/action-button.component';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const allUsers: User[] = Array.from({ length: 53 }, (_, i) => ({
+  id: String(i + 1),
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: i % 3 === 0 ? 'Admin' : i % 3 === 1 ? 'Editor' : 'Viewer',
+}));
+
+const columns: TableColumn[] = [
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  { key: 'role', header: 'Role', render: (item: User) => (
+    <span className="px-2 py-1 text-xs rounded bg-primary/10 text-primary capitalize">{item.role}</span>
+  )},
+];
+
+export default function TableExamplePage() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [limit, setLimit] = useState('10');
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  const perPage = Number(limit);
+  const totalPages = Math.ceil(allUsers.length / perPage);
+  const paginatedData = allUsers.slice((currentPage - 1) * perPage, currentPage * perPage);
+
+  const refresh = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 1000);
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-2xl font-bold">DynamicTable Demo</h1>
+        <p className="text-muted-foreground mt-1">Config-driven table with loading state, checkbox selection, and pagination.</p>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <LimitField setLimit={(v) => { setLimit(v); setCurrentPage(1); }} totalItems={allUsers.length} />
+          <ActionButton buttonContent="Refresh" onClick={refresh} variant="outline" btnSize="sm" />
+        </div>
+        {selectedIds.length > 0 && (
+          <p className="text-sm text-muted-foreground">{selectedIds.length} selected</p>
+        )}
+      </div>
+
+      <DynamicTable
+        data={paginatedData}
+        isLoading={isLoading}
+        config={{ columns }}
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        isCheckBox
+        selectedIds={selectedIds}
+        setSelectedIds={setSelectedIds}
+      />
+
+      <Pagination currentPage={currentPage} totalPages={totalPages} setCurrentPage={setCurrentPage} />
+    </div>
+  );
+}

package/templates/ui/shadcn/src/app/page.tsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-4xl font-bold">Nexstruct</h1>
+      <p className="mt-4 text-lg text-muted-foreground">
+        Your project is ready. Start building.
+      </p>
+      <div className="mt-8 flex gap-4">
+        <Link
+          href="/examples"
+          className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+        >
+          View Component Examples
+        </Link>
+      </div>
+    </main>
+  );
+}

package/templates/ui/shadcn/src/components/common/DynamicTable/dynamic-table.component.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableCaption,
+} from '@/components/ui/table.component';
+import { Loader2 } from 'lucide-react';
+
+export type TableColumn = {
+  key: string;
+  header: string;
+  className?: string;
+  render?: (item: any, index: number) => React.ReactNode;
+};
+
+export type TableConfig = {
+  columns: TableColumn[];
+  emptyMessage?: string;
+  showPagination?: boolean;
+  rowClassName?: (item: any) => string;
+  renderExpandableRow?: (item: any, index: number) => React.ReactNode;
+};
+
+interface Pagination {
+  page: number;
+  total: number;
+  perPage?: number;
+  totalPages: number;
+}
+
+interface DynamicTableProps {
+  isLoading: boolean;
+  pagination?: Pagination;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  config: TableConfig;
+  data: any;
+  isCheckBox?: boolean;
+  selectedIds?: string[];
+  setSelectedIds?: (ids: string[]) => void;
+  setSelectObject?: (data: any[]) => void;
+  renderExpandedRow?: (item: any, index: number) => React.ReactNode;
+  pageName?: string;
+}
+
+export function DynamicTable({
+  data, isLoading, pagination, currentPage, setCurrentPage, config,
+  selectedIds = [], setSelectedIds = () => {}, setSelectObject = () => {},
+  isCheckBox = false, renderExpandedRow,
+}: DynamicTableProps) {
+  const isEmpty = !isLoading && (!data || data.length === 0);
+
+  const isRowSelected = (id: string) => selectedIds?.includes(id);
+
+  const toggleRowSelection = (id: string) => {
+    const newSelectedIds = isRowSelected(id)
+      ? selectedIds.filter((item) => item !== id)
+      : [...selectedIds, id];
+    setSelectedIds(newSelectedIds);
+    setSelectObject(data.filter((item: any) => newSelectedIds.includes(item.id)));
+  };
+
+  const toggleSelectAll = () => {
+    const allSelected = data?.every((item: any) => isRowSelected(item.id));
+    const newSelectedIds = allSelected ? [] : data.map((item: any) => item.id);
+    setSelectedIds(newSelectedIds);
+    setSelectObject(allSelected ? [] : data);
+  };
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        {pagination && pagination.totalPages > 0 && (
+          <TableCaption className="p-4">
+            {/* Pagination component rendered separately */}
+          </TableCaption>
+        )}
+        <TableHeader className="bg-muted/50">
+          <TableRow>
+            {isCheckBox && (
+              <TableHead className="w-10 pl-4">
+                <input
+                  type="checkbox"
+                  checked={data?.length > 0 && data?.every((item: any) => isRowSelected(item.id))}
+                  onChange={toggleSelectAll}
+                  className="h-4 w-4"
+                />
+              </TableHead>
+            )}
+            {config.columns.map((column) => (
+              <TableHead key={column.key} className={column.className}>
+                {column.header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={config.columns.length + (isCheckBox ? 1 : 0)} className="h-64 text-center">
+                <div className="flex items-center justify-center">
+                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : isEmpty ? (
+            <TableRow>
+              <TableCell colSpan={config.columns.length + (isCheckBox ? 1 : 0)} className="h-64 text-center text-muted-foreground">
+                {config.emptyMessage || 'No data available'}
+              </TableCell>
+            </TableRow>
+          ) : (
+            data?.map((row: any, rowIndex: number) => (
+              <TableRow key={rowIndex} className={config.rowClassName?.(row)}>
+                {isCheckBox && (
+                  <TableCell className="pl-4">
+                    <input
+                      type="checkbox"
+                      checked={isRowSelected(row.id)}
+                      onChange={() => toggleRowSelection(row.id)}
+                      className="h-4 w-4"
+                    />
+                  </TableCell>
+                )}
+                {config.columns.map((col, colIndex) => (
+                  <TableCell key={colIndex} className={col.className}>
+                    {col.render ? col.render(row, rowIndex) : row[col.key]}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/templates/ui/shadcn/src/components/common/button/action-button.component.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { Button } from '@/components/ui/button.component';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip.component';
+import { cn } from '@/lib/utils.util';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+
+interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  type?: 'submit' | 'button' | 'reset';
+  btnSize?: 'default' | 'sm' | 'lg' | 'icon';
+  btnStyle?: string;
+  tooltipStyle?: string;
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  tooltipContent?: string;
+  buttonContent?: React.ReactNode;
+  icon?: React.ReactNode;
+  lastIcon?: React.ReactNode;
+  isPending?: boolean;
+  handleOpen?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  loadingContent?: React.ReactNode;
+}
+
+const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ type = 'button', btnSize = 'default', btnStyle, tooltipStyle,
+     variant = 'default', tooltipContent, buttonContent, icon, lastIcon,
+     isPending = false, handleOpen, side = 'top', loadingContent,
+     disabled = false, ...props }, ref) => {
+    const buttonEl = (
+      <Button
+        ref={ref}
+        type={type}
+        size={btnSize}
+        onClick={handleOpen}
+        variant={variant}
+        disabled={isPending || disabled}
+        className={cn(
+          'capitalize cursor-pointer',
+          (isPending || disabled) && 'opacity-60 cursor-not-allowed',
+          btnStyle,
+          (icon) && (buttonContent || isPending) && 'gap-x-3',
+        )}
+        {...props}
+      >
+        {!isPending && icon}
+        {(buttonContent || isPending) && (
+          <span>{isPending ? (loadingContent ?? buttonContent) : buttonContent}</span>
+        )}
+        {!isPending && lastIcon}
+        {isPending && <Loader2 className="ml-2 h-4 w-4 animate-spin" />}
+      </Button>
+    );
+
+    if (!tooltipContent) return buttonEl;
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{buttonEl}</TooltipTrigger>
+        <TooltipContent side={side} className={cn('bg-muted-foreground text-primary-foreground', tooltipStyle)}>
+          <p className="text-[10px]">{tooltipContent}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+);
+ActionButton.displayName = 'ActionButton';
+
+export { ActionButton };

package/templates/ui/shadcn/src/components/common/dialog/dialog-wrapper.component.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import {
+  Dialog, DialogClose, DialogContent, DialogDescription,
+  DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
+} from '@/components/ui/dialog.component';
+import { cn } from '@/lib/utils.util';
+import { X } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+interface DialogWrapperProps {
+  style?: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerContent?: ReactNode;
+  title?: ReactNode;
+  description?: string;
+  children: ReactNode;
+  closer?: boolean;
+  footer?: ReactNode;
+}
+
+export function DialogWrapper({
+  open, setOpen, triggerContent, title, description,
+  children, closer = true, style, footer,
+}: DialogWrapperProps) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {triggerContent && <DialogTrigger asChild>{triggerContent}</DialogTrigger>}
+      <DialogContent
+        className={cn(
+          'flex flex-col max-h-[90%] lg:max-h-[80%] overflow-hidden',
+          style,
+        )}
+      >
+        {closer && (
+          <DialogClose asChild>
+            <button className="cursor-pointer absolute top-3 right-3 rounded-sm opacity-70 hover:opacity-100 focus:outline-none z-10">
+              <X className="h-5 w-5" />
+              <span className="sr-only">Close</span>
+            </button>
+          </DialogClose>
+        )}
+        <DialogHeader
+          className={cn(
+            'shrink-0 capitalize bg-background',
+            title || description ? 'py-3 px-2 border-b' : 'pt-2 bg-transparent',
+          )}
+        >
+          <DialogTitle className={title ? 'block' : 'hidden'}>{title || ''}</DialogTitle>
+          <DialogDescription className={description ? 'block' : 'hidden'}>{description || ''}</DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto px-4 py-4">{children}</div>
+        {footer && <DialogFooter className="border-t px-4 py-3">{footer}</DialogFooter>}
+      </DialogContent>
+    </Dialog>
+  );
+}