ad427365c9
* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components - Updated dependencies - Set `retries` to a fixed value of 3 for consistent test retries across environments. - Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete. - Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.
96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useMemo } from 'react';
|
|
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
|
|
import type { ComponentInfo } from '../lib/components-data';
|
|
import { components } from '../lib/components-data';
|
|
import { DocsContent } from './docs-content';
|
|
import { DocsHeader } from './docs-header';
|
|
import { DocsSidebar } from './docs-sidebar';
|
|
|
|
export function DocsProvider() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
// Get current values from query params
|
|
const componentId = searchParams.get('component');
|
|
const categoryParam = searchParams.get('category');
|
|
|
|
// Find the selected component based on query param, fallback to first component
|
|
const selectedComponent = useMemo(() => {
|
|
if (componentId) {
|
|
const found = components.find((c) => c.id === componentId);
|
|
if (found) return found;
|
|
}
|
|
return components[0];
|
|
}, [componentId]);
|
|
|
|
// Get selected category (null if 'all' or not set)
|
|
const selectedCategory = useMemo(() => {
|
|
return categoryParam && categoryParam !== 'all' ? categoryParam : null;
|
|
}, [categoryParam]);
|
|
|
|
// Update query params when component changes
|
|
const handleComponentSelect = useCallback(
|
|
(component: ComponentInfo) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
params.set('component', component.id);
|
|
|
|
// If we're selecting a component from a different category, clear category filter
|
|
if (selectedCategory && component.category !== selectedCategory) {
|
|
params.delete('category');
|
|
}
|
|
|
|
router.push(`?${params.toString()}`);
|
|
},
|
|
[router, searchParams, selectedCategory],
|
|
);
|
|
|
|
// Update query params when category changes
|
|
const handleCategorySelect = useCallback(
|
|
(category: string | null) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
|
|
if (category) {
|
|
params.set('category', category);
|
|
|
|
// When selecting a category, auto-select the first component in that category
|
|
const firstComponentInCategory = components.find(
|
|
(c) => c.category === category,
|
|
);
|
|
if (firstComponentInCategory) {
|
|
params.set('component', firstComponentInCategory.id);
|
|
}
|
|
} else {
|
|
params.delete('category');
|
|
// When showing all, select the first component overall
|
|
params.set('component', components[0]!.id);
|
|
}
|
|
|
|
router.push(`?${params.toString()}`);
|
|
},
|
|
[router, searchParams],
|
|
);
|
|
|
|
if (!selectedComponent) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-background flex h-screen">
|
|
<DocsSidebar
|
|
selectedComponent={selectedComponent.id}
|
|
selectedCategory={selectedCategory}
|
|
/>
|
|
|
|
<div className="flex flex-1 flex-col">
|
|
<DocsHeader selectedComponent={selectedComponent.id} />
|
|
|
|
<DocsContent selectedComponent={selectedComponent.id} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|