@locusai/web 0.1.7 → 0.2.2

package/src/lib/constants.ts

@@ -0,0 +1,83 @@
+/**
+ * Application Constants
+ *
+ * Centralized configuration and constants.
+ */
+
+/**
+ * Loading timeouts and delays
+ */
+export const TIMING = {
+  DEBOUNCE_MS: 300,
+  THROTTLE_MS: 500,
+  ANIMATION_DURATION_MS: 300,
+  TOAST_DURATION_MS: 3000,
+  LONG_TOAST_DURATION_MS: 5000,
+  SKELETON_LOAD_TIME_MS: 2000,
+} as const;
+
+/**
+ * Z-index layers for proper stacking
+ */
+export const Z_INDEX = {
+  BASE: 0,
+  DROPDOWN: 100,
+  STICKY: 500,
+  FIXED: 900,
+  MODAL_OVERLAY: 940,
+  MODAL: 950,
+  TOOLTIP: 1000,
+  NOTIFICATION: 1100,
+} as const;
+
+/**
+ * Keyboard shortcuts
+ */
+export const SHORTCUTS = {
+  CREATE_TASK: "Alt+N",
+  CREATE_SPRINT: "Alt+S",
+  CLOSE_MODAL: "Escape",
+  SAVE: "Cmd+S",
+  SEARCH: "Cmd+K",
+} as const;
+
+/**
+ * API rate limiting
+ */
+export const RATE_LIMITS = {
+  CREATE_SPRINT_MS: 1000,
+  CREATE_TASK_MS: 500,
+  UPDATE_TASK_MS: 500,
+  DELETE_TASK_MS: 500,
+} as const;
+
+/**
+ * Pagination and limits
+ */
+export const PAGINATION = {
+  DEFAULT_LIMIT: 50,
+  DEFAULT_OFFSET: 0,
+  MAX_LIMIT: 100,
+} as const;
+
+/**
+ * Validation rules
+ */
+export const VALIDATION = {
+  MIN_NAME_LENGTH: 1,
+  MAX_NAME_LENGTH: 255,
+  MIN_DESC_LENGTH: 0,
+  MAX_DESC_LENGTH: 10000,
+  MAX_COMMENT_LENGTH: 5000,
+} as const;
+
+/**
+ * React Query configuration
+ */
+export const QUERY_CONFIG = {
+  DEFAULT_STALE_TIME: 0,
+  DEFAULT_GC_TIME: 0,
+  DEFAULT_RETRY: 1,
+  REFETCH_ON_WINDOW_FOCUS: false,
+  MUTATION_RETRY: 1,
+} as const;

package/src/lib/options.ts

@@ -0,0 +1,96 @@
+import { AssigneeRole, TaskPriority, TaskStatus } from "@locusai/shared";
+import { capitalize } from "./utils";
+
+export interface OptionItem<T extends string = string> {
+  value: T;
+  label: string;
+  color?: string;
+}
+
+/**
+ * Status color mapping for UI consistency.
+ */
+const STATUS_COLOR_MAP: Record<TaskStatus, string> = {
+  [TaskStatus.BACKLOG]: "#64748b",
+  [TaskStatus.IN_PROGRESS]: "#f59e0b",
+  [TaskStatus.REVIEW]: "#a855f7",
+  [TaskStatus.VERIFICATION]: "#38bdf8",
+  [TaskStatus.DONE]: "#10b981",
+  [TaskStatus.BLOCKED]: "#ef4444",
+};
+
+/**
+ * Priority color mapping for UI consistency.
+ */
+const PRIORITY_COLOR_MAP: Record<TaskPriority, string> = {
+  [TaskPriority.LOW]: "#64748b",
+  [TaskPriority.MEDIUM]: "#38bdf8",
+  [TaskPriority.HIGH]: "#f59e0b",
+  [TaskPriority.CRITICAL]: "#ef4444",
+};
+
+/**
+ * Get all available task status options.
+ */
+export function getStatusOptions(): OptionItem<TaskStatus>[] {
+  return Object.values(TaskStatus).map((status) => ({
+    value: status,
+    label: status.replace(/_/g, " "),
+    color: STATUS_COLOR_MAP[status],
+  }));
+}
+
+/**
+ * Get status color for a specific status value.
+ */
+export function getStatusColor(status: TaskStatus): string {
+  return STATUS_COLOR_MAP[status];
+}
+
+/**
+ * Get all available priority options.
+ */
+export function getPriorityOptions(): OptionItem<TaskPriority>[] {
+  return [
+    {
+      value: TaskPriority.LOW,
+      label: "Low",
+      color: PRIORITY_COLOR_MAP[TaskPriority.LOW],
+    },
+    {
+      value: TaskPriority.MEDIUM,
+      label: "Medium",
+      color: PRIORITY_COLOR_MAP[TaskPriority.MEDIUM],
+    },
+    {
+      value: TaskPriority.HIGH,
+      label: "High",
+      color: PRIORITY_COLOR_MAP[TaskPriority.HIGH],
+    },
+    {
+      value: TaskPriority.CRITICAL,
+      label: "Critical",
+      color: PRIORITY_COLOR_MAP[TaskPriority.CRITICAL],
+    },
+  ];
+}
+
+/**
+ * Get all available assignee role options.
+ */
+export function getAssigneeOptions(): OptionItem<AssigneeRole>[] {
+  return Object.values(AssigneeRole).map((role) => ({
+    value: role,
+    label: capitalize(role),
+  }));
+}
+
+/**
+ * Get all available membership role options.
+ */
+export function getMembershipRoleOptions(): OptionItem[] {
+  return [
+    { value: "MEMBER", label: "Member" },
+    { value: "ADMIN", label: "Admin" },
+  ];
+}

package/src/lib/query-keys.ts

@@ -0,0 +1,91 @@
+/**
+ * Query Key Factory
+ *
+ * Centralizes all React Query keys to ensure consistent caching and invalidation.
+ * Follows the pattern: [entity, scope, ...params]
+ */
+
+export const queryKeys = {
+  workspaces: {
+    all: () => ["workspaces"] as const,
+    list: () => [...queryKeys.workspaces.all(), "list"] as const,
+    detail: (id: string) =>
+      [...queryKeys.workspaces.all(), "detail", id] as const,
+    stats: (id: string) =>
+      [...queryKeys.workspaces.all(), "stats", id] as const,
+    activity: (id: string) =>
+      [...queryKeys.workspaces.all(), "activity", id] as const,
+  },
+  tasks: {
+    all: () => ["tasks"] as const,
+    list: (workspaceId?: string | null) =>
+      [
+        ...queryKeys.tasks.all(),
+        "list",
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+    detail: (id: string, workspaceId?: string) =>
+      [...queryKeys.tasks.all(), "detail", id, { workspaceId }] as const,
+    backlog: (workspaceId?: string | null) =>
+      [
+        ...queryKeys.tasks.all(),
+        "backlog",
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+  },
+  sprints: {
+    all: () => ["sprints"] as const,
+    list: (workspaceId?: string | null) =>
+      [
+        ...queryKeys.sprints.all(),
+        "list",
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+    active: (workspaceId?: string | null) =>
+      [
+        ...queryKeys.sprints.all(),
+        "active",
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+    detail: (id: string, workspaceId?: string) =>
+      [...queryKeys.sprints.all(), "detail", id, { workspaceId }] as const,
+  },
+  docs: {
+    all: () => ["docs"] as const,
+    list: (workspaceId?: string | null) =>
+      [
+        ...queryKeys.docs.all(),
+        "list",
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+    detail: (id: string, workspaceId?: string | null) =>
+      [
+        ...queryKeys.docs.all(),
+        "detail",
+        id,
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+  },
+  docGroups: {
+    all: () => ["doc-groups"] as const,
+    list: (workspaceId?: string | null) =>
+      [
+        ...queryKeys.docGroups.all(),
+        "list",
+        { workspaceId: workspaceId ?? undefined },
+      ] as const,
+  },
+  organizations: {
+    all: () => ["organizations"] as const,
+    list: () => [...queryKeys.organizations.all(), "list"] as const,
+    detail: (id: string) =>
+      [...queryKeys.organizations.all(), "detail", id] as const,
+    members: (id: string) =>
+      [...queryKeys.organizations.all(), "members", id] as const,
+  },
+  invitations: {
+    all: () => ["invitations"] as const,
+    list: (orgId: string) =>
+      [...queryKeys.invitations.all(), "list", orgId] as const,
+  },
+};

package/src/lib/typography.ts

@@ -0,0 +1,103 @@
+/**
+ * Typography System
+ *
+ * Centralized typography scales and variants for brand-consistent design.
+ * All text components should consume from this system.
+ *
+ * Readability Standards:
+ * - Primary text: text-foreground (100%)
+ * - Secondary text: text-foreground/60-70% (better contrast than text-muted-foreground)
+ * - Tertiary text: text-foreground/40-50%
+ * - Labels: text-foreground/60% with uppercase
+ * - Disabled: text-muted-foreground
+ */
+
+export const typographyConfig = {
+  // Heading scales
+  h1: {
+    className: "text-4xl font-black tracking-tight text-foreground",
+    description: "Page titles, major sections",
+  },
+  h2: {
+    className: "text-3xl font-bold tracking-tight text-foreground",
+    description: "Section headers",
+  },
+  h3: {
+    className: "text-2xl font-bold tracking-tight text-foreground",
+    description: "Subsection headers",
+  },
+  h4: {
+    className: "text-xl font-semibold tracking-tight text-foreground",
+    description: "Component titles",
+  },
+  h5: {
+    className: "text-lg font-semibold tracking-tight text-foreground",
+    description: "Card titles, labels",
+  },
+  h6: {
+    className: "text-base font-semibold tracking-tight text-foreground",
+    description: "Minor titles",
+  },
+
+  // Body text
+  bodyLg: {
+    className: "text-base font-normal leading-relaxed text-foreground",
+    description: "Large body text",
+  },
+  body: {
+    className: "text-sm font-normal leading-relaxed text-foreground",
+    description: "Standard body text",
+  },
+  bodySm: {
+    className: "text-xs font-normal leading-relaxed text-foreground/70",
+    description: "Small body text with better secondary contrast",
+  },
+
+  // Labels and captions - standardized for readability
+  label: {
+    className:
+      "text-[10px] font-bold uppercase tracking-widest text-foreground/60",
+    description: "Form labels, section labels - readable secondary text",
+  },
+  caption: {
+    className: "text-xs font-medium text-foreground/65",
+    description:
+      "Captions, helper text - improved contrast over muted-foreground",
+  },
+  captionSm: {
+    className: "text-[10px] font-medium text-foreground/60",
+    description: "Small captions - readable secondary text",
+  },
+
+  // Code and monospace
+  code: {
+    className:
+      "text-sm font-mono bg-secondary/30 px-2 py-1 rounded text-foreground",
+    description: "Inline code",
+  },
+  codeBlock: {
+    className: "text-sm font-mono leading-relaxed text-foreground",
+    description: "Code blocks",
+  },
+} as const;
+
+// Export for use in components
+export type TypographyVariant = keyof typeof typographyConfig;
+
+/**
+ * Get typography class name by variant
+ * @example
+ * const titleClass = getTypographyClass('h1');
+ */
+export function getTypographyClass(variant: TypographyVariant): string {
+  return typographyConfig[variant].className;
+}
+
+/**
+ * Typography component props helper
+ */
+export interface TypographyProps {
+  variant: TypographyVariant;
+  className?: string;
+  children: React.ReactNode;
+}

package/src/lib/utils.ts

@@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/src/lib/validation.ts

@@ -0,0 +1,192 @@
+/**
+ * Authentication validation schemas and utilities
+ * Centralized validation for login, register, and invite flows
+ */
+
+import { z } from "zod";
+
+/**
+ * Email validation - used across all auth flows
+ */
+export const EmailSchema = z
+  .string()
+  .email("Invalid email address")
+  .toLowerCase();
+
+/**
+ * OTP validation - 6-digit code
+ */
+export const OtpSchema = z.string().regex(/^\d{6}$/, "OTP must be 6 digits");
+
+/**
+ * User name validation
+ */
+export const NameSchema = z
+  .string()
+  .min(1, "Name is required")
+  .max(255, "Name must be less than 255 characters");
+
+/**
+ * Company/organization name validation
+ */
+export const CompanyNameSchema = z
+  .string()
+  .min(1, "Company name is required")
+  .max(255, "Company name must be less than 255 characters");
+
+/**
+ * Workspace name validation
+ */
+export const WorkspaceNameSchema = z
+  .string()
+  .min(1, "Workspace name is required")
+  .max(255, "Workspace name must be less than 255 characters");
+
+/**
+ * Team size options
+ */
+export const TeamSizeSchema = z.enum([
+  "solo",
+  "2-10",
+  "11-50",
+  "51-200",
+  "200+",
+]);
+
+/**
+ * User role options
+ */
+export const UserRoleSchema = z.enum([
+  "developer",
+  "designer",
+  "product_manager",
+  "other",
+]);
+
+/**
+ * Login flow validation
+ */
+export const LoginEmailSchema = z.object({
+  email: EmailSchema,
+});
+
+export const LoginOtpSchema = z.object({
+  email: EmailSchema,
+  otp: OtpSchema,
+});
+
+export type LoginEmail = z.infer<typeof LoginEmailSchema>;
+export type LoginOtp = z.infer<typeof LoginOtpSchema>;
+
+/**
+ * Registration flow validation
+ */
+export const RegisterEmailSchema = z.object({
+  email: EmailSchema,
+});
+
+export const RegisterOtpSchema = z.object({
+  otp: OtpSchema,
+});
+
+export const RegisterProfileSchema = z.object({
+  name: NameSchema,
+  userRole: UserRoleSchema,
+});
+
+export const RegisterOrganizationSchema = z.object({
+  companyName: CompanyNameSchema,
+  teamSize: TeamSizeSchema,
+});
+
+export const RegisterWorkspaceSchema = z.object({
+  workspaceName: WorkspaceNameSchema,
+});
+
+export const RegisterInviteSchema = z.object({
+  invitedEmails: z.array(EmailSchema),
+});
+
+export const CompleteRegistrationSchema = z.object({
+  email: EmailSchema,
+  otp: OtpSchema,
+  name: NameSchema,
+  companyName: CompanyNameSchema.optional(),
+  teamSize: TeamSizeSchema,
+  userRole: UserRoleSchema,
+  workspaceName: WorkspaceNameSchema.optional(),
+  invitedEmails: z.array(EmailSchema).optional(),
+});
+
+export type RegisterProfile = z.infer<typeof RegisterProfileSchema>;
+export type RegisterOrganization = z.infer<typeof RegisterOrganizationSchema>;
+export type RegisterWorkspace = z.infer<typeof RegisterWorkspaceSchema>;
+export type RegisterInvite = z.infer<typeof RegisterInviteSchema>;
+export type CompleteRegistration = z.infer<typeof CompleteRegistrationSchema>;
+
+/**
+ * Invitation acceptance validation
+ */
+export const AcceptInvitationSchema = z.object({
+  email: EmailSchema,
+  name: NameSchema.optional(),
+});
+
+export type AcceptInvitation = z.infer<typeof AcceptInvitationSchema>;
+
+/**
+ * Helper functions for validation
+ */
+
+/**
+ * Validates email - simple utility
+ */
+export function isValidEmail(email: string): boolean {
+  try {
+    EmailSchema.parse(email);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Validates OTP format
+ */
+export function isValidOtp(otp: string): boolean {
+  return /^\d{6}$/.test(otp);
+}
+
+/**
+ * Validates email array for invitations
+ */
+export function validateInvitationEmails(emails: string[]): {
+  valid: string[];
+  invalid: string[];
+} {
+  const valid: string[] = [];
+  const invalid: string[] = [];
+
+  emails.forEach((email) => {
+    if (isValidEmail(email)) {
+      valid.push(email);
+    } else {
+      invalid.push(email);
+    }
+  });
+
+  return { valid, invalid };
+}
+
+/**
+ * Removes duplicate emails (case-insensitive)
+ */
+export function deduplicateEmails(emails: string[]): string[] {
+  const seen = new Set<string>();
+  return emails.filter((email) => {
+    const lower = email.toLowerCase();
+    if (seen.has(lower)) return false;
+    seen.add(lower);
+    return true;
+  });
+}

package/src/services/index.ts

@@ -1,3 +1,7 @@
-export * from "./doc.service";
-export * from "./sprint.service";
-export * from "./task.service";
+/**
+ * Services Index
+ *
+ * Centralized service layer exports.
+ */
+
+export * from "./notifications";

package/src/services/notifications.ts

@@ -0,0 +1,80 @@
+/**
+ * Notification Service
+ *
+ * Centralized notification/toast handling using Sonner.
+ */
+
+import { toast } from "sonner";
+import { TIMING } from "@/lib/constants";
+
+export type NotificationType =
+  | "default"
+  | "success"
+  | "error"
+  | "warning"
+  | "info";
+
+interface NotificationOptions {
+  duration?: number;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+/**
+ * Show a notification
+ */
+export function notify(
+  message: string,
+  type: NotificationType = "default",
+  options?: NotificationOptions
+) {
+  const duration = options?.duration || TIMING.TOAST_DURATION_MS;
+
+  const notificationProps = {
+    duration,
+    action: options?.action,
+  };
+
+  switch (type) {
+    case "success":
+      toast.success(message, notificationProps);
+      break;
+    case "error":
+      toast.error(message, notificationProps);
+      break;
+    case "warning":
+      toast(message, { ...notificationProps, icon: "⚠️" });
+      break;
+    case "info":
+      toast.info?.(message, notificationProps) ||
+        toast(message, notificationProps);
+      break;
+    default:
+      toast(message, notificationProps);
+  }
+}
+
+/**
+ * Specific notification helpers
+ */
+export const notifications = {
+  success: (message: string, options?: NotificationOptions) =>
+    notify(message, "success", options),
+  error: (message: string, options?: NotificationOptions) =>
+    notify(message, "error", options),
+  warning: (message: string, options?: NotificationOptions) =>
+    notify(message, "warning", options),
+  info: (message: string, options?: NotificationOptions) =>
+    notify(message, "info", options),
+
+  // Common use cases
+  saved: () => notifications.success("Changes saved"),
+  deleted: () => notifications.success("Deleted successfully"),
+  created: (item: string) =>
+    notifications.success(`${item} created successfully`),
+  failed: (action: string) =>
+    notifications.error(`Failed to ${action}. Please try again.`),
+  loading: (message: string) => notify(message, "info"),
+};

package/src/utils/env.utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Environment Utility Functions
+ */
+
+export const isLocalMode = () => {
+  return process.env.NEXT_PUBLIC_LOCUS_MODE === "local";
+};
+
+export const isCloudMode = () => {
+  return process.env.NEXT_PUBLIC_LOCUS_MODE === "cloud";
+};
+
+export const getApiUrl = () => {
+  return process.env.NEXT_PUBLIC_API_URL || "http://localhost:3080/api";
+};