@orsetra/shared-ui 1.1.8 → 1.1.10

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/project-selector-modal.tsx

@@ -10,6 +10,7 @@ import {
 } from "./dialog"
 import { Button } from "./button"
 import { Label } from "./label"
+import { Input } from "./input"
 import {
   Select,
   SelectContent,
@@ -29,11 +30,12 @@ export interface ProjectSelectorModalProps {
   open: boolean
   onOpenChange?: (open: boolean) => void
   getProjects: () => Promise<Project[]>
+  createProject: (name: string) => Promise<Project>
   storage: {
     getItem: (key: string) => string | null
     setItem: (key: string, value: string) => void
   }
-  storageKey?: string
+  storageKey: string
   doInit: () => void | Promise<void>
   title?: string
   description?: string
@@ -43,15 +45,17 @@ export function ProjectSelectorModal({
   open,
   onOpenChange,
   getProjects,
+  createProject,
   storage,
-  storageKey = "current-project",
+  storageKey,
   doInit,
-  title = "Select Project",
-  description = "Choose a project to continue. This will be used for all operations in this application.",
+  title = "Select Business Unit",
+  description = "Choose a business unit to continue. This will be used for all operations in this application.",
 }: ProjectSelectorModalProps) {
   const [projects, setProjects] = React.useState<Project[]>([])
   const [loading, setLoading] = React.useState(true)
   const [selectedProject, setSelectedProject] = React.useState<string>("")
+  const [newProjectName, setNewProjectName] = React.useState<string>("")
   const [submitting, setSubmitting] = React.useState(false)
   const [error, setError] = React.useState<string | null>(null)
 
@@ -88,6 +92,36 @@ export function ProjectSelectorModal({
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     
+    // If no projects exist, create a new one
+    if (projects.length === 0) {
+      if (!newProjectName.trim()) {
+        setError("Please enter a business unit name")
+        return
+      }
+
+      setSubmitting(true)
+      setError(null)
+
+      try {
+        // Create the new project
+        const newProject = await createProject(newProjectName.trim())
+        
+        // Save to storage
+        storage.setItem(storageKey, newProject.name)
+        
+        // Call doInit
+        await Promise.resolve(doInit())
+        
+        // Close modal
+        onOpenChange?.(false)
+      } catch (err) {
+        console.error("Failed to create project:", err)
+        setError(err instanceof Error ? err.message : "Failed to create business unit")
+        setSubmitting(false)
+      }
+      return
+    }
+    
     if (!selectedProject) {
       setError("Please select a project")
       return
@@ -127,54 +161,78 @@ export function ProjectSelectorModal({
           {loading ? (
             <div className="flex items-center justify-center py-8">
               <Loader2 className="h-6 w-6 animate-spin text-ibm-blue-60" />
-              <span className="ml-2 text-sm text-ibm-gray-70">Loading projects...</span>
-            </div>
-          ) : error ? (
-            <div className="rounded-none border border-red-200 bg-red-50 p-3 text-sm text-red-800">
-              {error}
+              <span className="ml-2 text-ibm-gray-70">Loading business units...</span>
             </div>
           ) : projects.length === 0 ? (
-            <div className="text-center py-8 text-sm text-ibm-gray-60">
-              No projects available
-            </div>
+            <>
+              {error && (
+                <div className="rounded-none border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+                  {error}
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label htmlFor="new-project">
+                  Business Unit Name <span className="text-red-600">*</span>
+                </Label>
+                <Input
+                  id="new-project"
+                  type="text"
+                  placeholder="Enter business unit name"
+                  value={newProjectName}
+                  onChange={(e) => setNewProjectName(e.target.value)}
+                  className="rounded-none"
+                  autoFocus
+                />
+                <p className="text-xs text-ibm-gray-60">
+                  No business units found. Create your first one to continue.
+                </p>
+              </div>
+            </>
           ) : (
-            <div className="space-y-2">
-              <Label htmlFor="project">
-                Project <span className="text-red-600">*</span>
-              </Label>
-              <Select value={selectedProject} onValueChange={setSelectedProject}>
-                <SelectTrigger id="project" className="rounded-none">
-                  <SelectValue placeholder="Select a project" />
-                </SelectTrigger>
-                <SelectContent className="rounded-none">
-                  {projects.map((project) => (
-                    <SelectItem key={project.name} value={project.name} className="rounded-none">
-                      <div className="flex flex-col">
-                        <span className="font-medium">{project.alias || project.name}</span>
-                        {project.description && (
-                          <span className="text-xs text-ibm-gray-60">{project.description}</span>
-                        )}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
+            <>
+              {error && (
+                <div className="rounded-none border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+                  {error}
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label htmlFor="project">
+                  Business Unit <span className="text-red-600">*</span>
+                </Label>
+                <Select value={selectedProject} onValueChange={setSelectedProject}>
+                  <SelectTrigger id="project" className="rounded-none">
+                    <SelectValue placeholder="Select a business unit" />
+                  </SelectTrigger>
+                  <SelectContent className="rounded-none">
+                    {projects.map((project) => (
+                      <SelectItem key={project.name} value={project.name} className="rounded-none">
+                        <div className="flex flex-col">
+                          <span className="font-medium">{project.alias || project.name}</span>
+                          {project.description && (
+                            <span className="text-xs text-ibm-gray-60">{project.description}</span>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </>
           )}
 
           <div className="flex items-center justify-end gap-3 pt-2">
             <Button
               type="submit"
               className="rounded-none"
-              disabled={submitting || loading || !selectedProject || projects.length === 0}
+              disabled={submitting || loading || (projects.length === 0 ? !newProjectName.trim() : !selectedProject)}
             >
               {submitting ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Initializing...
+                  {projects.length === 0 ? "Creating..." : "Initializing..."}
                 </>
               ) : (
-                "Continue"
+                projects.length === 0 ? "Create & Continue" : "Continue"
               )}
             </Button>
           </div>