nexstruct 1.0.0

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

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { LabelAndPlaceholderTextFormat, maskString } from '@/lib/utils.util';
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import type { InputInterface } from '../interface/input-props.type';
+
+export const PhoneNumber = ({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, disableLabelFormatting = false, customMessage, defaultCountry = 'us',
+  disableCountryCode = true, disableDropdown = false, onValueChange, isLoading = false,
+  hasPhone = false,
+}: InputInterface['PhoneNumber']) => {
+  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 || 'phone'}
+        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">
+                  {hasPhone ? maskString(field.value) : field.value || ''}
+                </div>
+              ) : (
+                <>
+                  <FormControl>
+                    <div className="[&_.react-tel-input]:w-full [&_.form-control]:!w-full [&_.form-control]:!h-11 [&_.form-control]:!rounded-lg [&_.form-control]:!border-border [&_.form-control]:!bg-background [&_.form-control]:!text-sm [&_.flag-dropdown]:!rounded-l-lg [&_.flag-dropdown]:!border-border">
+                      <PhoneInput
+                        country={defaultCountry}
+                        value={field.value}
+                        disabled={disabled || isLoading}
+                        disableCountryCode={disableCountryCode}
+                        disableDropdown={disableDropdown}
+                        placeholder={LabelAndPlaceholderTextFormat(placeholder || 'Enter phone number')}
+                        inputStyle={isError ? { borderColor: '#dc2626' } : undefined}
+                        onChange={(value) => {
+                          field.onChange(value);
+                          onValueChange?.(value);
+                        }}
+                        onBlur={field.onBlur}
+                        searchStyle={{ width: '100%' }}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage>
+                    {isError ? String(error?.message || '') : customMessage || ''}
+                  </FormMessage>
+                </>
+              )}
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <LabelEl />
+      <PhoneInput
+        country={defaultCountry}
+        disabled={disabled}
+        disableCountryCode={disableCountryCode}
+        disableDropdown={disableDropdown}
+        placeholder={placeholderText}
+        inputClass="!w-full !h-11 !rounded-lg !border-border !bg-background !text-sm"
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,41 @@
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.component';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import type { RadioProps } from '../interface/input-props.type';
+
+export const RadioField = ({
+  form, name, labelName, required = false, disabled = false, options = [],
+}: RadioProps) => {
+  const LabelEl = () =>
+    labelName ? (
+      <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]">
+        {LabelAndPlaceholderTextFormat(labelName)}
+        {required && <span className="text-destructive">&nbsp;*</span>}
+      </label>
+    ) : null;
+
+  if (!form) return null;
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <LabelEl />
+          <FormControl>
+            <RadioGroup onValueChange={field.onChange} defaultValue={field.value} className="flex flex-col space-y-1" disabled={disabled}>
+              {options.map((opt) => (
+                <div key={opt.value} className="flex items-center space-x-2">
+                  <RadioGroupItem value={opt.value} id={`${name}-${opt.value}`} />
+                  <FormLabel htmlFor={`${name}-${opt.value}`} className="font-normal">{opt.label}</FormLabel>
+                </div>
+              ))}
+            </RadioGroup>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

package/templates/ui/shadcn/src/components/common/fields/assets/components/range-date-picker.component.tsx

@@ -0,0 +1,71 @@
+import { FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form.component';
+import { Input } from '@/components/ui/input.component';
+import { LabelAndPlaceholderTextFormat } from '@/lib/utils.util';
+import { Calendar } from 'lucide-react';
+
+interface RangeDatePickerProps {
+  form: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+}
+
+export const RangeDatePicker = ({
+  form, name, labelName, required = false, disabled = false,
+  disableLabelFormatting = false, customMessage,
+}: RangeDatePickerProps) => {
+  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;
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => {
+        const error = form.formState.errors?.[name];
+        const value = field.value || {};
+        return (
+          <FormItem>
+            <LabelEl />
+            <div className="flex items-center gap-2">
+              <div className="relative flex-1">
+                <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <FormControl>
+                  <Input
+                    type="date"
+                    className="pl-10"
+                    disabled={disabled}
+                    value={value.from || ''}
+                    onChange={(e) => field.onChange({ ...value, from: e.target.value })}
+                  />
+                </FormControl>
+              </div>
+              <span className="text-muted-foreground">to</span>
+              <div className="relative flex-1">
+                <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <FormControl>
+                  <Input
+                    type="date"
+                    className="pl-10"
+                    disabled={disabled}
+                    value={value.to || ''}
+                    onChange={(e) => field.onChange({ ...value, to: e.target.value })}
+                  />
+                </FormControl>
+              </div>
+            </div>
+            <FormMessage>{error ? String(error?.message || '') : customMessage || ''}</FormMessage>
+          </FormItem>
+        );
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,91 @@
+'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';
+import { useState } from 'react';
+import { Bold, Italic, List, Heading } from 'lucide-react';
+import { Button } from '@/components/ui/button.component';
+import { cn } from '@/lib/utils.util';
+
+interface RichTextEditorProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  required?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: React.ReactNode;
+}
+
+export const RichTextEditor = ({
+  form, name = 'content', labelName, required = false, placeholder = 'Write something...',
+  disabled = false, disableLabelFormatting = false, customMessage,
+}: RichTextEditorProps) => {
+  const [activeTags, setActiveTags] = useState<string[]>([]);
+
+  const wrapSelection = (tag: string) => {
+    if (!form) return;
+    const textarea = document.getElementById(name) as HTMLTextAreaElement;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const text = textarea.value;
+    const selected = text.substring(start, end);
+    const wrapped = tag === 'h1' ? `# ${selected}` :
+      tag === 'h2' ? `## ${selected}` :
+      tag === 'li' ? `- ${selected}` :
+      `**${selected}**`;
+
+    const newText = text.substring(0, start) + wrapped + text.substring(end);
+    form.setValue(name, newText, { shouldValidate: true });
+    setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
+  };
+
+  const editorButtons = [
+    { tag: 'bold', icon: Bold, label: 'Bold' },
+    { tag: 'italic', icon: Italic, label: 'Italic' },
+    { tag: 'h1', icon: Heading, label: 'Heading' },
+    { tag: 'li', icon: List, label: 'List' },
+  ];
+
+  if (!form) {
+    return <Textarea placeholder={placeholder} disabled={disabled} />;
+  }
+
+  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>
+            )}
+            <div className="border rounded-md">
+              <div className="flex items-center gap-1 p-2 border-b bg-muted/30">
+                {editorButtons.map((btn) => (
+                  <Button key={btn.tag} type="button" size="icon" variant="ghost" className={cn('h-8 w-8', activeTags.includes(btn.tag) && 'bg-accent')}
+                    onClick={() => wrapSelection(btn.tag)} disabled={disabled}>
+                    <btn.icon className="h-4 w-4" />
+                  </Button>
+                ))}
+              </div>
+              <FormControl>
+                <Textarea id={name} {...field} placeholder={placeholder} disabled={disabled}
+                  className="min-h-[200px] border-0 focus-visible:ring-0 rounded-t-none font-mono text-sm" />
+              </FormControl>
+            </div>
+            <FormMessage>{error ? String(error?.message || '') : customMessage || ''}</FormMessage>
+          </FormItem>
+        );
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,34 @@
+import { Search, X } from 'lucide-react';
+import { Input } from '@/components/ui/input.component';
+import type { SearchFieldProps } from '../interface/input-props.type';
+
+export const SearchField = ({
+  placeholder = 'Search...',
+  onSearch,
+  value: externalValue,
+  setValue: setExternalValue,
+}: SearchFieldProps) => {
+  return (
+    <div className="relative w-full">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input
+        className="pl-10 pr-10"
+        placeholder={placeholder}
+        value={externalValue}
+        onChange={(e) => {
+          setExternalValue?.(e.target.value);
+          onSearch?.(e.target.value);
+        }}
+      />
+      {externalValue && (
+        <button
+          type="button"
+          onClick={() => { setExternalValue?.(''); onSearch?.(''); }}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,231 @@
+'use client';
+
+import { cn } from '@/lib/utils.util';
+import { Check, ChevronDown, Loader2, Search, X } from 'lucide-react';
+import Image from 'next/image';
+import * as React from 'react';
+
+interface Option {
+  value: string;
+  label: string;
+  image?: string;
+  flag?: string;
+  disabled?: boolean;
+}
+
+type RawOption = string | Option;
+
+interface SelectFieldProps {
+  form: any;
+  name: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: RawOption[];
+  placeholder?: string;
+  showSearch?: boolean;
+  isImageShow?: boolean;
+  isFlag?: boolean;
+  type?: 'single' | 'multiple';
+  viewOnly?: boolean;
+  onValueChange?: (value: string | string[]) => void;
+  isLoading?: boolean;
+  onSearch?: (query: string) => void;
+  customMessage?: string;
+}
+
+export const SelectField = React.forwardRef<HTMLDivElement, SelectFieldProps>(
+  ({
+    form, name, labelName, required = false, disabled = false,
+    options = [], placeholder = 'Select an option', showSearch = true,
+    isImageShow = false, isFlag = false, type = 'single', viewOnly = false,
+    onValueChange, isLoading = false, onSearch, customMessage,
+  }, ref) => {
+    const normalizedOptions: Option[] = React.useMemo(
+      () => (options || []).map((opt: any) =>
+        typeof opt === 'string' ? { label: opt, value: opt } : opt
+      ), [options]
+    );
+
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState('');
+    const [showMore, setShowMore] = React.useState(false);
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const dropdownRef = React.useRef<HTMLDivElement>(null);
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+    const fieldValue = form.watch(name);
+    const selectedValues = React.useMemo<string[]>(() => {
+      if (type === 'multiple') return Array.isArray(fieldValue) ? fieldValue : [];
+      return fieldValue ? [fieldValue as string] : [];
+    }, [fieldValue, type]);
+
+    const selectedOptions = React.useMemo(
+      () => normalizedOptions.filter((opt) => selectedValues.includes(opt.value)),
+      [normalizedOptions, selectedValues]
+    );
+
+    const filteredOptions = React.useMemo(() => {
+      if (!showSearch || !searchValue) return normalizedOptions;
+      return normalizedOptions.filter(
+        (opt) =>
+          opt.label.toLowerCase().includes(searchValue.toLowerCase()) ||
+          opt.value.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    }, [normalizedOptions, searchValue, showSearch]);
+
+    const handleSelect = (value: string) => {
+      if (type === 'multiple') {
+        const newValues = selectedValues.includes(value)
+          ? selectedValues.filter((v) => v !== value)
+          : [...selectedValues, value];
+        form.setValue(name, newValues, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+        onValueChange?.(newValues);
+      } else {
+        form.setValue(name, value, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+        onValueChange?.(value);
+        setIsOpen(false);
+      }
+    };
+
+    const handleClear = () => {
+      form.setValue(name, type === 'multiple' ? [] : '');
+      onValueChange?.(type === 'multiple' ? [] : '');
+      setShowMore(false);
+    };
+
+    React.useEffect(() => {
+      const handler = (e: MouseEvent) => {
+        if (
+          dropdownRef.current && !dropdownRef.current.contains(e.target as Node) &&
+          !triggerRef.current?.contains(e.target as Node)
+        ) setIsOpen(false);
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handler);
+        searchInputRef.current?.focus();
+      }
+      return () => document.removeEventListener('mousedown', handler);
+    }, [isOpen]);
+
+    const isInvalid = form.formState.errors[name];
+
+    return (
+      <div ref={ref} className="w-full space-y-2">
+        {labelName && (
+          <label className="text-sm font-medium">
+            {labelName}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </label>
+        )}
+
+        {viewOnly ? (
+          <div className="py-2 px-3 text-sm text-foreground bg-background rounded-md border border-border min-h-10">
+            {type === 'multiple'
+              ? selectedOptions.map((o) => o.label).join(', ')
+              : selectedOptions[0]?.label || ''}
+          </div>
+        ) : (
+          <div className="relative">
+            <button
+              ref={triggerRef}
+              type="button"
+              disabled={disabled}
+              onClick={() => !disabled && setIsOpen((p) => !p)}
+              className={cn(
+                'w-full min-h-11 rounded-lg border px-3 py-2 flex items-center justify-between gap-2',
+                'hover:bg-muted/50 transition-colors text-sm',
+                isInvalid && 'border-destructive',
+                disabled && 'opacity-50 cursor-not-allowed',
+              )}
+            >
+              <div className="flex flex-wrap gap-2 flex-1">
+                {selectedOptions.length === 0 && (
+                  <span className="text-muted-foreground">{placeholder}</span>
+                )}
+                {type === 'single' && selectedOptions[0] && (
+                  <div className="flex items-center gap-2">
+                    {isFlag && selectedOptions[0].flag && <span>{selectedOptions[0].flag}</span>}
+                    {isImageShow && selectedOptions[0].image && (
+                      <Image src={selectedOptions[0].image} width={20} height={20} className="w-5 h-5 rounded-full object-cover" alt="" />
+                    )}
+                    <span>{selectedOptions[0].label}</span>
+                  </div>
+                )}
+                {type === 'multiple' && selectedOptions.slice(0, showMore ? undefined : 2).map((opt) => (
+                  <span key={opt.value} className="flex items-center gap-1 px-2 py-1 text-xs bg-primary/10 text-primary rounded">
+                    {opt.label}
+                    <X className="w-3 h-3 cursor-pointer hover:text-destructive" onClick={(e) => { e.stopPropagation(); handleSelect(opt.value); }} />
+                  </span>
+                ))}
+                {type === 'multiple' && !showMore && selectedOptions.length > 2 && (
+                  <span className="text-xs text-primary cursor-pointer" onClick={(e) => { e.stopPropagation(); setShowMore(true); }}>
+                    +{selectedOptions.length - 2} more
+                  </span>
+                )}
+                {type === 'multiple' && showMore && selectedOptions.length > 2 && (
+                  <span className="text-xs text-primary cursor-pointer" onClick={(e) => { e.stopPropagation(); setShowMore(false); }}>
+                    show less
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-1">
+                {selectedOptions.length > 0 && (
+                  <X className="w-4 h-4 cursor-pointer hover:text-destructive" onClick={handleClear} />
+                )}
+                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <ChevronDown className="w-4 h-4" />}
+              </div>
+            </button>
+
+            {isOpen && (
+              <div ref={dropdownRef} className="absolute z-50 w-full mt-1 bg-popover border rounded-lg shadow-md">
+                {showSearch && (
+                  <div className="p-2 border-b">
+                    <div className="relative">
+                      <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                      <input
+                        ref={searchInputRef}
+                        className="w-full pl-8 pr-3 py-2 border rounded-md text-sm bg-background"
+                        placeholder="Search..."
+                        value={searchValue}
+                        onChange={(e) => { setSearchValue(e.target.value); onSearch?.(e.target.value); }}
+                      />
+                    </div>
+                  </div>
+                )}
+                <div className="max-h-60 overflow-y-auto">
+                  {filteredOptions.length === 0 && (
+                    <p className="p-3 text-sm text-center text-muted-foreground">{customMessage || 'No options found'}</p>
+                  )}
+                  {filteredOptions.map((opt, idx) => {
+                    const active = selectedValues.includes(opt.value);
+                    return (
+                      <button key={opt.value + idx} disabled={opt.disabled} onClick={() => handleSelect(opt.value)}
+                        className={cn('w-full px-3 py-2 text-left text-sm flex items-center gap-2 hover:bg-muted', active && 'bg-primary/10 text-primary', opt.disabled && 'opacity-50 cursor-not-allowed')}
+                      >
+                        {type === 'multiple' && (
+                          <span className="w-4 h-4 border rounded flex items-center justify-center">
+                            {active && <Check className="w-3 h-3" />}
+                          </span>
+                        )}
+                        {isFlag && opt.flag && <span>{opt.flag}</span>}
+                        {isImageShow && opt.image && (
+                          <Image src={opt.image} width={20} height={20} className="w-5 h-5 rounded-full" alt="" />
+                        )}
+                        <span className="flex-1">{opt.label}</span>
+                        {type === 'single' && active && <Check className="w-4 h-4" />}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {isInvalid && <p className="text-xs text-destructive">{String(form.formState.errors[name]?.message)}</p>}
+      </div>
+    );
+  }
+);
+SelectField.displayName = 'SelectField';

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

@@ -0,0 +1,42 @@
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.component';
+import { Checkbox } from '@/components/ui/checkbox.component';
+
+export const SingleCheckField = ({
+  form, name, labelName, required = false, disabled = false,
+  description,
+}: {
+  form?: any; name?: string; labelName?: string; required?: boolean; disabled?: boolean; description?: string;
+}) => {
+  if (form) {
+    return (
+      <FormField
+        control={form.control}
+        name={name || 'checkbox'}
+        render={({ field }) => (
+          <FormItem>
+            <div className="flex items-center space-x-2">
+              <FormControl>
+                <Checkbox checked={field.value} onCheckedChange={field.onChange} disabled={disabled} />
+              </FormControl>
+              <FormLabel className="font-normal">
+                {labelName}
+                {required && <span className="text-destructive ml-1">*</span>}
+              </FormLabel>
+            </div>
+            {description && <p className="text-sm text-muted-foreground ml-6">{description}</p>}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox disabled={disabled} />
+      <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        {labelName}
+      </label>
+    </div>
+  );
+};