nexstruct 1.0.0

package/templates/ui/shadcn/src/components/common/fields/assets/components/single-select-field.component.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState } from 'react';
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import type { InputInterface } from '../interface/input-props.type';
+
+export const SingleSelectField = ({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  options, viewOnly = false, onValueChange, isLoading = false, defaultValue = '',
+  customMessage, disableLabelFormatting = false,
+}: InputInterface['SingleSelect']) => {
+  const [localValue, setLocalValue] = useState(defaultValue);
+  const placeholderText = disableLabelFormatting ? placeholder || 'Select an option' : LabelAndPlaceholderTextFormat(`${placeholder || 'Select an option'}`);
+
+  const renderSelect = (value: string, onChange: (val: string) => void) => (
+    <Select onValueChange={(val) => { onChange(val); onValueChange?.(val); }} value={value} disabled={disabled}>
+      <SelectTrigger>
+        <SelectValue placeholder={placeholderText} />
+      </SelectTrigger>
+      <SelectContent className="capitalize">
+        {isLoading ? (
+          <SelectItem value="loading" disabled>Loading...</SelectItem>
+        ) : options && options.length > 0 ? (
+          options.map((option) => (
+            <SelectItem key={option} value={option} className="capitalize">{option}</SelectItem>
+          ))
+        ) : (
+          <SelectItem value="no-options" disabled>
+            {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName || '')} options not available
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+
+  const LabelEl = () =>
+    labelName ? (
+      <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+        {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName)}
+        {required && <span className="text-muted-foreground">&nbsp;*</span>}
+      </label>
+    ) : null;
+
+  if (form) {
+    return (
+      <FormField
+        control={form.control}
+        name={name || 'select'}
+        render={({ field }) => (
+          <FormItem>
+            <LabelEl />
+            {viewOnly ? (
+              <div className="py-2 px-3 text-sm text-foreground capitalize bg-background rounded-md border border-border min-h-10">
+                {field.value || ''}
+              </div>
+            ) : (
+              <>
+                {renderSelect(field.value, field.onChange)}
+                <FormMessage>{customMessage || ''}</FormMessage>
+              </>
+            )}
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <LabelEl />
+      {viewOnly ? (
+        <div className="py-2 px-3 text-sm text-foreground capitalize bg-background rounded-md border border-border min-h-10">
+          {localValue || ''}
+        </div>
+      ) : (
+        renderSelect(localValue, setLocalValue)
+      )}
+    </div>
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/string-number-field.component.tsx

@@ -0,0 +1,68 @@
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Input } from '@/components/ui/input.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import type { InputInterface } from '../interface/input-props.type';
+
+export const StringNumber = ({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, disableLabelFormatting = false, customMessage,
+}: InputInterface['Number']) => {
+  const placeholderText = disableLabelFormatting
+    ? placeholder || labelName
+    : LabelAndPlaceholderTextFormat(placeholder || labelName || '');
+
+  const LabelEl = () =>
+    labelName ? (
+      <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+        {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName)}
+        {required && <span className="text-destructive">&nbsp;*</span>}
+      </label>
+    ) : null;
+
+  if (form) {
+    return (
+      <FormField
+        control={form.control}
+        name={name || 'string-number'}
+        render={({ field }) => {
+          const error = form.formState.errors?.[name || ''];
+          return (
+            <FormItem>
+              <LabelEl />
+              {viewOnly ? (
+                <div className="py-2 px-3 text-sm text-foreground bg-background rounded-md border border-border min-h-10">
+                  {field.value || ''}
+                </div>
+              ) : (
+                <>
+                  <FormControl>
+                    <Input
+                      type="text"
+                      inputMode="numeric"
+                      pattern="[0-9]*"
+                      placeholder={placeholderText}
+                      disabled={disabled}
+                      {...field}
+                      onChange={(e) => {
+                        const val = e.target.value.replace(/[^0-9]/g, '');
+                        field.onChange(val);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage>{error ? String(error?.message || '') : customMessage || ''}</FormMessage>
+                </>
+              )}
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <LabelEl />
+      <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder={placeholderText} />
+    </>
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/switch-field.component.tsx

@@ -0,0 +1,61 @@
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Switch } from '@/components/ui/switch.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import type { InputInterface } from '../interface/input-props.type';
+
+export const SwitchField = ({
+  form, name, labelName, required = false, disabled = false,
+  viewOnly = false, disableLabelFormatting = false, customMessage,
+  description, border = false, value, setValue, onCheckedChange,
+}: InputInterface['Switch']) => {
+  const LabelEl = () =>
+    labelName ? (
+      <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+        {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName)}
+        {required && <span className="text-destructive">&nbsp;*</span>}
+      </label>
+    ) : null;
+
+  if (form) {
+    return (
+      <FormField
+        control={form.control}
+        name={name || 'switch'}
+        render={({ field }) => {
+          const error = form.formState.errors?.[name || ''];
+          return (
+            <FormItem>
+              <div className={`flex items-center justify-between ${border ? 'p-4 border rounded-lg' : ''}`}>
+                <div className="space-y-0.5">
+                  <LabelEl />
+                  {description && <p className="text-sm text-muted-foreground">{description}</p>}
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={(checked) => {
+                      field.onChange(checked);
+                      onCheckedChange?.(checked);
+                    }}
+                    disabled={disabled || viewOnly}
+                  />
+                </FormControl>
+              </div>
+              <FormMessage>{error ? String(error?.message || '') : customMessage || ''}</FormMessage>
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className={`flex items-center justify-between ${border ? 'p-4 border rounded-lg' : ''}`}>
+      <div className="space-y-0.5">
+        <LabelEl />
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      </div>
+      <Switch checked={value} onCheckedChange={(checked) => { setValue?.(checked); onCheckedChange?.(checked); }} disabled={disabled || viewOnly} />
+    </div>
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/text-area-field.component.tsx

@@ -0,0 +1,62 @@
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Textarea } from '@/components/ui/textarea.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import type { InputInterface } from '../interface/input-props.type';
+
+export const TextArea = ({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, rows = 4, disableLabelFormatting = false, customMessage, value, setValue,
+}: InputInterface['TextArea']) => {
+  const placeholderText = disableLabelFormatting
+    ? placeholder || labelName
+    : LabelAndPlaceholderTextFormat(placeholder || labelName || '');
+
+  const LabelEl = () =>
+    labelName ? (
+      <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+        {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName)}
+        {required && <span className="text-destructive">&nbsp;*</span>}
+      </label>
+    ) : null;
+
+  if (form) {
+    return (
+      <FormField
+        control={form.control}
+        name={name || 'textarea'}
+        render={({ field }) => {
+          const error = form.formState.errors?.[name || ''];
+          return (
+            <FormItem>
+              <LabelEl />
+              {viewOnly ? (
+                <div className="py-2 px-3 text-sm text-foreground bg-background rounded-md border border-border min-h-10 whitespace-pre-wrap">
+                  {field.value || ''}
+                </div>
+              ) : (
+                <>
+                  <FormControl>
+                    <Textarea
+                      placeholder={placeholderText}
+                      disabled={disabled}
+                      rows={rows}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage>{error ? String(error?.message || '') : customMessage || ''}</FormMessage>
+                </>
+              )}
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <LabelEl />
+      <Textarea value={value} onChange={(e) => setValue?.(e.target.value)} placeholder={placeholderText} rows={rows} />
+    </>
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/text-area-with-file.component.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { useRef, useState } from 'react';
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Textarea } from '@/components/ui/textarea.component';
+import { Button } from '@/components/ui/button.component';
+import { Paperclip, X, Eye } from 'lucide-react';
+import Image from 'next/image';
+
+interface FileItem {
+  id: string;
+  name: string;
+  size: number;
+  type: string;
+  previewUrl: string;
+  file: File;
+}
+
+interface TextAreaWithFileProps {
+  form: any;
+  name: string;
+  fileName?: string;
+  placeholder?: string;
+  optional?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  rows?: number;
+  onSend?: (data: { text: string; files: FileItem[] }) => void;
+}
+
+/**
+ * TextAreaWithFile — Textarea with attached file uploads.
+ *
+ * ⚠️ Stores file metadata (id, name, size, type) in the form value,
+ * NOT raw File objects. Actual File references are kept in local state
+ * for submission via onSend callback.
+ */
+export const TextAreaWithFile = ({
+  form, name, fileName = 'files', placeholder, optional = true,
+  disabled = false, viewOnly = false, rows = 3, onSend,
+}: TextAreaWithFileProps) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [fileItems, setFileItems] = useState<FileItem[]>([]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || []);
+    if (!selectedFiles.length) return;
+
+    const newItems: FileItem[] = selectedFiles.map((file) => ({
+      id: `${file.name}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      previewUrl: URL.createObjectURL(file),
+      file,
+    }));
+
+    const updated = [...fileItems, ...newItems];
+    setFileItems(updated);
+
+    // Store metadata in form (strings only — no File objects)
+    const metadata = updated.map((item) => ({
+      id: item.id,
+      name: item.name,
+      size: item.size,
+      type: item.type,
+    }));
+    form.setValue(fileName, metadata);
+  };
+
+  const handleRemoveFile = (id: string) => {
+    setFileItems((prev) => {
+      const removed = prev.find((p) => p.id === id);
+      if (removed) URL.revokeObjectURL(removed.previewUrl);
+      const updated = prev.filter((p) => p.id !== id);
+      // Update form with metadata only
+      const metadata = updated.map((item) => ({
+        id: item.id, name: item.name, size: item.size, type: item.type,
+      }));
+      form.setValue(fileName, metadata);
+      return updated;
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <FormField
+        control={form.control}
+        name={name}
+        render={({ field }) => (
+          <FormItem>
+            <FormControl>
+              <div className="relative">
+                <Textarea {...field} placeholder={placeholder} disabled={disabled} rows={rows} />
+                <div className="absolute bottom-2 right-2 flex items-center gap-1">
+                  <Button type="button" size="icon" variant="ghost" className="h-8 w-8" disabled={disabled}
+                    onClick={() => fileInputRef.current?.click()}>
+                    <Paperclip className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <input type="file" ref={fileInputRef} className="hidden" multiple onChange={handleFileChange} />
+
+      {fileItems.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {fileItems.map((item) => (
+            <div key={item.id} className="relative group border rounded-lg p-2 pr-8">
+              {item.type.startsWith('image/') ? (
+                <Image src={item.previewUrl} alt={item.name} width={48} height={48}
+                  className="object-cover rounded cursor-pointer"
+                  onClick={() => window.open(item.previewUrl, '_blank')} />
+              ) : (
+                <div className="flex items-center gap-1 text-xs">
+                  <Eye className="h-4 w-4 cursor-pointer"
+                    onClick={() => window.open(item.previewUrl, '_blank')} />
+                  <span className="truncate max-w-[100px]">{item.name}</span>
+                </div>
+              )}
+              <button type="button" onClick={() => handleRemoveFile(item.id)}
+                className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <X className="h-3 w-3 text-destructive" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {onSend && (
+        <Button type="button" size="sm"
+          onClick={() => onSend({ text: form.watch(name), files: fileItems })}>
+          Send
+        </Button>
+      )}
+    </div>
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/text-field.component.tsx

@@ -0,0 +1,80 @@
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Input } from '@/components/ui/input.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import type { InputInterface } from '../interface/input-props.type';
+
+export const Text = ({
+  form, name, placeholder, labelName, required = false, disabled = false,
+  viewOnly = false, disableLabelFormatting = false, customMessage,
+  isArray = false, leftIcon, rightIcon, value, setValue,
+}: InputInterface['Text']) => {
+  const placeholderText = disableLabelFormatting
+    ? placeholder || labelName
+    : LabelAndPlaceholderTextFormat(placeholder || labelName || '');
+
+  const LabelEl = () =>
+    labelName ? (
+      <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+        {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName)}
+        {required && <span className="text-destructive">&nbsp;*</span>}
+      </label>
+    ) : null;
+
+  if (form) {
+    return (
+      <FormField
+        control={form.control}
+        name={name || 'text'}
+        render={({ field }) => {
+          const error = form.formState.errors?.[name || ''];
+          const isError = !!error;
+          return (
+            <FormItem>
+              <LabelEl />
+              {viewOnly ? (
+                <div className="py-2 px-3 text-sm text-foreground bg-background rounded-md border border-border min-h-10">
+                  {field.value || ''}
+                </div>
+              ) : (
+                <>
+                  <FormControl>
+                    <div className="w-full relative">
+                      {leftIcon && <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">{leftIcon}</div>}
+                      <Input
+                        className={`${leftIcon ? 'pl-10' : 'pl-4'} ${rightIcon ? 'pr-10' : 'pr-4'} ${isError ? 'border-destructive' : ''}`}
+                        placeholder={placeholderText}
+                        disabled={disabled}
+                        {...field}
+                        type="text"
+                        onChange={(event) => {
+                          if (isArray) {
+                            const arr = event.target.value.split(/[\s,]+/).map(v => v.trim()).filter(v => v.length > 0);
+                            form.setValue(name, arr, { shouldValidate: true, shouldDirty: true });
+                          }
+                          field.onChange(event);
+                        }}
+                      />
+                      {rightIcon && <div className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer">{rightIcon}</div>}
+                    </div>
+                  </FormControl>
+                  <FormMessage>{isError ? String(error?.message || '') : customMessage || ''}</FormMessage>
+                </>
+              )}
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <LabelEl />
+      <div className="w-full relative">
+        {leftIcon && <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">{leftIcon}</div>}
+        <Input className={`${leftIcon ? 'pl-10' : 'pl-4'} ${rightIcon ? 'pr-10' : 'pr-4'}`} value={value} onChange={(e) => setValue?.(e.target.value || '')} type="text" placeholder={placeholderText} />
+        {rightIcon && <div className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer">{rightIcon}</div>}
+      </div>
+    </>
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/tiny-editor.component.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Textarea } from '@/components/ui/textarea.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+
+interface TinyEditorProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  required?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+  height?: number;
+}
+
+export const TinyEditor = ({
+  form, name = 'content', labelName, required = false, placeholder = 'Enter content...',
+  disabled = false, disableLabelFormatting = false, customMessage, height = 300,
+}: TinyEditorProps) => {
+  if (!form) {
+    return <Textarea placeholder={placeholder} disabled={disabled} style={{ minHeight: height }} />;
+  }
+
+  return (
+      <FormField
+        control={form.control}
+        name={name || 'content'}
+        render={({ field }) => {
+          const error = form.formState.errors?.[name || ''];
+        return (
+          <FormItem>
+            {labelName && (
+              <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+                {disableLabelFormatting ? labelName : LabelAndPlaceholderTextFormat(labelName)}
+                {required && <span className="text-destructive">&nbsp;*</span>}
+              </label>
+            )}
+            <FormControl>
+              <Textarea {...field} placeholder={placeholder} disabled={disabled}
+                className="font-mono text-sm" style={{ minHeight: height }} />
+            </FormControl>
+            <FormMessage>{error ? String(error?.message || '') : customMessage || ''}</FormMessage>
+          </FormItem>
+        );
+      }}
+    />
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/upload-profile-picture.component.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar.component';
+import { Button } from '@/components/ui/button.component';
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Camera, User, X } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+interface UploadProfilePictureProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  optional?: boolean;
+  viewOnly?: boolean;
+  removeImage?: boolean;
+}
+
+/**
+ * UploadProfilePicture — Avatar upload with preview.
+ *
+ * ⚠️ Stores a data URL string in the form value, NOT a raw File object.
+ * Access the actual File via a ref or submit handler if needed.
+ */
+export const UploadProfilePicture = ({
+  form, name = 'avatar', labelName, optional = true,
+  viewOnly = false, removeImage = true,
+}: UploadProfilePictureProps) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const fileRef = useRef<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Store actual File in ref for later upload
+    fileRef.current = file;
+
+    // Store data URL string in form — NOT the File object
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = reader.result as string;
+      setPreview(dataUrl);
+      form?.setValue(name, dataUrl, { shouldValidate: true });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleRemove = () => {
+    setPreview(null);
+    fileRef.current = null;
+    form?.setValue(name, null, { shouldValidate: true });
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const imageSrc = preview || (form?.watch(name) ?? null);
+
+  if (!form) {
+    return (
+      <div className="flex flex-col items-center gap-4">
+        {labelName && <label className="font-semibold text-[14px]">{labelName}</label>}
+        <Avatar className="h-24 w-24">
+          {imageSrc ? <AvatarImage src={imageSrc} /> : <AvatarFallback><User className="h-8 w-8" /></AvatarFallback>}
+        </Avatar>
+      </div>
+    );
+  }
+
+  return (
+    <FormField
+      control={form.control}
+      name={name || 'avatar'}
+      render={() => (
+        <FormItem>
+          <div className="flex flex-col items-center gap-4">
+            {labelName && <label className="font-semibold text-[14px]">{labelName}</label>}
+            <div className="relative">
+              <Avatar className="h-24 w-24 cursor-pointer" onClick={() => !viewOnly && fileInputRef.current?.click()}>
+                {imageSrc
+                  ? <AvatarImage src={imageSrc} />
+                  : <AvatarFallback><User className="h-8 w-8" /></AvatarFallback>}
+              </Avatar>
+              {!viewOnly && (
+                <Button type="button" size="icon" variant="ghost" className="absolute bottom-0 right-0 h-8 w-8 rounded-full bg-background shadow"
+                  onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
+                  <Camera className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+            {removeImage && !viewOnly && (preview || form?.watch(name)) && (
+              <Button type="button" variant="ghost" size="sm" onClick={handleRemove}>
+                <X className="h-4 w-4 mr-1" /> Remove
+              </Button>
+            )}
+            <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleFileSelect} />
+          </div>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};