@spacemade/ui 0.0.1

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

@@ -0,0 +1,89 @@
+import React, { useMemo, useState } from 'react'
+
+type SimpleTagsInputProps = {
+	name?: string
+	value?: string[]
+	onChange: (nextTags: string[]) => void
+	placeHolder?: string
+	onFocus?: () => void
+	onBlur?: () => void
+	onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+	beforeAddValidate?: (tag: string) => boolean
+}
+
+const SimpleTagsInput = ({
+	name,
+	value = [],
+	onChange,
+	placeHolder,
+	onFocus,
+	onBlur,
+	onKeyUp,
+	beforeAddValidate,
+}: SimpleTagsInputProps) => {
+	const [draftTag, setDraftTag] = useState('')
+
+	const normalizedTags = useMemo(
+		() => value.filter((tag): tag is string => typeof tag === 'string'),
+		[value]
+	)
+
+	const addTag = (rawTag: string) => {
+		const tag = rawTag.trim()
+		if (!tag.length) return
+		if (beforeAddValidate && !beforeAddValidate(tag)) return
+		if (normalizedTags.includes(tag)) return
+
+		onChange([...normalizedTags, tag])
+		setDraftTag('')
+	}
+
+	const removeTagAtIndex = (index: number) => {
+		onChange(normalizedTags.filter((_tag, currentIndex) => currentIndex !== index))
+	}
+
+	const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+		if (event.key === 'Enter' || event.key === ',') {
+			event.preventDefault()
+			addTag(draftTag)
+			return
+		}
+
+		if (event.key === 'Backspace' && !draftTag.length && normalizedTags.length > 0) {
+			event.preventDefault()
+			removeTagAtIndex(normalizedTags.length - 1)
+		}
+	}
+
+	return (
+		<div className='rti--container'>
+			{normalizedTags.map((tag, index) => (
+				<span className='rti--tag' key={`${tag}-${index}`}>
+					<span>{tag}</span>
+					<button
+						aria-label={`Remove ${tag}`}
+						onClick={() => removeTagAtIndex(index)}
+						type='button'
+					>
+						×
+					</button>
+				</span>
+			))}
+			<input
+				autoComplete='off'
+				className='rti--input'
+				name={name}
+				onFocus={onFocus}
+				onBlur={onBlur}
+				onChange={(event) => setDraftTag(event.target.value)}
+				onKeyDown={onInputKeyDown}
+				onKeyUp={onKeyUp}
+				placeholder={placeHolder}
+				type='text'
+				value={draftTag}
+			/>
+		</div>
+	)
+}
+
+export default SimpleTagsInput

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

@@ -0,0 +1,111 @@
+import { SyntheticEvent, useCallback, useState } from 'react'
+import { debounce } from 'lodash'
+import {
+	Control,
+	Controller,
+	UseFormRegisterReturn,
+	UseFormSetValue,
+} from 'react-hook-form'
+import { useGetTagsQuery } from '@store/slice/api/tagsApiSlice'
+import SimpleTagsInput from './SimpleTagsInput'
+
+const TagInput = ({
+	setValue,
+	register,
+	control,
+}: {
+	register: UseFormRegisterReturn<string>
+	setValue: UseFormSetValue<any>
+	control: Control<any, any>
+}) => {
+	const [tagsToSkip, setTagsToSkip] = useState<string[]>([])
+	const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
+		null
+	)
+	const [showOptions, setShowOptions] = useState(false)
+	const [tagNameValue, setTagNameValue] = useState<string | null>(null)
+	const { data: tags } = useGetTagsQuery({
+		limit: 10,
+		nameLike: tagNameValue || undefined,
+		skipTags: tagsToSkip,
+	})
+	const [isFocused, setIsFocused] = useState<boolean>(false)
+
+	const onSelectTags = (tags: string[]) => {
+		setValue(register.name, tags)
+		setTagsToSkip(tags)
+	}
+
+	const onTagInputValueChange = (event: SyntheticEvent) => {
+		const element = event.target as HTMLInputElement
+		const value = element.value
+		setTagNameValue(value)
+		setShowOptions(true)
+		setInputElement(element)
+	}
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const debouncedChangeInputHandler = useCallback(
+		debounce(onTagInputValueChange, 300),
+		[]
+	)
+
+	return (
+		<div className={`input-tags ${isFocused ? 'input-tags--is-focused' : ''}`}>
+			<Controller
+				name={register.name}
+				control={control}
+				render={({ field: { value } }) => {
+					return (
+						<>
+							<SimpleTagsInput
+								name={register.name}
+								value={value || []}
+								onChange={onSelectTags}
+								placeHolder='Enter Tags'
+								onFocus={() => {
+									setShowOptions(true)
+									setIsFocused(true)
+								}}
+								onBlur={() => {
+									setIsFocused(false)
+									setTimeout(() => {
+										setShowOptions(false)
+									}, 100)
+								}}
+								onKeyUp={debouncedChangeInputHandler}
+								beforeAddValidate={(tag) => tag.length > 1}
+							/>
+							{((tags?.count && showOptions) || false) && (
+								<div className='w-100 position-relative mt-2 fadeIn z-index-999'>
+									<div className='position-absolute top-0 w-100 bg-white rounded-md shadow border overflow-hidden py-2'>
+										<ul className='list-unstyled mb-0'>
+											{tags?.results.map((tag) => (
+												<li
+													key={tag.id}
+													className='px-3 py-2 pointer bg-hover-lighter-gray'
+													onClick={() => {
+														onSelectTags([...(value || []), tag.name])
+														setShowOptions(false)
+														if (inputElement) {
+															inputElement.value = ''
+														}
+													}}
+												>
+													{tag.name}
+												</li>
+											))}
+										</ul>
+									</div>
+								</div>
+							)}
+						</>
+					)
+				}}
+			/>
+			<span className='small d-block mt-2'>Press enter to add new tag</span>
+		</div>
+	)
+}
+
+export default TagInput

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

@@ -0,0 +1,99 @@
+import { RefObject, TextareaHTMLAttributes, useCallback, useRef, useState } from 'react'
+import { FieldValues, UseFormRegisterReturn, FieldErrors, UseFormGetValues } from 'react-hook-form'
+import { useRouter } from '@lib/next-router'
+import FieldAssistantBar, { type FieldAssistantContext } from '@components/common/forms/FieldAssistantBar'
+
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+	textareaRef?: RefObject<HTMLTextAreaElement>
+	label?: string
+	errors?: FieldErrors<FieldValues>
+	register?: UseFormRegisterReturn<string>
+	getValues?: UseFormGetValues<any>
+	helperText?: string
+	enableAssistant?: boolean
+	assistantContext?: FieldAssistantContext
+}
+
+const Textarea = ({
+	errors,
+	register,
+	textareaRef,
+	label,
+	getValues,
+	helperText,
+	cols = 20,
+	rows = 5,
+	enableAssistant = true,
+	assistantContext,
+	...rest
+}: Props) => {
+	const router = useRouter()
+	const message = errors ? errors[register?.name || '']?.message : null
+	const [isFocus, setIsFocus] = useState(false)
+	const [isAssistantFocusWithin, setIsAssistantFocusWithin] = useState(false)
+	const targetTextareaRef = useRef<HTMLTextAreaElement | null>(null)
+
+	const bindTextareaRef = useCallback(
+		(node: HTMLTextAreaElement | null) => {
+			targetTextareaRef.current = node
+			if (textareaRef) {
+				;(textareaRef as any).current = node
+			}
+			const registerRef = register?.ref
+			if (!registerRef) return
+			if (typeof registerRef === 'function') {
+				registerRef(node)
+				return
+			}
+			;(registerRef as any).current = node
+		},
+		[register, textareaRef]
+	)
+
+	const isAdminRoute = String(router?.asPath || router?.pathname || '').startsWith('/admin')
+	const isAssistantEligible = isAdminRoute && enableAssistant && !rest.disabled
+	const showAssistantBar = isAssistantEligible && (isFocus || isAssistantFocusWithin)
+	const registerProps = register
+		? (({ ref: _ref, ...restRegister }) => restRegister)(register as any)
+		: undefined
+
+	return (
+		<div
+			className={`field-container textarea field-container--${ isFocus ? 'labelFloating' : 'labelResting' } ${ message ? 'is-invalid' : ''} `}
+		>
+			{isAssistantEligible && (
+				<FieldAssistantBar
+					targetRef={targetTextareaRef}
+					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) && !getValues(register.name)) ? 'field-label--empty' : '' } field-label--${ isFocus ? 'floating' : 'resting' }`} htmlFor={ register?.name }>{ label }</label>
+			<textarea
+				ref={ bindTextareaRef }
+				cols={ cols }
+				rows={ rows }
+				className={`Input ${ isFocus ? 'Input--focused' : '' }`}
+				{ ...registerProps }
+				{ ...rest }
+				onFocus={ (e) => {
+					rest.onFocus?.(e)
+					setIsFocus(true)
+				} }
+				onBlur={ (e) => {
+					register?.onBlur(e)
+					rest.onBlur?.(e)
+					setIsFocus(false)
+				}}
+			>
+			</textarea>
+			{ helperText && <span className='small d-block mt-2'>{ helperText }</span> }
+			{ message && <span className='invalid-feedback'>{`${ message }`}</span> }
+		</div>
+	)
+}
+
+export default Textarea

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

@@ -0,0 +1,67 @@
+import { ChangeEvent, SyntheticEvent } from 'react'
+import { Switch, SwitchProps } from '@chakra-ui/react'
+import {
+	Control,
+	Controller,
+	FieldErrors,
+	FieldValues,
+	UseFormRegisterReturn,
+} from 'react-hook-form'
+
+interface Props extends SwitchProps {
+	errors?: FieldErrors<FieldValues>
+	register?: UseFormRegisterReturn<string>
+	label?: string
+	helperText?: string
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+	control?: Control<any, any>
+}
+
+const ToggleButton = ({
+	errors,
+	register,
+	label,
+	helperText,
+	onChange,
+	control,
+}: Props) => {
+	const message = errors ? errors[register?.name || '']?.message : null
+
+	return (
+		<>
+			<div className='d-flex align-items-center gap-3'>
+				{label && (
+					<div>
+						<label htmlFor={register?.name} className='form-label mb-0'>
+							{label}
+						</label>
+						{helperText && (
+							<span className='d-block small mt-2 text-light'>
+								{helperText}
+							</span>
+						)}
+					</div>
+				)}
+				<Controller
+					name={register?.name || ''}
+					control={control}
+					render={({ field: { onChange: onChangeByReactForm } }) => {
+						return (
+							<Switch
+								id={register?.name}
+								{...register}
+								onChange={(event) => {
+									onChange && onChange(event)
+									onChangeByReactForm(event.target.checked)
+								}}
+							/>
+						)
+					}}
+				/>
+			</div>
+			{message && <span className='invalid-feedback'>{`${message}`}</span>}
+		</>
+	)
+}
+
+export default ToggleButton