@orsetra/shared-ui 1.0.12 → 1.0.13

package/components/ui/asset-logo.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { FileCode, Package, Boxes, Pencil } from "lucide-react"
+import { ImageCropDialog } from "./image-crop-dialog"
+
+// Get icon for asset type
+export const getAssetIcon = (type?: string) => {
+  if (!type) return Boxes
+  if (type.startsWith('operation')) return FileCode
+  if (type.startsWith('component')) return Package
+  return Boxes
+}
+
+// Get color for asset type
+export const getAssetColor = (type?: string) => {
+  if (!type) return 'text-purple-600 bg-purple-50'
+  if (type.startsWith('operation')) return 'text-blue-600 bg-blue-50'
+  if (type.startsWith('component')) return 'text-green-600 bg-green-50'
+  return 'text-purple-600 bg-purple-50'
+}
+
+interface AssetLogoProps {
+  type: string
+  size?: 'sm' | 'md' | 'lg'
+  editable?: boolean
+  logoUrl?: string | null
+  onLogoChange?: (logoBase64: string) => void
+}
+
+export function AssetLogo({ type, size = 'md', editable = false, logoUrl, onLogoChange }: AssetLogoProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [showCropDialog, setShowCropDialog] = useState(false)
+  const [tempImageSrc, setTempImageSrc] = useState<string>("")
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const Icon = getAssetIcon(type)
+  const colorClass = getAssetColor(type)
+  
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16'
+  }
+  
+  const iconSizes = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8'
+  }
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = () => {
+        setTempImageSrc(reader.result as string)
+        setShowCropDialog(true)
+      }
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const handleCropComplete = (croppedImageBase64: string) => {
+    if (onLogoChange) {
+      onLogoChange(croppedImageBase64)
+    }
+  }
+
+  const handleEditClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <>
+      <div
+        className={`${sizeClasses[size]} rounded-full ${!logoUrl ? colorClass : 'bg-white border-2 border-gray-200'} flex items-center justify-center flex-shrink-0 relative group cursor-pointer`}
+        onMouseEnter={() => editable && setIsHovered(true)}
+        onMouseLeave={() => editable && setIsHovered(false)}
+        onClick={editable ? handleEditClick : undefined}
+      >
+        {logoUrl ? (
+          <img 
+            src={logoUrl} 
+            alt="Asset logo" 
+            className="w-full h-full rounded-full object-cover"
+          />
+        ) : (
+          <Icon className={iconSizes[size]} />
+        )}
+        
+        {editable && isHovered && (
+          <div className="absolute inset-0 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
+            <Pencil className="h-4 w-4 text-white" />
+          </div>
+        )}
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileSelect}
+        className="hidden"
+      />
+
+      {showCropDialog && (
+        <ImageCropDialog
+          open={showCropDialog}
+          onClose={() => setShowCropDialog(false)}
+          imageSrc={tempImageSrc}
+          onCropComplete={handleCropComplete}
+        />
+      )}
+    </>
+  )
+}

package/components/ui/assets-header.tsx

@@ -20,30 +20,33 @@ export function AssetsHeader({
   subtitle,
 }: AssetsHeaderProps) {
   return (
-    <div className="border-b bg-white flex items-center justify-between px-3 py-3 sticky top-0 z-10">
-      {/* Left side - Back link, Logo and Title */}
-      <div className="flex items-center gap-3">
-        {backLink && (
-          <Link href={backLink}>
-            <ArrowLeft className="h-5 w-5 text-text-secondary" />
-          </Link>
-        )}
-        {logo && <div className="flex-shrink-0">{logo}</div>}
-        <div className="flex flex-col">
-          {typeof title === 'string' ? (
-            <h2 className="text-base font-semibold text-text-primary">{title}</h2>
-          ) : (
-            title
-          )}
-          {subtitle && (
-            <p className="text-xs text-gray-500 mt-0.5">{subtitle}</p>
+    <div className="border-b bg-white sticky top-0 z-10">
+      {/* Mobile: Stack vertically, Desktop: Horizontal */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-4 py-3 gap-3 sm:gap-0">
+        {/* Left side - Back link, Logo and Title */}
+        <div className="flex items-center gap-3 min-w-0">
+          {backLink && (
+            <Link href={backLink} className="flex-shrink-0">
+              <ArrowLeft className="h-5 w-5 text-text-secondary" />
+            </Link>
           )}
+          {logo && <div className="flex-shrink-0">{logo}</div>}
+          <div className="flex flex-col min-w-0">
+            {typeof title === 'string' ? (
+              <h2 className="text-sm sm:text-base font-semibold text-text-primary truncate">{title}</h2>
+            ) : (
+              title
+            )}
+            {subtitle && (
+              <p className="text-xs text-gray-500 mt-0.5 truncate">{subtitle}</p>
+            )}
+          </div>
         </div>
-      </div>
 
-      {/* Right side - Actions */}
-      <div className="flex items-center justify-end gap-2 py-2 pr-3">
-        {actions}
+        {/* Right side - Actions */}
+        <div className="flex items-center justify-start sm:justify-end gap-2 flex-wrap">
+          {actions}
+        </div>
       </div>
     </div>
   )

package/components/ui/editable-title.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Pencil, Check, X } from "lucide-react"
+import { Input } from "./input"
+import { Button } from "./button"
+
+interface EditableTitleProps {
+  value: string
+  onSave: (newValue: string) => void
+  className?: string
+}
+
+export function EditableTitle({ value, onSave, className = "" }: EditableTitleProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [editValue, setEditValue] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [isEditing])
+
+  const handleSave = () => {
+    if (editValue.trim() && editValue !== value) {
+      onSave(editValue.trim())
+    }
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    setEditValue(value)
+    setIsEditing(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSave()
+    } else if (e.key === 'Escape') {
+      handleCancel()
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <div className="flex items-center gap-2">
+        <Input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className="h-8 min-w-[300px]"
+        />
+        <Button
+          size="sm"
+          variant="default"
+          onClick={handleSave}
+          className="h-8 w-8 p-0"
+        >
+          <Check className="h-4 w-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={handleCancel}
+          className="h-8 w-8 p-0"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-2 group cursor-pointer ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => setIsEditing(true)}
+    >
+      <h2 className="text-base font-semibold text-text-primary">{value}</h2>
+      {isHovered && (
+        <Pencil className="h-3 w-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+      )}
+    </div>
+  )
+}

package/components/ui/image-crop-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import Cropper from "react-easy-crop"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "./dialog"
+import { Button } from "./button"
+import { Slider } from "./slider"
+
+interface ImageCropDialogProps {
+  open: boolean
+  onClose: () => void
+  imageSrc: string
+  onCropComplete: (croppedImageBase64: string) => void
+}
+
+interface Area {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const createImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image()
+    image.addEventListener('load', () => resolve(image))
+    image.addEventListener('error', (error) => reject(error))
+    image.src = url
+  })
+
+async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string> {
+  const image = await createImage(imageSrc)
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) {
+    throw new Error('No 2d context')
+  }
+
+  // Set canvas size to a square (optimized size for logo)
+  const size = 128
+  canvas.width = size
+  canvas.height = size
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    size,
+    size
+  )
+
+  // Use JPEG with quality 0.8 for better compression
+  // Falls back to PNG if the image has transparency
+  let dataUrl = canvas.toDataURL('image/jpeg', 0.8)
+  
+  // If the compressed image is still too large (>50KB), reduce quality further
+  if (dataUrl.length > 50000) {
+    dataUrl = canvas.toDataURL('image/jpeg', 0.6)
+  }
+  
+  return dataUrl
+}
+
+export function ImageCropDialog({ open, onClose, imageSrc, onCropComplete }: ImageCropDialogProps) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const onCropChange = useCallback((crop: { x: number; y: number }) => {
+    setCrop(crop)
+  }, [])
+
+  const onZoomChange = useCallback((zoom: number) => {
+    setZoom(zoom)
+  }, [])
+
+  const onCropCompleteCallback = useCallback(
+    (_croppedArea: Area, croppedAreaPixels: Area) => {
+      setCroppedAreaPixels(croppedAreaPixels)
+    },
+    []
+  )
+
+  const handleSave = async () => {
+    if (!croppedAreaPixels) return
+
+    setIsSaving(true)
+    try {
+      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels)
+      onCropComplete(croppedImage)
+      onClose()
+    } catch (error) {
+      console.error('Error cropping image:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Crop Image</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="relative h-[400px] bg-ibm-gray-20 rounded-lg">
+            <Cropper
+              image={imageSrc}
+              crop={crop}
+              zoom={zoom}
+              aspect={1}
+              cropShape="round"
+              showGrid={false}
+              onCropChange={onCropChange}
+              onZoomChange={onZoomChange}
+              onCropComplete={onCropCompleteCallback}
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Zoom</label>
+            <Slider
+              value={[zoom]}
+              onValueChange={(value) => setZoom(value[0])}
+              min={1}
+              max={3}
+              step={0.1}
+              className="w-full"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="secondary"
+            onClick={onClose}
+            disabled={isSaving}
+            className="rounded-none"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="rounded-none"
+          >
+            {isSaving ? "Saving..." : "OK"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/ui/index.ts

@@ -11,8 +11,12 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tool
 export { PageHeader } from './page-header'
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from './chart'
 export { SearchInput } from './search-input'
+export { AssetsHeader } from './assets-header'
+export { AssetLogo, getAssetIcon, getAssetColor } from './asset-logo'
+export { EditableTitle } from './editable-title'
+export { ImageCropDialog } from './image-crop-dialog'
 // Note: The following components are not exported as they depend on app-specific services or models:
-// - AssetsHeader, CertificateEditor, EnvironmentSettings, EnvironmentVariablesConfig
+// - CertificateEditor, EnvironmentSettings, EnvironmentVariablesConfig
 // - FileImport, ProcessStatus, ResourceSettings, SecretExplorer, SecretPropertiesEditor, SelectedAsset
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion'
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './alert-dialog'

package/package.json

@@ -1,94 +1,95 @@
-{
-  "name": "@orsetra/shared-ui",
-  "version": "1.0.12",
-  "description": "Shared UI components for Orsetra platform",
-  "main": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": "./index.ts",
-    "./components/ui": "./components/ui/index.ts",
-    "./components/layout": "./components/layout/index.ts",
-    "./hooks": "./hooks/index.ts",
-    "./lib/*": "./lib/*.ts"
-  },
-  "files": [
-    "index.ts",
-    "components",
-    "hooks",
-    "lib",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/orsetra/console-ui.git",
-    "directory": "packages/shared-ui"
-  },
-  "keywords": [
-    "react",
-    "components",
-    "ui",
-    "orsetra",
-    "radix-ui",
-    "tailwind"
-  ],
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "next": "^14.0.0 || ^15.0.0"
-  },
-  "dependencies": {
-    "react-avatar": "^5.0.3",
-    "react-hook-form": "^7.54.0",
-    "react-resizable-panels": "^2.1.7",
-    "@hookform/resolvers": "^3.9.1",
-    "zod": "^3.24.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.5",
-    "class-variance-authority": "^0.7.1",
-    "lucide-react": "^0.454.0",
-    "react-day-picker": "8.10.1",
-    "embla-carousel-react": "8.5.1",
-    "cmdk": "1.0.4",
-    "recharts": "^2.15.0",
-    "date-fns": "4.1.0",
-    "input-otp": "1.4.1",
-    "vaul": "^1.1.1",
-    "next-themes": "^0.4.4",
-    "sonner": "^1.7.1",
-    "@radix-ui/react-accordion": "1.2.2",
-    "@radix-ui/react-alert-dialog": "1.1.4",
-    "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-avatar": "1.1.2",
-    "@radix-ui/react-checkbox": "1.1.3",
-    "@radix-ui/react-collapsible": "1.1.2",
-    "@radix-ui/react-context-menu": "2.2.4",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-hover-card": "1.1.4",
-    "@radix-ui/react-label": "2.1.1",
-    "@radix-ui/react-menubar": "1.1.4",
-    "@radix-ui/react-navigation-menu": "1.2.3",
-    "@radix-ui/react-popover": "1.1.4",
-    "@radix-ui/react-progress": "1.1.1",
-    "@radix-ui/react-radio-group": "1.2.2",
-    "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.4",
-    "@radix-ui/react-separator": "1.1.1",
-    "@radix-ui/react-slider": "1.2.2",
-    "@radix-ui/react-slot": "1.1.1",
-    "@radix-ui/react-switch": "1.1.2",
-    "@radix-ui/react-tabs": "1.1.2",
-    "@radix-ui/react-toast": "1.2.4",
-    "@radix-ui/react-toggle": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.6"
-  },
-  "devDependencies": {
-    "@types/react": "^19",
-    "next": "^15.0.0",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "@orsetra/shared-ui",
+  "version": "1.0.13",
+  "description": "Shared UI components for Orsetra platform",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./components/ui": "./components/ui/index.ts",
+    "./components/layout": "./components/layout/index.ts",
+    "./hooks": "./hooks/index.ts",
+    "./lib/*": "./lib/*.ts"
+  },
+  "files": [
+    "index.ts",
+    "components",
+    "hooks",
+    "lib",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orsetra/console-ui.git",
+    "directory": "packages/shared-ui"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "orsetra",
+    "radix-ui",
+    "tailwind"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^14.0.0 || ^15.0.0"
+  },
+  "dependencies": {
+    "react-avatar": "^5.0.3",
+    "react-easy-crop": "^5.0.8",
+    "react-hook-form": "^7.54.0",
+    "react-resizable-panels": "^2.1.7",
+    "@hookform/resolvers": "^3.9.1",
+    "zod": "^3.24.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.454.0",
+    "react-day-picker": "8.10.1",
+    "embla-carousel-react": "8.5.1",
+    "cmdk": "1.0.4",
+    "recharts": "^2.15.0",
+    "date-fns": "4.1.0",
+    "input-otp": "1.4.1",
+    "vaul": "^1.1.1",
+    "next-themes": "^0.4.4",
+    "sonner": "^1.7.1",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "next": "^15.0.0",
+    "typescript": "^5"
+  }
+}