@object-ui/components 0.3.0

package/src/ui/filter-builder.tsx

@@ -0,0 +1,359 @@
+"use client"
+
+import * as React from "react"
+import { X, Plus, Trash2 } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+import { Input } from "./input"
+
+export interface FilterCondition {
+  id: string
+  field: string
+  operator: string
+  value: string | number | boolean
+}
+
+export interface FilterGroup {
+  id: string
+  logic: "and" | "or"
+  conditions: FilterCondition[]
+}
+
+export interface FilterBuilderProps {
+  fields?: Array<{ 
+    value: string
+    label: string
+    type?: string
+    options?: Array<{ value: string; label: string }> // For select fields
+  }>
+  value?: FilterGroup
+  onChange?: (value: FilterGroup) => void
+  className?: string
+  showClearAll?: boolean
+}
+
+const defaultOperators = [
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "contains", label: "Contains" },
+  { value: "notContains", label: "Does not contain" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" },
+  { value: "greaterThan", label: "Greater than" },
+  { value: "lessThan", label: "Less than" },
+  { value: "greaterOrEqual", label: "Greater than or equal" },
+  { value: "lessOrEqual", label: "Less than or equal" },
+  { value: "before", label: "Before" },
+  { value: "after", label: "After" },
+  { value: "between", label: "Between" },
+  { value: "in", label: "In" },
+  { value: "notIn", label: "Not in" },
+]
+
+const textOperators = ["equals", "notEquals", "contains", "notContains", "isEmpty", "isNotEmpty"]
+const numberOperators = ["equals", "notEquals", "greaterThan", "lessThan", "greaterOrEqual", "lessOrEqual", "isEmpty", "isNotEmpty"]
+const booleanOperators = ["equals", "notEquals"]
+const dateOperators = ["equals", "notEquals", "before", "after", "between", "isEmpty", "isNotEmpty"]
+const selectOperators = ["equals", "notEquals", "in", "notIn", "isEmpty", "isNotEmpty"]
+
+function FilterBuilder({
+  fields = [],
+  value,
+  onChange,
+  className,
+  showClearAll = true,
+}: FilterBuilderProps) {
+  const [filterGroup, setFilterGroup] = React.useState<FilterGroup>(
+    value || {
+      id: "root",
+      logic: "and",
+      conditions: [],
+    }
+  )
+
+  React.useEffect(() => {
+    if (value && JSON.stringify(value) !== JSON.stringify(filterGroup)) {
+      setFilterGroup(value)
+    }
+  }, [value])
+
+  const handleChange = (newGroup: FilterGroup) => {
+    setFilterGroup(newGroup)
+    onChange?.(newGroup)
+  }
+
+  const addCondition = () => {
+    const newCondition: FilterCondition = {
+      id: crypto.randomUUID(),
+      field: fields[0]?.value || "",
+      operator: "equals",
+      value: "",
+    }
+    handleChange({
+      ...filterGroup,
+      conditions: [...filterGroup.conditions, newCondition],
+    })
+  }
+
+  const removeCondition = (conditionId: string) => {
+    handleChange({
+      ...filterGroup,
+      conditions: filterGroup.conditions.filter((c) => c.id !== conditionId),
+    })
+  }
+
+  const clearAllConditions = () => {
+    handleChange({
+      ...filterGroup,
+      conditions: [],
+    })
+  }
+
+  const updateCondition = (conditionId: string, updates: Partial<FilterCondition>) => {
+    handleChange({
+      ...filterGroup,
+      conditions: filterGroup.conditions.map((c) =>
+        c.id === conditionId ? { ...c, ...updates } : c
+      ),
+    })
+  }
+
+  const toggleLogic = () => {
+    handleChange({
+      ...filterGroup,
+      logic: filterGroup.logic === "and" ? "or" : "and",
+    })
+  }
+
+  const getOperatorsForField = (fieldValue: string) => {
+    const field = fields.find((f) => f.value === fieldValue)
+    const fieldType = field?.type || "text"
+
+    switch (fieldType) {
+      case "number":
+        return defaultOperators.filter((op) => numberOperators.includes(op.value))
+      case "boolean":
+        return defaultOperators.filter((op) => booleanOperators.includes(op.value))
+      case "date":
+        return defaultOperators.filter((op) => dateOperators.includes(op.value))
+      case "select":
+        return defaultOperators.filter((op) => selectOperators.includes(op.value))
+      case "text":
+      default:
+        return defaultOperators.filter((op) => textOperators.includes(op.value))
+    }
+  }
+
+  const needsValueInput = (operator: string) => {
+    return !["isEmpty", "isNotEmpty"].includes(operator)
+  }
+
+  const getInputType = (fieldValue: string) => {
+    const field = fields.find((f) => f.value === fieldValue)
+    const fieldType = field?.type || "text"
+    
+    switch (fieldType) {
+      case "number":
+        return "number"
+      case "date":
+        return "date"
+      default:
+        return "text"
+    }
+  }
+
+  const renderValueInput = (condition: FilterCondition) => {
+    const field = fields.find((f) => f.value === condition.field)
+    
+    // For select fields with options
+    if (field?.type === "select" && field.options) {
+      return (
+        <Select
+          value={String(condition.value || "")}
+          onValueChange={(value) =>
+            updateCondition(condition.id, { value })
+          }
+        >
+          <SelectTrigger className="h-9 text-sm">
+            <SelectValue placeholder="Select value" />
+          </SelectTrigger>
+          <SelectContent>
+            {field.options.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )
+    }
+
+    // For boolean fields
+    if (field?.type === "boolean") {
+      return (
+        <Select
+          value={String(condition.value || "")}
+          onValueChange={(value) =>
+            updateCondition(condition.id, { value: value === "true" })
+          }
+        >
+          <SelectTrigger className="h-9 text-sm">
+            <SelectValue placeholder="Select value" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="true">True</SelectItem>
+            <SelectItem value="false">False</SelectItem>
+          </SelectContent>
+        </Select>
+      )
+    }
+
+    // Default input for text, number, date
+    const inputType = getInputType(condition.field)
+    
+    // Format value based on field type
+    const formatValue = () => {
+      if (!condition.value) return ""
+      if (inputType === "date" && typeof condition.value === "string") {
+        // Ensure date is in YYYY-MM-DD format
+        return condition.value.split('T')[0]
+      }
+      return String(condition.value)
+    }
+    
+    // Handle value change with proper type conversion
+    const handleValueChange = (newValue: string) => {
+      let convertedValue: string | number | boolean = newValue
+      
+      if (field?.type === "number" && newValue !== "") {
+        convertedValue = parseFloat(newValue) || 0
+      } else if (field?.type === "date") {
+        convertedValue = newValue // Keep as ISO string
+      }
+      
+      updateCondition(condition.id, { value: convertedValue })
+    }
+    
+    return (
+      <Input
+        type={inputType}
+        className="h-9 text-sm"
+        placeholder="Value"
+        value={formatValue()}
+        onChange={(e) => handleValueChange(e.target.value)}
+      />
+    )
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">Where</span>
+          {filterGroup.conditions.length > 1 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleLogic}
+              className="h-7 text-xs"
+            >
+              {filterGroup.logic.toUpperCase()}
+            </Button>
+          )}
+        </div>
+        {showClearAll && filterGroup.conditions.length > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearAllConditions}
+            className="h-7 text-xs text-muted-foreground hover:text-destructive"
+          >
+            <Trash2 className="h-3 w-3 mr-1" />
+            Clear all
+          </Button>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        {filterGroup.conditions.map((condition) => (
+          <div key={condition.id} className="flex items-start gap-2">
+            <div className="flex-1 grid grid-cols-12 gap-2">
+              <div className="col-span-4">
+                <Select
+                  value={condition.field}
+                  onValueChange={(value) =>
+                    updateCondition(condition.id, { field: value })
+                  }
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="Select field" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fields.map((field) => (
+                      <SelectItem key={field.value} value={field.value}>
+                        {field.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="col-span-4">
+                <Select
+                  value={condition.operator}
+                  onValueChange={(value) =>
+                    updateCondition(condition.id, { operator: value })
+                  }
+                >
+                  <SelectTrigger className="h-9 text-sm">
+                    <SelectValue placeholder="Operator" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {getOperatorsForField(condition.field).map((op) => (
+                      <SelectItem key={op.value} value={op.value}>
+                        {op.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {needsValueInput(condition.operator) && (
+                <div className="col-span-4">
+                  {renderValueInput(condition)}
+                </div>
+              )}
+            </div>
+
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="h-9 w-9 shrink-0"
+              onClick={() => removeCondition(condition.id)}
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Remove condition</span>
+            </Button>
+          </div>
+        ))}
+      </div>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={addCondition}
+        className="h-8"
+        disabled={fields.length === 0}
+      >
+        <Plus className="h-3 w-3" />
+        Add filter
+      </Button>
+    </div>
+  )
+}
+
+FilterBuilder.displayName = "FilterBuilder"
+
+export { FilterBuilder }

package/src/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import type * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "../lib/utils"
+import { Label } from "./label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+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 { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/src/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "../lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src/ui/index.ts

@@ -0,0 +1,56 @@
+export * from './accordion';
+export * from './alert-dialog';
+export * from './alert';
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button-group';
+export * from './button';
+export * from './calendar';
+export * from './calendar-view';
+export * from './card';
+export * from './carousel';
+export * from './chatbot';
+export * from './checkbox';
+export * from './collapsible';
+export * from './command';
+export * from './context-menu';
+export * from './dialog';
+export * from './drawer';
+export * from './dropdown-menu';
+export * from './empty';
+export * from './field';
+export * from './filter-builder';
+export * from './form';
+export * from './hover-card';
+export * from './input-group';
+export * from './input-otp';
+export * from './input';
+export * from './item';
+export * from './kbd';
+export * from './label';
+export * from './menubar';
+export * from './navigation-menu';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
+export * from './select';
+export * from './separator';
+export * from './sheet';
+export * from './sidebar';
+export * from './skeleton';
+export * from './slider';
+export * from './sonner';
+export * from './spinner';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './textarea';
+export * from './timeline';
+export * from './toggle-group';
+export * from './toggle';
+export * from './tooltip';