analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
196 lines (193 loc) • 8.53 kB
JavaScript
// src/components/AlertDialog/AlertDialog.tsx
import {
forwardRef,
useEffect
} from "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/AlertDialog/AlertDialog.tsx
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
var SIZE_CLASSES2 = {
"extra-small": "w-screen max-w-[324px]",
small: "w-screen max-w-[378px]",
medium: "w-screen max-w-[459px]",
large: "w-screen max-w-[578px]",
"extra-large": "w-screen max-w-[912px]"
};
var AlertDialog = forwardRef(
({
description,
cancelButtonLabel = "Cancelar",
submitButtonLabel = "Deletar",
title,
isOpen,
closeOnBackdropClick = true,
closeOnEscape = true,
className = "",
onSubmit,
onChangeOpen,
submitValue,
onCancel,
cancelValue,
size = "medium",
...props
}, ref) => {
useEffect(() => {
if (!isOpen || !closeOnEscape) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
onChangeOpen(false);
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [isOpen, closeOnEscape]);
useEffect(() => {
if (isOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
return () => {
document.body.style.overflow = "unset";
};
}, [isOpen]);
const handleBackdropClick = (event) => {
if (event.target === event.currentTarget && closeOnBackdropClick) {
onChangeOpen(false);
}
};
const handleBackdropKeyDown = (event) => {
if (event.key === "Escape" && closeOnEscape) {
onChangeOpen(false);
}
};
const handleSubmit = () => {
onChangeOpen(false);
onSubmit?.(submitValue);
};
const handleCancel = () => {
onChangeOpen(false);
onCancel?.(cancelValue);
};
const sizeClasses = SIZE_CLASSES2[size];
return /* @__PURE__ */ jsx2(Fragment, { children: isOpen && /* @__PURE__ */ jsx2(
"div",
{
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm",
onClick: handleBackdropClick,
onKeyDown: handleBackdropKeyDown,
"data-testid": "alert-dialog-overlay",
children: /* @__PURE__ */ jsxs2(
"div",
{
ref,
className: cn(
"bg-background border border-border-100 rounded-lg shadow-lg p-6 m-3",
sizeClasses,
className
),
...props,
children: [
/* @__PURE__ */ jsx2(
"h2",
{
id: "alert-dialog-title",
className: "pb-3 text-xl font-semibold text-text-950",
children: title
}
),
/* @__PURE__ */ jsx2(
"p",
{
id: "alert-dialog-description",
className: "text-text-700 text-sm",
children: description
}
),
/* @__PURE__ */ jsxs2("div", { className: "flex flex-row items-center justify-end pt-4 gap-3", children: [
/* @__PURE__ */ jsx2(Button_default, { variant: "outline", size: "small", onClick: handleCancel, children: cancelButtonLabel }),
/* @__PURE__ */ jsx2(
Button_default,
{
variant: "solid",
size: "small",
action: "negative",
onClick: handleSubmit,
children: submitButtonLabel
}
)
] })
]
}
)
}
) });
}
);
AlertDialog.displayName = "AlertDialog";
export {
AlertDialog
};
//# sourceMappingURL=index.mjs.map