@startsimpli/ui 0.4.21 → 0.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.21",
+  "version": "0.4.23",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -32,7 +32,7 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.18"
+    "@startsimpli/auth": "0.4.20"
   },
   "peerDependenciesMeta": {
     "@startsimpli/auth": {

package/src/components/workflows/WorkflowEmptyState.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '../ui/button';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '../ui/card';
+import { Checkbox } from '../ui/checkbox';
+import { Label } from '../ui/label';
+import { Sparkles, PlayCircle, HelpCircle, X } from 'lucide-react';
+
+const STORAGE_KEY = 'workflow_guidance_dismissed';
+
+export interface WorkflowEmptyStateProps {
+  onOpenTemplateGallery: () => void;
+  onStartFromScratch: () => void;
+  onOpenHelp?: () => void;
+}
+
+/**
+ * Empty State Component for Workflow Canvas
+ *
+ * Provides first-time user guidance with two paths:
+ * 1. Template Gallery - Pre-built workflows to learn from
+ * 2. Start From Scratch - Opens node palette with guidance
+ *
+ * Features:
+ * - localStorage-based dismissal (respects user preference)
+ * - Non-intrusive inline design (not a modal)
+ * - Action-oriented messaging (not "Welcome!")
+ * - Re-accessible via help button
+ */
+export function WorkflowEmptyState({
+  onOpenTemplateGallery,
+  onStartFromScratch,
+  onOpenHelp,
+}: WorkflowEmptyStateProps) {
+  const [isDismissed, setIsDismissed] = useState(true);
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+
+  useEffect(() => {
+    // Check if user has dismissed guidance
+    const dismissed = localStorage.getItem(STORAGE_KEY) === 'true';
+    setIsDismissed(dismissed);
+  }, []);
+
+  const handleTemplateGalleryClick = () => {
+    if (dontShowAgain) {
+      localStorage.setItem(STORAGE_KEY, 'true');
+    }
+    setIsDismissed(true);
+    onOpenTemplateGallery();
+  };
+
+  const handleStartFromScratchClick = () => {
+    if (dontShowAgain) {
+      localStorage.setItem(STORAGE_KEY, 'true');
+    }
+    setIsDismissed(true);
+    onStartFromScratch();
+  };
+
+  const handleDismiss = () => {
+    if (dontShowAgain) {
+      localStorage.setItem(STORAGE_KEY, 'true');
+    }
+    setIsDismissed(true);
+  };
+
+  if (isDismissed) {
+    // Show persistent help button for returning users
+    return (
+      <div className="absolute bottom-6 right-6 z-10">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={onOpenHelp}
+          className="h-12 w-12 rounded-full shadow-lg hover:shadow-xl transition-all"
+          title="Need help? View templates and guidance"
+        >
+          <HelpCircle className="h-5 w-5" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-center justify-center z-10"
+      role="dialog"
+      aria-labelledby="welcome-title"
+      aria-describedby="welcome-description"
+      aria-modal="false"
+    >
+      <Card className="w-full max-w-[720px] pointer-events-auto animate-in fade-in-0 zoom-in-95 duration-300 relative">
+        {/* Close button */}
+        <button
+          onClick={handleDismiss}
+          aria-label="Close welcome panel"
+          aria-keyshortcuts="Escape"
+          className="absolute right-4 top-4 rounded-full p-2 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+        >
+          <X className="w-5 h-5" aria-hidden="true" />
+        </button>
+
+        <CardHeader className="text-center pb-4 pt-10 px-10">
+          <CardTitle id="welcome-title" className="text-2xl font-semibold">
+            Welcome to Workflow Builder
+          </CardTitle>
+          <CardDescription
+            id="welcome-description"
+            className="text-sm text-muted-foreground leading-relaxed mt-2"
+          >
+            Create automated workflows with browser actions, logic, and AI
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="flex flex-col gap-6 px-10 pb-10">
+          {/* Option 1: Template Gallery */}
+          <button
+            onClick={handleTemplateGalleryClick}
+            className="block w-full group text-left"
+            aria-label="Browse template gallery"
+            aria-describedby="template-gallery-desc"
+          >
+            <Card className="cursor-pointer transition-all duration-150 hover:shadow-md hover:border-primary/50 hover:scale-[1.02]">
+              <CardContent className="pt-6 pb-6">
+                <div className="flex items-start gap-4">
+                  <div className="flex-shrink-0">
+                    <div className="h-12 w-12 rounded-lg bg-primary/5 flex items-center justify-center group-hover:bg-primary/10 transition-colors">
+                      <Sparkles className="h-6 w-6 text-primary/60" />
+                    </div>
+                  </div>
+                  <div className="flex-1 text-left">
+                    <h3 className="font-medium text-base mb-1">
+                      Browse Template Gallery
+                    </h3>
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                      Start with a pre-built workflow and customize it to your
+                      needs. Perfect for learning common patterns.
+                    </p>
+                    <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+                      <span className="inline-flex items-center gap-1">
+                        ⭐⭐⭐⭐⭐ Popular choice
+                      </span>
+                      <span>•</span>
+                      <span>5 templates available</span>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            <span id="template-gallery-desc" className="sr-only">
+              Choose from 5 pre-built workflow templates including login flows,
+              data extraction, API integration, multi-page navigation, and form
+              submission.
+            </span>
+          </button>
+
+          {/* Option 2: Start From Scratch */}
+          <button
+            onClick={handleStartFromScratchClick}
+            className="block w-full group text-left"
+            aria-label="Start from scratch"
+            aria-describedby="start-scratch-desc"
+          >
+            <Card className="cursor-pointer transition-all duration-150 hover:shadow-md hover:border-primary/50 hover:scale-[1.02]">
+              <CardContent className="pt-6 pb-6">
+                <div className="flex items-start gap-4">
+                  <div className="flex-shrink-0">
+                    <div className="h-12 w-12 rounded-lg bg-primary/5 flex items-center justify-center group-hover:bg-primary/10 transition-colors">
+                      <PlayCircle className="h-6 w-6 text-primary/60" />
+                    </div>
+                  </div>
+                  <div className="flex-1 text-left">
+                    <h3 className="font-medium text-base mb-1">
+                      Start From Scratch
+                    </h3>
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                      Build your workflow from the ground up. We&apos;ll
+                      highlight the node palette and show you how to get started.
+                    </p>
+                    <div className="mt-2 text-xs text-muted-foreground">
+                      For experienced users
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+            <span id="start-scratch-desc" className="sr-only">
+              Create a custom workflow by adding nodes from the node palette.
+              Ideal for users familiar with workflow automation.
+            </span>
+          </button>
+
+          {/* Don't show again checkbox */}
+          <div className="flex items-center justify-between pt-4 border-t">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="dontShowAgain"
+                checked={dontShowAgain}
+                onCheckedChange={(checked) => setDontShowAgain(checked === true)}
+              />
+              <Label
+                htmlFor="dontShowAgain"
+                className="text-sm text-muted-foreground cursor-pointer"
+              >
+                Don&apos;t show this again
+              </Label>
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDismiss}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Close
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+/**
+ * Hook to manage empty state visibility and reset.
+ */
+export function useWorkflowEmptyState() {
+  const [isGuidanceDismissed, setIsGuidanceDismissed] = useState(true);
+
+  useEffect(() => {
+    const dismissed = localStorage.getItem(STORAGE_KEY) === 'true';
+    setIsGuidanceDismissed(dismissed);
+  }, []);
+
+  const resetGuidance = () => {
+    localStorage.removeItem(STORAGE_KEY);
+    setIsGuidanceDismissed(false);
+  };
+
+  const dismissGuidance = () => {
+    localStorage.setItem(STORAGE_KEY, 'true');
+    setIsGuidanceDismissed(true);
+  };
+
+  return {
+    isGuidanceDismissed,
+    resetGuidance,
+    dismissGuidance,
+  };
+}