@orsetra/shared-ui 1.1.38 → 1.1.39

package/components/extends/index.ts

@@ -1,6 +1,6 @@
 // Extended UI Components for Dynamic Forms
-export { default as CamelRouteCode } from './CamelRouteCode'
-export type { ProjectItem, ContentItem } from './CamelRouteCode'
+// CamelRouteCode removed - causes SSR issues with Monaco Editor
+// Use local implementation in project-manager instead
 export { default as CPUNumber } from './CPUNumber'
 export { default as ClassStorageSelect } from './ClassStorageSelect'
 export { default as ClusterSelect } from './ClusterSelect'

package/components/ui/strings-input.tsx

@@ -18,66 +18,77 @@ export function StringsInput({
   disabled = false,
   placeholder = "Enter value",
 }: StringsInputProps) {
-  const [items, setItems] = useState<string[]>(value.length > 0 ? value : [""])
+  const [items, setItems] = useState<string[]>(value.filter(v => v !== ""))
+  const [inputValue, setInputValue] = useState("")
 
   useEffect(() => {
-    if (value && value.length > 0 && JSON.stringify(value) !== JSON.stringify(items)) {
-      setItems(value)
+    const filtered = value.filter(v => v !== "")
+    if (JSON.stringify(filtered) !== JSON.stringify(items)) {
+      setItems(filtered)
     }
   }, [value])
 
-  const handleChange = (index: number, newValue: string) => {
-    const newItems = [...items]
-    newItems[index] = newValue
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index)
     setItems(newItems)
-    onChange?.(newItems.filter(item => item !== ""))
+    onChange?.(newItems)
   }
 
   const handleAdd = () => {
-    const newItems = [...items, ""]
+    const trimmed = inputValue.trim()
+    if (!trimmed) return
+    const newItems = [...items, trimmed]
     setItems(newItems)
+    onChange?.(newItems)
+    setInputValue("")
   }
 
-  const handleRemove = (index: number) => {
-    const newItems = items.filter((_, i) => i !== index)
-    setItems(newItems.length > 0 ? newItems : [""])
-    onChange?.(newItems.filter(item => item !== ""))
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      handleAdd()
+    }
   }
 
   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)}
+        <div key={index} className="flex items-center gap-2">
+          <span className="flex-1 text-sm px-3 py-2 border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate">
+            {item}
+          </span>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => handleRemove(index)}
             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>
-          )}
+            className="rounded-none h-9 w-9 p-0 shrink-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 className="flex gap-2">
+        <Input
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          placeholder={placeholder}
+          className="rounded-none flex-1"
+        />
+        <Button
+          type="button"
+          variant="secondary"
+          leftIcon={<Plus className="h-4 w-4 mr-1" />}
+          onClick={handleAdd}
+          disabled={disabled || !inputValue.trim()}
+          className="rounded-none shrink-0"
+        >
+          
+          Add
+        </Button>
+      </div>
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.1.38",
+  "version": "1.1.39",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",