analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,209 lines (1,194 loc) • 52.9 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Support/components/TicketModal.tsx
var TicketModal_exports = {};
__export(TicketModal_exports, {
TicketModal: () => TicketModal
});
module.exports = __toCommonJS(TicketModal_exports);
var import_react5 = require("react");
var import_dayjs = __toESM(require("dayjs"));
var import_pt_br = require("dayjs/locale/pt-br");
// src/components/Badge/Badge.tsx
var import_phosphor_react = require("phosphor-react");
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/components/Badge/Badge.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES = {
solid: {
error: "bg-error-background text-error-700 focus-visible:outline-none",
warning: "bg-warning text-warning-800 focus-visible:outline-none",
success: "bg-success text-success-800 focus-visible:outline-none",
info: "bg-info text-info-800 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 focus-visible:outline-none"
},
outlined: {
error: "bg-error text-error-700 border border-error-300 focus-visible:outline-none",
warning: "bg-warning text-warning-800 border border-warning-300 focus-visible:outline-none",
success: "bg-success text-success-800 border border-success-300 focus-visible:outline-none",
info: "bg-info text-info-800 border border-info-300 focus-visible:outline-none",
muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
},
exams: {
exam1: "bg-exam-1 text-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
},
examsOutlined: {
exam1: "bg-exam-1 text-info-700 border border-info-700 focus-visible:outline-none",
exam2: "bg-exam-2 text-typography-1 border border-typography-1 focus-visible:outline-none",
exam3: "bg-exam-3 text-typography-2 border border-typography-2 focus-visible:outline-none",
exam4: "bg-exam-4 text-success-700 border border-success-700 focus-visible:outline-none"
},
resultStatus: {
negative: "bg-error text-error-800 focus-visible:outline-none",
positive: "bg-success text-success-800 focus-visible:outline-none"
},
notification: "text-primary"
};
var SIZE_CLASSES = {
small: "text-2xs px-2 py-1",
medium: "text-xs px-2 py-1",
large: "text-sm px-2 py-1"
};
var SIZE_CLASSES_ICON = {
small: "size-3",
medium: "size-3.5",
large: "size-4"
};
var Badge = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "error",
className = "",
notificationActive = false,
...props
}) => {
const sizeClasses = SIZE_CLASSES[size];
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
const variantActionMap = VARIANT_ACTION_CLASSES[variant] || {};
const variantClasses = typeof variantActionMap === "string" ? variantActionMap : variantActionMap[action] ?? variantActionMap.muted ?? "";
const baseClasses = "inline-flex items-center justify-center rounded-xs font-normal gap-1 relative";
const baseClassesIcon = "flex items-center";
if (variant === "notification") {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
notificationActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
"data-testid": "notification-dot",
className: "absolute top-[5px] right-[10px] block h-2 w-2 rounded-full bg-indicator-error ring-2 ring-white"
}
)
]
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
]
}
);
};
var Badge_default = Badge;
// src/components/Button/Button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var VARIANT_ACTION_CLASSES2 = {
solid: {
primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
},
outline: {
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
},
link: {
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
}
};
var SIZE_CLASSES2 = {
"extra-small": "text-xs px-3.5 py-2",
small: "text-sm px-4 py-2.5",
medium: "text-md px-5 py-2.5",
large: "text-lg px-6 py-3",
"extra-large": "text-lg px-7 py-3.5"
};
var Button = ({
children,
iconLeft,
iconRight,
size = "medium",
variant = "solid",
action = "primary",
className = "",
disabled,
type = "button",
...props
}) => {
const sizeClasses = SIZE_CLASSES2[size];
const variantClasses = VARIANT_ACTION_CLASSES2[variant][action];
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// src/components/Divider/Divider.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Divider = ({
orientation = "horizontal",
className = "",
...props
}) => {
const baseClasses = "bg-border-200 border-0";
const orientationClasses = {
horizontal: "w-full h-px",
vertical: "h-full w-px"
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"hr",
{
className: cn(baseClasses, orientationClasses[orientation], className),
"aria-orientation": orientation,
...props
}
);
};
var Divider_default = Divider;
// src/components/Modal/Modal.tsx
var import_react = require("react");
var import_phosphor_react2 = require("phosphor-react");
// src/components/Modal/utils/videoUtils.ts
var isYouTubeUrl = (url) => {
const youtubeRegex = /^(https?:\/\/)?((www|m|music)\.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/.+/i;
return youtubeRegex.test(url);
};
var isValidYouTubeHost = (host) => {
if (host === "youtu.be") return "youtu.be";
const isValidYouTubeCom = host === "youtube.com" || host.endsWith(".youtube.com") && /^(www|m|music)\.youtube\.com$/.test(host);
if (isValidYouTubeCom) return "youtube";
const isValidNoCookie = host === "youtube-nocookie.com" || host.endsWith(".youtube-nocookie.com") && /^(www|m|music)\.youtube-nocookie\.com$/.test(host);
if (isValidNoCookie) return "nocookie";
return null;
};
var extractYoutuBeId = (pathname) => {
const firstSeg = pathname.split("/").filter(Boolean)[0];
return firstSeg || null;
};
var extractYouTubeId = (pathname, searchParams) => {
const parts = pathname.split("/").filter(Boolean);
const [first, second] = parts;
if (first === "embed" && second) return second;
if (first === "shorts" && second) return second;
if (first === "live" && second) return second;
const v = searchParams.get("v");
if (v) return v;
return null;
};
var getYouTubeVideoId = (url) => {
try {
const u = new URL(url);
const hostType = isValidYouTubeHost(u.hostname.toLowerCase());
if (!hostType) return null;
if (hostType === "youtu.be") {
return extractYoutuBeId(u.pathname);
}
return extractYouTubeId(u.pathname, u.searchParams);
} catch {
return null;
}
};
var getYouTubeEmbedUrl = (videoId) => {
return `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=0&rel=0&modestbranding=1`;
};
// src/components/Modal/Modal.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var SIZE_CLASSES3 = {
xs: "max-w-[360px]",
sm: "max-w-[420px]",
md: "max-w-[510px]",
lg: "max-w-[640px]",
xl: "max-w-[970px]"
};
var Modal = ({
isOpen,
onClose,
title,
children,
size = "md",
className = "",
closeOnEscape = true,
footer,
hideCloseButton = false,
variant = "default",
description,
image,
imageAlt,
actionLink,
actionLabel,
contentClassName = ""
}) => {
const titleId = (0, import_react.useId)();
(0, import_react.useEffect)(() => {
if (!isOpen || !closeOnEscape) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
onClose();
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [isOpen, closeOnEscape, onClose]);
(0, import_react.useEffect)(() => {
if (!isOpen) return;
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
const originalOverflow = document.body.style.overflow;
const originalPaddingRight = document.body.style.paddingRight;
document.body.style.overflow = "hidden";
if (scrollbarWidth > 0) {
document.body.style.paddingRight = `${scrollbarWidth}px`;
const overlay = document.createElement("div");
overlay.id = "modal-scrollbar-overlay";
overlay.style.cssText = `
position: fixed;
top: 0;
right: 0;
width: ${scrollbarWidth}px;
height: 100vh;
background-color: rgb(0 0 0 / 0.6);
z-index: 40;
pointer-events: none;
`;
document.body.appendChild(overlay);
}
return () => {
document.body.style.overflow = originalOverflow;
document.body.style.paddingRight = originalPaddingRight;
const overlay = document.getElementById("modal-scrollbar-overlay");
if (overlay) {
overlay.remove();
}
};
}, [isOpen]);
if (!isOpen) return null;
const sizeClasses = SIZE_CLASSES3[size];
const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
const modalClasses = cn(
baseClasses,
sizeClasses,
dialogResetClasses,
className
);
const normalizeUrl = (href) => /^https?:\/\//i.test(href) ? href : `https://${href}`;
const handleActionClick = () => {
if (actionLink) {
window.open(normalizeUrl(actionLink), "_blank", "noopener,noreferrer");
}
};
if (variant === "activity") {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"button",
{
onClick: onClose,
className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
"aria-label": "Fechar modal",
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.X, { size: 18 })
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
image && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"img",
{
src: image,
alt: imageAlt ?? "",
className: "w-[122px] h-[122px] object-contain"
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"h2",
{
id: titleId,
className: "text-lg font-semibold text-text-950 text-center",
children: title
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
actionLink && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-full", children: [
(() => {
const normalized = normalizeUrl(actionLink);
const isYT = isYouTubeUrl(normalized);
if (!isYT) return null;
const id = getYouTubeVideoId(normalized);
if (!id) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"iframe",
{
src: getYouTubeEmbedUrl(id),
className: "w-full aspect-video rounded-lg",
allowFullScreen: true,
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
title: "V\xEDdeo YouTube"
}
);
})(),
!isYouTubeUrl(normalizeUrl(actionLink)) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
)
] })
] })
]
}
) });
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs border-none p-0 m-0 w-full cursor-default", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between px-6 py-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"button",
{
onClick: onClose,
className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
"aria-label": "Fechar modal",
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_phosphor_react2.X, { size: 18 })
}
)
] }),
children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
footer && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
]
}
) });
};
var Modal_default = Modal;
// src/components/Text/Text.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Text = ({
children,
size = "md",
weight = "normal",
color = "text-text-950",
as,
className = "",
...props
}) => {
let sizeClasses = "";
let weightClasses = "";
const sizeClassMap = {
"2xs": "text-2xs",
xs: "text-xs",
sm: "text-sm",
md: "text-md",
lg: "text-lg",
xl: "text-xl",
"2xl": "text-2xl",
"3xl": "text-3xl",
"4xl": "text-4xl",
"5xl": "text-5xl",
"6xl": "text-6xl"
};
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
const weightClassMap = {
hairline: "font-hairline",
light: "font-light",
normal: "font-normal",
medium: "font-medium",
semibold: "font-semibold",
bold: "font-bold",
extrabold: "font-extrabold",
black: "font-black"
};
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
const baseClasses = "font-primary";
const Component = as ?? "p";
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/TextArea/TextArea.tsx
var import_react2 = require("react");
var import_phosphor_react3 = require("phosphor-react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var SIZE_CLASSES4 = {
small: {
textarea: "h-24 text-sm",
// 96px height, 14px font
textSize: "sm"
},
medium: {
textarea: "h-24 text-base",
// 96px height, 16px font
textSize: "md"
},
large: {
textarea: "h-24 text-lg",
// 96px height, 18px font
textSize: "lg"
},
extraLarge: {
textarea: "h-24 text-xl",
// 96px height, 20px font
textSize: "xl"
}
};
var BASE_TEXTAREA_CLASSES = "w-full box-border p-3 bg-background border border-solid rounded-[4px] resize-none focus:outline-none font-roboto font-normal leading-[150%] placeholder:text-text-600 transition-all duration-200";
var STATE_CLASSES = {
default: {
base: "border-border-300 bg-background text-text-600",
hover: "hover:border-border-400",
focus: "focus:border-border-500"
},
hovered: {
base: "border-border-400 bg-background text-text-600",
hover: "",
focus: "focus:border-border-500"
},
focused: {
base: "border-2 border-primary-950 bg-background text-text-900",
hover: "",
focus: ""
},
invalid: {
base: "border-2 border-red-700 bg-white text-gray-800",
hover: "hover:border-red-700",
focus: "focus:border-red-700"
},
disabled: {
base: "border-border-300 bg-background text-text-600 cursor-not-allowed opacity-40",
hover: "",
focus: ""
}
};
var TextArea = (0, import_react2.forwardRef)(
({
label,
size = "medium",
state = "default",
errorMessage,
helperMessage,
className = "",
labelClassName = "",
disabled,
id,
onChange,
placeholder,
required,
showCharacterCount = false,
maxLength,
value,
...props
}, ref) => {
const generatedId = (0, import_react2.useId)();
const inputId = id ?? `textarea-${generatedId}`;
const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
const currentLength = typeof value === "string" ? value.length : 0;
const isNearLimit = maxLength && currentLength >= maxLength * 0.8;
const handleChange = (event) => {
onChange?.(event);
};
const handleFocus = (event) => {
setIsFocused(true);
props.onFocus?.(event);
};
const handleBlur = (event) => {
setIsFocused(false);
props.onBlur?.(event);
};
let currentState = disabled ? "disabled" : state;
if (isFocused && currentState !== "invalid" && currentState !== "disabled") {
currentState = "focused";
}
const sizeClasses = SIZE_CLASSES4[size];
const stateClasses = STATE_CLASSES[currentState];
const textareaClasses = cn(
BASE_TEXTAREA_CLASSES,
sizeClasses.textarea,
stateClasses.base,
stateClasses.hover,
stateClasses.focus,
className
);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
Text_default,
{
as: "label",
htmlFor: inputId,
size: sizeClasses.textSize,
weight: "medium",
color: "text-text-950",
className: cn("mb-1.5", labelClassName),
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"textarea",
{
ref,
id: inputId,
disabled,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
className: textareaClasses,
placeholder,
required,
maxLength,
value,
...props
}
),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error mt-1.5", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_phosphor_react3.WarningCircle, { size: 16 }),
" ",
errorMessage
] }),
!errorMessage && showCharacterCount && maxLength && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
Text_default,
{
size: "sm",
weight: "normal",
className: `mt-1.5 ${isNearLimit ? "text-indicator-warning" : "text-text-500"}`,
children: [
currentLength,
"/",
maxLength,
" caracteres"
]
}
),
!errorMessage && helperMessage && !(showCharacterCount && maxLength) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text_default, { size: "sm", weight: "normal", className: "mt-1.5 text-text-500", children: helperMessage })
] });
}
);
TextArea.displayName = "TextArea";
var TextArea_default = TextArea;
// src/components/Skeleton/Skeleton.tsx
var import_react3 = require("react");
var import_jsx_runtime7 = require("react/jsx-runtime");
var SKELETON_ANIMATION_CLASSES = {
pulse: "animate-pulse",
none: ""
};
var SKELETON_VARIANT_CLASSES = {
text: "h-4 bg-background-200 rounded",
circular: "bg-background-200 rounded-full",
rectangular: "bg-background-200",
rounded: "bg-background-200 rounded-lg"
};
var SPACING_CLASSES = {
none: "",
small: "space-y-1",
medium: "space-y-2",
large: "space-y-3"
};
var Skeleton = (0, import_react3.forwardRef)(
({
variant = "text",
width,
height,
animation = "pulse",
lines = 1,
spacing = "none",
className = "",
children,
...props
}, ref) => {
const animationClass = SKELETON_ANIMATION_CLASSES[animation];
const variantClass = SKELETON_VARIANT_CLASSES[variant];
const spacingClass = SPACING_CLASSES[spacing];
const style = {
width: typeof width === "number" ? `${width}px` : width,
height: typeof height === "number" ? `${height}px` : height
};
if (variant === "text" && lines > 1) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"div",
{
ref,
className: cn("flex flex-col", spacingClass, className),
...props,
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"div",
{
className: cn(variantClass, animationClass),
style: index === lines - 1 ? { width: "60%" } : void 0
},
index
))
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"div",
{
ref,
className: cn(variantClass, animationClass, className),
style,
...props,
children
}
);
}
);
var SkeletonText = (0, import_react3.forwardRef)(
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = (0, import_react3.forwardRef)(
({
showAvatar = true,
showTitle = true,
showDescription = true,
showActions = true,
lines = 2,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"div",
{
ref,
className: cn(
"w-full p-4 bg-background border border-border-200 rounded-lg",
className
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start space-x-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonCircle, { width: 40, height: 40 }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { width: "60%", height: 20 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }),
showActions && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonRectangle, { width: 80, height: 32 })
] })
]
}
);
}
);
var SkeletonList = (0, import_react3.forwardRef)(
({
items = 3,
showAvatar = true,
showTitle = true,
showDescription = true,
lines = 1,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonCircle, { width: 32, height: 32 }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { width: "40%", height: 16 }),
showDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SkeletonText, { lines, spacing: "small" })
] })
] }, index)) });
}
);
var SkeletonTable = (0, import_react3.forwardRef)(
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
showHeader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 20
},
index
)) }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
SkeletonText,
{
width: `${100 / columns}%`,
height: 16
},
colIndex
)) }, rowIndex)) })
] });
}
);
// src/types/support.ts
var getStatusBadgeAction = (status) => {
switch (status) {
case "aberto" /* ABERTO */:
return "success";
case "respondido" /* RESPONDIDO */:
return "warning";
case "encerrado" /* ENCERRADO */:
return "info";
default:
return "info";
}
};
var getStatusText = (status) => {
switch (status) {
case "aberto" /* ABERTO */:
return "Aberto";
case "respondido" /* RESPONDIDO */:
return "Respondido";
case "encerrado" /* ENCERRADO */:
return "Encerrado";
default:
return status;
}
};
var getCategoryText = (category) => {
if (!category) return "";
switch (category) {
case "acesso" /* ACESSO */:
return "Acesso";
case "tecnico" /* TECNICO */:
return "T\xE9cnico";
case "outros" /* OUTROS */:
return "Outros";
default:
return category;
}
};
// src/components/Support/utils/supportUtils.tsx
var import_react4 = require("@phosphor-icons/react");
var import_jsx_runtime8 = require("react/jsx-runtime");
var getCategoryIcon = (category, size = 16) => {
if (!category) return null;
switch (category) {
case "acesso" /* ACESSO */:
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react4.KeyIcon, { size });
case "tecnico" /* TECNICO */:
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react4.BugIcon, { size });
case "outros" /* OUTROS */:
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react4.InfoIcon, { size });
default:
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react4.InfoIcon, { size });
}
};
// src/components/Support/components/TicketModal.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
import_dayjs.default.locale("pt-br");
var AnswerSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-background p-4 space-y-6 rounded-xl", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonText, { width: "80px", height: 16 }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonText, { width: "200px", height: 16 })
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonText, { width: "80px", height: 16 }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 space-y-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonText, { width: "100%", height: 16 }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonText, { width: "80%", height: 16 }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SkeletonText, { width: "60%", height: 16 })
] })
] })
] });
var TicketModal = ({
ticket,
isOpen,
onClose,
onTicketClose,
apiClient,
userId
}) => {
const [showCloseConfirmation, setShowCloseConfirmation] = (0, import_react5.useState)(false);
const [responseText, setResponseText] = (0, import_react5.useState)("");
const [answers, setAnswers] = (0, import_react5.useState)([]);
const [isSubmittingAnswer, setIsSubmittingAnswer] = (0, import_react5.useState)(false);
const [isLoadingAnswers, setIsLoadingAnswers] = (0, import_react5.useState)(false);
const handleCloseTicket = () => {
onTicketClose?.(ticket.id);
setShowCloseConfirmation(false);
onClose();
};
const fetchAnswers = (0, import_react5.useCallback)(async () => {
if (!ticket.id || ticket.status !== "respondido" /* RESPONDIDO */) return;
setIsLoadingAnswers(true);
try {
const response = await apiClient.get(
`/support/answer/${ticket.id}`
);
setAnswers(response.data.data || []);
} catch (error) {
console.error("Erro ao buscar respostas:", error);
setAnswers([]);
} finally {
setIsLoadingAnswers(false);
}
}, [ticket.id, ticket.status, apiClient]);
const handleSubmitAnswer = async () => {
if (!responseText.trim() || !userId || !ticket.id) {
return;
}
setIsSubmittingAnswer(true);
try {
const requestData = {
userId,
supportId: ticket.id,
answer: responseText.trim()
};
await apiClient.post(
"/support/answer",
requestData
);
setResponseText("");
await fetchAnswers();
} catch (error) {
console.error("Erro ao enviar resposta:", error);
} finally {
setIsSubmittingAnswer(false);
}
};
const canCloseTicket = ticket.status !== "encerrado" /* ENCERRADO */;
(0, import_react5.useEffect)(() => {
if (isOpen) {
setResponseText("");
(async () => {
await fetchAnswers();
})().catch((error) => {
console.error("Erro ao carregar respostas:", error);
});
} else {
setAnswers([]);
}
}, [isOpen, fetchAnswers]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Modal_default,
{
isOpen,
onClose,
title: `Pedido: ${ticket.title}`,
size: "lg",
hideCloseButton: false,
closeOnEscape: true,
"data-testid": "ticket-modal",
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between items-center mb-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "bold", className: "text-text-950", children: "Detalhes" }),
canCloseTicket && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Button_default,
{
variant: "outline",
size: "small",
action: "negative",
onClick: () => setShowCloseConfirmation(true),
children: "Encerrar Pedido"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 overflow-y-auto pr-2 space-y-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-background p-4 space-y-6 rounded-xl", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "ID"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "normal", className: "text-text-600", children: ticket.id })
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Aberto em"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "normal", className: "text-text-600", children: (0, import_dayjs.default)(ticket.createdAt).format("DD MMMM YYYY, [\xE0s] HH[h]") })
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Status"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Badge_default,
{
variant: "solid",
size: "small",
action: getStatusBadgeAction(ticket.status),
className: "w-fit",
children: getStatusText(ticket.status)
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Tipo"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
Badge_default,
{
variant: "solid",
size: "small",
action: "muted",
className: "w-fit",
children: [
getCategoryIcon(ticket.category),
getCategoryText(ticket.category)
]
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Descri\xE7\xE3o"
}
),
ticket.description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "normal", className: "text-text-600", children: ticket.description })
] })
] }),
ticket.status === "respondido" /* RESPONDIDO */ && isLoadingAnswers && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "bold", className: "text-text-950 my-6", children: "Resposta de Suporte T\xE9cnico" }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AnswerSkeleton, {})
] }),
!isLoadingAnswers && answers.some((answer) => answer.userId !== userId) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "bold", className: "text-text-950 my-6", children: "Resposta de Suporte T\xE9cnico" }),
answers.filter((answer) => answer.userId !== userId).sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
).slice(0, 1).map((answer) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"div",
{
className: "bg-background p-4 space-y-6 rounded-xl",
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Recebido"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: (0, import_dayjs.default)(answer.createdAt).format(
"DD MMMM YYYY, [\xE0s] HH[h]"
)
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Resposta"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: answer.answer
}
)
] })
]
},
answer.id
))
] }),
!isLoadingAnswers && answers.some((answer) => answer.userId === userId) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text_default, { size: "md", weight: "bold", className: "text-text-950 my-6", children: "Resposta enviada" }),
answers.filter((answer) => answer.userId === userId).sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
).slice(0, 1).map((answer) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"div",
{
className: "bg-background p-4 space-y-6 rounded-xl",
children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Enviada"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: (0, import_dayjs.default)(answer.createdAt).format(
"DD MMMM YYYY, [\xE0s] HH[h]"
)
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default, {}),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start space-x-6", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "semibold",
className: "text-text-700 w-20",
children: "Resposta"
}
),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Text_default,
{
size: "md",
weight: "normal",
className: "text-text-600",
children: answer.answer
}
)
] })
]
},
answer.id
))
] }),
!isLoadingAnswers && answers.some((answer) => answer.userId !== userId) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
/* @