/* ============================================================ F2 UI — Storybook shell (layout · sidebar · topbar · doc page) Reads window.F2Stories + window.SB.* and renders the explorer. ============================================================ */ (function () { const F2 = window.F2; const SB = window.SB; const { Icon, Badge } = F2; const { Canvas, Controls, CodePanel, PropsTable, VariantGallery, A11yPanel, Block, Mono, Segmented, useStored } = SB; const GROUP_ORDER = ['Overview', 'Core', 'Forms', 'Navigation', 'Data display', 'Feedback', 'Dashboard', 'Marketing', 'Diagram']; const GROUP_ICON = { Overview: 'BookOpen', Core: 'Square', Forms: 'TextCursorInput', Navigation: 'Compass', 'Data display': 'LayoutList', Feedback: 'MessageSquareWarning', Dashboard: 'LayoutDashboard', Marketing: 'Megaphone', Diagram: 'Workflow', }; function groupStories(stories) { const map = {}; stories.forEach((s) => { (map[s.group] = map[s.group] || []).push(s); }); const order = [...GROUP_ORDER, ...Object.keys(map).filter((g) => !GROUP_ORDER.includes(g))]; return order.filter((g) => map[g]).map((g) => ({ group: g, items: map[g] })); } function defaultsFor(story) { const d = {}; (story.props || []).forEach((p) => { if ('default' in p) d[p.name] = p.default; }); return d; } /* ---------------- brand mark ---------------- */ function BrandMark() { const cell = (amber) => ({ width: 9, height: 9, borderRadius: 2.5, background: amber ? 'var(--f2-accent)' : 'var(--f2-surface-card)', border: amber ? 'none' : '1px solid var(--f2-border-strong)' }); return (
F2 UI COMPONENT LIBRARY
); } /* ---------------- sidebar ---------------- */ function Sidebar({ groups, currentId, onSelect, query, setQuery, total, searchRef }) { return ( ); } /* ---------------- topbar ---------------- */ function Topbar({ story, theme, setTheme, width, setWidth }) { return (
{story.group} {story.name} {story.status === 'new' && New}
{!story.page && (
)}
); } /* ---------------- doc page ---------------- */ function ImportLine({ text }) { const [copied, setCopied] = React.useState(false); return ( ); } function DocPage({ story, theme, setTheme, width, setWidth }) { const [values, setValues] = React.useState(() => defaultsFor(story)); React.useEffect(() => { setValues(defaultsFor(story)); }, [story.id]); if (story.page) { return (
{story.render(values, F2)}
); } const code = (() => { try { return story.code ? story.code(values, F2) : `<${story.name} />`; } catch (e) { return `<${story.name} />`; } })(); return (

{story.name}

{story.tagline &&

{story.tagline}

}
{story.importLine && } {(story.keywords || []).map((k) => ( {k} ))}
{story.notes && (
)}
); } /* ---------------- app root ---------------- */ function App() { const stories = window.F2Stories; const [query, setQuery] = React.useState(''); const [theme, setTheme] = useStored('f2sb.theme', 'dark'); const [width, setWidth] = useStored('f2sb.width', 'full'); const [currentId, setCurrentId] = useStored('f2sb.story', stories[0] && stories[0].id); const searchRef = React.useRef(null); // hash sync React.useEffect(() => { const fromHash = decodeURIComponent((location.hash || '').replace(/^#/, '')); if (fromHash && stories.some((s) => s.id === fromHash)) setCurrentId(fromHash); const onHash = () => { const h = decodeURIComponent((location.hash || '').replace(/^#/, '')); if (h && stories.some((s) => s.id === h)) setCurrentId(h); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); const select = (id) => { setCurrentId(id); if (location.hash.replace(/^#/, '') !== id) location.hash = id; const main = document.querySelector('main > div'); if (main) main.scrollTop = 0; }; // keyboard: "/" or cmd/ctrl-k focuses search React.useEffect(() => { const onKey = (e) => { if ((e.key === '/' || ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) && document.activeElement !== searchRef.current) { e.preventDefault(); searchRef.current && searchRef.current.focus(); } else if (e.key === 'Escape' && document.activeElement === searchRef.current) { setQuery(''); searchRef.current.blur(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const q = query.trim().toLowerCase(); const filtered = !q ? stories : stories.filter((s) => (s.name + ' ' + s.group + ' ' + (s.keywords || []).join(' ') + ' ' + (s.tagline || '')).toLowerCase().includes(q)); const groups = groupStories(filtered); const current = stories.find((s) => s.id === currentId) || stories[0]; return (
{current ? :
No stories loaded.
}
); } window.__F2_MOUNT__ = function () { if (!window.F2Stories || !window.F2Stories.length) { document.getElementById('root').innerHTML = '
No stories registered.
'; return; } ReactDOM.createRoot(document.getElementById('root')).render(); }; })();