design-folio 0.1.0

package/src/icons.jsx

@@ -0,0 +1,261 @@
+const svgProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+};
+
+export function SunIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="M4.93 4.93l1.41 1.41" />
+      <path d="M17.66 17.66l1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="M6.34 17.66l-1.41 1.41" />
+      <path d="M19.07 4.93l-1.41 1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+export function PlayIcon({ className }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M8 5v14l11-7z" />
+    </svg>
+  );
+}
+
+export function GridIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+    </svg>
+  );
+}
+
+export function ClockIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+export function LinkIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}
+
+export function LayersIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <polygon points="12 2 2 7 12 12 22 7 12 2" />
+      <polyline points="2 17 12 22 22 17" />
+      <polyline points="2 12 12 17 22 12" />
+    </svg>
+  );
+}
+
+export function ChatIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+export function RowsIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="3" y="4" width="18" height="4" rx="1" />
+      <rect x="3" y="10" width="18" height="4" rx="1" />
+      <rect x="3" y="16" width="18" height="4" rx="1" />
+    </svg>
+  );
+}
+
+export function GridSmallIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="3" y="3" width="8" height="8" rx="1" />
+      <rect x="13" y="3" width="8" height="8" rx="1" />
+      <rect x="3" y="13" width="8" height="8" rx="1" />
+      <rect x="13" y="13" width="8" height="8" rx="1" />
+    </svg>
+  );
+}
+
+export function MinusIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  );
+}
+
+export function PlusIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  );
+}
+
+export function MaximizeIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <polyline points="15 3 21 3 21 9" />
+      <polyline points="9 21 3 21 3 15" />
+      <line x1="21" y1="3" x2="14" y2="10" />
+      <line x1="3" y1="21" x2="10" y2="14" />
+    </svg>
+  );
+}
+
+export function ExternalLinkIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+  );
+}
+
+export function DocumentIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </svg>
+  );
+}
+
+export function ChevronLeftIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+  );
+}
+
+export function ChevronRightIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <polyline points="9 6 15 12 9 18" />
+    </svg>
+  );
+}
+
+export function ImageIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <polyline points="21 15 16 10 5 21" />
+    </svg>
+  );
+}
+
+export function SquareIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+    </svg>
+  );
+}
+
+export function SpreadsheetIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="8" y1="13" x2="16" y2="13" />
+      <line x1="8" y1="17" x2="16" y2="17" />
+      <line x1="12" y1="9" x2="12" y2="21" />
+    </svg>
+  );
+}
+
+export function PresentationIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+    </svg>
+  );
+}
+
+export function PenToolIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M12 19l7-7 3 3-7 7-3-3z" />
+      <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
+      <path d="M2 2l7.586 7.586" />
+      <circle cx="11" cy="11" r="2" />
+    </svg>
+  );
+}
+
+export function VideoIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <polygon points="23 7 16 12 23 17 23 7" />
+      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+    </svg>
+  );
+}
+
+export function FileIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+export function ExternalWindowIcon({ className }) {
+  return (
+    <svg {...svgProps} className={className}>
+      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+    </svg>
+  );
+}

package/src/index.js

@@ -0,0 +1 @@
+export { default as FolioViewer } from './viewer/FolioViewer.jsx';

package/src/plugin/vite-plugin.js

@@ -0,0 +1,57 @@
+import { readFileSync, existsSync } from 'fs';
+import { resolve } from 'path';
+
+const VIRTUAL_ENTRY_ID = 'virtual:folio-entry';
+const RESOLVED_VIRTUAL_ENTRY_ID = '\0' + VIRTUAL_ENTRY_ID;
+
+export default function folioPlugin(options = {}) {
+  let projectRoot;
+
+  return {
+    name: 'vite-plugin-folio',
+
+    configResolved(config) {
+      projectRoot = config.root;
+    },
+
+    resolveId(id) {
+      if (id === VIRTUAL_ENTRY_ID) {
+        return RESOLVED_VIRTUAL_ENTRY_ID;
+      }
+    },
+
+    load(id) {
+      if (id !== RESOLVED_VIRTUAL_ENTRY_ID) return;
+
+      const configPath = resolve(projectRoot, 'folio.json');
+      let config = {};
+      if (existsSync(configPath)) {
+        config = JSON.parse(readFileSync(configPath, 'utf-8'));
+      }
+
+      const componentPath = config.component || './src/App.jsx';
+
+      return `
+        import React from 'react';
+        import { createRoot } from 'react-dom/client';
+        import { FolioViewer } from 'design-folio';
+        import 'design-folio/styles';
+        import App from '${componentPath}';
+
+        const config = ${JSON.stringify(config)};
+
+        createRoot(document.getElementById('root')).render(
+          React.createElement(FolioViewer, { config }, React.createElement(App))
+        );
+      `;
+    },
+
+    config() {
+      return {
+        optimizeDeps: {
+          include: ['react', 'react-dom'],
+        },
+      };
+    },
+  };
+}

package/src/styles/folio.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@source "../";
+@custom-variant dark (&:where(.dark, .dark *));

package/src/viewer/ChangelogTab.jsx

@@ -0,0 +1,38 @@
+import { ClockIcon } from '../icons.jsx';
+
+function formatDate(dateStr) {
+  const date = new Date(dateStr + 'T00:00:00');
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+export default function ChangelogTab({ changelog }) {
+  return (
+    <section
+      role="tabpanel"
+      aria-label="Changelog"
+      className="flex-1 p-5 bg-neutral-50 dark:bg-neutral-950 overflow-auto h-full"
+    >
+      <div className="max-w-2xl">
+        {changelog.length === 0 ? (
+          <p className="text-sm text-neutral-700 dark:text-neutral-300">No changelog entries yet.</p>
+        ) : (
+          changelog.map(({ date, entries }) => (
+            <section key={date} id={`date-${date}`} className="mb-6">
+              <h2 className="flex items-center gap-2 text-sm font-semibold text-black dark:text-white mb-3">
+                <ClockIcon className="w-4 h-4" />
+                {formatDate(date)}
+              </h2>
+              <ul>
+                {entries.map((entry, i) => (
+                  <li key={i} className="text-sm text-neutral-700 dark:text-neutral-300">
+                    {entry}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

package/src/viewer/DesignNotes.jsx

@@ -0,0 +1,18 @@
+import { ChatIcon } from '../icons.jsx';
+
+export default function DesignNotes({ notes }) {
+  if (!notes) return null;
+
+  return (
+    <aside
+      aria-label="Design notes"
+      className="mt-3 p-4 w-full bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-md"
+    >
+      <h2 className="flex items-center gap-1.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">
+        <ChatIcon className="w-3.5 h-3.5" />
+        Design Notes
+      </h2>
+      <p className="text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">{notes}</p>
+    </aside>
+  );
+}

package/src/viewer/DocumentsTab.jsx

@@ -0,0 +1,76 @@
+import { DocumentIcon, SpreadsheetIcon, PresentationIcon, PenToolIcon, VideoIcon, ImageIcon, FileIcon } from '../icons.jsx';
+
+/**
+ * Maps a URL or label to a document type icon.
+ * Falls back to FileIcon (generic) if no match.
+ */
+function getDocIcon(url, label) {
+  const lower = (url + ' ' + label).toLowerCase();
+
+  // Design tools
+  if (lower.includes('figma') || lower.includes('sketch') || lower.includes('framer') || lower.includes('penpot'))
+    return PenToolIcon;
+
+  // Spreadsheets
+  if (lower.includes('sheets') || lower.includes('airtable') || lower.includes('spreadsheet') || lower.includes('.csv') || lower.includes('.xlsx'))
+    return SpreadsheetIcon;
+
+  // Presentations
+  if (lower.includes('slides') || lower.includes('pitch') || lower.includes('keynote') || lower.includes('presentation') || lower.includes('.pptx'))
+    return PresentationIcon;
+
+  // Video
+  if (lower.includes('loom') || lower.includes('youtube') || lower.includes('vimeo') || lower.includes('video') || lower.includes('.mp4'))
+    return VideoIcon;
+
+  // Images
+  if (lower.includes('.png') || lower.includes('.jpg') || lower.includes('.svg') || lower.includes('screenshot') || lower.includes('moodboard'))
+    return ImageIcon;
+
+  // Documents (Notion, Google Docs, Confluence, etc.)
+  if (lower.includes('notion') || lower.includes('docs.google') || lower.includes('confluence') || lower.includes('prd') || lower.includes('spec') || lower.includes('requirements') || lower.includes('.pdf') || lower.includes('.docx'))
+    return DocumentIcon;
+
+  // Generic fallback
+  return FileIcon;
+}
+
+export default function DocumentsTab({ links }) {
+  return (
+    <section
+      role="tabpanel"
+      aria-label="Documents"
+      className="flex-1 p-5 bg-neutral-50 dark:bg-neutral-950 overflow-auto h-full"
+    >
+      <div className="max-w-2xl">
+        {links.length === 0 ? (
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            No documents linked yet.
+          </p>
+        ) : (
+          <ul className="space-y-3">
+            {links.map(({ label, url }) => {
+              const Icon = getDocIcon(url, label);
+              return (
+                <li key={url}>
+                  <a
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 p-4 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl hover:border-neutral-400 dark:hover:border-neutral-500 transition-colors"
+                  >
+                    <Icon className="w-5 h-5 text-neutral-400 dark:text-neutral-500 shrink-0" />
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-black dark:text-white">{label}</p>
+                      <p className="text-xs text-neutral-500 dark:text-neutral-400 truncate">{url}</p>
+                    </div>
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/viewer/FolioViewer.jsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { mergeConfig } from '../config/load-config.js';
+import { useTheme } from '../hooks/useTheme.js';
+import { useHashRoute } from '../hooks/useHashRoute.js';
+import Header from './Header.jsx';
+import TabNav from './TabNav.jsx';
+import PrototypeTab from './PrototypeTab.jsx';
+import ScreensTab from './ScreensTab.jsx';
+import GalleryView from './GalleryView.jsx';
+import ChangelogTab from './ChangelogTab.jsx';
+import DocumentsTab from './DocumentsTab.jsx';
+import Sidebar from './Sidebar.jsx';
+import '../styles/folio.css';
+
+export default function FolioViewer({ config: userConfig, children }) {
+  const config = mergeConfig(userConfig);
+  const { theme, isDark, toggleTheme } = useTheme();
+  const { tab, stateKey, navigateTo, navigateToTab, navigateToScreen } = useHashRoute();
+  const [uiHidden, setUiHidden] = useState(false);
+
+  // Derive view mode: gallery when on screens tab with a state key
+  const isGallery = tab === 'screens' && stateKey !== null;
+  const viewMode = isGallery ? 'gallery' : 'grid';
+
+  // Active key for gallery view — fall back to first state
+  const galleryKey = (isGallery && config.states.find((s) => s.key === stateKey))
+    ? stateKey
+    : config.states[0]?.key || null;
+
+  function handleScrollToScreen(key) {
+    // scrollIntoView doesn't work with CSS-transformed containers.
+    // Instead, dispatch a custom event that ScreensTab listens for.
+    window.dispatchEvent(new CustomEvent('folio:scroll-to-screen', { detail: { key } }));
+  }
+
+  function handleSelectDate(date) {
+    const el = document.getElementById(`date-${date}`);
+    if (el) el.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  function handleTabChange(newTab) {
+    setUiHidden(false);
+    navigateToTab(newTab);
+  }
+
+  function handleToggleView(mode) {
+    if (mode === 'gallery') {
+      navigateToScreen(galleryKey);
+    } else {
+      navigateToTab('screens');
+    }
+  }
+
+  function handleSidebarSelectState(key) {
+    if (isGallery) {
+      navigateToScreen(key);
+    } else {
+      handleScrollToScreen(key);
+    }
+  }
+
+  // Determine if sidebar should show
+  const showSidebar = (tab === 'prototype' || tab === 'screens' || tab === 'changelog') && !(uiHidden && tab === 'screens');
+
+  return (
+    <div className="flex flex-col h-screen bg-neutral-50 dark:bg-neutral-950">
+      {!(uiHidden && tab === 'screens') && (
+        <>
+          <Header
+            name={config.name}
+            designer={config.designer}
+            updatedAt={config.updatedAt}
+            isDark={isDark}
+            onToggleTheme={toggleTheme}
+          />
+          <TabNav activeTab={tab} onTabChange={handleTabChange} />
+        </>
+      )}
+      <div className="flex flex-1 overflow-hidden">
+        {showSidebar && (
+          <Sidebar
+            tab={tab}
+            name={config.name}
+            states={config.states}
+            activeKey={isGallery ? galleryKey : null}
+            onSelectState={handleSidebarSelectState}
+            changelog={config.changelog}
+            onSelectDate={handleSelectDate}
+            description={config.description}
+            prototypeUrl={config.prototypeUrl}
+          />
+        )}
+        <div className="flex-1 overflow-hidden">
+          {tab === 'prototype' && (
+            <PrototypeTab
+              viewport={config.viewport}
+              syncTheme={config.syncTheme}
+              isDark={isDark}
+            >
+              {children}
+            </PrototypeTab>
+          )}
+          {tab === 'screens' && !isGallery && (
+            <ScreensTab
+              states={config.states}
+              viewport={config.viewport}
+              syncTheme={config.syncTheme}
+              isDark={isDark}
+              onNavigateToState={(key) => navigateToScreen(key)}
+              uiHidden={uiHidden}
+              onToggleUI={() => setUiHidden((v) => !v)}
+              viewMode={viewMode}
+              onToggleView={handleToggleView}
+            >
+              {children}
+            </ScreensTab>
+          )}
+          {tab === 'screens' && isGallery && (
+            <GalleryView
+              states={config.states}
+              activeKey={galleryKey}
+              viewport={config.viewport}
+              syncTheme={config.syncTheme}
+              isDark={isDark}
+              onNavigateToScreen={navigateToScreen}
+              viewMode={viewMode}
+              onToggleView={handleToggleView}
+              uiHidden={uiHidden}
+              onToggleUI={() => setUiHidden((v) => !v)}
+            >
+              {children}
+            </GalleryView>
+          )}
+          {tab === 'changelog' && <ChangelogTab changelog={config.changelog} />}
+          {tab === 'documents' && <DocumentsTab links={config.links} />}
+        </div>
+      </div>
+    </div>
+  );
+}