mui-toolpad-extended-tuni 1.0.3 → 2.1.0

package/README.md

@@ -4,6 +4,29 @@
 
 A React library extending MUI Toolpad functionality with additional features for educational applications. This library provides components and tools for building interactive educational interfaces.
 
+## Version 2.1.0
+
+### Recent Changes
+
+- Enhanced course navigation structure with support for course instances
+- Improved MicroserviceRoutes component with better TypeScript support
+- Added new CourseInstanceSelector and CourseCodeLoader components
+- Updated navigation store with better course instance handling
+- Introduced new course filtering utilities
+- Improved sidebar footer with responsive design
+
+### Breaking Changes
+
+- Navigation structure now requires course code and instance properties
+- MicroserviceRoutes configuration requires updated navigation builder function
+- Course data structure updated to include code and instance fields
+
+## Breaking Changes in v2.0.0
+
+1. Renamed `EduMLProvider` to `LMSProvider` (EduMLProvider is now deprecated)
+2. All routing components must now be imported from this package
+3. State management is now centralized through the package
+
 ## Prerequisites
 
 This library requires the following peer dependencies:
@@ -18,21 +41,21 @@ This library requires the following peer dependencies:
 ## Installation
 
 ```bash
-npm install @jalez/mui-toolpad-extended-tuni
+npm install mui-toolpad-extended-tuni
 ```
 
 ## Basic Usage
 
-1. Wrap your application with `EduMLProvider`:
+1. Setup your application with `LMSProvider` and routing:
 
 ```tsx
 import { BrowserRouter } from 'react-router-dom';
-import { EduMLProvider } from '@jalez/mui-toolpad-extended-tuni';
+import { LMSProvider } from 'mui-toolpad-extended-tuni';
 
 function App() {
   return (
     <BrowserRouter>
-      <EduMLProvider>{/* Your application content */}</EduMLProvider>
+      <LMSProvider>{/* Your application content */}</LMSProvider>
     </BrowserRouter>
   );
 }
@@ -45,7 +68,7 @@ import {
   useUserStore,
   useCourseStore,
   useNavigationStore,
-} from '@jalez/mui-toolpad-extended-tuni';
+} from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   const { user } = useUserStore();
@@ -62,20 +85,19 @@ function MyComponent() {
 
 ## Core Components
 
-### EduMLProvider
+### LMSProvider
 
 The main provider component that sets up the application context:
 
 ```tsx
-import { BrowserRouter } from 'react-router-dom';
-import { EduMLProvider } from '@jalez/mui-toolpad-extended-tuni';
+import { LMSProvider, BrowserRouter } from 'mui-toolpad-extended-tuni';
 
 function App() {
   return (
     <BrowserRouter>
-      <EduMLProvider>
+      <LMSProvider>
         <YourComponents />
-      </EduMLProvider>
+      </LMSProvider>
     </BrowserRouter>
   );
 }
@@ -86,7 +108,7 @@ function App() {
 A customizable loading indicator with animations:
 
 ```tsx
-import { LoadingScreen } from '@jalez/mui-toolpad-extended-tuni';
+import { LoadingScreen } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   return isLoading ? <LoadingScreen /> : <YourContent />;
@@ -98,7 +120,7 @@ function MyComponent() {
 Built-in notification system using notistack:
 
 ```tsx
-import { useNotificationStore } from '@jalez/mui-toolpad-extended-tuni';
+import { useNotificationStore } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   const { addNotificationData } = useNotificationStore();
@@ -113,20 +135,20 @@ function MyComponent() {
 }
 ```
 
-### EduMLDialog
+### ExtendedDialog
 
 A responsive dialog component:
 
 ```tsx
-import { EduMLDialog } from '@jalez/mui-toolpad-extended-tuni';
+import { ExtendedDialog } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   const [open, setOpen] = useState(false);
 
   return (
-    <EduMLDialog open={open} onClose={() => setOpen(false)}>
+    <ExtendedDialog open={open} onClose={() => setOpen(false)}>
       <DialogContent>Your content here</DialogContent>
-    </EduMLDialog>
+    </ExtendedDialog>
   );
 }
 ```
@@ -138,7 +160,7 @@ function MyComponent() {
 A component for listing and selecting courses:
 
 ```tsx
-import { CourseSelector } from '@jalez/mui-toolpad-extended-tuni';
+import { CourseSelector } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   return <CourseSelector />;
@@ -150,7 +172,7 @@ function MyComponent() {
 Manages course-specific tools and LTI configuration:
 
 ```tsx
-import { CourseTools } from '@jalez/mui-toolpad-extended-tuni';
+import { CourseTools } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   return <CourseTools />;
@@ -162,7 +184,7 @@ function MyComponent() {
 For teachers to set up course authentication:
 
 ```tsx
-import { LtiLoginUrlForm } from '@jalez/mui-toolpad-extended-tuni';
+import { LtiLoginUrlForm } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   return <LtiLoginUrlForm />;
@@ -176,7 +198,7 @@ function MyComponent() {
 Catches and handles React component errors:
 
 ```tsx
-import { ErrorBoundary } from '@jalez/mui-toolpad-extended-tuni';
+import { ErrorBoundary } from 'mui-toolpad-extended-tuni';
 
 function App() {
   return (
@@ -192,7 +214,7 @@ function App() {
 Detects and displays warnings for null states:
 
 ```tsx
-import { NullStateWarning } from '@jalez/mui-toolpad-extended-tuni';
+import { NullStateWarning } from 'mui-toolpad-extended-tuni';
 
 function MyComponent() {
   const states = [{ user: currentUser }, { course: currentCourse }];
@@ -274,7 +296,7 @@ import {
   slugify,
   camelCaseToUnderscore,
   underscoreToCamelCase,
-} from '@jalez/mui-toolpad-extended-tuni';
+} from 'mui-toolpad-extended-tuni';
 
 // Convert strings to URL-friendly format
 const slug = slugify('My Course Title'); // 'my-course-title'
@@ -290,7 +312,7 @@ const camelCase = underscoreToCamelCase('my_variable'); // 'myVariable'
 import {
   convertObjectKeysToCamelCase,
   convertObjectKeysToUnderscore,
-} from '@jalez/mui-toolpad-extended-tuni';
+} from 'mui-toolpad-extended-tuni';
 
 // Convert API responses
 const camelCaseData = convertObjectKeysToCamelCase(apiResponse);
@@ -302,7 +324,7 @@ const underscoreData = convertObjectKeysToUnderscore(requestData);
 The library includes pre-configured Axios instance for API communications:
 
 ```tsx
-import { axiosInstance } from '@jalez/mui-toolpad-extended-tuni';
+import { axiosInstance } from 'mui-toolpad-extended-tuni';
 
 // Handles CSRF tokens and base URL automatically
 const response = await axiosInstance.get('/api/endpoint');
@@ -332,7 +354,7 @@ interface CourseRaw {
 The library includes a customizable Material-UI theme:
 
 ```tsx
-import { EduMLTheme } from '@jalez/mui-toolpad-extended-tuni';
+import { EduMLTheme } from 'mui-toolpad-extended-tuni';
 
 // Theme includes predefined:
 // - Color schemes (light/dark)

package/dist/{EduMLToolpad → LMSToolpad}/EduMLProvider.d.ts

@@ -4,6 +4,7 @@ export interface EduMLProviderProps {
     children?: ReactNode;
 }
 /**
+ * @deprecated Use LMSProvider instead of EduMLProvider. Will be removed in version 2.0.0
  * EduMLProvider must be wrapped in a Router component from react-router-dom
  * Example:
  * ```tsx

package/dist/LMSToolpad/LMSProvider.d.ts

@@ -0,0 +1,26 @@
+/** @format */
+import { ReactNode } from 'react';
+export interface EduMLProviderProps {
+    children?: ReactNode;
+}
+/**
+ * Main provider component for the LMS system.
+ *
+ * @version 2.1.0
+ * @breaking-changes
+ * - Renamed from EduMLProvider to LMSProvider
+ * - Updated authentication handling for course instances
+ * - Added support for course code level navigation
+ * - Improved context sharing between microservices
+ *
+ * @example
+ * ```tsx
+ * <BrowserRouter>
+ *   <LMSProvider>
+ *     {children}
+ *   </LMSProvider>
+ * </BrowserRouter>
+ * ```
+ */
+declare const LMSProvider: ({ children }: EduMLProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default LMSProvider;

package/dist/LMSToolpad/components/CenteredHeading.d.ts

@@ -0,0 +1,7 @@
+/** @format */
+type CenteredHeadingProps = {
+    heading: string;
+    subheading?: string;
+};
+declare const CenteredHeading: ({ heading, subheading }: CenteredHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export default CenteredHeading;

package/dist/LMSToolpad/components/Courses/CourseCodeLoader.d.ts

@@ -0,0 +1,15 @@
+/** @format */
+/**
+ * Component for loading and managing course code level data.
+ *
+ * @version 2.1.0
+ * @new-component
+ * - Handles course code level routing
+ * - Manages course code state in store
+ * - Provides course instance list context
+ * - Supports navigation between instances
+ * @description - This component is responsible for loading the course data and rendering the course tools
+ * @returns {React.ReactElement} - Returns the course loader component
+ */
+declare const CourseCodeLoader: () => import("react/jsx-runtime").JSX.Element;
+export default CourseCodeLoader;

package/dist/LMSToolpad/components/Courses/CourseInstanceLoader.d.ts

@@ -0,0 +1,16 @@
+/** @format */
+/**
+ * Component for loading specific course instance data.
+ *
+ * @version 2.1.0
+ * @new-component
+ * - Manages course instance state
+ * - Handles instance-specific data loading
+ * - Provides instance context to children
+ * - Supports microservice integration
+ * - Handles instance not found scenarios
+ * @description - This component is responsible for loading the course data and rendering the course tools
+ * @returns {React.ReactElement} - Returns the course loader component
+ */
+declare const CourseInstanceLoader: () => import("react/jsx-runtime").JSX.Element;
+export default CourseInstanceLoader;

package/dist/LMSToolpad/components/Courses/CourseInstanceSelector.d.ts

@@ -0,0 +1,15 @@
+/** @format */
+/**
+ * Component for selecting course instances from a filtered list.
+ *
+ * @version 2.1.0
+ * @new-component
+ * - Provides instance selection UI for courses
+ * - Groups instances by course code
+ * - Handles active/inactive instance states
+ * - Supports nested navigation structure
+ *
+ * @param {Course[]} courses - Available course instances
+ */
+declare const CourseInstanceSelector: () => import("react/jsx-runtime").JSX.Element;
+export default CourseInstanceSelector;

package/dist/LMSToolpad/components/Courses/CourseItem.d.ts

@@ -0,0 +1,25 @@
+/** @format */
+import { Course } from '../../store/useCourseStore';
+type CourseItemProps = {
+    course: Course;
+    isSelected?: boolean;
+    isInactive?: boolean;
+    onSelect: (course: Course) => void;
+    displayMode?: 'course' | 'instance' | 'instanceList';
+};
+/**
+ * Course item component for displaying individual course cards.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Completely redesigned with new card-based layout
+ * - Added support for inactive course states
+ * - Enhanced display modes (course/instance/instanceList)
+ * - Added transition animations and hover effects
+ * - Improved accessibility with better contrast and focus states
+ *
+ * @component
+ * @param {CourseItemProps} props
+ */
+declare const CourseItem: ({ course, isSelected, isInactive, onSelect, displayMode, }: CourseItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseItem;

package/dist/LMSToolpad/components/Courses/CourseList.d.ts

@@ -0,0 +1,24 @@
+/** @format */
+import { Course } from '../../store/useCourseStore';
+type CourseListProps = {
+    courses: Course[];
+    selectedCourse?: Course | null;
+    onSelectCourse: (course: Course) => void;
+    displayMode?: 'course' | 'instance' | 'instanceList';
+};
+/**
+ * Course list component for displaying course collections.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added support for active/inactive course grouping
+ * - Enhanced layout with responsive grid system
+ * - Added new display mode support
+ * - Improved course filtering and sorting
+ * - Added support for course instance display
+ *
+ * @component
+ * @param {CourseListProps} props
+ */
+declare const CourseList: ({ courses, selectedCourse, onSelectCourse, displayMode, }: CourseListProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseList;

package/dist/LMSToolpad/components/Courses/CourseSelector.d.ts

@@ -0,0 +1,23 @@
+/** @format */
+import { Course } from '../../store/useCourseStore';
+type CourseSelectorProps = {
+    courses: Course[];
+    navigationType?: 'direct' | 'instances';
+};
+/**
+ * Component for displaying and selecting courses with enhanced navigation features.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added support for direct and instance-based navigation modes
+ * - Enhanced course filtering with code and instance grouping
+ * - Added support for inactive course states
+ * - Improved course selection UI with new card-based design
+ *
+ * @component
+ * @param {CourseSelectorProps} props
+ * @param {Course[]} props.courses - Array of available courses
+ * @param {'direct' | 'instances'} [props.navigationType='direct'] - Navigation mode
+ */
+declare const CourseSelector: ({ courses, navigationType, }: CourseSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseSelector;

package/dist/LMSToolpad/components/Courses/CourseTools.d.ts

@@ -0,0 +1,22 @@
+/** @format */
+import { NavigationPageStoreItem } from '../../store/useNavigationStore';
+interface CourseToolsProps {
+    microservices: NavigationPageStoreItem[];
+}
+/**
+ * Component for managing and displaying course-specific tools.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added support for microservice-based tool management
+ * - Introduced enabled/available tools separation
+ * - Added service enablement/disablement functionality
+ * - Enhanced teacher-specific tool configuration
+ * - Improved UI with centered headings and tool groups
+ *
+ * @component
+ * @param {CourseToolsProps} props
+ * @param {NavigationPageStoreItem[]} props.microservices - Array of available microservice tools
+ */
+declare const CourseTools: ({ microservices }: CourseToolsProps) => import("react/jsx-runtime").JSX.Element;
+export default CourseTools;

package/dist/LMSToolpad/components/Courses/LayoutToggle.d.ts

@@ -0,0 +1,7 @@
+/** @format */
+type LayoutToggleProps = {
+    value: 'direct' | 'instances';
+    onChange: (value: 'direct' | 'instances') => void;
+};
+declare const LayoutToggle: ({ value, onChange }: LayoutToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default LayoutToggle;

package/dist/LMSToolpad/components/Home.d.ts

@@ -0,0 +1,13 @@
+/** @format */
+/**
+ * Home component with enhanced layout options.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added layout toggle functionality
+ * - Enhanced course display modes
+ * - Improved responsive design
+ * - Added support for instance/direct navigation
+ */
+declare const Home: () => import("react/jsx-runtime").JSX.Element;
+export default Home;

package/dist/LMSToolpad/components/MicroserviceNavigationBuilder.d.ts

@@ -0,0 +1,45 @@
+/** @format */
+import { NavigationPageStoreItem } from '../store/useNavigationStore';
+export type BuildMicroServiceNavigationProps = {
+    segment: string;
+    title: string;
+    description: string;
+    icon: any;
+    forRoles: string[];
+    children?: NavigationPageStoreItem[];
+};
+/**
+ * Builds a navigation structure for a microservice that can be integrated into the LMS navigation system.
+ *
+ * @param {BuildMicroServiceNavigation} options - Configuration options for the microservice navigation
+ * @param {string} options.segment - URL segment for the microservice (e.g., 'edutest')
+ * @param {string} options.title - Display title of the microservice
+ * @param {string} options.description - Description of the microservice's purpose
+ * @param {any} options.icon - MUI icon component to be used for the navigation item
+ * @param {string[]} options.forRoles - Array of role names that can access this microservice
+ * @param {NavigationPageStoreItem[]} [options.children] - Optional sub-navigation items
+ *
+ * @returns {NavigationPageStoreItem[]} Array containing the navigation structure
+ *
+ * @example
+ * ```typescript
+ * import ScienceIcon from '@mui/icons-material/Science';
+ *
+ * const eduTestNavigation = buildMicroServiceNavigation({
+ *   segment: 'edutest',
+ *   title: 'EduTest',
+ *   description: 'Testing system for education',
+ *   icon: ScienceIcon,
+ *   forRoles: ['teacher', 'student'],
+ *   children: [
+ *     {
+ *       kind: 'page',
+ *       segment: 'assignments',
+ *       title: 'Assignments',
+ *       // ... other properties
+ *     }
+ *   ]
+ * });
+ * ```
+ */
+export declare const buildMicroServiceNavigation: ({ segment, title, description, icon, forRoles, children, }: BuildMicroServiceNavigationProps) => NavigationPageStoreItem[];

package/dist/LMSToolpad/components/MicroserviceRoutes.d.ts

@@ -0,0 +1,44 @@
+/** @format */
+import React from 'react';
+export interface MicroserviceConfig {
+    path: string;
+    Component: React.ComponentType;
+    fetchHooks?: Array<(courseId: string) => void>;
+    buildNavigation: (courseId: string, isTeacher: boolean) => any[];
+}
+interface MicroserviceRoutesProps {
+    microservices: MicroserviceConfig[];
+}
+/**
+ * Component responsible for managing and rendering microservice routes within the LMS.
+ *
+ * @version 2.1.0
+ * @breaking-changes
+ * - Navigation structure now requires course code and instance properties
+ * - Updated configuration interface for better TypeScript support
+ * - Changed route structure to support course instances
+ * - Added support for course code level navigation
+ * - Improved handling of microservice-specific navigation items
+ *
+ * @component
+ * @param {MicroserviceRoutesProps} props - Component properties
+ * @param {MicroserviceConfig[]} props.microservices - Array of microservice configurations
+ *
+ * @example
+ * ```tsx
+ * const microservices = [{
+ *   path: 'assignments',
+ *   Component: AssignmentsTool,
+ *   fetchHooks: [(courseId) => fetchAssignmentData(courseId)],
+ *   buildNavigation: (courseId, isTeacher) => ([{
+ *     kind: 'page',
+ *     segment: 'assignments',
+ *     title: 'Assignments',
+ *     description: 'Course assignments',
+ *     forRoles: ['teacher', 'student']
+ *   }])
+ * }];
+ * ```
+ */
+declare const MicroserviceRoutes: React.FC<MicroserviceRoutesProps>;
+export default MicroserviceRoutes;

package/dist/LMSToolpad/components/ToolCard.d.ts

@@ -0,0 +1,8 @@
+import { NavigationPageStoreItem } from '../store/useNavigationStore';
+type ToolCardProps = {
+    item: NavigationPageStoreItem;
+    onToggleService?: (path: string) => void;
+    isUsed?: boolean;
+};
+declare const ToolCard: ({ item, onToggleService, isUsed }: ToolCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ToolCard;

package/dist/LMSToolpad/components/ToolDisplayer.d.ts

@@ -0,0 +1,21 @@
+import { NavigationPageStoreItem } from '../store/useNavigationStore';
+import { MicroserviceConfig } from './MicroserviceRoutes';
+export type ToolDisplayerItem = {
+    path: string;
+    icon: JSX.Element;
+    label: string;
+    description: string;
+    forRoles?: string[];
+};
+interface ToolDisplayerProps {
+    show: boolean;
+    title: string;
+    microservices?: MicroserviceConfig[];
+    onToggleService?: (path: string) => void;
+    navigationItems?: ToolDisplayerItem[];
+    navItems: NavigationPageStoreItem[];
+    roleCheck?: boolean;
+    isUsed?: boolean;
+}
+declare const ToolDisplayer: ({ show, onToggleService, navItems, roleCheck, isUsed, }: ToolDisplayerProps) => import("react/jsx-runtime").JSX.Element;
+export default ToolDisplayer;

package/dist/{EduMLToolpad → LMSToolpad}/components/sidebar/Footer.d.ts

@@ -1,3 +1,4 @@
-import { SidebarFooterProps } from "@toolpad/core";
+/** @format */
+import { SidebarFooterProps } from '@toolpad/core';
 declare function SidebarFooter({ mini }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
 export default SidebarFooter;

package/dist/{EduMLToolpad → LMSToolpad}/constants.d.ts

@@ -1,2 +1,3 @@
 /** @format */
 export declare const baseUrl = "/";
+export declare const MTETVERSION = "2.1.0";

package/dist/{EduMLToolpad → LMSToolpad}/hooks/useCustomRouter.d.ts

@@ -1,3 +1,4 @@
+/** @format */
 declare function useCustomRouter(): {
     pathname: any;
     searchParams: URLSearchParams;

package/dist/{EduMLToolpad → LMSToolpad}/network/axiosConfig.d.ts

@@ -1,3 +1,4 @@
+/** @format */
 export declare const csrftoken: string | null;
 declare const axiosInstance: any;
 export default axiosInstance;

package/dist/LMSToolpad/store/useCourseStore.d.ts

@@ -0,0 +1,31 @@
+/** @format */
+export interface CourseRaw {
+    title: string;
+    description: string;
+    code: string;
+    instance: string;
+    ltiLoginUrl?: string;
+    services?: string[];
+}
+export interface Course extends CourseRaw {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+}
+/**
+ * Course management store with enhanced instance handling.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added support for course codes and instances
+ * - Enhanced course filtering capabilities
+ * - Added currentCourseCode state
+ * - Updated Course interface with new fields
+ * - Added instance-specific state management
+ *
+ * @breaking-changes
+ * - Updated Course interface requires code and instance fields
+ * - Changed course identification logic to use code + instance
+ */
+declare const useCourseStore: any;
+export default useCourseStore;

package/dist/{EduMLToolpad → LMSToolpad}/store/useNavigationStore.d.ts

@@ -23,6 +23,20 @@ export interface NavigationPageStoreItem extends NavigationItemBase {
     metadata?: ToolMetadata;
 }
 export type NavigationStoreItem = NavigationHeaderItem | NavigationPageStoreItem;
+/**
+ * Navigation management store with enhanced course instance support.
+ *
+ * @version 2.1.0
+ * @updates
+ * - Added course instance section management
+ * - Enhanced navigation structure for course instances
+ * - Added support for instance-specific tools
+ * - Improved section management with code-based identification
+ *
+ * @breaking-changes
+ * - Changed section identification from slugified title to course code
+ * - Updated navigation structure to support instance hierarchy
+ */
 export declare const useNavigationStore: any;
 export declare const filterNavigationByRole: (role: string) => NavigationStoreItem[];
 export {};

package/dist/LMSToolpad/utils/courseFilters.d.ts

@@ -0,0 +1,14 @@
+/** @format */
+import { Course } from '../store/useCourseStore';
+export declare const filterUniqueCourses: (courses: Course[]) => Course[];
+export declare const isActiveCourse: (course: Course) => boolean;
+export declare const isActivecode: (courses: Course[], code: string) => boolean;
+/**
+ * Group courses by activity status (active/inactive).
+ * @param courses List of courses or instances
+ * @param skipUnique If true, do not apply unique filtering/logic.
+ */
+export declare const groupCoursesByActivity: (courses: Course[], skipUnique?: boolean) => {
+    active: Course[];
+    inactive: Course[];
+};