titaned-frontend-library 1.0.1

package/src/components/common/Header/SimpleSearchContext.tsx

@@ -0,0 +1,194 @@
+import React, { createContext, useContext, useState } from 'react';
+import { MeiliSearchResult, MeiliSearchConfig } from '../../../interfaces/components';
+import { createMeiliSearchService } from '../../../services/meiliSearchService';
+
+export interface SearchResult {
+  id: string;
+  title: string;
+  type: string;
+  url?: string;
+  description?: string;
+  block_type?: string;
+  published?: string;
+  _formatted?: {
+    display_name?: string;
+    description?: string;
+    published?: string;
+  };
+}
+
+export interface SimpleSearchContextData {
+  // Search state
+  searchKeywords: string;
+  setSearchKeywords: React.Dispatch<React.SetStateAction<string>>;
+
+  // Results state
+  searchResults: SearchResult[];
+  totalHits: number;
+  isLoading: boolean;
+  hasError: boolean;
+  errorMessage: string | null;
+  facets: Record<string, Record<string, number>> | null;
+
+  // Actions
+  performSearch: (query: string) => Promise<void>;
+  clearSearch: () => void;
+
+  // Optional: pagination
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
+  isFetchingNextPage: boolean;
+}
+
+const SimpleSearchContext = createContext<SimpleSearchContextData | undefined>(undefined);
+
+export const SimpleSearchProvider: React.FC<{
+  children: React.ReactNode;
+  meiliSearchConfig: MeiliSearchConfig;
+}> = ({ children, meiliSearchConfig }) => {
+  const [searchKeywords, setSearchKeywords] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [totalHits, setTotalHits] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [currentOffset, setCurrentOffset] = useState(0);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+  const [facets, setFacets] = useState<Record<string, Record<string, number>> | null>(null);
+
+  const searchService = createMeiliSearchService(meiliSearchConfig);
+
+  const performSearch = async (query: string) => {
+    if (!query.trim()) {
+      clearSearch();
+      return;
+    }
+
+    setIsLoading(true);
+    setHasError(false);
+    setErrorMessage(null);
+    setCurrentOffset(0);
+
+    try {
+      const result = await searchService.search(query, {
+        limit: 20,
+        offset: 0
+      });
+
+      // Convert MeiliSearch results to SearchResult format
+      const results: SearchResult[] = result.hits.map((hit: MeiliSearchResult) => ({
+        id: hit.id,
+        title: hit._formatted?.display_name || hit.display_name,
+        type: hit.type,
+        url: hit.url,
+        description: hit._formatted?.description || hit.description,
+        block_type: hit.block_type,
+        published: hit._formatted?.published || hit.published,
+        _formatted: hit._formatted
+      }));
+
+      const total = result.totalHits;
+      const hasMore = results.length === 20 && total > results.length;
+
+      setSearchResults(results);
+      setTotalHits(total);
+      setHasNextPage(hasMore);
+      setFacets(result.facets || null);
+
+    } catch (error) {
+      console.error('Search error:', error);
+      setHasError(true);
+      setErrorMessage(error instanceof Error ? error.message : 'Search failed');
+      setSearchResults([]);
+      setTotalHits(0);
+      setHasNextPage(false);
+      setFacets(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchNextPage = async () => {
+    if (!hasNextPage || isFetchingNextPage) return;
+
+    setIsFetchingNextPage(true);
+
+    try {
+      const nextOffset = currentOffset + 20;
+      const result = await searchService.simpleSearch(searchKeywords, {
+        limit: 20,
+        offset: nextOffset
+      });
+
+      // Convert MeiliSearch results to SearchResult format
+      const newResults: SearchResult[] = result.hits.map((hit: MeiliSearchResult) => ({
+        id: hit.id,
+        title: hit._formatted?.display_name || hit.display_name,
+        type: hit.type,
+        url: hit.url,
+        description: hit._formatted?.description || hit.description,
+        block_type: hit.block_type,
+        published: hit._formatted?.published || hit.published,
+        _formatted: hit._formatted
+      }));
+
+      const total = result.totalHits;
+      const hasMore = newResults.length === 20 && total > (searchResults.length + newResults.length);
+
+      setSearchResults(prev => [...prev, ...newResults]);
+      setTotalHits(total);
+      setHasNextPage(hasMore);
+      setCurrentOffset(nextOffset);
+
+    } catch (error) {
+      console.error('Error fetching next page:', error);
+      setHasError(true);
+      setErrorMessage(error instanceof Error ? error.message : 'Failed to load more results');
+    } finally {
+      setIsFetchingNextPage(false);
+    }
+  };
+
+  const clearSearch = () => {
+    setSearchKeywords('');
+    setSearchResults([]);
+    setTotalHits(0);
+    setHasError(false);
+    setErrorMessage(null);
+    setCurrentOffset(0);
+    setHasNextPage(false);
+    setFacets(null);
+  };
+
+  const contextValue: SimpleSearchContextData = {
+    searchKeywords,
+    setSearchKeywords,
+    searchResults,
+    totalHits,
+    isLoading,
+    hasError,
+    errorMessage,
+    facets,
+    performSearch,
+    clearSearch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  };
+
+  return (
+    <SimpleSearchContext.Provider value={contextValue}>
+      {children}
+    </SimpleSearchContext.Provider>
+  );
+};
+
+export const useSimpleSearch = () => {
+  const context = useContext(SimpleSearchContext);
+  if (context === undefined) {
+    throw new Error('useSimpleSearch must be used within a SimpleSearchProvider');
+  }
+  return context;
+};
+

package/src/components/common/NavDropdownMenu/NavDropdownMenu.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import {
+  Dropdown,
+  DropdownButton,
+} from '@openedx/paragon';
+
+interface NavDropdownMenuProps {
+  id: string;
+  buttonTitle: React.ReactNode;
+  items: {
+    href: string;
+    title: string;
+  }[];
+}
+
+const NavDropdownMenu: React.FC<NavDropdownMenuProps> = ({
+  id,
+  buttonTitle,
+  items,
+}) => {
+  console.log('NavDropdownMenu Props:', items)
+  return (
+    <DropdownButton
+      id={id}
+      title={buttonTitle}
+      variant="tertiary"
+      className="mr-2"
+    >
+      {items.map(item => (
+        <Dropdown.Item
+          key={`${item.title}-dropdown-item`}
+          href={item.href}
+          as="a"
+          className="small"
+        >
+          {/* <a href={item.href} className="dropdown-item"> */}
+            {item.title}
+          {/* </a> */}
+        </Dropdown.Item>
+
+      ))}
+    </DropdownButton>
+  );
+}
+
+// NavDropdownMenu.propTypes = {
+//   id: PropTypes.string.isRequired,
+//   buttonTitle: PropTypes.node.isRequired,
+//   items: PropTypes.arrayOf(
+//     PropTypes.shape({
+//       href: PropTypes.string.isRequired,
+//       title: PropTypes.node.isRequired,
+//     }).isRequired
+//   ).isRequired,
+// };
+
+export default NavDropdownMenu;

package/src/components/common/SearchHighlight.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+interface HighlightProps {
+  text: string;
+  highlightTag?: string;
+}
+
+/**
+ * Component to highlight search terms in text
+ * Handles MeiliSearch highlight tags like __meili-highlight__term__/meili-highlight__
+ */
+const Highlight: React.FC<HighlightProps> = ({ 
+  text, 
+  highlightTag = '__meili-highlight__' 
+}) => {
+  if (!text) return null;
+
+  const endTag = `__/meili-highlight__`;
+  
+  // Split text by highlight tags and create highlighted segments
+  const parts = text.split(highlightTag);
+  const processedParts: React.ReactNode[] = [];
+
+  parts.forEach((part, index) => {
+    if (index === 0) {
+      // First part (before any highlights)
+      if (part) {
+        processedParts.push(part);
+      }
+    } else {
+      // Check if this part contains the end tag
+      const endIndex = part.indexOf(endTag);
+      
+      if (endIndex !== -1) {
+        // This part contains a highlighted segment
+        const highlightedText = part.substring(0, endIndex);
+        const remainingText = part.substring(endIndex + endTag.length);
+        
+        if (highlightedText) {
+          processedParts.push(
+            <mark key={`highlight-${index}`} className="search-highlight">
+              {highlightedText}
+            </mark>
+          );
+        }
+        
+        if (remainingText) {
+          processedParts.push(remainingText);
+        }
+      } else {
+        // This part doesn't contain end tag, treat as highlighted
+        processedParts.push(
+          <mark key={`highlight-${index}`} className="search-highlight">
+            {part}
+          </mark>
+        );
+      }
+    }
+  });
+
+  return <>{processedParts}</>;
+};
+
+export default Highlight;

package/src/components/common/SearchResultItem.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { Icon, IconButton } from '@openedx/paragon';
+import { OpenInNew } from '@openedx/paragon/icons';
+import { MeiliSearchResult } from '../../interfaces/components';
+import { navigateToSearchHit, getSearchHitUrl } from '../../utils/searchNavigation';
+import Highlight from './SearchHighlight';
+
+interface SearchResultItemProps {
+  result: MeiliSearchResult;
+  onNavigate?: (url: string) => void;
+  baseUrl?: string;
+}
+
+/**
+ * Get icon for block type
+ */
+function getBlockTypeIcon(blockType: string): string {
+  const iconMap: Record<string, string> = {
+    'html': 'text',
+    'video': 'video',
+    'problem': 'quiz',
+    'vertical': 'folder',
+    'sequential': 'folder',
+    'chapter': 'folder',
+    'about': 'info',
+    'static_tab': 'text',
+    'openassessment': 'quiz',
+    'lti_consumer': 'link',
+    'pdf': 'file',
+    'scorm': 'file',
+    'itembank': 'library',
+    'library_content': 'library',
+  };
+  
+  return iconMap[blockType] || 'text';
+}
+
+/**
+ * Single search result item component
+ */
+const SearchResultItem: React.FC<SearchResultItemProps> = ({ 
+  result, 
+  onNavigate, 
+  baseUrl 
+}) => {
+  const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    
+    // Map MeiliSearch result to SearchHit interface
+    const searchHit = {
+      id: result.id,
+      blockType: result.block_type || result.type,
+      contextKey: result.context_key, // Use the actual context_key from MeiliSearch
+      usageKey: result.usage_key, // Use the actual usage_key from MeiliSearch
+      breadcrumbs: result.breadcrumbs?.map(bc => ({
+        displayName: bc.display_name,
+        usageKey: bc.usage_key
+      })) || [],
+    };
+    
+    
+    // If we have a direct URL, use it
+    if (result.url) {
+      if (onNavigate) {
+        onNavigate(result.url);
+      } else {
+        window.location.href = result.url;
+      }
+      return;
+    }
+    
+    // Otherwise try to generate URL
+    const url = navigateToSearchHit(searchHit, baseUrl, onNavigate);
+    
+    // If URL generation failed, try a simple fallback
+    if (url === '#') {
+      // You can customize this fallback based on your needs
+      if (onNavigate) {
+        onNavigate(`/search-result/${result.id}`);
+      } else {
+        window.location.href = `/search-result/${result.id}`;
+      }
+    }
+  };
+
+  const handleOpenInNewWindow = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const searchHit = {
+      id: result.id,
+      blockType: result.block_type || result.type,
+      contextKey: result.context_key,
+      usageKey: result.usage_key,
+      breadcrumbs: result.breadcrumbs?.map(bc => ({
+        displayName: bc.display_name,
+        usageKey: bc.usage_key
+      })) || [],
+    };
+    
+    const url = getSearchHitUrl(searchHit, baseUrl);
+    if (url && url !== '#') {
+      window.open(url, '_blank');
+    }
+  };
+
+  const displayName = result._formatted?.display_name || result.display_name;
+  const description = result._formatted?.description || result.description;
+  const blockType = result.block_type || result.type;
+
+  return (
+    <div 
+      className="search-result-item"
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          handleClick(e);
+        }
+      }}
+    >
+      <div className="search-result-content">
+        <div className="search-result-icon">
+          <Icon src={getBlockTypeIcon(blockType) as any} />
+        </div>
+        
+        <div className="search-result-text">
+          <div className="search-result-title">
+            <Highlight text={displayName} />
+          </div>
+          
+          {description && (
+            <div className="search-result-description">
+              <Highlight text={description} />
+            </div>
+          )}
+          
+          {result.breadcrumbs && result.breadcrumbs.length > 0 && (
+            <div className="search-result-breadcrumbs">
+              {result.breadcrumbs.map(bc => bc.display_name).join(' / ')}
+            </div>
+          )}
+        </div>
+        
+        <div className="search-result-actions">
+          <IconButton
+            src={OpenInNew}
+            iconAs={Icon}
+            onClick={handleOpenInNewWindow}
+            alt="Open in new window"
+            size="sm"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchResultItem;

package/src/components/common/Sidebar/Sidebar.scss

@@ -0,0 +1,170 @@
+.sidebar {
+  width: 200px;
+  min-height: 100vh;
+  background-color: var(--bg-surface);
+  border-right: 1px solid var(--border-color);
+  position: relative;
+  // padding: 8px 4px;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  z-index: 101;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: visible;
+
+  // Collapsed state styles
+  &.collapsed {
+    width: 80px;
+    min-width: 50px;
+    padding: 0;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    .sidebar-btn {
+      padding: 14px 10px;
+      padding-right: 0px;
+      justify-content: center;
+      position: relative;
+      z-index: 25;
+      .btn-content {
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+        .btn-label {
+          display: none;
+          opacity: 0;
+          max-width: 0;
+          margin-left: 0;
+        }
+      }
+
+      // &:hover {
+      //   .btn-label {
+      //     /* Removed old CSS tooltip styles */
+      //   }
+      // }
+    }
+  }
+
+  // Styles for non-standard routes
+  &.non-standard-route {
+    // When NOT collapsed (i.e., expanded state) on a non-standard route
+    &:not(.collapsed) {
+      width: 200px; // Expand to 200px
+      position: fixed; // Overlay content
+      // height: 100vh;
+      top: 6rem;
+      left: 0;
+      z-index: 1000; // Ensure it's above other content
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; // Animate transform for slide effect
+      transform: translateX(0); // Ensure it's visible
+      margin-right: 80px;
+    }
+
+  }
+
+  .sidebar-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 1.5rem;
+    margin-right: 1rem;
+  }
+
+  .sidebar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 14px 10px;
+    border-radius: 0 32px 32px 0;
+    background: transparent;
+    color: var(--text-secondary);
+    font-weight: 500;
+    font-size: 16px;
+    border: none;
+    transition: background 0.2s, color 0.2s;
+    margin: 2px 0;
+    text-align: left;
+
+    .btn-content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+    }
+
+    .icon-container {
+      font-size: 22px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 28px;
+    }
+
+    .btn-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: inherit;
+      white-space: nowrap;
+      transition: opacity 0.2s, max-width 0.2s, margin 0.2s;
+      opacity: 1;
+      max-width: 200px;
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+.pgn-btn-active {
+  background: var(--primary) !important;
+  color: var(--text-white) !important;
+
+  &:hover {
+    background-color: var(--primary-light) !important;
+    color: var(--primary) !important;
+
+    .icon-container,
+    .btn-label {
+      color: var(--primary) !important;
+    }
+  }
+
+  .icon-container,
+  .btn-label {
+    color: var(--text-white) !important;
+  }
+}
+
+.sidebar-btn {
+  &.pgn-btn-inactive {
+    color: var(--text-secondary) !important;
+
+    &:hover {
+      color: var(--primary) !important;
+    }
+  }
+}
+
+.sidebar-extra-space {
+  width: 80px;
+  // margin-right: 80px  ; // Adjust margin for full width panel
+ }
+
+// RTL-specific tooltip adjustments
+[dir="rtl"] .sidebar {
+  .tooltip {
+    // Ensure tooltip appears on the left side for RTL
+    &.bs-tooltip-left {
+      margin-right: 8px;
+    }
+  }
+  
+  // Additional RTL adjustments for collapsed state
+  &.collapsed {
+    .tooltip {
+      // Fine-tune positioning for RTL collapsed sidebar
+      &.bs-tooltip-left {
+        transform: translateX(-4px);
+      }
+    }
+  }
+}