symref/dist/test/react/ComponentHierarchy.test.js

Static code checker for AI code agents (Windsurf, Cline, etc.)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useContext, createContext } from 'react';
// コンテキスト作成
const ThemeContext = createContext('light');
// ルートコンポーネント
const RootComponent = () => {
    const [theme, setTheme] = useState('light');
    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsxs("div", { className: "root", children: [_jsx("h1", { children: "Root Component" }), _jsx("button", { onClick: () => setTheme(theme === 'light' ? 'dark' : 'light'), children: "Toggle Theme" }), _jsx(MainContent, {})] }) }));
};
// メインコンテンツ
const MainContent = () => {
    return (_jsxs("div", { className: "main-content", children: [_jsx("h2", { children: "Main Content" }), _jsx(Sidebar, {}), _jsx(ContentArea, {})] }));
};
// サイドバー
const Sidebar = () => {
    const theme = useContext(ThemeContext);
    return (_jsxs("div", { className: `sidebar ${theme}`, children: [_jsx("h3", { children: "Sidebar" }), _jsx(Navigation, {})] }));
};
// ナビゲーション
const Navigation = () => {
    return (_jsxs("nav", { children: [_jsx("h4", { children: "Navigation" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx(NavItem, { label: "Home" }) }), _jsx("li", { children: _jsx(NavItem, { label: "About" }) }), _jsx("li", { children: _jsx(NavItem, { label: "Contact" }) })] })] }));
};
// ナビゲーションアイテム
const NavItem = ({ label }) => {
    return _jsx("span", { className: "nav-item", children: label });
};
// コンテンツエリア
const ContentArea = () => {
    return (_jsxs("div", { className: "content-area", children: [_jsx("h3", { children: "Content Area" }), _jsx(ArticleList, {})] }));
};
// 記事リスト
const ArticleList = () => {
    return (_jsxs("div", { className: "article-list", children: [_jsx("h4", { children: "Articles" }), _jsx(Article, { title: "First Article" }), _jsx(Article, { title: "Second Article" }), _jsx(LeafComponent, {})] }));
};
// 記事
const Article = ({ title }) => {
    return (_jsxs("div", { className: "article", children: [_jsx("h5", { children: title }), _jsx("p", { children: "This is an article content." })] }));
};
// 末端コンポーネント
const LeafComponent = () => {
    const theme = useContext(ThemeContext);
    return (_jsxs("div", { className: `leaf ${theme}`, children: [_jsx("h5", { children: "Leaf Component" }), _jsx("p", { children: "This is the deepest component in the hierarchy." })] }));
};
export { RootComponent, MainContent, Sidebar, Navigation, NavItem, ContentArea, ArticleList, Article, LeafComponent };
//# sourceMappingURL=ComponentHierarchy.test.js.map