bmad-elsabro 1.0.0

package/renderer/components/onboarding/Step2Setup.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+
+interface Step2SetupProps {
+  onNext: (preferences: SetupPreferences) => void;
+  onBack: () => void;
+}
+
+export interface SetupPreferences {
+  theme: 'light' | 'dark' | 'system';
+  enableNotifications: boolean;
+  enableTokenTracking: boolean;
+  autoSave: boolean;
+}
+
+/**
+ * Step2Setup Component
+ *
+ * Collects user preferences and initial configuration settings.
+ * Allows users to customize their BMAD Studio experience.
+ */
+const Step2Setup: React.FC<Step2SetupProps> = ({ onNext, onBack }) => {
+  const [preferences, setPreferences] = useState<SetupPreferences>({
+    theme: 'system',
+    enableNotifications: true,
+    enableTokenTracking: true,
+    autoSave: true,
+  });
+
+  const handleSubmit = () => {
+    onNext(preferences);
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <h2 className="text-3xl font-bold mb-3 text-gray-900 dark:text-white">
+          Customize Your Experience
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400">
+          Choose your preferences. You can change these later in settings.
+        </p>
+      </div>
+
+      {/* Preferences Form */}
+      <div className="space-y-6 bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+        {/* Theme Preference */}
+        <div>
+          <label className="block text-sm font-semibold mb-3 text-gray-900 dark:text-white">
+            Theme Preference
+          </label>
+          <div className="grid grid-cols-3 gap-3">
+            <button
+              onClick={() => setPreferences({ ...preferences, theme: 'light' })}
+              className={`p-4 rounded-lg border-2 transition-all ${
+                preferences.theme === 'light'
+                  ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'
+              }`}
+            >
+              <div className="text-2xl mb-1">☀️</div>
+              <div className="font-medium text-gray-900 dark:text-white">Light</div>
+            </button>
+            <button
+              onClick={() => setPreferences({ ...preferences, theme: 'dark' })}
+              className={`p-4 rounded-lg border-2 transition-all ${
+                preferences.theme === 'dark'
+                  ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'
+              }`}
+            >
+              <div className="text-2xl mb-1">🌙</div>
+              <div className="font-medium text-gray-900 dark:text-white">Dark</div>
+            </button>
+            <button
+              onClick={() => setPreferences({ ...preferences, theme: 'system' })}
+              className={`p-4 rounded-lg border-2 transition-all ${
+                preferences.theme === 'system'
+                  ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'
+              }`}
+            >
+              <div className="text-2xl mb-1">💻</div>
+              <div className="font-medium text-gray-900 dark:text-white">System</div>
+            </button>
+          </div>
+        </div>
+
+        {/* Additional Preferences */}
+        <div className="space-y-4 pt-4 border-t border-gray-300 dark:border-gray-600">
+          {/* Notifications */}
+          <label className="flex items-center justify-between cursor-pointer group">
+            <div className="flex-1">
+              <div className="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                Enable Notifications
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                Get notified about important events and updates
+              </div>
+            </div>
+            <div className="ml-4">
+              <button
+                type="button"
+                onClick={() => setPreferences({ ...preferences, enableNotifications: !preferences.enableNotifications })}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  preferences.enableNotifications ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    preferences.enableNotifications ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          </label>
+
+          {/* Token Tracking */}
+          <label className="flex items-center justify-between cursor-pointer group">
+            <div className="flex-1">
+              <div className="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                Enable Token Tracking
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                Monitor AI token usage and costs
+              </div>
+            </div>
+            <div className="ml-4">
+              <button
+                type="button"
+                onClick={() => setPreferences({ ...preferences, enableTokenTracking: !preferences.enableTokenTracking })}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  preferences.enableTokenTracking ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    preferences.enableTokenTracking ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          </label>
+
+          {/* Auto Save */}
+          <label className="flex items-center justify-between cursor-pointer group">
+            <div className="flex-1">
+              <div className="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
+                Auto Save
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                Automatically save your work in progress
+              </div>
+            </div>
+            <div className="ml-4">
+              <button
+                type="button"
+                onClick={() => setPreferences({ ...preferences, autoSave: !preferences.autoSave })}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  preferences.autoSave ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    preferences.autoSave ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      {/* Navigation Buttons */}
+      <div className="flex justify-between mt-8">
+        <button
+          onClick={onBack}
+          className="px-6 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+        >
+          Back
+        </button>
+        <button
+          onClick={handleSubmit}
+          className="px-8 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors shadow-md"
+        >
+          Continue
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Step2Setup;

package/renderer/components/onboarding/Step3CreateProject.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+
+interface Step3CreateProjectProps {
+  onComplete: (projectData: ProjectData | null) => void;
+  onBack: () => void;
+}
+
+export interface ProjectData {
+  name: string;
+  description: string;
+  template: 'blank' | 'starter' | 'example';
+}
+
+/**
+ * Step3CreateProject Component
+ *
+ * Final onboarding step allowing users to create their first project
+ * or skip to explore the dashboard.
+ */
+const Step3CreateProject: React.FC<Step3CreateProjectProps> = ({ onComplete, onBack }) => {
+  const [showForm, setShowForm] = useState(false);
+  const [projectData, setProjectData] = useState<ProjectData>({
+    name: '',
+    description: '',
+    template: 'starter',
+  });
+
+  const handleSkip = () => {
+    onComplete(null);
+  };
+
+  const handleCreate = () => {
+    if (!projectData.name.trim()) {
+      return;
+    }
+    onComplete(projectData);
+  };
+
+  if (!showForm) {
+    return (
+      <div className="max-w-2xl mx-auto text-center">
+        {/* Header */}
+        <h2 className="text-3xl font-bold mb-3 text-gray-900 dark:text-white">
+          Ready to Get Started?
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-10">
+          Create your first project or explore the dashboard first
+        </p>
+
+        {/* Options */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <button
+            onClick={() => setShowForm(true)}
+            className="p-8 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-blue-600 dark:hover:border-blue-500 hover:shadow-lg transition-all group text-left"
+          >
+            <div className="text-4xl mb-4">🚀</div>
+            <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
+              Create a Project
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Start a new BMAD project with AI-driven development workflows
+            </p>
+          </button>
+
+          <button
+            onClick={handleSkip}
+            className="p-8 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-blue-600 dark:hover:border-blue-500 hover:shadow-lg transition-all group text-left"
+          >
+            <div className="text-4xl mb-4">👀</div>
+            <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
+              Explore First
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Take a look around and create a project later
+            </p>
+          </button>
+        </div>
+
+        {/* Back Button */}
+        <button
+          onClick={onBack}
+          className="px-6 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+        >
+          Back
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <h2 className="text-3xl font-bold mb-3 text-gray-900 dark:text-white">
+          Create Your First Project
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400">
+          Let's set up your first BMAD project
+        </p>
+      </div>
+
+      {/* Project Form */}
+      <div className="space-y-6 bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
+        {/* Project Name */}
+        <div>
+          <label htmlFor="project-name" className="block text-sm font-semibold mb-2 text-gray-900 dark:text-white">
+            Project Name *
+          </label>
+          <input
+            id="project-name"
+            type="text"
+            value={projectData.name}
+            onChange={(e) => setProjectData({ ...projectData, name: e.target.value })}
+            placeholder="My Awesome Project"
+            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+            autoFocus
+          />
+        </div>
+
+        {/* Project Description */}
+        <div>
+          <label htmlFor="project-description" className="block text-sm font-semibold mb-2 text-gray-900 dark:text-white">
+            Description (Optional)
+          </label>
+          <textarea
+            id="project-description"
+            value={projectData.description}
+            onChange={(e) => setProjectData({ ...projectData, description: e.target.value })}
+            placeholder="Describe your project..."
+            rows={3}
+            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent resize-none"
+          />
+        </div>
+
+        {/* Template Selection */}
+        <div>
+          <label className="block text-sm font-semibold mb-3 text-gray-900 dark:text-white">
+            Project Template
+          </label>
+          <div className="grid grid-cols-3 gap-3">
+            <button
+              onClick={() => setProjectData({ ...projectData, template: 'blank' })}
+              className={`p-4 rounded-lg border-2 transition-all text-left ${
+                projectData.template === 'blank'
+                  ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'
+              }`}
+            >
+              <div className="text-xl mb-1">📄</div>
+              <div className="font-medium text-sm text-gray-900 dark:text-white">Blank</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">Start from scratch</div>
+            </button>
+            <button
+              onClick={() => setProjectData({ ...projectData, template: 'starter' })}
+              className={`p-4 rounded-lg border-2 transition-all text-left ${
+                projectData.template === 'starter'
+                  ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'
+              }`}
+            >
+              <div className="text-xl mb-1">⚡</div>
+              <div className="font-medium text-sm text-gray-900 dark:text-white">Starter</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">Basic setup</div>
+            </button>
+            <button
+              onClick={() => setProjectData({ ...projectData, template: 'example' })}
+              className={`p-4 rounded-lg border-2 transition-all text-left ${
+                projectData.template === 'example'
+                  ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'
+              }`}
+            >
+              <div className="text-xl mb-1">🎯</div>
+              <div className="font-medium text-sm text-gray-900 dark:text-white">Example</div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 mt-1">With samples</div>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation Buttons */}
+      <div className="flex justify-between mt-8">
+        <button
+          onClick={() => setShowForm(false)}
+          className="px-6 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+        >
+          Back
+        </button>
+        <div className="flex gap-3">
+          <button
+            onClick={handleSkip}
+            className="px-6 py-2 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+          >
+            Skip for Now
+          </button>
+          <button
+            onClick={handleCreate}
+            disabled={!projectData.name.trim()}
+            className="px-8 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Create Project
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Step3CreateProject;