@komensal/ui 0.1.0

package/src/components/form-fields/map-picker-field.tsx

@@ -0,0 +1,49 @@
+import type { Control, FieldValues, Path } from 'react-hook-form'
+
+import { cn } from '../../utils'
+import { FormControl, FormField, FormItem, FormMessage } from '../form'
+import { GoogleMapPicker, type GoogleMapPickerProps } from '../google-map-picker'
+import { LabelField } from './label-field'
+
+type MapPickerFieldProps<T extends FieldValues> = Omit<GoogleMapPickerProps, 'hasError' | 'onChange' | 'value'> & {
+  control: Control<T>
+  label?: string
+  labelClassName?: string
+  mainClassName?: string
+  name: Path<T>
+  visualRequired?: boolean
+}
+
+export const MapPickerField = <T extends FieldValues>({
+  control,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  visualRequired,
+  ...pickerProps
+}: MapPickerFieldProps<T>) => (
+  <FormField
+    control={control}
+    name={name}
+    render={({ field, fieldState }) => (
+      <FormItem className={cn('flex flex-col', mainClassName)}>
+        <LabelField
+          label={label}
+          labelClassName={cn(labelClassName, fieldState.error && 'text-destructive')}
+          name={name}
+          visualRequired={visualRequired}
+        />
+        <FormControl>
+          <GoogleMapPicker
+            {...pickerProps}
+            hasError={!!fieldState.error}
+            onChange={field.onChange}
+            value={field.value ?? ''}
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+)

package/src/components/form-fields/otp-field.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Control, FieldPath, FieldValues } from 'react-hook-form'
+
+import { cn } from '../../utils'
+import { FormControl, FormField, FormItem, FormMessage } from '../form'
+import { Label } from '../label'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../otp-input'
+
+interface OtpInputFormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> {
+  autoFocus?: boolean
+  className?: string
+  containerClassName?: string
+  control: Control<TFieldValues>
+  disabled?: boolean
+  label?: string
+  labelClassName?: string
+  name: TName
+  otpLength?: number
+}
+
+export function OTPField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  autoFocus,
+  className,
+  containerClassName,
+  control,
+  disabled,
+  label,
+  labelClassName,
+  name,
+  otpLength = 6
+}: OtpInputFormFieldProps<TFieldValues, TName>) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <FormItem className={cn('flex flex-col', className)}>
+          {label ? (
+            <Label className={cn('text-start text-sm font-semibold', labelClassName)} htmlFor={name}>
+              {label}
+            </Label>
+          ) : null}
+          <FormControl>
+            <InputOTP
+              aria-invalid={fieldState.invalid || undefined}
+              autoComplete='one-time-code'
+              autoFocus={autoFocus}
+              containerClassName={cn('justify-center', containerClassName)}
+              disabled={disabled}
+              id={name}
+              inputMode='numeric'
+              maxLength={otpLength}
+              onChange={(val: string) => field.onChange(val)}
+              onPaste={(e: React.ClipboardEvent<HTMLInputElement>) => field.onChange(e.clipboardData.getData('text'))}
+              pattern='[0-9]*'
+              value={field.value ?? ''}
+            >
+              <InputOTPGroup>
+                {Array.from({ length: otpLength }).map((_, i) => (
+                  <InputOTPSlot aria-invalid={fieldState.invalid || undefined} index={i} key={i} />
+                ))}
+              </InputOTPGroup>
+            </InputOTP>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  )
+}

package/src/components/form-fields/select-field.tsx

@@ -0,0 +1,77 @@
+import { Control, FieldValues, Path } from 'react-hook-form'
+
+import { cn } from '../../utils'
+import { FormControl, FormField, FormItem, FormMessage } from '../form'
+import { SelectInput } from '../select-input'
+import { LabelField } from './label-field'
+
+export interface Options {
+  label: string
+  value: number | string
+}
+
+interface SelectFieldProps<T extends FieldValues = FieldValues> {
+  ableDeleteOption?: boolean
+  className?: string
+  control: Control<T>
+  disabled?: boolean
+  label?: string
+  labelClassName?: string
+  mainClassName?: string
+  name: Path<T>
+  onChange?: (...event: unknown[]) => void
+  options: Options[] | undefined
+  placeholder?: string
+  search?: boolean
+  visualRequired?: boolean
+}
+
+export const SelectField = <T extends FieldValues = FieldValues>({
+  ableDeleteOption,
+  className,
+  control,
+  disabled,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  options,
+  placeholder,
+  search,
+  visualRequired
+}: SelectFieldProps<T>) => {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => {
+        const hasError = !!fieldState.error
+
+        return (
+          <FormItem className={cn('flex flex-col', mainClassName)}>
+            <LabelField
+              label={label}
+              labelClassName={cn(labelClassName, hasError && 'text-destructive')}
+              name={name}
+              visualRequired={visualRequired}
+            />
+            <FormControl>
+              <SelectInput
+                ableDeleteOption={ableDeleteOption}
+                className={className}
+                disabled={disabled}
+                error={fieldState.error}
+                items={options}
+                onChange={field.onChange}
+                placeholder={placeholder}
+                search={search}
+                value={typeof field.value === 'number' ? `${field.value}` : field.value}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )
+      }}
+    />
+  )
+}

package/src/components/form.tsx

@@ -0,0 +1,138 @@
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
+
+import { cn } from '../utils'
+import { Label } from './label'
+
+const Form = FormProvider
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { formState, getFieldState } = useFormContext()
+
+  if (!fieldContext) {
+    throw new Error('useFormField must be used within <FormField>')
+  }
+
+  if (!itemContext) {
+    throw new Error('useFormField must be used within <FormItem>')
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    formDescriptionId: `${id}-form-item-description`,
+    formItemId: `${id}-form-item`,
+    formMessageId: `${id}-form-item-message`,
+    id,
+    name: fieldContext.name,
+    ...fieldState
+  }
+}
+
+interface FormItemContextValue {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId()
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div className={cn('space-y-1', className)} ref={ref} {...props} />
+      </FormItemContext.Provider>
+    )
+  }
+)
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return <Label className={cn(error && 'text-destructive', className)} htmlFor={formItemId} ref={ref} {...props} />
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formDescriptionId, formItemId, formMessageId } = useFormField()
+
+    return (
+      <Slot
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        id={formItemId}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField()
+
+    return <p className={cn('text-muted text-[0.8rem]', className)} id={formDescriptionId} ref={ref} {...props} />
+  }
+)
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ children, className, ...props }, ref) => {
+    const { error, formMessageId } = useFormField()
+    const body = error?.message ? String(error.message) : children
+
+    if (!body) {
+      return null
+    }
+
+    return (
+      <p
+        className={cn('text-destructive text-[0.8rem] font-medium', className)}
+        id={formMessageId}
+        ref={ref}
+        {...props}
+      >
+        {body}
+      </p>
+    )
+  }
+)
+FormMessage.displayName = 'FormMessage'
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField }

package/src/components/google-map-picker.tsx

@@ -0,0 +1,243 @@
+import type { MapMouseEvent } from '@vis.gl/react-google-maps'
+
+import { AdvancedMarker, APIProvider, Map, useMap, useMapsLibrary } from '@vis.gl/react-google-maps'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { cn, inputBase, inputFocus } from '../utils'
+
+const DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 }
+const PICKER_MAP_ID = 'komensal-restaurant-map'
+const SELECTED_ZOOM = 15
+const DEBOUNCE_MS = 300
+
+export interface GoogleMapPickerProps {
+  centerOn?: google.maps.LatLngLiteral
+  disabled?: boolean
+  hasError?: boolean
+  locationQuery?: string
+  locationZoom?: number
+  onChange: (address: string) => void
+  placeholder?: string
+  value: string
+}
+
+const CITY_ZOOM = 12
+
+const MapPickerContent = ({
+  centerOn,
+  disabled,
+  hasError,
+  locationQuery,
+  locationZoom,
+  onChange,
+  placeholder,
+  value
+}: GoogleMapPickerProps) => {
+  const placesLib = useMapsLibrary('places')
+  const geocodingLib = useMapsLibrary('geocoding')
+  const map = useMap(PICKER_MAP_ID)
+  const onChangeRef = useRef(onChange)
+  const geocoder = useMemo<google.maps.Geocoder | null>(
+    () => (geocodingLib ? new geocodingLib.Geocoder() : null),
+    [geocodingLib]
+  )
+  const debounceRef = useRef<null | ReturnType<typeof setTimeout>>(null)
+
+  const [inputValue, setInputValue] = useState(value)
+  const [suggestions, setSuggestions] = useState<google.maps.places.AutocompleteSuggestion[]>([])
+  const [showDropdown, setShowDropdown] = useState(false)
+  const [sessionToken, setSessionToken] = useState<google.maps.places.AutocompleteSessionToken | undefined>()
+  const [position, setPosition] = useState<google.maps.LatLngLiteral | null>(null)
+
+  useEffect(() => {
+    onChangeRef.current = onChange
+  })
+
+  useEffect(() => {
+    setInputValue(value)
+  }, [value])
+
+  useEffect(() => {
+    if (map && centerOn) {
+      map.panTo(centerOn)
+      map.setZoom(CITY_ZOOM)
+    }
+  }, [map, centerOn])
+
+  useEffect(() => {
+    if (map && position) {
+      map.panTo(position)
+      map.setZoom(SELECTED_ZOOM)
+    }
+  }, [map, position])
+
+  useEffect(() => {
+    if (!placesLib) return
+    setSessionToken(new placesLib.AutocompleteSessionToken())
+  }, [placesLib])
+
+  useEffect(() => {
+    if (!geocoder || !locationQuery || !map) return
+    const g = geocoder
+    const ctrl = { cancelled: false }
+    void (async () => {
+      try {
+        const { results } = await g.geocode({ address: locationQuery })
+        if (ctrl.cancelled || results.length === 0) return
+        const loc = results[0].geometry.location
+        map.panTo({ lat: loc.lat(), lng: loc.lng() })
+        map.setZoom(locationZoom ?? CITY_ZOOM)
+      } catch {
+        return
+      }
+    })()
+    return () => {
+      ctrl.cancelled = true
+    }
+  }, [geocoder, locationQuery, locationZoom, map])
+
+  const fetchSuggestions = useCallback(
+    async (input: string) => {
+      if (!placesLib || input.length < 2) {
+        setSuggestions([])
+        return
+      }
+      try {
+        const result = await placesLib.AutocompleteSuggestion.fetchAutocompleteSuggestions({
+          input,
+          sessionToken
+        })
+        setSuggestions(result.suggestions)
+        setShowDropdown(true)
+      } catch {
+        setSuggestions([])
+      }
+    },
+    [placesLib, sessionToken]
+  )
+
+  const reverseGeocode = useCallback(
+    async (latLng: google.maps.LatLngLiteral) => {
+      if (!geocoder) return
+      try {
+        const { results } = await geocoder.geocode({ location: latLng })
+        if (results.length > 0) {
+          const address = results[0].formatted_address
+          setInputValue(address)
+          onChangeRef.current(address)
+        }
+      } catch {
+        return
+      }
+    },
+    [geocoder]
+  )
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value
+    setInputValue(val)
+    onChangeRef.current(val)
+
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => void fetchSuggestions(val), DEBOUNCE_MS)
+  }
+
+  const handleSelect = async (suggestion: google.maps.places.AutocompleteSuggestion) => {
+    const prediction = suggestion.placePrediction
+    if (!prediction) return
+
+    const place = prediction.toPlace()
+    await place.fetchFields({ fields: ['formattedAddress', 'location'] })
+
+    const address = place.formattedAddress ?? prediction.text.text
+    setInputValue(address)
+    onChangeRef.current(address)
+    setSuggestions([])
+    setShowDropdown(false)
+
+    if (place.location) {
+      setPosition({ lat: place.location.lat(), lng: place.location.lng() })
+    }
+
+    if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken())
+  }
+
+  const handleBlur = () => {
+    setTimeout(() => setShowDropdown(false), 150)
+  }
+
+  const handleMapClick = useCallback(
+    (e: MapMouseEvent) => {
+      if (disabled || !e.detail.latLng) return
+      const latLng = e.detail.latLng
+      setPosition(latLng)
+      void reverseGeocode(latLng)
+    },
+    [disabled, reverseGeocode]
+  )
+
+  const handleMarkerDragEnd = useCallback(
+    (e: google.maps.MapMouseEvent) => {
+      const latLng = e.latLng
+      if (!latLng) return
+      const pos = { lat: latLng.lat(), lng: latLng.lng() }
+      setPosition(pos)
+      void reverseGeocode(pos)
+    },
+    [reverseGeocode]
+  )
+
+  return (
+    <div className='flex flex-col gap-3'>
+      <div className='relative'>
+        <input
+          className={cn(inputBase, inputFocus, hasError && 'border-destructive')}
+          disabled={disabled}
+          onBlur={handleBlur}
+          onChange={handleInputChange}
+          onFocus={() => suggestions.length > 0 && setShowDropdown(true)}
+          placeholder={placeholder}
+          type='text'
+          value={inputValue}
+        />
+
+        {showDropdown && suggestions.length > 0 && (
+          <ul className='border-border bg-surface absolute z-50 mt-1 w-full overflow-hidden rounded-[10px] border shadow-md'>
+            {suggestions.map((suggestion) => (
+              <li key={suggestion.placePrediction?.placeId ?? suggestion.placePrediction?.text.text}>
+                <button
+                  className='text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors'
+                  onClick={() => void handleSelect(suggestion)}
+                  type='button'
+                >
+                  {suggestion.placePrediction?.text.text ?? ''}
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className='border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5'>
+        <Map
+          defaultCenter={DEFAULT_CENTER}
+          defaultZoom={5}
+          disableDefaultUI
+          gestureHandling='cooperative'
+          id={PICKER_MAP_ID}
+          mapId={(import.meta.env.VITE_GOOGLE_MAPS_MAP_ID as string | undefined) ?? 'DEMO_MAP_ID'}
+          onClick={handleMapClick}
+          style={{ height: '100%', width: '100%' }}
+        >
+          {position && <AdvancedMarker draggable={!disabled} onDragEnd={handleMarkerDragEnd} position={position} />}
+        </Map>
+      </div>
+    </div>
+  )
+}
+
+export const GoogleMapPicker = (props: GoogleMapPickerProps) => (
+  <APIProvider apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? ''} language='es' region='CO'>
+    <MapPickerContent {...props} />
+  </APIProvider>
+)

package/src/components/input.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+import { cn, inputBase, inputFocus } from '../utils'
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      className={cn(
+        inputBase,
+        inputFocus,
+        'file:border-0 file:bg-transparent file:text-base file:font-medium',
+        className
+      )}
+      onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+        const key = e.key
+        const allowedKeys = ['Backspace', 'Tab', 'Enter', 'Escape', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown']
+        if (allowedKeys.includes(key)) {
+          return
+        }
+        if (!(key >= '0' && key <= '9') && type === 'number') {
+          e.preventDefault()
+        }
+        if (type === 'onlyText') {
+          const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ ]*$/
+          if (!regex.test(key)) {
+            e.preventDefault()
+          }
+        }
+      }}
+      ref={ref}
+      type={type}
+      {...props}
+    />
+  )
+})
+Input.displayName = 'Input'
+
+export { Input }

package/src/components/label.tsx

@@ -0,0 +1,17 @@
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '../utils'
+
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/components/loading.tsx

@@ -0,0 +1,19 @@
+import { cn } from '../utils'
+import { Spinner } from './spinner'
+
+interface LoadingProps {
+  className?: string
+  isSpinner?: boolean
+}
+
+export function Loading({ className = '', isSpinner = true }: Readonly<LoadingProps>) {
+  return (
+    <div className={cn('relative flex min-h-screen items-center justify-center gap-6', className)}>
+      {isSpinner && (
+        <div className='absolute right-0 bottom-0 m-10'>
+          <Spinner />
+        </div>
+      )}
+    </div>
+  )
+}