analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1,168 lines (1,155 loc) • 44.4 kB
JavaScript
// src/components/Modal/Modal.tsx
import { useEffect, useId } from "react";
import { X } from "phosphor-react";
// src/utils/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// src/components/Button/Button.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES = {
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_CLASSES = {
"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_CLASSES[size];
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
return /* @__PURE__ */ jsxs(
"button",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
disabled,
type,
...props,
children: [
iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
children,
iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
]
}
);
};
var Button_default = Button;
// 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
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var SIZE_CLASSES2 = {
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 = useId();
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]);
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_CLASSES2[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__ */ jsx2("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__ */ jsxs2(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ jsx2("div", { className: "flex justify-end p-6 pb-0", children: !hideCloseButton && /* @__PURE__ */ jsx2(
"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__ */ jsx2(X, { size: 18 })
}
) }),
/* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center px-6 pb-6 gap-5", children: [
image && /* @__PURE__ */ jsx2("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx2(
"img",
{
src: image,
alt: imageAlt ?? "",
className: "w-[122px] h-[122px] object-contain"
}
) }),
/* @__PURE__ */ jsx2(
"h2",
{
id: titleId,
className: "text-lg font-semibold text-text-950 text-center",
children: title
}
),
description && /* @__PURE__ */ jsx2("p", { className: "text-sm font-normal text-text-400 text-center max-w-md leading-[21px]", children: description }),
actionLink && /* @__PURE__ */ jsxs2("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__ */ jsx2(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
);
}
return /* @__PURE__ */ jsx2(
"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__ */ jsx2(
Button_default,
{
variant: "solid",
action: "primary",
size: "large",
className: "w-full",
onClick: handleActionClick,
children: actionLabel || "Iniciar Atividade"
}
)
] })
] })
]
}
) });
}
return /* @__PURE__ */ jsx2("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__ */ jsxs2(
"dialog",
{
className: modalClasses,
"aria-labelledby": titleId,
"aria-modal": "true",
open: true,
children: [
/* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-6", children: [
/* @__PURE__ */ jsx2("h2", { id: titleId, className: "text-lg font-semibold text-text-950", children: title }),
!hideCloseButton && /* @__PURE__ */ jsx2(
"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__ */ jsx2(X, { size: 18 })
}
)
] }),
children && /* @__PURE__ */ jsx2("div", { className: cn("px-6 pb-6", contentClassName), children: /* @__PURE__ */ jsx2("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
footer && /* @__PURE__ */ jsx2("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
]
}
) });
};
var Modal_default = Modal;
// src/components/Text/Text.tsx
import { jsx as jsx3 } from "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__ */ jsx3(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/Divider/Divider.tsx
import { jsx as jsx4 } from "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__ */ jsx4(
"hr",
{
className: cn(baseClasses, orientationClasses[orientation], className),
"aria-orientation": orientation,
...props
}
);
};
var Divider_default = Divider;
// src/components/Table/Table.tsx
import {
forwardRef as forwardRef2,
useState,
useMemo,
useEffect as useEffect2,
Children,
isValidElement
} from "react";
import { CaretUp, CaretDown } from "phosphor-react";
// src/components/NoSearchResult/NoSearchResult.tsx
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var NoSearchResult = ({ image, title, description }) => {
const displayTitle = title || "Nenhum resultado encontrado";
const displayDescription = description || "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave.";
return /* @__PURE__ */ jsxs3("div", { className: "flex flex-row justify-center items-center gap-8 w-full max-w-4xl min-h-96", children: [
/* @__PURE__ */ jsx5("div", { className: "w-72 h-72 flex-shrink-0 relative", children: /* @__PURE__ */ jsx5(
"img",
{
src: image,
alt: "No search results",
className: "w-full h-full object-contain"
}
) }),
/* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-start w-full max-w-md", children: [
/* @__PURE__ */ jsx5("div", { className: "flex flex-row justify-between items-end px-6 pt-6 pb-4 w-full rounded-t-xl", children: /* @__PURE__ */ jsx5(
Text_default,
{
as: "h2",
className: "text-text-950 font-semibold text-3xl leading-tight w-full flex items-center",
children: displayTitle
}
) }),
/* @__PURE__ */ jsx5("div", { className: "flex flex-row justify-center items-center px-6 gap-2 w-full", children: /* @__PURE__ */ jsx5(Text_default, { className: "text-text-600 font-normal text-lg leading-relaxed w-full text-justify", children: displayDescription }) })
] })
] });
};
var NoSearchResult_default = NoSearchResult;
// src/components/EmptyState/EmptyState.tsx
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var EmptyState = ({
image,
title,
description,
buttonText,
buttonIcon,
onButtonClick,
buttonVariant = "solid",
buttonAction = "primary"
}) => {
const displayTitle = title || "Nenhum dado dispon\xEDvel";
const displayDescription = description || "N\xE3o h\xE1 dados para exibir no momento.";
return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col justify-center items-center gap-6 w-full min-h-[705px] bg-background rounded-xl p-6", children: [
image && /* @__PURE__ */ jsx6("img", { src: image, alt: displayTitle, className: "w-[170px] h-[150px]" }),
/* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-4 w-full max-w-[600px] px-6", children: [
/* @__PURE__ */ jsx6(
Text_default,
{
as: "h2",
className: "text-text-950 font-semibold text-3xl leading-[35px] text-center",
children: displayTitle
}
),
/* @__PURE__ */ jsx6(Text_default, { className: "text-text-600 font-normal text-[18px] leading-[27px] text-center", children: displayDescription })
] }),
buttonText && onButtonClick && /* @__PURE__ */ jsx6(
Button_default,
{
variant: buttonVariant,
action: buttonAction,
size: "large",
onClick: onButtonClick,
iconLeft: buttonIcon,
className: "rounded-full px-5 py-2.5",
children: buttonText
}
)
] });
};
var EmptyState_default = EmptyState;
// src/components/Skeleton/Skeleton.tsx
import { forwardRef } from "react";
import { jsx as jsx7, jsxs as jsxs5 } from "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 = 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__ */ jsx7(
"div",
{
ref,
className: cn("flex flex-col", spacingClass, className),
...props,
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx7(
"div",
{
className: cn(variantClass, animationClass),
style: index === lines - 1 ? { width: "60%" } : void 0
},
index
))
}
);
}
return /* @__PURE__ */ jsx7(
"div",
{
ref,
className: cn(variantClass, animationClass, className),
style,
...props,
children
}
);
}
);
var SkeletonText = forwardRef(
(props, ref) => /* @__PURE__ */ jsx7(Skeleton, { ref, variant: "text", ...props })
);
var SkeletonCircle = forwardRef((props, ref) => /* @__PURE__ */ jsx7(Skeleton, { ref, variant: "circular", ...props }));
var SkeletonRectangle = forwardRef((props, ref) => /* @__PURE__ */ jsx7(Skeleton, { ref, variant: "rectangular", ...props }));
var SkeletonRounded = forwardRef((props, ref) => /* @__PURE__ */ jsx7(Skeleton, { ref, variant: "rounded", ...props }));
var SkeletonCard = forwardRef(
({
showAvatar = true,
showTitle = true,
showDescription = true,
showActions = true,
lines = 2,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ jsxs5(
"div",
{
ref,
className: cn(
"w-full p-4 bg-background border border-border-200 rounded-lg",
className
),
...props,
children: [
/* @__PURE__ */ jsxs5("div", { className: "flex items-start space-x-3", children: [
showAvatar && /* @__PURE__ */ jsx7(SkeletonCircle, { width: 40, height: 40 }),
/* @__PURE__ */ jsxs5("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ jsx7(SkeletonText, { width: "60%", height: 20 }),
showDescription && /* @__PURE__ */ jsx7(SkeletonText, { lines, spacing: "small" })
] })
] }),
showActions && /* @__PURE__ */ jsxs5("div", { className: "flex justify-end space-x-2 mt-4", children: [
/* @__PURE__ */ jsx7(SkeletonRectangle, { width: 80, height: 32 }),
/* @__PURE__ */ jsx7(SkeletonRectangle, { width: 80, height: 32 })
] })
]
}
);
}
);
var SkeletonList = forwardRef(
({
items = 3,
showAvatar = true,
showTitle = true,
showDescription = true,
lines = 1,
className = "",
...props
}, ref) => {
return /* @__PURE__ */ jsx7("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs5("div", { className: "flex items-start space-x-3 p-3", children: [
showAvatar && /* @__PURE__ */ jsx7(SkeletonCircle, { width: 32, height: 32 }),
/* @__PURE__ */ jsxs5("div", { className: "flex-1 space-y-2", children: [
showTitle && /* @__PURE__ */ jsx7(SkeletonText, { width: "40%", height: 16 }),
showDescription && /* @__PURE__ */ jsx7(SkeletonText, { lines, spacing: "small" })
] })
] }, index)) });
}
);
var SkeletonTable = forwardRef(
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
return /* @__PURE__ */ jsxs5("div", { ref, className: cn("w-full", className), ...props, children: [
showHeader && /* @__PURE__ */ jsx7("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx7(
SkeletonText,
{
width: `${100 / columns}%`,
height: 20
},
index
)) }),
/* @__PURE__ */ jsx7("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx7("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx7(
SkeletonText,
{
width: `${100 / columns}%`,
height: 16
},
colIndex
)) }, rowIndex)) })
] });
}
);
// src/components/Table/Table.tsx
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
var renderHeaderElements = (children) => {
return Children.map(children, (child) => {
if (isValidElement(child) && (child.type === TableCaption || child.type === TableHeader)) {
return child;
}
return null;
});
};
var getNoSearchResultContent = (config, defaultTitle, defaultDescription) => {
if (config.component) {
return config.component;
}
if (config.image) {
return /* @__PURE__ */ jsx8(
NoSearchResult_default,
{
image: config.image,
title: config.title || defaultTitle,
description: config.description || defaultDescription
}
);
}
return /* @__PURE__ */ jsxs6("div", { className: "text-center", children: [
/* @__PURE__ */ jsx8("p", { className: "text-text-600 text-lg font-semibold mb-2", children: config.title || defaultTitle }),
/* @__PURE__ */ jsx8("p", { className: "text-text-500 text-sm", children: config.description || defaultDescription })
] });
};
var getEmptyStateContent = (config, defaultTitle, defaultDescription) => {
if (config?.component) {
return config.component;
}
return /* @__PURE__ */ jsx8(
EmptyState_default,
{
image: config?.image,
title: config?.title || defaultTitle,
description: config?.description || defaultDescription,
buttonText: config?.buttonText,
buttonIcon: config?.buttonIcon,
onButtonClick: config?.onButtonClick,
buttonVariant: config?.buttonVariant,
buttonAction: config?.buttonAction
}
);
};
var renderTableWrapper = (variant, tableRef, className, children, stateContent, tableProps) => {
return /* @__PURE__ */ jsxs6(
"div",
{
className: cn(
"relative w-full overflow-x-auto",
variant === "default" && "border border-border-200 rounded-xl"
),
children: [
/* @__PURE__ */ jsx8(
"table",
{
ref: tableRef,
className: cn(
"analytica-table w-full caption-bottom text-sm border-separate border-spacing-0",
className
),
...tableProps,
children: renderHeaderElements(children)
}
),
/* @__PURE__ */ jsx8("div", { className: "py-8 flex justify-center", children: stateContent })
]
}
);
};
var Table = forwardRef2(
({
variant = "default",
className,
children,
showLoading = false,
loadingState,
showNoSearchResult = false,
noSearchResultState,
showEmpty = false,
emptyState,
...props
}, ref) => {
const defaultNoSearchResultState = {
title: "Nenhum resultado encontrado",
description: "N\xE3o encontramos nenhum resultado com esse nome. Tente revisar a busca ou usar outra palavra-chave."
};
const defaultEmptyState = {
title: "Nenhum dado dispon\xEDvel",
description: "N\xE3o h\xE1 dados para exibir no momento."
};
const finalNoSearchResultState = noSearchResultState || defaultNoSearchResultState;
const finalEmptyState = emptyState || defaultEmptyState;
if (showLoading) {
const loadingContent = loadingState?.component || /* @__PURE__ */ jsx8(SkeletonTable, { rows: 5, columns: 4, showHeader: false });
return renderTableWrapper(
variant,
ref,
className,
children,
loadingContent,
props
);
}
if (showNoSearchResult) {
const noSearchContent = getNoSearchResultContent(
finalNoSearchResultState,
defaultNoSearchResultState.title || "",
defaultNoSearchResultState.description || ""
);
return renderTableWrapper(
variant,
ref,
className,
children,
noSearchContent,
props
);
}
if (showEmpty) {
const emptyContent = getEmptyStateContent(
finalEmptyState,
defaultEmptyState.title || "Nenhum dado dispon\xEDvel",
defaultEmptyState.description || "N\xE3o h\xE1 dados para exibir no momento."
);
return renderTableWrapper(
variant,
ref,
className,
children,
emptyContent,
props
);
}
return /* @__PURE__ */ jsx8(
"div",
{
className: cn(
"relative w-full overflow-x-auto",
variant === "default" && "border border-border-200 rounded-xl"
),
children: /* @__PURE__ */ jsxs6(
"table",
{
ref,
className: cn(
variant === "default" && "analytica-table",
variant === "default" && "border-separate border-spacing-0",
"w-full caption-bottom text-sm",
className
),
...props,
children: [
!Children.toArray(children).some(
(child) => isValidElement(child) && child.type === TableCaption
) && /* @__PURE__ */ jsx8("caption", { className: "sr-only", children: "My Table" }),
children
]
}
)
}
);
}
);
Table.displayName = "Table";
var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
"thead",
{
ref,
className: cn("[&_tr:first-child]:border-0", className),
...props
}
));
TableHeader.displayName = "TableHeader";
var TableBody = forwardRef2(
({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx8(
"tbody",
{
ref,
className: cn(
"[&_tr:last-child]:border-border-200",
variant === "default" && "border-t border-border-200",
className
),
...props
}
)
);
TableBody.displayName = "TableBody";
var TableFooter = forwardRef2(
({ variant = "default", className, ...props }, ref) => /* @__PURE__ */ jsx8(
"tfoot",
{
ref,
className: cn(
"bg-background-50 font-medium [&>tr]:last:border-b-0 px-6 py-3.5",
variant === "default" && "border-t border-border-200",
className
),
...props
}
)
);
TableFooter.displayName = "TableFooter";
var VARIANT_STATES_ROW = {
default: {
default: "border border-border-200",
defaultBorderless: "border-b border-border-200",
borderless: ""
},
selected: {
default: "border-b-2 border-indicator-primary",
defaultBorderless: "border-b border-indicator-primary",
borderless: "bg-indicator-primary/10"
},
invalid: {
default: "border-b-2 border-indicator-error",
defaultBorderless: "border-b border-indicator-error",
borderless: "bg-indicator-error/10"
},
disabled: {
default: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed",
defaultBorderless: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed",
borderless: "bg-background-50 opacity-50 cursor-not-allowed"
}
};
var TableRow = forwardRef2(
({
variant = "default",
state = "default",
clickable = false,
className,
...props
}, ref) => {
return /* @__PURE__ */ jsx8(
"tr",
{
ref,
className: cn(
"transition-colors",
state === "disabled" ? "" : "hover:bg-muted/50",
state === "disabled" || !clickable ? "" : "cursor-pointer",
VARIANT_STATES_ROW[state][variant],
className
),
"aria-disabled": state === "disabled",
...props
}
);
}
);
TableRow.displayName = "TableRow";
var TableHead = forwardRef2(
({
className,
sortable = true,
sortDirection = null,
onSort,
children,
...props
}, ref) => {
const handleClick = () => {
if (sortable && onSort) {
onSort();
}
};
return /* @__PURE__ */ jsx8(
"th",
{
ref,
className: cn(
"h-10 px-6 py-3.5 text-left align-middle font-bold text-base text-text-800 tracking-[0.2px] leading-none [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] whitespace-nowrap",
sortable && "cursor-pointer select-none hover:bg-muted/30",
className
),
onClick: handleClick,
...props,
children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
children,
sortable && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
sortDirection === "asc" && /* @__PURE__ */ jsx8(CaretUp, { size: 16, weight: "fill", className: "text-text-800" }),
sortDirection === "desc" && /* @__PURE__ */ jsx8(CaretDown, { size: 16, weight: "fill", className: "text-text-800" })
] })
] })
}
);
}
);
TableHead.displayName = "TableHead";
var TableCell = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
"td",
{
ref,
className: cn(
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-base font-normal text-text-800 leading-[150%] tracking-normal px-6 py-3.5 whitespace-nowrap",
className
),
...props
}
));
TableCell.displayName = "TableCell";
var TableCaption = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
"caption",
{
ref,
className: cn(
"border-t border-border-200 text-sm text-text-800 px-6 py-3.5",
className
),
...props
}
));
TableCaption.displayName = "TableCaption";
var Table_default = Table;
// src/components/Badge/Badge.tsx
import { Bell } from "phosphor-react";
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
var VARIANT_ACTION_CLASSES2 = {
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_CLASSES3 = {
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_CLASSES3[size];
const sizeClassesIcon = SIZE_CLASSES_ICON[size];
const variantActionMap = VARIANT_ACTION_CLASSES2[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__ */ jsxs7(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
/* @__PURE__ */ jsx9(Bell, { size: 24, className: "text-current", "aria-hidden": "true" }),
notificationActive && /* @__PURE__ */ jsx9(
"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__ */ jsxs7(
"div",
{
className: cn(baseClasses, variantClasses, sizeClasses, className),
...props,
children: [
iconLeft && /* @__PURE__ */ jsx9("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconLeft }),
children,
iconRight && /* @__PURE__ */ jsx9("span", { className: cn(baseClassesIcon, sizeClassesIcon), children: iconRight })
]
}
);
};
var Badge_default = Badge;
// src/components/AlertManagerView/AlertsManagerView.tsx
import { CaretLeft, CaretRight, User } from "phosphor-react";
import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
var AlertsManagerView = ({
alertData,
isOpen = false,
onClose,
imageLink,
defaultImage,
currentPage = 1,
totalPages: externalTotalPages,
onPageChange,
itemsPerPage = 10
}) => {
const totalPages = externalTotalPages ?? Math.ceil(alertData.recipients.length / itemsPerPage);
const effectiveCurrentPage = Math.min(totalPages, Math.max(1, currentPage));
const startIndex = (effectiveCurrentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const paginatedRecipients = alertData.recipients.slice(startIndex, endIndex);
const handleClose = () => {
onClose?.();
};
const formatDate = (dateInput) => {
const date = dateInput instanceof Date ? dateInput : new Date(dateInput);
if (Number.isNaN(date.getTime())) return String(dateInput);
return date.toLocaleDateString("pt-BR", {
day: "2-digit",
month: "2-digit",
year: "numeric"
});
};
return /* @__PURE__ */ jsx10(
Modal_default,
{
isOpen,
onClose: handleClose,
title: alertData.title,
size: "md",
contentClassName: "p-0",
children: /* @__PURE__ */ jsx10("div", { className: "flex flex-col h-[calc(100vh-8rem)] max-h-[700px]", children: /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: [
/* @__PURE__ */ jsxs8("div", { className: "bg-background-50 px-5 py-6 flex flex-col items-center gap-4 rounded-xl mb-4", children: [
(imageLink || alertData.image || defaultImage) && /* @__PURE__ */ jsx10(
"img",
{
src: imageLink || alertData.image || defaultImage || void 0,
alt: alertData.title || "Imagem do alerta"
}
),
/* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center text-center gap-3", children: [
/* @__PURE__ */ jsx10(Text_default, { size: "lg", weight: "semibold", children: alertData.title || "Sem T\xEDtulo" }),
/* @__PURE__ */ jsx10(Text_default, { size: "sm", weight: "normal", className: "text-text-500", children: alertData.message || "Sem mensagem" })
] })
] }),
/* @__PURE__ */ jsx10(Divider_default, { className: "my-4" }),
/* @__PURE__ */ jsxs8("div", { className: "flex justify-between items-center mb-4 px-2", children: [
/* @__PURE__ */ jsx10(Text_default, { size: "sm", weight: "bold", className: "text-text-700", children: "Enviado em" }),
/* @__PURE__ */ jsx10(Text_default, { size: "sm", weight: "medium", className: "text-text-900", children: formatDate(alertData.sentAt) })
] }),
/* @__PURE__ */ jsx10(Divider_default, { className: "my-4" }),
/* @__PURE__ */ jsx10("div", { className: "mb-4", children: /* @__PURE__ */ jsxs8(Table_default, { variant: "borderless", className: "table-fixed", children: [
/* @__PURE__ */ jsx10(TableHeader, { children: /* @__PURE__ */ jsxs8(TableRow, { variant: "borderless", children: [
/* @__PURE__ */ jsx10(TableHead, { className: "py-2 px-3.5 text-start", children: "Destinat\xE1rio" }),
/* @__PURE__ */ jsx10(TableHead, { className: "py-2 px-3.5 w-[120px] text-start", children: "Status" })
] }) }),
/* @__PURE__ */ jsx10(TableBody, { variant: "borderless", children: paginatedRecipients.map((recipient) => /* @__PURE__ */ jsxs8(TableRow, { children: [
/* @__PURE__ */ jsxs8(TableCell, { className: "py-2 px-3.5 flex flex-row gap-2 text-start truncate", children: [
/* @__PURE__ */ jsx10("div", { className: "rounded-full size-6 bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx10(User, { className: "text-primary-950", size: 18 }) }),
recipient.name
] }),
/* @__PURE__ */ jsx10(TableCell, { className: "py-2 px-3.5 text-center", children: /* @__PURE__ */ jsx10("div", { className: "flex justify-center items-center gap-1", children: recipient.status === "viewed" ? /* @__PURE__ */ jsx10(Badge_default, { variant: "solid", action: "success", children: "Visualizado" }) : /* @__PURE__ */ jsx10(Badge_default, { variant: "solid", action: "error", children: "Pendente" }) }) })
] }, recipient.id)) })
] }) }),
totalPages > 1 && /* @__PURE__ */ jsxs8("div", { className: "flex justify-end items-center gap-2 bg-background-50 border border-border-200 py-3.5 px-2 rounded-b-2xl", children: [
/* @__PURE__ */ jsxs8(Text_default, { size: "sm", className: "text-text-600", children: [
"P\xE1gina ",
effectiveCurrentPage,
" de ",
totalPages
] }),
/* @__PURE__ */ jsx10("div", { className: "flex gap-2", children: onPageChange ? /* @__PURE__ */ jsxs8(Fragment, { children: [
/* @__PURE__ */ jsx10(
Button_default,
{
variant: "link",
size: "extra-small",
onClick: () => onPageChange(Math.max(1, effectiveCurrentPage - 1)),
disabled: effectiveCurrentPage === 1,
iconLeft: /* @__PURE__ */ jsx10(CaretLeft, {}),
children: "Anterior"
}
),
/* @__PURE__ */ jsx10(
Button_default,
{
variant: "link",
size: "extra-small",
onClick: () => onPageChange(
Math.min(totalPages, effectiveCurrentPage + 1)
),
disabled: effectiveCurrentPage === totalPages,
iconRight: /* @__PURE__ */ jsx10(CaretRight, {}),
children: "Pr\xF3ximo"
}
)
] }) : /* @__PURE__ */ jsxs8(Fragment, { children: [
/* @__PURE__ */ jsx10(
Button_default,
{
variant: "link",
size: "extra-small",
disabled: effectiveCurrentPage === 1,
iconLeft: /* @__PURE__ */ jsx10(CaretLeft, {}),
children: "Anterior"
}
),
/* @__PURE__ */ jsx10(
Button_default,
{
variant: "link",
size: "extra-small",
disabled: effectiveCurrentPage === totalPages,
iconRight: /* @__PURE__ */ jsx10(CaretRight, {}),
children: "Pr\xF3ximo"
}
)
] }) })
] })
] }) })
}
);
};
export {
AlertsManagerView
};
//# sourceMappingURL=index.mjs.map