@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/data-display/kanban/kanban-board.tsx

@@ -0,0 +1,192 @@
+import React, { useMemo, useState } from "react";
+import type {
+  DragStartEvent,
+  DragEndEvent,
+  DragOverEvent,
+} from "@dnd-kit/core";
+import {
+  DndContext,
+  DragOverlay,
+  useSensor,
+  useSensors,
+  PointerSensor,
+  KeyboardSensor,
+  closestCorners,
+  defaultDropAnimationSideEffects,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { createPortal } from "react-dom";
+
+import { KanbanColumn } from "./kanban-column";
+import { KanbanItem } from "./kanban-item";
+import type {
+  KanbanColumnData,
+  KanbanItemData,
+  KanbanData,
+} from "./kanban-types";
+import { cn } from "../../../utils";
+
+interface KanbanBoardProps {
+  initialData: KanbanData;
+  onDragEnd?: (data: KanbanData) => void;
+  className?: string;
+}
+
+export function KanbanBoard({
+  initialData,
+  onDragEnd,
+  className,
+}: KanbanBoardProps) {
+  const [columns, setColumns] = useState<KanbanColumnData[]>(
+    initialData.columns,
+  );
+  const [items, setItems] = useState<KanbanItemData[]>(initialData.items);
+  const [activeColumn, setActiveColumn] = useState<KanbanColumnData | null>(
+    null,
+  );
+  const [activeItem, setActiveItem] = useState<KanbanItemData | null>(null);
+
+  const columnIds = useMemo(() => columns.map((col) => col.id), [columns]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 3, // Prevent accidental drags
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function onDragStart(event: DragStartEvent) {
+    if (event.active.data.current?.type === "Column") {
+      setActiveColumn(event.active.data.current.column);
+      return;
+    }
+
+    if (event.active.data.current?.type === "Item") {
+      setActiveItem(event.active.data.current.item);
+      return;
+    }
+  }
+
+  function onDragOver(event: DragOverEvent) {
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id;
+    const overId = over.id;
+
+    if (activeId === overId) return;
+
+    const isActiveItem = active.data.current?.type === "Item";
+    const isOverItem = over.data.current?.type === "Item";
+    const isOverColumn = over.data.current?.type === "Column";
+
+    if (!isActiveItem) return;
+
+    // Dragging Item over Item
+    if (isActiveItem && isOverItem) {
+      setItems((items) => {
+        const activeIndex = items.findIndex((t) => t.id === activeId);
+        const overIndex = items.findIndex((t) => t.id === overId);
+
+        if (items[activeIndex].columnId !== items[overIndex].columnId) {
+          items[activeIndex].columnId = items[overIndex].columnId;
+          return arrayMove(items, activeIndex, overIndex - 1); // Simple move, might need refinement
+        }
+
+        return arrayMove(items, activeIndex, overIndex);
+      });
+    }
+
+    // Dragging Item over Column
+    if (isActiveItem && isOverColumn) {
+      setItems((items) => {
+        const activeIndex = items.findIndex((t) => t.id === activeId);
+        if (items[activeIndex].columnId !== overId) {
+          items[activeIndex].columnId = overId; // Move to new column
+          return arrayMove(items, activeIndex, activeIndex); // Force re-render
+        }
+        return items;
+      });
+    }
+  }
+
+  function onDragEndHandler(event: DragEndEvent) {
+    setActiveColumn(null);
+    setActiveItem(null);
+
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id;
+    const overId = over.id;
+
+    if (activeId === overId) return;
+
+    const isActiveColumn = active.data.current?.type === "Column";
+
+    if (isActiveColumn) {
+      setColumns((columns) => {
+        const activeIndex = columns.findIndex((c) => c.id === activeId);
+        const overIndex = columns.findIndex((c) => c.id === overId);
+        const newColumns = arrayMove(columns, activeIndex, overIndex);
+        // Notify parent
+        if (onDragEnd) onDragEnd({ columns: newColumns, items });
+        return newColumns;
+      });
+      return;
+    }
+
+    // For items, logic handled in DragOver basically, just sync final state
+    if (onDragEnd) onDragEnd({ columns, items });
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEndHandler}
+    >
+      <div className={cn("m-auto flex gap-4 overflow-x-auto pb-4", className)}>
+        <SortableContext
+          items={columnIds}
+          strategy={horizontalListSortingStrategy}
+        >
+          {columns.map((col) => (
+            <KanbanColumn
+              key={col.id}
+              column={col}
+              items={items.filter((item) => item.columnId === col.id)}
+            />
+          ))}
+        </SortableContext>
+      </div>
+
+      <>
+        {createPortal(
+          <DragOverlay>
+            {activeColumn && (
+              <KanbanColumn
+                column={activeColumn}
+                items={items.filter((item) => item.columnId === activeColumn.id)}
+                isOverlay
+              />
+            )}
+            {activeItem && <KanbanItem item={activeItem} isOverlay />}
+          </DragOverlay>,
+          document.body,
+        )}
+      </>
+    </DndContext>
+  );
+}

package/src/ui/data-display/kanban/kanban-column.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../../../utils";
+import type { KanbanColumnData, KanbanItemData } from "./kanban-types";
+import { KanbanItem } from "./kanban-item";
+import { GripVertical } from "lucide-react";
+import { ScrollArea } from "../../primitives/scroll-area";
+
+interface KanbanColumnProps {
+  column: KanbanColumnData;
+  items: KanbanItemData[];
+  isOverlay?: boolean;
+}
+
+export function KanbanColumn({ column, items, isOverlay }: KanbanColumnProps) {
+  const itemsIds = useMemo(() => items.map((item) => item.id), [items]);
+
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: column.id,
+    data: {
+      type: "Column",
+      column,
+    },
+  });
+
+  const style = {
+    transition,
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "flex h-[500px] max-h-[500px] w-[300px] flex-col rounded-lg bg-muted/50 dark:bg-muted/10 border-2 border-transparent", // Layout fixed height for now, generic later
+        isDragging && "opacity-50",
+        isOverlay && "opacity-50", // Style handled by Overlay component logic usually
+      )}
+    >
+      {/* Column Header */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="flex items-center justify-between p-4 cursor-grab hover:bg-accent/50 rounded-t-lg transition-colors"
+      >
+        <span className="font-semibold text-sm uppercase tracking-wider text-muted-foreground flex items-center gap-2">
+          {column.title}
+          <span className="ml-2 rounded-full bg-background px-2 py-0.5 text-xs font-bold text-foreground border">
+            {items.length}
+          </span>
+        </span>
+        <GripVertical className="bg-transparent h-4 w-4 text-muted-foreground/50" />
+      </div>
+
+      {/* Column Content */}
+      <div className="flex flex-grow flex-col gap-3 p-2 overflow-y-auto">
+        <SortableContext items={itemsIds}>
+          {items.map((item) => (
+            <KanbanItem key={item.id} item={item} />
+          ))}
+        </SortableContext>
+      </div>
+    </div>
+  );
+}

package/src/ui/data-display/kanban/kanban-item.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { cn } from "../../../utils";
+import type { KanbanItemData } from "./kanban-types";
+
+interface KanbanItemProps {
+  item: KanbanItemData;
+  isOverlay?: boolean;
+}
+
+export function KanbanItem({ item, isOverlay }: KanbanItemProps) {
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: item.id,
+    data: {
+      type: "Item",
+      item,
+    },
+  });
+
+  const style = {
+    transition,
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={cn(
+        "relative flex cursor-grab flex-col gap-2 rounded-md border bg-card p-3 shadow-sm hover:ring-2 hover:ring-primary/20 bg-background hover:bg-accent/50",
+        isDragging && "opacity-50",
+        isOverlay &&
+          "cursor-grabbing shadow-xl ring-2 ring-primary rotate-2 scale-105 z-50",
+        "transition-colors duration-200",
+      )}
+    >
+      {item.content}
+    </div>
+  );
+}

package/src/ui/data-display/kanban/kanban-types.ts

@@ -0,0 +1,21 @@
+import type { UniqueIdentifier } from "@dnd-kit/core";
+
+export type KanbanItemId = UniqueIdentifier;
+export type KanbanColumnId = UniqueIdentifier;
+
+export interface KanbanItemData {
+  id: KanbanItemId;
+  columnId: KanbanColumnId;
+  content: React.ReactNode;
+  [key: string]: any;
+}
+
+export interface KanbanColumnData {
+  id: KanbanColumnId;
+  title: string;
+}
+
+export type KanbanData = {
+  columns: KanbanColumnData[];
+  items: KanbanItemData[];
+};

package/src/ui/data-display/kpi-card.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { ArrowDown, ArrowUp, Minus } from "lucide-react"
+import type { LucideIcon } from "lucide-react"
+
+export interface KpiCardProps {
+  title: string
+  value: number | string
+  icon: LucideIcon
+  color?: string
+  percentageChange?: number
+  note?: string
+}
+
+export function KpiCard({
+  title,
+  value,
+  icon: Icon,
+  color,
+  percentageChange,
+  note,
+}: KpiCardProps) {
+  const isPositive = percentageChange !== undefined && percentageChange > 0
+  const isNeutral = percentageChange === 0
+
+  return (
+    <div
+      className={`group relative rounded-lg shadow border-0 bg-gradient-to-br ${color || "from-slate-500 to-slate-600"} text-white transition-all duration-200 hover:scale-[1.01] hover:shadow-md active:scale-[0.99] min-h-[64px] overflow-hidden`}
+    >
+      <div className="absolute inset-0 opacity-5 bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:16px_16px]" />
+      <div className="relative p-3 flex flex-col justify-between h-full">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-xs font-semibold opacity-90 leading-tight truncate pr-1">
+            {title}
+          </p>
+          <Icon className="h-4 w-4 shrink-0 opacity-80" aria-hidden />
+        </div>
+        <div className="mt-2 space-y-1">
+          <p className="text-xl font-bold leading-none tracking-tight truncate">
+            {value}
+          </p>
+          {(percentageChange !== undefined || note) && (
+            <div className="text-[10px] font-medium opacity-90 flex items-center gap-1.5">
+              {percentageChange !== undefined && (
+                <span className="flex items-center">
+                  {isPositive ? (
+                    <ArrowUp className="h-2.5 w-2.5 mr-0.5" />
+                  ) : isNeutral ? (
+                    <Minus className="h-2.5 w-2.5 mr-0.5" />
+                  ) : (
+                    <ArrowDown className="h-2.5 w-2.5 mr-0.5" />
+                  )}
+                  {Math.abs(percentageChange)}%
+                </span>
+              )}
+              {note && (
+                <span className="opacity-80 truncate max-w-[100px]" title={note}>
+                  {percentageChange !== undefined && "•"} {note}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="absolute inset-0 bg-gradient-to-br from-white/0 to-white/0 group-hover:from-white/5 group-hover:to-white/0 transition-all duration-200 pointer-events-none" />
+    </div>
+  )
+}

package/src/ui/data-display/media-grid.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import Image from "next/image";
+
+import type { ComponentProps, MouseEvent } from "react";
+
+import { cn } from "../../utils";
+
+export interface MediaType {
+  src: string;
+  alt: string;
+  type?: "IMAGE" | "VIDEO";
+}
+
+export interface MediaGridProps extends ComponentProps<"ul"> {
+  data: Array<MediaType>;
+  limit?: number;
+  onMoreButtonClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  onMediaClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function MediaGrid({
+  data,
+  limit = 4,
+  onMoreButtonClick,
+  onMediaClick,
+  className,
+  ...props
+}: MediaGridProps) {
+  if (data.length === 0) return null;
+
+  const displayedMedia = data.slice(0, limit - 1);
+  const remainingCount = data.length - displayedMedia.length - 1;
+  const hasMoreMedia = data.length >= limit;
+  const lastMedia = hasMoreMedia ? data[limit - 1] : null;
+
+  return (
+    <ul
+      className={cn(
+        "grid gap-2 rounded-lg",
+        data.length > 1 && "grid-cols-2",
+        className,
+      )}
+      {...props}
+    >
+      {displayedMedia.map((item) => (
+        <li key={`${item.alt}-${item.src}`}>
+          <button
+            type="button"
+            onClick={onMediaClick}
+            className="cursor-pointer relative size-full aspect-square before:absolute before:inset-0 before:rounded-lg before:z-10 hover:before:bg-black/5"
+            aria-label="Media"
+          >
+            {item.type === "VIDEO" ? (
+              <video
+                src={item.src}
+                className="object-cover size-full rounded-lg"
+                controls
+                muted
+              />
+            ) : (
+              <Image
+                src={item.src}
+                alt={item.alt}
+                className="object-cover rounded-lg"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                fill
+              />
+            )}
+          </button>
+        </li>
+      ))}
+
+      {lastMedia && (
+        <li>
+          <button
+            type="button"
+            onClick={(e) =>
+              remainingCount > 0 ? onMoreButtonClick?.(e) : onMediaClick?.(e)
+            }
+            className="cursor-pointer relative size-full aspect-square before:absolute before:inset-0 before:rounded-lg before:z-10 hover:before:bg-black/5"
+            aria-label={remainingCount > 0 ? "More media" : "Media"}
+          >
+            {lastMedia.type === "VIDEO" ? (
+              <video
+                src={lastMedia.src}
+                className="object-cover rounded-lg size-full"
+                controls
+                muted
+              />
+            ) : (
+              <Image
+                src={lastMedia.src}
+                alt={lastMedia.alt}
+                className="object-cover rounded-lg"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                fill
+              />
+            )}
+            {remainingCount > 0 && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black/25 text-3xl text-white font-semibold rounded-lg">
+                <span>+{remainingCount}</span>
+              </div>
+            )}
+          </button>
+        </li>
+      )}
+    </ul>
+  );
+}