@goplusvn/core 0.1.59 → 0.1.60

package/src/workflow/activity-timeline.tsx

@@ -1,412 +0,0 @@
-"use client";
-
-import React from "react";
-import { format } from "date-fns";
-import { vi } from "date-fns/locale"; // Note: This might need i18n handling if we support EN
-import {
-  CheckCircle2,
-  Circle,
-  Clock,
-  XCircle,
-  ArrowRight,
-  ArrowDown,
-} from "lucide-react";
-import {
-  Timeline,
-  TimelineContent,
-  TimelineDot,
-  TimelineHeading,
-  TimelineItem,
-  TimelineLine,
-  Badge,
-  AvatarStack,
-  DynamicIcon,
-} from "../ui";
-import { cn } from "../utils";
-import type { DynamicIconNameType } from "../types";
-
-export interface ActivityItem {
-  id: string;
-  title: string;
-  description?: string;
-  date?: Date | string;
-  status?: "completed" | "current" | "upcoming" | "error";
-  badgeText?: string; // Text to show in the badge (e.g. "Opened", "Resolved")
-  iconName?: DynamicIconNameType;
-  fill?: string;
-  assignedMembers?: Array<{
-    name: string;
-    avatar?: string;
-    href?: string;
-  }>;
-}
-
-interface SharedActivityTimelineProps {
-  items: ActivityItem[];
-  className?: string;
-  orientation?: "vertical" | "horizontal";
-}
-
-function RenderAvatarStack({
-  assignedMembers,
-}: {
-  assignedMembers: ActivityItem["assignedMembers"];
-}) {
-  if (assignedMembers && assignedMembers.length > 0) {
-    return (
-      <AvatarStack
-        avatars={assignedMembers.map((member) => ({
-          src: member.avatar,
-          alt: member.name,
-          href: member.href || "#",
-        }))}
-        size="sm"
-        className="mt-2"
-      />
-    );
-  }
-
-  return null;
-}
-
-// Horizontal Step Component - Clear distinction: completed (active), current (highlighted), upcoming (inactive)
-function HorizontalStep({
-  item,
-  isLast,
-  stepNumber,
-}: {
-  item: ActivityItem;
-  isLast: boolean;
-  stepNumber: number;
-}) {
-  const getStepIcon = () => {
-    if (item.status === "completed") {
-      return (
-        <CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
-      );
-    }
-    if (item.status === "error") {
-      return <XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />;
-    }
-    if (item.status === "current") {
-      return <Clock className="h-4 w-4 text-blue-600 dark:text-blue-400" />;
-    }
-    return <Circle className="h-4 w-4 text-muted-foreground opacity-50" />;
-  };
-
-  const isCurrent = item.status === "current";
-  const isCompleted = item.status === "completed";
-  const isUpcoming = item.status === "upcoming" || !item.status;
-
-  return (
-    <div className="flex items-center gap-2 flex-1 relative min-w-0 shrink-0">
-      {/* Step Wrapper - Only wrap content, not arrow */}
-      <div
-        className={cn(
-          "flex items-center gap-1.5 flex-1 relative z-10 transition-all shrink-0",
-          isCurrent &&
-            "bg-blue-50 dark:bg-blue-950/30 border-2 border-blue-500 dark:border-blue-400 rounded-md px-1.5 py-1 shadow-sm",
-        )}
-      >
-        {/* Step Number */}
-        <div
-          className={cn(
-            "shrink-0 w-4 h-4 rounded-full flex items-center justify-center text-[10px] font-bold transition-all",
-            isCompleted && "bg-green-500 dark:bg-green-400 text-white",
-            isCurrent && "bg-blue-500 dark:bg-blue-400 text-white",
-            isUpcoming && "bg-muted text-muted-foreground opacity-50",
-          )}
-        >
-          {stepNumber}
-        </div>
-
-        {/* Step Icon */}
-        <div
-          className={cn(
-            "shrink-0 transition-all",
-            isCompleted && "text-green-600 dark:text-green-400",
-            isCurrent && "text-blue-600 dark:text-blue-400",
-            isUpcoming && "text-muted-foreground opacity-50",
-          )}
-        >
-          {item.iconName ? (
-            <div
-              className={cn(
-                "rounded-full p-0.5 transition-all",
-                isCurrent && "scale-105",
-              )}
-              style={
-                item.fill
-                  ? { backgroundColor: item.fill, color: "white" }
-                  : undefined
-              }
-            >
-              <DynamicIcon name={item.iconName} className="size-3" />
-            </div>
-          ) : (
-            <div className="scale-90">{getStepIcon()}</div>
-          )}
-        </div>
-
-        {/* Step Content - Horizontal layout */}
-        <div className="flex items-center gap-1.5 min-w-0 flex-1">
-          <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-1.5 flex-wrap">
-              <p
-                className={cn(
-                  "text-xs font-medium whitespace-nowrap transition-all leading-tight",
-                  isCompleted &&
-                    "text-green-700 dark:text-green-300 font-semibold",
-                  isCurrent && "text-blue-700 dark:text-blue-300 font-semibold",
-                  isUpcoming && "text-muted-foreground opacity-60",
-                )}
-              >
-                {item.title}
-              </p>
-              {item.badgeText && (
-                <Badge
-                  variant={
-                    isCurrent ? "default" : isCompleted ? "outline" : "outline"
-                  }
-                  className={cn(
-                    "text-[10px] px-1 py-0 h-3.5 transition-all leading-none",
-                    isCompleted &&
-                      "border-green-500 dark:border-green-400 text-green-700 dark:text-green-300",
-                    isCurrent &&
-                      "bg-blue-600 dark:bg-blue-500 text-white border-blue-600 dark:border-blue-500",
-                    isUpcoming &&
-                      "border-muted-foreground/30 text-muted-foreground opacity-50",
-                  )}
-                >
-                  {item.badgeText}
-                </Badge>
-              )}
-            </div>
-            {item.description && (
-              <p
-                className={cn(
-                  "text-[10px] mt-0 line-clamp-1 transition-colors leading-tight",
-                  isCompleted && "text-green-600/80 dark:text-green-400/80",
-                  isCurrent && "text-blue-600/80 dark:text-blue-400/80",
-                  isUpcoming && "text-muted-foreground opacity-50",
-                )}
-              >
-                {item.description}
-              </p>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function SharedActivityTimeline({
-  items,
-  className,
-  orientation = "vertical",
-}: SharedActivityTimelineProps) {
-  // Horizontal layout - Compact
-  if (orientation === "horizontal") {
-    return (
-      <div className={cn("flex items-center gap-0.5", className)}>
-        {items.map((item, index) => (
-          <React.Fragment key={item.id}>
-            <HorizontalStep
-              item={item}
-              isLast={index === items.length - 1}
-              stepNumber={index + 1}
-            />
-            {/* Arrow between steps */}
-            {index < items.length - 1 && (
-              <div className="flex items-center justify-center shrink-0 w-3">
-                <ArrowRight
-                  className={cn(
-                    "h-3.5 w-3.5 transition-colors",
-                    item.status === "completed"
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-muted-foreground opacity-50",
-                  )}
-                  strokeWidth={2.5}
-                />
-              </div>
-            )}
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  }
-
-  // Vertical layout (default)
-  return (
-    <Timeline className={cn("pl-2", className)}>
-      {items.map((item, index) => {
-        const isLast = index === items.length - 1;
-
-        // Map status to TimelineDot props
-        let dotStatus: "done" | "current" | "error" | undefined = undefined;
-        let dotClass = "";
-
-        if (item.status === "completed") {
-          dotStatus = "done";
-        } else if (item.status === "error") {
-          dotStatus = "error";
-        } else if (item.status === "current") {
-          dotStatus = "current";
-        } else {
-          // upcoming
-          dotClass =
-            "bg-muted text-muted-foreground border-muted-foreground/30";
-        }
-
-        const isCurrent = item.status === "current";
-        const isCompleted = item.status === "completed";
-        const isUpcoming = item.status === "upcoming" || !item.status;
-
-        return (
-          <TimelineItem
-            key={item.id}
-            status={item.status === "completed" ? "done" : "default"}
-            className={cn(
-              isCurrent &&
-                "bg-blue-50 dark:bg-blue-950/30 border-2 border-blue-500 dark:border-blue-400 rounded-lg px-3 py-2 -mx-1 shadow-sm",
-            )}
-          >
-            <div className="flex items-center gap-1.5">
-              {/* Step Number */}
-              <div
-                className={cn(
-                  "shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold transition-all",
-                  isCompleted && "bg-green-500 dark:bg-green-400 text-white",
-                  isCurrent && "bg-blue-500 dark:bg-blue-400 text-white",
-                  isUpcoming && "bg-muted text-muted-foreground opacity-50",
-                )}
-              >
-                {index + 1}
-              </div>
-              <TimelineHeading
-                className={cn(
-                  "text-sm font-medium transition-all flex-1 leading-tight",
-                  isCompleted &&
-                    "text-green-700 dark:text-green-300 font-semibold",
-                  isCurrent && "text-blue-700 dark:text-blue-300 font-semibold",
-                  isUpcoming && "text-muted-foreground opacity-60",
-                )}
-              >
-                {item.title}
-              </TimelineHeading>
-            </div>
-            {item.iconName ? (
-              <TimelineDot
-                customIconName={item.iconName}
-                customStatusName={item.status || "default"}
-                className={cn(
-                  dotClass,
-                  isCompleted &&
-                    "bg-green-100 dark:bg-green-900/30 border-green-500 dark:border-green-400",
-                  isCurrent &&
-                    "ring-2 ring-blue-400 dark:ring-blue-500 ring-offset-2 ring-offset-background",
-                  isUpcoming && "opacity-50",
-                )}
-                style={
-                  item.fill
-                    ? { backgroundColor: item.fill, color: "white" }
-                    : undefined
-                }
-                iconClassName={cn(
-                  "size-4 text-background p-0.5 transition-all",
-                  isCurrent && "scale-105",
-                )}
-              />
-            ) : (
-              <TimelineDot
-                status={dotStatus}
-                className={cn(
-                  dotClass,
-                  isCompleted &&
-                    "bg-green-100 dark:bg-green-900/30 border-green-500 dark:border-green-400",
-                  isCurrent &&
-                    "ring-2 ring-blue-400 dark:ring-blue-500 ring-offset-2 ring-offset-background",
-                  isUpcoming && "opacity-50",
-                )}
-              />
-            )}
-            {/* Arrow outside of wrapper */}
-            {!isLast && (
-              <div className="relative col-start-2 col-end-3 z-20">
-                <TimelineLine
-                  done={isCompleted}
-                  className={cn(!isCompleted && "opacity-30")}
-                />
-                <ArrowDown
-                  className={cn(
-                    "absolute left-1/2 -translate-x-1/2 bottom-0 translate-y-1/2 h-3.5 w-3.5 z-20 transition-colors bg-background rounded-full p-0.5",
-                    isCompleted
-                      ? "text-green-600 dark:text-green-400"
-                      : "text-muted-foreground opacity-50",
-                  )}
-                  strokeWidth={2.5}
-                />
-              </div>
-            )}
-            <TimelineContent className={cn("space-y-1 pb-2 transition-colors")}>
-              <div
-                className={cn(
-                  "flex items-center text-sm transition-colors",
-                  isCompleted && "text-green-600/80 dark:text-green-400/80",
-                  isCurrent && "text-blue-600/80 dark:text-blue-400/80",
-                  isUpcoming && "text-muted-foreground opacity-50",
-                )}
-              >
-                {item.date && (
-                  <span>
-                    {typeof item.date === "string"
-                      ? item.date
-                      : format(new Date(item.date), "dd/MM/yyyy HH:mm", {
-                          locale: vi,
-                        })}
-                  </span>
-                )}
-                {item.badgeText && (
-                  <Badge
-                    variant={
-                      isCurrent
-                        ? "default"
-                        : isCompleted
-                          ? "outline"
-                          : "outline"
-                    }
-                    className={cn(
-                      "ms-1.5 text-[10px] px-1 py-0 h-3.5 transition-all leading-none",
-                      isCompleted &&
-                        "border-green-500 dark:border-green-400 text-green-700 dark:text-green-300",
-                      isCurrent &&
-                        "bg-blue-600 dark:bg-blue-500 text-white border-blue-600 dark:border-blue-500",
-                      isUpcoming &&
-                        "border-muted-foreground/30 text-muted-foreground opacity-50",
-                    )}
-                  >
-                    {item.badgeText}
-                  </Badge>
-                )}
-              </div>
-              {item.description && (
-                <p
-                  className={cn(
-                    "text-sm transition-colors leading-tight",
-                    isCompleted && "text-green-600/80 dark:text-green-400/80",
-                    isCurrent && "text-blue-600/80 dark:text-blue-400/80",
-                    isUpcoming && "text-muted-foreground opacity-50",
-                  )}
-                >
-                  {item.description}
-                </p>
-              )}
-              <RenderAvatarStack assignedMembers={item.assignedMembers} />
-            </TimelineContent>
-          </TimelineItem>
-        );
-      })}
-    </Timeline>
-  );
-}

package/src/workflow/approval-workflow.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import React from "react";
-
-import { cn } from "../utils";
-import { SharedActivityTimeline } from "./activity-timeline";
-import type { ActivityItem } from "./activity-timeline";
-
-export type ApprovalStepStatus = ActivityItem["status"];
-
-export interface ApprovalStep extends ActivityItem {
-  status?: ApprovalStepStatus;
-}
-
-interface ApprovalWorkflowProps {
-  steps: ApprovalStep[];
-  orientation?: "horizontal" | "vertical";
-  className?: string;
-}
-
-export function ApprovalWorkflow({
-  steps,
-  orientation = "horizontal",
-  className,
-}: ApprovalWorkflowProps) {
-  return (
-    <div className={cn("w-full", className)}>
-      <SharedActivityTimeline items={steps} orientation={orientation} />
-    </div>
-  );
-}

package/src/workflow/index.ts

@@ -1,2 +0,0 @@
-export * from "./activity-timeline";
-export * from "./approval-workflow";