analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
431 lines (423 loc) • 18.4 kB
TypeScript
export { default as Text } from './Text/index.js';
export { default as Button } from './Button/index.js';
export { default as Badge } from './Badge/index.js';
export { default as Alert } from './Alert/index.js';
export { default as IconButton } from './IconButton/index.js';
export { default as IconRoundedButton } from './IconRoundedButton/index.js';
export { default as NavButton } from './NavButton/index.js';
export { default as SelectionButton } from './SelectionButton/index.js';
export { default as Table } from './Table/index.js';
export { default as CheckBox } from './CheckBox/index.js';
import * as react from 'react';
import { ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
import * as zustand from 'zustand';
import { StoreApi } from 'zustand';
export { default as Radio, RadioGroup, RadioGroupItem } from './Radio/index.js';
export { default as TextArea } from './TextArea/index.js';
export { default as Toast } from './Toast/index.js';
export { default as Toaster } from './Toast/Toaster/index.js';
export { default as Divider } from './Divider/index.js';
export { default as useToastStore } from './Toast/ToastStore/index.js';
export { default as Input } from './Input/index.js';
export { default as Search } from './Search/index.js';
export { default as Chips } from './Chips/index.js';
export { default as ProgressBar } from './ProgressBar/index.js';
export { default as ProgressCircle } from './ProgressCircle/index.js';
export { default as Stepper } from './Stepper/index.js';
export { default as Calendar } from './Calendar/index.js';
export { default as Modal } from './Modal/index.js';
export { CardAccordation } from './Accordation/index.js';
export { AlternativesList } from './Alternative/index.js';
export { AlertDialog } from './AlertDialog/index.js';
export { MultipleChoiceList } from './MultipleChoice/index.js';
export { default as IconRender } from './IconRender/index.js';
export { d as SubjectData, e as SubjectEnum, I as SubjectIconProps, S as SubjectInfo, b as getSubjectColorClass, a as getSubjectIcon, g as getSubjectInfo, c as getSubjectName } from './SubjectInfo-Dvt0OodP.js';
export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.js';
export { useTheme } from './hooks/useTheme/index.js';
export { cn, getSubjectColorWithOpacity, syncDropdownState } from './utils/index.js';
export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger, ProfileToggleTheme } 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, CardAudio, CardPerformance, CardProgress, CardQuestions, CardResults, CardSimulado, CardSimulationHistory, CardStatus, CardTest, CardTopic } from './Card/index.js';
export { Skeleton, SkeletonCard, SkeletonCircle, SkeletonList, SkeletonRectangle, SkeletonRounded, SkeletonTable, SkeletonText } from './Skeleton/index.js';
export { default as NotFound } from './NotFound/index.js';
export { default as VideoPlayer } from './VideoPlayer/index.js';
export { default as Whiteboard } from './Whiteboard/index.js';
export { AuthProvider, ProtectedRoute, PublicRoute, getRootDomain, useAuth, useAuthGuard, useRouteAuth, withAuth } from './Auth/index.js';
export { createZustandAuthAdapter } from './Auth/zustandAuthAdapter/index.js';
export { useUrlAuthentication } from './Auth/useUrlAuthentication/index.js';
export { useApiConfig } from './Auth/useApiConfig/index.js';
export { Quiz, QuizContent, QuizFooter, QuizHeader, QuizQuestionList, QuizTitle } from './Quiz/index.js';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Question } from './Quiz/useQuizStore/index.js';
export { ANSWER_STATUS, QUESTION_DIFFICULTY, QUESTION_STATUS, QUESTION_TYPE, QUIZ_TYPE, QuestionResult, QuizInterface, QuizState, SUBTYPE_ENUM, UserAnswerItem, useQuizStore } from './Quiz/useQuizStore/index.js';
export { default as LoadingModal } from './LoadingModal/index.js';
import { N as NotificationApiClient, a as Notification, F as FetchNotificationsParams, b as NotificationGroup, c as NotificationEntityType, d as NotificationType } from './NotificationCard-4GgB0Nsf.js';
export { B as BackendNotification, g as BackendNotificationsResponse, e as NotificationCard, f as NotificationItem, h as NotificationsResponse } from './NotificationCard-4GgB0Nsf.js';
export { ThemeToggle } from './ThemeToggle/index.js';
export { c as ThemeActions, T as ThemeMode, b as ThemeState, a as ThemeStore, u as useThemeStore } from './themeStore-P2X64zC-.js';
import 'zustand/middleware';
import 'clsx';
/**
* CheckboxList size variants
*/
type CheckboxListSize = 'small' | 'medium' | 'large';
/**
* CheckboxList visual state
*/
type CheckboxListState = 'default' | 'hovered' | 'focused' | 'invalid' | 'disabled';
/**
* CheckboxList store interface
*/
interface CheckboxListStore {
values: string[];
setValues: (values: string[]) => void;
toggleValue: (value: string) => void;
onValuesChange?: (values: string[]) => void;
disabled: boolean;
name: string;
}
type CheckboxListStoreApi = StoreApi<CheckboxListStore>;
/**
* CheckboxList component for flexible checkbox group composition
*
* Uses Zustand for state management with automatic store injection.
* Allows complete control over layout and styling by composing with CheckboxListItem.
*
* @example
* ```tsx
* <CheckboxList defaultValues={["option1"]} onValuesChange={setValues}>
* <div className="flex items-center gap-3">
* <CheckboxListItem value="option1" id="c1" />
* <label htmlFor="c1">Option 1</label>
* </div>
* <div className="flex items-center gap-3">
* <CheckboxListItem value="option2" id="c2" />
* <label htmlFor="c2">Option 2</label>
* </div>
* </CheckboxList>
* ```
*/
declare const CheckboxList: react.ForwardRefExoticComponent<{
/** Current selected values */
values?: string[];
/** Default selected values for uncontrolled usage */
defaultValues?: string[];
/** Callback when selection changes */
onValuesChange?: (values: string[]) => void;
/** Group name for all checkboxes */
name?: string;
/** Disabled state for the entire group */
disabled?: boolean;
/** Additional CSS classes */
className?: string;
/** Children components */
children: ReactNode;
} & Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValues"> & react.RefAttributes<HTMLDivElement>>;
/**
* CheckboxListItem component for use within CheckboxList
*
* A checkbox without label that works within CheckboxList context.
* Provides just the checkbox input for maximum flexibility in composition.
*
* @example
* ```tsx
* <CheckboxList defaultValues={["option1"]}>
* <div className="flex items-center gap-3">
* <CheckboxListItem value="option1" id="c1" />
* <label htmlFor="c1">Option 1</label>
* </div>
* </CheckboxList>
* ```
*/
declare const CheckboxListItem: react.ForwardRefExoticComponent<{
/** Value for this checkbox item */
value: string;
/** Store reference (automatically injected by CheckboxList) */
store?: CheckboxListStoreApi;
/** Disabled state for this specific item */
disabled?: boolean;
/** Size variant */
size?: CheckboxListSize;
/** Visual state */
state?: CheckboxListState;
/** Additional CSS classes */
className?: string;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "checked" | "type" | "name" | "onChange"> & react.RefAttributes<HTMLInputElement>>;
declare const getStatusBadge: (status?: "correct" | "incorrect") => react_jsx_runtime.JSX.Element | null;
interface QuizVariantInterface {
paddingBottom?: string;
}
declare const QuizAlternative: ({ paddingBottom }: QuizVariantInterface) => react_jsx_runtime.JSX.Element;
declare const QuizMultipleChoice: ({ paddingBottom }: QuizVariantInterface) => react_jsx_runtime.JSX.Element;
declare const QuizDissertative: ({ paddingBottom }: QuizVariantInterface) => react_jsx_runtime.JSX.Element;
declare const QuizTrueOrFalse: ({ paddingBottom }: QuizVariantInterface) => react_jsx_runtime.JSX.Element;
declare const QuizConnectDots: ({ paddingBottom }: QuizVariantInterface) => react_jsx_runtime.JSX.Element;
declare const QuizImageQuestion: ({ paddingBottom }: QuizVariantInterface) => react_jsx_runtime.JSX.Element;
declare const QuizHeaderResult: react.ForwardRefExoticComponent<{
className?: string;
} & react.RefAttributes<HTMLDivElement>>;
declare const QuizResultHeaderTitle: react.ForwardRefExoticComponent<{
className?: string;
showBadge?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
declare const QuizResultTitle: react.ForwardRefExoticComponent<{
className?: string;
} & react.RefAttributes<HTMLParagraphElement>>;
declare const QuizResultPerformance: react.ForwardRefExoticComponent<{
showDetails?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
declare const QuizListResult: react.ForwardRefExoticComponent<{
className?: string;
onSubjectClick?: (subject: string) => void;
} & react.RefAttributes<HTMLDivElement>>;
declare const QuizListResultByMateria: ({ subject, onQuestionClick, }: {
subject: string;
onQuestionClick: (question: Question) => void;
}) => react_jsx_runtime.JSX.Element;
/**
* Notification store state interface
*/
interface NotificationState {
/**
* List of all notifications
*/
notifications: Notification[];
/**
* Number of unread notifications
*/
unreadCount: number;
/**
* Loading state
*/
loading: boolean;
/**
* Error state
*/
error: string | null;
/**
* Whether there are more notifications to load
*/
hasMore: boolean;
/**
* Current page for pagination
*/
currentPage: number;
}
/**
* Notification store actions interface
*/
interface NotificationActions {
/**
* Fetch notifications from API
*/
fetchNotifications: (params?: FetchNotificationsParams) => Promise<void>;
/**
* Mark a specific notification as read
*/
markAsRead: (id: string) => Promise<void>;
/**
* Mark all notifications as read
*/
markAllAsRead: () => Promise<void>;
/**
* Delete a notification
*/
deleteNotification: (id: string) => Promise<void>;
/**
* Clear all notifications
*/
clearNotifications: () => void;
/**
* Reset error state
*/
resetError: () => void;
/**
* Group notifications by time periods
*/
getGroupedNotifications: () => NotificationGroup[];
}
type NotificationStore = NotificationState & NotificationActions;
/**
* Format time relative to now
*/
declare const formatTimeAgo: (date: Date) => string;
/**
* Create notification store with injected API client
*/
declare const createNotificationStore: (apiClient: NotificationApiClient) => zustand.UseBoundStore<Omit<zustand.StoreApi<NotificationStore>, "setState" | "devtools"> & {
setState(partial: NotificationStore | Partial<NotificationStore> | ((state: NotificationStore) => NotificationStore | Partial<NotificationStore>), replace?: false | undefined, action?: (string | {
[x: string]: unknown;
[x: number]: unknown;
[x: symbol]: unknown;
type: string;
}) | undefined): void;
setState(state: NotificationStore | ((state: NotificationStore) => NotificationStore), replace: true, action?: (string | {
[x: string]: unknown;
[x: number]: unknown;
[x: symbol]: unknown;
type: string;
}) | undefined): void;
devtools: {
cleanup: () => void;
};
}>;
/**
* Create a notification store hook with injected API client
* This allows different applications to provide their own API implementation
*
* @param apiClient - API client instance that implements NotificationApiClient interface
* @returns Zustand hook for notification store
*
* @example
* ```typescript
* import { createUseNotificationStore } from 'analytica-frontend-lib';
* import api from './services/apiService';
*
* const useNotificationStore = createUseNotificationStore(api);
* ```
*/
declare const createUseNotificationStore: (apiClient: NotificationApiClient) => zustand.UseBoundStore<Omit<zustand.StoreApi<NotificationStore>, "setState" | "devtools"> & {
setState(partial: NotificationStore | Partial<NotificationStore> | ((state: NotificationStore) => NotificationStore | Partial<NotificationStore>), replace?: false | undefined, action?: (string | {
[x: string]: unknown;
[x: number]: unknown;
[x: symbol]: unknown;
type: string;
}) | undefined): void;
setState(state: NotificationStore | ((state: NotificationStore) => NotificationStore), replace: true, action?: (string | {
[x: string]: unknown;
[x: number]: unknown;
[x: symbol]: unknown;
type: string;
}) | undefined): void;
devtools: {
cleanup: () => void;
};
}>;
/**
* Create a comprehensive notifications hook with formatting and navigation
* This hook provides all notification functionality in a single interface
*
* @param apiClient - API client instance for notifications
* @returns Hook with notification state, actions, and utilities
*/
declare const createUseNotifications: (apiClient: NotificationApiClient) => () => {
notifications: Notification[];
unreadCount: number;
loading: boolean;
error: string | null;
hasMore: boolean;
currentPage: number;
fetchNotifications: (params?: FetchNotificationsParams) => Promise<void>;
markAsRead: (id: string) => Promise<void>;
markAllAsRead: () => Promise<void>;
deleteNotification: (id: string) => Promise<void>;
clearNotifications: () => void;
resetError: () => void;
markAsReadAndNavigate: (id: string, entityType?: string, entityId?: string, onAfterNavigate?: () => void) => Promise<void>;
refreshNotifications: () => Promise<void>;
handleNavigate: (entityType?: string, entityId?: string, onAfterNavigate?: () => void) => void;
getActionLabel: (entityType?: string) => string | undefined;
getGroupedNotifications: () => NotificationGroup[];
getFormattedGroupedNotifications: () => {
notifications: {
time: string;
entityType: NotificationEntityType | undefined;
entityId: string | undefined;
id: string;
title: string;
message: string;
type: NotificationType;
isRead: boolean;
createdAt: Date;
actionLink?: string | null;
sender?: {
id: string;
user: {
id: string;
name: string;
email: string;
};
} | null;
activity?: {
id: string;
title: string;
type: string;
} | null;
goal?: {
id: string;
title: string;
} | null;
}[];
label: string;
}[];
};
/**
* Create a pre-configured notifications hook
* This is a convenience function that returns a hook ready to use
*
* @param apiClient - API client instance for notifications
* @returns Pre-configured useNotifications hook
*
* @example
* // In your app setup
* import { createNotificationsHook } from 'analytica-frontend-lib';
* import api from './services/api';
*
* export const useNotifications = createNotificationsHook(api);
*
* // Then use directly in components
* const { unreadCount, fetchNotifications } = useNotifications();
*/
declare const createNotificationsHook: (apiClient: NotificationApiClient) => () => {
notifications: Notification[];
unreadCount: number;
loading: boolean;
error: string | null;
hasMore: boolean;
currentPage: number;
fetchNotifications: (params?: FetchNotificationsParams) => Promise<void>;
markAsRead: (id: string) => Promise<void>;
markAllAsRead: () => Promise<void>;
deleteNotification: (id: string) => Promise<void>;
clearNotifications: () => void;
resetError: () => void;
markAsReadAndNavigate: (id: string, entityType?: string, entityId?: string, onAfterNavigate?: () => void) => Promise<void>;
refreshNotifications: () => Promise<void>;
handleNavigate: (entityType?: string, entityId?: string, onAfterNavigate?: () => void) => void;
getActionLabel: (entityType?: string) => string | undefined;
getGroupedNotifications: () => NotificationGroup[];
getFormattedGroupedNotifications: () => {
notifications: {
time: string;
entityType: NotificationEntityType | undefined;
entityId: string | undefined;
id: string;
title: string;
message: string;
type: NotificationType;
isRead: boolean;
createdAt: Date;
actionLink?: string | null;
sender?: {
id: string;
user: {
id: string;
name: string;
email: string;
};
} | null;
activity?: {
id: string;
title: string;
type: string;
} | null;
goal?: {
id: string;
title: string;
} | null;
}[];
label: string;
}[];
};
export { CheckboxList, CheckboxListItem, FetchNotificationsParams, Notification, type NotificationActions, NotificationApiClient, NotificationEntityType, NotificationGroup, type NotificationState, type NotificationStore, NotificationType, Question, QuizAlternative, QuizConnectDots, QuizDissertative, QuizHeaderResult, QuizImageQuestion, QuizListResult, QuizListResultByMateria, QuizMultipleChoice, QuizResultHeaderTitle, QuizResultPerformance, QuizResultTitle, QuizTrueOrFalse, createNotificationStore, createNotificationsHook, createUseNotificationStore, createUseNotifications, formatTimeAgo, getStatusBadge };