nexstruct 1.0.0

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

@@ -0,0 +1,88 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Input } from 'antd';
+import type { TextInputProps } from '../../assets/interface/input-props.type';
+
+export function Text({
+  form, name, placeholder, labelName, required = false, disabled = false,
+  viewOnly = false, customMessage, isArray = false, leftIcon, rightIcon,
+  value, setValue,
+}: TextInputProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'text';
+
+  const labelEl = labelName ? (
+    <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]" style={{ display: 'block', marginBottom: 4 }}>
+      {labelName}
+      {required && <span style={{ color: '#ff4d4f', marginLeft: 2 }}>*</span>}
+    </label>
+  ) : null;
+
+  if (form) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        {labelEl}
+        {viewOnly ? (
+          <div style={{ padding: '4px 11px', border: '1px solid #d9d9d9', borderRadius: 6, minHeight: 32, background: '#fafafa' }}>
+            {form.watch(fieldName) || ''}
+          </div>
+        ) : (
+          <Controller
+            name={fieldName}
+            control={form.control}
+            render={({ field, fieldState }) => {
+              const isError = !!fieldState.error;
+              return (
+                <div>
+                  <Input
+                    {...field}
+                    placeholder={placeholder || labelName}
+                    disabled={disabled}
+                    status={isError ? 'error' : undefined}
+                    prefix={leftIcon}
+                    suffix={rightIcon}
+                    onChange={(e) => {
+                      if (isArray) {
+                        const arr = e.target.value.split(/[\s,]+/).map((v: string) => v.trim()).filter(Boolean);
+                        form.setValue(fieldName, arr, { shouldValidate: true, shouldDirty: true });
+                      }
+                      field.onChange(e);
+                    }}
+                  />
+                  {isError && (
+                    <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
+                      {String(fieldState.error?.message || '')}
+                    </div>
+                  )}
+                  {!isError && customMessage && (
+                    <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>
+                  )}
+                </div>
+              );
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      {labelEl}
+      {viewOnly ? (
+        <div style={{ padding: '4px 11px', border: '1px solid #d9d9d9', borderRadius: 6, minHeight: 32, background: '#fafafa' }}>
+          {value || ''}
+        </div>
+      ) : (
+        <Input
+          placeholder={placeholder || labelName}
+          value={value}
+          onChange={(e) => setValue?.(e.target.value)}
+          prefix={leftIcon}
+          suffix={rightIcon}
+        />
+      )}
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,233 @@
+import type { ReactNode } from 'react';
+
+export interface TextInputProps {
+  form?: any;
+  name?: string;
+  placeholder?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: ReactNode;
+  isArray?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: 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?: ReactNode;
+  value?: string;
+  setValue?: (value: string) => void;
+  maxLength?: number;
+  showCount?: boolean;
+}
+
+export interface NumberInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  numberType?: 'float' | 'integer';
+  customMessage?: ReactNode;
+  min?: number;
+  max?: number;
+  step?: number;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+export interface PasswordInputProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  disableLabelFormatting?: boolean;
+  mode?: 'normal' | 'validate';
+  customMessage?: 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?: 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;
+  picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
+}
+
+export interface PhoneNumberProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  viewOnly?: boolean;
+  disableLabelFormatting?: boolean;
+  customMessage?: string;
+  onValueChange?: (value: string) => void;
+  hasPhone?: boolean;
+}
+
+export interface SearchFieldProps {
+  form?: any;
+  name?: string;
+  placeholder?: string;
+  onSearch?: (value: string) => void;
+  value?: string;
+  setValue?: (value: string) => void;
+  loading?: boolean;
+}
+
+export interface OTPProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  length?: number;
+  customMessage?: string;
+}
+
+export interface RangeDatePickerProps {
+  form?: any;
+  name?: string;
+  labelName?: string;
+  required?: boolean;
+  disabled?: boolean;
+  customMessage?: string;
+}
+
+export interface LimitFieldProps {
+  limit: string;
+  setLimit: (limit: string) => void;
+  totalItems?: number;
+  options?: number[];
+}
+
+export interface InputInterface {
+  Text: TextInputProps;
+  TextArea: TextAreaInputProps;
+  Number: NumberInputProps;
+  Password: PasswordInputProps;
+  SingleSelect: SingleSelectProps;
+  PhoneNumber: PhoneNumberProps;
+  Switch: SwitchProps;
+  DatePicker: DatePickerProps;
+  Search: SearchFieldProps;
+  OTP: OTPProps;
+  RangeDatePicker: RangeDatePickerProps;
+}
+
+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?: ReactNode;
+  onValueChange?: (value: any) => void;
+  isLoading?: boolean;
+}

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

@@ -0,0 +1,40 @@
+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';
+
+export const CustomField = {
+  Text,
+  TextArea,
+  Number,
+  StringNumber,
+  Password,
+  SingleSelectField,
+  SelectField,
+  SwitchField,
+  RadioField,
+  CheckField,
+  MultiCheckField,
+  SingleCheckField,
+  SearchField,
+  CommonSearch: SearchField,
+  DatePickerField,
+  RangeDatePicker,
+  PhoneNumber,
+  OTP,
+  LimitField,
+};

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

@@ -0,0 +1,27 @@
+'use client';
+
+import { Pagination as AntPagination } from 'antd';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+  total?: number;
+}
+
+export function Pagination({ currentPage, totalPages, setCurrentPage, total }: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16 }}>
+      <AntPagination
+        current={currentPage}
+        total={total ?? (totalPages * 10)}
+        pageSize={1}
+        onChange={(page) => setCurrentPage(page)}
+        showSizeChanger={false}
+        showQuickJumper={false}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+'use client';
+import { Avatar as AntAvatar, type AvatarProps as AntAvatarProps } from 'antd';
+
+export type AvatarProps = AntAvatarProps;
+
+export function Avatar(props: AvatarProps) {
+  return <AntAvatar {...props} />;
+}

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

@@ -0,0 +1,8 @@
+'use client';
+import { Badge as AntBadge, type BadgeProps as AntBadgeProps } from 'antd';
+
+export type BadgeProps = AntBadgeProps;
+
+export function Badge(props: BadgeProps) {
+  return <AntBadge {...props} />;
+}

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

@@ -0,0 +1,8 @@
+'use client';
+import { Button as AntButton, type ButtonProps as AntButtonProps } from 'antd';
+
+export type ButtonProps = AntButtonProps;
+
+export function Button(props: ButtonProps) {
+  return <AntButton {...props} />;
+}

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

@@ -0,0 +1,8 @@
+'use client';
+import { Card as AntCard, type CardProps as AntCardProps } from 'antd';
+
+export type CardProps = AntCardProps;
+
+export function Card(props: CardProps) {
+  return <AntCard {...props} />;
+}

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

@@ -0,0 +1,8 @@
+'use client';
+import { Checkbox as AntCheckbox, type CheckboxProps as AntCheckboxProps } from 'antd';
+
+export type CheckboxProps = AntCheckboxProps;
+
+export function Checkbox(props: CheckboxProps) {
+  return <AntCheckbox {...props} />;
+}

package/templates/ui/antd/src/components/ui/dialog.component.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { Modal } from 'antd';
+import type { ModalProps } from 'antd';
+
+export type DialogProps = ModalProps;
+
+export function Dialog({ children, ...props }: DialogProps) {
+  return <Modal {...props}>{children}</Modal>;
+}

package/templates/ui/antd/src/components/ui/dropdown-menu.component.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Dropdown as AntDropdown, type DropdownProps as AntDropdownProps } from 'antd';
+
+export type DropdownMenuProps = AntDropdownProps;
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  return <AntDropdown {...props} />;
+}
+
+export { AntDropdown as Dropdown };

package/templates/ui/antd/src/components/ui/form.component.tsx

@@ -0,0 +1,12 @@
+'use client';
+import { Form as AntForm, type FormProps as AntFormProps } from 'antd';
+
+export type FormProps = AntFormProps;
+export const FormItem = AntForm.Item;
+export const useForm = AntForm.useForm;
+export const FormList = AntForm.List;
+export const FormProvider = AntForm.Provider;
+
+export function Form(props: FormProps) {
+  return <AntForm {...props} />;
+}

package/templates/ui/antd/src/components/ui/input.component.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { Input as AntInput, type InputProps as AntInputProps } from 'antd';
+
+export type InputProps = AntInputProps;
+
+export function Input(props: InputProps) {
+  return <AntInput {...props} />;
+}
+
+export const TextArea = AntInput.TextArea;
+export const InputOTP = AntInput.OTP;
+export const InputPassword = AntInput.Password;
+export const InputSearch = AntInput.Search;

package/templates/ui/antd/src/components/ui/label.component.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { Typography } from 'antd';
+import type { TextProps } from 'antd/es/typography/Text';
+
+const { Text } = Typography;
+
+export type LabelProps = TextProps & { required?: boolean };
+
+export function Label({ children, required, ...props }: LabelProps) {
+  return (
+    <label>
+      <Text strong {...props}>
+        {children}
+        {required && <span style={{ color: '#ff4d4f', marginLeft: 2 }}>*</span>}
+      </Text>
+    </label>
+  );
+}

package/templates/ui/antd/src/components/ui/popover.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Popover as AntPopover, type PopoverProps as AntPopoverProps } from 'antd';
+
+export type PopoverProps = AntPopoverProps;
+
+export function Popover(props: PopoverProps) {
+  return <AntPopover {...props} />;
+}

package/templates/ui/antd/src/components/ui/progress.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Progress as AntProgress, type ProgressProps as AntProgressProps } from 'antd';
+
+export type ProgressProps = AntProgressProps;
+
+export function Progress(props: ProgressProps) {
+  return <AntProgress {...props} />;
+}

package/templates/ui/antd/src/components/ui/radio-group.component.tsx

@@ -0,0 +1,10 @@
+'use client';
+import { Radio as AntRadio, type RadioGroupProps as AntRadioGroupProps } from 'antd';
+
+export type RadioGroupProps = AntRadioGroupProps;
+
+export function RadioGroup(props: RadioGroupProps) {
+  return <AntRadio.Group {...props} />;
+}
+
+export { AntRadio as Radio };

package/templates/ui/antd/src/components/ui/scroll-area.component.tsx

@@ -0,0 +1,25 @@
+'use client';
+import type { ReactNode, CSSProperties } from 'react';
+
+interface ScrollAreaProps {
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+  maxHeight?: number | string;
+}
+
+export function ScrollArea({ children, style, className, maxHeight }: ScrollAreaProps) {
+  return (
+    <div
+      className={className}
+      style={{
+        overflowY: 'auto',
+        maxHeight: maxHeight || '100%',
+        scrollbarWidth: 'thin',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/ui/antd/src/components/ui/select.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Select as AntSelect, type SelectProps as AntSelectProps } from 'antd';
+
+export type SelectProps = AntSelectProps;
+
+export function Select(props: SelectProps) {
+  return <AntSelect {...props} />;
+}

package/templates/ui/antd/src/components/ui/separator.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Divider as AntDivider, type DividerProps as AntDividerProps } from 'antd';
+
+export type SeparatorProps = AntDividerProps;
+
+export function Separator(props: SeparatorProps) {
+  return <AntDivider {...props} />;
+}

package/templates/ui/antd/src/components/ui/sheet.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Drawer as AntDrawer, type DrawerProps as AntDrawerProps } from 'antd';
+
+export type SheetProps = AntDrawerProps;
+
+export function Sheet(props: SheetProps) {
+  return <AntDrawer {...props} />;
+}

package/templates/ui/antd/src/components/ui/switch.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Switch as AntSwitch, type SwitchProps as AntSwitchProps } from 'antd';
+
+export type SwitchProps = AntSwitchProps;
+
+export function Switch(props: SwitchProps) {
+  return <AntSwitch {...props} />;
+}

package/templates/ui/antd/src/components/ui/table.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Table as AntTable, type TableProps as AntTableProps } from 'antd';
+
+export type TableProps = AntTableProps;
+
+export function Table(props: TableProps) {
+  return <AntTable {...props} />;
+}

package/templates/ui/antd/src/components/ui/tabs.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Tabs as AntTabs, type TabsProps as AntTabsProps } from 'antd';
+
+export type TabsProps = AntTabsProps;
+
+export function Tabs(props: TabsProps) {
+  return <AntTabs {...props} />;
+}

package/templates/ui/antd/src/components/ui/textarea.component.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { Input } from 'antd';
+import type { TextAreaProps as AntTextAreaProps } from 'antd/es/input';
+
+export type TextareaProps = AntTextAreaProps;
+
+export function Textarea(props: TextareaProps) {
+  return <Input.TextArea {...props} />;
+}

package/templates/ui/antd/src/components/ui/tooltip.component.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { Tooltip as AntTooltip, type TooltipProps as AntTooltipProps } from 'antd';
+
+export type TooltipProps = AntTooltipProps;
+
+export function Tooltip(props: TooltipProps) {
+  return <AntTooltip {...props} />;
+}