@object-ui/components 3.3.0 → 3.3.1

package/src/custom/empty.tsx

@@ -1,112 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../lib/utils"
-
-function Empty({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty"
-      className={cn(
-        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-header"
-      className={cn(
-        "flex max-w-sm flex-col items-center gap-2 text-center",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const emptyMediaVariants = cva(
-  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function EmptyMedia({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
-  return (
-    <div
-      data-slot="empty-icon"
-      data-variant={variant}
-      className={cn(emptyMediaVariants({ variant, className }))}
-      {...props}
-    />
-  )
-}
-
-function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-title"
-      className={cn("text-lg font-medium tracking-tight", className)}
-      {...props}
-    />
-  )
-}
-
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <div
-      data-slot="empty-description"
-      className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="empty-content"
-      className={cn(
-        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Empty,
-  EmptyHeader,
-  EmptyTitle,
-  EmptyDescription,
-  EmptyContent,
-  EmptyMedia,
-}

package/src/custom/field.tsx

@@ -1,81 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from "react"
-import { Slot as SlotPrimitive } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../lib/utils"
-import { Label } from "../ui/label"
-
-const fieldVariants = cva("space-y-2")
-
-export interface FieldProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof fieldVariants> {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  error?: React.ReactNode
-  required?: boolean
-  htmlFor?: string
-}
-
-const Field = React.forwardRef<HTMLDivElement, FieldProps>(
-  ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
-    const id = React.useId()
-    const fieldId = htmlFor || id
-    const descriptionId = `${fieldId}-description`
-    const errorId = `${fieldId}-error`
-
-    return (
-      <div ref={ref} className={cn(fieldVariants(), className)} {...props}>
-        {label && (
-          <Label 
-            htmlFor={fieldId}
-            className={cn(error && "text-destructive", required && "after:content-['*'] after:ml-0.5 after:text-destructive")}
-          >
-            {label}
-          </Label>
-        )}
-        
-        <SlotPrimitive 
-          id={fieldId}
-          aria-describedby={
-            [description && descriptionId, error && errorId]
-              .filter(Boolean)
-              .join(" ") || undefined
-          }
-          aria-invalid={!!error}
-        >
-          {children}
-        </SlotPrimitive>
-
-        {description && !error && (
-          <p
-            id={descriptionId}
-            className="text-[0.8rem] text-muted-foreground"
-          >
-            {description}
-          </p>
-        )}
-
-        {error && (
-          <p
-            id={errorId}
-            className="text-[0.8rem] font-medium text-destructive"
-          >
-            {error}
-          </p>
-        )}
-      </div>
-    )
-  }
-)
-Field.displayName = "Field"
-
-export { Field }

package/src/custom/filter-builder.tsx

@@ -1,418 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-"use client"
-
-import * as React from "react"
-import { X, Plus, Trash2 } from "lucide-react"
-
-import { cn } from "../lib/utils"
-import { Button } from "../ui/button"
-import { Checkbox } from "../ui/checkbox"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
-import { Input } from "../ui/input"
-
-export interface FilterCondition {
-  id: string
-  field: string
-  operator: string
-  value: string | number | boolean | (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"]
-const lookupOperators = ["equals", "notEquals", "in", "notIn", "isEmpty", "isNotEmpty"]
-
-/** Field types that share the same operator/input behavior as number (numeric comparison operators, number input) */
-const numberLikeTypes = ["number", "currency", "percent", "rating"]
-/** Field types that share the same operator/input behavior as date (before/after operators, date/datetime/time input) */
-const dateLikeTypes = ["date", "datetime", "time"]
-/** Field types that use select operators (equals/in/notIn) and render dropdown or checkbox list when options provided */
-const selectLikeTypes = ["select", "status"]
-/** Relational/reference field types that use lookup operators (equals/in/notIn) and render dropdown or checkbox list when options provided */
-const lookupLikeTypes = ["lookup", "master_detail", "user", "owner"]
-
-/** Normalize a filter value into an array for multi-select scenarios */
-function normalizeToArray(value: FilterCondition["value"]): (string | number | boolean)[] {
-  if (Array.isArray(value)) return value
-  if (value !== undefined && value !== null && value !== "") return [value as string | number | boolean]
-  return []
-}
-
-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"
-
-    if (numberLikeTypes.includes(fieldType)) {
-      return defaultOperators.filter((op) => numberOperators.includes(op.value))
-    }
-    if (fieldType === "boolean") {
-      return defaultOperators.filter((op) => booleanOperators.includes(op.value))
-    }
-    if (dateLikeTypes.includes(fieldType)) {
-      return defaultOperators.filter((op) => dateOperators.includes(op.value))
-    }
-    if (selectLikeTypes.includes(fieldType)) {
-      return defaultOperators.filter((op) => selectOperators.includes(op.value))
-    }
-    if (lookupLikeTypes.includes(fieldType)) {
-      return defaultOperators.filter((op) => lookupOperators.includes(op.value))
-    }
-    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"
-    
-    if (numberLikeTypes.includes(fieldType)) return "number"
-    if (fieldType === "date") return "date"
-    if (fieldType === "datetime") return "datetime-local"
-    if (fieldType === "time") return "time"
-    return "text"
-  }
-
-  const renderValueInput = (condition: FilterCondition) => {
-    const field = fields.find((f) => f.value === condition.field)
-    const isMultiOperator = ["in", "notIn"].includes(condition.operator)
-    
-    // For select/lookup fields with options and multi-select operator (in/notIn)
-    if (field?.options && isMultiOperator) {
-      const selectedValues = normalizeToArray(condition.value)
-      return (
-        <div className="max-h-40 overflow-y-auto space-y-0.5 border rounded-md p-2">
-          {field.options.map((opt) => {
-            const isChecked = selectedValues.map(String).includes(String(opt.value))
-            return (
-              <label
-                key={opt.value}
-                className={cn(
-                  "flex items-center gap-2 text-sm py-1 px-1.5 rounded cursor-pointer",
-                  isChecked ? "bg-primary/5 text-primary" : "hover:bg-muted",
-                )}
-              >
-                <Checkbox
-                  checked={isChecked}
-                  onCheckedChange={(checked) => {
-                    const next = checked
-                      ? [...selectedValues, opt.value]
-                      : selectedValues.filter((v) => String(v) !== String(opt.value))
-                    updateCondition(condition.id, { value: next })
-                  }}
-                />
-                <span className="truncate">{opt.label}</span>
-              </label>
-            )
-          })}
-        </div>
-      )
-    }
-
-    // For select/lookup fields with options (single select)
-    if (field?.options && (selectLikeTypes.includes(field.type || "") || lookupLikeTypes.includes(field.type || ""))) {
-      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 (numberLikeTypes.includes(field?.type || "") && newValue !== "") {
-        convertedValue = parseFloat(newValue) || 0
-      } else if (dateLikeTypes.includes(field?.type || "")) {
-        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"
-              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/custom/index.ts

@@ -1,21 +0,0 @@
-export * from './button-group';
-export * from './combobox';
-export * from './config-row';
-export * from './config-field-renderer';
-export * from './config-panel-renderer';
-export * from './date-picker';
-export * from './empty';
-export * from './field';
-export * from './filter-builder';
-export * from './input-group';
-export * from './item';
-export * from './kbd';
-export * from './native-select';
-export * from './navigation-overlay';
-export * from './section-header';
-export * from './spinner';
-export * from './sort-builder';
-export * from './action-param-dialog';
-export * from './view-skeleton';
-export * from './view-states';
-export * from './mobile-dialog-content';

package/src/custom/input-group.tsx

@@ -1,53 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from "react"
-import { cn } from "../lib/utils"
-import { Input } from "../ui/input"
-import { Button } from "../ui/button"
-
-export interface InputGroupProps extends React.ComponentProps<"div"> {
-  startContent?: React.ReactNode
-  endContent?: React.ReactNode
-}
-
-const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
-  ({ className, startContent, endContent, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex w-full items-center rounded-md border border-input bg-transparent ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          "has-[[data-invalid]]:border-destructive",
-          className
-        )}
-        {...props}
-      >
-        {startContent && (
-          <div className="flex items-center px-3 text-muted-foreground bg-muted/50 border-r h-full self-stretch rounded-l-md">
-            {startContent}
-          </div>
-        )}
-        
-        {/* We need to process children to remove their default borders/rings if they are Inputs */}
-        <div className="flex-1 relative [&_input]:border-0 [&_input]:shadow-none [&_input]:focus-visible:ring-0 [&_input]:bg-transparent">
-          {children}
-        </div>
-
-        {endContent && (
-          <div className="flex items-center px-3 text-muted-foreground bg-muted/50 border-l h-full self-stretch rounded-r-md">
-            {endContent}
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-InputGroup.displayName = "InputGroup"
-
-export { InputGroup }