@orsetra/shared-ui 1.1.9 → 1.1.11

package/components/ui/combobox.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronDown } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "./command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+
+export interface ComboboxOption {
+  label: string
+  value: string
+}
+
+interface ComboboxProps {
+  placeholder?: string
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string) => void
+  dataSource?: ComboboxOption[]
+  disabled?: boolean
+  id?: string
+  locale?: any
+  enableInput?: boolean
+}
+
+export function Combobox({
+  placeholder = "Select...",
+  value = "",
+  defaultValue = "",
+  onChange,
+  dataSource = [],
+  disabled = false,
+  id,
+  enableInput = false,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selected, setSelected] = React.useState<string>(value || defaultValue)
+  const [inputValue, setInputValue] = React.useState<string>(value || defaultValue)
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setSelected(value)
+      setInputValue(value)
+    }
+  }, [value])
+
+  const handleSelect = (currentValue: string) => {
+    const newValue = currentValue === selected ? "" : currentValue
+    setSelected(newValue)
+    setInputValue(newValue)
+    onChange?.(newValue)
+    setOpen(false)
+  }
+
+  const handleInputChange = (newValue: string) => {
+    setInputValue(newValue)
+    if (enableInput) {
+      setSelected(newValue)
+      onChange?.(newValue)
+    }
+  }
+
+  const getLabel = (value: string) => {
+    return dataSource.find((option) => option.value === value)?.label || value
+  }
+
+  const displayValue = selected ? getLabel(selected) : placeholder
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="secondary"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between h-10",
+            disabled && "opacity-50 cursor-not-allowed",
+            !selected && "text-gray-500"
+          )}
+          style={{ borderRadius: 0 }}
+        >
+          <span className="truncate">{displayValue}</span>
+          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start" style={{ borderRadius: 0 }}>
+        <Command>
+          <CommandInput 
+            placeholder={placeholder}
+            value={inputValue}
+            onValueChange={handleInputChange}
+          />
+          <CommandEmpty>
+            {enableInput && inputValue ? (
+              <div className="px-2 py-1.5 text-sm">
+                Press Enter to use "{inputValue}"
+              </div>
+            ) : (
+              "No results found."
+            )}
+          </CommandEmpty>
+          <CommandGroup className="max-h-64 overflow-auto">
+            {dataSource.map((option) => (
+              <CommandItem
+                key={option.value}
+                value={option.value}
+                onSelect={() => handleSelect(option.value)}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    selected === option.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/components/ui/index.ts

@@ -61,3 +61,6 @@ export { Textarea } from './textarea'
 export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './toast'
 export { ToggleGroup, ToggleGroupItem } from './toggle-group'
 export { Toggle } from './toggle'
+export { StringsInput } from './strings-input'
+export { KVInput } from './kv-input'
+export { NumbersInput } from './numbers-input'

package/components/ui/kv-input.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { Input } from "./input"
+import { Button } from "./button"
+import { X, Plus } from "lucide-react"
+
+interface KVPair {
+  key: string
+  value: string
+}
+
+interface KVInputProps {
+  value?: Record<string, string>
+  onChange?: (value: Record<string, string>) => void
+  disabled?: boolean
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+}
+
+export function KVInput({
+  value = {},
+  onChange,
+  disabled = false,
+  keyPlaceholder = "Key",
+  valuePlaceholder = "Value",
+}: KVInputProps) {
+  const [pairs, setPairs] = useState<KVPair[]>(() => {
+    const entries = Object.entries(value)
+    return entries.length > 0 ? entries.map(([key, value]) => ({ key, value })) : [{ key: "", value: "" }]
+  })
+
+  useEffect(() => {
+    if (value && Object.keys(value).length > 0) {
+      const newPairs = Object.entries(value).map(([key, val]) => ({ key, value: val }))
+      if (JSON.stringify(newPairs) !== JSON.stringify(pairs)) {
+        setPairs(newPairs)
+      }
+    }
+  }, [value])
+
+  const handleChange = (index: number, field: "key" | "value", newValue: string) => {
+    const newPairs = [...pairs]
+    newPairs[index][field] = newValue
+    setPairs(newPairs)
+    
+    const result: Record<string, string> = {}
+    newPairs.forEach(pair => {
+      if (pair.key) {
+        result[pair.key] = pair.value
+      }
+    })
+    onChange?.(result)
+  }
+
+  const handleAdd = () => {
+    setPairs([...pairs, { key: "", value: "" }])
+  }
+
+  const handleRemove = (index: number) => {
+    const newPairs = pairs.filter((_, i) => i !== index)
+    const finalPairs = newPairs.length > 0 ? newPairs : [{ key: "", value: "" }]
+    setPairs(finalPairs)
+    
+    const result: Record<string, string> = {}
+    finalPairs.forEach(pair => {
+      if (pair.key) {
+        result[pair.key] = pair.value
+      }
+    })
+    onChange?.(result)
+  }
+
+  return (
+    <div className="space-y-2">
+      {pairs.map((pair, index) => (
+        <div key={index} className="flex gap-2">
+          <Input
+            value={pair.key}
+            onChange={(e) => handleChange(index, "key", e.target.value)}
+            disabled={disabled}
+            placeholder={keyPlaceholder}
+            className="rounded-none flex-1"
+          />
+          <Input
+            value={pair.value}
+            onChange={(e) => handleChange(index, "value", e.target.value)}
+            disabled={disabled}
+            placeholder={valuePlaceholder}
+            className="rounded-none flex-1"
+          />
+          {pairs.length > 1 && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => handleRemove(index)}
+              disabled={disabled}
+              className="rounded-none h-9 w-9 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="secondary"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="rounded-none"
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Item
+      </Button>
+    </div>
+  )
+}

package/components/ui/multi-select.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { Check, X, ChevronDown } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "./command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+
+export interface MultiSelectOption {
+  label: string
+  value: string
+}
+
+interface MultiSelectProps {
+  placeholder?: string
+  value?: string[]
+  defaultValue?: string[]
+  onChange?: (value: string[]) => void
+  dataSource?: MultiSelectOption[]
+  disabled?: boolean
+  id?: string
+  locale?: any
+  mode?: string
+}
+
+export function MultiSelect({
+  placeholder = "Select items...",
+  value = [],
+  defaultValue = [],
+  onChange,
+  dataSource = [],
+  disabled = false,
+  id,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const [selected, setSelected] = React.useState<string[]>(value || defaultValue)
+
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setSelected(value)
+    }
+  }, [value])
+
+  const handleSelect = (currentValue: string) => {
+    const newSelected = selected.includes(currentValue)
+      ? selected.filter((item) => item !== currentValue)
+      : [...selected, currentValue]
+    
+    setSelected(newSelected)
+    onChange?.(newSelected)
+  }
+
+  const handleRemove = (valueToRemove: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    const newSelected = selected.filter((item) => item !== valueToRemove)
+    setSelected(newSelected)
+    onChange?.(newSelected)
+  }
+
+  const getLabel = (value: string) => {
+    return dataSource.find((option) => option.value === value)?.label || value
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="secondary"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between h-auto min-h-10",
+            disabled && "opacity-50 cursor-not-allowed"
+          )}
+          style={{ borderRadius: 0 }}
+        >
+          <div className="flex flex-wrap gap-1 flex-1">
+            {selected.length > 0 ? (
+              selected.map((item) => (
+                <Badge
+                  key={item}
+                  variant="secondary"
+                  className="mr-1"
+                >
+                  {getLabel(item)}
+                  {!disabled && (
+                    <button
+                      className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          handleRemove(item, e as any)
+                        }
+                      }}
+                      onMouseDown={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                      }}
+                      onClick={(e) => handleRemove(item, e)}
+                    >
+                      <X className="h-3 w-3 text-muted-foreground hover:text-foreground" />
+                    </button>
+                  )}
+                </Badge>
+              ))
+            ) : (
+              <span className="text-gray-500">{placeholder}</span>
+            )}
+          </div>
+          <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start" style={{ borderRadius: 0 }}>
+        <Command>
+          <CommandInput placeholder="Search..." />
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup className="max-h-64 overflow-auto">
+            {dataSource.map((option) => (
+              <CommandItem
+                key={option.value}
+                value={option.value}
+                onSelect={() => handleSelect(option.value)}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    selected.includes(option.value) ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/components/ui/numbers-input.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { Input } from "./input"
+import { Button } from "./button"
+import { X, Plus } from "lucide-react"
+
+interface NumbersInputProps {
+  value?: number[]
+  onChange?: (value: number[]) => void
+  disabled?: boolean
+  placeholder?: string
+}
+
+export function NumbersInput({
+  value = [],
+  onChange,
+  disabled = false,
+  placeholder = "Enter number",
+}: NumbersInputProps) {
+  const [items, setItems] = useState<number[]>(value.length > 0 ? value : [0])
+
+  useEffect(() => {
+    if (value && value.length > 0 && JSON.stringify(value) !== JSON.stringify(items)) {
+      setItems(value)
+    }
+  }, [value])
+
+  const handleChange = (index: number, newValue: string) => {
+    const numValue = newValue === "" ? 0 : Number(newValue)
+    const newItems = [...items]
+    newItems[index] = numValue
+    setItems(newItems)
+    onChange?.(newItems)
+  }
+
+  const handleAdd = () => {
+    const newItems = [...items, 0]
+    setItems(newItems)
+    onChange?.(newItems)
+  }
+
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index)
+    const finalItems = newItems.length > 0 ? newItems : [0]
+    setItems(finalItems)
+    onChange?.(finalItems)
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="flex gap-2">
+          <Input
+            type="number"
+            value={item}
+            onChange={(e) => handleChange(index, e.target.value)}
+            disabled={disabled}
+            placeholder={placeholder}
+            className="rounded-none flex-1"
+          />
+          {items.length > 1 && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => handleRemove(index)}
+              disabled={disabled}
+              className="rounded-none h-9 w-9 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="secondary"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="rounded-none"
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Item
+      </Button>
+    </div>
+  )
+}

package/components/ui/strings-input.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+import { Input } from "./input"
+import { Button } from "./button"
+import { X, Plus } from "lucide-react"
+
+interface StringsInputProps {
+  value?: string[]
+  onChange?: (value: string[]) => void
+  disabled?: boolean
+  placeholder?: string
+}
+
+export function StringsInput({
+  value = [],
+  onChange,
+  disabled = false,
+  placeholder = "Enter value",
+}: StringsInputProps) {
+  const [items, setItems] = useState<string[]>(value.length > 0 ? value : [""])
+
+  useEffect(() => {
+    if (value && value.length > 0 && JSON.stringify(value) !== JSON.stringify(items)) {
+      setItems(value)
+    }
+  }, [value])
+
+  const handleChange = (index: number, newValue: string) => {
+    const newItems = [...items]
+    newItems[index] = newValue
+    setItems(newItems)
+    onChange?.(newItems.filter(item => item !== ""))
+  }
+
+  const handleAdd = () => {
+    const newItems = [...items, ""]
+    setItems(newItems)
+  }
+
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index)
+    setItems(newItems.length > 0 ? newItems : [""])
+    onChange?.(newItems.filter(item => item !== ""))
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index} className="flex gap-2">
+          <Input
+            value={item}
+            onChange={(e) => handleChange(index, e.target.value)}
+            disabled={disabled}
+            placeholder={placeholder}
+            className="rounded-none flex-1"
+          />
+          {items.length > 1 && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => handleRemove(index)}
+              disabled={disabled}
+              className="rounded-none h-9 w-9 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="secondary"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="rounded-none"
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Item
+      </Button>
+    </div>
+  )
+}

package/index.ts

@@ -8,8 +8,20 @@ export { default as HttpClient, useHttpClient, ApiError } from './lib/http-clien
 // UI Components
 export * from './components/ui'
 
+// Extended Components for Dynamic Forms
+export * from './components/extends'
+
 // Layout Components
 export * from './components/layout'
 
 // Hooks
 export * from './hooks'
+
+// Context
+export * from './context'
+
+// Internationalization
+export { default as i18n } from './i18n'
+
+// Utilities (additional exports)
+export { locale } from './utils/locale'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@orsetra/shared-types": "^1.0.2",
+    "@orsetra/shared-types": "^1.0.4",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.1",