ui-syncup 0.3.13 → 0.4.0-beta.2

package/src/features/projects/components/project-title-section.tsx

@@ -0,0 +1,78 @@
+import { Badge } from '@/components/ui/badge';
+import { RiLockLine, RiGlobalLine, RiVipCrownLine } from '@remixicon/react';
+
+interface ProjectTitleSectionProps {
+  name: string;
+  description?: string | null;
+  visibility: 'private' | 'public';
+  userRole?: 'owner' | 'editor' | 'member' | 'viewer' | null;
+}
+
+const getRoleBadgeVariant = (role: string) => {
+  switch (role) {
+    case 'owner':
+      return 'default';
+    case 'editor':
+      return 'secondary';
+    case 'member':
+    case 'viewer':
+    default:
+      return 'outline';
+  }
+};
+
+const getRoleDisplayName = (role: string) => {
+  return role.charAt(0).toUpperCase() + role.slice(1);
+};
+
+/**
+ * ProjectTitleSection
+ * Displays project name, description, visibility badge, and user role badge
+ */
+export function ProjectTitleSection({
+  name,
+  description,
+  visibility,
+  userRole,
+}: ProjectTitleSectionProps) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-3">
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">
+          {name}
+        </h1>
+
+        <div className="flex items-center gap-2">
+          {/* Visibility indicator */}
+          <div
+            className="flex items-center gap-1.5 rounded-full bg-muted/50 px-2 py-0.5 text-xs font-medium text-muted-foreground"
+            title={`This project is ${visibility}`}
+          >
+            {visibility === 'private' ? (
+              <RiLockLine className="h-3 w-3" />
+            ) : (
+              <RiGlobalLine className="h-3 w-3" />
+            )}
+            <span className="capitalize">{visibility}</span>
+          </div>
+
+          {/* User role badge - only show if owner or editor for cleaner look */}
+          {userRole && (userRole === 'owner' || userRole === 'editor') && (
+            <Badge
+              variant="secondary"
+              className="h-5 px-2 text-[10px] font-medium uppercase tracking-wider text-muted-foreground hover:bg-secondary/80"
+            >
+              {userRole}
+            </Badge>
+          )}
+        </div>
+      </div>
+
+      {description && (
+        <p className="text-sm text-muted-foreground max-w-2xl leading-relaxed">
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/features/projects/config/icons.ts

@@ -0,0 +1,91 @@
+import {
+  RiRocketFill,
+  RiLightbulbFill,
+  RiCodeBoxFill,
+  RiDashboardFill,
+  RiPuzzleFill,
+  RiBrainFill,
+  RiFlashlightFill,
+  RiCompassFill,
+  RiLeafFill,
+  RiFireFill,
+  RiThunderstormsFill,
+  RiMagicFill,
+  RiSparklingFill,
+  RiFolderFill,
+  RiPlanetFill,
+  RiMeteorFill,
+  RiCactusFill,
+  RiFlowerFill,
+  RiCupFill,
+  RiAnchorFill,
+  RiStarFill,
+  RiHeartFill,
+  RiTrophyFill,
+  RiShieldFill,
+  RiTargetFill,
+  RiBugFill,
+  RiPaletteFill,
+  RiCameraFill,
+  RiBookFill,
+  RiGamepadFill,
+  RiShoppingCartFill,
+  RiSmartphoneFill,
+  RiTvFill,
+  RiMusicFill,
+  RiGiftFill,
+  RiMailFill,
+  RiBellFill,
+  RiTimeFill,
+  RiHomeFill,
+  RiMapPinFill,
+} from '@remixicon/react'
+
+export const iconOptions = [
+  { name: 'RiFolderFill', component: RiFolderFill, label: 'Folder' },
+  { name: 'RiRocketFill', component: RiRocketFill, label: 'Rocket' },
+  { name: 'RiLightbulbFill', component: RiLightbulbFill, label: 'Lightbulb' },
+  { name: 'RiCodeBoxFill', component: RiCodeBoxFill, label: 'Code Box' },
+  { name: 'RiDashboardFill', component: RiDashboardFill, label: 'Dashboard' },
+  { name: 'RiPuzzleFill', component: RiPuzzleFill, label: 'Puzzle' },
+  { name: 'RiBrainFill', component: RiBrainFill, label: 'Brain' },
+  { name: 'RiFlashlightFill', component: RiFlashlightFill, label: 'Flashlight' },
+  { name: 'RiCompassFill', component: RiCompassFill, label: 'Compass' },
+  { name: 'RiLeafFill', component: RiLeafFill, label: 'Leaf' },
+  { name: 'RiFireFill', component: RiFireFill, label: 'Fire' },
+  { name: 'RiThunderstormsFill', component: RiThunderstormsFill, label: 'Storm' },
+  { name: 'RiMagicFill', component: RiMagicFill, label: 'Magic' },
+  { name: 'RiSparklingFill', component: RiSparklingFill, label: 'Sparkle' },
+  { name: 'RiPlanetFill', component: RiPlanetFill, label: 'Planet' },
+  { name: 'RiMeteorFill', component: RiMeteorFill, label: 'Meteor' },
+  { name: 'RiCactusFill', component: RiCactusFill, label: 'Cactus' },
+  { name: 'RiFlowerFill', component: RiFlowerFill, label: 'Flower' },
+  { name: 'RiCupFill', component: RiCupFill, label: 'Cup' },
+  { name: 'RiAnchorFill', component: RiAnchorFill, label: 'Anchor' },
+  { name: 'RiStarFill', component: RiStarFill, label: 'Star' },
+  { name: 'RiHeartFill', component: RiHeartFill, label: 'Heart' },
+  { name: 'RiTrophyFill', component: RiTrophyFill, label: 'Trophy' },
+  { name: 'RiShieldFill', component: RiShieldFill, label: 'Shield' },
+  { name: 'RiTargetFill', component: RiTargetFill, label: 'Target' },
+  { name: 'RiBugFill', component: RiBugFill, label: 'Bug' },
+  { name: 'RiPaletteFill', component: RiPaletteFill, label: 'Palette' },
+  { name: 'RiCameraFill', component: RiCameraFill, label: 'Camera' },
+  { name: 'RiBookFill', component: RiBookFill, label: 'Book' },
+  { name: 'RiGamepadFill', component: RiGamepadFill, label: 'Game' },
+  { name: 'RiShoppingCartFill', component: RiShoppingCartFill, label: 'Cart' },
+  { name: 'RiSmartphoneFill', component: RiSmartphoneFill, label: 'Mobile' },
+  { name: 'RiTvFill', component: RiTvFill, label: 'TV' },
+  { name: 'RiMusicFill', component: RiMusicFill, label: 'Music' },
+  { name: 'RiGiftFill', component: RiGiftFill, label: 'Gift' },
+  { name: 'RiMailFill', component: RiMailFill, label: 'Mail' },
+  { name: 'RiBellFill', component: RiBellFill, label: 'Bell' },
+  { name: 'RiTimeFill', component: RiTimeFill, label: 'Time' },
+  { name: 'RiHomeFill', component: RiHomeFill, label: 'Home' },
+  { name: 'RiMapPinFill', component: RiMapPinFill, label: 'Location' }
+] as const
+
+export type IconName = typeof iconOptions[number]['name']
+
+export function getIconComponent(name: string) {
+  return iconOptions.find(opt => opt.name === name)?.component || RiFolderFill
+}

package/src/features/projects/hooks/index.ts

@@ -0,0 +1,28 @@
+// ============================================================================
+// PROJECT HOOKS BARREL EXPORTS
+// ============================================================================
+
+// Query Hooks
+export { useProjects } from './use-projects'
+export { useProject, projectKeys } from './use-project'
+export { useProjectMembers } from './use-project-members'
+export { useProjectInvitations } from './use-project-invitations'
+
+// Mutation Hooks
+export { useCreateProject } from './use-create-project'
+export { useUpdateProject } from './use-update-project'
+export { useDeleteProject } from './use-delete-project'
+export { useJoinProject } from './use-join-project'
+export { useLeaveProject } from './use-leave-project'
+export { useUpdateMemberRole } from './use-update-member-role'
+export { useRemoveMember } from './use-remove-member'
+export { useCreateInvitation } from './use-create-invitation'
+export { useRevokeInvitation } from './use-revoke-invitation'
+export { useResendInvitation } from './use-resend-invitation'
+
+// Filter Hooks
+export { useProjectFilters, type ProjectFilters } from './use-project-filters'
+
+// UI Hooks
+export { useRecentProjects } from './use-recent-projects'
+export { useTeamMemberSuggestions } from './use-team-member-suggestions'

package/src/features/projects/hooks/use-create-invitation.ts

@@ -0,0 +1,83 @@
+/**
+ * USE CREATE INVITATION HOOK
+ * React Query mutation for creating a project invitation
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { projectKeys } from './use-project'
+import { createInvitation } from '../api'
+import type { CreateInvitationResponse, CreateInvitationBody } from '../api'
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+export interface UseCreateInvitationOptions {
+  onSuccess?: (data: CreateInvitationResponse) => void
+  onError?: (error: Error) => void
+}
+
+export interface UseCreateInvitationParams {
+  projectId: string
+  data: CreateInvitationBody
+}
+
+export interface UseCreateInvitationResult {
+  mutate: (params: UseCreateInvitationParams) => void
+  mutateAsync: (params: UseCreateInvitationParams) => Promise<CreateInvitationResponse>
+  isPending: boolean
+  isError: boolean
+  error: Error | null
+  reset: () => void
+}
+
+/**
+ * Mutation hook for creating a project invitation
+ */
+export function useCreateInvitation(options?: UseCreateInvitationOptions): UseCreateInvitationResult {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: ({ projectId, data }: UseCreateInvitationParams) =>
+      createInvitation(projectId, data),
+    onSuccess: (data, variables) => {
+      // Invalidate invitations query to include new invitation
+      queryClient.invalidateQueries({ 
+        queryKey: [...projectKeys.detail(variables.projectId), 'invitations'] 
+      })
+      // Invalidate activities query
+      queryClient.invalidateQueries({
+        queryKey: projectKeys.activities(variables.projectId)
+      })
+
+      toast.success('Invitation sent successfully')
+      options?.onSuccess?.(data)
+    },
+    onError: (error: Error) => {
+      // Show specific error messages
+      const message = error.message || 'Failed to send invitation'
+      
+      if (message.includes('already a member')) {
+        toast.error('This user is already a member of the project')
+      } else if (message.includes('active invitation')) {
+        toast.error('An invitation has already been sent to this email')
+      } else if (message.includes('rate limit')) {
+        toast.error('Too many invitations sent. Please try again later.')
+      } else {
+        toast.error(message)
+      }
+      
+      options?.onError?.(error)
+    },
+  })
+
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    reset: mutation.reset,
+  }
+}

package/src/features/projects/hooks/use-create-project.ts

@@ -0,0 +1,77 @@
+/**
+ * USE CREATE PROJECT HOOK
+ * React Query mutation for creating a new project
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { createProject } from '../api/create-project'
+import { projectKeys } from './use-project'
+import type { CreateProjectBody, CreateProjectResponse } from '../api/types'
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+export interface UseCreateProjectOptions {
+  onSuccess?: (data: CreateProjectResponse) => void
+  onError?: (error: Error) => void
+}
+
+export interface UseCreateProjectResult {
+  mutate: (data: CreateProjectBody) => void
+  mutateAsync: (data: CreateProjectBody) => Promise<CreateProjectResponse>
+  isPending: boolean
+  isError: boolean
+  error: Error | null
+  reset: () => void
+}
+
+/**
+ * Mutation hook for creating a new project
+ *
+ * @example
+ * const { mutate: createProject, isPending } = useCreateProject({
+ *   onSuccess: () => {
+ *     toast.success('Project created!')
+ *     router.push('/projects')
+ *   }
+ * })
+ *
+ * TODO: wire to React Query when backend is ready
+ * - Currently uses mock implementation
+ * - Uncomment the useMutation implementation below
+ */
+export function useCreateProject(options?: UseCreateProjectOptions): UseCreateProjectResult {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: createProject,
+    onSuccess: (data) => {
+      // Invalidate project lists to refetch
+      queryClient.invalidateQueries({ queryKey: projectKeys.lists() })
+
+      // Show success toast
+      toast.success('Project created successfully')
+
+      // Call custom success handler
+      options?.onSuccess?.(data)
+    },
+    onError: (error: Error) => {
+      // Show error toast
+      toast.error(error.message || 'Failed to create project')
+
+      // Call custom error handler
+      options?.onError?.(error)
+    },
+  })
+
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    reset: mutation.reset,
+  }
+}

package/src/features/projects/hooks/use-delete-project.ts

@@ -0,0 +1,84 @@
+/**
+ * USE DELETE PROJECT HOOK
+ * React Query mutation for deleting a project
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { deleteProject } from '../api/delete-project'
+import { projectKeys } from './use-project'
+import type { DeleteProjectResponse } from '../api/types'
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+export interface UseDeleteProjectOptions {
+  onSuccess?: (data: DeleteProjectResponse) => void
+  onError?: (error: Error) => void
+}
+
+export interface UseDeleteProjectResult {
+  mutate: (projectId: string) => void
+  mutateAsync: (projectId: string) => Promise<DeleteProjectResponse>
+  isPending: boolean
+  isError: boolean
+  error: Error | null
+  reset: () => void
+}
+
+/**
+ * Mutation hook for deleting a project (owner only)
+ *
+ * @example
+ * const { mutate: deleteProject, isPending } = useDeleteProject({
+ *   onSuccess: () => {
+ *     toast.success('Project deleted!')
+ *     router.push('/projects')
+ *   }
+ * })
+ *
+ * // Usage
+ * deleteProject('proj_123')
+ *
+ * TODO: wire to React Query when backend is ready
+ * - Currently uses mock implementation
+ * - Uncomment the useMutation implementation below
+ */
+export function useDeleteProject(options?: UseDeleteProjectOptions): UseDeleteProjectResult {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: deleteProject,
+    onSuccess: (data, projectId) => {
+      // Remove from cache
+      queryClient.removeQueries({ queryKey: projectKeys.detail(projectId) })
+      queryClient.removeQueries({ queryKey: projectKeys.members(projectId) })
+
+      // Invalidate lists to refetch
+      queryClient.invalidateQueries({ queryKey: projectKeys.lists() })
+
+      // Show success toast
+      toast.success('Project deleted successfully')
+
+      // Call custom success handler
+      options?.onSuccess?.(data)
+    },
+    onError: (error: Error) => {
+      // Show error toast
+      toast.error(error.message || 'Failed to delete project')
+
+      // Call custom error handler
+      options?.onError?.(error)
+    },
+  })
+
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    reset: mutation.reset,
+  }
+}

package/src/features/projects/hooks/use-join-project.ts

@@ -0,0 +1,43 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { joinProject } from '../api'
+import { projectKeys } from './use-project'
+
+interface UseJoinProjectOptions {
+  onSuccess?: () => void
+  onError?: (error: Error) => void
+}
+
+export function useJoinProject(options?: UseJoinProjectOptions) {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: joinProject,
+    onSuccess: (data, projectId) => {
+      // Invalidate project detail and members
+      queryClient.invalidateQueries({ queryKey: projectKeys.detail(projectId) })
+      queryClient.invalidateQueries({ queryKey: projectKeys.members(projectId) })
+      queryClient.invalidateQueries({ queryKey: projectKeys.lists() })
+
+      // Show success message
+      toast.success(data.message)
+
+      // Call optional success callback
+      options?.onSuccess?.()
+    },
+    onError: (error: Error) => {
+      const message = error instanceof Error ? error.message : 'Failed to join project'
+      toast.error(message)
+      options?.onError?.(error)
+    },
+  })
+
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    reset: mutation.reset,
+  }
+}

package/src/features/projects/hooks/use-leave-project.ts

@@ -0,0 +1,84 @@
+/**
+ * USE LEAVE PROJECT HOOK
+ * React Query mutation for current user to leave a project
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { leaveProject } from '../api/leave-project'
+import { projectKeys } from './use-project'
+import type { LeaveMemberResponse } from '../api/types'
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+export interface UseLeaveProjectOptions {
+  onSuccess?: (data: LeaveMemberResponse) => void
+  onError?: (error: Error) => void
+}
+
+export interface UseLeaveProjectResult {
+  mutate: (projectId: string) => void
+  mutateAsync: (projectId: string) => Promise<LeaveMemberResponse>
+  isPending: boolean
+  isError: boolean
+  error: Error | null
+  reset: () => void
+}
+
+/**
+ * Mutation hook for current user to leave a project
+ *
+ * @example
+ * const { mutate: leaveProject, isPending } = useLeaveProject({
+ *   onSuccess: () => {
+ *     toast.success('You have left the project')
+ *     router.push('/projects')
+ *   }
+ * })
+ *
+ * // Usage
+ * leaveProject('proj_123')
+ *
+ * TODO: wire to React Query when backend is ready
+ * - Currently uses mock implementation
+ * - Uncomment the useMutation implementation below
+ */
+export function useLeaveProject(options?: UseLeaveProjectOptions): UseLeaveProjectResult {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: leaveProject,
+    onSuccess: (data, projectId) => {
+      // Remove project from cache
+      queryClient.removeQueries({ queryKey: projectKeys.detail(projectId) })
+      queryClient.removeQueries({ queryKey: projectKeys.members(projectId) })
+
+      // Invalidate lists to refetch
+      queryClient.invalidateQueries({ queryKey: projectKeys.lists() })
+
+      // Show success toast
+      toast.success('You have left the project')
+
+      // Call custom success handler
+      options?.onSuccess?.(data)
+    },
+    onError: (error: Error) => {
+      // Show error toast
+      toast.error(error.message || 'Failed to leave project')
+
+      // Call custom error handler
+      options?.onError?.(error)
+    },
+  })
+
+  return {
+    mutate: mutation.mutate,
+    mutateAsync: mutation.mutateAsync,
+    isPending: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    reset: mutation.reset,
+  }
+}

package/src/features/projects/hooks/use-project-activities.ts

@@ -0,0 +1,39 @@
+/**
+ * USE PROJECT ACTIVITIES HOOK
+ * React hook for fetching project activities
+ */
+
+import { useQuery } from '@tanstack/react-query'
+import { getProjectActivities } from '../api/get-project-activities'
+import { projectKeys } from './use-project'
+import type { ListProjectActivitiesResponse } from '../api/types'
+
+export interface UseProjectActivitiesParams {
+  projectId: string
+  enabled?: boolean
+}
+
+export interface UseProjectActivitiesResult {
+  data: ListProjectActivitiesResponse | undefined
+  isLoading: boolean
+  isError: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+export function useProjectActivities({ projectId, enabled = true }: UseProjectActivitiesParams): UseProjectActivitiesResult {
+  const query = useQuery({
+    queryKey: projectKeys.activities(projectId),
+    queryFn: () => getProjectActivities(projectId),
+    enabled: enabled && !!projectId,
+    staleTime: 30 * 1000, // 30 seconds
+  })
+
+  return {
+    data: query.data,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    error: query.error as Error | null,
+    refetch: query.refetch,
+  }
+}