@locusai/web 0.1.7 → 0.2.2

package/src/components/auth/RegisterSteps.tsx

@@ -0,0 +1,371 @@
+/**
+ * Registration page step components
+ * Separate UI components for each step of the registration flow
+ */
+
+import { Button, Input, OtpInput } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+interface RegisterEmailStepProps {
+  email: string;
+  loading: boolean;
+  onEmailChange: (email: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+/**
+ * Email entry step for registration
+ */
+export function RegisterEmailStep({
+  email,
+  loading,
+  onEmailChange,
+  onSubmit,
+}: RegisterEmailStepProps) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Work Email</label>
+        <Input
+          type="email"
+          placeholder="name@company.com"
+          value={email}
+          onChange={(e) => onEmailChange(e.target.value)}
+          required
+          disabled={loading}
+          autoFocus
+        />
+      </div>
+      <Button type="submit" className="w-full" disabled={loading}>
+        {loading ? "Sending code..." : "Continue with Email"}
+      </Button>
+    </form>
+  );
+}
+
+interface RegisterOtpStepProps {
+  email: string;
+  otp: string;
+  loading: boolean;
+  onOtpChange: (otp: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  onBack: () => void;
+}
+
+/**
+ * OTP verification step for registration
+ */
+export function RegisterOtpStep({
+  email,
+  otp,
+  loading,
+  onOtpChange,
+  onSubmit,
+  onBack,
+}: RegisterOtpStepProps) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-4">
+        <OtpInput value={otp} onChange={onOtpChange} disabled={loading} />
+        <p className="text-xs text-center text-muted-foreground">
+          Sent to <span className="font-semibold text-foreground">{email}</span>
+          <button
+            type="button"
+            onClick={onBack}
+            className="ml-2 text-primary hover:underline transition-colors"
+          >
+            Change
+          </button>
+        </p>
+      </div>
+      <Button type="submit" className="w-full h-11" disabled={otp.length < 6}>
+        Verify Code
+      </Button>
+    </form>
+  );
+}
+
+interface RegisterProfileStepProps {
+  name: string;
+  userRole: string;
+  onNameChange: (name: string) => void;
+  onRoleChange: (role: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+const ROLE_OPTIONS = [
+  { id: "developer", label: "Developer" },
+  { id: "designer", label: "Designer" },
+  { id: "product_manager", label: "Product" },
+  { id: "other", label: "Other" },
+] as const;
+
+/**
+ * Profile step for registration
+ */
+export function RegisterProfileStep({
+  name,
+  userRole,
+  onNameChange,
+  onRoleChange,
+  onSubmit,
+}: RegisterProfileStepProps) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <label className="text-sm font-semibold text-foreground/90">
+          What's your name?
+        </label>
+        <Input
+          type="text"
+          placeholder="Full Name"
+          value={name}
+          onChange={(e) => onNameChange(e.target.value)}
+          required
+          autoFocus
+          className="h-11 bg-secondary/20 border-border/40 focus:bg-background"
+        />
+      </div>
+      <div className="space-y-3">
+        <label className="text-sm font-semibold text-foreground/90">
+          What's your role?
+        </label>
+        <div className="grid grid-cols-2 gap-3">
+          {ROLE_OPTIONS.map((role) => (
+            <button
+              key={role.id}
+              type="button"
+              onClick={() => onRoleChange(role.id)}
+              className={cn(
+                "flex items-center justify-center p-3 rounded-xl border text-sm font-medium transition-all duration-200",
+                userRole === role.id
+                  ? "bg-primary/10 border-primary text-primary shadow-[0_0_15px_-5px_rgba(var(--primary),0.3)]"
+                  : "bg-secondary/10 border-border/40 text-muted-foreground hover:border-border hover:bg-secondary/20"
+              )}
+            >
+              {role.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="w-full h-11 text-base font-bold shadow-lg shadow-primary/20"
+        disabled={!userRole || !name}
+      >
+        Continue
+      </Button>
+    </form>
+  );
+}
+
+interface RegisterOrganizationStepProps {
+  companyName: string;
+  teamSize: string;
+  onCompanyNameChange: (name: string) => void;
+  onTeamSizeChange: (size: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+const TEAM_SIZE_OPTIONS = [
+  { id: "solo", label: "Solo" },
+  { id: "2-10", label: "2-10" },
+  { id: "11-50", label: "11-50" },
+  { id: "51-200", label: "51-200" },
+  { id: "200+", label: "200+" },
+] as const;
+
+/**
+ * Organization step for registration
+ */
+export function RegisterOrganizationStep({
+  companyName,
+  teamSize,
+  onCompanyNameChange,
+  onTeamSizeChange,
+  onSubmit,
+}: RegisterOrganizationStepProps) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <label className="text-sm font-semibold text-foreground/90">
+          Company Name
+        </label>
+        <Input
+          type="text"
+          placeholder="Acme Inc."
+          value={companyName}
+          onChange={(e) => onCompanyNameChange(e.target.value)}
+          required
+          autoFocus
+          className="h-11 bg-secondary/20 border-border/40 focus:bg-background"
+        />
+      </div>
+      <div className="space-y-3">
+        <label className="text-sm font-semibold text-foreground/90">
+          Team Size
+        </label>
+        <div className="grid grid-cols-2 gap-3">
+          {TEAM_SIZE_OPTIONS.map((size) => (
+            <button
+              key={size.id}
+              type="button"
+              onClick={() => onTeamSizeChange(size.id)}
+              className={cn(
+                "flex items-center justify-center p-3 rounded-xl border text-sm font-medium transition-all duration-200",
+                teamSize === size.id
+                  ? "bg-primary/10 border-primary text-primary shadow-[0_0_15px_-5px_rgba(var(--primary),0.3)]"
+                  : "bg-secondary/10 border-border/40 text-muted-foreground hover:border-border hover:bg-secondary/20"
+              )}
+            >
+              {size.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="w-full h-11 text-base font-bold shadow-lg shadow-primary/20"
+        disabled={!teamSize || !companyName}
+      >
+        Continue
+      </Button>
+    </form>
+  );
+}
+
+interface RegisterWorkspaceStepProps {
+  workspaceName: string;
+  onWorkspaceNameChange: (name: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+/**
+ * Workspace step for registration
+ */
+export function RegisterWorkspaceStep({
+  workspaceName,
+  onWorkspaceNameChange,
+  onSubmit,
+}: RegisterWorkspaceStepProps) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-6">
+      <div className="space-y-2">
+        <label className="text-sm font-semibold text-foreground/90">
+          Name your first workspace
+        </label>
+        <p className="text-xs text-muted-foreground/70">
+          Workspaces are where your team manages specific projects or
+          departments.
+        </p>
+        <Input
+          type="text"
+          placeholder="e.g. Engineering, Marketing"
+          value={workspaceName}
+          onChange={(e) => onWorkspaceNameChange(e.target.value)}
+          required
+          autoFocus
+          className="h-11 bg-secondary/20 border-border/40 focus:bg-background"
+        />
+      </div>
+      <Button
+        type="submit"
+        className="w-full h-11 text-base font-bold shadow-lg shadow-primary/20"
+        disabled={!workspaceName}
+      >
+        Continue
+      </Button>
+    </form>
+  );
+}
+
+interface RegisterInviteStepProps {
+  invitedEmails: string[];
+  currentInviteEmail: string;
+  loading: boolean;
+  onCurrentEmailChange: (email: string) => void;
+  onAddInvite: () => void;
+  onRemoveInvite: (email: string) => void;
+  onSkip: () => void;
+  onSubmit: () => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+
+/**
+ * Invite step for registration
+ */
+export function RegisterInviteStep({
+  invitedEmails,
+  currentInviteEmail,
+  loading,
+  onCurrentEmailChange,
+  onAddInvite,
+  onRemoveInvite,
+  onSkip,
+  onSubmit,
+  onKeyDown,
+}: RegisterInviteStepProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-3">
+        <label className="text-sm font-semibold text-foreground/90">
+          Invite your team (Optional)
+        </label>
+        <div className="flex gap-2">
+          <Input
+            type="email"
+            placeholder="colleague@company.com"
+            value={currentInviteEmail}
+            onChange={(e) => onCurrentEmailChange(e.target.value)}
+            onKeyDown={onKeyDown}
+            className="h-11 bg-secondary/20 border-border/40 focus:bg-background"
+          />
+          <Button
+            type="button"
+            onClick={onAddInvite}
+            variant="secondary"
+            className="h-11 px-6"
+          >
+            Add
+          </Button>
+        </div>
+        {invitedEmails.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-4">
+            {invitedEmails.map((email) => (
+              <div
+                key={email}
+                className="bg-primary/5 text-primary border border-primary/20 px-3 py-1.5 rounded-full text-xs font-medium flex items-center gap-2 animate-in zoom-in-95 duration-200"
+              >
+                {email}
+                <button
+                  type="button"
+                  onClick={() => onRemoveInvite(email)}
+                  className="hover:text-primary/70 transition-colors"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="pt-4 space-y-3">
+        <Button
+          onClick={onSubmit}
+          className="w-full h-11 text-base font-bold shadow-lg shadow-primary/20"
+          disabled={loading}
+        >
+          {loading ? "Creating your space..." : "Finish Setup"}
+        </Button>
+        <Button
+          variant="ghost"
+          onClick={onSkip}
+          className="w-full h-11 text-muted-foreground hover:text-foreground"
+          disabled={loading}
+        >
+          Skip for now
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/auth/index.ts

@@ -0,0 +1,3 @@
+export * from "./InviteSteps";
+export * from "./LoginSteps";
+export * from "./RegisterSteps";

package/src/components/backlog/BacklogList.tsx

@@ -0,0 +1,92 @@
+/**
+ * Backlog List Component
+ *
+ * Displays unscheduled tasks in the backlog.
+ * Supports expand/collapse and drag-drop to sprints.
+ *
+ * @example
+ * <BacklogList
+ *   tasks={unscheduledTasks}
+ *   isExpanded={true}
+ *   onToggle={handleToggle}
+ *   onTaskClick={handleSelectTask}
+ *   onTaskDelete={handleDeleteTask}
+ * />
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { motion } from "framer-motion";
+import { Inbox } from "lucide-react";
+import { DraggableTask, DroppableSection } from "@/components/dnd";
+import { TaskCard } from "@/components/TaskCard";
+import { BacklogSection } from "./BacklogSection";
+
+interface BacklogListProps {
+  /** Unscheduled tasks to display */
+  tasks: Task[];
+  /** Whether the backlog section is expanded */
+  isExpanded: boolean;
+  /** Called when expanding/collapsing */
+  onToggle: () => void;
+  /** Called when a task is selected */
+  onTaskClick: (taskId: string) => void;
+  /** Called when delete action is triggered */
+  onTaskDelete: (taskId: string) => void;
+}
+
+export function BacklogList({
+  tasks,
+  isExpanded,
+  onToggle,
+  onTaskClick,
+  onTaskDelete,
+}: BacklogListProps) {
+  return (
+    <motion.div
+      layout="position"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.15, delay: 0.05 }}
+    >
+      <BacklogSection
+        id="backlog"
+        title="Backlog"
+        icon={<Inbox size={18} className="text-slate-400" />}
+        count={tasks.length}
+        isExpanded={isExpanded}
+        onToggle={onToggle}
+        accentColor="slate"
+      >
+        <DroppableSection id="backlog">
+          {tasks.length === 0 ? (
+            <div className="py-6 border border-dashed border-border/20 rounded-xl text-center text-muted-foreground/40 text-[11px] font-medium bg-secondary/5">
+              No tasks in backlog
+            </div>
+          ) : (
+            <div className="space-y-1.5 pt-1">
+              {tasks.map((task) => (
+                <motion.div
+                  key={task.id}
+                  layout="position"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                >
+                  <DraggableTask task={task}>
+                    <TaskCard
+                      task={task}
+                      variant="list"
+                      onClick={() => onTaskClick(task.id)}
+                      onDelete={onTaskDelete}
+                    />
+                  </DraggableTask>
+                </motion.div>
+              ))}
+            </div>
+          )}
+        </DroppableSection>
+      </BacklogSection>
+    </motion.div>
+  );
+}

package/src/components/backlog/BacklogSection.tsx

@@ -0,0 +1,137 @@
+/**
+ * Backlog Section Component
+ *
+ * Reusable section component for backlog and sprint organization.
+ * Supports collapsible header with count badge and actions.
+ *
+ * @example
+ * <BacklogSection
+ *   id="sprint-1"
+ *   title="Sprint 1"
+ *   icon={<Flag size={18} />}
+ *   count={12}
+ *   isExpanded={true}
+ *   onToggle={handleToggle}
+ *   accentColor="primary"
+ * >
+ *   { Section content }
+ * </BacklogSection>
+ */
+
+"use client";
+
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface BacklogSectionProps {
+  /** Unique section identifier */
+  id: string;
+  /** Display title */
+  title: string;
+  /** Icon to display */
+  icon: React.ReactNode;
+  /** Item count to display */
+  count: number;
+  /** Whether section is expanded */
+  isExpanded: boolean;
+  /** Called when toggling expand state */
+  onToggle: () => void;
+  /** Color theme for section */
+  accentColor: "slate" | "primary" | "amber" | "green" | "emerald";
+  /** Optional badge text */
+  badge?: string;
+  /** Optional action elements */
+  actions?: React.ReactNode;
+  /** Section content */
+  children: React.ReactNode;
+}
+
+export function BacklogSection({
+  id: _id,
+  title,
+  icon,
+  count,
+  isExpanded,
+  onToggle,
+  accentColor,
+  badge,
+  actions,
+  children,
+}: BacklogSectionProps) {
+  const colors = {
+    slate: "border-l-slate-400/60 bg-slate-50/50 dark:bg-slate-900/10",
+    primary: "border-l-primary bg-primary/[0.08] dark:bg-primary/[0.06]",
+    emerald:
+      "border-l-emerald-500 bg-emerald-500/[0.08] dark:bg-emerald-500/[0.06]",
+    amber: "border-l-amber-500 bg-amber-500/[0.08] dark:bg-amber-500/[0.06]",
+    green: "border-l-green-500 bg-green-500/[0.03] dark:bg-green-500/[0.02]",
+  };
+
+  const badgeColors = {
+    slate: "bg-muted text-muted-foreground",
+    primary: "bg-primary/20 text-primary dark:text-primary-foreground/90",
+    emerald: "bg-emerald-500/20 text-emerald-700 dark:text-emerald-400",
+    amber: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+    green: "bg-green-500/15 text-green-700 dark:text-green-400",
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-border/40 overflow-hidden transition-all duration-200",
+        colors[accentColor],
+        "border-l-4",
+        isExpanded
+          ? "shadow-sm ring-1 ring-border/10"
+          : "hover:bg-secondary/5 dark:hover:bg-white/2"
+      )}
+    >
+      {/* Header */}
+      <div
+        onClick={onToggle}
+        onKeyDown={(e) => e.key === "Enter" && onToggle()}
+        className="w-full flex items-center justify-between p-3.5 cursor-pointer select-none group"
+      >
+        <div className="flex items-center gap-3">
+          <div className="p-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 transition-colors">
+            {isExpanded ? (
+              <ChevronDown size={18} className="text-muted-foreground/70" />
+            ) : (
+              <ChevronRight size={18} className="text-muted-foreground/70" />
+            )}
+          </div>
+          <div className="opacity-70 group-hover:opacity-100 transition-opacity">
+            {icon}
+          </div>
+          <span className="font-semibold text-sm tracking-tight text-foreground/90">
+            {title}
+          </span>
+          <span className="text-[11px] text-muted-foreground/70 bg-background/50 border border-border/10 px-2 py-0.5 rounded-full font-mono">
+            {count}
+          </span>
+          {badge && (
+            <span
+              className={cn(
+                "text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full font-bold shadow-sm",
+                badgeColors[accentColor]
+              )}
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+        {actions && (
+          <div
+            className="flex items-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {actions}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {isExpanded && <div className="px-3.5 pb-3.5 space-y-1">{children}</div>}
+    </div>
+  );
+}

package/src/components/backlog/CompletedSprintItem.tsx

@@ -0,0 +1,95 @@
+/**
+ * Completed Sprint Item Component
+ *
+ * Displays a single completed sprint as a collapsible item.
+ * Shows completed tasks and allows viewing historical sprint details.
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { AnimatePresence, motion } from "framer-motion";
+import { CheckCircle, ChevronDown, ChevronRight } from "lucide-react";
+import { TaskCard } from "@/components/TaskCard";
+
+interface CompletedSprintItemProps {
+  /** Sprint name */
+  name: string;
+  /** Total tasks in sprint */
+  taskCount: number;
+  /** Completed tasks */
+  tasks: Task[];
+  /** Whether expanded */
+  isExpanded: boolean;
+  /** Called when toggling expand */
+  onToggle: () => void;
+  /** Called when task is clicked */
+  onTaskClick: (taskId: string) => void;
+}
+
+export function CompletedSprintItem({
+  name,
+  taskCount,
+  tasks,
+  isExpanded,
+  onToggle,
+  onTaskClick,
+}: CompletedSprintItemProps) {
+  return (
+    <div className="rounded-lg border border-border/40 overflow-hidden bg-card/20 group transition-colors hover:border-border/60">
+      <div
+        onClick={onToggle}
+        className="p-3 flex items-center justify-between cursor-pointer hover:bg-card/40 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div className="text-muted-foreground/60 group-hover:text-muted-foreground transition-colors">
+            {isExpanded ? (
+              <ChevronDown size={14} />
+            ) : (
+              <ChevronRight size={14} />
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <CheckCircle size={15} className="text-green-500/60" />
+            <span className="font-medium text-sm text-foreground/80">
+              {name}
+            </span>
+          </div>
+        </div>
+        <span className="text-[10px] font-medium text-muted-foreground/60 bg-secondary/30 px-3 py-0.5 rounded-full border border-border/20">
+          {taskCount} tasks
+        </span>
+      </div>
+
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <div className="px-3 pb-3 space-y-1">
+              {tasks.length === 0 ? (
+                <div className="py-4 text-center text-[10px] text-muted-foreground/40 italic">
+                  No tasks in this sprint
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {tasks.map((task) => (
+                    <TaskCard
+                      key={task.id}
+                      task={task}
+                      variant="list"
+                      onClick={() => onTaskClick(task.id)}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}