npm - @locusai/web - Versions diffs - 0.1.0 - Mend

@locusai/web 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/LICENSE +21 -0
package/next.config.js +7 -0
package/package.json +37 -0
package/postcss.config.mjs +5 -0
package/src/app/backlog/page.tsx +19 -0
package/src/app/docs/page.tsx +7 -0
package/src/app/globals.css +603 -0
package/src/app/layout.tsx +43 -0
package/src/app/page.tsx +16 -0
package/src/app/providers.tsx +16 -0
package/src/app/settings/page.tsx +194 -0
package/src/components/BoardFilter.tsx +98 -0
package/src/components/Header.tsx +21 -0
package/src/components/PropertyItem.tsx +98 -0
package/src/components/Sidebar.tsx +109 -0
package/src/components/TaskCard.tsx +138 -0
package/src/components/TaskCreateModal.tsx +243 -0
package/src/components/TaskPanel.tsx +765 -0
package/src/components/index.ts +7 -0
package/src/components/ui/Badge.tsx +77 -0
package/src/components/ui/Button.tsx +47 -0
package/src/components/ui/Checkbox.tsx +52 -0
package/src/components/ui/Dropdown.tsx +107 -0
package/src/components/ui/Input.tsx +36 -0
package/src/components/ui/Modal.tsx +79 -0
package/src/components/ui/Textarea.tsx +21 -0
package/src/components/ui/index.ts +7 -0
package/src/hooks/useTasks.ts +119 -0
package/src/lib/api-client.ts +24 -0
package/src/lib/utils.ts +6 -0
package/src/services/doc.service.ts +27 -0
package/src/services/index.ts +3 -0
package/src/services/sprint.service.ts +26 -0
package/src/services/task.service.ts +75 -0
package/src/views/Backlog.tsx +691 -0
package/src/views/Board.tsx +306 -0
package/src/views/Docs.tsx +625 -0
package/tsconfig.json +21 -0

package/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import { Roboto } from "next/font/google";
+import "./globals.css";
+import { Header } from "@/components/Header";
+import { Sidebar } from "@/components/Sidebar";
+import { Providers } from "./providers";
+const roboto = Roboto({
+  weight: ["300", "400", "500", "700"],
+  subsets: ["latin"],
+  display: "swap",
+});
+export const metadata: Metadata = {
+  title: "Locus | Engineering Workspace",
+  description:
+    "Modernized task management and documentation for engineering teams.",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${roboto.className} antialiased`}>
+        <Providers>
+          <div className="flex h-screen overflow-hidden bg-background">
+            <Sidebar />
+            <main className="flex-1 overflow-auto bg-background p-8">
+              <div className="max-w-[1440px] mx-auto">
+                <Header />
+                {children}
+              </div>
+            </main>
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+"use client";
+import dynamic from "next/dynamic";
+const Board = dynamic(() => import("@/views/Board").then((mod) => mod.Board), {
+  ssr: false,
+  loading: () => (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="animate-pulse text-muted-foreground">Loading...</div>
+    </div>
+  ),
+});
+export default function Home() {
+  return <Board />;
+}

package/src/app/providers.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+"use client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({}));
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}

package/src/app/settings/page.tsx ADDED Viewed

@@ -0,0 +1,194 @@
+"use client";
+import {
+  Bell,
+  Globe,
+  Moon,
+  Palette,
+  Shield,
+  Sun,
+  User,
+  Zap,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui";
+interface SettingItemProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}
+function SettingItem({ icon, title, description, children }: SettingItemProps) {
+  return (
+    <div className="flex items-start justify-between p-4 rounded-xl hover:bg-secondary/30 transition-colors">
+      <div className="flex gap-4">
+        <div className="w-10 h-10 rounded-xl bg-secondary flex items-center justify-center text-muted-foreground shrink-0">
+          {icon}
+        </div>
+        <div>
+          <h4 className="font-medium text-foreground">{title}</h4>
+          <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
+        </div>
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+}
+function Toggle({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onChange(!checked)}
+      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${
+        checked ? "bg-primary" : "bg-secondary"
+      }`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition ${
+          checked ? "translate-x-5" : "translate-x-0"
+        }`}
+      />
+    </button>
+  );
+}
+export default function SettingsPage() {
+  const [darkMode, setDarkMode] = useState(true);
+  const [notifications, setNotifications] = useState(true);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const [compactMode, setCompactMode] = useState(false);
+  return (
+    <div className="max-w-3xl">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold tracking-tight text-foreground">
+          Settings
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Manage your workspace preferences and configuration.
+        </p>
+      </div>
+      {/* Appearance Section */}
+      <div className="mb-8">
+        <h3 className="text-xs font-bold uppercase tracking-widest text-muted-foreground mb-4 px-4">
+          Appearance
+        </h3>
+        <div className="bg-card border border-border/50 rounded-2xl overflow-hidden divide-y divide-border/50">
+          <SettingItem
+            icon={darkMode ? <Moon size={18} /> : <Sun size={18} />}
+            title="Dark Mode"
+            description="Toggle between light and dark theme"
+          >
+            <Toggle checked={darkMode} onChange={setDarkMode} />
+          </SettingItem>
+          <SettingItem
+            icon={<Palette size={18} />}
+            title="Accent Color"
+            description="Choose your preferred accent color"
+          >
+            <div className="flex gap-2">
+              {["#6366f1", "#8b5cf6", "#06b6d4", "#10b981", "#f59e0b"].map(
+                (color) => (
+                  <button
+                    key={color}
+                    className="w-6 h-6 rounded-full border-2 border-transparent hover:border-foreground/30 transition-colors"
+                    style={{ backgroundColor: color }}
+                  />
+                )
+              )}
+            </div>
+          </SettingItem>
+          <SettingItem
+            icon={<Zap size={18} />}
+            title="Compact Mode"
+            description="Reduce spacing for more content visibility"
+          >
+            <Toggle checked={compactMode} onChange={setCompactMode} />
+          </SettingItem>
+        </div>
+      </div>
+      {/* Notifications Section */}
+      <div className="mb-8">
+        <h3 className="text-xs font-bold uppercase tracking-widest text-muted-foreground mb-4 px-4">
+          Notifications
+        </h3>
+        <div className="bg-card border border-border/50 rounded-2xl overflow-hidden divide-y divide-border/50">
+          <SettingItem
+            icon={<Bell size={18} />}
+            title="Push Notifications"
+            description="Receive notifications for task updates"
+          >
+            <Toggle checked={notifications} onChange={setNotifications} />
+          </SettingItem>
+          <SettingItem
+            icon={<Globe size={18} />}
+            title="Auto Refresh"
+            description="Automatically refresh board data"
+          >
+            <Toggle checked={autoRefresh} onChange={setAutoRefresh} />
+          </SettingItem>
+        </div>
+      </div>
+      {/* Account Section */}
+      <div className="mb-8">
+        <h3 className="text-xs font-bold uppercase tracking-widest text-muted-foreground mb-4 px-4">
+          Account
+        </h3>
+        <div className="bg-card border border-border/50 rounded-2xl overflow-hidden divide-y divide-border/50">
+          <SettingItem
+            icon={<User size={18} />}
+            title="Profile"
+            description="Update your personal information"
+          >
+            <Button variant="secondary" size="sm">
+              Edit
+            </Button>
+          </SettingItem>
+          <SettingItem
+            icon={<Shield size={18} />}
+            title="Security"
+            description="Manage authentication settings"
+          >
+            <Button variant="secondary" size="sm">
+              Configure
+            </Button>
+          </SettingItem>
+        </div>
+      </div>
+      {/* Danger Zone */}
+      <div>
+        <h3 className="text-xs font-bold uppercase tracking-widest text-destructive mb-4 px-4">
+          Danger Zone
+        </h3>
+        <div className="bg-destructive/5 border border-destructive/20 rounded-2xl p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h4 className="font-medium text-foreground">Reset Workspace</h4>
+              <p className="text-sm text-muted-foreground mt-0.5">
+                Delete all tasks, documents, and settings
+              </p>
+            </div>
+            <Button variant="danger" size="sm">
+              Reset
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/BoardFilter.tsx ADDED Viewed

@@ -0,0 +1,98 @@
+"use client";
+import { AssigneeRole, TaskPriority } from "@locusai/shared";
+import { Search, X } from "lucide-react";
+import { Button, Dropdown, Input } from "@/components/ui";
+interface BoardFilterProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  priorityFilter: TaskPriority | "ALL";
+  onPriorityChange: (priority: TaskPriority | "ALL") => void;
+  assigneeFilter: AssigneeRole | "ALL";
+  onAssigneeChange: (assignee: AssigneeRole | "ALL") => void;
+  onClearFilters: () => void;
+  hasActiveFilters: boolean;
+}
+const PRIORITY_FILTER_OPTIONS = [
+  { value: "ALL" as const, label: "All Priorities" },
+  { value: TaskPriority.LOW, label: "Low" },
+  { value: TaskPriority.MEDIUM, label: "Medium" },
+  { value: TaskPriority.HIGH, label: "High" },
+  { value: TaskPriority.CRITICAL, label: "Critical" },
+];
+const ASSIGNEE_FILTER_OPTIONS = [
+  { value: "ALL" as const, label: "All Assignees" },
+  ...Object.values(AssigneeRole).map((role) => ({
+    value: role,
+    label: role.charAt(0) + role.slice(1).toLowerCase(),
+  })),
+];
+export function BoardFilter({
+  searchQuery,
+  onSearchChange,
+  priorityFilter,
+  onPriorityChange,
+  assigneeFilter,
+  onAssigneeChange,
+  onClearFilters,
+  hasActiveFilters,
+}: BoardFilterProps) {
+  return (
+    <div className="flex flex-wrap items-end gap-4 mb-8 bg-card p-4 rounded-xl border shadow-sm">
+      <div className="flex-1 min-w-[300px]">
+        <Input
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Filter by title or ID..."
+          className="search-input h-10"
+          icon={<Search size={16} />}
+          rightElement={
+            searchQuery ? (
+              <button
+                className="hover:text-destructive transition-colors"
+                onClick={() => onSearchChange("")}
+              >
+                <X size={14} />
+              </button>
+            ) : undefined
+          }
+        />
+      </div>
+      <div className="flex gap-4">
+        <div className="w-[180px]">
+          <Dropdown
+            label="Priority Filter"
+            value={priorityFilter}
+            onChange={onPriorityChange}
+            options={PRIORITY_FILTER_OPTIONS}
+          />
+        </div>
+        <div className="w-[180px]">
+          <Dropdown
+            label="Assignee Filter"
+            value={assigneeFilter}
+            onChange={onAssigneeChange}
+            options={ASSIGNEE_FILTER_OPTIONS}
+          />
+        </div>
+      </div>
+      {hasActiveFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-muted-foreground hover:text-destructive h-10 px-4"
+          onClick={onClearFilters}
+        >
+          <X size={14} className="mr-2" />
+          Clear All
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/Header.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+"use client";
+import { Search } from "lucide-react";
+export function Header() {
+  return (
+    <header className="flex items-center mb-6 py-3">
+      <div className="relative flex-1 max-w-md group">
+        <Search
+          size={16}
+          className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors"
+        />
+        <input
+          type="text"
+          placeholder="Search tasks, docs... (⌘K)"
+          className="w-full bg-secondary/40 border border-border/50 rounded-lg pl-10 pr-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/70 outline-none transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-background hover:bg-secondary/60"
+        />
+      </div>
+    </header>
+  );
+}

package/src/components/PropertyItem.tsx ADDED Viewed

@@ -0,0 +1,98 @@
+"use client";
+import { Check, Edit2, X } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./ui/Button";
+import { Dropdown } from "./ui/Dropdown";
+import { Input } from "./ui/Input";
+export interface PropertyItemProps {
+  label: string;
+  value: string | number;
+  onEdit: (newValue: string) => void;
+  options?: string[];
+  type?: "text" | "date" | "dropdown";
+}
+export function PropertyItem({
+  label,
+  value,
+  onEdit,
+  options,
+  type = "text",
+}: PropertyItemProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(String(value));
+  const handleSave = () => {
+    onEdit(editValue);
+    setIsEditing(false);
+  };
+  const handleCancel = () => {
+    setEditValue(String(value));
+    setIsEditing(false);
+  };
+  return (
+    <div className="flex flex-col gap-1.5 py-3 first:pt-0 last:pb-0">
+      <span className="text-[10px] items-center font-bold uppercase tracking-widest text-muted-foreground">
+        {label}
+      </span>
+      <div className="relative group min-h-[32px] flex items-center">
+        {isEditing ? (
+          <div className="flex items-center gap-2 w-full">
+            <div className="flex-1">
+              {type === "dropdown" && options ? (
+                <Dropdown
+                  value={editValue}
+                  options={options.map((o) => ({ value: o, label: o }))}
+                  onChange={(v) => setEditValue(v)}
+                />
+              ) : (
+                <Input
+                  type={type}
+                  value={editValue}
+                  onChange={(e) => setEditValue(e.target.value)}
+                  autoFocus
+                  className="h-8 py-1"
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-8 w-8"
+                onClick={handleSave}
+              >
+                <Check size={14} />
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="h-8 w-8"
+                onClick={handleCancel}
+              >
+                <X size={14} />
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div
+            className="flex items-center justify-between gap-2 w-full cursor-pointer hover:bg-secondary/50 px-2 -mx-2 py-1 rounded-md transition-colors"
+            onClick={() => setIsEditing(true)}
+          >
+            <span className="text-sm font-medium text-foreground truncate">
+              {value || "None"}
+            </span>
+            <Edit2
+              size={12}
+              className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/Sidebar.tsx ADDED Viewed

@@ -0,0 +1,109 @@
+"use client";
+import {
+  ChevronRight,
+  Command,
+  FileText,
+  LayoutDashboard,
+  List,
+  Settings,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+export function Sidebar() {
+  const pathname = usePathname();
+  const menuItems = [
+    {
+      href: "/",
+      label: "Board",
+      icon: LayoutDashboard,
+      description: "Manage tasks",
+    },
+    {
+      href: "/backlog", // Added Backlog item
+      label: "Backlog",
+      icon: List,
+      description: "Manage backlog items",
+    },
+    {
+      href: "/docs",
+      label: "Library",
+      icon: FileText,
+      description: "Documents",
+    },
+  ];
+  return (
+    <aside className="w-[260px] flex flex-col border-r border-border/50 bg-card/50 backdrop-blur-sm h-full">
+      {/* Logo */}
+      <div className="flex items-center gap-3 p-5 border-b border-border/50">
+        <div className="bg-linear-to-br from-primary to-primary/70 text-primary-foreground p-2 rounded-xl shadow-lg shadow-primary/20">
+          <Command size={20} />
+        </div>
+        <div>
+          <h2 className="text-lg font-bold tracking-tight text-foreground">
+            Locus
+          </h2>
+          <p className="text-[10px] text-muted-foreground font-medium">
+            Engineering Workspace
+          </p>
+        </div>
+      </div>
+      {/* Navigation */}
+      <div className="flex-1 p-4">
+        <div className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground/70 mb-3 px-3">
+          Navigation
+        </div>
+        <nav className="space-y-1">
+          {menuItems.map((item) => {
+            const Icon = item.icon;
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "group flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-xl transition-all",
+                  isActive
+                    ? "bg-primary text-primary-foreground shadow-md shadow-primary/20"
+                    : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+                )}
+              >
+                <Icon
+                  size={18}
+                  className={
+                    isActive ? "" : "group-hover:scale-110 transition-transform"
+                  }
+                />
+                <div className="flex-1">
+                  <span className="block">{item.label}</span>
+                </div>
+                {isActive && <ChevronRight size={14} className="opacity-70" />}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+      {/* Footer */}
+      <div className="p-4 border-t border-border/50">
+        <Link
+          href="/settings"
+          className={cn(
+            "flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-xl transition-all",
+            pathname === "/settings"
+              ? "bg-secondary text-foreground"
+              : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+          )}
+        >
+          <Settings size={18} />
+          <span>Settings</span>
+        </Link>
+      </div>
+    </aside>
+  );
+}