cortex-react-components 3.2.2 → 4.0.2

package/dist/components/Foundary/Views/KnowledgeView.docs.js

@@ -1,2 +0,0 @@
-// src/components/Foundary/Views/KnowledgeView.docs.mdx
-var KnowledgeView_docs_default = 'import { Meta } from \'@storybook/blocks\'\n\n<Meta title="Foundary/Views/KnowledgeView/Documentation" />\n\n# KnowledgeView Component Documentation\n\nThe **KnowledgeView** component is a comprehensive knowledge management interface that provides organized access to documentation and knowledge resources.\n\n## Overview\n\nThis component serves as the primary interface for browsing, searching, and managing organizational knowledge. It supports multiple organizational contexts, document filtering, and various interaction patterns.\n\n## Key Features\n\n### \u{1F504} Context-based Navigation\n\nSwitch between different organizational views:\n\n- **All Documentation**: Browse all documents by category and type\n- **Services**: Organize by service and team\n- **Architecture**: View by component and layer\n- **Teams**: Group by team and project\n- **Security**: Filter security documentation\n\n### \u{1F4DA} Document Browser\n\n- **Hierarchical organization** with expandable categories\n- **Search functionality** across all document content\n- **Document metadata** display (author, date, tags)\n- **Quick preview** capabilities\n\n### \u{1F3AF} Interactive Features\n\n- **Document selection** with visual feedback\n- **Sharing capabilities** for collaboration\n- **Cross-context document selection** for comparison\n- **Preview panels** for quick content review\n\n### \u26A1 Performance Optimizations\n\n- **Lazy content loading** for large document sets\n- **Virtual scrolling** for massive lists\n- **Optimistic updates** for better UX\n- **Caching strategies** for repeated access\n\n## Architecture\n\n### Component Structure\n\n```\nKnowledgeView\n\u251C\u2500\u2500 Context Selector (dropdown)\n\u251C\u2500\u2500 Search Bar\n\u251C\u2500\u2500 Document Tree\n\u2502   \u251C\u2500\u2500 Category Nodes\n\u2502   \u251C\u2500\u2500 Document Items\n\u2502   \u2514\u2500\u2500 Loading States\n\u2514\u2500\u2500 Action Buttons\n    \u251C\u2500\u2500 Share\n    \u251C\u2500\u2500 Preview\n    \u2514\u2500\u2500 Custom Actions\n```\n\n### Props Interface\n\n```typescript\ninterface KnowledgeViewProps {\n  contexts: KnowledgeContext[]\n  selectedDocuments?: KnowledgeDocument[]\n  onDocumentSelect?: (documents: KnowledgeDocument[]) => void\n  onShare?: (documents: KnowledgeDocument[]) => void\n  onLoadDocumentContent?: (document: KnowledgeDocument) => Promise<string>\n  className?: string\n}\n```\n\n### Context System\n\nThe component uses a context-based organization system where each context represents a different way to organize and view the same underlying documents:\n\n```typescript\ninterface KnowledgeContext {\n  id: string\n  name: string\n  description: string\n  icon: React.ReactNode\n  categories: KnowledgeCategory[]\n}\n```\n\n## Usage Patterns\n\n### Basic Usage\n\n```tsx\nimport { KnowledgeView } from \'@/components/DigitalColleagues/Views\'\nimport { defaultContexts } from \'./KnowledgeView.stories\'\n\nconst MyComponent = () => {\n  return (\n    <KnowledgeView\n      contexts={defaultContexts}\n      onDocumentSelect={(docs) => console.log(\'Selected:\', docs)}\n    />\n  )\n}\n```\n\n### With Custom Content Loading\n\n```tsx\nconst MyComponent = () => {\n  const handleLoadContent = async (document: KnowledgeDocument) => {\n    // Fetch content lazily for performance\n    const response = await fetch(`/api/documents/${document.id}/content`)\n    return response.text()\n  }\n\n  return <KnowledgeView contexts={contexts} onLoadDocumentContent={handleLoadContent} />\n}\n```\n\n### With Sharing Integration\n\n```tsx\nconst MyComponent = () => {\n  const handleShare = (documents: KnowledgeDocument[]) => {\n    const urls = documents.map((doc) => doc.url).join(\'\\n\')\n    navigator.clipboard.writeText(urls)\n    toast.success(\'Document links copied to clipboard!\')\n  }\n\n  return <KnowledgeView contexts={contexts} onShare={handleShare} />\n}\n```\n\n## Context Design Guidelines\n\n### Creating Effective Contexts\n\n1. **Purpose-driven**: Each context should serve a specific user need\n2. **Comprehensive**: Include all relevant documents for that context\n3. **Intuitive organization**: Use familiar categorization schemes\n4. **Balanced depth**: Avoid overly deep or flat hierarchies\n\n### Best Practices\n\n- **Limit context count**: 3-7 contexts work best for cognitive load\n- **Clear naming**: Use descriptive, action-oriented names\n- **Consistent structure**: Maintain similar organization patterns\n- **Regular review**: Update contexts as organizational needs evolve\n\n## Performance Considerations\n\n### Large Document Sets\n\n- Use `onLoadDocumentContent` for lazy loading\n- Implement virtual scrolling for 1000+ documents\n- Consider pagination for very large sets\n- Cache frequently accessed content\n\n### Memory Management\n\n- Unload content when switching contexts\n- Implement cleanup in useEffect hooks\n- Monitor memory usage in production\n- Use React.memo for expensive renders\n\n### Network Optimization\n\n- Batch API requests when possible\n- Implement request debouncing for search\n- Use service workers for offline support\n- Compress document metadata\n\n## Accessibility Features\n\n### Keyboard Navigation\n\n- **Tab**: Navigate through interactive elements\n- **Arrow keys**: Navigate tree structure\n- **Space/Enter**: Select/expand items\n- **Escape**: Close modals/dropdowns\n\n### Screen Reader Support\n\n- Semantic HTML structure\n- ARIA labels and descriptions\n- Focus management\n- Status announcements\n\n### Visual Accessibility\n\n- High contrast mode support\n- Respects `prefers-reduced-motion`\n- Scalable text and icons\n- Clear focus indicators\n\n## Testing Strategies\n\n### Unit Tests\n\n- Test document selection logic\n- Verify context switching\n- Mock API interactions\n- Test keyboard navigation\n\n### Integration Tests\n\n- Test with real data sets\n- Verify performance thresholds\n- Test error boundary behavior\n- Cross-browser compatibility\n\n### User Experience Tests\n\n- Usability testing with real users\n- Performance testing with large datasets\n- Accessibility audit compliance\n- Mobile responsiveness testing\n\n## Troubleshooting\n\n### Common Issues\n\n**Documents not loading**\n\n- Check context data structure\n- Verify document URLs are accessible\n- Check network connectivity\n- Review console for errors\n\n**Performance issues**\n\n- Implement lazy loading\n- Reduce initial data load\n- Check for memory leaks\n- Profile React components\n\n**Accessibility problems**\n\n- Run automated accessibility tests\n- Test with screen readers\n- Verify keyboard navigation\n- Check color contrast ratios\n\n### Debug Mode\n\nEnable debug logging by setting:\n\n```typescript\nwindow.__KNOWLEDGE_VIEW_DEBUG__ = true\n```\n\nThis will log:\n\n- Context switching events\n- Document selection changes\n- API request timing\n- Performance metrics\n\n## API Integration\n\n### Expected Data Format\n\n```typescript\n// Sample API response structure\n{\n  "contexts": [\n    {\n      "id": "all-docs",\n      "name": "All Documentation",\n      "categories": [\n        {\n          "id": "guides",\n          "name": "User Guides",\n          "documents": [\n            {\n              "id": "user-onboarding",\n              "title": "User Onboarding Guide",\n              "url": "/docs/onboarding",\n              "author": "John Doe",\n              "lastModified": "2025-01-15T10:30:00Z",\n              "tags": ["onboarding", "users"]\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n```\n\n### Error Handling\n\nThe component handles various error states:\n\n- Network failures\n- Invalid data structures\n- Missing documents\n- Permission errors\n\nImplement proper error boundaries and user feedback for production use.\n\n## Future Enhancements\n\n### Planned Features\n\n- **Advanced search**: Full-text search with filters\n- **Document versioning**: Track and compare versions\n- **Collaborative features**: Comments and annotations\n- **Analytics integration**: Usage tracking and insights\n\n### Extension Points\n\n- **Custom renderers**: For different document types\n- **Plugin system**: For third-party integrations\n- **Theme customization**: Beyond basic styling\n- **Workflow integration**: Connect to approval processes\n\n---\n\n## Related Components\n\n- **DocumentPreview**: For detailed document viewing\n- **SearchInterface**: Advanced search capabilities\n- **DocumentEditor**: For content creation/editing\n- **AnalyticsDashboard**: Usage insights and metrics\n\nFor interactive examples and component variations, see the **Stories** tab.\n';

package/dist/components/Foundary/Views/KnowledgeView.docs.mjs

@@ -1,7 +0,0 @@
-import "../../../chunk-6DZX6EAA.mjs";
-
-// src/components/Foundary/Views/KnowledgeView.docs.mdx
-var KnowledgeView_docs_default = 'import { Meta } from \'@storybook/blocks\'\n\n<Meta title="Foundary/Views/KnowledgeView/Documentation" />\n\n# KnowledgeView Component Documentation\n\nThe **KnowledgeView** component is a comprehensive knowledge management interface that provides organized access to documentation and knowledge resources.\n\n## Overview\n\nThis component serves as the primary interface for browsing, searching, and managing organizational knowledge. It supports multiple organizational contexts, document filtering, and various interaction patterns.\n\n## Key Features\n\n### \u{1F504} Context-based Navigation\n\nSwitch between different organizational views:\n\n- **All Documentation**: Browse all documents by category and type\n- **Services**: Organize by service and team\n- **Architecture**: View by component and layer\n- **Teams**: Group by team and project\n- **Security**: Filter security documentation\n\n### \u{1F4DA} Document Browser\n\n- **Hierarchical organization** with expandable categories\n- **Search functionality** across all document content\n- **Document metadata** display (author, date, tags)\n- **Quick preview** capabilities\n\n### \u{1F3AF} Interactive Features\n\n- **Document selection** with visual feedback\n- **Sharing capabilities** for collaboration\n- **Cross-context document selection** for comparison\n- **Preview panels** for quick content review\n\n### \u26A1 Performance Optimizations\n\n- **Lazy content loading** for large document sets\n- **Virtual scrolling** for massive lists\n- **Optimistic updates** for better UX\n- **Caching strategies** for repeated access\n\n## Architecture\n\n### Component Structure\n\n```\nKnowledgeView\n\u251C\u2500\u2500 Context Selector (dropdown)\n\u251C\u2500\u2500 Search Bar\n\u251C\u2500\u2500 Document Tree\n\u2502   \u251C\u2500\u2500 Category Nodes\n\u2502   \u251C\u2500\u2500 Document Items\n\u2502   \u2514\u2500\u2500 Loading States\n\u2514\u2500\u2500 Action Buttons\n    \u251C\u2500\u2500 Share\n    \u251C\u2500\u2500 Preview\n    \u2514\u2500\u2500 Custom Actions\n```\n\n### Props Interface\n\n```typescript\ninterface KnowledgeViewProps {\n  contexts: KnowledgeContext[]\n  selectedDocuments?: KnowledgeDocument[]\n  onDocumentSelect?: (documents: KnowledgeDocument[]) => void\n  onShare?: (documents: KnowledgeDocument[]) => void\n  onLoadDocumentContent?: (document: KnowledgeDocument) => Promise<string>\n  className?: string\n}\n```\n\n### Context System\n\nThe component uses a context-based organization system where each context represents a different way to organize and view the same underlying documents:\n\n```typescript\ninterface KnowledgeContext {\n  id: string\n  name: string\n  description: string\n  icon: React.ReactNode\n  categories: KnowledgeCategory[]\n}\n```\n\n## Usage Patterns\n\n### Basic Usage\n\n```tsx\nimport { KnowledgeView } from \'@/components/DigitalColleagues/Views\'\nimport { defaultContexts } from \'./KnowledgeView.stories\'\n\nconst MyComponent = () => {\n  return (\n    <KnowledgeView\n      contexts={defaultContexts}\n      onDocumentSelect={(docs) => console.log(\'Selected:\', docs)}\n    />\n  )\n}\n```\n\n### With Custom Content Loading\n\n```tsx\nconst MyComponent = () => {\n  const handleLoadContent = async (document: KnowledgeDocument) => {\n    // Fetch content lazily for performance\n    const response = await fetch(`/api/documents/${document.id}/content`)\n    return response.text()\n  }\n\n  return <KnowledgeView contexts={contexts} onLoadDocumentContent={handleLoadContent} />\n}\n```\n\n### With Sharing Integration\n\n```tsx\nconst MyComponent = () => {\n  const handleShare = (documents: KnowledgeDocument[]) => {\n    const urls = documents.map((doc) => doc.url).join(\'\\n\')\n    navigator.clipboard.writeText(urls)\n    toast.success(\'Document links copied to clipboard!\')\n  }\n\n  return <KnowledgeView contexts={contexts} onShare={handleShare} />\n}\n```\n\n## Context Design Guidelines\n\n### Creating Effective Contexts\n\n1. **Purpose-driven**: Each context should serve a specific user need\n2. **Comprehensive**: Include all relevant documents for that context\n3. **Intuitive organization**: Use familiar categorization schemes\n4. **Balanced depth**: Avoid overly deep or flat hierarchies\n\n### Best Practices\n\n- **Limit context count**: 3-7 contexts work best for cognitive load\n- **Clear naming**: Use descriptive, action-oriented names\n- **Consistent structure**: Maintain similar organization patterns\n- **Regular review**: Update contexts as organizational needs evolve\n\n## Performance Considerations\n\n### Large Document Sets\n\n- Use `onLoadDocumentContent` for lazy loading\n- Implement virtual scrolling for 1000+ documents\n- Consider pagination for very large sets\n- Cache frequently accessed content\n\n### Memory Management\n\n- Unload content when switching contexts\n- Implement cleanup in useEffect hooks\n- Monitor memory usage in production\n- Use React.memo for expensive renders\n\n### Network Optimization\n\n- Batch API requests when possible\n- Implement request debouncing for search\n- Use service workers for offline support\n- Compress document metadata\n\n## Accessibility Features\n\n### Keyboard Navigation\n\n- **Tab**: Navigate through interactive elements\n- **Arrow keys**: Navigate tree structure\n- **Space/Enter**: Select/expand items\n- **Escape**: Close modals/dropdowns\n\n### Screen Reader Support\n\n- Semantic HTML structure\n- ARIA labels and descriptions\n- Focus management\n- Status announcements\n\n### Visual Accessibility\n\n- High contrast mode support\n- Respects `prefers-reduced-motion`\n- Scalable text and icons\n- Clear focus indicators\n\n## Testing Strategies\n\n### Unit Tests\n\n- Test document selection logic\n- Verify context switching\n- Mock API interactions\n- Test keyboard navigation\n\n### Integration Tests\n\n- Test with real data sets\n- Verify performance thresholds\n- Test error boundary behavior\n- Cross-browser compatibility\n\n### User Experience Tests\n\n- Usability testing with real users\n- Performance testing with large datasets\n- Accessibility audit compliance\n- Mobile responsiveness testing\n\n## Troubleshooting\n\n### Common Issues\n\n**Documents not loading**\n\n- Check context data structure\n- Verify document URLs are accessible\n- Check network connectivity\n- Review console for errors\n\n**Performance issues**\n\n- Implement lazy loading\n- Reduce initial data load\n- Check for memory leaks\n- Profile React components\n\n**Accessibility problems**\n\n- Run automated accessibility tests\n- Test with screen readers\n- Verify keyboard navigation\n- Check color contrast ratios\n\n### Debug Mode\n\nEnable debug logging by setting:\n\n```typescript\nwindow.__KNOWLEDGE_VIEW_DEBUG__ = true\n```\n\nThis will log:\n\n- Context switching events\n- Document selection changes\n- API request timing\n- Performance metrics\n\n## API Integration\n\n### Expected Data Format\n\n```typescript\n// Sample API response structure\n{\n  "contexts": [\n    {\n      "id": "all-docs",\n      "name": "All Documentation",\n      "categories": [\n        {\n          "id": "guides",\n          "name": "User Guides",\n          "documents": [\n            {\n              "id": "user-onboarding",\n              "title": "User Onboarding Guide",\n              "url": "/docs/onboarding",\n              "author": "John Doe",\n              "lastModified": "2025-01-15T10:30:00Z",\n              "tags": ["onboarding", "users"]\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n```\n\n### Error Handling\n\nThe component handles various error states:\n\n- Network failures\n- Invalid data structures\n- Missing documents\n- Permission errors\n\nImplement proper error boundaries and user feedback for production use.\n\n## Future Enhancements\n\n### Planned Features\n\n- **Advanced search**: Full-text search with filters\n- **Document versioning**: Track and compare versions\n- **Collaborative features**: Comments and annotations\n- **Analytics integration**: Usage tracking and insights\n\n### Extension Points\n\n- **Custom renderers**: For different document types\n- **Plugin system**: For third-party integrations\n- **Theme customization**: Beyond basic styling\n- **Workflow integration**: Connect to approval processes\n\n---\n\n## Related Components\n\n- **DocumentPreview**: For detailed document viewing\n- **SearchInterface**: Advanced search capabilities\n- **DocumentEditor**: For content creation/editing\n- **AnalyticsDashboard**: Usage insights and metrics\n\nFor interactive examples and component variations, see the **Stories** tab.\n';
-export {
-  KnowledgeView_docs_default as default
-};