@komensal/ui 0.1.0 → 0.2.1

package/src/components/form.tsx

@@ -1,138 +0,0 @@
-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

@@ -1,243 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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>
-  )
-}

package/src/components/otp-input.tsx

@@ -1,62 +0,0 @@
-import { OTPInput, OTPInputContext } from 'input-otp'
-import React from 'react'
-
-import { cn } from '../utils'
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
-    <OTPInput
-      className={cn('disabled:cursor-not-allowed', className)}
-      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
-      data-slot='input-otp'
-      {...props}
-    />
-  )
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div className={cn('flex items-center gap-2', className)} data-slot='input-otp-group' {...props} />
-}
-
-function InputOTPSlot({
-  className,
-  index,
-  ...props
-}: React.ComponentProps<'div'> & {
-  index: number
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext) as {
-    slots: { char: string | null; hasFakeCaret: boolean; isActive: boolean }[]
-  }
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {}
-
-  return (
-    <div
-      className={cn(
-        'border-border text-foreground relative flex h-14 w-12 items-center justify-center rounded-[10px] border text-xl font-medium transition-all outline-none',
-        char ? 'bg-brand-subtle' : 'bg-transparent',
-        'data-[active=true]:border-primary data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2',
-        'aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/40',
-        className
-      )}
-      data-active={isActive}
-      data-slot='input-otp-slot'
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='animate-caret-blink bg-foreground h-6 w-px duration-1000' />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot }

package/src/components/password-checklist.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { IoMdCheckmarkCircle, IoMdCloseCircle } from 'react-icons/io'
-
-import { PasswordRule } from '../types/password'
-import { cn } from '../utils'
-
-interface PasswordChecklistProps {
-  className?: string
-  rules: PasswordRule[]
-  value: string
-}
-
-export const PasswordChecklist = ({ className, rules, value }: PasswordChecklistProps) => {
-  if (rules.length === 0) return null
-
-  return (
-    <ul className={cn('flex flex-col gap-1', className)}>
-      {rules.map((rule) => {
-        const isMet = rule.test(value)
-        const Icon = (isMet ? IoMdCheckmarkCircle : IoMdCloseCircle) as React.FC<React.SVGProps<SVGSVGElement>>
-
-        return (
-          <li
-            className={cn(
-              'flex items-center gap-2 text-xs transition-colors',
-              isMet ? 'text-success' : 'text-inactive-text'
-            )}
-            key={rule.key}
-          >
-            <Icon aria-hidden='true' className='h-4 w-4 shrink-0' />
-            <span>{rule.label}</span>
-          </li>
-        )
-      })}
-    </ul>
-  )
-}

package/src/components/popover.tsx

@@ -1,31 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-import * as React from 'react'
-
-import { cn } from '../utils'
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverAnchor = PopoverPrimitive.Anchor
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ align = 'center', className, sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      align={align}
-      className={cn(
-        'text-foreground bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
-        className
-      )}
-      ref={ref}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }