create-bluecopa-react-app 1.0.41 → 1.0.42

package/templates/latest/app/routes/comments.tsx

@@ -1,588 +0,0 @@
-import React, { useState } from "react";
-import { AppSidebar } from "~/components/app-sidebar";
-import { SiteHeader } from "~/components/site-header";
-import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Label } from "~/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Badge } from "~/components/ui/badge";
-import { Separator } from "~/components/ui/separator";
-import { Avatar, AvatarFallback } from "~/components/ui/avatar";
-import { Skeleton } from "~/components/ui/skeleton";
-import { toast } from "sonner";
-import {
-  useCreateThread,
-  useGetCommentsByThreadId,
-  usePostComment,
-  useUpdateComment,
-  useDeleteComment,
-  useSubscribeUser,
-  useUnsubscribeUser,
-  useCheckSubscriptionStatus,
-} from "@bluecopa/react";
-import {
-  MessageSquare,
-  Plus,
-  Send,
-  Edit,
-  Trash2,
-  Bell,
-  BellOff,
-  Users,
-} from "lucide-react";
-
-// Mock user data - in real app this would come from auth context
-const MOCK_USER = {
-  id: "user-123",
-  name: "John Doe",
-  email: "john@example.com",
-};
-
-// Component types for better organization
-interface ThreadFormProps {
-  onThreadCreated: (threadId: string) => void;
-}
-
-interface CommentFormProps {
-  threadId: string;
-  onCommentPosted: () => void;
-}
-
-interface CommentItemProps {
-  comment: any;
-  onCommentUpdated: () => void;
-  onCommentDeleted: () => void;
-}
-
-interface SubscriptionControlsProps {
-  userId: string;
-  threadId: string;
-}
-
-// Thread Creation Form Component
-function ThreadForm({ onThreadCreated }: ThreadFormProps) {
-  const [componentId, setComponentId] = useState("");
-  const [componentType, setComponentType] = useState<string>("");
-
-  const createThreadMutation = useCreateThread({
-    onSuccess: (data) => {
-      toast.success("Thread created successfully!");
-      onThreadCreated(data.data.id || "");
-      setComponentId("");
-      setComponentType("");
-    },
-    onError: (error) => {
-      toast.error(`Failed to create thread: ${error.message}`);
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!componentId || !componentType) {
-      toast.error("Please fill in all fields");
-      return;
-    }
-
-    createThreadMutation.mutate({
-      data: {
-        forComponentId: componentId,
-        forComponentType: componentType as any,
-      },
-    });
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Plus className="h-5 w-5" />
-          Create New Thread
-        </CardTitle>
-        <CardDescription>
-          Start a new discussion thread for a component
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <Label htmlFor="componentId">Component ID</Label>
-            <Input
-              id="componentId"
-              value={componentId}
-              onChange={(e) => setComponentId(e.target.value)}
-              placeholder="Enter component ID (e.g., workbook-123)"
-            />
-          </div>
-          <div>
-            <Label htmlFor="componentType">Component Type</Label>
-            <Select value={componentType} onValueChange={setComponentType}>
-              <SelectTrigger>
-                <SelectValue placeholder="Select component type" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="WORKBOOK">Workbook</SelectItem>
-                <SelectItem value="DASHBOARD">Dashboard</SelectItem>
-                <SelectItem value="WORKSHEET">Worksheet</SelectItem>
-                <SelectItem value="DATASET">Dataset</SelectItem>
-                <SelectItem value="PROCESS">Process</SelectItem>
-                <SelectItem value="FORM">Form</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <Button
-            type="submit"
-            disabled={createThreadMutation.isPending}
-            className="w-full"
-          >
-            {createThreadMutation.isPending ? "Creating..." : "Create Thread"}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}
-
-// Comment Form Component
-function CommentForm({ threadId, onCommentPosted }: CommentFormProps) {
-  const [comment, setComment] = useState("");
-
-  const postCommentMutation = usePostComment({
-    onSuccess: () => {
-      toast.success("Comment posted successfully!");
-      setComment("");
-      onCommentPosted();
-    },
-    onError: (error) => {
-      toast.error(`Failed to post comment: ${error.message}`);
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!comment.trim()) {
-      toast.error("Please enter a comment");
-      return;
-    }
-
-    postCommentMutation.mutate({
-      data: {
-        chatThreadId: threadId,
-        comment: comment.trim(),
-        parentId: threadId,
-      },
-    });
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Send className="h-5 w-5" />
-          Add Comment
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <Label htmlFor="comment">Your Comment</Label>
-            <Input
-              id="comment"
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-              placeholder="Enter your comment..."
-              className="min-h-[80px]"
-            />
-          </div>
-          <Button
-            type="submit"
-            disabled={postCommentMutation.isPending}
-            className="w-full"
-          >
-            {postCommentMutation.isPending ? "Posting..." : "Post Comment"}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}
-
-// Individual Comment Component
-function CommentItem({
-  comment,
-  onCommentUpdated,
-  onCommentDeleted,
-}: CommentItemProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editText, setEditText] = useState(comment.comment || "");
-
-  const updateCommentMutation = useUpdateComment({
-    onSuccess: () => {
-      toast.success("Comment updated successfully!");
-      setIsEditing(false);
-      onCommentUpdated();
-    },
-    onError: (error) => {
-      toast.error(`Failed to update comment: ${error.message}`);
-    },
-  });
-
-  const deleteCommentMutation = useDeleteComment({
-    onSuccess: () => {
-      toast.success("Comment deleted successfully!");
-      onCommentDeleted();
-    },
-    onError: (error) => {
-      toast.error(`Failed to delete comment: ${error.message}`);
-    },
-  });
-
-  const handleUpdate = () => {
-    if (!editText.trim()) {
-      toast.error("Comment cannot be empty");
-      return;
-    }
-
-    updateCommentMutation.mutate({
-      data: {
-        ...comment,
-        comment: editText.trim(),
-      },
-      commentId: comment.id,
-    });
-  };
-
-  const handleDelete = () => {
-    if (window.confirm("Are you sure you want to delete this comment?")) {
-      deleteCommentMutation.mutate(comment.id);
-    }
-  };
-
-  return (
-    <div className="border rounded-lg p-4 space-y-3">
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-3">
-          <Avatar className="h-8 w-8">
-            <AvatarFallback>
-              {comment.createdBy?.charAt(0)?.toUpperCase() || "U"}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <p className="font-medium text-sm">
-              {comment.createdBy || "Unknown User"}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {comment.createdDate
-                ? new Date(comment.createdDate).toLocaleString()
-                : "Just now"}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setIsEditing(!isEditing)}
-            disabled={updateCommentMutation.isPending}
-          >
-            <Edit className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleDelete}
-            disabled={deleteCommentMutation.isPending}
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      {isEditing ? (
-        <div className="space-y-2">
-          <Input
-            value={editText}
-            onChange={(e) => setEditText(e.target.value)}
-            className="min-h-[60px]"
-          />
-          <div className="flex gap-2">
-            <Button
-              size="sm"
-              onClick={handleUpdate}
-              disabled={updateCommentMutation.isPending}
-            >
-              {updateCommentMutation.isPending ? "Saving..." : "Save"}
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => {
-                setIsEditing(false);
-                setEditText(comment.comment || "");
-              }}
-            >
-              Cancel
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <p className="text-sm">{comment.comment}</p>
-      )}
-    </div>
-  );
-}
-
-// Subscription Controls Component
-function SubscriptionControls({ userId, threadId }: SubscriptionControlsProps) {
-  const { data: subscriptionStatus, isLoading } = useCheckSubscriptionStatus(
-    userId,
-    threadId
-  );
-
-  const subscribeUserMutation = useSubscribeUser({
-    onSuccess: () => {
-      toast.success("Successfully subscribed to thread!");
-    },
-    onError: (error) => {
-      toast.error(`Failed to subscribe: ${error.message}`);
-    },
-  });
-
-  const unsubscribeUserMutation = useUnsubscribeUser({
-    onSuccess: () => {
-      toast.success("Successfully unsubscribed from thread!");
-    },
-    onError: (error) => {
-      toast.error(`Failed to unsubscribe: ${error.message}`);
-    },
-  });
-
-  const handleSubscribe = () => {
-    subscribeUserMutation.mutate({
-      params: { userId, threadId },
-    });
-  };
-
-  const handleUnsubscribe = () => {
-    unsubscribeUserMutation.mutate({
-      params: { userId, threadId },
-    });
-  };
-
-  if (isLoading) {
-    return <Skeleton className="h-10 w-32" />;
-  }
-
-  const isSubscribed = subscriptionStatus?.data?.isSubscribed;
-
-  return (
-    <div className="flex items-center gap-2">
-      <Button
-        variant={isSubscribed ? "outline" : "default"}
-        size="sm"
-        onClick={isSubscribed ? handleUnsubscribe : handleSubscribe}
-        disabled={
-          subscribeUserMutation.isPending || unsubscribeUserMutation.isPending
-        }
-      >
-        {isSubscribed ? (
-          <>
-            <BellOff className="h-4 w-4 mr-2" />
-            Unsubscribe
-          </>
-        ) : (
-          <>
-            <Bell className="h-4 w-4 mr-2" />
-            Subscribe
-          </>
-        )}
-      </Button>
-      <Badge variant={isSubscribed ? "default" : "secondary"}>
-        {isSubscribed ? "Subscribed" : "Not Subscribed"}
-      </Badge>
-    </div>
-  );
-}
-
-// Main Comments Page Component
-export default function CommentsPage() {
-  const [selectedThreadId, setSelectedThreadId] = useState<string>("");
-
-  const {
-    data: commentsData,
-    isLoading: commentsLoading,
-    refetch: refetchComments,
-  } = useGetCommentsByThreadId(selectedThreadId, {
-    enabled: !!selectedThreadId,
-  });
-
-  const handleThreadCreated = (threadId: string) => {
-    setSelectedThreadId(threadId);
-  };
-
-  const handleCommentAction = () => {
-    refetchComments();
-  };
-
-  return (
-    <SidebarProvider
-      style={
-        {
-          "--sidebar-width": "calc(var(--spacing) * 72)",
-          "--header-height": "calc(var(--spacing) * 12)",
-        } as React.CSSProperties
-      }
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset>
-        <SiteHeader />
-        <div className="flex flex-1 flex-col">
-          <div className="@container/main flex flex-1 flex-col gap-6 p-6">
-            {/* Page Header */}
-            <div className="flex items-center justify-between">
-              <div>
-                <h1 className="text-3xl font-bold tracking-tight flex items-center gap-2">
-                  <MessageSquare className="h-8 w-8" />
-                  Comments API Demo
-                </h1>
-                <p className="text-muted-foreground">
-                  Comprehensive example of the chat/comments API functionality
-                </p>
-              </div>
-              {selectedThreadId && (
-                <Badge variant="outline" className="text-sm">
-                  Thread: {selectedThreadId.slice(0, 8)}...
-                </Badge>
-              )}
-            </div>
-
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-              {/* Left Column - Thread Creation */}
-              <div className="space-y-6">
-                <ThreadForm onThreadCreated={handleThreadCreated} />
-
-                {selectedThreadId && (
-                  <>
-                    <CommentForm
-                      threadId={selectedThreadId}
-                      onCommentPosted={handleCommentAction}
-                    />
-
-                    <Card>
-                      <CardHeader>
-                        <CardTitle className="flex items-center gap-2">
-                          <Users className="h-5 w-5" />
-                          Subscription Controls
-                        </CardTitle>
-                        <CardDescription>
-                          Manage your subscription to this thread
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <SubscriptionControls
-                          userId={MOCK_USER.id}
-                          threadId={selectedThreadId}
-                        />
-                      </CardContent>
-                    </Card>
-                  </>
-                )}
-              </div>
-
-              {/* Right Column - Comments Display */}
-              <div className="space-y-6">
-                <Card>
-                  <CardHeader>
-                    <CardTitle>Comments</CardTitle>
-                    <CardDescription>
-                      {selectedThreadId
-                        ? `Comments for thread ${selectedThreadId.slice(0, 8)}...`
-                        : "Create a thread to see comments"}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {!selectedThreadId ? (
-                      <div className="text-center py-8 text-muted-foreground">
-                        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                        <p>Create a thread to start the conversation</p>
-                      </div>
-                    ) : commentsLoading ? (
-                      <div className="space-y-4">
-                        {[1, 2, 3].map((i) => (
-                          <div key={i} className="space-y-2">
-                            <Skeleton className="h-4 w-32" />
-                            <Skeleton className="h-16 w-full" />
-                          </div>
-                        ))}
-                      </div>
-                    ) : commentsData?.data?.length === 0 ? (
-                      <div className="text-center py-8 text-muted-foreground">
-                        <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                        <p>No comments yet. Be the first to comment!</p>
-                      </div>
-                    ) : (
-                      <div className="space-y-4 max-h-96 overflow-y-auto">
-                        {commentsData?.data?.map((comment: any) => (
-                          <CommentItem
-                            key={comment.id}
-                            comment={comment}
-                            onCommentUpdated={handleCommentAction}
-                            onCommentDeleted={handleCommentAction}
-                          />
-                        ))}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-
-                {/* API Status Card */}
-                <Card>
-                  <CardHeader>
-                    <CardTitle>API Status</CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-2">
-                    <div className="flex justify-between items-center">
-                      <span className="text-sm">Thread Selected:</span>
-                      <Badge
-                        variant={selectedThreadId ? "default" : "secondary"}
-                      >
-                        {selectedThreadId ? "Yes" : "No"}
-                      </Badge>
-                    </div>
-                    <div className="flex justify-between items-center">
-                      <span className="text-sm">Comments Loading:</span>
-                      <Badge
-                        variant={commentsLoading ? "default" : "secondary"}
-                      >
-                        {commentsLoading ? "Yes" : "No"}
-                      </Badge>
-                    </div>
-                    <div className="flex justify-between items-center">
-                      <span className="text-sm">Comments Count:</span>
-                      <Badge variant="outline">
-                        {commentsData?.data?.length || 0}
-                      </Badge>
-                    </div>
-                  </CardContent>
-                </Card>
-              </div>
-            </div>
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}

package/templates/latest/app/routes/dashboard.tsx

@@ -1,36 +0,0 @@
-import { AppSidebar } from "~/components/app-sidebar";
-import { ChartAreaInteractive } from "~/components/chart-area-interactive";
-import { DataTable } from "~/components/data-table";
-import { SectionCards } from "~/components/section-cards";
-import { SiteHeader } from "~/components/site-header";
-import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
-import data from "~/data/data.json";
-
-export default function Page() {
-  return (
-    <SidebarProvider
-      style={
-        {
-          "--sidebar-width": "calc(var(--spacing) * 72)",
-          "--header-height": "calc(var(--spacing) * 12)",
-        } as React.CSSProperties
-      }
-    >
-      <AppSidebar variant="inset" />
-      <SidebarInset>
-        <SiteHeader />
-        <div className="flex flex-1 flex-col">
-          <div className="@container/main flex flex-1 flex-col gap-2">
-            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
-              <SectionCards />
-              <div className="px-4 lg:px-6">
-                <ChartAreaInteractive />
-              </div>
-              <DataTable data={data} />
-            </div>
-          </div>
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
-  );
-}