@orsetra/shared-ui 1.1.7 → 1.1.9

package/components/layout/page-with-side-panel.tsx

@@ -3,6 +3,7 @@
 import { ReactNode, useState } from "react"
 import { X, ChevronLeft } from "lucide-react"
 import { Button } from "../ui/button"
+import { cn } from "../../lib/utils"
 
 interface PageWithSidePanelProps {
   children: ReactNode
@@ -15,6 +16,9 @@ interface PageWithSidePanelProps {
   showBorder?: boolean
   onClose?: () => void
   onOpen?: () => void
+  contentHeaderClassName?: string
+  sidePanelClassName?: string
+  sidePanelHeaderClassName?: string
 }
 
 const PANEL_WIDTHS = {
@@ -34,6 +38,9 @@ export function PageWithSidePanel({
   showBorder = true,
   onClose,
   onOpen,
+  contentHeaderClassName,
+  sidePanelClassName,
+  sidePanelHeaderClassName,
 }: PageWithSidePanelProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen)
   const panelWidthClass = PANEL_WIDTHS[sidePanelWidth]
@@ -50,13 +57,15 @@ export function PageWithSidePanel({
 
   return (
     <div className="flex items-start">
-
       {/* Main content column — grows to fill space left by the panel */}
       <div className="flex-1 min-w-0 flex flex-col">
 
         {/* Content header — sticks at the top of the scroll container */}
         {contentHeader && (
-          <div className="flex sticky top-0 z-10 bg-white h-14 flex-shrink-0 items-center justify-between px-4 border-b border-ibm-gray-20">
+          <div className={cn(
+            "flex sticky top-0 z-10 bg-white h-14 flex-shrink-0 items-center justify-between px-4 border-b border-ibm-gray-20",
+            contentHeaderClassName
+          )}>
             {contentHeader}
           </div>
         )}
@@ -73,16 +82,22 @@ export function PageWithSidePanel({
       {sidePanel && (
         <>
           <div
-            className={`hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width] duration-300 ease-in-out ${
-              isOpen && showBorder ? "border-l border-ibm-gray-40" : ""
-            } ${isOpen ? panelWidthClass : "w-0"}`}
+            className={cn(
+              "hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width] duration-300 ease-in-out",
+              isOpen && showBorder && "border-l border-ibm-gray-40",
+              isOpen ? panelWidthClass : "w-0",
+              sidePanelClassName
+            )}
           >
             {/* Inner wrapper at fixed width to prevent content reflow during animation */}
             <div className={`flex flex-col h-full bg-white ${panelWidthClass}`}>
 
               {/* Panel header */}
               {(sidePanelHeader || closable) && (
-                <div className="flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20">
+                <div className={cn(
+                  "flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20",
+                  sidePanelHeaderClassName
+                )}>
                   <div className="flex-1 min-w-0">
                     {sidePanelHeader}
                   </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>

package/package.json

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