@confidencesystemsinc/sdk 1.2.3 → 1.2.5

package/src/components/task/confidence-task.tsx

@@ -1,297 +0,0 @@
-import {
-  faCheckSquare,
-  faChevronDown,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import clsx from "clsx";
-import { useMemo, useState } from "react";
-import { useTaskDetails } from "../../hooks/task/useTaskDetails";
-import { TaskButton, useTaskButtons } from "../../hooks/useTaskButtons";
-import { PlaybookType } from "../../types/playbook.types";
-import { Task, TASK_STATUS, TaskStatus } from "../../types/task.types";
-import { cn } from "../../utils/cn";
-import Button from "../ui/button";
-import { TaskButtons } from "./task-buttons";
-import { TaskDropdownBadge } from "./task-dropdown-badge";
-import { TaskExpandedContent } from "./task-expanded-content";
-import { TaskLeftPanel } from "./task-left-panel";
-import { TaskStatusBadge } from "./task-status-badge";
-
-const TASK_CARD_COLOR: {
-  [key in TaskStatus]?: string;
-} = {
-  [TASK_STATUS.OPEN]: "border-[#C1C5C8] bg-[#F0F1F2]",
-  [TASK_STATUS.IN_PROGRESS]: "bg-[#E6F2FF] border-[#94C8FF]",
-  [TASK_STATUS.IN_REVIEW]: "bg-[#EAF6EC] border-[#A5DAB1]",
-  [TASK_STATUS.COMPLETED]: "bg-[#EAF6EC] border-[#A5DAB1]",
-};
-
-const TASK_VERIFICATION_TYPE = {
-  PHOTO: "photo",
-  SCREENSHOT: "screenshot",
-} as const;
-
-export type TaskVerificationType =
-  (typeof TASK_VERIFICATION_TYPE)[keyof typeof TASK_VERIFICATION_TYPE];
-
-export const ConfidenceTask = ({
-  task,
-  step,
-  playbookType,
-  onButtonClick,
-  viewMode = "card",
-  canStart = false,
-  isExpanded = false,
-  toggleExpanded,
-  playbookId,
-  taskStyle,
-  listStickyTopBase,
-}: {
-  task: Task;
-  playbookType: PlaybookType;
-  step: number;
-  onButtonClick: (buttonType: TaskButton) => Promise<void>;
-  viewMode?: "card" | "list";
-  canStart?: boolean;
-  isExpanded?: boolean;
-  toggleExpanded?: (expand?: boolean) => void;
-  playbookId: number;
-  taskStyle?: {
-    titleColor?: string;
-  };
-  listStickyTopBase?: number;
-}) => {
-  const [isPerformingAction, setIsPerformingAction] = useState(false);
-  const { taskDetails, prefetchQuery: prefetchTaskDetails } = useTaskDetails({
-    taskId: task.taskId,
-    playbookId,
-    enabled: isExpanded,
-  });
-  const { buttons } = useTaskButtons({
-    taskStatus: task.workflowStatus,
-    canStart,
-  });
-  const verificationType = useMemo(() => {
-    if (task.imageRequired === 0) {
-      return null;
-    }
-    if (task.imageRequired === 1) {
-      return TASK_VERIFICATION_TYPE.SCREENSHOT;
-    }
-    if (task.imageRequired === 2) {
-      return TASK_VERIFICATION_TYPE.PHOTO;
-    }
-    return null;
-  }, [task.imageRequired]);
-
-  const handleButtonClick = async (btn: TaskButton) => {
-    try {
-      setIsPerformingAction(true);
-      await onButtonClick(btn);
-    } finally {
-      setIsPerformingAction(false);
-    }
-  };
-
-  if (viewMode === "list") {
-    const BADGE_VARIANT = useMemo(() => {
-      if (task.workflowStatus === TASK_STATUS.COMPLETED) {
-        return "success";
-      }
-
-      if (task.workflowStatus === TASK_STATUS.IN_PROGRESS) {
-        return "primary";
-      }
-      return "default";
-    }, [task.workflowStatus]);
-
-    const BADGE_TRANSICTIONS = useMemo(() => {
-      const transitions: {
-        color: "primary" | "success";
-        id: TaskButton;
-        action: string;
-        to: TaskStatus;
-      }[] = [];
-      buttons.forEach((button) => {
-        if (button === "START") {
-          transitions.push({
-            id: "START",
-            color: "primary",
-            action: "Start",
-            to: TASK_STATUS.IN_PROGRESS,
-          });
-        }
-
-        if (button === "COMPLETE") {
-          transitions.push({
-            id: "COMPLETE",
-            color: "success",
-            action: "Complete",
-            to: TASK_STATUS.COMPLETED,
-          });
-        }
-      });
-
-      return transitions;
-    }, [buttons]);
-
-    return (
-      <div className={cn("flex flex-col")}>
-        <div
-          className={cn(
-            "flex gap-3 p-2 border-gray-200",
-            task.sequenceOrder > 0 && "border-t",
-            isExpanded &&
-              "bg-white rounded-md border border-t-none shadow-sm sticky",
-          )}
-          style={{
-            top: isExpanded ? listStickyTopBase : 0,
-          }}
-        >
-          <div className="text-gray-200 text-base">
-            {task.sequenceOrder + 1}
-          </div>
-          <div
-            onClick={() => {
-              toggleExpanded?.(!isExpanded);
-            }}
-            onMouseOver={prefetchTaskDetails}
-            className={cn(
-              "flex-1 truncate cursor-pointer",
-              isExpanded && "font-medium",
-              task.workflowStatus === TASK_STATUS.COMPLETED &&
-                "text-secondary-400 line-through",
-            )}
-            style={{
-              color:
-                (task.workflowStatus === TASK_STATUS.IN_PROGRESS &&
-                  taskStyle?.titleColor) ||
-                "#1C232D",
-            }}
-          >
-            {task.taskInstanceName}
-          </div>
-          <TaskDropdownBadge
-            title={task.workflowStatus}
-            variant={BADGE_VARIANT}
-            transitions={BADGE_TRANSICTIONS}
-            onClick={(action) => {
-              onButtonClick(action as TaskButton);
-            }}
-          />
-        </div>
-        {taskDetails?.description && (
-          <div
-            className={cn(
-              !isExpanded && "hidden",
-              "border-gray-200 border p-2 mx-4 mb-4 border-t-none -mt-[1px] bg-gray-100 rounded-b-md",
-            )}
-          >
-            <TaskExpandedContent description={taskDetails?.description || ""} />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={clsx(
-        "flex items-stretch rounded-sm overflow-hidden border",
-        TASK_CARD_COLOR[task.workflowStatus],
-      )}
-    >
-      <TaskLeftPanel
-        playbookType={playbookType}
-        status={task.workflowStatus}
-        step={step}
-      />
-      {/* <input
-          type="file"
-          ref={photoInputRef}
-          hidden
-          onChange={(e) => {
-            if (e.target.files?.length) {
-              void onUploadAsset(e.target.files[0]);
-              handleExpand(true);
-            }
-          }}
-        /> */}
-      <div className="flex w-full flex-col overflow-x-hidden flex-1 p-2">
-        {playbookType === "Sequential" && (
-          <div className="-mb-3 self-end pr-2 pt-2">
-            <TaskStatusBadge status={task.workflowStatus} />
-          </div>
-        )}
-
-        <div className="space-y-2 divide-y divide-black/10 flex flex-col flex-1">
-          <div
-            className={cn("text-lg font-medium flex-1 pb-1")}
-            style={{
-              color:
-                task.workflowStatus === "Completed"
-                  ? "#1C232D"
-                  : taskStyle?.titleColor || "#1C232D",
-            }}
-          >
-            {task.taskInstanceName}
-          </div>
-
-          {verificationType ? (
-            <div className="flex items-center gap-2 text-sm pb-2">
-              <FontAwesomeIcon icon={faCheckSquare} className="size-4" />
-              <div>
-                <span className="font-medium">
-                  {verificationType === TASK_VERIFICATION_TYPE.PHOTO
-                    ? "Photo"
-                    : "Screenshot"}
-                </span>{" "}
-                required
-              </div>
-            </div>
-          ) : (
-            <></>
-          )}
-        </div>
-
-        {taskDetails?.description && (
-          <div className={cn(!isExpanded && "hidden")}>
-            <TaskExpandedContent description={taskDetails?.description || ""} />
-          </div>
-        )}
-        {(buttons.length > 0 || task.hasDescription) && (
-          <div className="flex items-center justify-end gap-4 border-t border-black/10 pt-2">
-            <div className="flex-1">
-              <TaskButtons
-                buttons={buttons}
-                onButtonClick={handleButtonClick}
-                disabled={isPerformingAction}
-              />
-            </div>
-            {toggleExpanded && (
-              <Button
-                size="smallCollapse"
-                onMouseOver={prefetchTaskDetails}
-                category="link"
-                onClick={() => {
-                  toggleExpanded();
-                }}
-                title={
-                  isExpanded ? "Hide task description" : "Show task description"
-                }
-              >
-                <FontAwesomeIcon
-                  icon={faChevronDown}
-                  className={clsx(
-                    "cursor-pointer text-[#0069D9]",
-                    isExpanded ? "rotate-180" : "",
-                  )}
-                />
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/task/task-buttons.tsx

@@ -1,35 +0,0 @@
-import {
-  TASK_BUTTONS_DISPLAY_TEXT,
-  TaskButton,
-} from "../../hooks/useTaskButtons";
-import Button from "../ui/button";
-
-export const TaskButtons = ({
-  buttons,
-  onButtonClick,
-  disabled,
-}: {
-  buttons: TaskButton[];
-  onButtonClick: (buttonType: TaskButton) => void;
-  disabled?: boolean;
-}) => {
-  return (
-    <div className="flex items-center justify-end">
-      {buttons.map((button) => {
-        return (
-          <Button
-            key={button}
-            size="smallCollapse"
-            className="ml-2"
-            disabled={disabled}
-            onClick={() => {
-              onButtonClick(button);
-            }}
-          >
-            {TASK_BUTTONS_DISPLAY_TEXT[button]}
-          </Button>
-        );
-      })}
-    </div>
-  );
-};

package/src/components/task/task-dropdown-badge.tsx

@@ -1,118 +0,0 @@
-import { useDismiss, useFloating, useInteractions } from "@floating-ui/react";
-import { faArrowRight, faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
-import { cn } from "../../utils/cn";
-import { Badge } from "../badge";
-const TASK_DROPDOWN_BADGE_VARIANTS = {
-  default: "text-secondary-600 border-secondary-600",
-  primary: "text-primary-600 border-primary-600",
-  success: "text-success-600 border-success-600",
-} as const;
-
-interface TaskDropdownBadgeProps {
-  title: string;
-  variant?: keyof typeof TASK_DROPDOWN_BADGE_VARIANTS;
-  transitions: {
-    id: string;
-    color: "primary" | "success";
-    action: string;
-    to: string;
-  }[];
-  onClick?: (action: string) => void;
-}
-
-const MenuItem = ({
-  transition,
-  onClick,
-}: {
-  transition: {
-    id: string;
-    color: "primary" | "success";
-    action: string;
-    to: string;
-  };
-  onClick: () => void;
-}) => {
-  return (
-    <div
-      className="py-1 px-3 space-x-2 flex items-center hover:bg-gray-100 cursor-pointer"
-      onClick={(e) => {
-        e.stopPropagation();
-        onClick();
-      }}
-    >
-      <span className="text-base text-dark flex-1">{transition.action}</span>
-      <FontAwesomeIcon icon={faArrowRight} className="text-gray-400 size-4" />
-      <Badge category="outline" color={transition.color}>
-        {transition.to}
-      </Badge>
-    </div>
-  );
-};
-
-export const TaskDropdownBadge = ({
-  title,
-  variant = "default",
-  transitions,
-  onClick,
-}: TaskDropdownBadgeProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { refs, floatingStyles, context } = useFloating({
-    strategy: "fixed",
-    placement: "bottom-end",
-    open: isOpen,
-    onOpenChange: setIsOpen,
-  });
-
-  const dismiss = useDismiss(context, {
-    outsidePress: true,
-  });
-  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-  return (
-    <>
-      <div
-        onClick={
-          transitions?.length ? () => setIsOpen((prev) => !prev) : undefined
-        }
-        ref={refs.setReference}
-        className={cn(
-          "px-1 uppercase border rounded-sm flex items-center space-x-1",
-          transitions.length ? "cursor-pointer" : "pointer-events-none",
-          TASK_DROPDOWN_BADGE_VARIANTS[variant],
-        )}
-        {...getReferenceProps()}
-      >
-        <span className="text-sm font-bold">{title}</span>
-        {transitions.length > 0 ? (
-          <FontAwesomeIcon icon={faChevronDown} className="size-4" />
-        ) : (
-          <></>
-        )}
-      </div>
-
-      {isOpen && transitions.length && (
-        <div
-          ref={refs.setFloating}
-          style={floatingStyles}
-          className={cn(
-            "border border-gray-200 py-1.5 rounded-sm min-w-[172px] bg-white shadow-dark/50",
-          )}
-          {...getFloatingProps()}
-        >
-          {transitions.map((transition, index) => (
-            <MenuItem
-              key={index}
-              transition={transition}
-              onClick={() => {
-                onClick?.(transition.id as string);
-                setIsOpen(false);
-              }}
-            />
-          ))}
-        </div>
-      )}
-    </>
-  );
-};

package/src/components/task/task-expanded-content.tsx

@@ -1,46 +0,0 @@
-import { useEffect, useMemo } from "react";
-import { DROPBOX_API_ENDPOINT } from "../../constants/settings.constants";
-
-export const TaskExpandedContent = ({
-  description,
-}: {
-  description: string;
-}) => {
-  const imageReplacedDescription = useMemo(() => {
-    const regex = /https:\/\/[^/]+\/api\/files/g;
-
-    const stripped = description?.replaceAll(regex, `${DROPBOX_API_ENDPOINT}`);
-
-    const replaced = stripped?.replaceAll(
-      'src="/api/files',
-      `src="${DROPBOX_API_ENDPOINT}`,
-    );
-
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(replaced, "text/html");
-    const images = doc.querySelectorAll("img");
-    const slides = [] as { src: string }[];
-    images?.forEach((img) => {
-      const src = img.getAttribute("src");
-      if (src) {
-        slides.push({ src });
-        /** Prefetch image to show immediately */
-        new Image().src = src;
-      }
-    });
-
-    return replaced;
-  }, [description]);
-
-  useEffect(() => {}, [imageReplacedDescription]);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div
-        className="lexical-view-mode"
-        // onClick={handleDescriptionClick}
-        dangerouslySetInnerHTML={{ __html: imageReplacedDescription }}
-      />
-    </div>
-  );
-};

package/src/components/task/task-left-panel.tsx

@@ -1,60 +0,0 @@
-import clsx from "clsx";
-import { TaskStatus, TASK_STATUS } from "../../types/task.types";
-import { PLAYBOOK_TYPES, PlaybookType } from "../../types/playbook.types";
-
-export interface TaskCardV2LeftPanelProps {
-  playbookType: PlaybookType;
-  status: TaskStatus;
-  step: number;
-  isSelected?: boolean;
-  onSelect?: (withShiftKey?: boolean) => void;
-}
-
-const LEFT_PANEL_FORMATTED_LABELS: {
-  [key in TaskStatus]?: string;
-} = {
-  [TASK_STATUS.IN_REVIEW]: "In Review",
-};
-
-const LEFT_PANEL_COLOR: {
-  [key in TaskStatus]?: string;
-} = {
-  [TASK_STATUS.OPEN]: "bg-secondary-500",
-  [TASK_STATUS.IN_PROGRESS]: "bg-primary-600",
-  [TASK_STATUS.IN_REVIEW]: "bg-success-600",
-  [TASK_STATUS.COMPLETED]: "bg-success-600",
-};
-
-export const TaskLeftPanel = ({
-  playbookType,
-  status,
-  step,
-  isSelected,
-  onSelect,
-}: TaskCardV2LeftPanelProps) => {
-  return (
-    <div
-      className={clsx(
-        "flex flex-col items-center justify-center",
-        isSelected ? "bg-[#FFE600]" : LEFT_PANEL_COLOR[status],
-        onSelect && "cursor-pointer",
-      )}
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelect?.(e.shiftKey);
-      }}
-    >
-      <span
-        className={clsx(
-          `text-orientation-mixed w-[27px] flex items-center whitespace-nowrap px-2 text-sm font-bold [writing-mode:vertical-lr]`,
-          isSelected ? "text-black" : "text-white",
-        )}
-      >
-        {/** TODO: check "status" wording */}
-        {playbookType === PLAYBOOK_TYPES.SEQUENTIAL
-          ? `STEP ${step}`
-          : (LEFT_PANEL_FORMATTED_LABELS[status] || status).toUpperCase()}
-      </span>
-    </div>
-  );
-};

package/src/components/task/task-status-badge.tsx

@@ -1,23 +0,0 @@
-import { TASK_STATUS, TaskStatus } from "../../types/task.types";
-import { Badge, BadgeSolid } from "../badge";
-
-export interface TaskCardV2StatusBadgeProps {
-  status: TaskStatus;
-}
-
-export const STATUS_BADGE_COLOR: {
-  [key in TaskStatus]?: keyof typeof BadgeSolid;
-} = {
-  [TASK_STATUS.OPEN]: "secondary",
-  [TASK_STATUS.IN_PROGRESS]: "primary",
-  [TASK_STATUS.IN_REVIEW]: "success",
-  [TASK_STATUS.COMPLETED]: "success",
-} as const;
-
-export const TaskStatusBadge = ({ status }: TaskCardV2StatusBadgeProps) => {
-  return (
-    <Badge category="outline" color={STATUS_BADGE_COLOR[status]}>
-      {status}
-    </Badge>
-  );
-};