prev-cli 0.13.0 → 0.14.0

package/dist/cli.js

@@ -981,7 +981,7 @@ Usage:
   prev [options]              Start development server
   prev build [options]        Build for production
   prev preview [options]      Preview production build
-  prev create [name]          Create example preview (default: "example")
+  prev create [name]          Create preview in previews/<name>/ (default: "example")
   prev clean [options]        Remove old cache directories
 
 Options:
@@ -992,13 +992,13 @@ Options:
   -h, --help             Show this help message
 
 Previews:
-  Create interactive previews in your docs by adding React components
-  to the previews/ directory:
+  Previews must be in the previews/ directory at your project root.
+  Each preview is a subfolder with React components:
 
-    previews/
-      my-demo/
-        App.tsx          # React component (entry)
-        styles.css       # Optional CSS
+    previews/                # Required location
+      my-demo/               # Preview name (used in <Preview src="...">)
+        App.tsx              # React component (entry point)
+        styles.css           # Optional CSS
 
   Then embed in MDX:
     import { Preview } from '@prev/theme'
@@ -1021,6 +1021,8 @@ Previews:
   Previews are bundled via esbuild-wasm in dev, and pre-compiled
   to standalone HTML files in production builds.
 
+  Browse all previews at /previews (Storybook-like catalog).
+
 Examples:
   prev                       Start dev server on random port
   prev -p 3000               Start dev server on port 3000
@@ -1161,17 +1163,18 @@ export default function App() {
   writeFileSync3(path7.join(previewDir, "App.tsx"), appTsx);
   writeFileSync3(path7.join(previewDir, "styles.css"), stylesCss);
   console.log(`
-  ✨ Created preview: ${name}
+  ✨ Created preview: previews/${name}/
 
   Files:
-    previews/${name}/App.tsx      React component
-    previews/${name}/styles.css   Custom styles
+    previews/${name}/App.tsx      React component (entry point)
+    previews/${name}/styles.css   Custom animations
 
-  Usage in MDX:
+  Embed in your MDX:
     import { Preview } from '@prev/theme'
     <Preview src="${name}" />
 
-  Run 'prev' to start the dev server and see it in action.
+  Start dev server:
+    prev
 `);
 }
 async function main() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",

package/src/theme/entry.tsx

@@ -9,6 +9,8 @@ import {
 } from '@tanstack/react-router'
 import { MDXProvider } from '@mdx-js/react'
 import { pages, sidebar } from 'virtual:prev-pages'
+import { previews } from 'virtual:prev-previews'
+import { Preview } from './Preview'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
 import { MetadataBlock } from './MetadataBlock'
@@ -83,6 +85,92 @@ function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta
   )
 }
 
+// Previews catalog - Storybook-like gallery
+function PreviewsCatalog() {
+  if (!previews || previews.length === 0) {
+    return (
+      <div style={{ padding: '40px 20px', textAlign: 'center' }}>
+        <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
+          No Previews Found
+        </h1>
+        <p style={{ color: '#666', marginBottom: '24px' }}>
+          Create your first preview with:
+        </p>
+        <code style={{
+          display: 'inline-block',
+          padding: '12px 20px',
+          backgroundColor: '#f4f4f5',
+          borderRadius: '8px',
+          fontFamily: 'monospace',
+        }}>
+          prev create my-demo
+        </code>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px' }}>
+          Previews
+        </h1>
+        <p style={{ color: '#666' }}>
+          {previews.length} component preview{previews.length !== 1 ? 's' : ''} available
+        </p>
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))',
+        gap: '24px',
+      }}>
+        {previews.map((preview: { name: string; route: string }) => (
+          <div key={preview.name} style={{
+            border: '1px solid #e4e4e7',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            backgroundColor: '#fff',
+          }}>
+            <div style={{
+              padding: '12px 16px',
+              borderBottom: '1px solid #e4e4e7',
+              backgroundColor: '#fafafa',
+            }}>
+              <h2 style={{ fontSize: '16px', fontWeight: 600, margin: 0 }}>
+                {preview.name}
+              </h2>
+              <code style={{
+                fontSize: '12px',
+                color: '#666',
+                fontFamily: 'monospace',
+              }}>
+                previews/{preview.name}/
+              </code>
+            </div>
+            <Preview src={preview.name} height={300} />
+          </div>
+        ))}
+      </div>
+
+      <div style={{
+        marginTop: '40px',
+        padding: '16px',
+        backgroundColor: '#f0f9ff',
+        border: '1px solid #bae6fd',
+        borderRadius: '8px',
+      }}>
+        <p style={{ margin: 0, fontSize: '14px', color: '#0369a1' }}>
+          <strong>Tip:</strong> Embed any preview in your MDX docs with{' '}
+          <code style={{ backgroundColor: '#e0f2fe', padding: '2px 6px', borderRadius: '4px' }}>
+            {'<Preview src="name" />'}
+          </code>
+        </p>
+      </div>
+    </div>
+  )
+}
+
 // Root layout with custom lightweight Layout
 function RootLayout() {
   const pageTree = convertToPageTree(sidebar)
@@ -101,6 +189,13 @@ const rootRoute = createRootRoute({
   component: RootLayout,
 })
 
+// Previews catalog route
+const previewsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/previews',
+  component: PreviewsCatalog,
+})
+
 // Create routes from pages
 const pageRoutes = pages.map((page: { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> }) => {
   const Component = getPageComponent(page.file)
@@ -117,7 +212,7 @@ const pageRoutes = pages.map((page: { route: string; file: string; title?: strin
 })
 
 // Create router
-const routeTree = rootRoute.addChildren(pageRoutes)
+const routeTree = rootRoute.addChildren([previewsRoute, ...pageRoutes])
 const router = createRouter({ routeTree })
 
 // Mount app - RouterProvider must be outermost so TanStack Router context is available