titaned-frontend-library 1.0.1

package/SEARCH_INTEGRATION_README.md

@@ -0,0 +1,208 @@
+# Open edX MeiliSearch Integration Guide
+
+This guide explains how to integrate your MainHeader component with Open edX MeiliSearch functionality.
+
+## What You Need from Open edX Authoring
+
+### 1. MeiliSearch Configuration
+From your Open edX logs, you need these values:
+
+```javascript
+const meiliSearchConfig = {
+  host: 'http://meilisearch.local.openedx.io:7700',
+  apiKey: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...',
+  indexName: 'tutor_studio_content'
+};
+```
+
+### 2. Dependencies
+Make sure your consuming app has:
+```json
+{
+  "dependencies": {
+    "meilisearch": "^0.41.0"
+  }
+}
+```
+
+### 3. MeiliSearch Response Format
+The search response will be in MeiliSearch format:
+```json
+{
+  "hits": [
+    {
+      "id": "block-v1:course+type@problem+block@abc123",
+      "display_name": "Problem Title",
+      "type": "problem",
+      "url": "/course/course-v1:org+course+run/jump_to/block-v1:course+type@problem+block@abc123",
+      "description": "Problem description",
+      "created": "2024-01-01T00:00:00Z",
+      "modified": "2024-01-15T00:00:00Z"
+    }
+  ],
+  "totalHits": 150,
+  "estimatedTotalHits": 150,
+  "offset": 0,
+  "limit": 20
+}
+```
+
+## Integration Options
+
+### Option 1: Simple Integration (Recommended)
+Use the MainHeader component with MeiliSearch config and `onSearchResults` callback:
+
+```tsx
+import { MainHeader, MeiliSearchConfig } from 'titaned-lib';
+
+const meiliConfig: MeiliSearchConfig = {
+  host: 'http://meilisearch.local.openedx.io:7700',
+  apiKey: 'your-meilisearch-api-key',
+  indexName: 'tutor_studio_content'
+};
+
+const App = () => {
+  const handleSearchResults = (results, totalHits) => {
+    console.log('Search results:', results);
+    console.log('Total hits:', totalHits);
+    // Handle results in your app (show in modal, navigate, etc.)
+  };
+
+  return (
+    <MainHeader
+      logoUrl="/logo.png"
+      menuList={[]}
+      loginSignupButtons={false}
+      menuAlignment="left"
+      meiliSearchConfig={meiliConfig}
+      onSearchResults={handleSearchResults}
+      headerButtons={{ notification: false }}
+    />
+  );
+};
+```
+
+### Option 2: Advanced Integration with Context
+Use the SimpleSearchProvider for more control:
+
+```tsx
+import { SimpleSearchProvider, useSimpleSearch } from 'titaned-lib';
+
+const SearchResultsComponent = () => {
+  const {
+    searchResults,
+    totalHits,
+    isLoading,
+    hasError,
+    errorMessage,
+    hasNextPage,
+    fetchNextPage
+  } = useSimpleSearch();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (hasError) return <div>Error: {errorMessage}</div>;
+
+  return (
+    <div>
+      <p>Found {totalHits} results</p>
+      {searchResults.map(result => (
+        <div key={result.id}>
+          <h3>{result.title}</h3>
+          <p>{result.description}</p>
+          <a href={result.url}>View</a>
+        </div>
+      ))}
+      {hasNextPage && (
+        <button onClick={fetchNextPage}>Load More</button>
+      )}
+    </div>
+  );
+};
+
+const App = () => {
+  const meiliConfig: MeiliSearchConfig = {
+    host: 'http://meilisearch.local.openedx.io:7700',
+    apiKey: 'your-meilisearch-api-key',
+    indexName: 'tutor_studio_content'
+  };
+
+  return (
+    <div>
+      <MainHeader
+        logoUrl="/logo.png"
+        menuList={[]}
+        loginSignupButtons={false}
+        menuAlignment="left"
+        meiliSearchConfig={meiliConfig}
+        headerButtons={{ notification: false }}
+      />
+      <SearchResultsComponent />
+    </div>
+  );
+};
+```
+
+## Configuration
+
+### API Base URL
+Update the search endpoint in `MainHeader.tsx`:
+```javascript
+const response = await fetch(`/your-custom-api-endpoint/search/?${searchParams}`, {
+  // ... rest of the code
+});
+```
+
+### Authentication
+Add authentication headers if needed:
+```javascript
+const response = await fetch(`/api/content-search/v2/search/?${searchParams}`, {
+  method: 'GET',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${yourToken}`,
+  },
+});
+```
+
+### Result Mapping
+Customize how search results are mapped in the `performSearch` function:
+
+```javascript
+const results = (data.hits || data.results || []).map(hit => ({
+  id: hit.id || hit.objectID,
+  title: hit.display_name || hit.title || hit.name,
+  type: hit.type || hit.content_type,
+  url: hit.url || hit.link,
+  description: hit.description || hit.content,
+  // Add custom fields as needed
+}));
+```
+
+## Features Included
+
+✅ **Search Input**: Controlled input with clear button
+✅ **Loading States**: Spinner during search
+✅ **Error Handling**: Clear error messages
+✅ **No Results**: "No results found" message
+✅ **Mobile Support**: Modal search on mobile
+✅ **i18n Ready**: Internationalization support
+✅ **Pagination Ready**: Next page fetching capability
+✅ **Type Safe**: Full TypeScript support
+
+## Testing
+
+1. **Basic Search**: Enter a query and press Enter
+2. **Empty Results**: Search for something that doesn't exist
+3. **Error Handling**: Disconnect network to test error states
+4. **Mobile**: Test on mobile devices
+5. **i18n**: Test with different language settings
+
+## Dependencies
+
+Make sure your consuming app has:
+- `@edx/frontend-platform` (for i18n)
+- `@openedx/paragon` (for SearchField component)
+- `react` and `react-dom`
+
+That's it! Your search is now ready to integrate with Open edX content search. 🎉</contents>
+</xai:function_call">The README provides clear instructions on how to integrate with Open edX search API and use the new functionality.

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare function App(): React.JSX.Element;
+export default App;

package/dist/components/ButtonComponent.scss

@@ -0,0 +1,3 @@
+.button-container {
+  margin: 8px;
+} 

package/dist/components/Footer.scss

@@ -0,0 +1,87 @@
+.footer {
+  background-color: #000000;
+  padding: 1rem 2rem;
+  color: #ffffff;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  height: 15rem;
+}
+
+/* All sections default styles */
+.section {
+  flex: 1;
+  margin: 1rem;
+  min-width: 12.5rem;
+  display: flex;
+  flex-direction: column;
+  text-align: left; /* Always keep text aligned left */
+
+  .footer-brand-logo {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+
+    img {
+      max-width: 100%;
+      height: auto;
+      object-fit: contain;
+      max-height: 5rem;
+    }
+  }
+}
+
+/* Alignment classes using flex order */
+.left {
+  order: 1;
+  align-items: flex-start;
+}
+
+.center {
+  order: 2;
+  align-items: center;
+}
+
+.right {
+  order: 3;
+  align-items: flex-end;
+}
+
+.section h3 {
+  color: #ffffff;
+  margin-bottom: 1rem;
+  /* margin-left: -1.5rem; */
+}
+
+.section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.section ul li {
+  margin-bottom: 0.625rem;
+}
+
+.section ul li a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.section ul li a:hover {
+  text-decoration: underline;
+}
+
+.copyright {
+  text-align: center;
+  margin-top: 1.25rem;
+  font-size: 0.875rem;
+  color: #737477;
+}
+
+.h3Adjust {
+  margin-left: -1.5rem;
+}