react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
69 lines (68 loc) • 5.03 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from 'react';
import { loadAtomsDocumentation, getComponentDocumentation, getDocumentedComponents } from '../utils/documentationLoader';
import { Card } from './atoms/Card';
import { Button } from './atoms/Button';
import { Icon } from './atoms/Icon';
import { Alert } from './atoms/Alert';
export const DocumentationViewer = ({ showFullDocumentation = true, selectedComponent }) => {
const [documentation, setDocumentation] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [components, setComponents] = useState([]);
const [selectedComp, setSelectedComp] = useState(selectedComponent || null);
useEffect(() => {
loadDocumentation();
}, []);
const loadDocumentation = async () => {
try {
setLoading(true);
setError(null);
if (showFullDocumentation) {
const fullDoc = await loadAtomsDocumentation();
setDocumentation(fullDoc);
}
else {
const availableComponents = await getDocumentedComponents();
setComponents(availableComponents);
}
}
catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load documentation');
}
finally {
setLoading(false);
}
};
const handleComponentSelect = async (componentName) => {
try {
setLoading(true);
const componentDoc = await getComponentDocumentation(componentName);
if (componentDoc) {
setDocumentation(componentDoc);
setSelectedComp(componentName);
}
}
catch (err) {
setError(`Failed to load documentation for ${componentName}`);
}
finally {
setLoading(false);
}
};
if (loading) {
return (_jsx("div", { className: "d-flex justify-center align-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx(Icon, { name: "loader", size: "xl", className: "animate-spin mb-4" }), _jsx("p", { children: "Loading documentation..." })] }) }));
}
if (error) {
return (_jsxs(Alert, { variant: "error", title: "Error Loading Documentation", children: [_jsx("p", { children: error }), _jsx(Button, { variant: "primary", size: "sm", onClick: loadDocumentation, className: "mt-4", children: "Try Again" })] }));
}
if (!showFullDocumentation && !selectedComp) {
return (_jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-2xl font-bold mb-6", children: "Available Component Documentation" }), _jsx("div", { className: "d-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: components.map((component) => (_jsx(Card, { variant: "neutral", style: "elevated", className: "cursor-pointer hover:shadow-light-lg transition-all", onClick: () => handleComponentSelect(component), children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "d-flex align-center gap-3 mb-3", children: [_jsx(Icon, { name: "components", size: "md", className: "text-primary-500" }), _jsx("h3", { className: "text-lg font-semibold", children: component })] }), _jsxs("p", { className: "text-neutral-600 text-sm", children: ["View documentation for the ", component, " component"] }), _jsx(Button, { variant: "primary", size: "sm", className: "mt-3", rightIcon: "arrow-right", children: "View Docs" })] }) }, component))) })] }));
}
if (documentation) {
return (_jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: documentation.title || 'Component Documentation' }), documentation.tableOfContents && (_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Table of Contents" }), _jsx("div", { className: "d-flex flex-wrap gap-2", children: documentation.tableOfContents.map((item, index) => (_jsxs(Button, { variant: "secondary", size: "sm", onClick: () => handleComponentSelect(item), className: "text-xs", children: [index + 1, ". ", item] }, item))) })] }))] }), _jsx(Card, { variant: "neutral", style: "elevated", className: "p-6", children: _jsx("div", { className: "prose prose-lg max-w-none", dangerouslySetInnerHTML: {
__html: documentation.fullContent || documentation.content
} }) }), selectedComp && (_jsx("div", { className: "mt-6", children: _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setSelectedComp(null), leftIcon: "arrow-left", children: "Back to Components List" }) }))] }));
}
return (_jsx(Alert, { variant: "info", title: "No Documentation Available", children: _jsx("p", { children: "No documentation files were found in the atoms components." }) }));
};