nexstruct 1.0.0

package/templates/ui/shadcn/src/components/common/fields/assets/components/upload-video-file.component.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Button } from '@/components/ui/button.component';
+import { UploadCloud, X, FileVideo } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+interface UploadVideoFileProps {
+  form: any;
+  name: string;
+  labelName?: string;
+  optional?: boolean;
+  maxSizeMB?: number;
+}
+
+/**
+ * UploadVideoFile — Video upload with preview.
+ *
+ * ⚠️ Stores a data URL string in the form value, NOT a raw File object.
+ */
+export const UploadVideoFile = ({
+  form, name, labelName, optional = true, maxSizeMB = 50,
+}: UploadVideoFileProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const value = form.watch(name);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      alert(`File exceeds ${maxSizeMB}MB limit`);
+      return;
+    }
+
+    // Store a blob URL string in form — NOT the File object
+    const url = URL.createObjectURL(file);
+    form.setValue(name, url, { shouldValidate: true });
+    setPreviewUrl(url);
+  };
+
+  const handleRemove = () => {
+    form.setValue(name, null, { shouldValidate: true });
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    setPreviewUrl(null);
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  const displayUrl = previewUrl ?? (typeof value === 'string' ? value : null);
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={() => (
+        <FormItem>
+          {labelName && (
+            <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+              {labelName}
+              {!optional && <span className="text-destructive">&nbsp;*</span>}
+            </label>
+          )}
+          {displayUrl ? (
+            <div className="relative">
+              <video src={displayUrl} controls className="w-full max-h-64 rounded-lg" />
+              <Button type="button" size="icon" variant="ghost" className="absolute top-2 right-2 h-8 w-8 bg-background/80"
+                onClick={handleRemove}>
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          ) : (
+            <div className="border-2 border-dashed rounded-lg p-8 text-center hover:border-primary/50 transition-colors cursor-pointer"
+              onClick={() => inputRef.current?.click()}>
+              <UploadCloud className="h-10 w-10 mx-auto text-muted-foreground" />
+              <p className="mt-2 text-sm text-muted-foreground">Click to upload video</p>
+              <p className="text-xs text-muted-foreground">Max {maxSizeMB}MB</p>
+              <input ref={inputRef} type="file" accept="video/*" className="hidden" onChange={handleFileChange} />
+            </div>
+          )}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/interface/input-props.type.ts

@@ -0,0 +1,198 @@
+export interface TextInputProps {
+  form?: any;
+  name?: string;
+  placeholder?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  isArray?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+export interface TextAreaInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  rows?: number;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+export interface NumberInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  numberType?: 'float' | 'integer';
+  customMessage?: React.ReactNode;
+}
+
+export interface PasswordInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  disableLabelFormatting?: boolean;
+  mode?: 'normal' | 'validate';
+  customMessage?: React.ReactNode;
+}
+
+export interface SingleSelectProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: string[];
+  viewOnly?: boolean;
+  isLoading?: boolean;
+  defaultValue?: any;
+  onValueChange?: (value: any) => void;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+}
+
+export interface SelectFieldProps {
+  form: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { value: string; label: string; image?: string; flag?: string; disabled?: boolean }[] | string[];
+  placeholder?: string;
+  showSearch?: boolean;
+  type?: 'single' | 'multiple';
+  viewOnly?: boolean;
+  onValueChange?: (value: string | string[]) => void;
+  isLoading?: boolean;
+  onSearch?: (query: string) => void;
+  customMessage?: string;
+}
+
+export interface SwitchProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  description?: string;
+  border?: boolean;
+  value?: boolean;
+  setValue?: (value: boolean) => void;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export interface CheckboxProps {
+  form?: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { label: string; value: string }[];
+}
+
+export interface RadioProps {
+  form?: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: { label: string; value: string }[];
+}
+
+export interface DatePickerProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+}
+
+export interface PhoneNumberProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+  defaultCountry?: string;
+  disableCountryCode?: boolean;
+  disableDropdown?: boolean;
+  onValueChange?: (value: string) => void;
+  isLoading?: boolean;
+  hasPhone?: boolean;
+}
+
+export interface SearchFieldProps {
+  form?: any;
+  name?: string;
+  placeholder?: string;
+  onSearch?: (value: string) => void;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+export interface InputInterface {
+  Text: TextInputProps;
+  TextArea: TextAreaInputProps;
+  Number: NumberInputProps;
+  Password: PasswordInputProps;
+  SingleSelect: SingleSelectProps;
+  PhoneNumber: PhoneNumberProps;
+  Switch: SwitchProps;
+  DatePicker: DatePickerProps;
+  Search: SearchFieldProps;
+}
+
+export interface FieldPropsInterface {
+  form?: any;
+  name: string;
+  placeholder?: string;
+  labelName?: string;
+  description?: string;
+  border?: boolean;
+  options?: string[];
+  required?: boolean;
+  disabled?: boolean;
+  isArray?: boolean;
+  style?: string;
+  defaultValue?: any;
+  viewOnly?: boolean;
+  rows?: number;
+  disableLabelFormatting?: boolean;
+  maxLength?: number;
+  suffix?: string;
+  mode?: 'normal' | 'validate';
+  customMessage?: React.ReactNode;
+  onValueChange?: (value: any) => void;
+  isLoading?: boolean;
+}

package/templates/ui/shadcn/src/components/common/fields/cusInputField.component.tsx

@@ -0,0 +1,52 @@
+import { Text } from "./assets/components/text-field.component";
+import { TextArea } from "./assets/components/text-area-field.component";
+import { Number } from "./assets/components/number-field.component";
+import { StringNumber } from "./assets/components/string-number-field.component";
+import { Password } from "./assets/components/password-field.component";
+import { SingleSelectField } from "./assets/components/single-select-field.component";
+import { SelectField } from "./assets/components/select-field.component";
+import { SwitchField } from "./assets/components/switch-field.component";
+import { RadioField } from "./assets/components/radio-field.component";
+import { CheckField } from "./assets/components/check-field.component";
+import { MultiCheckField } from "./assets/components/multi-check-field.component";
+import { SingleCheckField } from "./assets/components/single-check-field.component";
+import { SearchField } from "./assets/components/search-field.component";
+import { DatePickerField } from "./assets/components/date-picker-field.component";
+import { PhoneNumber } from "./assets/components/phone-number-field.component";
+import { OTP } from "./assets/components/otp-field.component";
+import { RangeDatePicker } from "./assets/components/range-date-picker.component";
+import { LimitField } from "./assets/components/limit-field.component";
+import { TextAreaWithFile } from "./assets/components/text-area-with-file.component";
+import { UploadProfilePicture } from "./assets/components/upload-profile-picture.component";
+import { UploadVideoFile } from "./assets/components/upload-video-file.component";
+import { DynamicFileUploadField } from "./assets/components/dynamic-file-upload-field.component";
+import { RichTextEditor } from "./assets/components/rich-text-editor.component";
+import { TinyEditor } from "./assets/components/tiny-editor.component";
+
+export const CustomField = {
+  Text,
+  TextArea,
+  Number,
+  StringNumber,
+  Password,
+  SingleSelectField,
+  SelectField,
+  SwitchField,
+  RadioField,
+  CheckField,
+  MultiCheckField,
+  SingleCheckField,
+  SearchField,
+  CommonSearch: SearchField,
+  DatePickerField,
+  RangeDatePicker,
+  PhoneNumber,
+  OTP,
+  LimitField,
+  TextAreaWithFile,
+  UploadProfilePicture,
+  UploadVideoFile,
+  DynamicFileUploadField,
+  RichTextEditor,
+  TinyEditor,
+};

package/templates/ui/shadcn/src/components/common/pagination/pagination.component.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button.component';
+import { cn } from '@/lib/utils.util';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+}
+
+export function Pagination({ currentPage, totalPages, setCurrentPage }: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  const getPageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = [];
+    const delta = 2;
+    const left = Math.max(2, currentPage - delta);
+    const right = Math.min(totalPages - 1, currentPage + delta);
+
+    pages.push(1);
+    if (left > 2) pages.push('ellipsis');
+    for (let i = left; i <= right; i++) pages.push(i);
+    if (right < totalPages - 1) pages.push('ellipsis');
+    if (totalPages > 1) pages.push(totalPages);
+
+    return pages;
+  };
+
+  return (
+    <div className="flex items-center justify-center gap-1">
+      <Button
+        variant="outline"
+        size="icon"
+        className="h-8 w-8"
+        disabled={currentPage <= 1}
+        onClick={() => setCurrentPage(currentPage - 1)}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      {getPageNumbers().map((page, idx) =>
+        page === 'ellipsis' ? (
+          <span key={`ellipsis-${idx}`} className="px-2 text-muted-foreground">...</span>
+        ) : (
+          <Button
+            key={page}
+            variant={currentPage === page ? 'default' : 'outline'}
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => setCurrentPage(page)}
+          >
+            {page}
+          </Button>
+        )
+      )}
+      <Button
+        variant="outline"
+        size="icon"
+        className="h-8 w-8"
+        disabled={currentPage >= totalPages}
+        onClick={() => setCurrentPage(currentPage + 1)}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

package/templates/ui/shadcn/src/components/ui/avatar.component.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@/lib/utils.util';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates/ui/shadcn/src/components/ui/badge.component.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils.util';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = ({ className, variant, ...props }: BadgeProps) => (
+  <div className={cn(badgeVariants({ variant }), className)} {...props} />
+);
+
+export { Badge, badgeVariants };

package/templates/ui/shadcn/src/components/ui/button.component.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils.util';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/templates/ui/shadcn/src/components/ui/card.component.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils.util';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/templates/ui/shadcn/src/components/ui/checkbox.component.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils.util';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };