@startsimpli/ui 0.4.21 → 0.4.23

package/src/components/workflows/WorkflowVersionHistory.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Hash, User, StickyNote, Boxes } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Badge } from '../ui/badge';
+
+/**
+ * Minimal, in-package shape of a workflow version. Mirrors the subset of the
+ * backend version record the history view actually reads — kept local so the
+ * component carries no app type coupling.
+ */
+export interface WorkflowVersion {
+  uuid: string;
+  versionNumber: number;
+  timestamp: string;
+  isPublished?: boolean;
+  versionNote?: string | null;
+  createdBy?: {
+    firstName?: string | null;
+    lastName?: string | null;
+    email: string;
+  } | null;
+  /** Opaque workflow definition; only `nodes.length` is read for display. */
+  workflowData?: Record<string, unknown> | null;
+}
+
+export interface WorkflowVersionHistoryProps {
+  versions: WorkflowVersion[];
+  /**
+   * Formats a version's ISO timestamp for display. Supplied by the consumer
+   * so this component stays free of date/locale dependencies. Defaults to the
+   * raw timestamp string when omitted.
+   */
+  formatTimestamp?: (timestamp: string) => string;
+  className?: string;
+}
+
+export function WorkflowVersionHistory({
+  versions,
+  formatTimestamp,
+  className,
+}: WorkflowVersionHistoryProps) {
+  const sorted = useMemo(
+    () => [...versions].sort((a, b) => b.versionNumber - a.versionNumber),
+    [versions]
+  );
+
+  if (versions.length === 0) {
+    return (
+      <div className={cn('text-center py-12', className)}>
+        <Hash className="h-12 w-12 mx-auto mb-3 text-muted-foreground" />
+        <h3 className="text-lg font-semibold mb-2">No Versions Yet</h3>
+        <p className="text-muted-foreground max-w-sm mx-auto">
+          No versions published yet. Use the canvas toolbar to publish a
+          version.
+        </p>
+      </div>
+    );
+  }
+
+  const formatTime = formatTimestamp ?? ((t: string) => t);
+
+  return (
+    <ol className={cn('relative space-y-6', className)}>
+      {sorted.map((version, index) => {
+        const label = version.versionNote
+          ? `v${version.versionNumber} — ${version.versionNote}`
+          : `v${version.versionNumber}`;
+
+        const nodeCount =
+          version.workflowData &&
+          Array.isArray(
+            (version.workflowData as Record<string, unknown>).nodes
+          )
+            ? (
+                (version.workflowData as Record<string, unknown>)
+                  .nodes as unknown[]
+              ).length
+            : null;
+
+        const isLast = index === sorted.length - 1;
+
+        return (
+          <li key={version.uuid} className="relative pl-8">
+            {/* Timeline rail + dot */}
+            {!isLast && (
+              <span
+                className="absolute left-[7px] top-5 bottom-[-1.5rem] w-px bg-border"
+                aria-hidden="true"
+              />
+            )}
+            <span
+              className={cn(
+                'absolute left-0 top-1 h-3.5 w-3.5 rounded-full border-2',
+                version.isPublished
+                  ? 'border-green-500 bg-green-500'
+                  : 'border-muted-foreground bg-background'
+              )}
+              aria-hidden="true"
+            />
+
+            <div className="flex items-center justify-between gap-2">
+              <span className="font-medium text-sm">{label}</span>
+              <span className="text-xs text-muted-foreground">
+                {formatTime(version.timestamp)}
+              </span>
+            </div>
+
+            <div className="mt-2 space-y-2 text-sm">
+              {version.isPublished && (
+                <div>
+                  <Badge
+                    variant="outline"
+                    className="border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-950/30 dark:text-green-400"
+                  >
+                    Published
+                  </Badge>
+                </div>
+              )}
+              {version.createdBy && (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <User className="h-3.5 w-3.5 shrink-0" />
+                  <span>
+                    {version.createdBy.firstName
+                      ? `${version.createdBy.firstName} ${version.createdBy.lastName ?? ''}`.trim()
+                      : version.createdBy.email}
+                  </span>
+                </div>
+              )}
+              {version.versionNote && (
+                <div className="flex items-start gap-2 text-muted-foreground">
+                  <StickyNote className="h-3.5 w-3.5 shrink-0 mt-0.5" />
+                  <span>{version.versionNote}</span>
+                </div>
+              )}
+              {nodeCount !== null && (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Boxes className="h-3.5 w-3.5 shrink-0" />
+                  <span>
+                    {nodeCount} node{nodeCount !== 1 ? 's' : ''}
+                  </span>
+                </div>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/workflows/index.ts

@@ -76,3 +76,36 @@ export { useNodeStatusOverlay } from './hooks/useNodeStatusOverlay';
 
 // Category icon resolver (lucide)
 export { getCategoryIcon } from './node-icons';
+
+// Page composers — zero-coupling workflow UI (empty-state guidance + version history)
+export { WorkflowEmptyState, useWorkflowEmptyState } from './WorkflowEmptyState';
+export type { WorkflowEmptyStateProps } from './WorkflowEmptyState';
+export { WorkflowVersionHistory } from './WorkflowVersionHistory';
+export type {
+  WorkflowVersion,
+  WorkflowVersionHistoryProps,
+} from './WorkflowVersionHistory';
+
+// Page composers — workflow settings, stats, list, and template gallery
+export { WorkflowSettingsCard } from './WorkflowSettingsCard';
+export type { WorkflowSettingsCardProps } from './WorkflowSettingsCard';
+export { WorkflowStatsOverview } from './WorkflowStatsOverview';
+export type {
+  WorkflowStats,
+  WorkflowStatsOverviewProps,
+} from './WorkflowStatsOverview';
+export { WorkflowListComposer } from './WorkflowListComposer';
+export type {
+  WorkflowListItem,
+  WorkflowCreateInput,
+  WorkflowListComposerProps,
+} from './WorkflowListComposer';
+export {
+  WorkflowTemplateGallery,
+  WORKFLOW_TEMPLATES,
+} from './WorkflowTemplateGallery';
+export type {
+  WorkflowTemplate,
+  WorkflowTemplateDefinition,
+  WorkflowTemplateGalleryProps,
+} from './WorkflowTemplateGallery';