react-vite-themes/dist/components/DocumentationExample.js

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.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from 'react';
import { loadAtomsDocumentation } from '../utils/documentationLoader';
import { Card } from './atoms/Card';
import { Button } from './atoms/Button';
import { Alert } from './atoms/Alert';
export const DocumentationExample = () => {
    const [documentation, setDocumentation] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    useEffect(() => {
        loadDocumentation();
    }, []);
    const loadDocumentation = async () => {
        try {
            setLoading(true);
            setError(null);
            const docs = await loadAtomsDocumentation();
            setDocumentation(docs);
        }
        catch (err) {
            setError(err instanceof Error ? err.message : 'Failed to load documentation');
        }
        finally {
            setLoading(false);
        }
    };
    if (loading) {
        return (_jsx("div", { className: "p-6", children: _jsx(Card, { variant: "neutral", style: "elevated", className: "p-6", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "animate-spin w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full mx-auto mb-4" }), _jsx("p", { children: "Loading documentation..." })] }) }) }));
    }
    if (error) {
        return (_jsx("div", { className: "p-6", children: _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 (!documentation) {
        return (_jsx("div", { className: "p-6", children: _jsx(Alert, { variant: "info", title: "No Documentation Available", children: _jsx("p", { children: "No documentation files were found in the atoms components." }) }) }));
    }
    return (_jsx("div", { className: "p-6", children: _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx("h1", { className: "text-2xl font-bold mb-4", children: documentation.title }), _jsxs("div", { className: "mb-6", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Available Components" }), _jsx("div", { className: "d-flex flex-wrap gap-2", children: documentation.tableOfContents.map((component, index) => (_jsxs(Button, { variant: "secondary", size: "sm", className: "text-xs", children: [index + 1, ". ", component] }, component))) })] }), _jsxs("div", { className: "mb-4", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Documentation Summary" }), _jsxs("ul", { className: "list-disc list-inside space-y-1", children: [_jsxs("li", { children: [_jsx("strong", { children: "Total Components:" }), " ", documentation.components.length] }), _jsxs("li", { children: [_jsx("strong", { children: "Generated:" }), " ", new Date().toLocaleDateString()] }), _jsxs("li", { children: [_jsx("strong", { children: "File Size:" }), " ~", (documentation.fullContent.length / 1024).toFixed(1), " KB"] })] })] }), _jsxs("div", { className: "mt-6", children: [_jsx("h2", { className: "text-lg font-semibold mb-2", children: "Usage" }), _jsxs("p", { className: "text-neutral-600 mb-4", children: ["This documentation was automatically generated from individual .md files in each component directory. You can use the ", _jsx("code", { children: "loadAtomsDocumentation()" }), " function to load this documentation in your React app."] }), _jsx("div", { className: "bg-neutral-100 p-4 rounded-md", children: _jsx("pre", { className: "text-sm", children: `import { loadAtomsDocumentation } from './utils/documentationLoader';

const docs = await loadAtomsDocumentation();
console.log(docs.fullContent); // The joined documentation
console.log(docs.components); // Array of individual component docs` }) })] })] }) }));
};