ai-design-system 0.1.47 → 0.1.49

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -0,0 +1,105 @@
+import * as React from "react"
+import { Icon } from "@/components/primitives/Icon"
+
+import { Button } from "@/components/primitives/Button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/primitives/Command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/primitives/Popover"
+
+export interface Project {
+  id: string
+  name: string
+}
+
+export interface ProjectSwitcherProps {
+  projects: Project[]
+  selectedProjectId?: string | null
+  onSelectProject: (id: string) => void
+  onCreateProject: () => void
+  className?: string
+}
+
+export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
+  ({ projects, selectedProjectId, onSelectProject, onCreateProject, className }) => {
+    const [open, setOpen] = React.useState(false)
+
+    const selectedProject = projects.find((p) => p.id === selectedProjectId)
+    const displayLabel = selectedProject ? selectedProject.name : "Select Project..."
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            role="combobox"
+            aria-expanded={open}
+            className={`w-[240px] justify-between font-medium ${className || ""}`}
+          >
+            {displayLabel}
+            <Icon name="chevrons-up-down" size="sm" className="ml-2 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[240px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Find Project..." />
+            <CommandList className="max-h-[300px]">
+              <CommandEmpty>
+                <div className="flex flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground">
+                  No projects, yet!
+                </div>
+              </CommandEmpty>
+              {projects.length > 0 && (
+                <CommandGroup heading="All Projects">
+                  {projects.map((project) => (
+                    <CommandItem
+                      key={project.id}
+                      value={project.name}
+                      onSelect={() => {
+                        onSelectProject(project.id)
+                        setOpen(false)
+                      }}
+                    >
+                      <Icon name="check"
+                        className={`mr-2 h-4 w-4 ${
+                          selectedProjectId === project.id ? "opacity-100" : "opacity-0"
+                        }`}
+                      />
+                      {project.name}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+            <CommandSeparator />
+            <div className="p-1">
+              <Button
+                variant="ghost"
+                className="w-full justify-start text-sm font-normal"
+                onClick={() => {
+                  setOpen(false)
+                  onCreateProject()
+                }}
+              >
+                <Icon name="plus" size="sm" className="mr-2" />
+                Create App
+              </Button>
+            </div>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
+
+ProjectSwitcher.displayName = "ProjectSwitcher"

package/components/composites/ProjectSwitcher/index.ts

@@ -0,0 +1 @@
+export * from "./ProjectSwitcher"

package/components/{blocks → composites}/PromptInput/PromptInput.stories.tsx

@@ -3,7 +3,7 @@ import { PromptInput } from "./PromptInput";
 import { useState } from "react";
 
 const meta: Meta<typeof PromptInput> = {
-  title: "Blocks/PromptInput",
+  title: "Composites/PromptInput",
   component: PromptInput,
   parameters: {
     layout: "padded",

package/components/composites/StateNode/StateNode.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import type { NodeProps } from "@xyflow/react";
-import { Check, EyeOff, XCircle, Zap } from "lucide-react";
 import { memo } from "react";
+import { Icon } from "@/components/primitives/Icon";
 import {
   Node,
   NodeDescription,
@@ -45,10 +45,10 @@ const StatusBadge = ({
       )}
     >
       {status === "success" && (
-        <Check className="size-3.5 text-white" strokeWidth={2.5} />
+        <Icon name="check" className="size-3.5 text-white" strokeWidth={2.5} />
       )}
       {status === "error" && (
-        <XCircle className="size-3.5 text-white" strokeWidth={2.5} />
+        <Icon name="circle-x" className="size-3.5 text-white" strokeWidth={2.5} />
       )}
     </div>
   );
@@ -79,7 +79,7 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
       {/* Disabled badge in top left */}
       {isDisabled && (
         <div className="absolute top-1 left-1 rounded-full bg-gray-500/50 p-0.5">
-          <EyeOff className="size-3 text-white" />
+          <Icon name="eye-off" size="xs" className="text-white" />
         </div>
       )}
 
@@ -87,7 +87,7 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
       <StatusBadge status={status} />
 
       <div className="flex h-full w-full items-center justify-center gap-1.5 px-3 py-2">
-        <Zap className="size-3 shrink-0 text-primary" strokeWidth={1.5} />
+        <Icon name="zap" size="xs" className="shrink-0 text-primary" strokeWidth={1.5} />
         <div className="min-w-0 flex-1 text-center">
           <NodeTitle className="line-clamp-2 text-center text-xs font-medium leading-tight" title={displayTitle}>
             {displayTitle}

package/components/composites/TransitionNode/TransitionNode.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import type { NodeProps } from "@xyflow/react";
-import { Check, GitBranch, XCircle } from "lucide-react";
 import { memo } from "react";
+import { Icon } from "@/components/primitives/Icon";
 import {
   Node,
   NodeDescription,
@@ -70,16 +70,16 @@ export const TransitionNode = memo(
             )}
           >
             {status === "success" && (
-              <Check className="size-3 text-white" strokeWidth={2.5} />
+              <Icon name="check" size="xs" className="text-white" strokeWidth={2.5} />
             )}
             {status === "error" && (
-              <XCircle className="size-3 text-white" strokeWidth={2.5} />
+              <Icon name="circle-x" size="xs" className="text-white" strokeWidth={2.5} />
             )}
           </div>
         )}
 
         <div className="flex h-full w-full items-center justify-center gap-1.5 px-3 py-2">
-          <GitBranch className="size-3 shrink-0 text-muted-foreground" strokeWidth={1.5} />
+          <Icon name="git-branch" size="xs" className="shrink-0 text-muted-foreground" strokeWidth={1.5} />
           <div className="min-w-0 flex-1 text-center">
             <NodeTitle className="line-clamp-2 text-center text-xs font-medium leading-tight" title={displayTitle}>
               {displayTitle}

package/components/composites/TriggerNode/TriggerNode.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import type { NodeProps } from "@xyflow/react";
-import { Play } from "lucide-react";
 import { memo } from "react";
+import { Icon } from "@/components/primitives/Icon";
 import {
   Node,
   NodeDescription,
@@ -43,7 +43,7 @@ export const TriggerNode = memo(({ data, selected, id }: TriggerNodeProps) => {
       status={status}
     >
       <div className="flex h-full w-full items-center justify-center gap-1.5 px-3 py-2">
-        <Play className="size-3 shrink-0 text-purple-600 dark:text-purple-400" strokeWidth={1.5} />
+        <Icon name="play" size="xs" className="shrink-0 text-purple-600 dark:text-purple-400" strokeWidth={1.5} />
         <div className="min-w-0 flex-1 text-center">
           <NodeTitle className="line-clamp-2 text-center text-xs font-medium leading-tight" title={displayTitle}>
             {displayTitle}

package/components/composites/WorkflowToolbar/WorkflowToolbar.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Check, ChevronDown, Loader2 } from "lucide-react";
 import { Button } from "@/components/primitives/Button";
 import { ButtonGroup } from "@/components/primitives/ButtonGroup";
 import {
@@ -48,7 +47,7 @@ export function WorkflowToolbarActions({
               variant="secondary"
             >
               {action.loading ? (
-                <Loader2 className="size-4 animate-spin" />
+                <Icon name="loader-2" size="sm" className="animate-spin" />
               ) : typeof action.icon === 'string' ? (
                 <Icon name={action.icon} size="sm" />
               ) : (
@@ -133,7 +132,7 @@ export function WorkflowToolbar({
                 variant="secondary"
               >
                 {currentVersion?.label ?? "Version"}
-                <ChevronDown className="ml-1 size-3 opacity-50" />
+                <Icon name="chevron-down" size="xs" className="ml-1 opacity-50" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">
@@ -144,7 +143,7 @@ export function WorkflowToolbar({
                   onClick={() => onVersionSelect?.(v.id)}
                 >
                   {v.label}
-                  {v.id === currentVersionId && <Check className="ml-4 size-4" />}
+                  {v.id === currentVersionId && <Icon name="check" size="sm" className="ml-4" />}
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>

package/components/composites/index.ts

@@ -158,3 +158,27 @@ export type { InboxListItem, InboxListProps } from './InboxList'
 // ModeSwitcher Composite
 export { ModeSwitcher } from './ModeSwitcher'
 export type { Mode, ModeSwitcherProps } from './ModeSwitcher'
+
+// EmptyState Composite
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'
+
+// ProjectSwitcher Composite
+export { ProjectSwitcher } from './ProjectSwitcher'
+export type { ProjectSwitcherProps, Project } from './ProjectSwitcher'
+
+// DashboardChart Composite
+export { DashboardChart } from './DashboardChart'
+export type { DashboardChartProps } from './DashboardChart'
+
+// DashboardHeader Composite
+export { DashboardHeader } from './DashboardHeader'
+export type { DashboardHeaderProps } from './DashboardHeader'
+
+// LayoutProvider Composite
+export { LayoutProvider } from './LayoutProvider'
+export type { LayoutProviderProps } from './LayoutProvider'
+
+// PromptInput Composite
+export { PromptInput } from './PromptInput'
+export type { PromptInputBlockProps } from './PromptInput'

package/components/features/DashboardFeature/DashboardFeature.behaviors.stories.tsx

@@ -4,8 +4,10 @@ import { Toaster } from "sonner"
 
 import { DashboardFeature } from "./DashboardFeature"
 import {
+  dashboardCreateFields,
   dashboardKpis,
   dashboardRows,
+  dashboardTableSchema,
   visitorsSeries,
 } from "./DashboardFeature.mocks"
 
@@ -34,6 +36,8 @@ const args = {
   kpis: dashboardKpis,
   rows: dashboardRows,
   visitorsSeries,
+  tableSchema: dashboardTableSchema,
+  createFields: dashboardCreateFields,
 }
 
 const interactionSpy = fn()

package/components/features/DashboardFeature/DashboardFeature.mocks.ts

@@ -18,7 +18,7 @@ const dashboardTableSchemaInput = {
     {
       key: "header",
       label: "Header",
-      renderType: "text",
+      renderType: "link",
       inputType: "text",
       editable: true,
       align: "left",

package/components/features/DashboardFeature/DashboardFeature.stories.tsx

@@ -61,3 +61,24 @@ export const WithStateManagement: Story = {
     )
   },
 }
+
+export const EmptyState: Story = {
+  args: {
+    kpis: [],
+    rows: [],
+    tableSchema: dashboardTableSchema,
+    visitorsSeries: [],
+    createFields: [
+      { name: "name", label: "App Name", type: "text", required: true },
+      { name: "description", label: "Description", type: "text" },
+    ],
+    emptyState: {
+      title: "Create your first App",
+      description: "Get started by creating a new app to build workflows and manage tasks.",
+      actionLabel: "Create App",
+    },
+    quickCreateFields: [
+      { name: "name", label: "App Name", type: "text", required: true },
+    ],
+  },
+}

package/components/features/DashboardFeature/DashboardFeature.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-
-import { DashboardChart } from "@/components/blocks/DashboardChart"
+import { EmptyState } from "@/components/composites/EmptyState"
+import { DashboardChart } from "@/components/composites/DashboardChart"
 import { DashboardMetrics } from "@/components/blocks/DashboardMetrics"
 import { DataTable } from "@/components/blocks/DataTable"
 import { type DashboardRow } from "@/components/composites/DataTable"
@@ -13,6 +13,7 @@ import {
 import type { DynamicTableSchema } from "ui-schema-contracts"
 
 import type {
+  DashboardApp,
   DashboardFeatureActionHandlers,
   DashboardKpi,
   DashboardSeriesPoint,
@@ -27,6 +28,25 @@ export interface DashboardFeatureProps {
   createEntityName?: string
   createFields: FormReportsFieldDefinition[]
   createButtonLabel?: string
+  apps?: DashboardApp[]
+  currentAppId?: string
+  quickCreateEntityName?: string
+  quickCreateFields?: FormReportsFieldDefinition[]
+  quickCreateButtonLabel?: string
+  /**
+   * Optional empty state configuration. When provided and rows is empty, this state is shown instead of the table.
+   */
+  emptyState?: {
+    title: string
+    description: string
+    actionLabel: string
+  }
+  /** Controlled state for external creation drawer open */
+  createDrawerOpen?: boolean
+  onOpenCreateDrawerChange?: (open: boolean) => void
+  /**
+   * Additional CSS classes
+   */
   className?: string
 }
 
@@ -47,17 +67,41 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
     createEntityName = "Section",
     createFields,
     createButtonLabel = "Create",
+    apps,
+    currentAppId,
+    quickCreateEntityName = "App",
+    quickCreateFields,
+    quickCreateButtonLabel = "Quick Create",
+    emptyState,
+    createDrawerOpen: externalDrawerOpen,
+    onOpenCreateDrawerChange: externalOnDrawerOpenChange,
     className,
   }) => {
-    const [drawerOpen, setDrawerOpen] = React.useState(false)
-    const [values, setValues] = React.useState<FormReportsValues>(() => buildInitialValues(createFields))
+    const [internalDrawerOpen, setInternalDrawerOpen] = React.useState(false)
+    const drawerOpen = externalDrawerOpen !== undefined ? externalDrawerOpen : internalDrawerOpen
+    const setDrawerOpen = externalOnDrawerOpenChange || setInternalDrawerOpen
+    
+    const [drawerMode, setDrawerMode] = React.useState<'table' | 'quick-create' | null>(null)
+    
+    const activeFields = drawerMode === 'quick-create' && quickCreateFields ? quickCreateFields : createFields
+    const activeEntityName = drawerMode === 'quick-create' ? quickCreateEntityName : createEntityName
+    const activeButtonLabel = drawerMode === 'quick-create' ? quickCreateButtonLabel : createButtonLabel
+
+    const [values, setValues] = React.useState<FormReportsValues>(() => buildInitialValues(activeFields))
 
     React.useEffect(() => {
-      setValues(buildInitialValues(createFields))
-    }, [createFields])
+      setValues(buildInitialValues(activeFields))
+    }, [activeFields])
 
     const openCreateDrawer = React.useCallback(() => {
       actionHandlers?.table?.onCreateClick?.()
+      setDrawerMode('table')
+      setDrawerOpen(true)
+      actionHandlers?.onCreateDrawerOpenChange?.(true)
+    }, [actionHandlers])
+
+    const openQuickCreateDrawer = React.useCallback(() => {
+      setDrawerMode('quick-create')
       setDrawerOpen(true)
       actionHandlers?.onCreateDrawerOpenChange?.(true)
     }, [actionHandlers])
@@ -65,6 +109,9 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
     const handleDrawerOpenChange = React.useCallback(
       (open: boolean) => {
         setDrawerOpen(open)
+        if (!open) {
+          setTimeout(() => setDrawerMode(null), 300)
+        }
         actionHandlers?.onCreateDrawerOpenChange?.(open)
       },
       [actionHandlers]
@@ -87,37 +134,59 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
 
     const handleCreateSubmit = React.useCallback(
       async (nextValues: FormReportsValues) => {
-        await Promise.resolve(actionHandlers?.onCreateSubmit?.(nextValues))
+        if (drawerMode === 'quick-create') {
+          await Promise.resolve(actionHandlers?.onQuickCreateSubmit?.(nextValues))
+        } else {
+          await Promise.resolve(actionHandlers?.onCreateSubmit?.(nextValues))
+        }
         setDrawerOpen(false)
+        setTimeout(() => setDrawerMode(null), 300)
         actionHandlers?.onCreateDrawerOpenChange?.(false)
         setValues(buildInitialValues(createFields))
       },
-      [actionHandlers, createFields]
+      [actionHandlers, createFields, drawerMode]
     )
 
     return (
       <div className={`flex flex-1 flex-col gap-4 py-4 md:gap-6 md:py-6 ${className ?? ""}`}>
-        <DashboardMetrics items={kpis} />
-        <DashboardChart
-          series={visitorsSeries}
-          onTimeRangeChange={actionHandlers?.onChartTimeRangeChange}
-        />
-        <DataTable
-          rows={rows}
-          tableSchema={tableSchema}
-          handlers={actionHandlers?.table}
-          onCreateClick={openCreateDrawer}
-          createButtonLabel={createButtonLabel}
-        />
+        {rows.length === 0 && emptyState ? (
+          <div className="flex flex-1 items-center justify-center min-h-[500px]">
+            <EmptyState
+              title={emptyState.title}
+              description={emptyState.description}
+              actionLabel={emptyState.actionLabel}
+              onAction={quickCreateFields ? openQuickCreateDrawer : openCreateDrawer}
+            />
+          </div>
+        ) : (
+          <>
+            {rows.length > 0 && (
+              <>
+                <DashboardMetrics items={kpis} />
+                <DashboardChart
+                  series={visitorsSeries}
+                  onTimeRangeChange={actionHandlers?.onChartTimeRangeChange}
+                />
+              </>
+            )}
+            <DataTable
+              rows={rows}
+              tableSchema={tableSchema}
+              handlers={actionHandlers?.table}
+              onCreateClick={openCreateDrawer}
+              createButtonLabel={createButtonLabel}
+            />
+          </>
+        )}
 
         <FormReportsDrawerForm
           open={drawerOpen}
           onOpenChange={handleDrawerOpenChange}
-          title={`Create ${createEntityName}`}
-          description={`Enter the details for your new ${createEntityName.toLowerCase()}.`}
-          fields={createFields}
+          title={`Create ${activeEntityName}`}
+          description={`Enter the details for your new ${activeEntityName.toLowerCase()}.`}
+          fields={activeFields}
           values={values}
-          submitLabel={createButtonLabel}
+          submitLabel={activeButtonLabel}
           onFieldChange={handleFieldChange}
           onFieldBlur={handleFieldBlur}
           onSubmit={handleCreateSubmit}
@@ -129,3 +198,5 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
 )
 
 DashboardFeature.displayName = "DashboardFeature"
+
+

package/components/features/DashboardFeature/useDashboardFeature.d.ts

@@ -30,6 +30,11 @@ export interface DashboardSeriesPoint {
 
 export type DashboardChartTimeRange = "90d" | "30d" | "7d"
 
+export interface DashboardApp {
+  id: string
+  name: string
+}
+
 /**
  * Consumer callbacks for DashboardFeature interactions.
  * Use this contract to wire feature UI actions to app-specific logic.
@@ -47,8 +52,12 @@ export interface DashboardFeatureActionHandlers {
   onCreateFieldBlur?: (name: string, value: FormReportsValue, values: FormReportsValues) => void
   /** Called when create drawer form is submitted. */
   onCreateSubmit?: (values: FormReportsValues) => void | Promise<void>
+  /** Called when quick create drawer form is submitted. */
+  onQuickCreateSubmit?: (values: FormReportsValues) => void | Promise<void>
   /** Called when create drawer cancel is clicked. */
   onCreateCancel?: () => void
+  /** Called when a different app is selected in the app switcher. */
+  onAppChange?: (appId: string) => void
 }
 
 export interface UseDashboardFeatureReturn {
@@ -59,7 +68,19 @@ export interface UseDashboardFeatureReturn {
   createEntityName?: string
   createFields: FormReportsFieldDefinition[]
   createButtonLabel?: string
+  apps?: DashboardApp[]
+  currentAppId?: string
+  quickCreateEntityName?: string
+  quickCreateFields?: FormReportsFieldDefinition[]
+  quickCreateButtonLabel?: string
   actionHandlers?: DashboardFeatureActionHandlers
+  emptyState?: {
+    title: string
+    description: string
+    actionLabel: string
+  }
+  createDrawerOpen?: boolean
+  onOpenCreateDrawerChange?: (open: boolean) => void
 }
 
 export function useDashboardFeature(): UseDashboardFeatureReturn

package/components/features/DashboardFeature/useDashboardFeature.mock.ts

@@ -11,45 +11,54 @@ import {
 } from "./DashboardFeature.mocks"
 import type { UseDashboardFeatureReturn } from "./useDashboardFeature.d"
 
-export function useDashboardFeatureMock(): UseDashboardFeatureReturn {
-  const getInitialRows = useCallback<() => DashboardRow[]>(
-    () => dashboardRows.map((row) => ({ ...row })),
-    []
-  )
+export const useDashboardFeatureMock = (): UseDashboardFeatureReturn => {
+  const [rows, setRows] = useState<DashboardRow[]>([])
 
-  const [rows, setRows] = useState<DashboardRow[]>(getInitialRows)
+  const handleCreateSubmit = async (values: FormReportsValues) => {
+    const nextId = rows.reduce((max, row) => Math.max(max, Number(row.id)), 0) + 1
+    const payload = {
+      name: values.name || `App ${nextId}`,
+      description: values.description || "",
+      tenant_id: "mock-tenant-id",
+    }
+    console.log("[Mock] Create submitted with simulated BFF payload:", payload)
+    
+    await new Promise(resolve => setTimeout(resolve, 500))
+    setRows(prev => {
+      const newRow: DashboardRow = {
+        id: nextId,
+        header: payload.name,
+        type: "App",
+        status: "Active",
+        target: "0",
+        limit: "0",
+        reviewer: "Unassigned",
+      }
+      return [newRow, ...prev]
+    })
+  }
 
   return {
+    kpis: dashboardKpis,
     rows,
     tableSchema: dashboardTableSchema,
-    kpis: dashboardKpis,
     visitorsSeries,
-    createFields: dashboardCreateFields,
+    createFields: [
+      { name: "name", label: "App Name", type: "text", required: true },
+      { name: "description", label: "Description", type: "text" },
+    ],
+    emptyState: {
+      title: "Create your first App",
+      description: "Get started by creating a new app to build workflows and manage tasks.",
+      actionLabel: "Create App",
+    },
     actionHandlers: {
-      onCreateSubmit: (values: FormReportsValues) => {
-        setRows((prev) => {
-          const nextId = prev.reduce((max, row) => Math.max(max, Number(row.id)), 0) + 1
-          const nextRow: DashboardRow = {
-            id: nextId,
-            header: String(values.slug || `section-${nextId}`),
-            type: String(values.type || "narrative"),
-            status: values.enabled ? "Done" : "Not Started",
-            target: "0",
-            limit: "0",
-            reviewer: "Assign reviewer",
-          }
-          return [nextRow, ...prev]
-        })
-      },
+      onChartTimeRangeChange: (range) => console.log("[Mock] Chart range changed:", range),
+      onCreateSubmit: handleCreateSubmit,
       table: {
         onDeleteRow: (row) => {
-          setRows((prev) => prev.filter((item) => String(item.id) !== String(row.id)))
-        },
-        onCopyRow: (row) => {
-          setRows((prev) => {
-            const nextId = prev.reduce((max, item) => Math.max(max, Number(item.id)), 0) + 1
-            return [{ ...row, id: nextId, header: `${String(row.header ?? "Section")} Copy` }, ...prev]
-          })
+          console.log("[Mock] Delete:", row.id)
+          setRows(prev => prev.filter(r => String(r.id) !== String(row.id)))
         },
       },
     },