@orsetra/shared-ui 1.0.0 → 1.0.2

package/components/ui/pagination.tsx

@@ -0,0 +1,112 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+import { ButtonProps, variants } from "./button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "sm",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      variants[isActive ? "secondary" : "ghost"],
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

package/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

package/components/ui/process-status.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from 'react'
+import { getExecutionStatus } from '@/app/vpcs/workflow-service'
+import { useToast } from '../../hooks/use-toast'
+import { X } from 'lucide-react'
+import { Button } from './button'
+
+interface ProcessStatusProps {
+  title: string;
+  description: string;
+  executionArn: string;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  onClose?: () => void;
+  icon?: ReactNode;
+}
+
+export function ProcessStatus({ 
+  title, 
+  description, 
+  executionArn,
+  onSuccess,
+  onError,
+  onClose,
+  icon = "⚡" 
+}: ProcessStatusProps) {
+  const { toast } = useToast()
+  const [status, setStatus] = useState<'running' | 'success' | 'error'>('running')
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const execution = await getExecutionStatus(executionArn)
+        
+        if (execution?.status === "SUCCEEDED") {
+          setStatus('success')
+          onSuccess?.()
+        } else if (execution?.status === "FAILED" || execution?.status === "TIMED_OUT") {
+          setStatus('error')
+          const errorMessage = execution.error || 'Erreur inconnue'
+          onError?.(errorMessage)
+          toast({
+            variant: "destructive",
+            title: "Erreur",
+            description: `La configuration a échoué: ${errorMessage}`,
+          })
+        }
+      } catch (error) {
+        console.error("Error checking execution status:", error)
+      }
+    }
+
+    const interval = setInterval(checkStatus, 2000)
+    return () => clearInterval(interval)
+  }, [executionArn, onSuccess, onError, toast])
+
+  const getStatusStyles = () => {
+    switch (status) {
+      case 'success':
+        return 'bg-ibm-green-10 border-ibm-green-60'
+      case 'error':
+        return 'bg-ibm-red-10 border-ibm-red-60'
+      default:
+        return 'bg-ibm-blue-10 border-ibm-blue-60'
+    }
+  }
+
+  return (
+    <div className={`border ${getStatusStyles()} p-4 mb-6 relative`}>
+      <div className="flex items-center gap-3">
+        <div className={`p-2 ${status === 'success' ? 'bg-ibm-green-20' : status === 'error' ? 'bg-ibm-red-20' : 'bg-ibm-blue-20'}`}>
+          <span className={`${status === 'running' ? 'animate-spin' : ''} ${
+            status === 'success' ? 'text-ibm-green-60' : 
+            status === 'error' ? 'text-ibm-red-60' : 
+            'text-ibm-blue-60'
+          }`}>
+            {status === 'success' ? '✓' : status === 'error' ? '✗' : icon}
+          </span>
+        </div>
+        <div>
+          <h3 className="text-sm font-medium text-ibm-gray-100">{title}</h3>
+          <p className="text-xs text-ibm-gray-70 mt-0.5">{description}</p>
+        </div>
+        {onClose && (
+          <Button
+            variant="ghost"
+            size="xs"
+            className="absolute top-2 right-2"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+} 

package/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "../../lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-ibm-gray-30",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 transition-all"
+      style={{ 
+        transform: `translateX(-${100 - (value || 0)}%)`,
+        backgroundColor: "#0f62fe" // IBM blue
+      }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

package/components/ui/resizable.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../../lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/components/ui/resource-settings.tsx

@@ -0,0 +1,227 @@
+"use client"
+
+import { Label } from "./label"
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "./select"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion"
+import { Cpu, MemoryStick } from "lucide-react"
+import { cpuOptions, memoryOptions, replicasOptions, ResourceOption } from "../../app/applications/models"
+
+export interface ResourceConfig {
+  cpu: string
+  memory: string
+}
+
+export interface ScalabilityConfig {
+  replicas: number
+  minReplicas: number
+  maxReplicas: number
+  scalingStrategy: "manual" | "auto"
+}
+
+interface ResourceSettingsProps { 
+  resources: ResourceConfig
+  onResourcesChange: (config: ResourceConfig) => void
+  scalability: ScalabilityConfig
+  onScalabilityChange: (config: ScalabilityConfig) => void
+  configuring?: boolean
+}
+
+export function ResourceSettings({ 
+  resources, 
+  onResourcesChange,
+  scalability,
+  onScalabilityChange,
+  configuring = false 
+}: ResourceSettingsProps) {
+  
+  const handleCpuChange = (value: string) => {
+    onResourcesChange({
+      ...resources,
+      cpu: value
+    })
+  }
+
+  const handleMemoryChange = (value: string) => {
+    onResourcesChange({
+      ...resources,
+      memory: value
+    })
+  }
+
+  return (
+        <div className="space-y-6">
+
+          <div className="space-y-2">
+            {/* CPU Selection */}
+            <div>
+              <Label className="text-sm font-medium text-ibm-gray-100 mb-3 block">
+                <Cpu className="w-4 h-4 inline mr-2" />
+                CPU Allocation *
+              </Label>
+              <Select
+                value={resources.cpu}
+                onValueChange={handleCpuChange}
+                disabled={configuring}
+              >
+                <SelectTrigger className="bg-white border-ibm-gray-20">
+                  <SelectValue placeholder="Select CPU allocation" />
+                </SelectTrigger>
+                <SelectContent>
+                  {cpuOptions.map((option: ResourceOption) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      <div className="flex flex-col">
+                        <span className="font-medium text-left">{option.label}</span>
+                        <span className="text-xs text-ibm-gray-70 ">{option.description}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Memory Selection */}
+            <div>
+              <Label className="text-sm font-medium text-ibm-gray-100 mb-3 block">
+                <MemoryStick className="w-4 h-4 inline mr-2" />
+                Memory Allocation *
+              </Label>
+              <Select
+                value={resources.memory}
+                onValueChange={handleMemoryChange}
+                disabled={configuring}
+              >
+                <SelectTrigger className="bg-white border-ibm-gray-20">
+                  <SelectValue placeholder="Select memory allocation" />
+                </SelectTrigger>
+                <SelectContent>
+                  {memoryOptions.map((option: ResourceOption) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      <div className="flex flex-col">
+                        <span className="font-medium text-left">{option.label}</span>
+                        <span className="text-xs text-ibm-gray-70">{option.description}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Scalability Accordion */}
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="scalability" className="border-none">
+              <AccordionTrigger className="py-2 hover:no-underline">
+                <div className="flex items-center space-x-2 mt-2">
+                  <MemoryStick className="h-4 w-4 text-ibm-gray-70" />
+                  <span className="text-sm font-medium text-gray-700">Scaling Settings </span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="pt-2">
+                <div className="space-y-4 pl-6">
+                  {/* Scaling Strategy */}
+                  <div className="space-y-3">
+                    <Label className="text-sm font-medium text-gray-700">Scaling Strategy</Label>
+                    <Select
+                      value={scalability.scalingStrategy}
+                      onValueChange={(value) => onScalabilityChange({ ...scalability, scalingStrategy: value as "manual" | "auto" })}
+                      disabled={configuring}
+                    >
+                      <SelectTrigger className="bg-white border-ibm-gray-20">
+                        <SelectValue placeholder="Select scaling strategy" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="manual">
+                          <div className="flex flex-col">
+                            <span className="font-medium text-left">Manual</span>
+                            <span className="text-xs text-ibm-gray-70">Fixed number of replicas</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="auto">
+                          <div className="flex flex-col">
+                            <span className="font-medium text-left">Auto Scaling</span>
+                            <span className="text-xs text-ibm-gray-70">Automatic scaling based on metrics</span>
+                          </div>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* Replicas Configuration - Strategy Dependent */}
+                  <div className="space-y-3">
+                    <Label className="text-sm font-medium text-gray-700">Replicas Configuration</Label>
+                    
+                    {/* Manual Strategy */}
+                    {scalability.scalingStrategy === "manual" && (
+                      <div>
+                        <Label className="text-xs text-ibm-gray-70">Fixed Replicas</Label>
+                        <Select
+                          value={scalability.replicas.toString()}
+                          onValueChange={(value) => onScalabilityChange({ ...scalability, replicas: parseInt(value) })}
+                          disabled={configuring}
+                        >
+                          <SelectTrigger className="bg-white border-ibm-gray-20 h-8">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {replicasOptions.map((option: ResourceOption) => (
+                              <SelectItem key={option.value} value={option.value.toString()}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <p className="text-xs text-gray-500 mt-1">Fixed number of replicas that will not change automatically</p>
+                      </div>
+                    )}
+
+                    {/* Auto Scaling Strategy */}
+                    {scalability.scalingStrategy === "auto" && (
+                      <div className="grid grid-cols-2 gap-4">
+                        <div>
+                          <Label className="text-xs text-ibm-gray-70">Min Replicas</Label>
+                          <Select
+                            value={scalability.minReplicas.toString()}
+                            onValueChange={(value) => onScalabilityChange({ ...scalability, minReplicas: parseInt(value) })}
+                            disabled={configuring}
+                          >
+                            <SelectTrigger className="bg-white border-ibm-gray-20 h-8">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {replicasOptions.map((option: ResourceOption) => (
+                                <SelectItem key={option.value} value={option.value.toString()}>
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div>
+                          <Label className="text-xs text-ibm-gray-70">Max Replicas</Label>
+                          <Select
+                            value={scalability.maxReplicas.toString()}
+                            onValueChange={(value) => onScalabilityChange({ ...scalability, maxReplicas: parseInt(value) })}
+                            disabled={configuring}
+                          >
+                            <SelectTrigger className="bg-white border-ibm-gray-20 h-8">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {replicasOptions.map((option: ResourceOption) => (
+                                <SelectItem key={option.value} value={option.value.toString()}>
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+  )
+} 

package/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "../../lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/components/ui/search-input.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Search } from "lucide-react"
+import { Input } from "./input"
+import { cn } from "../../lib/utils"
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  containerClassName?: string
+}
+
+export function SearchInput({ className, containerClassName, ...props }: SearchInputProps) {
+  return (
+    <div className={cn("relative", containerClassName)}>
+      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary h-4 w-4" />
+      <Input
+        type="text"
+        className={cn(
+          "pl-10 h-10 text-base border-ui-border bg-white",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}