maudocs 1.0.0

package/template/src/Accordion.jsx

@@ -0,0 +1,42 @@
+import { useState } from 'preact/hooks';
+
+export default function Accordion({ title = '', open = false, children }) {
+  const isInitiallyOpen = open === true || open === 'true' || open === '';
+  const [isOpen, setIsOpen] = useState(isInitiallyOpen);
+
+  // Re-run Lucide icons after rendering
+  if (window.lucide && typeof window.lucide.createIcons === 'function') {
+    setTimeout(() => window.lucide.createIcons(), 0);
+  }
+
+  return (
+    <div className="border border-slate-200 dark:border-slate-800/80 rounded-xl overflow-hidden bg-white dark:bg-slate-900 transition-all duration-300 my-2">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between p-4 text-left font-semibold text-sm text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors focus:outline-none"
+        aria-expanded={isOpen}
+      >
+        <span>{title}</span>
+        <i
+          data-lucide="chevron-down"
+          className={`w-4 h-4 text-slate-500 dark:text-slate-400 transition-transform duration-300 shrink-0 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        ></i>
+      </button>
+      <div
+        className={`transition-all duration-350 ease-in-out overflow-hidden ${
+          isOpen ? 'max-h-[1000px] border-t border-slate-100 dark:border-slate-800/40' : 'max-h-0'
+        }`}
+      >
+        <div className="p-4 text-sm text-slate-600 dark:text-slate-400 leading-relaxed content-area">
+          {typeof children === 'string' ? (
+            <span dangerouslySetInnerHTML={{ __html: children }} />
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/Alert.jsx

@@ -0,0 +1,82 @@
+import { useState } from 'preact/hooks';
+
+export default function Alert({ 
+  type = 'info', 
+  title = '', 
+  dismissible = false, 
+  className = '', 
+  icon = null, 
+  children 
+}) {
+  const [visible, setVisible] = useState(true);
+
+  if (!visible) return null;
+
+  let border = 'border-blue-100 dark:border-blue-900/30';
+  let bg = 'bg-blue-50/40 dark:bg-blue-950/10';
+  let text = 'text-blue-900 dark:text-blue-200';
+  let iconColor = 'text-blue-600 dark:text-blue-400';
+  let defaultIcon = 'info';
+
+  // Handle boolean conversions when attributes are passed from Web Component
+  const isDismissible = dismissible === true || dismissible === 'true' || dismissible === '';
+
+  switch (type) {
+    case 'warning':
+      border = 'border-amber-100 dark:border-amber-900/30';
+      bg = 'bg-amber-50/40 dark:bg-amber-950/10';
+      text = 'text-amber-900 dark:text-amber-200';
+      iconColor = 'text-amber-600 dark:text-amber-400';
+      defaultIcon = 'alert-triangle';
+      break;
+    case 'success':
+      border = 'border-emerald-100 dark:border-emerald-900/30';
+      bg = 'bg-emerald-50/40 dark:bg-emerald-950/10';
+      text = 'text-emerald-900 dark:text-emerald-200';
+      iconColor = 'text-emerald-600 dark:text-emerald-400';
+      defaultIcon = 'check-circle-2';
+      break;
+    case 'danger':
+    case 'error':
+      border = 'border-red-100 dark:border-red-900/30';
+      bg = 'bg-red-50/40 dark:bg-red-950/10';
+      text = 'text-red-900 dark:text-red-200';
+      iconColor = 'text-red-600 dark:text-red-400';
+      defaultIcon = 'x-circle';
+      break;
+  }
+
+  const finalIcon = icon || defaultIcon;
+
+  // Re-run Lucide icons after rendering
+  if (window.lucide && typeof window.lucide.createIcons === 'function') {
+    setTimeout(() => window.lucide.createIcons(), 0);
+  }
+
+  return (
+    <div className={`block my-4 transition-all duration-300 ${className}`}>
+      <div className={`relative flex gap-3 p-4 rounded-xl border ${border} ${bg} ${text}`}>
+        <i data-lucide={finalIcon} className={`w-5 h-5 ${iconColor} shrink-0 mt-0.5`}></i>
+        <div className="text-sm flex-1">
+          {title && <span className="font-semibold block mb-0.5">{title}</span>}
+          <div className="leading-relaxed content-area">
+            {typeof children === 'string' ? (
+              <span dangerouslySetInnerHTML={{ __html: children }} />
+            ) : (
+              children
+            )}
+          </div>
+        </div>
+        {isDismissible && (
+          <button 
+            onClick={() => setVisible(false)}
+            className="close-btn p-1 -mt-1 -mr-1 rounded-lg text-current hover:bg-black/5 dark:hover:bg-white/5 opacity-60 hover:opacity-100 self-start transition-all" 
+            aria-label="Close Alert"
+          >
+            <i data-lucide="x" className="w-4 h-4"></i>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/CodeBlock.jsx

@@ -0,0 +1,41 @@
+import { useState } from 'preact/hooks';
+
+export default function CodeBlock({ language = 'plaintext', code = '' }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  };
+
+  // Re-run Lucide icons after rendering
+  if (window.lucide && typeof window.lucide.createIcons === 'function') {
+    setTimeout(() => window.lucide.createIcons(), 0);
+  }
+
+  return (
+    <div className="relative group my-4 rounded-xl overflow-hidden border border-slate-800 bg-slate-950 text-slate-200 font-mono text-sm shadow-md">
+      {/* Code Header bar */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-slate-900 bg-slate-900/60 text-xs text-slate-400 select-none">
+        <span className="font-semibold uppercase tracking-wider">{language}</span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 active:bg-slate-800 text-slate-350 hover:text-white transition-all focus:outline-none"
+        >
+          <i data-lucide={copied ? 'check' : 'copy'} className="w-3.5 h-3.5"></i>
+          <span>{copied ? 'Copied!' : 'Copy'}</span>
+        </button>
+      </div>
+      
+      {/* Code Area */}
+      <pre className="p-4 overflow-x-auto m-0 leading-relaxed font-mono text-xs sm:text-sm">
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}

package/template/src/Header.jsx

@@ -0,0 +1,131 @@
+import { useState, useEffect } from 'preact/hooks';
+
+export default function Header({
+  logoText = 'Dev',
+  logoHighlight = 'Docs',
+  logoHref = '#',
+  githubUrl = 'https://github.com',
+  searchPlaceholder = 'Tìm kiếm tài liệu...'
+}) {
+  const [isDark, setIsDark] = useState(false);
+
+  // Sync state with DOM on mount
+  useEffect(() => {
+    const hasDarkClass = document.documentElement.classList.contains('dark');
+    setIsDark(hasDarkClass);
+  }, []);
+
+  // Run Lucide icons rendering
+  if (window.lucide && typeof window.lucide.createIcons === 'function') {
+    setTimeout(() => window.lucide.createIcons(), 0);
+  }
+
+  const toggleTheme = () => {
+    const nextDark = !isDark;
+    setIsDark(nextDark);
+    
+    if (nextDark) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('color-theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('color-theme', 'light');
+    }
+
+    // Custom events/updates if chart or mermaid needs refresh
+    if (window.myChart) {
+      window.myChart.options.plugins.legend.labels.color = nextDark ? '#cbd5e1' : '#334155';
+      window.myChart.options.scales.y.grid.color = nextDark ? '#334155' : '#e2e8f0';
+      window.myChart.options.scales.y.ticks.color = nextDark ? '#cbd5e1' : '#334155';
+      window.myChart.options.scales.x.ticks.color = nextDark ? '#cbd5e1' : '#334155';
+      window.myChart.update();
+    }
+
+    if (typeof window.mermaid !== 'undefined' && typeof window.renderMermaid === 'function') {
+      window.renderMermaid();
+    }
+  };
+
+  const handleSidebarToggle = () => {
+    const sidebar = document.getElementById('sidebar');
+    const backdrop = document.getElementById('sidebar-backdrop');
+    if (sidebar) {
+      sidebar.classList.remove('-translate-x-full');
+    }
+    if (backdrop) {
+      backdrop.classList.remove('hidden');
+    }
+  };
+
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-slate-200/80 bg-white/80 backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-900/80 transition-colors duration-200">
+      <div className="max-w-[90rem] mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4">
+        
+        {/* Logo & Hamburger Menu (Mobile Only) */}
+        <div className="flex items-center gap-3">
+          <button
+            onClick={handleSidebarToggle}
+            id="mobile-sidebar-toggle"
+            className="p-2 -ml-2 rounded-lg text-slate-500 hover:text-slate-800 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-800 md:hidden transition-colors"
+            aria-label="Toggle navigation"
+          >
+            <i data-lucide="menu" className="w-6 h-6"></i>
+          </button>
+          
+          <a href={logoHref} className="flex items-center gap-2.5 font-bold text-lg tracking-tight text-slate-900 dark:text-white">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-brand-600 to-indigo-500 flex items-center justify-center text-white shadow-md shadow-brand-500/20">
+              <i data-lucide="book-open" className="w-4.5 h-4.5"></i>
+            </div>
+            <span>
+              {logoText}
+              <span className="text-brand-600 dark:text-brand-400">{logoHighlight}</span>
+            </span>
+          </a>
+        </div>
+
+        {/* Search Bar */}
+        <div className="hidden sm:flex flex-1 max-w-md relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <i data-lucide="search" className="h-4 w-4 text-slate-400"></i>
+          </div>
+          <input
+            type="text"
+            id="search-input"
+            placeholder={searchPlaceholder}
+            className="w-full rounded-full border border-slate-200 bg-slate-50/50 py-1.5 pl-9 pr-4 text-sm text-slate-900 placeholder-slate-400 focus:border-brand-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-slate-800 dark:bg-slate-900/50 dark:text-slate-100 dark:placeholder-slate-500 dark:focus:bg-slate-900 transition-all"
+          />
+          <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+            <kbd className="hidden md:inline-block rounded border border-slate-200 bg-white px-1.5 font-mono text-[10px] font-medium text-slate-400 dark:border-slate-800 dark:bg-slate-900">Ctrl K</kbd>
+          </div>
+        </div>
+
+        {/* Actions (Theme Toggle, Social Links) */}
+        <div className="flex items-center gap-2">
+          {/* Theme Toggle */}
+          <button
+            onClick={toggleTheme}
+            className="p-2.5 rounded-full text-slate-500 hover:text-slate-800 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-all"
+            aria-label="Toggle dark mode"
+          >
+            {isDark ? (
+              <i data-lucide="sun" className="w-5 h-5"></i>
+            ) : (
+              <i data-lucide="moon" className="w-5 h-5"></i>
+            )}
+          </button>
+
+          {/* GitHub */}
+          <a
+            href={githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="p-2.5 rounded-full text-slate-500 hover:text-slate-800 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-all"
+            aria-label="GitHub"
+          >
+            <i data-lucide="github" className="w-5 h-5"></i>
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}

package/template/src/Sidebar.jsx

@@ -0,0 +1,88 @@
+import { useEffect } from 'preact/hooks';
+
+export default function Sidebar({
+  mobileTitle = 'Điều hướng',
+  searchPlaceholder = 'Tìm kiếm...',
+  children
+}) {
+  
+  // Re-run Lucide icons after rendering
+  if (window.lucide && typeof window.lucide.createIcons === 'function') {
+    setTimeout(() => window.lucide.createIcons(), 0);
+  }
+
+  const handleSidebarClose = () => {
+    const sidebar = document.getElementById('sidebar');
+    const backdrop = document.getElementById('sidebar-backdrop');
+    if (sidebar) {
+      sidebar.classList.add('-translate-x-full');
+    }
+    if (backdrop) {
+      backdrop.classList.add('hidden');
+    }
+  };
+
+  // Close sidebar when clicking any navigation link (mobile only)
+  useEffect(() => {
+    const handleLinkClick = (e) => {
+      // Check if clicked element or parent has .nav-link class
+      const link = e.target.closest('.nav-link');
+      if (link) {
+        handleSidebarClose();
+      }
+    };
+
+    document.addEventListener('click', handleLinkClick);
+    return () => {
+      document.removeEventListener('click', handleLinkClick);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Backdrop for mobile */}
+      <div
+        id="sidebar-backdrop"
+        onClick={handleSidebarClose}
+        className="fixed inset-0 z-30 bg-slate-900/40 backdrop-blur-sm hidden md:hidden"
+      ></div>
+
+      {/* Main Sidebar Aside */}
+      <aside
+        id="sidebar"
+        className="fixed inset-y-0 left-0 z-30 w-64 bg-white border-r border-slate-200 dark:bg-slate-900 dark:border-slate-800 transform -translate-x-full md:translate-x-0 md:static md:z-0 md:h-[calc(100vh-4rem)] md:sticky md:top-16 transition-all duration-200 overflow-y-auto p-6 flex flex-col gap-6"
+      >
+        {/* Mobile Close Button & Search */}
+        <div className="flex items-center justify-between md:hidden pb-2 border-b border-slate-100 dark:border-slate-800">
+          <span className="font-bold text-slate-900 dark:text-white">{mobileTitle}</span>
+          <button
+            onClick={handleSidebarClose}
+            id="mobile-sidebar-close"
+            className="p-1 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+          >
+            <i data-lucide="x" className="w-5 h-5"></i>
+          </button>
+        </div>
+
+        {/* Mobile-only Search Box */}
+        <div className="sm:hidden relative">
+          <i data-lucide="search" className="absolute left-3 top-2.5 h-4 w-4 text-slate-400"></i>
+          <input
+            type="text"
+            placeholder={searchPlaceholder}
+            className="w-full rounded-lg border border-slate-200 bg-slate-50/50 py-2 pl-9 pr-4 text-sm focus:outline-none dark:border-slate-800 dark:bg-slate-900"
+          />
+        </div>
+
+        {/* Navigation Link Tree */}
+        <nav className="flex-1 flex flex-col gap-6 text-sm">
+          {typeof children === 'string' ? (
+            <div dangerouslySetInnerHTML={{ __html: children }} className="contents" />
+          ) : (
+            children
+          )}
+        </nav>
+      </aside>
+    </>
+  );
+}

package/template/src/index.js

@@ -0,0 +1,48 @@
+import register from 'preact-custom-element';
+import { render, h } from 'preact';
+import Alert from './Alert';
+import Accordion from './Accordion';
+import CodeBlock from './CodeBlock';
+import Header from './Header';
+import Sidebar from './Sidebar';
+
+// Register custom elements without Shadow DOM so they inherit Tailwind CSS from the host page
+register(Alert, 'mau-alert', ['type', 'title', 'dismissible', 'className', 'icon'], { shadow: false });
+register(Accordion, 'mau-accordion', ['title', 'open'], { shadow: false });
+register(CodeBlock, 'mau-code-block', ['language', 'code'], { shadow: false });
+register(Header, 'mau-header', ['logoText', 'logoHighlight', 'logoHref', 'githubUrl', 'searchPlaceholder'], { shadow: false });
+register(Sidebar, 'mau-sidebar', ['mobileTitle', 'searchPlaceholder'], { shadow: false });
+
+// Expose DevDocs helper methods to window for JS Functional rendering
+const DevDocs = {
+  Alert: (props) => {
+    const container = document.createElement('div');
+    const componentProps = { ...props };
+    render(h(Alert, componentProps), container);
+    return container.firstElementChild || container;
+  },
+  Accordion: (props) => {
+    const container = document.createElement('div');
+    render(h(Accordion, props), container);
+    return container.firstElementChild || container;
+  },
+  CodeBlock: (props) => {
+    const container = document.createElement('div');
+    render(h(CodeBlock, props), container);
+    return container.firstElementChild || container;
+  },
+  Header: (props) => {
+    const container = document.createElement('div');
+    render(h(Header, props), container);
+    return container.firstElementChild || container;
+  },
+  Sidebar: (props) => {
+    const container = document.createElement('div');
+    render(h(Sidebar, props), container);
+    return container.firstElementChild || container;
+  }
+};
+
+window.DevDocs = DevDocs;
+export { Alert, Accordion, CodeBlock, Header, Sidebar };
+

package/vite.config.js

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [preact()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'template/src/index.js'),
+      name: 'DevDocs',
+      fileName: () => 'components.js',
+      formats: ['iife']
+    },
+    outDir: resolve(__dirname, 'template'),
+    emptyOutDir: false,
+    rollupOptions: {
+      // We bundle everything (including preact) so the output is 100% self-contained
+    }
+  },
+  define: {
+    // Set process.env.NODE_ENV to production for Preact builds
+    'process.env.NODE_ENV': JSON.stringify('production')
+  }
+});