analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
213 lines (209 loc) • 9.04 kB
JavaScript
// src/components/FileAttachment/FileAttachment.tsx
import { useRef } from "react";
import { Paperclip, FileText, 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/Text/Text.tsx
import { jsx as jsx2 } 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__ */ jsx2(
Component,
{
className: cn(baseClasses, sizeClasses, weightClasses, color, className),
...props,
children
}
);
};
var Text_default = Text;
// src/components/FileAttachment/FileAttachment.tsx
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var formatFileSize = (bytes) => {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
if (bytes < 1024 * 1024 * 1024)
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
};
var generateFileId = () => {
return crypto.randomUUID();
};
var FileAttachment = ({
files,
onFilesAdd,
onFileRemove,
readOnly = false,
buttonLabel = "Anexar",
multiple = true,
className,
hideButton = false
}) => {
const fileInputRef = useRef(null);
const handleFileChange = (event) => {
const selectedFiles = event.target.files;
if (selectedFiles && selectedFiles.length > 0) {
const filesArray = Array.from(selectedFiles);
onFilesAdd(filesArray);
}
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
};
const handleAttachClick = () => {
fileInputRef.current?.click();
};
return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-2", className), children: [
/* @__PURE__ */ jsx3(
"input",
{
type: "file",
ref: fileInputRef,
className: "hidden",
onChange: handleFileChange,
multiple,
"aria-label": "Selecionar arquivos"
}
),
!readOnly && !hideButton && /* @__PURE__ */ jsxs2(
Button_default,
{
type: "button",
variant: "outline",
size: "small",
onClick: handleAttachClick,
className: "self-start flex items-center gap-2",
children: [
/* @__PURE__ */ jsx3(Paperclip, { size: 16 }),
buttonLabel
]
}
),
files.length > 0 && /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2", children: files.map((attachedFile) => /* @__PURE__ */ jsxs2(
"div",
{
className: "flex items-center gap-2 bg-background-50 px-3 py-2 rounded-lg border border-border-100",
children: [
/* @__PURE__ */ jsx3(FileText, { size: 16, className: "text-text-500 shrink-0" }),
/* @__PURE__ */ jsx3(Text_default, { className: "text-sm text-text-700 truncate max-w-[200px]", children: attachedFile.file.name }),
/* @__PURE__ */ jsx3(Text_default, { className: "text-xs text-text-400 shrink-0", children: formatFileSize(attachedFile.file.size) }),
!readOnly && /* @__PURE__ */ jsx3(
"button",
{
type: "button",
onClick: () => onFileRemove(attachedFile.id),
className: "text-text-400 hover:text-error-500 transition-colors shrink-0",
"aria-label": `Remover ${attachedFile.file.name}`,
children: /* @__PURE__ */ jsx3(X, { size: 14 })
}
)
]
},
attachedFile.id
)) })
] });
};
var FileAttachment_default = FileAttachment;
export {
FileAttachment_default as default,
formatFileSize,
generateFileId
};
//# sourceMappingURL=index.mjs.map