analytica-frontend-lib 1.0.67 → 1.0.70

package/dist/index.d.mts

@@ -24,8 +24,10 @@ export { default as Modal } from './Modal/index.mjs';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.mjs';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
 export { default as Menu, MenuContent, MenuItem, MenuOverflow } from './Menu/index.mjs';
-export { CardActivitiesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.mjs';
+export { CardActivitiesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardSimulado, CardStatus, CardTopic } from './Card/index.mjs';
 export { Skeleton, SkeletonCard, SkeletonCircle, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText } from './Skeleton/index.mjs';
+export { AuthProvider, ProtectedRoute, PublicRoute, useAuth, useAuthGuard, useRouteAuth, withAuth } from './Auth/index.mjs';
+export { default as Tab } from './Tab/index.mjs';
 import 'react/jsx-runtime';
 import 'react';
 import 'zustand';

package/dist/index.d.ts

@@ -24,8 +24,10 @@ export { default as Modal } from './Modal/index.js';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
 export { default as Menu, MenuContent, MenuItem, MenuOverflow } from './Menu/index.js';
-export { CardActivitiesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.js';
+export { CardActivitiesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardSimulado, CardStatus, CardTopic } from './Card/index.js';
 export { Skeleton, SkeletonCard, SkeletonCircle, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText } from './Skeleton/index.js';
+export { AuthProvider, ProtectedRoute, PublicRoute, useAuth, useAuthGuard, useRouteAuth, withAuth } from './Auth/index.js';
+export { default as Tab } from './Tab/index.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'zustand';

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Alert: () => Alert_default,
+  AuthProvider: () => AuthProvider,
   Badge: () => Badge_default,
   Button: () => Button_default,
   Calendar: () => Calendar_default,
@@ -29,6 +30,7 @@ __export(src_exports, {
   CardProgress: () => CardProgress,
   CardQuestions: () => CardQuestions,
   CardResults: () => CardResults,
+  CardSimulado: () => CardSimulado,
   CardStatus: () => CardStatus,
   CardTopic: () => CardTopic,
   CheckBox: () => CheckBox_default,
@@ -55,6 +57,8 @@ __export(src_exports, {
   ProfileMenuTrigger: () => ProfileMenuTrigger,
   ProgressBar: () => ProgressBar_default,
   ProgressCircle: () => ProgressCircle_default,
+  ProtectedRoute: () => ProtectedRoute,
+  PublicRoute: () => PublicRoute,
   Radio: () => Radio_default,
   Select: () => Select_default,
   SelectContent: () => SelectContent,
@@ -71,12 +75,17 @@ __export(src_exports, {
   SkeletonTable: () => SkeletonTable,
   SkeletonText: () => SkeletonText,
   Stepper: () => Stepper_default,
+  Tab: () => Tab_default,
   Table: () => Table_default,
   Text: () => Text_default,
   TextArea: () => TextArea_default,
   Toast: () => Toast_default,
   Toaster: () => Toaster_default,
-  useToastStore: () => ToastStore_default
+  useAuth: () => useAuth,
+  useAuthGuard: () => useAuthGuard,
+  useRouteAuth: () => useRouteAuth,
+  useToastStore: () => ToastStore_default,
+  withAuth: () => withAuth
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -4858,6 +4867,49 @@ var CardAudio = (0, import_react14.forwardRef)(
     );
   }
 );
+var SIMULADO_BACKGROUND_CLASSES = {
+  enem: "bg-exam-1",
+  prova: "bg-exam-2",
+  simuladao: "bg-exam-3",
+  vestibular: "bg-exam-4"
+};
+var CardSimulado = (0, import_react14.forwardRef)(
+  ({ title, duration, info, backgroundColor, className, ...props }, ref) => {
+    const backgroundClass = SIMULADO_BACKGROUND_CLASSES[backgroundColor];
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      CardBase,
+      {
+        ref,
+        layout: "horizontal",
+        padding: "medium",
+        minHeight: "none",
+        cursor: "pointer",
+        className: `${backgroundClass} hover:shadow-soft-shadow-2 transition-shadow duration-200 ${className}`,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex justify-between items-center w-full gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "lg", weight: "bold", className: "text-text-950 truncate", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-4 text-text-700", children: [
+              duration && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_phosphor_react13.Clock, { size: 16, className: "flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "sm", children: duration })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text_default, { size: "sm", className: "truncate", children: info })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            import_phosphor_react13.CaretRight,
+            {
+              size: 24,
+              className: "text-text-800 flex-shrink-0",
+              "data-testid": "caret-icon"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 
 // src/components/Skeleton/Skeleton.tsx
 var import_react15 = require("react");
@@ -5007,9 +5059,308 @@ var SkeletonTable = (0, import_react15.forwardRef)(
     ] });
   }
 );
+
+// src/components/Auth/Auth.tsx
+var import_react16 = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var AuthContext = (0, import_react16.createContext)(void 0);
+var AuthProvider = ({
+  children,
+  checkAuthFn,
+  signOutFn,
+  initialAuthState = {},
+  getUserFn,
+  getSessionFn,
+  getTokensFn
+}) => {
+  const [authState, setAuthState] = (0, import_react16.useState)({
+    isAuthenticated: false,
+    isLoading: true,
+    ...initialAuthState
+  });
+  const checkAuth = (0, import_react16.useCallback)(async () => {
+    try {
+      setAuthState((prev) => ({ ...prev, isLoading: true }));
+      if (!checkAuthFn) {
+        setAuthState((prev) => ({
+          ...prev,
+          isAuthenticated: false,
+          isLoading: false
+        }));
+        return false;
+      }
+      const isAuth = await checkAuthFn();
+      setAuthState((prev) => ({
+        ...prev,
+        isAuthenticated: isAuth,
+        isLoading: false,
+        user: getUserFn ? getUserFn() : prev.user,
+        sessionInfo: getSessionFn ? getSessionFn() : prev.sessionInfo,
+        tokens: getTokensFn ? getTokensFn() : prev.tokens
+      }));
+      return isAuth;
+    } catch (error) {
+      console.error("Erro ao verificar autentica\xE7\xE3o:", error);
+      setAuthState((prev) => ({
+        ...prev,
+        isAuthenticated: false,
+        isLoading: false
+      }));
+      return false;
+    }
+  }, [checkAuthFn, getUserFn, getSessionFn, getTokensFn]);
+  const signOut = (0, import_react16.useCallback)(() => {
+    if (signOutFn) {
+      signOutFn();
+    }
+    setAuthState((prev) => ({
+      ...prev,
+      isAuthenticated: false,
+      user: void 0,
+      sessionInfo: void 0,
+      tokens: void 0
+    }));
+  }, [signOutFn]);
+  (0, import_react16.useEffect)(() => {
+    checkAuth();
+  }, [checkAuth]);
+  const contextValue = (0, import_react16.useMemo)(
+    () => ({
+      ...authState,
+      checkAuth,
+      signOut
+    }),
+    [authState, checkAuth, signOut]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AuthContext.Provider, { value: contextValue, children });
+};
+var useAuth = () => {
+  const context = (0, import_react16.useContext)(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth deve ser usado dentro de um AuthProvider");
+  }
+  return context;
+};
+var ProtectedRoute = ({
+  children,
+  redirectTo = "/",
+  loadingComponent,
+  additionalCheck
+}) => {
+  const { isAuthenticated, isLoading, ...authState } = useAuth();
+  const defaultLoadingComponent = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: loadingComponent || defaultLoadingComponent });
+  }
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
+  }
+  if (additionalCheck && !additionalCheck({ isAuthenticated, isLoading, ...authState })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+};
+var PublicRoute = ({
+  children,
+  redirectTo = "/painel",
+  redirectIfAuthenticated = false,
+  checkAuthBeforeRender = false
+}) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (checkAuthBeforeRender && isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
+  }
+  if (isAuthenticated && redirectIfAuthenticated) {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
+};
+var withAuth = (Component, options = {}) => {
+  return (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProtectedRoute, { ...options, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Component, { ...props }) });
+};
+var useAuthGuard = (options = {}) => {
+  const authState = useAuth();
+  const { requireAuth = true, customCheck } = options;
+  const canAccess = !authState.isLoading && (requireAuth ? authState.isAuthenticated && (!customCheck || customCheck(authState)) : !authState.isAuthenticated || !customCheck || customCheck(authState));
+  return {
+    canAccess,
+    isLoading: authState.isLoading,
+    authState
+  };
+};
+var useRouteAuth = (fallbackPath = "/") => {
+  const { isAuthenticated, isLoading } = useAuth();
+  const location = (0, import_react_router_dom.useLocation)();
+  const redirectToLogin = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_router_dom.Navigate, { to: fallbackPath, state: { from: location }, replace: true });
+  return {
+    isAuthenticated,
+    isLoading,
+    redirectToLogin
+  };
+};
+
+// src/components/Tab/Tab.tsx
+var import_react17 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var TAB_SIZE_CLASSES = {
+  small: {
+    container: "h-10 gap-1",
+    tab: "px-3 py-2 text-sm",
+    indicator: "h-0.5"
+  },
+  medium: {
+    container: "h-12 gap-2",
+    tab: "px-4 py-4 text-sm",
+    indicator: "h-1"
+  },
+  large: {
+    container: "h-14 gap-2",
+    tab: "px-6 py-4 text-base",
+    indicator: "h-1"
+  }
+};
+var RESPONSIVE_WIDTH_CLASSES = {
+  twoTabs: "w-[115px] sm:w-[204px]",
+  threeTabs: "w-[100px] sm:w-[160px]",
+  fourTabs: "w-[80px] sm:w-[140px]",
+  fiveTabs: "w-[70px] sm:w-[120px]",
+  default: "flex-1"
+};
+var Tab = (0, import_react17.forwardRef)(
+  ({
+    tabs,
+    activeTab,
+    onTabChange,
+    size = "medium",
+    responsive = true,
+    className = "",
+    ...props
+  }, ref) => {
+    const sizeClasses = TAB_SIZE_CLASSES[size];
+    const getResponsiveWidthClass = (tabCount) => {
+      if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;
+      switch (tabCount) {
+        case 2:
+          return RESPONSIVE_WIDTH_CLASSES.twoTabs;
+        case 3:
+          return RESPONSIVE_WIDTH_CLASSES.threeTabs;
+        case 4:
+          return RESPONSIVE_WIDTH_CLASSES.fourTabs;
+        case 5:
+          return RESPONSIVE_WIDTH_CLASSES.fiveTabs;
+        default:
+          return RESPONSIVE_WIDTH_CLASSES.default;
+      }
+    };
+    const handleTabClick = (tabId) => {
+      const tab = tabs.find((t) => t.id === tabId);
+      if (tab && !tab.disabled) {
+        onTabChange(tabId);
+      }
+    };
+    const wrapAroundIndex = (index, maxLength) => {
+      if (index < 0) return maxLength - 1;
+      if (index >= maxLength) return 0;
+      return index;
+    };
+    const findNextValidTab = (startIndex, direction) => {
+      let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);
+      let attempts = 0;
+      while (tabs[nextIndex]?.disabled && attempts < tabs.length) {
+        nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);
+        attempts++;
+      }
+      return nextIndex;
+    };
+    const handleArrowNavigation = (direction) => {
+      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+      const nextIndex = findNextValidTab(currentIndex, direction);
+      if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
+        handleTabClick(tabs[nextIndex].id);
+      }
+    };
+    const handleKeyDown = (event, tabId) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleTabClick(tabId);
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const direction = event.key === "ArrowLeft" ? -1 : 1;
+        handleArrowNavigation(direction);
+      }
+    };
+    const getTabClassNames = (isDisabled, isActive) => {
+      if (isDisabled) {
+        return "text-text-400 cursor-not-allowed opacity-50";
+      }
+      if (isActive) {
+        return "text-text-950";
+      }
+      return "text-text-700 hover:text-text-800";
+    };
+    const tabWidthClass = getResponsiveWidthClass(tabs.length);
+    const containerWidth = responsive && tabs.length <= 2 ? "w-[240px] sm:w-[416px]" : "w-full";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
+      {
+        ref,
+        className: `flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`,
+        role: "tablist",
+        ...props,
+        children: tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          const isDisabled = Boolean(tab.disabled);
+          const tabClassNames = getTabClassNames(isDisabled, isActive);
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isActive,
+              "aria-disabled": isDisabled,
+              tabIndex: isActive ? 0 : -1,
+              className: `
+                relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate
+                ${sizeClasses.tab}
+                ${tabWidthClass}
+                ${tabClassNames}
+                ${!isDisabled && !isActive ? "hover:bg-background-50" : ""}
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
+              `,
+              onClick: () => handleTabClick(tab.id),
+              onKeyDown: (e) => handleKeyDown(e, tab.id),
+              disabled: isDisabled,
+              "data-testid": `tab-${tab.id}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-bold leading-4 tracking-[0.2px] truncate", children: responsive && tab.mobileLabel ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sm:hidden", children: tab.mobileLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hidden sm:inline", children: tab.label })
+                ] }) : tab.label }),
+                isActive && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "div",
+                  {
+                    className: `absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`,
+                    "data-testid": "active-indicator"
+                  }
+                )
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+var Tab_default = Tab;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  AuthProvider,
   Badge,
   Button,
   Calendar,
@@ -5018,6 +5369,7 @@ var SkeletonTable = (0, import_react15.forwardRef)(
   CardProgress,
   CardQuestions,
   CardResults,
+  CardSimulado,
   CardStatus,
   CardTopic,
   CheckBox,
@@ -5044,6 +5396,8 @@ var SkeletonTable = (0, import_react15.forwardRef)(
   ProfileMenuTrigger,
   ProgressBar,
   ProgressCircle,
+  ProtectedRoute,
+  PublicRoute,
   Radio,
   Select,
   SelectContent,
@@ -5060,11 +5414,16 @@ var SkeletonTable = (0, import_react15.forwardRef)(
   SkeletonTable,
   SkeletonText,
   Stepper,
+  Tab,
   Table,
   Text,
   TextArea,
   Toast,
   Toaster,
-  useToastStore
+  useAuth,
+  useAuthGuard,
+  useRouteAuth,
+  useToastStore,
+  withAuth
 });
 //# sourceMappingURL=index.js.map