nexstruct 1.0.0

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

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Input } from 'antd';
+import { maskString } from '@/lib/utils.util';
+import type { PhoneNumberProps } from '../../assets/interface/input-props.type';
+
+export function PhoneNumber({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, customMessage, onValueChange, hasPhone = false,
+}: PhoneNumberProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'phone';
+
+  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' }}>
+            {hasPhone ? maskString(form.watch(fieldName) || '') : form.watch(fieldName) || ''}
+          </div>
+        ) : (
+          <Controller
+            name={fieldName}
+            control={form.control}
+            render={({ field, fieldState }) => {
+              const isError = !!fieldState.error;
+              return (
+                <div>
+                  <Input
+                    {...field}
+                    type="tel"
+                    placeholder={placeholder || `Enter ${labelName || 'phone number'}`}
+                    disabled={disabled}
+                    status={isError ? 'error' : undefined}
+                    maxLength={20}
+                    onChange={(e) => {
+                      field.onChange(e);
+                      onValueChange?.(e.target.value);
+                    }}
+                  />
+                  {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
+        type="tel"
+        placeholder={placeholder || `Enter ${labelName || 'phone number'}`}
+        disabled={disabled}
+      />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Radio, Typography } from 'antd';
+import type { RadioProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function RadioField({
+  form, name, labelName, required = false, disabled = false, options = [],
+}: RadioProps) {
+  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 radioOptions = (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>
+              <Radio.Group
+                {...field}
+                disabled={disabled}
+                options={radioOptions}
+              />
+              {fieldState.error && (
+                <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
+                  {String(fieldState.error.message || '')}
+                </div>
+              )}
+            </div>
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      {labelEl}
+      <Radio.Group disabled={disabled} options={radioOptions} />
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { DatePicker, Typography } from 'antd';
+import dayjs from 'dayjs';
+import type { RangeDatePickerProps } from '../../assets/interface/input-props.type';
+
+const { RangePicker } = DatePicker;
+const { Text } = Typography;
+
+export function RangeDatePicker({
+  form, name, labelName, required = false, disabled = false, customMessage,
+}: RangeDatePickerProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'dateRange';
+
+  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>
+                <RangePicker
+                  style={{ width: '100%' }}
+                  disabled={disabled}
+                  status={isError ? 'error' : undefined}
+                  value={field.value ? field.value.map((d: string | null) => d ? dayjs(d) : null) : null}
+                  onChange={(dates) => {
+                    field.onChange(dates ? dates.map((d) => d?.toISOString() || null) : [null, 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}
+      <RangePicker style={{ width: '100%' }} disabled={disabled} />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { Input } from 'antd';
+import type { SearchFieldProps } from '../../assets/interface/input-props.type';
+
+const { Search: AntSearch } = Input;
+
+export function SearchField({
+  placeholder, onSearch, value, setValue, loading,
+}: SearchFieldProps) {
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <AntSearch
+        placeholder={placeholder || 'Search...'}
+        value={value}
+        onChange={(e) => setValue?.(e.target.value)}
+        onSearch={(val) => onSearch?.(val)}
+        loading={loading}
+        allowClear
+        enterButton
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Select } from 'antd';
+import type { SelectFieldProps } from '../../assets/interface/input-props.type';
+
+export function SelectField({
+  form, name, labelName, required = false, disabled = false,
+  options = [], placeholder, showSearch = true, type = 'single',
+  viewOnly = false, onValueChange, isLoading = false, onSearch, customMessage,
+}: SelectFieldProps) {
+  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 normalizedOptions = (options || []).map((opt) =>
+    typeof opt === 'string' ? { label: opt, value: opt } : opt
+  );
+
+  if (viewOnly) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        {labelEl}
+        <div style={{ padding: '4px 11px', border: '1px solid #d9d9d9', borderRadius: 6, minHeight: 32, background: '#fafafa' }}>
+          {form?.watch(name) ? (
+            type === 'multiple'
+              ? (form.watch(name) || []).join(', ')
+              : normalizedOptions.find((o) => o.value === form.watch(name))?.label || form.watch(name)
+          ) : ''}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      {labelEl}
+      <Controller
+        name={name}
+        control={form?.control}
+        defaultValue={type === 'multiple' ? [] : undefined}
+        render={({ field, fieldState }) => {
+          const isError = !!fieldState?.error;
+          return (
+            <div>
+              <Select
+                {...field}
+                style={{ width: '100%' }}
+                placeholder={placeholder || `Select ${labelName || 'option'}`}
+                disabled={disabled || isLoading}
+                status={isError ? 'error' : undefined}
+                loading={isLoading}
+                mode={type === 'multiple' ? 'multiple' : undefined}
+                showSearch={showSearch}
+                filterOption={showSearch ? (input: string, option?: any) =>
+                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                  : undefined}
+                options={normalizedOptions}
+                onSearch={onSearch}
+                onChange={(val) => {
+                  field.onChange(val);
+                  onValueChange?.(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>
+  );
+}

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

@@ -0,0 +1,50 @@
+'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 SingleCheckField({
+  form, name, labelName, required = false, disabled = false,
+}: CheckboxProps) {
+  if (form) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        <Controller
+          name={name}
+          control={form.control}
+          defaultValue={false}
+          render={({ field, fieldState }) => (
+            <div>
+              <Checkbox
+                {...field}
+                checked={!!field.value}
+                disabled={disabled}
+                onChange={(e) => field.onChange(e.target.checked)}
+              >
+                {labelName}
+                {required && <span style={{ color: '#ff4d4f', marginLeft: 2 }}>*</span>}
+              </Checkbox>
+              {fieldState.error && (
+                <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
+                  {String(fieldState.error.message || '')}
+                </div>
+              )}
+            </div>
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <Checkbox disabled={disabled}>
+        {labelName}
+        {required && <span style={{ color: '#ff4d4f', marginLeft: 2 }}>*</span>}
+      </Checkbox>
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Select } from 'antd';
+import type { SingleSelectProps } from '../../assets/interface/input-props.type';
+
+export function SingleSelectField({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  options = [], viewOnly = false, isLoading = false, defaultValue,
+  onValueChange, customMessage,
+}: SingleSelectProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'singleselect';
+
+  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 normalizedOptions = options.map((opt) =>
+    typeof opt === 'string' ? { label: opt, value: opt } : opt
+  );
+
+  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}
+            defaultValue={defaultValue || ''}
+            render={({ field, fieldState }) => {
+              const isError = !!fieldState.error;
+              return (
+                <div>
+                  <Select
+                    {...field}
+                    style={{ width: '100%' }}
+                    placeholder={placeholder || `Select ${labelName || 'option'}`}
+                    disabled={disabled || isLoading}
+                    status={isError ? 'error' : undefined}
+                    loading={isLoading}
+                    options={normalizedOptions}
+                    onChange={(val) => {
+                      field.onChange(val);
+                      onValueChange?.(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}
+      <Select
+        style={{ width: '100%' }}
+        placeholder={placeholder || `Select ${labelName || 'option'}`}
+        disabled={disabled || isLoading}
+        loading={isLoading}
+        options={normalizedOptions}
+        defaultValue={defaultValue}
+      />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Input } from 'antd';
+import type { NumberInputProps } from '../../assets/interface/input-props.type';
+
+export function StringNumber({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, customMessage, prefix, suffix,
+}: NumberInputProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'stringnumber';
+
+  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 filterNumber = (val: string) => val.replace(/[^0-9.]/g, '');
+
+  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={prefix}
+                    suffix={suffix}
+                    onChange={(e) => {
+                      const filtered = filterNumber(e.target.value);
+                      field.onChange({ target: { value: filtered } });
+                    }}
+                  />
+                  {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
+        placeholder={placeholder || labelName}
+        value={value}
+        onChange={(e) => setValue?.(filterNumber(e.target.value))}
+        prefix={prefix}
+        suffix={suffix}
+      />
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Switch, Typography } from 'antd';
+import type { SwitchProps } from '../../assets/interface/input-props.type';
+
+const { Text } = Typography;
+
+export function SwitchField({
+  form, name, labelName, required = false, disabled = false,
+  viewOnly = false, customMessage, description, border = false,
+  value, setValue, onCheckedChange,
+}: SwitchProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'switch';
+
+  const labelEl = labelName ? (
+    <div style={{ marginBottom: 4 }}>
+      <Text strong style={{ fontSize: 14 }}>
+        {labelName}
+        {required && <span style={{ color: '#ff4d4f', marginLeft: 2 }}>*</span>}
+      </Text>
+      {description && <Text type="secondary" style={{ display: 'block', fontSize: 12 }}>{description}</Text>}
+    </div>
+  ) : null;
+
+  const renderSwitch = (checked: boolean, onChange: (v: boolean) => void) => (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: 8,
+      padding: border ? 12 : 0,
+      border: border ? '1px solid #d9d9d9' : 'none',
+      borderRadius: border ? 6 : 0,
+    }}>
+      <Switch
+        checked={checked}
+        onChange={(v) => { onChange(v); onCheckedChange?.(v); }}
+        disabled={disabled || viewOnly}
+      />
+      {labelEl}
+    </div>
+  );
+
+  if (form) {
+    return (
+      <div style={{ marginBottom: 16 }}>
+        <Controller
+          name={fieldName}
+          control={form.control}
+          defaultValue={false}
+          render={({ field }) => renderSwitch(!!field.value, (v) => { field.onChange(v); setValue?.(v); })}
+        />
+        {customMessage && <Text type="secondary" style={{ fontSize: 12 }}>{customMessage}</Text>}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ marginBottom: 16 }}>
+      {renderSwitch(!!value, (v) => setValue?.(v))}
+      {customMessage && <Text type="secondary" style={{ fontSize: 12 }}>{customMessage}</Text>}
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+'use client';
+
+import { Controller } from 'react-hook-form';
+import { Input } from 'antd';
+import type { TextAreaInputProps } from '../../assets/interface/input-props.type';
+
+const { TextArea: AntTextArea } = Input;
+
+export function TextArea({
+  form, name, labelName, placeholder, required = false, disabled = false,
+  viewOnly = false, rows = 3, customMessage, value, setValue,
+  maxLength, showCount,
+}: TextAreaInputProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || 'textarea';
+
+  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', whiteSpace: 'pre-wrap' }}>
+            {form.watch(fieldName) || ''}
+          </div>
+        ) : (
+          <Controller
+            name={fieldName}
+            control={form.control}
+            render={({ field, fieldState }) => {
+              const isError = !!fieldState.error;
+              return (
+                <div>
+                  <AntTextArea
+                    {...field}
+                    rows={rows}
+                    placeholder={placeholder || labelName}
+                    disabled={disabled}
+                    status={isError ? 'error' : undefined}
+                    maxLength={maxLength}
+                    showCount={showCount}
+                  />
+                  {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', whiteSpace: 'pre-wrap' }}>
+          {value || ''}
+        </div>
+      ) : (
+        <AntTextArea
+          rows={rows}
+          placeholder={placeholder || labelName}
+          value={value}
+          onChange={(e) => setValue?.(e.target.value)}
+          maxLength={maxLength}
+          showCount={showCount}
+        />
+      )}
+      {customMessage && <div style={{ color: '#999', fontSize: 12, marginTop: 4 }}>{customMessage}</div>}
+    </div>
+  );
+}