feat: migrate course UI from supabase (#615)

* chore: fix storybook build * chore: implement theming * community list not showing properly * refactor: migrate Chip component to @cio/ui/custom/chip - Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package. - Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality. - Adjusted related components to ensure consistent usage of the updated Chip component. * fix: align course sidebar design to match organization design (#611) * fix: align course sidebar design to match organization design * feat: add hideSearch prop to AppHeader and update sidebar layout --------- Co-authored-by: Rotimi Best <best@classroomio.com> * refactor: replace PrimaryButton with Button component across multiple files - Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton. - Ensured consistent button usage throughout the application for improved styling and functionality. - Removed the PrimaryButton component and its associated constants from the codebase. * refactor: standardize button and input usage across components - Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton). - Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions. - Removed unused components and streamlined imports to enhance code maintainability and readability. * chore: themeing, course card, use $features * refactor: centralize UI components and update modal implementations - Refactored various components to centralize UI elements, improving discoverability and maintainability. - Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application. - Removed unused components and streamlined imports to enhance code clarity and reduce complexity. * feat: add new documentation and refactor org and lms UI components - Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference. - Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality. - Removed deprecated components and streamlined imports for better maintainability. - Updated translations across multiple languages to ensure consistency in user experience. * refactor: update UI components and improve styling consistency - Refactored various components to enhance styling consistency, including updates to button and text color classes. - Removed deprecated components and streamlined imports for better maintainability. - Replaced instances of PageBody with a more flexible Page component structure across multiple routes. - Updated translations and UI elements to align with the new design system. - Deleted unused components to reduce code complexity and improve clarity. * update output.css --------- Co-authored-by: Abdulmuizz Hamzat <103611443+canhamzacode@users.noreply.github.com>
2025-12-22 02:36:48 +01:00
parent e6a3cf9332
commit 9fb6c7cbaa
401 changed files with 10489 additions and 11679 deletions
@@ -0,0 +1,108 @@
+import type { NavItem } from './lms-navigation';
+import { isActive } from '$lib/utils/functions/app';
+
+export interface BreadcrumbItem {
+  label: string;
+  href: string;
+}
+
+/**
+ * Generate breadcrumbs from the current pathname using LMS navigation structure
+ */
+export function generateLmsBreadcrumbs(
+  pathname: string,
+  searchParams: string,
+  navItems: NavItem[],
+  pageData?: { breadcrumb?: string } // Optional page data for dynamic titles
+): BreadcrumbItem[] {
+  const breadcrumbs: BreadcrumbItem[] = [];
+  const pathWithQuery = pathname + searchParams;
+
+  // Remove the /lms prefix to get the relative path
+  const relativePath = pathname.replace(/^\/lms/, '').replace(/^\//, '') || '';
+  const pathSegments = relativePath.split('/').filter(Boolean);
+
+  // Handle root/dashboard
+  if (!relativePath || relativePath === '') {
+    return breadcrumbs;
+  }
+
+  // Find the matching top-level nav item
+  const firstSegment = pathSegments[0];
+  let matchedNavItem: NavItem | undefined;
+
+  for (const item of navItems) {
+    // Use path for matching (works for both hash URLs and regular URLs)
+    const itemPath = item.path.replace(/^\//, '');
+    if (itemPath === firstSegment || (itemPath === '' && firstSegment === undefined)) {
+      matchedNavItem = item;
+      break;
+    }
+  }
+
+  if (!matchedNavItem) {
+    // Try to match by checking if pathname matches the item path
+    for (const item of navItems) {
+      const fullItemPath = `/lms${item.path}`;
+      if (isActive(pathname, fullItemPath)) {
+        matchedNavItem = item;
+        break;
+      }
+    }
+  }
+
+  if (matchedNavItem) {
+    // Handle hash URLs (like settings) - use the actual path instead of '#'
+    const href = matchedNavItem.useHashUrl ? `/lms${matchedNavItem.path}` : matchedNavItem.url;
+
+    breadcrumbs.push({
+      label: matchedNavItem.title,
+      href: href
+    });
+  }
+
+  // Handle items with query params (like settings tabs)
+  if (matchedNavItem?.items && searchParams) {
+    const subItem = matchedNavItem.items.find((sub) => isActive(pathWithQuery, sub.url, undefined, true));
+    if (subItem) {
+      breadcrumbs.push({
+        label: subItem.title,
+        href: subItem.url
+      });
+      return breadcrumbs;
+    }
+  }
+
+  // Handle nested routes
+  if (pathSegments.length > 1 && matchedNavItem) {
+    const secondSegment = pathSegments[1];
+
+    // Check for static nested routes (like community/ask, settings/integrations)
+    if (matchedNavItem.nestedRoutes) {
+      const nestedRoute = matchedNavItem.nestedRoutes.find((route) => route.path === secondSegment);
+      if (nestedRoute) {
+        breadcrumbs.push({
+          label: nestedRoute.titleKey, // Could be translated if needed
+          href: `/lms${matchedNavItem.path}/${nestedRoute.path}`
+        });
+        return breadcrumbs;
+      }
+    }
+
+    // Check for dynamic segments (like community/[slug])
+    if (matchedNavItem.supportsDynamicSegment && secondSegment) {
+      // Check if it's not a static nested route
+      const isStaticRoute = matchedNavItem.nestedRoutes?.some((route) => route.path === secondSegment);
+      if (!isStaticRoute && pageData?.breadcrumb) {
+        breadcrumbs.push({
+          label: pageData.breadcrumb,
+          href: `/lms${matchedNavItem.path}/${secondSegment}`
+        });
+      }
+      return breadcrumbs;
+    }
+  }
+
+  return breadcrumbs;
+}
+