TitanEd Library

Internal React TypeScript component library for TitanEd applications, featuring modern UI components with built-in search functionality and responsive design.

Features

• 🎨 Modern UI Components - Pre-built, customizable React components
• 🔍 Integrated Search - MeiliSearch integration with search highlighting
• 📱 Responsive Design - Mobile-first approach with responsive breakpoints
• 🎯 TypeScript Support - Full TypeScript definitions and type safety
• 🎨 SCSS Styling - Customizable styles with SCSS support
• 🧩 Modular Architecture - Tree-shakeable components for optimal bundle size

Installation

Clone the Repository

git clone https://github.com/TitanEd/titaned-frontend-libraries.git
cd titaned-frontend-libraries
npm install

Peer Dependencies

Make sure you have the required peer dependencies installed in your project:

npm install react react-dom @openedx/paragon @edx/frontend-platform meilisearch sass

Quick Start

import React from 'react';
import { 
  MainHeader, 
  Sidebar, 
  Footer, 
  SidebarProvider,
  useSidebar 
} from 'titaned-lib';

function App() {
  return (
    <SidebarProvider>
      <div className="app">
        <MainHeader />
        <Sidebar />
        <main>
          {/* Your content */}
        </main>
        <Footer />
      </div>
    </SidebarProvider>
  );
}

export default App;

Components

MainHeader

A responsive header component with integrated search functionality.

import { MainHeader, SimpleSearchProvider } from 'titaned-lib';

const searchConfig = {
  host: 'https://your-meilisearch-host.com',
  apiKey: 'your-api-key',
  indexName: 'your-index'
};

function App() {
  return (
    <SimpleSearchProvider config={searchConfig}>
      <MainHeader 
        title="Your App"
        onSearch={(query) => console.log('Search:', query)}
      />
    </SimpleSearchProvider>
  );
}

Sidebar

A collapsible sidebar component with mobile support.

import { Sidebar, SidebarProvider, useSidebar } from 'titaned-lib';

function SidebarContent() {
  const { isOpen, toggle } = useSidebar();
  
  return (
    <Sidebar>
      <nav>
        <a href="/dashboard">Dashboard</a>
        <a href="/courses">Courses</a>
        <a href="/profile">Profile</a>
      </nav>
    </Sidebar>
  );
}

function App() {
  return (
    <SidebarProvider>
      <SidebarContent />
    </SidebarProvider>
  );
}

Footer

A customizable footer component.

import { Footer } from 'titaned-lib';

function App() {
  return (
    <Footer 
      copyright="© 2024 TitanEd"
      links={[
        { label: 'Privacy Policy', href: '/privacy' },
        { label: 'Terms of Service', href: '/terms' }
      ]}
    />
  );
}

Styling

The library includes global SCSS styles that are automatically imported. You can override styles by targeting the component classes:

// Override global styles
.titaned-lib {
  --primary-color: #your-color;
  --secondary-color: #your-color;
}

// Override specific component styles
.main-header {
  background-color: var(--primary-color);
}

TypeScript Support

All components come with full TypeScript definitions:

import type { 
  MainHeaderProps, 
  MeiliSearchConfig,
  SearchResult 
} from 'titaned-lib';

interface MyComponentProps {
  headerConfig: MainHeaderProps;
  searchConfig: MeiliSearchConfig;
}

API Reference

Hooks

useSidebar()

Returns sidebar state and controls.

const { isOpen, toggle, close, open } = useSidebar();

useSimpleSearch()

Provides search functionality and state.

const { 
  searchQuery, 
  searchResults, 
  isSearching, 
  performSearch 
} = useSimpleSearch();

Types

• MainHeaderProps - Props for the MainHeader component
• MeiliSearchConfig - Configuration for MeiliSearch integration
• SearchResult - Structure of search result items

Development

Prerequisites

• Node.js 18+
• npm or yarn
• Access to the private repository

Setup

git clone https://github.com/TitanEd/titaned-frontend-libraries.git
cd titaned-lib
npm install

Build

npm run build

Development

npm run dev

Internal Team Guidelines

• Follow the established coding standards and patterns
• Update CHANGELOG.md when making significant changes
• Coordinate with the team for breaking changes

Support

For support and questions, contact the development team directly.

Changelog

See CHANGELOG.md for a list of changes and version history.