@locusai/web 0.1.7 → 0.2.2

package/src/components/task-panel/TaskProperties.tsx

@@ -0,0 +1,111 @@
+/**
+ * Task Properties Component
+ *
+ * Displays and allows editing of task metadata like status, priority, assignee, etc.
+ *
+ * @example
+ * <TaskProperties task={task} onUpdate={handleUpdate} />
+ */
+
+"use client";
+
+import {
+  AssigneeRole,
+  type Task,
+  TaskPriority,
+  TaskStatus,
+} from "@locusai/shared";
+import { format } from "date-fns";
+import { PropertyItem, SectionLabel } from "@/components";
+
+interface TaskPropertiesProps {
+  /** Task to display */
+  task: Task;
+  /** Whether a mutation is loading */
+  isLoading?: boolean;
+  /** Callback when task properties are updated */
+  onUpdate: (updates: Partial<Task>) => void;
+}
+
+/**
+ * Task Properties Component
+ *
+ * Features:
+ * - Editable status dropdown
+ * - Assignee role selection
+ * - Priority level
+ * - Due date picker
+ * - Operator/assignee field
+ *
+ * @component
+ */
+export function TaskProperties({
+  task,
+  isLoading = false,
+  onUpdate,
+}: TaskPropertiesProps) {
+  const formatDate = (date: string | number | Date) => {
+    return format(new Date(date), "MMM d, yyyy");
+  };
+
+  return (
+    <div className="mb-10">
+      <SectionLabel as="h4" className="mb-6 pb-2 border-b border-border/40">
+        Mission Specs
+      </SectionLabel>
+      <div className="space-y-3">
+        <PropertyItem
+          label="State"
+          value={task.status}
+          onEdit={(newValue: string) =>
+            onUpdate({ status: newValue as TaskStatus })
+          }
+          options={Object.values(TaskStatus)}
+          type="dropdown"
+          disabled={isLoading}
+        />
+        <PropertyItem
+          label="Role"
+          value={task.assigneeRole || "Unassigned"}
+          onEdit={(newValue: string) =>
+            onUpdate({
+              assigneeRole: newValue as AssigneeRole,
+            })
+          }
+          options={Object.values(AssigneeRole)}
+          type="dropdown"
+          disabled={isLoading}
+        />
+        <PropertyItem
+          label="Priority"
+          value={task.priority || TaskPriority.MEDIUM}
+          onEdit={(newValue: string) =>
+            onUpdate({ priority: newValue as TaskPriority })
+          }
+          options={Object.values(TaskPriority)}
+          type="dropdown"
+          disabled={isLoading}
+        />
+        <PropertyItem
+          label="Deadline"
+          value={task.dueDate ? formatDate(task.dueDate) : "Undetermined"}
+          onEdit={(newValue: string) =>
+            onUpdate({ dueDate: newValue ? new Date(newValue) : null })
+          }
+          type="date"
+          disabled={isLoading}
+        />
+        <PropertyItem
+          label="Operator"
+          value={task.assignedTo || "Available"}
+          onEdit={(newValue: string) =>
+            onUpdate({ assignedTo: newValue || null })
+          }
+          type="text"
+          disabled={isLoading}
+          placeholder="Enter operator name or ID"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/task-panel/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Task Panel Components
+ *
+ * Modular components for the task detail panel.
+ */
+
+export * from "./TaskActivity";
+export * from "./TaskChecklist";
+export * from "./TaskDescription";
+export * from "./TaskDocs";
+export * from "./TaskHeader";
+export * from "./TaskProperties";

package/src/components/typography/EmptyStateText.tsx

@@ -0,0 +1,59 @@
+/**
+ * Empty State Text Component
+ *
+ * Displays text for empty states with proper styling and visibility.
+ * Replaces scattered custom empty state typography throughout UI.
+ *
+ * Usage: Replace inline `text-[9px] font-black uppercase tracking-[0.2em] opacity-30`
+ *
+ * @example
+ * <EmptyStateText>No items found</EmptyStateText>
+ * <EmptyStateText icon={<Box />}>Empty workspace</EmptyStateText>
+ */
+
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface EmptyStateTextProps {
+  /** Text content */
+  children: React.ReactNode;
+  /** Optional icon to display */
+  icon?: React.ReactNode;
+  /** Optional className override */
+  className?: string;
+}
+
+/**
+ * Standardized empty state text component
+ *
+ * Features:
+ * - Proper contrast for empty states
+ * - Icon support
+ * - Readable but secondary appearance
+ * - Consistent spacing
+ * - Replaces scattered custom opacity patterns
+ *
+ * @component
+ */
+export function EmptyStateText({
+  children,
+  icon,
+  className,
+}: EmptyStateTextProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center",
+        "text-[9px] font-black uppercase tracking-[0.2em]",
+        "text-foreground/40",
+        "gap-2",
+        className
+      )}
+    >
+      {icon && <div className="text-foreground/30">{icon}</div>}
+      {children}
+    </div>
+  );
+}

package/src/components/typography/MetadataText.tsx

@@ -0,0 +1,65 @@
+/**
+ * Metadata Text Component
+ *
+ * Displays metadata, IDs, timestamps, or other secondary information.
+ * Replaces custom inline typography for technical info throughout UI.
+ *
+ * Usage: Replace inline `text-[8px] font-bold uppercase tracking-widest text-muted-foreground/50`
+ *
+ * @example
+ * <MetadataText>ID: abc-123</MetadataText>
+ * <MetadataText>Updated 2 hours ago</MetadataText>
+ */
+
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface MetadataTextProps {
+  /** Metadata content */
+  children: React.ReactNode;
+  /** Size variant */
+  size?: "xs" | "sm";
+  /** Optional className override */
+  className?: string;
+  /** HTML element (default: div) */
+  as?: "div" | "span" | "p";
+}
+
+/**
+ * Standardized metadata text component
+ *
+ * Features:
+ * - Smaller text for secondary metadata
+ * - Readable yet de-emphasized (60% opacity)
+ * - Wide letter spacing for technical info
+ * - Uppercase styling
+ * - Replaces scattered custom metadata classes
+ *
+ * @component
+ */
+export function MetadataText({
+  children,
+  size = "xs",
+  className,
+  as: Component = "div",
+}: MetadataTextProps) {
+  const sizeClasses = {
+    xs: "text-[8px]",
+    sm: "text-[9px]",
+  };
+
+  return (
+    <Component
+      className={cn(
+        sizeClasses[size],
+        "font-bold uppercase tracking-widest",
+        "text-foreground/60",
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/typography/SecondaryText.tsx

@@ -0,0 +1,60 @@
+/**
+ * Secondary Text Component
+ *
+ * Displays secondary or helper text with standardized styling.
+ * Replaces custom inline opacity classes like `text-muted-foreground/50` or `text-foreground/60`
+ *
+ * Usage: Replace inline text-[9px] text-muted-foreground/60
+ *
+ * @example
+ * <SecondaryText>Last updated 2 hours ago</SecondaryText>
+ * <SecondaryText size="sm">Optional description</SecondaryText>
+ */
+
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface SecondaryTextProps {
+  /** Text content */
+  children: React.ReactNode;
+  /** Text size variant */
+  size?: "xs" | "sm";
+  /** Optional className override */
+  className?: string;
+  /** HTML element (default: div) */
+  as?: "div" | "p" | "span" | "label";
+}
+
+/**
+ * Standardized secondary text component
+ *
+ * Features:
+ * - Readable secondary text (60-65% opacity)
+ * - Multiple size options
+ * - Replaces scattered custom opacity classes
+ * - Consistent spacing
+ * - Fully customizable
+ *
+ * @component
+ */
+export function SecondaryText({
+  children,
+  size = "xs",
+  className,
+  as: Component = "div",
+}: SecondaryTextProps) {
+  const sizeClasses = {
+    xs: "text-[9px] font-medium",
+    sm: "text-xs font-medium",
+  };
+
+  return (
+    <Component
+      className={cn(sizeClasses[size], "text-foreground/60", className)}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/typography/SectionLabel.tsx

@@ -0,0 +1,60 @@
+/**
+ * Section Label Component
+ *
+ * Displays a section header or label with standardized styling.
+ * Replaces custom inline typography for section titles throughout the UI.
+ *
+ * Usage: Replace inline text-[10px] font-black uppercase tracking-[0.2em]
+ *
+ * @example
+ * <SectionLabel>Settings</SectionLabel>
+ * <SectionLabel icon={<Gear />}>Advanced</SectionLabel>
+ */
+
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface SectionLabelProps {
+  /** Label text content */
+  children: React.ReactNode;
+  /** Optional icon to display before text */
+  icon?: React.ReactNode;
+  /** Optional className override */
+  className?: string;
+  /** Label HTML element (default: div) */
+  as?: "div" | "h3" | "h4" | "label" | "span";
+}
+
+/**
+ * Standardized section label component
+ *
+ * Features:
+ * - Consistent typography for section headers
+ * - Optional icon support
+ * - Readable secondary text (60% opacity)
+ * - Proper spacing and tracking
+ * - Fully customizable via className prop
+ *
+ * @component
+ */
+export function SectionLabel({
+  children,
+  icon,
+  className,
+  as: Component = "div",
+}: SectionLabelProps) {
+  return (
+    <Component
+      className={cn(
+        "text-[10px] font-black uppercase tracking-[0.2em] text-foreground/60",
+        "flex items-center gap-2",
+        className
+      )}
+    >
+      {icon}
+      {children}
+    </Component>
+  );
+}

package/src/components/typography/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Typography Components Barrel Export
+ *
+ * Centralized exports for all standardized typography components.
+ * Use these components instead of custom inline typography classes.
+ *
+ * @example
+ * import { SectionLabel, SecondaryText, EmptyStateText, MetadataText } from "@/components/typography";
+ */
+
+export { EmptyStateText } from "./EmptyStateText";
+export { MetadataText } from "./MetadataText";
+export { SecondaryText } from "./SecondaryText";
+export { SectionLabel } from "./SectionLabel";

package/src/components/typography-scales.tsx

@@ -0,0 +1,218 @@
+/**
+ * Typography Components
+ *
+ * Reusable components that apply consistent typography styles and scales.
+ * All typography variants are defined in `@/lib/typography` for centralized consistency.
+ *
+ * Readability Standards:
+ * - Primary text: text-foreground (100% opacity)
+ * - Secondary text: text-foreground/60-70% (improved from text-muted-foreground)
+ * - Labels: text-foreground/60% with uppercase
+ * - Disabled states: text-muted-foreground
+ *
+ * Features:
+ * - Semantic HTML heading tags (h1-h6)
+ * - Consistent spacing and tracking
+ * - Responsive text sizes
+ * - Built-in accessibility
+ * - Easy className overrides with cn()
+ *
+ * @example
+ * <Heading variant="h1">Page Title</Heading>
+ * <Body variant="body">Regular text</Body>
+ * <Label required>Field Label</Label>
+ */
+
+"use client";
+
+import { getTypographyClass } from "@/lib/typography";
+import { cn } from "@/lib/utils";
+
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /** Heading level and size variant */
+  variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+
+/**
+ * Heading Component
+ *
+ * Renders semantic heading tags with consistent typography.
+ * Maps variant prop to appropriate heading level.
+ *
+ * @component
+ */
+export function Heading({
+  variant = "h2",
+  className,
+  children,
+  ...props
+}: HeadingProps) {
+  const headingLevel = variant as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+  switch (headingLevel) {
+    case "h1":
+      return (
+        <h1 className={cn(getTypographyClass("h1"), className)} {...props}>
+          {children}
+        </h1>
+      );
+    case "h2":
+      return (
+        <h2 className={cn(getTypographyClass("h2"), className)} {...props}>
+          {children}
+        </h2>
+      );
+    case "h3":
+      return (
+        <h3 className={cn(getTypographyClass("h3"), className)} {...props}>
+          {children}
+        </h3>
+      );
+    case "h4":
+      return (
+        <h4 className={cn(getTypographyClass("h4"), className)} {...props}>
+          {children}
+        </h4>
+      );
+    case "h5":
+      return (
+        <h5 className={cn(getTypographyClass("h5"), className)} {...props}>
+          {children}
+        </h5>
+      );
+    case "h6":
+      return (
+        <h6 className={cn(getTypographyClass("h6"), className)} {...props}>
+          {children}
+        </h6>
+      );
+  }
+}
+
+interface BodyProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Body text size variant */
+  variant?: "bodyLg" | "body" | "bodySm";
+}
+
+/**
+ * Body Component
+ *
+ * Renders paragraph text with consistent typography.
+ * Supports multiple size variants for flexible content layout.
+ *
+ * @component
+ */
+export function Body({
+  variant = "body",
+  className,
+  children,
+  ...props
+}: BodyProps) {
+  return (
+    <p className={cn(getTypographyClass(variant), className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+interface LabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+  /** Whether field is required (shows red asterisk) */
+  required?: boolean;
+  /** Label size variant */
+  variant?: "label" | "caption" | "captionSm";
+}
+
+/**
+ * Label Component
+ *
+ * Renders form label with optional required indicator.
+ * Supports multiple size variants for form layouts.
+ * Includes accessibility features for form associations.
+ *
+ * @component
+ */
+export function Label({
+  variant = "label",
+  required,
+  className,
+  children,
+  ...props
+}: LabelProps) {
+  return (
+    <label className={cn(getTypographyClass(variant), className)} {...props}>
+      {children}
+      {required && <span className="text-destructive ml-0.5">*</span>}
+    </label>
+  );
+}
+
+interface CaptionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Caption size variant */
+  variant?: "caption" | "captionSm";
+}
+
+/**
+ * Caption Component
+ *
+ * Renders smaller supplementary text for captions and helper text.
+ * Provides improved readability with text-foreground/60-65%.
+ *
+ * @component
+ */
+export function Caption({
+  variant = "caption",
+  className,
+  children,
+  ...props
+}: CaptionProps) {
+  return (
+    <div className={cn(getTypographyClass(variant), className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  /** Code variant (inline or block) */
+  variant?: "code" | "codeBlock";
+  /** Whether to render as code block (pre tag) */
+  block?: boolean;
+}
+
+/**
+ * Code Component
+ *
+ * Renders inline code or code blocks with monospace font.
+ * Supports both <code> and <pre> tags for different contexts.
+ *
+ * @component
+ */
+export function Code({
+  variant,
+  block,
+  className,
+  children,
+  ...props
+}: CodeProps) {
+  const v = block ? "codeBlock" : variant || "code";
+
+  if (block) {
+    return (
+      <pre
+        className={cn(getTypographyClass(v), className)}
+        {...(props as React.HTMLAttributes<HTMLPreElement>)}
+      >
+        {children}
+      </pre>
+    );
+  }
+
+  return (
+    <code
+      className={cn(getTypographyClass(v), className)}
+      {...(props as React.HTMLAttributes<HTMLElement>)}
+    >
+      {children}
+    </code>
+  );
+}