@confidencesystemsinc/sdk 1.0.1 → 1.0.3

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

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

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

@@ -1,121 +0,0 @@
-import { useDismiss, useFloating, useInteractions } from "@floating-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { cn } from "../../utils/cn";
-import { faArrowRight, faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { Badge } from "../badge";
-import { useState } from "react";
-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" />
-      <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",
-          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="text-gray-400 ml-1"
-          />
-        ) : (
-          <></>
-        )}
-      </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-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>
-  );
-};

package/src/components/ui/button.tsx

@@ -1,269 +0,0 @@
-import {
-  ReactNode,
-  ButtonHTMLAttributes,
-  CSSProperties,
-  forwardRef,
-} from "react";
-import { twMerge } from "tailwind-merge";
-/*
- DOCS: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
-*/
-
-const ButtonBase =
-  "whitespace-nowrap font-normal flex items-center justify-center";
-const ButtonFocus =
-  "focus:outline focus:outline-3 focus:outline-primary-500/[.3]";
-const ButtonDisabled = "disabled:opacity-15 disabled:pointer-events-none";
-
-const isLight = (color: string) => {
-  return Boolean(color === "grayLight" || color === "warning");
-};
-
-const handleNoneColor = (fn: () => string, color?: string) => {
-  if (!color || color === "none") {
-    return "";
-  }
-  return fn();
-};
-
-const buttonColorBase = (color: string, active: boolean) =>
-  handleNoneColor(() => {
-    const useColor = color === "gray400" ? "gray" : color;
-    const textColor = isLight(useColor)
-      ? "active:text-black"
-      : "active:text-white";
-    if (color === "primary") {
-      return active
-        ? `bg-${useColor}-800 text-white`
-        : `hover:bg-${useColor}-800 active:bg-${useColor}-800 hover:text-white ${textColor}`;
-    } else if (useColor === "grayDark") {
-      return active
-        ? "bg-gray-800 text-white"
-        : `hover:bg-gray-800 active:bg-gray-800 hover:text-white ${textColor}`;
-    } else if (useColor === "grayLight") {
-      return active
-        ? "bg-gray-50 text-black"
-        : `hover:bg-gray-50 active:bg-gray-50 hover:text-black ${textColor}`;
-    } else if (color === "gray400") {
-      return active
-        ? `bg-${useColor}-500 text-white`
-        : `hover:bg-${useColor}-500 active:bg-${useColor}-500 hover:text-white ${textColor}`;
-    }
-    return active
-      ? `bg-${useColor}-700 text-white`
-      : `hover:bg-${useColor}-600 active:bg-${useColor}-700 hover:text-white ${textColor}`;
-  }, color);
-
-const buttonColorSolid = (color: string) =>
-  handleNoneColor(() => {
-    const textColor = isLight(color) ? "text-black" : "text-white";
-    if (color === "primary") {
-      return `bg-primary-600 ${textColor}`;
-    } else if (color === "gray400") {
-      return `bg-gray-400 ${textColor}`;
-    }
-    return `bg-${color}-500 ${textColor}`;
-  }, color);
-
-const buttonColorLink = (color: string) => {
-  const classes: Record<string, string> = {
-    dark: "text-dark hover:text-dark",
-    yellow: "text-yellow hover:text-yellow",
-    gray: "text-gray-500 hover:text-gray-800",
-    primary: "text-primary-600 hover:text-primary-800",
-    secondary: "text-secondary-500 hover:text-secondary-800",
-    success: "text-success-500 hover:text-success-800",
-    info: "text-info-500 hover:text-info-800",
-    warning: "text-warning-500 hover:text-warning-800",
-    danger: "text-danger-500 hover:text-danger-800",
-    steel: "text-steel-500 hover:text-steel-800",
-    orange: "text-orange-500 hover:text-orange-800",
-    purple: "text-purple-500 hover:text-purple-800",
-    "fiserv-orange": "text-fiserv-orange-500 hover:text-fiserv-orange-800",
-    grayDark: "text-gray-800 hover:text-gray-900",
-    grayLight: "text-gray-50 hover:text-gray-400",
-    gray400: "text-gray-400 hover:text-gray-700",
-  };
-  return (color && classes[color]) || "";
-};
-
-const buttonColorLinkHoverSolid = (color: string, active: boolean) => {
-  const classes: Record<string, string> = {
-    dark: active
-      ? "bg-dark text-white"
-      : "text-dark hover:bg-dark hover:text-white",
-    yellow: active
-      ? "bg-yellow text-white"
-      : "text-yellow hover:bg-yellow hover:text-white",
-    gray: active
-      ? "bg-gray-500 text-white"
-      : "text-gray-500 hover:bg-gray-500 hover:text-white",
-    primary: active
-      ? "bg-primary-800 text-white"
-      : "text-primary-600 hover:bg-primary-800 hover:text-white",
-    secondary: active
-      ? "bg-secondary-500 text-white"
-      : "text-secondary-500 hover:bg-secondary-500 hover:text-white",
-    success: active
-      ? "bg-success-500 text-white"
-      : "text-success-500 hover:bg-success-500 hover:text-white",
-    info: active
-      ? "bg-info-500 text-white"
-      : "text-info-500 hover:bg-info-500 hover:text-white",
-    warning: active
-      ? "bg-warning-500 text-white"
-      : "text-warning-500 hover:bg-warning-500 hover:text-white",
-    danger: active
-      ? "bg-danger-500 text-white"
-      : "text-danger-500 hover:bg-danger-500 hover:text-white",
-    steel: active
-      ? "bg-steel-500 text-white"
-      : "text-steel-500 hover:bg-steel-500 hover:text-white",
-    orange: active
-      ? "bg-orange-500 text-white"
-      : "text-orange-500 hover:bg-orange-500 hover:text-white",
-    purple: active
-      ? "bg-purple-500 text-white"
-      : "text-purple-500 hover:bg-purple-500 hover:text-white",
-    "fiserv-orange": active
-      ? "bg-fiserv-orange-500 text-white"
-      : "text-fiserv-orange-500 hover:bg-fiserv-orange-500 hover:text-white",
-    grayDark: active
-      ? "bg-gray-900 text-white"
-      : "text-gray-800 hover:bg-gray-900 hover:text-white",
-    grayLight: active
-      ? "bg-gray-400 text-white"
-      : "text-gray-50 hover:bg-gray-400 hover:text-white",
-    gray400: active
-      ? "bg-gray-500 text-white"
-      : "text-gray-400 hover:bg-gray-500 hover:text-white",
-  };
-  return (color && classes[color]) || "";
-};
-
-const buttonColorOutline = (color: string, active: boolean) => {
-  if (!color || color === "none") {
-    return "";
-  } else if (color === "primary") {
-    return `border border-primary-600 ${active ? "" : "text-primary-600"}`;
-  } else if (color === "grayDark") {
-    return `border border-gray-800 ${active ? "" : "text-gray-800"}`;
-  } else if (color === "grayLight") {
-    return `border border-gray-50 ${active ? "" : "text-gray-400"}`;
-  } else if (color === "gray400") {
-    return `border border-gray-400 ${active ? "" : "text-gray-400"}`;
-  }
-
-  return `border border-${color}-500 ${active ? "" : `text-${color}-500`}`;
-};
-
-export type ButtonCategoryType =
-  | "solid"
-  | "link"
-  | "linkHoverSolid"
-  | "outline";
-
-const ButtonCategoryFn = (
-  color: string,
-  active: boolean,
-): { [key in ButtonCategoryType]: string } => {
-  return {
-    solid: buttonColorSolid(color),
-    link: buttonColorLink(color),
-    linkHoverSolid: buttonColorLinkHoverSolid(color, active),
-    outline: buttonColorOutline(color, active),
-  };
-};
-
-export const ButtonSize = {
-  none: "",
-  default: "min-w-fit h-[40px] text-base px-3",
-  base: "w-full md:min-w-fit h-[40px] text-base px-3",
-  small: "min-w-[106px] h-[30px] text-sm px-2",
-  normal: "min-w-[140px] h-[38px] text-base px-3",
-  large: "min-w-[160px] h-[40px] text-lg px-3",
-  NormalBlock: "w-full h-[40px] text-lg px-3",
-  box: "w-[38px] h-[38px]",
-  smallCollapse: "h-[30px] text-sm px-2",
-  normalCollapse: "h-[38px] text-base px-3",
-} as const;
-
-export type ButtonSizeType = keyof typeof ButtonSize;
-
-export const ButtonRounded = {
-  none: "",
-  default: "rounded",
-  pill: "rounded-pill",
-} as const;
-
-export type ButtonRoundedType = keyof typeof ButtonRounded;
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<Omit<HTMLButtonElement, "type">> {
-  active?: boolean;
-  children: ReactNode;
-  color?: string;
-  size?: ButtonSizeType;
-  category?: "solid" | "link" | "outline" | "linkHoverSolid";
-  type?: "button" | "submit";
-  rounded?: ButtonRoundedType;
-  className?: string;
-  useFilterStyle?: boolean;
-  usePaginationStyle?: boolean;
-  dataCy?: string;
-  testingIdKey?: string;
-  style?: CSSProperties;
-}
-
-const button = (
-  {
-    active = false,
-    children,
-    color = "primary",
-    size = "normal",
-    category = "solid",
-    className,
-    type = "button",
-    rounded = "default",
-    style = {},
-    ...props
-  }: ButtonProps,
-  ref: React.Ref<HTMLButtonElement>,
-) => {
-  const disabledClasses = ButtonDisabled;
-  const colorBaseClasses = !/link/.test(category)
-    ? buttonColorBase(color, active)
-    : null;
-  const focusClasses = ButtonFocus; // for accessibility we always need focus outlines
-  const sizeClasses = ButtonSize[size];
-  const categoryClasses = ButtonCategoryFn(color, active)?.[category];
-  const colorClasses = twMerge(colorBaseClasses, categoryClasses);
-  const roundedClasses = ButtonRounded[rounded];
-  return (
-    <button
-      {...props}
-      style={{
-        ...style,
-        transition:
-          "color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
-      }}
-      type={type}
-      ref={ref}
-      className={twMerge(
-        ButtonBase,
-        focusClasses,
-        disabledClasses,
-        sizeClasses,
-        colorClasses,
-        roundedClasses,
-        className,
-        "cursor-pointer",
-      )}
-    >
-      {children}
-    </button>
-  );
-};
-
-const Button = forwardRef(button);
-export default Button;

package/src/components/ui/header.tsx

@@ -1,12 +0,0 @@
-export const Header = () => {
-  return (
-    <div
-      className="sticky top-0 z-[4]"
-      style={{ background: "rgb(0, 123, 255)" }}
-    >
-      <div className="container">
-        <div className="flex h-[56px] items-center"></div>
-      </div>
-    </div>
-  );
-};

package/src/components/ui/input.tsx

@@ -1,39 +0,0 @@
-import { Description, Field, Input, Label } from "@headlessui/react";
-import { cn } from "../../utils/cn";
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  type?: string; // Optional type prop, default is "text"
-  label: string; // Required label prop for the input field
-  description?: string; // Optional description prop for additional information
-}
-export const InputField = ({
-  type = "text",
-  className,
-  label,
-  description,
-  ...props
-}: InputProps & {
-  className?: string;
-}) => {
-  return (
-    <div className="w-full max-w-md px-4">
-      <Field>
-        <Label className="font-medium text-gray-900">{label}</Label>
-        {description && (
-          <Description className="text-sm text-secondary">
-            {description}
-          </Description>
-        )}
-        <Input
-          type={type}
-          className={cn(
-            "mt-3 block w-full rounded-lg  border border-gray-200 px-3 py-1.5 text-sm/6 text-gray-800",
-            "focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-primary-500",
-            className,
-          )}
-          {...props}
-        />
-      </Field>
-    </div>
-  );
-};

package/src/components/ui/modal.tsx

@@ -1,88 +0,0 @@
-import {
-  Dialog,
-  DialogBackdrop,
-  DialogPanel,
-  DialogTitle,
-} from "@headlessui/react";
-import React from "react";
-import Button from "./button";
-
-export const Modal = ({
-  isOpen,
-  close,
-  title,
-  dismissOptions,
-  confirmOptions,
-  children,
-}: {
-  isOpen: boolean;
-  close: () => void;
-  title: string;
-  children: React.ReactNode;
-  dismissOptions?: {
-    label: string;
-    onClick: () => void;
-  };
-  confirmOptions?: {
-    label: string;
-    onClick: () => void;
-    disabled?: boolean;
-  };
-}) => {
-  return (
-    <Dialog
-      open={isOpen}
-      onClose={close}
-      className="relative z-50 transition duration-300 ease-out data-closed:opacity-0"
-      transition
-    >
-      {/* The backdrop, rendered as a fixed sibling to the panel container */}
-      <DialogBackdrop className="fixed inset-0 bg-black/30" />
-
-      {/* Full-screen container to center the panel */}
-      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-        {/* The actual dialog panel  */}
-        <DialogPanel className="max-w-lg divide-y divide-gray-100 bg-white rounded-sm shadow-xl">
-          <DialogTitle className=" text-gray-900 p-4">{title}</DialogTitle>
-          <div className="p-4">{children}</div>
-          {dismissOptions || confirmOptions ? (
-            <div className="flex gap-4 justify-end p-4">
-              {dismissOptions ? (
-                <Button
-                  onClick={() => {
-                    dismissOptions.onClick();
-                    close();
-                  }}
-                  size="small"
-                  color="secondary"
-                >
-                  {dismissOptions.label}
-                </Button>
-              ) : (
-                <></>
-              )}
-
-              {confirmOptions ? (
-                <Button
-                  disabled={confirmOptions.disabled}
-                  onClick={() => {
-                    confirmOptions.onClick();
-                    close();
-                  }}
-                  size="small"
-                  color="primary"
-                >
-                  {confirmOptions.label}
-                </Button>
-              ) : (
-                <></>
-              )}
-            </div>
-          ) : (
-            <></>
-          )}
-        </DialogPanel>
-      </div>
-    </Dialog>
-  );
-};

package/src/constants/settings.constants.ts

@@ -1,2 +0,0 @@
-export const SERVICES_URL = "https://api.confidence.org";
-export const KONG_KEY = "3QM9PlH0BuyKaVErlBWxVJU5v0vFlMJv";

package/src/hooks/task-events/useCompleteTask.ts

@@ -1,26 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { completeTask } from "../../services/complete-task.service";
-
-export const useCompleteTask = () => {
-  const completeTaskMutation = useMutation({
-    mutationFn: async (taskInstanceId: string) => {
-      return completeTask(taskInstanceId);
-    },
-  });
-
-  const completeTaskHandler = async (taskInstanceId: string) => {
-    return completeTaskMutation.mutateAsync(taskInstanceId, {
-      onSuccess: () => {
-        console.log("Task completed successfully");
-      },
-      onError: (error) => {
-        console.error("Error completing task:", error);
-      },
-    });
-  };
-
-  return {
-    completeTask: completeTaskHandler,
-    ...completeTaskMutation,
-  };
-};