Initial commit: MVP structure + Cursor documentation + Onboarding components

src/components/onboarding/StepCreateTeam.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { createTeam } from '../../api/teams';
+import { ApiError } from '../../api/client';
+import type { Team } from '../../types/api';
+
+interface StepCreateTeamProps {
+  teamName: string;
+  teamDescription: string;
+  onUpdate: (updates: { teamName: string; teamDescription: string }) => void;
+  onNext: (team: Team) => void;
+}
+
+export function StepCreateTeam({
+  teamName,
+  teamDescription,
+  onUpdate,
+  onNext,
+}: StepCreateTeamProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!teamName.trim()) {
+      setError('Назва спільноти обов\'язкова');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const team = await createTeam({
+        name: teamName.trim(),
+        description: teamDescription.trim() || undefined,
+      });
+      onNext(team);
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message || 'Не вдалося створити спільноту. Спробуйте ще раз.');
+      } else {
+        setError('Сталася помилка. Спробуйте ще раз.');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto px-4">
+      <h2 className="text-2xl font-bold text-slate-900 mb-2">
+        Створити спільноту
+      </h2>
+      <p className="text-slate-600 mb-6">
+        Спільнота = твоя команда, клуб чи проект. Для кожної спільноти автоматично створюється micro-DAO з власним управлінням і агентами.
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="teamName" className="block text-sm font-medium text-slate-700 mb-2">
+            Назва спільноти <span className="text-red-500">*</span>
+          </label>
+          <input
+            id="teamName"
+            type="text"
+            value={teamName}
+            onChange={(e) => onUpdate({ teamName: e.target.value, teamDescription })}
+            placeholder="Наприклад: Моя команда"
+            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent"
+            disabled={loading}
+            required
+          />
+        </div>
+
+        <div>
+          <label htmlFor="teamDescription" className="block text-sm font-medium text-slate-700 mb-2">
+            Короткий опис <span className="text-slate-400 text-xs">(опційно)</span>
+          </label>
+          <textarea
+            id="teamDescription"
+            value={teamDescription}
+            onChange={(e) => onUpdate({ teamName, teamDescription: e.target.value })}
+            placeholder="Опиши свою спільноту..."
+            rows={3}
+            className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent resize-none"
+            disabled={loading}
+          />
+        </div>
+
+        {error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+            {error}
+          </div>
+        )}
+
+        <div className="flex justify-end pt-4">
+          <button
+            type="submit"
+            disabled={loading || !teamName.trim()}
+            className="px-6 py-2 bg-slate-900 text-white rounded-lg font-medium hover:bg-slate-800 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+            Продовжити
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+