@spacemade/ui 0.0.1

package/src/components/common/forms/Input.tsx

@@ -0,0 +1,362 @@
+import { InputHTMLAttributes, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import {
+  FieldErrors,
+  FieldValues,
+  UseFormGetValues,
+  UseFormRegisterReturn,
+} from 'react-hook-form'
+import { useRouter } from '@lib/next-router'
+import Button from '@components/common/button/Button'
+import FieldAssistantBar, { type FieldAssistantContext } from '@components/common/forms/FieldAssistantBar'
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  inputRef?: RefObject<HTMLInputElement>
+  isPassword?: boolean
+  error?: string
+  errors?: FieldErrors<FieldValues>
+  register?: UseFormRegisterReturn<string>
+  getValues?: UseFormGetValues<any>
+  customErrorMessage?: string
+  helperText?: string
+  prependInput?: ReactNode
+  appendInput?: ReactNode
+  labelColor?: string
+  className?: string
+
+  /** Extra raw input props spread last */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>
+
+  /** Enable decimal input controls (digits + one dot). */
+  allowDecimal?: boolean
+
+  /** Max decimals to allow (default 2). */
+  maxDecimals?: number
+
+  /** When true, pretty-print to exactly maxDecimals on blur (default true). */
+  padDecimalsOnBlur?: boolean
+
+  /** Toggle floating text assistant bar for text-like fields. */
+  enableAssistant?: boolean
+  assistantContext?: FieldAssistantContext
+}
+
+const getErrorMessage = (
+  name: string,
+  errors?: FieldErrors<FieldValues>,
+  customErrorMessage?: string
+) => {
+  let error = errors ? errors[name] : null
+  if (!error && name.includes('.')) {
+    const keys = name.split('.')
+    error = keys.reduce(
+      (acc, key) => acc && (acc[key] as unknown as FieldErrors<FieldValues>),
+      errors
+    )
+  }
+  return error ? error.message || customErrorMessage : null
+}
+
+/** Compose handlers without clobbering any */
+function compose<K extends keyof React.DOMAttributes<HTMLInputElement>>(
+  ...fns: Array<React.DOMAttributes<HTMLInputElement>[K] | undefined>
+) {
+  return (...args: any[]) => {
+    for (const fn of fns) {
+      if (typeof fn === 'function') {
+        ;(fn as (...callArgs: any[]) => void)(...args)
+      }
+    }
+  }
+}
+
+/** Programmatically set value and ensure RHF sees it */
+function setValueAndDispatch(el: HTMLInputElement, value: string) {
+  el.value = value
+  el.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+/** Insert a character at the caret and dispatch an input event so RHF updates */
+function insertAtCaret(el: HTMLInputElement, ch: string) {
+  const start = el.selectionStart ?? el.value.length
+  const end = el.selectionEnd ?? el.value.length
+  const next = el.value.slice(0, start) + ch + el.value.slice(end)
+  setValueAndDispatch(el, next)
+  const pos = start + ch.length
+  try { el.setSelectionRange(pos, pos) } catch {}
+}
+
+/** Keep only digits and one dot. Cap to N decimals. Allow "" / ".", "0." while typing. */
+function sanitizeMoney(raw: string, maxDecimals = 2) {
+  if (raw == null) return ''
+  let s = raw.replace(/,/g, '.').replace(/[^\d.]/g, '')
+  const firstDot = s.indexOf('.')
+  if (firstDot !== -1) {
+    const before = s.slice(0, firstDot + 1)
+    const after = s.slice(firstDot + 1).replace(/\./g, '')
+    s = before + after
+  }
+  const m = s.match(/^(\d*)(?:\.(\d*))?$/)
+  if (!m) return s
+  const [, intPart = '', decPart = ''] = m
+  if (decPart.length > maxDecimals) {
+    return `${intPart}.${decPart.slice(0, maxDecimals)}`
+  }
+  return intPart === '' && (s === '.' || s === '') ? s : (decPart ? `${intPart}.${decPart}` : intPart)
+}
+
+/** On blur: format to exactly N decimals if numeric; leave empty strings empty */
+function blurMoney(raw: string, maxDecimals = 2) {
+  const s = sanitizeMoney(raw, maxDecimals)
+  if (s === '' || s === '.' || s === '0.') return ''
+  const n = Number(s)
+  if (!Number.isFinite(n)) return ''
+
+  // 👇 NEW: treat pure zero as "no value"
+  if (n === 0) return ''
+
+  return n.toFixed(maxDecimals)
+}
+
+/** Decimal keyguard */
+const decimalKeyguard: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
+  const ctrlLike = e.ctrlKey || e.metaKey || e.altKey
+  const navKeys = ['Backspace','Delete','Tab','Escape','Enter','ArrowLeft','ArrowRight','Home','End']
+  if (ctrlLike || navKeys.includes(e.key)) return
+
+  const el = e.currentTarget
+
+  if (/^\d$/.test(e.key)) return
+
+  if (e.key === '.' || e.key === 'Decimal' || (e as any).code === 'NumpadDecimal') {
+    if (el.value.includes('.')) e.preventDefault()
+    return
+  }
+
+  if (e.key === ',') {
+    e.preventDefault()
+    if (!el.value.includes('.')) insertAtCaret(el, '.')
+    return
+  }
+
+  e.preventDefault()
+}
+
+const Input = ({
+  label,
+  register,
+  error,
+  errors,
+  placeholder,
+  inputRef,
+  getValues,
+  customErrorMessage,
+  type = 'text',
+  isPassword = false,
+  helperText,
+  prependInput,
+  appendInput,
+  className,
+  inputProps,
+  allowDecimal = false,
+  maxDecimals = 2,
+  padDecimalsOnBlur = true,
+  enableAssistant = true,
+  assistantContext,
+  ...rest
+}: Props) => {
+  const router = useRouter()
+  const [showPassword, setShowPassword] = useState(false)
+	const [isAutofilled, setIsAutofilled] = useState(false)
+  const togglePassword = () => setShowPassword(!showPassword)
+  const [isFocus, setIsFocus] = useState(false)
+  const [isAssistantFocusWithin, setIsAssistantFocusWithin] = useState(false)
+  const targetInputRef = useRef<HTMLInputElement | null>(null)
+
+  const [paddingLeft, setPaddingLeft] = useState<string | undefined>(undefined)
+  const [paddingRight, setPaddingRight] = useState<string | undefined>(undefined)
+
+  const handlePrependElemWidth = useCallback((node: HTMLDivElement | null) => {
+    if (!node) return
+    setPaddingLeft(node.clientWidth ? `${node.clientWidth - 2}px` : undefined)
+  }, [])
+  const handleAppendElemWidth = useCallback((node: HTMLDivElement | null) => {
+    if (!node) return
+    setPaddingRight(node.clientWidth ? `${node.clientWidth - 2}px` : undefined)
+  }, [])
+
+  const message = error || getErrorMessage(register?.name || '', errors, customErrorMessage)
+
+  /** Merge onKeyDown (with optional decimal guard) */
+  const mergedOnKeyDown = useMemo(() => {
+    const fromRegister = (register as any)?.onKeyDown as React.KeyboardEventHandler<HTMLInputElement> | undefined
+    const fromRest = rest.onKeyDown as React.KeyboardEventHandler<HTMLInputElement> | undefined
+    const fromInputProps = inputProps?.onKeyDown as React.KeyboardEventHandler<HTMLInputElement> | undefined
+    const composed = compose<'onKeyDown'>(fromRegister, fromRest, fromInputProps)
+    return allowDecimal ? compose<'onKeyDown'>(decimalKeyguard, composed) : composed
+  }, [register, rest.onKeyDown, inputProps?.onKeyDown, allowDecimal])
+
+  /** Merge onInput to live-sanitize to <= maxDecimals (opt-in) */
+  const mergedOnInput = useMemo(() => {
+    const fromRegister = (register as any)?.onInput as React.FormEventHandler<HTMLInputElement> | undefined
+    const fromRest = rest.onInput as React.FormEventHandler<HTMLInputElement> | undefined
+    const fromInputProps = inputProps?.onInput as React.FormEventHandler<HTMLInputElement> | undefined
+
+    const sanitizer: React.FormEventHandler<HTMLInputElement> | undefined = allowDecimal
+      ? (e) => {
+          const el = e.currentTarget
+          const sanitized = sanitizeMoney(el.value, maxDecimals)
+          if (sanitized !== el.value) setValueAndDispatch(el, sanitized)
+        }
+      : undefined
+
+    return compose<'onInput'>(sanitizer, fromRegister, fromRest, fromInputProps)
+  }, [register, rest.onInput, inputProps?.onInput, allowDecimal, maxDecimals])
+
+  /** Merge onBlur to pad to exactly N decimals (opt-in) but keep empty as empty */
+  const mergedOnBlur = useMemo(() => {
+    const fromRegister = (e: any) => register?.onBlur?.(e)
+    const fromRest = rest.onBlur as React.FocusEventHandler<HTMLInputElement> | undefined
+    const fromInputProps = inputProps?.onBlur as React.FocusEventHandler<HTMLInputElement> | undefined
+
+    const formatter: React.FocusEventHandler<HTMLInputElement> | undefined =
+      allowDecimal && padDecimalsOnBlur
+        ? (e) => {
+            const el = e.currentTarget
+            const formatted = blurMoney(el.value, maxDecimals)
+            // Only update if changed (avoid extra renders)
+            if (formatted !== el.value) setValueAndDispatch(el, formatted)
+          }
+        : undefined
+
+    return compose<'onBlur'>(formatter, fromRegister, fromRest, fromInputProps, () => setIsFocus(false))
+  }, [register, rest.onBlur, inputProps?.onBlur, allowDecimal, padDecimalsOnBlur, maxDecimals])
+
+  const bindInputRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      targetInputRef.current = node
+      if (inputRef) {
+        ;(inputRef as any).current = node
+      }
+      const registerRef = register?.ref
+      if (!registerRef) return
+      if (typeof registerRef === 'function') {
+        registerRef(node)
+        return
+      }
+      ;(registerRef as any).current = node
+    },
+    [inputRef, register]
+  )
+
+  useEffect(() => {
+		const input = targetInputRef.current
+		if (!input) return
+
+		const check = () => setIsAutofilled(input.matches(':-webkit-autofill, :autofill') || input.value !== '')
+
+		check()
+		const timer = setInterval(check, 100)
+
+		return () => clearInterval(timer)
+	}, [register?.name])
+
+  const isAdminRoute = String(router?.asPath || router?.pathname || '').startsWith('/admin')
+  const isAssistantEligible =
+    isAdminRoute &&
+    enableAssistant &&
+    !allowDecimal &&
+    !isPassword &&
+    !rest.disabled &&
+    ['text', 'search', 'email', 'url'].includes(String(type || '').toLowerCase())
+
+  const showAssistantBar = isAssistantEligible && (isFocus || isAssistantFocusWithin)
+  const registerProps = register
+    ? (({ ref: _ref, ...restRegister }) => restRegister)(register as any)
+    : undefined
+
+  return (
+    <div
+      className={`field-container field-container--${
+        isFocus ? 'labelFloating' : 'labelResting'
+      } ${message ? 'is-invalid' : ''}`}
+    >
+      {isAssistantEligible && (
+        <FieldAssistantBar
+          targetRef={targetInputRef}
+          visible={showAssistantBar}
+          fieldName={register?.name || label}
+          context={assistantContext}
+          getFormContext={getValues ? () => (getValues() as Record<string, any>) : undefined}
+          onFocusWithinChange={setIsAssistantFocusWithin}
+        />
+      )}
+      <label
+        className={`field-label ${
+          register?.name &&
+          getValues &&
+          ['', null, undefined].includes(getValues(register.name))
+            ? 'field-label--empty'
+            : ''
+        } field-label--${isFocus || isAutofilled ? 'floating' : 'resting'} ${
+          prependInput ? 'field-label--has-prepend' : ''
+        }`}
+        htmlFor={register?.name}
+      >
+        {label}
+      </label>
+
+      <div className="position-relative">
+        {prependInput && (
+          <div
+            ref={handlePrependElemWidth}
+            className="field-prepend d-flex align-items-end position-absolute start-0 bottom-0 top-0 p-2 ms-1"
+          >
+            {prependInput}
+          </div>
+        )}
+
+        <input
+          ref={bindInputRef}
+          type={isPassword ? (showPassword ? 'text' : 'password') : type}
+          placeholder={placeholder}
+          className={`Input ${isFocus ? 'Input--focused' : ''} ${className || ''}`}
+          style={{ paddingLeft, paddingRight }}
+          {...registerProps}
+          {...rest}
+          {...inputProps}
+          onFocus={compose('onFocus' as any, rest.onFocus, inputProps?.onFocus, () => setIsFocus(true))}
+          // Use our merged onBlur (includes RHF's onBlur)
+          // eslint-disable-next-line react/jsx-no-bind
+          onBlur={mergedOnBlur}
+          onKeyDown={mergedOnKeyDown}
+          onInput={mergedOnInput}
+        />
+
+        {isPassword && (
+          <Button
+            onClick={togglePassword}
+            className="toggle-password no-min-size text-dark position-absolute end-0 bottom-0 top-0 p-2 me-1 z-index-1"
+          >
+            <span className={`bi bi-eye${showPassword ? '-slash' : ''}`}></span>
+          </Button>
+        )}
+
+        {appendInput && (
+          <div
+            ref={handleAppendElemWidth}
+            className="field-append d-flex align-items-center position-absolute end-0 bottom-0 top-0 p-2 me-1 z-index-1"
+          >
+            {appendInput}
+          </div>
+        )}
+      </div>
+
+      {message && <span className="invalid-feedback">{`${message}`}</span>}
+      {helperText && <span className="small d-block mt-2">{helperText}</span>}
+    </div>
+  )
+}
+
+export default Input

package/src/components/common/forms/InputColor.tsx

@@ -0,0 +1,36 @@
+import { UseFormRegisterReturn, Control, Controller } from 'react-hook-form'
+
+const InputColor = ({
+	label,
+	helperText,
+	register,
+	control,
+} : {
+	label: string
+	register: UseFormRegisterReturn<string>
+	control: Control<any, any>
+	helperText?: string
+}) => {
+	return (
+		<Controller
+			name={ register.name }
+			control={ control }
+			render={({ field: { value } }) => {
+				return (
+					<>
+						<div className='d-flex gap-3 align-items-center'>
+							<input type='color' className='input-color' { ...register } />
+							<div>
+								<label htmlFor={ register.name } className='d-block'>{ label }</label>
+								<p className='small-md mb-0'>Hex: <span className='fw-bold'>{ value }</span></p>
+							</div>
+						</div>
+						{ helperText && <span className='small d-block mt-2'>{ helperText }</span> }
+					</>
+				)
+			}}
+		/>
+	)
+}
+
+export default InputColor

package/src/components/common/forms/RadioInputs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react'
+import { Control, Controller, UseFormRegisterReturn } from 'react-hook-form'
+
+type RadioOption = {
+	label: string
+	value: string
+	description?: string
+	icon?: string
+	isDisabled?: boolean
+}
+
+export const RadioInputs = ({
+	options,
+	register,
+	control
+} : {
+	options: RadioOption[]
+	register: UseFormRegisterReturn<string>
+	control: Control<any, any>
+}) => {
+
+	return (
+		<div className='d-flex flex-wrap gap-2'>
+			<Controller
+				name={ register.name }
+				control={ control }
+				render={({ field: { value } }) => (
+					<>
+						{ options.map((option, key) => (
+							<div
+								key={key}
+								className={`d-flex align-items-center gap-2 p-2 border rounded-md position-relative bg-hover-background ${ value === option.value ? 'border-primary border-2' : '' } ${option.isDisabled ? 'opacity-5' : ''}`}
+							>
+								<input
+									{ ...register }
+									type='radio'
+									value={option.value}
+									disabled={option.isDisabled}
+									className='position-absolute top-0 left-0 right-0 bottom-0 opacity-0 z-index-10 pointer'
+								/>
+								{option.icon && (
+									<img
+										src={option.icon}
+										alt='Icon'
+										className='w-xs-30p w-xs-30p object-fit-contain'
+									/>
+								)}
+								<div>
+									<p className={`fw-bold text-primary ${option.description ? 'mb-1' : 'mb-0'}`}>{option.label}</p>
+									{option.description && (
+										<p className='small mb-0 opacity-8'>{option.description}</p>
+									)}
+								</div>
+							</div>
+						)) }
+					</>
+				)}
+			/>
+		</div>
+	)
+}

package/src/components/common/forms/Select.tsx

@@ -0,0 +1,214 @@
+
+// export default Select
+import { ReactNode, useState, useEffect } from 'react'
+import {
+	Control,
+	Controller,
+	FieldErrors,
+	FieldValues,
+	UseFormGetValues,
+	UseFormRegisterReturn,
+	useWatch,
+} from 'react-hook-form'
+import ReactSelect, {
+	Props as ReactSelectProps,
+	CSSObjectWithLabel,
+	GroupBase,
+	StylesConfig,
+} from 'react-select'
+import { EntityStatus } from '@store/model'
+import { colors } from '@helpers/theme/colors'
+
+export interface OptionType {
+	value: string
+	label: ReactNode
+	image?: string
+	status?: EntityStatus
+	isDisabled?: boolean
+}
+
+export interface SelectProps extends Partial<ReactSelectProps<OptionType, boolean>> {
+	name?: string
+	register?: UseFormRegisterReturn<string>
+	label?: string
+	options: OptionType[]
+	value?: string
+	setFirstAsDefault?: boolean
+	allowNone?: boolean
+	control: Control<any, any>
+	getValues: UseFormGetValues<any>
+	emptyOptionLabel?: string
+	isMulti?: boolean
+	onSelectChange?: (value: string | string[] | undefined) => void
+	onChange?: (value: any, option?: OptionType | OptionType[] | null) => void
+	onInputChange?: (value: string | undefined) => void
+	errors?: FieldErrors<FieldValues>
+	customErrorMessage?: string
+	isDisabled?: boolean
+	isLoading?: boolean
+	helperText?: string
+	formatOptionLabel?: (data: OptionType) => ReactNode
+}
+
+const customStyles: StylesConfig<OptionType, boolean, GroupBase<OptionType>> = {
+	option: (styles: CSSObjectWithLabel, state) => ({
+		...styles,
+		color: state.isSelected || state.isFocused ? colors.white : colors.dark,
+		padding: 8,
+		backgroundColor:
+			state.isSelected || state.isFocused ? colors.primary : colors.white,
+		opacity: state.isDisabled ? 0.5 : 1,
+	}),
+	control: (styles: CSSObjectWithLabel, state) => ({
+		...styles,
+		backgroundColor: state.isDisabled ? colors['lighter-gray'] : colors.transparent,
+		padding: 0,
+		minHeight: 70,
+		border: `1px solid ${state.isDisabled ? colors['light-gray'] : colors.dark}`,
+		outline: 0,
+		borderRadius: 12,
+		cursor: state.isDisabled ? 'not-allowed' : 'default',
+	}),
+	menuList: (styles: CSSObjectWithLabel) => ({
+		...styles,
+		margin: 0,
+		backgroundColor: colors.white,
+	}),
+	singleValue: (styles: CSSObjectWithLabel, state) => ({
+		...styles,
+		color: state.isDisabled ? colors['medium-gray'] : colors.dark,
+		marginTop: 15,
+		marginLeft: 5,
+	}),
+	input: (styles: CSSObjectWithLabel, state) => ({
+		...styles,
+		marginTop: '16px',
+		color: state.isDisabled ? colors['medium-gray'] : colors.dark,
+	}),
+	menuPortal: (provided) => ({ ...provided, zIndex: 9999 }),
+}
+
+const Select = ({
+	register,
+	name,
+	control,
+	value,
+	options,
+	label,
+	getValues,
+	setFirstAsDefault = true,
+	allowNone = false,
+	emptyOptionLabel = 'None',
+	isMulti,
+	onSelectChange,
+	onChange: onChangeOverride,
+	onInputChange,
+	errors,
+	helperText,
+	customErrorMessage,
+	isDisabled = false,
+	isLoading = false,
+	formatOptionLabel,
+	...rest
+}: SelectProps) => {
+	const fieldName = register?.name || name || ''
+	const selectOptions = allowNone ? [{ label: emptyOptionLabel, value: '' }, ...options] : options
+
+	// Watch the field value for changes
+	const watchedValue = useWatch({
+		control,
+		name: fieldName,
+	})
+
+	// Only float label if value is set and not empty string
+	const [isLabelFloating, setIsLabelFloating] = useState(() => {
+		const currentValue = getValues(fieldName)
+		if (isMulti) {
+			return Array.isArray(currentValue) && currentValue.length > 0
+		}
+		return currentValue !== undefined && currentValue !== null && currentValue !== ''
+	})
+
+	useEffect(() => {
+		const shouldFloat = isMulti
+			? Array.isArray(watchedValue) && watchedValue.length > 0
+			: watchedValue !== undefined && watchedValue !== null && watchedValue !== ''
+
+		setIsLabelFloating(shouldFloat)
+	}, [watchedValue, isMulti])
+
+	const error = errors ? errors[fieldName] : null
+	const message = error ? String(error.message || customErrorMessage || '') : null
+
+	return (
+		<div className={`select-container ${message ? 'is-invalid' : ''}`}>
+			<label
+				htmlFor={fieldName}
+				className={`${isLabelFloating ? 'select-label-floating' : ''}`}
+			>
+				{label}
+			</label>
+			<Controller
+				name={fieldName}
+				control={control}
+				render={({ field: { value, onChange, onBlur } }) => (
+					<ReactSelect<OptionType, boolean>
+						classNamePrefix="select"
+						{...register}
+						options={selectOptions}
+						styles={customStyles}
+						onChange={(option: OptionType | readonly OptionType[] | null) => {
+							const newValue = isMulti
+								? ((option as readonly OptionType[] | null) || []).map(({ value }) => value)
+								: (option as OptionType)?.value || ''
+
+							onChange(newValue)
+							setIsLabelFloating(isMulti
+								? Array.isArray(newValue) && newValue.length > 0
+								: newValue !== '' && newValue !== undefined && newValue !== null
+							)
+							onSelectChange && onSelectChange(newValue)
+							onChangeOverride &&
+								onChangeOverride(
+									newValue,
+									Array.isArray(option) ? [...option] : (option as OptionType | null)
+								)
+						}}
+						onInputChange={(searchValue: string) => {
+							const currentValue = getValues(fieldName) || ''
+							const hasValue = isMulti
+								? Array.isArray(currentValue) && currentValue.length > 0
+								: currentValue !== '' && currentValue !== undefined && currentValue !== null
+
+							setIsLabelFloating(hasValue || !!searchValue)
+							onInputChange && onInputChange(searchValue)
+							return searchValue
+						}}
+						onBlur={onBlur}
+						value={
+							isMulti
+								? selectOptions.filter((option) =>
+										Array.isArray(value) ? value.includes(option.value) : false
+								  )
+								: selectOptions.find((option) => option.value === value)
+						}
+						defaultValue={setFirstAsDefault ? selectOptions[0] : undefined}
+						placeholder={false}
+						isDisabled={isDisabled}
+						isLoading={isLoading}
+						formatOptionLabel={formatOptionLabel}
+						menuPortalTarget={
+							typeof document !== 'undefined' ? document.body : undefined
+						}
+						isMulti={isMulti}
+						{...rest}
+					/>
+				)}
+			/>
+			{message && <span className="invalid-feedback">{message}</span>}
+			{helperText && <span className="small d-block mt-2">{helperText}</span>}
+		</div>
+	)
+}
+
+export default Select;