nexstruct 1.0.0

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

@@ -0,0 +1,59 @@
+'use client';
+
+import { useFormContext } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import type { NumberInputProps } from '../../assets/interface/input-props.type';
+
+/**
+ * Number — MUI numeric input with scroll prevention and key filtering.
+ */
+export function Number({ form, name, labelName, placeholder, required, disabled, viewOnly, numberType = 'float', customMessage }: NumberInputProps) {
+  const formContext = form ? useFormContext() : null;
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  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 = {
+    fullWidth: true as const,
+    variant: 'outlined' as const,
+    label: labelName,
+    placeholder,
+    required,
+    disabled: disabled || viewOnly,
+    type: 'number' as const,
+    helperText: customMessage,
+    InputProps: {
+      readOnly: viewOnly,
+      onWheel: (e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLInputElement).blur(),
+      inputProps: { min: 0, step: numberType === 'float' ? 'any' : '0', onKeyDown: handleKeyDown },
+    },
+  };
+
+  if (form && formContext) {
+    return (
+      <TextField
+        {...commonProps}
+        error={!!formContext.getFieldState(fieldName, formContext.formState).error}
+        helperText={formContext.getFieldState(fieldName, formContext.formState).error?.message || customMessage}
+        {...formContext.register(fieldName, {
+          setValueAs: (v: string) => {
+            if (v === '') return '';
+            const parsed = numberType === 'float' ? parseFloat(v) : parseInt(v, 10);
+            return isNaN(parsed) || parsed < 0 ? '' : parsed;
+          },
+        })}
+      />
+    );
+  }
+
+  return <TextField {...commonProps} />;
+}

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

@@ -0,0 +1,87 @@
+'use client';
+
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+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, disabled, mode = 'normal', customMessage }: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  const [passwordValue, setPasswordValue] = useState('');
+  const formContext = form ? useFormContext() : null;
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+  const isValidate = mode === 'validate';
+
+  const endAdornment = (
+    <InputAdornment position="end">
+      <IconButton onClick={() => setShowPassword(!showPassword)} edge="end" size="small">
+        {showPassword ? <VisibilityOff /> : <Visibility />}
+      </IconButton>
+    </InputAdornment>
+  );
+
+  const strengthRules = isValidate && passwordValue && !passwordRules.every(r => r.test(passwordValue)) ? (
+    <ul style={{ margin: '4px 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: '1px 0' }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', display: 'inline-block', background: passed ? '#16a34a' : '#cbd5e1' }} />
+            {rule.label}
+          </li>
+        );
+      })}
+    </ul>
+  ) : null;
+
+  const commonProps = {
+    fullWidth: true as const,
+    variant: 'outlined' as const,
+    label: labelName,
+    placeholder,
+    required,
+    disabled,
+    type: showPassword ? 'text' as const : 'password' as const,
+    InputProps: { endAdornment },
+  };
+
+  if (form && formContext) {
+    return (
+      <div>
+        <TextField
+          {...commonProps}
+          error={!!formContext.getFieldState(fieldName, formContext.formState).error}
+          helperText={formContext.getFieldState(fieldName, formContext.formState).error?.message || customMessage}
+          {...formContext.register(fieldName, {
+            onChange: (e) => setPasswordValue(e.target.value),
+          })}
+        />
+        {strengthRules}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <TextField
+        {...commonProps}
+        helperText={customMessage}
+        onChange={(e) => setPasswordValue(e.target.value)}
+      />
+      {strengthRules}
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { useFormContext } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import type { PhoneNumberProps } from '../../assets/interface/input-props.type';
+
+/**
+ * PhoneNumber — MUI phone input with country code prefix.
+ */
+export function PhoneNumber({
+  form, name, labelName, placeholder = '+1 (555) 000-0000', required, disabled,
+  viewOnly, customMessage, onValueChange,
+}: PhoneNumberProps) {
+  const formContext = form ? useFormContext() : null;
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  const commonProps = {
+    fullWidth: true as const,
+    variant: 'outlined' as const,
+    label: labelName,
+    placeholder,
+    required,
+    disabled: disabled || viewOnly,
+    helperText: customMessage,
+    InputProps: {
+      startAdornment: <InputAdornment position="start">+</InputAdornment>,
+      readOnly: viewOnly,
+    },
+  };
+
+  if (form && formContext) {
+    return (
+      <TextField
+        {...commonProps}
+        error={!!formContext.getFieldState(fieldName, formContext.formState).error}
+        helperText={formContext.getFieldState(fieldName, formContext.formState).error?.message || customMessage}
+        {...formContext.register(fieldName, {
+          onChange: (e) => { onValueChange?.(e.target.value); },
+        })}
+        type="tel"
+      />
+    );
+  }
+
+  return <TextField {...commonProps} type="tel" />;
+}

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Radio from '@mui/material/Radio';
+import type { RadioProps } from '../../assets/interface/input-props.type';
+
+export function RadioField({ form, name, labelName, required, disabled, options = [] }: RadioProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        defaultValue=""
+        render={({ field, fieldState }) => (
+          <FormControl error={!!fieldState.error} required={required} disabled={disabled} component="fieldset">
+            {labelName && <FormLabel component="legend">{labelName}</FormLabel>}
+            <RadioGroup {...field}>
+              {options.map((opt) => (
+                <FormControlLabel key={opt.value} value={opt.value} control={<Radio />} label={opt.label} />
+              ))}
+            </RadioGroup>
+            {fieldState.error && <FormHelperText>{fieldState.error.message}</FormHelperText>}
+          </FormControl>
+        )}
+      />
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,41 @@
+'use client';
+
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+import type { SearchFieldProps } from '../../assets/interface/input-props.type';
+
+export function SearchField({ placeholder = 'Search...', onSearch, value, setValue }: SearchFieldProps) {
+  const handleClear = () => {
+    setValue?.('');
+    onSearch?.('');
+  };
+
+  return (
+    <TextField
+      fullWidth
+      variant="outlined"
+      placeholder={placeholder}
+      size="small"
+      value={value || ''}
+      onChange={(e) => setValue?.(e.target.value)}
+      onKeyDown={(e) => { if (e.key === 'Enter') onSearch?.(e.currentTarget.value); }}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon color="action" />
+          </InputAdornment>
+        ),
+        endAdornment: value ? (
+          <InputAdornment position="end">
+            <IconButton size="small" onClick={handleClear}>
+              <ClearIcon fontSize="small" />
+            </IconButton>
+          </InputAdornment>
+        ) : undefined,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import Chip from '@mui/material/Chip';
+import Box from '@mui/material/Box';
+import type { SelectFieldProps } from '../../assets/interface/input-props.type';
+
+export function SelectField({ form, name, labelName, required, disabled, options = [], placeholder, showSearch, type = 'single', viewOnly, onValueChange, isLoading, customMessage }: SelectFieldProps) {
+  const normalisedOptions = options.map((opt) =>
+    typeof opt === 'string' ? { value: opt, label: opt } : opt
+  );
+
+  if (form) {
+    return (
+      <Controller
+        name={name}
+        control={form.control}
+        defaultValue={type === 'multiple' ? [] : ''}
+        render={({ field, fieldState }) => (
+          <FormControl fullWidth error={!!fieldState.error} required={required} disabled={disabled || viewOnly || isLoading}>
+            <InputLabel>{labelName}</InputLabel>
+            <Select
+              {...field}
+              label={labelName}
+              multiple={type === 'multiple'}
+              onChange={(e) => {
+                field.onChange(e);
+                onValueChange?.(e.target.value);
+              }}
+              renderValue={(selected: any) =>
+                type === 'multiple' ? (
+                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                    {(selected as string[]).map((v) => <Chip key={v} label={v} size="small" />)}
+                  </Box>
+                ) : (
+                  normalisedOptions.find((o) => o.value === selected)?.label || selected
+                )
+              }
+            >
+              {placeholder && type !== 'multiple' && (
+                <MenuItem value="" disabled><em>{placeholder}</em></MenuItem>
+              )}
+              {normalisedOptions.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  {opt.image && <Box component="img" src={opt.image} sx={{ width: 20, height: 20, mr: 1, borderRadius: '50%' }} />}
+                  {opt.flag && <span style={{ marginRight: 8 }}>{opt.flag}</span>}
+                  {opt.label}
+                </MenuItem>
+              ))}
+            </Select>
+            {(fieldState.error?.message || customMessage) && (
+              <FormHelperText>{fieldState.error?.message || customMessage}</FormHelperText>
+            )}
+          </FormControl>
+        )}
+      />
+    );
+  }
+
+  return (
+    <FormControl fullWidth disabled={disabled || viewOnly || isLoading} required={required}>
+      <InputLabel>{labelName}</InputLabel>
+      <Select label={labelName}>
+        {normalisedOptions.map((opt) => (
+          <MenuItem key={opt.value} value={opt.value} disabled={opt.disabled}>
+            {opt.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

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

@@ -0,0 +1,39 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import FormHelperText from '@mui/material/FormHelperText';
+import type { CheckboxProps } from '../../assets/interface/input-props.type';
+
+export function SingleCheckField({ form, name, labelName, required, disabled }: CheckboxProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        defaultValue={false}
+        render={({ field, fieldState }) => (
+          <>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={!!field.value}
+                  onChange={(e) => field.onChange(e.target.checked)}
+                  disabled={disabled}
+                  required={required}
+                />
+              }
+              label={labelName}
+            />
+            {fieldState.error && <FormHelperText error>{fieldState.error.message}</FormHelperText>}
+          </>
+        )}
+      />
+    );
+  }
+
+  return <FormControlLabel control={<Checkbox disabled={disabled} required={required} />} label={labelName} />;
+}

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import type { SingleSelectProps } from '../../assets/interface/input-props.type';
+
+export function SingleSelectField({ form, name, labelName, placeholder, required, disabled, options = [], viewOnly, onValueChange, isLoading, defaultValue, customMessage }: SingleSelectProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        defaultValue={defaultValue || ''}
+        render={({ field, fieldState }) => (
+          <FormControl fullWidth error={!!fieldState.error} required={required} disabled={disabled || viewOnly || isLoading}>
+            <InputLabel>{labelName}</InputLabel>
+            <Select
+              {...field}
+              label={labelName}
+              onChange={(e) => {
+                field.onChange(e);
+                onValueChange?.(e.target.value);
+              }}
+            >
+              {placeholder && <MenuItem value="" disabled><em>{placeholder}</em></MenuItem>}
+              {options.map((opt) => (
+                <MenuItem key={opt} value={opt}>{opt}</MenuItem>
+              ))}
+            </Select>
+            {(fieldState.error?.message || customMessage) && (
+              <FormHelperText>{fieldState.error?.message || customMessage}</FormHelperText>
+            )}
+          </FormControl>
+        )}
+      />
+    );
+  }
+
+  return (
+    <FormControl fullWidth disabled={disabled || viewOnly || isLoading} required={required}>
+      <InputLabel>{labelName}</InputLabel>
+      <Select label={labelName} defaultValue={defaultValue || ''}>
+        {placeholder && <MenuItem value="" disabled><em>{placeholder}</em></MenuItem>}
+        {options.map((opt) => (
+          <MenuItem key={opt} value={opt}>{opt}</MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { useFormContext } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import type { TextInputProps } from '../../assets/interface/input-props.type';
+
+export function StringNumber({ form, name, labelName, placeholder, required, disabled, viewOnly, value, setValue, customMessage }: TextInputProps) {
+  const formContext = form ? useFormContext() : null;
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.replace(/\D/g, '');
+    if (form && formContext) {
+      formContext.setValue(fieldName, val);
+    } else {
+      setValue?.(val);
+    }
+  };
+
+  if (form && formContext) {
+    return (
+      <TextField
+        fullWidth
+        variant="outlined"
+        label={labelName}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled || viewOnly}
+        error={!!formContext.getFieldState(fieldName, formContext.formState).error}
+        helperText={formContext.getFieldState(fieldName, formContext.formState).error?.message || customMessage}
+        InputProps={{ readOnly: viewOnly }}
+        value={formContext.watch(fieldName) || ''}
+        onChange={handleChange}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant="outlined"
+      label={labelName}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled || viewOnly}
+      value={value || ''}
+      onChange={handleChange}
+      helperText={customMessage}
+      InputProps={{ readOnly: viewOnly }}
+    />
+  );
+}

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

@@ -0,0 +1,35 @@
+'use client';
+
+import { useFormContext, Controller } from 'react-hook-form';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import type { SwitchProps } from '../../assets/interface/input-props.type';
+
+export function SwitchField({ form, name, labelName, required, disabled, viewOnly, description, border, value, setValue, onCheckedChange }: SwitchProps) {
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  const switchEl = (checked: boolean, onChange: (v: boolean) => void) => (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, p: border ? 2 : 0, border: border ? 1 : 0, borderColor: 'divider', borderRadius: 1 }}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={(_, v) => onChange(v)} disabled={disabled || viewOnly} required={required} />}
+        label={<Box><Typography variant="body2">{labelName}</Typography>{description && <Typography variant="caption" color="text.secondary">{description}</Typography>}</Box>}
+        sx={{ m: 0 }}
+      />
+    </Box>
+  );
+
+  if (form) {
+    return (
+      <Controller
+        name={fieldName}
+        control={form.control}
+        defaultValue={false}
+        render={({ field }) => switchEl(!!field.value, (v) => { field.onChange(v); onCheckedChange?.(v); })}
+      />
+    );
+  }
+
+  return switchEl(!!value, (v) => { setValue?.(v); onCheckedChange?.(v); });
+}

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

@@ -0,0 +1,46 @@
+'use client';
+
+import { useFormContext } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import type { TextAreaInputProps } from '../../assets/interface/input-props.type';
+
+export function TextArea({ form, name, labelName, placeholder, required, disabled, viewOnly, rows = 3, value, setValue, customMessage }: TextAreaInputProps) {
+  const formContext = form ? useFormContext() : null;
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form && formContext) {
+    return (
+      <TextField
+        fullWidth
+        variant="outlined"
+        label={labelName}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled || viewOnly}
+        multiline
+        rows={rows}
+        error={!!formContext.getFieldState(fieldName, formContext.formState).error}
+        helperText={formContext.getFieldState(fieldName, formContext.formState).error?.message || customMessage}
+        InputProps={{ readOnly: viewOnly }}
+        {...formContext.register(fieldName)}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant="outlined"
+      label={labelName}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled || viewOnly}
+      multiline
+      rows={rows}
+      value={value || ''}
+      onChange={(e) => setValue?.(e.target.value)}
+      helperText={customMessage}
+      InputProps={{ readOnly: viewOnly }}
+    />
+  );
+}

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { useFormContext } from 'react-hook-form';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import type { TextInputProps } from '../../assets/interface/input-props.type';
+
+export function Text({ form, name, placeholder, labelName, required, disabled, viewOnly, value, setValue, leftIcon, rightIcon, customMessage }: TextInputProps) {
+  const formContext = form ? useFormContext() : null;
+  const fieldName = name || labelName?.toLowerCase().replace(/\s+/g, '_') || '';
+
+  if (form && formContext) {
+    return (
+      <TextField
+        fullWidth
+        variant="outlined"
+        label={labelName}
+        placeholder={placeholder}
+        required={required}
+        disabled={disabled || viewOnly}
+        error={!!formContext.getFieldState(fieldName, formContext.formState).error}
+        helperText={formContext.getFieldState(fieldName, formContext.formState).error?.message || customMessage}
+        InputProps={{
+          startAdornment: leftIcon ? <InputAdornment position="start">{leftIcon}</InputAdornment> : undefined,
+          endAdornment: rightIcon ? <InputAdornment position="end">{rightIcon}</InputAdornment> : undefined,
+          readOnly: viewOnly,
+        }}
+        {...formContext.register(fieldName)}
+      />
+    );
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant="outlined"
+      label={labelName}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled || viewOnly}
+      value={value || ''}
+      onChange={(e) => setValue?.(e.target.value)}
+      helperText={customMessage}
+      InputProps={{
+        startAdornment: leftIcon ? <InputAdornment position="start">{leftIcon}</InputAdornment> : undefined,
+        endAdornment: rightIcon ? <InputAdornment position="end">{rightIcon}</InputAdornment> : undefined,
+        readOnly: viewOnly,
+      }}
+    />
+  );
+}