nexstruct 1.0.0

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { Button, Tooltip } from 'antd';
+import type { ButtonProps as AntButtonProps } from 'antd';
+import { forwardRef } from 'react';
+
+interface ActionButtonProps {
+  /** HTML button type: submit / button / reset */
+  htmlType?: AntButtonProps['htmlType'];
+  /** Visual variant — maps to antd Button `type` */
+  variant?: 'primary' | 'dashed' | 'link' | 'text' | 'default';
+  btnSize?: 'small' | 'middle' | 'large';
+  btnStyle?: React.CSSProperties;
+  danger?: boolean;
+  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;
+  disabled?: boolean;
+  ghost?: boolean;
+  block?: boolean;
+}
+
+const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+  ({ htmlType, btnSize = 'middle', btnStyle, variant = 'primary',
+     danger = false, tooltipContent, buttonContent, icon, lastIcon,
+     isPending = false, handleOpen, side = 'top', loadingContent,
+     disabled = false, ghost, block }, ref) => {
+    const buttonEl = (
+      <Button
+        ref={ref}
+        type={variant as any}
+        size={btnSize}
+        onClick={handleOpen}
+        danger={danger}
+        disabled={isPending || disabled}
+        loading={isPending}
+        icon={!isPending ? icon : undefined}
+        htmlType={htmlType}
+        ghost={ghost}
+        block={block}
+        style={{ textTransform: 'none', ...btnStyle }}
+      >
+        {isPending ? (loadingContent ?? buttonContent) : buttonContent}
+        {lastIcon && !isPending && <span style={{ marginLeft: 8 }}>{lastIcon}</span>}
+      </Button>
+    );
+
+    if (!tooltipContent) return buttonEl;
+    return (
+      <Tooltip title={tooltipContent} placement={side}>
+        <span>{buttonEl}</span>
+      </Tooltip>
+    );
+  }
+);
+ActionButton.displayName = 'ActionButton';
+
+export { ActionButton };

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { Modal, Typography } from 'antd';
+import type { ReactNode } from 'react';
+
+const { Text } = Typography;
+
+interface DialogWrapperProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerContent?: ReactNode;
+  title?: ReactNode;
+  description?: string;
+  children: ReactNode;
+  closer?: boolean;
+  footer?: ReactNode;
+  width?: number | string;
+  style?: React.CSSProperties;
+}
+
+export function DialogWrapper({
+  open, setOpen, triggerContent, title, description,
+  children, closer = true, footer, width = 520, style,
+}: DialogWrapperProps) {
+  return (
+    <>
+      {triggerContent}
+      <Modal
+        open={open}
+        onCancel={() => setOpen(false)}
+        title={
+          title || description ? (
+            <div>
+              <div style={{ fontWeight: 600, fontSize: 16 }}>
+                {typeof title === 'string' ? title : title}
+              </div>
+              {description && (
+                <Text type="secondary" style={{ fontSize: 13, marginTop: 2, display: 'block' }}>
+                  {description}
+                </Text>
+              )}
+            </div>
+          ) : undefined
+        }
+        closable={closer}
+        footer={footer}
+        width={width}
+        destroyOnClose
+        styles={{
+          body: {
+            maxHeight: 'calc(90vh - 200px)',
+            overflowY: 'auto',
+            paddingTop: 16,
+            paddingBottom: 16,
+          },
+          ...(style ? { ...style } : {}),
+        }}
+      >
+        {children}
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Checkbox, Typography } from 'antd';
+import type { CheckboxProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function CheckField({
+  form, name, labelName, required = false, disabled = false, options = [],
+}: CheckboxProps) {
+  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;
+
+  const checkOptions = (options || []).map((opt) =>
+    typeof opt === 'string' ? { label: opt, value: opt } : opt
+  );
+
+  if (form) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        {labelEl}
+        <Controller
+          name={name}
+          control={form.control}
+          render={({ field, fieldState }) => (
+            <div>
+              <Checkbox.Group
+                {...field}
+                disabled={disabled}
+                options={checkOptions}
+              />
+              {fieldState.error && (
+                <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
+                  {String(fieldState.error.message || '')}
+                </div>
+              )}
+            </div>
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      {labelEl}
+      <Checkbox.Group disabled={disabled} options={checkOptions} />
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { DatePicker, Typography } from 'antd';
+import dayjs from 'dayjs';
+import type { DatePickerProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function DatePickerField({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, customMessage, picker = 'date',
+}: DatePickerProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'date';
+
+  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) ? dayjs(form.watch(fieldName)).format('YYYY-MM-DD') : ''}
+          </div>
+        ) : (
+          <Controller
+            name={fieldName}
+            control={form.control}
+            render={({ field, fieldState }) => {
+              const isError = !!fieldState.error;
+              return (
+                <div>
+                  <DatePicker
+                    {...field}
+                    style={{ width: '100%' }}
+                    placeholder={placeholder || `Select ${labelName || 'date'}`}
+                    disabled={disabled}
+                    status={isError ? 'error' : undefined}
+                    picker={picker}
+                    value={field.value ? dayjs(field.value) : null}
+                    onChange={(date) => {
+                      field.onChange(date ? date.toISOString() : null);
+                    }}
+                  />
+                  {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}
+      <DatePicker
+        style={{ width: '100%' }}
+        placeholder={placeholder || `Select ${labelName || 'date'}`}
+        disabled={disabled}
+        picker={picker}
+      />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { Select, Typography, Space } from 'antd';
+import type { LimitFieldProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function LimitField({
+  limit, setLimit, totalItems, options = [5, 10, 20, 50, 100],
+}: LimitFieldProps) {
+  return (
+    <Space>
+      <Text type="secondary" style={{ fontSize: 13 }}>Show</Text>
+      <Select
+        value={limit}
+        onChange={(val) => setLimit(val)}
+        style={{ width: 80 }}
+        options={options.map((o) => ({ label: String(o), value: String(o) }))}
+        size="small"
+      />
+      <Text type="secondary" style={{ fontSize: 13 }}>
+        entries{totalItems !== undefined ? ` (${totalItems} total)` : ''}
+      </Text>
+    </Space>
+  );
+}

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Checkbox, Typography, Space } from 'antd';
+import type { CheckboxProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function MultiCheckField({
+  form, name, labelName, required = false, disabled = false, options = [],
+}: CheckboxProps) {
+  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;
+
+  const checkOptions = (options || []).map((opt) =>
+    typeof opt === 'string' ? { label: opt, value: opt } : opt
+  );
+
+  if (form) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        {labelEl}
+        <Controller
+          name={name}
+          control={form.control}
+          defaultValue={[]}
+          render={({ field, fieldState }) => (
+            <div>
+              <Checkbox.Group
+                {...field}
+                disabled={disabled}
+                options={checkOptions}
+              />
+              {fieldState.error && (
+                <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
+                  {String(fieldState.error.message || '')}
+                </div>
+              )}
+            </div>
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      {labelEl}
+      <Checkbox.Group disabled={disabled} options={checkOptions} />
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { InputNumber } from 'antd';
+import type { NumberInputProps } from '../../assets/interface/input-props.type';
+
+/**
+ * Number — Ant Design numeric input with:
+ * - Integer or float mode
+ * - Scroll prevention
+ * - Minimum value of 0
+ * - Edge case handling
+ */
+export function Number({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, numberType = 'float', customMessage,
+  min = 0, max, step, prefix, suffix,
+}: NumberInputProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'number';
+
+  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;
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const allowed = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+    if (allowed.includes(e.key) || e.ctrlKey || e.metaKey) return;
+    if (numberType === 'integer' && !/^\d$/.test(e.key)) { e.preventDefault(); return; }
+    if (numberType === 'float') {
+      if (e.key === '.' && !(e.target as HTMLInputElement).value.includes('.')) return;
+      if (!/^\d$/.test(e.key)) { e.preventDefault(); }
+    }
+  };
+
+  const commonProps = {
+    style: { width: '100%' as const },
+    placeholder: placeholder || labelName,
+    disabled,
+    min,
+    max,
+    step: step ?? (numberType === 'integer' ? 1 : 0.1),
+    precision: numberType === 'integer' ? 0 : undefined,
+    stringMode: false as const,
+    onKeyDown: handleKeyDown,
+    onWheel: (e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLInputElement).blur(),
+    prefix,
+    suffix,
+  };
+
+  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>
+                  <InputNumber
+                    {...field}
+                    {...commonProps}
+                    status={isError ? 'error' : undefined}
+                    onChange={(val) => field.onChange(val ?? '')}
+                  />
+                  {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}
+      <InputNumber {...commonProps} />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Input, Typography } from 'antd';
+import type { OTPProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function OTP({
+  form, name, labelName, required = false, disabled = false,
+  length = 6, customMessage,
+}: OTPProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'otp';
+
+  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}
+        <Controller
+          name={fieldName}
+          control={form.control}
+          render={({ field, fieldState }) => {
+            const isError = !!fieldState.error;
+            return (
+              <div>
+                <Input.OTP
+                  {...field}
+                  length={length}
+                  disabled={disabled}
+                  status={isError ? 'error' : undefined}
+                  onChange={(val) => field.onChange(val)}
+                />
+                {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}
+      <Input.OTP length={length} disabled={disabled} />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { Input } from 'antd';
+import type { PasswordInputProps } from '../../assets/interface/input-props.type';
+
+/** Standard password strength rules */
+const passwordRules = [
+  { label: 'At least 8 characters', test: (val: string) => val.length >= 8 },
+  { label: 'At least one uppercase letter', test: (val: string) => /[A-Z]/.test(val) },
+  { label: 'At least one number', test: (val: string) => /\d/.test(val) },
+  { label: 'At least one special character', test: (val: string) => /[!@#$%^&*(),.?":{}|<>_\-+=~`[\]\\;/]/.test(val) },
+  { label: 'No sequential numbers (e.g. 1234)', test: (val: string) => !/012|123|234|345|456|567|678|789/.test(val) },
+];
+
+export function Password({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  mode = 'normal', customMessage,
+}: PasswordInputProps) {
+  const [passwordValue, setPasswordValue] = useState('');
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'password';
+  const isValidate = mode === 'validate';
+
+  const labelEl = (label?: string, req?: boolean) => label ? (
+    <label className="font-semibold leading-6 text-[14px] tracking-[0.02em]" style={{ display: 'block', marginBottom: 4 }}>
+      {label}
+      {req && <span style={{ color: '#ff4d4f', marginLeft: 2 }}>*</span>}
+    </label>
+  ) : null;
+
+  const renderStrengthRules = () => {
+    if (!isValidate || !passwordValue || passwordRules.every(r => r.test(passwordValue))) return null;
+    return (
+      <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: '0.8rem' }}>
+        {passwordRules.map((rule, i) => {
+          const passed = rule.test(passwordValue);
+          return (
+            <li key={i} style={{
+              color: passed ? '#16a34a' : '#94a3b8',
+              display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0',
+            }}>
+              <span style={{
+                width: 8, height: 8, borderRadius: '50%', display: 'inline-block',
+                background: passed ? '#16a34a' : '#d9d9d9',
+              }} />
+              {rule.label}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  if (form) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        {labelEl(labelName, required)}
+        <Controller
+          name={fieldName}
+          control={form.control}
+          render={({ field, fieldState }) => {
+            const isError = !!fieldState.error;
+            return (
+              <div>
+                <Input.Password
+                  {...field}
+                  placeholder={placeholder || `Enter ${labelName || 'password'}`}
+                  disabled={disabled}
+                  status={isError ? 'error' : undefined}
+                  onChange={(e) => {
+                    field.onChange(e);
+                    setPasswordValue(e.target.value);
+                  }}
+                />
+                {renderStrengthRules()}
+                {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(labelName, required)}
+      <Input.Password
+        placeholder={placeholder || `Enter ${labelName || 'password'}`}
+        disabled={disabled}
+        onChange={(e) => setPasswordValue(e.target.value)}
+      />
+      {renderStrengthRules()}
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}