diff --git a/.gitignore b/.gitignore index 160b1bb6b..24118ce86 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ _site .cache dist node_modules +.worktrees diff --git a/docs/pages/examples/analytics/dashboard.md b/docs/pages/examples/analytics/dashboard.md new file mode 100644 index 000000000..8ae606219 --- /dev/null +++ b/docs/pages/examples/analytics/dashboard.md @@ -0,0 +1,170 @@ +--- +meta: + title: Analytics Dashboard + description: Data visualization dashboard with multiple chart types and metrics. +fullWidth: true +--- + +# Analytics Dashboard + +A data-rich analytics dashboard with various chart types and KPI metrics. Demonstrates `zn-chart`, `zn-stat`, `zn-datepicker`, and visualization layouts. + +```html:preview + + + +
+

Analytics Overview

+
+ + Refresh + Export +
+
+ + +
+ + + + + + + + +
+ + +
+ + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PageViewsBounceAvg. Time
/products24,52135.2%3:42
/pricing18,34728.1%5:15
/features15,89242.3%2:58
/blog12,45655.8%4:21
/contact8,23422.4%2:12
+ + + +
+ Live +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + +``` + +**Components demonstrated:** `zn-chart`, `zn-stat`, `zn-datepicker`, `zn-data-table`, `zn-panel`, `zn-cols`, `zn-item`, `zn-status-indicator` diff --git a/docs/pages/examples/analytics/report-builder.md b/docs/pages/examples/analytics/report-builder.md new file mode 100644 index 000000000..d0979d5c6 --- /dev/null +++ b/docs/pages/examples/analytics/report-builder.md @@ -0,0 +1,178 @@ +--- +meta: + title: Report Builder + description: Custom report builder with query interface and chart preview. +fullWidth: true +--- + +# Report Builder + +A custom report creation interface with query builder, chart selection, and live preview. Demonstrates `zn-query-builder`, chart configuration, and builder patterns. + +```html:preview + + + +
+
+ +
+

New Report

+ Untitled Report +
+
+
+ Save Draft + Export +
+
+ + + +
+ + + + Orders + Customers + Products + Website Traffic + + + + + + + Last 7 days + Last 30 days + Last 90 days + Year to date + Custom range + + + Hourly + Daily + Weekly + Monthly + + + + + + + Revenue + Order Count + Avg. Order Value + Customers + Units Sold + + + + + + No grouping + Sales Channel + Product Category + Region + Customer Type + + + + + +
+ + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + + Order Status + Channel + Amount + + + equals + not equals + contains + + + Completed + Pending + Cancelled + + + + + Order Status + Channel + Amount + + + equals + greater than + less than + + + + + + + + + + + + + + + + + + + + + + + +
+ Export PDF + Export CSV + Export PNG + Schedule Report +
+ + + + + + +``` + +**Components demonstrated:** `zn-query-builder`, `zn-query-builder-group`, `zn-query-builder-rule`, `zn-chart`, `zn-stat`, `zn-select`, `zn-checkbox-group`, `zn-toggle`, `zn-button-group`, `zn-sidebar`, `zn-panel` diff --git a/docs/pages/examples/crm/contact-detail.md b/docs/pages/examples/crm/contact-detail.md new file mode 100644 index 000000000..bc8452444 --- /dev/null +++ b/docs/pages/examples/crm/contact-detail.md @@ -0,0 +1,226 @@ +--- +meta: + title: Contact Detail + description: CRM contact profile with activity timeline and tabbed sections. +fullWidth: true +--- + +# Contact Detail + +A 360-degree customer view showing contact information, activity timeline, deals, and notes. Demonstrates `zn-tabs`, `zn-vertical-stepper`, and data layouts. + +```html:preview + + + +
+
+
+ +
+

Sarah Johnson

+
VP of Operations at Acme Corp
+
+ VIP + Customer +
+
+
+
+ Email + Call + Edit Contact +
+
+ + + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ Enterprise + Decision Maker + Q1 Target + Add Tag +
+ +
+ + + + + + +
  • Activity
    • +
  • Deals
    • +
  • Notes
    • +
  • Files
    • +     + + +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    + + + + + 40% + + + 60% + + + + + + + + Won + + + Won + + + Won + + + Won + + + Won + + + + +
    + + +
    +
    + +
    + Add Note +
    +
    + + + +
    + Quarterly review follow-up + Jan 28, 2026 by Michael C. +
    +

    Sarah expressed interest in expanding to 3 more departments. She mentioned budget approval happens in Q2. Set reminder to follow up in March.

    +     + + +
    + Initial meeting notes + Jan 20, 2026 by Sarah W. +
    +

    Key decision maker for operations tools. Reports to COO. Currently using competitor but unhappy with support response times. Budget: $50-75k annually.

    +     + + +
    + Product demo feedback + Dec 15, 2025 by Michael C. +
    +

    Very impressed with the reporting features. Asked about custom integrations with their ERP system. Sent technical documentation.

    +     +     +
    + + +
    +
    + Drop files here or click to upload +
    + + + + + + + + + + + + + + + + + + + + + +
    +     +     +     +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-vertical-stepper`, `zn-vertical-stepper-item`, `zn-sidebar`, `zn-stat`, `zn-panel`, `zn-item`, `zn-chip`, `zn-editor`, `zn-file` diff --git a/docs/pages/examples/crm/contacts.md b/docs/pages/examples/crm/contacts.md new file mode 100644 index 000000000..7962ae645 --- /dev/null +++ b/docs/pages/examples/crm/contacts.md @@ -0,0 +1,252 @@ +--- +meta: + title: Contact List + description: CRM contact database with inline editing and filters. +fullWidth: true +--- + +# Contact List + +A customer database interface with inline editing, company information, and activity tracking. Demonstrates `zn-data-table`, `zn-inline-edit`, and filtering patterns. + +```html:preview + + + +
    +

    Contacts

    +
    + Export + Add Contact +
    +
    + + + +
    + + + All companies + Acme Corp + Globex Inc + Initech + + + All tags + VIP + Lead + Customer + + + Any time + Today + This week + This month + Older + +
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameCompanyEmailPhoneTagsLast Contact
    +
    + + +
    +     		+ + + + + + +
    + VIP + Customer +
    +     		Today + + + + View Profile + Add Note + Create Deal + Delete + + +
    +
    + + +
    +     		+ + + + + + +
    + Lead +
    +     		Yesterday + + + + View Profile + Add Note + Create Deal + Delete + + +
    +
    + + +
    +     		+ + + + + + +
    + Customer +
    +     		3 days ago + + + + View Profile + Add Note + Create Deal + Delete + + +
    +
    + + +
    +     		+ + + + + + +
    + VIP + Customer +
    +     		1 week ago + + + + View Profile + Add Note + Create Deal + Delete + + +
    +
    + + +
    +     		+ + + + + + +
    + Lead +
    +     		2 weeks ago + + + + View Profile + Add Note + Create Deal + Delete + + +
    +     +     + + +
    + Showing 1-5 of 128 contacts + +
    +     +     +``` + +**Components demonstrated:** `zn-data-table`, `zn-inline-edit`, `zn-pagination`, `zn-input`, `zn-select`, `zn-dropdown`, `zn-menu`, `zn-menu-item`, `zn-chip` diff --git a/docs/pages/examples/crm/pipeline.md b/docs/pages/examples/crm/pipeline.md new file mode 100644 index 000000000..46a1cbfbb --- /dev/null +++ b/docs/pages/examples/crm/pipeline.md @@ -0,0 +1,238 @@ +--- +meta: + title: Deal Pipeline + description: Sales pipeline with kanban-style stages and deal cards. +fullWidth: true +--- + +# Deal Pipeline + +A sales pipeline view showing deals organized by stage with value summaries. Demonstrates kanban-style layouts using `zn-cols`, `zn-panel`, and summary statistics. + +```html:preview + + + +
    +
    +

    Sales Pipeline

    + New Deal +
    + + + + + + +
    + + +
    + +
    + +
    + 4 + $125,000 +
    + + +
    +
    + Acme Corp - Enterprise +
    Sarah Johnson
    +
    + 20% +
    +
    $50,000
    +
    Created 2 days ago
    +     + +
    +
    + TechStart Initial +
    Michael Chen
    +
    + 20% +
    +
    $25,000
    +
    Created 5 days ago
    +     + +
    +
    + Globex Expansion +
    Emma Thompson
    +
    + 20% +
    +
    $35,000
    +
    Created 1 week ago
    +     + +
    +
    + Initech Pilot +
    James Rodriguez
    +
    + 20% +
    +
    $15,000
    +
    Created 1 week ago
    +     +     +     +
    + + +
    + +
    + 3 + $180,000 +
    + + +
    +
    + MegaCorp Platform +
    Sarah Johnson
    +
    + 40% +
    +
    $80,000
    +
    Meeting scheduled
    +     + +
    +
    + DataFlow Annual +
    Michael Chen
    +
    + 40% +
    +
    $60,000
    +
    Demo completed
    +     + +
    +
    + CloudSync Basic +
    Emma Thompson
    +
    + 40% +
    +
    $40,000
    +
    Requirements gathering
    +     +     +     +
    + + +
    + +
    + 2 + $175,000 +
    + + +
    +
    + Enterprise Solutions +
    James Rodriguez
    +
    + 60% +
    +
    $100,000
    +
    Proposal sent
    +     + +
    +
    + Retail Pro Bundle +
    Sarah Johnson
    +
    + 60% +
    +
    $75,000
    +
    Under review
    +     +     +     +
    + + +
    + +
    + 2 + $165,000 +
    + + +
    +
    + FinanceHub Premium +
    Michael Chen
    +
    + 80% +
    +
    $90,000
    +
    Contract review
    +     + +
    +
    + LogiTech Suite +
    Emma Thompson
    +
    + 80% +
    +
    $75,000
    +
    Final terms
    +     +     +     +
    + + +
    + +
    + 2 + $202,500 +
    + + +
    +
    + HealthCare Plus +
    James Rodriguez
    +
    + Won +
    +
    $120,000
    +
    Closed Jan 28
    +     + +
    +
    + EduTech License +
    Sarah Johnson
    +
    + Won +
    +
    $82,500
    +
    Closed Jan 25
    +     +     +     +
    +
    +     +     +``` + +**Components demonstrated:** `zn-panel`, `zn-stat`, `zn-chip`, `zn-sp`, `zn-cols`, `zn-button` diff --git a/docs/pages/examples/dashboard.md b/docs/pages/examples/dashboard.md new file mode 100644 index 000000000..4f59cf809 --- /dev/null +++ b/docs/pages/examples/dashboard.md @@ -0,0 +1,115 @@ +--- +meta: + title: Main Dashboard + description: Overview dashboard with stats, charts, and activity feed demonstrating Zinc components. +fullWidth: true +--- + +# Main Dashboard + +A typical SaaS dashboard showing key metrics, trends, and recent activity. Demonstrates `zn-stat`, `zn-chart`, `zn-data-table`, and `zn-panel` components. + +```html:preview + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OrderCustomerTotalStatus
    #1284Sarah Wilson$234.50Delivered
    #1283Michael Chen$89.00Shipped
    #1282Emma Thompson$156.25Processing
    #1281James Rodriguez$412.00Delivered
    #1280Lisa Park$67.80Shipped
    +     +     + + + + + + + + + + + + + + + + + + + +     +     +     +``` + +**Components demonstrated:** `zn-pane`, `zn-sp`, `zn-cols`, `zn-stat`, `zn-panel`, `zn-chart`, `zn-data-table`, `zn-chip`, `zn-item`, `zn-icon` diff --git a/docs/pages/examples/ecommerce/catalog.md b/docs/pages/examples/ecommerce/catalog.md new file mode 100644 index 000000000..7c765fcad --- /dev/null +++ b/docs/pages/examples/ecommerce/catalog.md @@ -0,0 +1,198 @@ +--- +meta: + title: Product Catalog + description: E-commerce product catalog with filters, grid view, and pagination. +fullWidth: true +--- + +# Product Catalog + +A product browsing interface with sidebar filters, grid/list toggle, and product cards. Demonstrates `zn-sidebar`, `zn-tile`, `zn-checkbox-group`, and `zn-pagination`. + +```html:preview + + +
    +

    Filters

    + + + + + Electronics + Clothing + Home & Garden + Sports + + + + + + + + + + + + + + + All + In Stock + Low Stock + Out of Stock + + + + + + 4 stars & up + 3 stars & up + 2 stars & up + + + + Clear All Filters + +
    + + + + + +
    +
    +

    Products

    + Showing 1-12 of 156 products +
    +
    + + + Newest First + Price: Low to High + Price: High to Low + Most Popular + + + + + +
    +
    + + + + 4 selected + Publish + Archive + Delete + + + + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + Low Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + Out of Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + Low Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     +     + + +
    + +
    +     +     +     +``` + +**Components demonstrated:** `zn-sidebar`, `zn-tile`, `zn-tile-property`, `zn-checkbox-group`, `zn-checkbox`, `zn-radio-group`, `zn-radio`, `zn-pagination`, `zn-bulk-actions`, `zn-rating`, `zn-button-group` diff --git a/docs/pages/examples/ecommerce/orders.md b/docs/pages/examples/ecommerce/orders.md new file mode 100644 index 000000000..495f115f3 --- /dev/null +++ b/docs/pages/examples/ecommerce/orders.md @@ -0,0 +1,181 @@ +--- +meta: + title: Order Management + description: E-commerce order list with status indicators and detail slideout. +fullWidth: true +--- + +# Order Management + +An order management interface showing orders with status, filters, and a detail slideout. Demonstrates `zn-data-table`, `zn-slideout`, and `zn-vertical-stepper`. + +```html:preview + + + +
    +

    Orders

    + Export +
    + + + +
    + + + All + Pending + Processing + Shipped + Delivered + Cancelled + + +
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OrderCustomerItemsTotalStatusDate
    #1284Sarah Wilson3 items$234.50DeliveredFeb 1, 2026View
    #1283Michael Chen1 item$89.00ShippedFeb 1, 2026View
    #1282Emma Thompson2 items$156.25ProcessingJan 31, 2026View
    #1281James Rodriguez5 items$412.00DeliveredJan 30, 2026View
    #1280Lisa Park1 item$67.80CancelledJan 30, 2026View
    #1279David Kim2 items$198.50PendingJan 29, 2026View
    +     +     + + +
    + Showing 1-6 of 1,284 orders + +
    +     +     + + + + + + + + + + + +
    + 123 Main Street
    + San Francisco, CA 94102
    + United States +
    +     +     +     + + + + + + $89.00 + + +
    +
    + Subtotal + $89.00 +
    +
    + Shipping + Free +
    +
    + Total + $89.00 +
    +
    +     + + + + + + + + + + +     + +
    + Refund + Cancel Order + Resend Confirmation +
    +     +``` + +**Components demonstrated:** `zn-data-table`, `zn-slideout`, `zn-vertical-stepper`, `zn-vertical-stepper-item`, `zn-datepicker`, `zn-chip`, `zn-pagination`, `zn-panel`, `zn-item` diff --git a/docs/pages/examples/ecommerce/product-editor.md b/docs/pages/examples/ecommerce/product-editor.md new file mode 100644 index 000000000..79a3e73d3 --- /dev/null +++ b/docs/pages/examples/ecommerce/product-editor.md @@ -0,0 +1,228 @@ +--- +meta: + title: Product Editor + description: Complex multi-tab form for editing product data with rich text editor. +fullWidth: true +--- + +# Product Editor + +A comprehensive product editing form with multiple tabs covering all product attributes. Demonstrates `zn-tabs`, `zn-editor`, `zn-file`, and complex form layouts. + +```html:preview + + + +
    +
    + +
    +

    Edit Product

    + Wireless Headphones Pro +
    +
    +
    + Discard + Save Changes +
    +
    + + + + + +
  • Details
    • +
  • Media
    • +
  • Inventory
    • +
  • Pricing
    • +
  • SEO
    • +     + + +
    + + + + +
    + + +

    Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, 30-hour battery life, and ultra-comfortable ear cushions.

    +
      +
    • Active Noise Cancellation
      • +
    • 30-hour battery life
      • +
    • Premium memory foam ear cushions
      • +
    • Bluetooth 5.2 connectivity
      • +
    +     +
    + + + + Electronics + Clothing + Home & Garden + + + ACME Audio + Sonic + Beats + + + +
    + + + Wireless + Bluetooth + Noise Cancelling + Premium + New Arrival + +
    +     + + + + + + Published + Draft + Archived + + + + + + + +     +
    + + +
    + +
    + + + Drag and drop images here, or click to browse + +
    + + + +
    + + Primary + +
    +
    + + +
    +
    + + +
    +     +     +     +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + Standard Rate + Reduced Rate + Zero Rate + + + + + +
    + + +
    + + +
    +
    Wireless Headphones Pro - ACME Audio
    +
    https://store.example.com/products/wireless-headphones-pro
    +
    Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, 30-hour battery life...
    +
    +     + + + + + Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, 30-hour battery life, and ultra-comfortable ear cushions. + + + + + + + +     +
    +     +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-editor`, `zn-file`, `zn-input`, `zn-textarea`, `zn-select`, `zn-checkbox-group`, `zn-toggle`, `zn-datepicker`, `zn-panel`, `zn-item`, `zn-cols` diff --git a/docs/pages/examples/index.md b/docs/pages/examples/index.md new file mode 100644 index 000000000..1a14c3e4e --- /dev/null +++ b/docs/pages/examples/index.md @@ -0,0 +1,56 @@ +--- +meta: + title: Kitchen Sink Examples + description: Comprehensive example pages showcasing Zinc UI components in real-world layouts. +--- + +# Kitchen Sink Examples + +These examples demonstrate how to combine Zinc components into complete, production-ready interfaces. Each example showcases different layout patterns, component combinations, and design approaches. + +## Generic SaaS + +| Example | Description | +|---------|-------------| +| [Main Dashboard](/examples/dashboard) | Overview with stats, charts, and activity feed | +| [Settings](/examples/settings) | Account configuration with tabs and forms | +| [User Management](/examples/users) | CRUD table with filters and bulk actions | +| [Notifications](/examples/notifications) | Activity center with tabs and empty states | + +## E-commerce + +| Example | Description | +|---------|-------------| +| [Product Catalog](/examples/ecommerce/catalog) | Filterable product grid with pagination | +| [Order Management](/examples/ecommerce/orders) | Order table with status and detail slideout | +| [Product Editor](/examples/ecommerce/product-editor) | Complex multi-tab form for product data | + +## Support / Helpdesk + +| Example | Description | +|---------|-------------| +| [Ticket Queue](/examples/support/tickets) | Support inbox with priority and bulk actions | +| [Ticket Detail](/examples/support/ticket-detail) | Split-pane conversation view | +| [Knowledge Base](/examples/support/knowledge-base) | Searchable help articles | + +## CRM / Sales + +| Example | Description | +|---------|-------------| +| [Contact List](/examples/crm/contacts) | Customer database with inline editing | +| [Deal Pipeline](/examples/crm/pipeline) | Sales stages with deal cards | +| [Contact Detail](/examples/crm/contact-detail) | 360° customer view with activity | + +## Analytics + +| Example | Description | +|---------|-------------| +| [Analytics Dashboard](/examples/analytics/dashboard) | Data visualization with multiple charts | +| [Report Builder](/examples/analytics/report-builder) | Query builder with live preview | + +## Onboarding + +| Example | Description | +|---------|-------------| +| [Onboarding Wizard](/examples/onboarding/wizard) | Multi-step flow with validation | +| [Empty States](/examples/onboarding/empty-states) | First-run experience gallery | diff --git a/docs/pages/examples/notifications.md b/docs/pages/examples/notifications.md new file mode 100644 index 000000000..4e71abf56 --- /dev/null +++ b/docs/pages/examples/notifications.md @@ -0,0 +1,103 @@ +--- +meta: + title: Notifications + description: Notification center with tabs, empty states, and activity items. +fullWidth: true +--- + +# Notifications Center + +A notification/activity center showing different notification types with tabs and empty states. Demonstrates `zn-tabs`, `zn-item`, and `zn-empty-state`. + +```html:preview + + +
    + Mark all read +
    + + +
  • All 12
    • +
  • Unread 3
    • +
  • Mentions
    • +
  • System
    • +     + + + + + + 2 min ago + + + + 15 min ago + + + + 1 hour ago + + + + 2 hours ago + + + + 3 hours ago + + + + 5 hours ago + + + + 1 day ago + + + + + + + + 2 min ago + + + + 1 hour ago + + + + 3 hours ago + + + + +
    + + + No mentions yet + When someone mentions you in a comment or note, it will appear here. + +
    + + + + + + 2 days ago + + + + 1 week ago + + + + 2 weeks ago + + +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-item`, `zn-icon`, `zn-chip`, `zn-empty-state`, `zn-panel` diff --git a/docs/pages/examples/onboarding/empty-states.md b/docs/pages/examples/onboarding/empty-states.md new file mode 100644 index 000000000..7df2f6de5 --- /dev/null +++ b/docs/pages/examples/onboarding/empty-states.md @@ -0,0 +1,182 @@ +--- +meta: + title: Empty States + description: Collection of empty state patterns for various scenarios. +fullWidth: true +--- + +# Empty States Gallery + +A collection of empty state designs for different scenarios. Demonstrates `zn-empty-state` variations with icons, messages, and call-to-action buttons. + +## First-Time / No Data + +```html:preview + + + + + No messages yet + When you receive messages, they'll appear here. + Compose Message + + + + + + + No files uploaded + Upload your first file to get started organizing your documents. + Upload Files + + + + + + + No team members + Invite colleagues to collaborate on this project. + Invite Team + + + +``` + +## Search / Filter Results + +```html:preview + + + + + No results found + We couldn't find anything matching "xyz123". Try a different search term. + Clear Search + + + + + + + No matching items + No items match your current filters. Try adjusting or clearing filters. + Clear Filters + + + +``` + +## Error States + +```html:preview + + + + + Something went wrong + We encountered an error loading this content. Please try again. + Retry + + + + + + + Connection lost + Please check your internet connection and try again. + Reconnect + + + + + + + Page not found + The page you're looking for doesn't exist or has been moved. + Go Home + + + +``` + +## Permission / Access States + +```html:preview + + + + + Access restricted + You don't have permission to view this content. Contact your admin for access. + Request Access + + + + + + + Upgrade required + This feature is available on the Pro plan. Upgrade to unlock. + View Plans + + + +``` + +## Maintenance / Status States + +```html:preview + + + + + Under maintenance + We're performing scheduled maintenance. We'll be back shortly. + Check Status + + + + + + + Coming soon + This feature is still in development. Stay tuned for updates! + Notify Me + + + +``` + +## Success / Completion States + +```html:preview + + + + + All done! + You've completed all your tasks for today. Great work! + View History + + + + + + + Inbox zero! + You've read all your messages. Enjoy the peace and quiet. + + + + + + + Congratulations! + You've completed the onboarding process. Welcome aboard! + Explore Features + + + +``` + +**Components demonstrated:** `zn-empty-state`, `zn-icon`, `zn-button`, `zn-panel`, `zn-cols` diff --git a/docs/pages/examples/onboarding/wizard.md b/docs/pages/examples/onboarding/wizard.md new file mode 100644 index 000000000..dbc2787f1 --- /dev/null +++ b/docs/pages/examples/onboarding/wizard.md @@ -0,0 +1,134 @@ +--- +meta: + title: Onboarding Wizard + description: Multi-step onboarding flow with forms and progress indication. +fullWidth: true +--- + +# Onboarding Wizard + +A multi-step onboarding flow guiding users through initial setup. Demonstrates `zn-stepper`, form validation, and wizard patterns. + +```html:preview +
    + + +
    + + + + + + + +
    + + +
    +

    Invite your team

    +

    Collaborate with your teammates by inviting them to join your workspace.

    + + + + + + + Admin + Member + Viewer + +
    + +
    +     + + + + + + Admin + Member + Viewer + +
    + +
    +     + + + + + + Admin + Member + Viewer + +
    + +
    +     + + Add another + + + Tip: Team members will receive an email invitation with instructions to set up their account. + +     +
    + + +
    + Back +
    + Skip for now + Continue +
    +
    +     +
    +``` + +## Other Steps (for reference) + +### Step 1: Welcome + +```html:preview +
    + +
    + +

    Welcome to Acme Platform

    +

    Let's get you set up in just a few steps. This should only take about 2 minutes.

    + Get Started +
    +     +
    +``` + +### Step 5: Complete + +```html:preview +
    + +
    + +

    You're all set!

    +

    Your workspace is ready. We've sent invitations to your team members.

    + + + + 2 invitations sent to sarah@acme.com and michael@acme.com + + + Go to Dashboard + +
    + Take a product tour +
    +     +
    +     +
    +``` + +**Components demonstrated:** `zn-stepper`, `zn-stepper-item`, `zn-input`, `zn-select`, `zn-button`, `zn-alert`, `zn-panel`, `zn-icon` diff --git a/docs/pages/examples/settings.md b/docs/pages/examples/settings.md new file mode 100644 index 000000000..eab2eb7ba --- /dev/null +++ b/docs/pages/examples/settings.md @@ -0,0 +1,242 @@ +--- +meta: + title: Settings + description: Account settings page with tabs, forms, and toggles demonstrating Zinc form components. +fullWidth: true +--- + +# Settings + +A typical settings page with multiple sections organized by tabs. Demonstrates `zn-tabs`, `zn-input`, `zn-toggle`, `zn-select`, and form layout patterns. + +```html:preview + + + + +
  • Profile
    • +
  • Security
    • +
  • Notifications
    • +
  • Billing
    • +
  • Team
    • +     + + + + +
    + + Upload Avatar + +
    + + + + + + + + + + UTC + Eastern Time (EST) + Pacific Time (PST) + GMT + +
    + Cancel + Save Changes +
    +     +     +     + + + + + + + + + + + Update Password + + + + + + + + + Configured + + + Setup + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Change Plan + + + + + + + Edit + + +
    + Add Payment Method +
    +     +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    DateDescriptionAmountStatus
    Jan 15, 2026Professional Plan$49.00PaidDownload
    Dec 15, 2025Professional Plan$49.00PaidDownload
    Nov 15, 2025Professional Plan$49.00PaidDownload
    +     +     +     + + + +
    +

    Team Members

    + Invite Member +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    MemberRoleStatus
    +
    + +
    +
    Sarah Wilson
    +
    sarah@company.com
    +
    +
    +     		OwnerActive
    +
    + +
    +
    Michael Chen
    +
    michael@company.com
    +
    +
    +     		AdminActive
    +
    + +
    +
    Emma Thompson
    +
    emma@company.com
    +
    +
    +     		MemberPending
    +     +     +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-input`, `zn-textarea`, `zn-select`, `zn-option`, `zn-toggle`, `zn-file`, `zn-data-table`, `zn-panel`, `zn-item`, `zn-stat`, `zn-chip`, `zn-button` diff --git a/docs/pages/examples/support/knowledge-base.md b/docs/pages/examples/support/knowledge-base.md new file mode 100644 index 000000000..41b3064a8 --- /dev/null +++ b/docs/pages/examples/support/knowledge-base.md @@ -0,0 +1,172 @@ +--- +meta: + title: Knowledge Base + description: Help center with searchable articles and category navigation. +fullWidth: true +--- + +# Knowledge Base + +A help center interface with category navigation, search, and expandable articles. Demonstrates `zn-sidebar`, `zn-collapsible`, `zn-menu`, and content layouts. + +```html:preview + + +
    +

    Categories

    + + + + Orders & Shipping + 12 + + + + Payments & Billing + 8 + + + + Returns & Refunds + 6 + + + + Account Settings + 10 + + + + Products & Inventory + 15 + + + + Getting Started + 5 + + +
    + + + + + +
    +

    How can we help?

    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Orders & Shipping +
    + +

    Tracking your order is easy! Here's how to find your tracking information and monitor your delivery status.

    + + +
    +

    Your tracking number can be found in several places:

    +
      +
    1. Order confirmation email - We send tracking information as soon as your order ships.
      2. +
    2. Your account dashboard - Go to "My Orders" and click on the order you want to track.
      3. +
    3. SMS notification - If you opted in, we'll text you the tracking link.
      4. +
    +
    +     + + +
    +

    Once you have your tracking number:

    +
      +
    1. Click the tracking link in your email or copy the tracking number.
      2. +
    2. You'll be taken to the carrier's website (FedEx, UPS, USPS, etc.).
      3. +
    3. View real-time updates on your package location and estimated delivery.
      4. +
    + + Tip: Tracking information may take 24-48 hours to appear after your order ships. + +
    +     + + +
    +

    If your tracking hasn't updated in a while:

    +
      +
    • Wait 24-48 hours for the carrier to scan your package.
      • +
    • Check for any service alerts in your area.
      • +
    • Contact our support team if there's no update after 5 business days.
      • +
    +
    +     + + +
    +

    If you experience any of these issues, please contact us:

    +
      +
    • Package marked as delivered but not received
      • +
    • Damaged package upon arrival
      • +
    • Wrong item delivered
      • +
    • Significant delivery delays
      • +
    + Contact Support +
    +     +     + + +
    +

    Was this article helpful?

    +
    + Yes + No +
    +
    +     + + + + + + + + + + + + + + + + + + +     +     +     +``` + +**Components demonstrated:** `zn-sidebar`, `zn-menu`, `zn-menu-item`, `zn-collapsible`, `zn-input`, `zn-item`, `zn-chip`, `zn-alert`, `zn-panel`, `zn-button` diff --git a/docs/pages/examples/support/ticket-detail.md b/docs/pages/examples/support/ticket-detail.md new file mode 100644 index 000000000..b092789ba --- /dev/null +++ b/docs/pages/examples/support/ticket-detail.md @@ -0,0 +1,187 @@ +--- +meta: + title: Ticket Detail + description: Support ticket detail with conversation thread and customer info sidebar. +fullWidth: true +--- + +# Ticket Detail + +A ticket detail view with split-pane layout showing conversation thread and customer information. Demonstrates `zn-split-pane`, `zn-editor`, and conversation UI patterns. + +```html:preview + + + +
    + +
    +
    +
    +
    + +

    Cannot complete checkout process

    +
    +
    + #847 + Urgent + Pending +
    +
    +
    + Merge + Close +
    +
    +
    + + +
    + + +
    + +
    +
    + John Smith + Feb 1, 2026 at 2:34 PM +
    +
    +

    Hi, I'm trying to complete my order but the checkout page keeps showing an error. I've tried multiple browsers and cleared my cache but nothing works.

    +

    Can you please help? I need this order delivered by next week.

    +
    +
    +
    + + +
    + +
    +
    + Sarah Wilson + Feb 1, 2026 at 2:45 PM +
    +
    +

    Hi John,

    +

    Thank you for reaching out. I'm sorry to hear you're experiencing issues with checkout. Could you please provide the following information so I can investigate?

    +
      +
    • What error message are you seeing?
      • +
    • What items are in your cart?
      • +
    • What payment method are you using?
      • +
    +
    +
    +
    + + +
    + +
    +
    + John Smith + Feb 1, 2026 at 3:02 PM +
    +
    +

    The error says "Payment processing failed. Please try again."

    +

    I have 2 items: Wireless Headphones and a USB-C Hub. I'm trying to pay with Visa.

    +
    +
    +
    + + +
    + +
    +
    + Sarah Wilson + Internal Note +
    +
    +

    Checked payment gateway logs - there's a fraud flag on this card. Need to escalate to payments team to verify.

    +
    +
    +
    +     +
    + + +
    + +
    +
    + + +
    +
    + + Reply + Internal Note + + Send Reply +
    +
    +
    +
    + + +
    + + + + + + + + + + + + + + + + + + Open + Pending + Resolved + Closed + + + Low + Normal + High + Urgent + + + Sarah Wilson + Michael Chen + Unassigned + + + Checkout Issues + Shipping + Returns + Billing + + + + + + + + + + + + + + + + +
    +     +     +``` + +**Components demonstrated:** `zn-split-pane`, `zn-editor`, `zn-panel`, `zn-item`, `zn-select`, `zn-chip`, `zn-status-indicator`, `zn-button` diff --git a/docs/pages/examples/support/tickets.md b/docs/pages/examples/support/tickets.md new file mode 100644 index 000000000..f612993e1 --- /dev/null +++ b/docs/pages/examples/support/tickets.md @@ -0,0 +1,174 @@ +--- +meta: + title: Ticket Queue + description: Support ticket queue with priority badges, filters, and bulk actions. +fullWidth: true +--- + +# Ticket Queue + +A support inbox showing tickets with priority, status, and SLA information. Demonstrates `zn-data-table` with badges, filters, and bulk operations. + +```html:preview + + + +
    +

    Support Tickets

    + New Ticket +
    + + + +
    + + + All + Open + Pending + Resolved + Closed + + + All + Urgent + High + Normal + Low + + + All agents + Sarah Wilson + Michael Chen + Unassigned + +
    +     + + + + 2 selected + Assign + Change Priority + Close + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TicketSubjectCustomerPriorityStatusAssigneeSLAUpdated
    #847Cannot complete checkout processJohn SmithUrgentPending +
    + + Sarah W. +
    +     		Breached5 min ago
    #846Order not received after 2 weeksEmily DavisHighOpen +
    + + Michael C. +
    +     		2h left15 min ago
    #845Question about return policyRobert JohnsonNormalOpen + Unassigned + 8h left1 hour ago
    #844Product damaged during shippingMaria GarciaHighPending +
    + + Sarah W. +
    +     		6h left2 hours ago
    #843How to update billing informationDavid BrownLowResolved +
    + + Michael C. +
    +     		Met3 hours ago
    #842Discount code not workingJennifer LeeNormalClosed +
    + + Sarah W. +
    +     		Met1 day ago
    +     +     + + +
    + Showing 1-6 of 47 tickets + +
    +     +     +``` + +**Components demonstrated:** `zn-data-table`, `zn-bulk-actions`, `zn-pagination`, `zn-input`, `zn-select`, `zn-chip`, `zn-status-indicator`, `zn-panel` diff --git a/docs/pages/examples/users.md b/docs/pages/examples/users.md new file mode 100644 index 000000000..fdbd6b076 --- /dev/null +++ b/docs/pages/examples/users.md @@ -0,0 +1,191 @@ +--- +meta: + title: User Management + description: CRUD table with filters, search, and bulk actions demonstrating data table patterns. +fullWidth: true +--- + +# User Management + +A typical admin interface for managing users. Demonstrates `zn-data-table` with filters, search, bulk actions, and slideout forms. + +```html:preview + + + +
    +

    Users

    + Add User +
    + + + +
    + + + All roles + Admin + Member + Viewer + + + All statuses + Active + Inactive + Pending + + Clear Filters +
    +     + + + + 3 selected + Change Role + Deactivate + Delete + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameEmailRoleStatusLast Active
    +
    + + Sarah Wilson +
    +     		sarah.wilson@company.comAdminActive2 minutes ago + + + + Edit + View Activity + Reset Password + Deactivate + + +
    +
    + + Michael Chen +
    +     		michael.chen@company.comMemberActive1 hour ago + + + + Edit + View Activity + Reset Password + Deactivate + + +
    +
    + + Emma Thompson +
    +     		emma.thompson@company.comMemberPendingNever + + + + Edit + Resend Invite + Cancel Invite + + +
    +
    + + James Rodriguez +
    +     		james.rodriguez@company.comViewerActive3 days ago + + + + Edit + View Activity + Reset Password + Deactivate + + +
    +
    + + Lisa Park +
    +     		lisa.park@company.comMemberInactive2 weeks ago + + + + Edit + Reactivate + Delete + + +
    +     +     + + +
    + Showing 1-5 of 24 users + +
    +     +     +``` + +**Components demonstrated:** `zn-data-table`, `zn-bulk-actions`, `zn-pagination`, `zn-input`, `zn-select`, `zn-dropdown`, `zn-menu`, `zn-menu-item`, `zn-status-indicator`, `zn-chip` diff --git a/docs/plans/2026-02-03-kitchen-sink-examples-design.md b/docs/plans/2026-02-03-kitchen-sink-examples-design.md new file mode 100644 index 000000000..b8246659e --- /dev/null +++ b/docs/plans/2026-02-03-kitchen-sink-examples-design.md @@ -0,0 +1,370 @@ +# Kitchen Sink Example Pages Design + +## Overview + +Create 17 comprehensive example pages to showcase Zinc UI library capabilities. These pages serve three purposes: +1. **Marketing/showcase** - Impress potential adopters with polished, real-world examples +2. **Developer reference** - Help users understand how to combine components into complete interfaces +3. **Testing/QA** - Ensure all components work together correctly in realistic scenarios + +## Goals + +- Demonstrate 88+ Zinc components in realistic contexts +- Cover common online business verticals: e-commerce, support/helpdesk, CRM, analytics +- Show varied layout patterns: dashboards, CRUD, workflows, navigation +- Static mockups with hardcoded data (minimal interactivity) +- Visual density varies by page type (dashboards dense, settings spacious) + +--- + +## File Structure + +``` +/docs/pages/examples/ +├── index.md # Gallery/index page listing all examples +├── /dashboard/ +│ └── index.md # Main Dashboard +├── /settings/ +│ └── index.md # Settings page +├── /users/ +│ └── index.md # User Management +├── /notifications/ +│ └── index.md # Notifications Center +├── /ecommerce/ +│ ├── catalog.md # Product Catalog +│ ├── orders.md # Order Management +│ └── product-editor.md # Product Editor +├── /support/ +│ ├── tickets.md # Ticket Queue +│ ├── ticket-detail.md # Ticket Detail +│ └── knowledge-base.md # Knowledge Base +├── /crm/ +│ ├── contacts.md # Contact List +│ ├── pipeline.md # Deal Pipeline +│ └── contact-detail.md # Contact Detail +├── /analytics/ +│ ├── dashboard.md # Analytics Dashboard +│ └── report-builder.md # Report Builder +└── /onboarding/ + ├── wizard.md # Onboarding Wizard + └── empty-states.md # Empty States Gallery +``` + +--- + +## Page Template & Layout + +### New Layout: `/docs/_includes/layouts/example.njk` + +A dedicated layout for kitchen sink examples that: +- Removes standard docs sidebar and header +- Provides a floating "back to examples" button +- Includes a toolbar to toggle light/dark theme +- Sets viewport to full width/height +- Includes all Zinc component imports + +### Page Frontmatter Pattern + +```yaml +--- +layout: layouts/example.njk +title: Main Dashboard +description: Overview dashboard with stats, charts, and activity feed +category: Generic SaaS +tags: [dashboard, charts, stats, activity] +components: [stat, chart, data-table, tabs, panel] +--- +``` + +The `components` array documents which Zinc components are demonstrated. + +### Index Page + +The `/examples/index.md` gallery will include: +- Category groupings +- Component tags for filtering +- Links to each example +- Thumbnail previews (optional, can add later) + +--- + +## Visual Design Approach + +### Consistent App Shell + +Most pages share a common shell: +- **Sidebar** (`zn-sidebar`) - Navigation with icons, collapsible sections +- **Header** (`zn-header`) - Breadcrumbs, search, user menu +- **Main content area** - Page-specific content + +Some pages (Onboarding Wizard, Empty States) intentionally break from this pattern. + +### Data Realism + +Static but believable mock data: +- Real-sounding company names, product names, people names +- Plausible numbers, dates, and status distributions +- Consistent entities across pages (same customers appear in CRM and Support) + +### Responsive Behavior + +Desktop-first with graceful adaptation: +- Sidebar collapses on smaller screens +- Tables become scrollable or stack +- Split panes become single-column + +### Theme Support + +All examples work in both light and dark themes using existing Zinc design tokens. Floating toolbar allows theme toggling. + +--- + +## Page Specifications + +### Section 1: Generic SaaS Foundation (4 pages) + +#### Main Dashboard +**Purpose:** Overview/home screen +**Density:** Dense +**Components:** +- Top row: 4x `zn-stat` tiles (revenue, orders, customers, tickets) +- Middle row: `zn-chart` (line chart - trends) + `zn-chart` (bar chart - by category) +- Bottom row: `zn-data-table` (recent orders, 5 rows) + `zn-panel` (activity feed with timestamps) + +#### Settings +**Purpose:** Account/app configuration +**Density:** Spacious +**Components:** +- `zn-tabs` for sections: Profile, Security, Notifications, Billing, Team +- Profile: Form with `zn-input`, `zn-file` (avatar), `zn-textarea` +- Security: Password change, `zn-toggle` for 2FA +- Notifications: Grid of `zn-toggle` switches with labels +- Billing: `zn-panel` with plan info, payment method, invoices table +- Team: Small `zn-data-table` with invite button, role `zn-select` + +#### User Management +**Purpose:** CRUD table pattern +**Density:** Medium +**Components:** +- `zn-data-table` with columns: avatar, name, email, role, status, last active, actions +- `zn-data-table-filter` for role/status, `zn-data-table-search` +- `zn-bulk-actions` for delete, change role +- `zn-slideout` for add/edit user form + +#### Notifications Center +**Purpose:** Activity/alerts +**Density:** Medium +**Components:** +- `zn-tabs`: All, Unread, Mentions, System +- List of notification items with icons, timestamps, read/unread states +- `zn-empty-state` for empty tabs +- Mark all read action in header + +--- + +### Section 2: E-commerce (3 pages) + +#### Product Catalog +**Purpose:** Browsable inventory +**Density:** Medium +**Components:** +- Filter sidebar: `zn-checkbox-group` (categories), `zn-input` (price range), `zn-select` (stock status) +- Grid/list view toggle with `zn-button-group` +- Product cards using `zn-tile` with image, name, price, stock badge +- `zn-pagination` at bottom +- `zn-bulk-actions` for publish, archive, delete + +#### Order Management +**Purpose:** Order list + detail +**Density:** Dense +**Components:** +- `zn-data-table` with: order #, customer, items count, total, status chip, date, actions +- Status chips color-coded: pending (yellow), processing (blue), shipped (purple), delivered (green), cancelled (red) +- `zn-data-table-filter` for status, date range with `zn-datepicker` +- Row click opens `zn-slideout` with full order detail: + - Customer info panel + - Line items table + - `zn-vertical-stepper` showing order timeline + - Action buttons: refund, cancel, resend confirmation + +#### Product Editor +**Purpose:** Complex form +**Density:** Spacious +**Components:** +- `zn-tabs`: Details, Media, Inventory, Pricing, SEO +- Details: `zn-input` (title), `zn-editor` (description), `zn-select` (category), `zn-checkbox-group` (tags) +- Media: `zn-file` with drag-drop, image gallery with reorder +- Inventory: SKU, quantity, low stock threshold, `zn-toggle` for track inventory +- Pricing: Base price, sale price, `zn-datepicker` for sale dates +- SEO: Meta title, description, URL slug preview +- Sticky footer with Save/Discard buttons + +--- + +### Section 3: Support/Helpdesk (3 pages) + +#### Ticket Queue +**Purpose:** Support inbox +**Density:** Dense +**Components:** +- `zn-data-table` with priority badges, assignee avatars, SLA countdown +- `zn-data-table-filter` for priority, status, assignee +- `zn-data-table-search` for ticket search +- `zn-bulk-actions` for bulk assign, close, change priority + +#### Ticket Detail +**Purpose:** Conversation view +**Density:** Medium +**Components:** +- `zn-split-pane` layout +- Left pane: Conversation thread with message bubbles, `zn-editor` for reply +- Right sidebar: Customer info panel, ticket properties (status, priority, assignee), related tickets list +- Quick action buttons in header + +#### Knowledge Base +**Purpose:** Help articles +**Density:** Spacious +**Components:** +- Tree navigation using nested `zn-menu` items +- `zn-input` search at top +- `zn-collapsible` sections for article content +- `zn-content-block` for article body +- Helpful/not helpful feedback buttons + +--- + +### Section 4: CRM/Sales (3 pages) + +#### Contact List +**Purpose:** Customer database +**Density:** Dense +**Components:** +- `zn-data-table` with inline edit capability +- Columns: avatar, name, company, email, phone, tags, last contact, actions +- `zn-data-table-filter` for tags, company, last contact date +- Export action button +- Company grouping option + +#### Deal Pipeline +**Purpose:** Sales workflow +**Density:** Dense +**Components:** +- Column layout showing stages: Lead → Qualified → Proposal → Negotiation → Won/Lost +- Deal cards with: company name, deal value, probability, owner avatar +- Stage totals at column headers +- Visual drag indicators (static, showing the pattern) +- `zn-stat` row showing pipeline totals + +#### Contact Detail +**Purpose:** 360° customer view +**Density:** Medium +**Components:** +- Header with avatar, name, company, key stats (lifetime value, open deals) +- `zn-tabs`: Activity, Deals, Notes, Files +- Activity tab: Timeline of all interactions using `zn-vertical-stepper` style +- Deals tab: Small `zn-data-table` of associated deals +- Notes tab: List with `zn-editor` for new note +- Files tab: File list with upload +- Sidebar with quick contact info and edit button + +--- + +### Section 5: Analytics/Reporting (2 pages) + +#### Analytics Dashboard +**Purpose:** Data visualization heavy +**Density:** Dense +**Components:** +- Date range picker with `zn-datepicker` (start/end) +- Top row: 4-6 `zn-stat` tiles with trend arrows (↑ green, ↓ red) +- `zn-chart` (line) - Traffic over time +- `zn-chart` (bar) - Revenue by channel +- `zn-chart` (pie/donut) - Traffic sources +- `zn-chart` (area) - Conversion funnel +- Real-time indicator badge +- Export/share buttons + +#### Report Builder +**Purpose:** Query/filter interface +**Density:** Medium +**Components:** +- `zn-query-builder` for defining report filters +- `zn-select` for chart type (line, bar, pie, table) +- `zn-select` for metrics and dimensions +- Live preview `zn-chart` showing current query results +- Save report `zn-button` opening `zn-dialog` +- Export options: CSV, PDF, PNG + +--- + +### Section 6: Bonus/Specialized (2 pages) + +#### Onboarding Wizard +**Purpose:** Multi-step flow +**Density:** Spacious +**Layout:** No app shell - centered card design +**Components:** +- `zn-stepper` showing 5 steps: Welcome, Profile, Team, Preferences, Complete +- Step 1: Welcome message with get started button +- Step 2: Profile form with `zn-input`, `zn-file` avatar +- Step 3: Team invite with email `zn-input` and role `zn-select` +- Step 4: Preferences with `zn-toggle` and `zn-checkbox-group` +- Step 5: Completion state with success icon and dashboard link +- Progress bar at top +- Back/Next buttons with validation + +#### Empty States Gallery +**Purpose:** First-run experiences +**Density:** Spacious +**Layout:** Grid of examples +**Components:** +- Multiple `zn-empty-state` variations: + - No search results + - First-time/empty list + - Error state + - No permission + - Maintenance mode + - Loading complete but empty +- Each with appropriate icon, message, and CTA +- Shows both light and dark theme versions + +--- + +## Component Coverage Summary + +| Component | Pages Using It | +|-----------|----------------| +| `zn-data-table` | User Management, Orders, Tickets, Contacts, Deals | +| `zn-chart` | Dashboard, Analytics Dashboard, Report Builder | +| `zn-tabs` | Settings, Product Editor, Contact Detail, Notifications | +| `zn-slideout` | User Management, Orders | +| `zn-form controls` | Settings, Product Editor, Wizard, Report Builder | +| `zn-stat` | Dashboard, Analytics Dashboard, Pipeline | +| `zn-editor` | Product Editor, Ticket Detail, Contact Detail | +| `zn-split-pane` | Ticket Detail | +| `zn-query-builder` | Report Builder | +| `zn-stepper` | Wizard, Order Detail | +| `zn-empty-state` | Notifications, Empty States Gallery | +| `zn-bulk-actions` | User Management, Catalog, Tickets | +| `zn-pagination` | Catalog | +| `zn-collapsible` | Knowledge Base | + +--- + +## Implementation Notes + +1. **Start with the template** - Create the example layout first so all pages have consistent framing +2. **Build generic pages first** - Dashboard, Settings, User Management establish patterns others follow +3. **Reuse mock data** - Create a shared set of fake customers, products, orders that appear across pages +4. **Test both themes** - Verify each page looks good in light and dark mode +5. **Document components used** - Keep frontmatter `components` array accurate for the index page + +--- + +## Success Criteria + +- All 17 pages render without errors +- Each page demonstrates its listed components +- Pages look polished in both light and dark themes +- Index page provides easy navigation and filtering +- Developers can copy component patterns from examples diff --git a/docs/plans/2026-02-03-kitchen-sink-examples.md b/docs/plans/2026-02-03-kitchen-sink-examples.md new file mode 100644 index 000000000..a0f2b0e6e --- /dev/null +++ b/docs/plans/2026-02-03-kitchen-sink-examples.md @@ -0,0 +1,1674 @@ +# Kitchen Sink Examples Implementation Plan + +> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. + +**Goal:** Create 17 comprehensive example pages showcasing Zinc UI library capabilities across common business verticals. + +**Architecture:** Each example page uses `html:preview` blocks within markdown files, rendered by the existing 11ty docs system. Pages live in `/docs/pages/examples/` with a new "Examples" section in the sidebar navigation. + +**Tech Stack:** Markdown with Nunjucks frontmatter, Zinc web components, 11ty static site generator. + +--- + +## Task 1: Create Examples Directory Structure + +**Files:** +- Create: `docs/pages/examples/index.md` + +**Step 1: Create the examples index page** + +Create `docs/pages/examples/index.md`: + +```markdown +--- +meta: + title: Kitchen Sink Examples + description: Comprehensive example pages showcasing Zinc UI components in real-world layouts. +--- + +# Kitchen Sink Examples + +These examples demonstrate how to combine Zinc components into complete, production-ready interfaces. Each example showcases different layout patterns, component combinations, and design approaches. + +## Generic SaaS + +| Example | Description | +|---------|-------------| +| [Main Dashboard](/examples/dashboard) | Overview with stats, charts, and activity feed | +| [Settings](/examples/settings) | Account configuration with tabs and forms | +| [User Management](/examples/users) | CRUD table with filters and bulk actions | +| [Notifications](/examples/notifications) | Activity center with tabs and empty states | + +## E-commerce + +| Example | Description | +|---------|-------------| +| [Product Catalog](/examples/ecommerce/catalog) | Filterable product grid with pagination | +| [Order Management](/examples/ecommerce/orders) | Order table with status and detail slideout | +| [Product Editor](/examples/ecommerce/product-editor) | Complex multi-tab form for product data | + +## Support / Helpdesk + +| Example | Description | +|---------|-------------| +| [Ticket Queue](/examples/support/tickets) | Support inbox with priority and bulk actions | +| [Ticket Detail](/examples/support/ticket-detail) | Split-pane conversation view | +| [Knowledge Base](/examples/support/knowledge-base) | Searchable help articles | + +## CRM / Sales + +| Example | Description | +|---------|-------------| +| [Contact List](/examples/crm/contacts) | Customer database with inline editing | +| [Deal Pipeline](/examples/crm/pipeline) | Sales stages with deal cards | +| [Contact Detail](/examples/crm/contact-detail) | 360° customer view with activity | + +## Analytics + +| Example | Description | +|---------|-------------| +| [Analytics Dashboard](/examples/analytics/dashboard) | Data visualization with multiple charts | +| [Report Builder](/examples/analytics/report-builder) | Query builder with live preview | + +## Onboarding + +| Example | Description | +|---------|-------------| +| [Onboarding Wizard](/examples/onboarding/wizard) | Multi-step flow with validation | +| [Empty States](/examples/onboarding/empty-states) | First-run experience gallery | +``` + +**Step 2: Commit** + +```bash +git add docs/pages/examples/index.md +git commit -m "feat(docs): add kitchen sink examples index page" +``` + +--- + +## Task 2: Update Sidebar Navigation + +**Files:** +- Modify: `docs/_includes/sidebar.njk` + +**Step 1: Add Examples section to sidebar** + +Edit `docs/_includes/sidebar.njk` to add a new section after Tutorials: + +```nunjucks + +``` + +**Step 2: Commit** + +```bash +git add docs/_includes/sidebar.njk +git commit -m "feat(docs): add Examples section to sidebar navigation" +``` + +--- + +## Task 3: Main Dashboard Example + +**Files:** +- Create: `docs/pages/examples/dashboard.md` + +**Step 1: Create the dashboard example** + +Create `docs/pages/examples/dashboard.md`: + +```markdown +--- +meta: + title: Main Dashboard + description: Overview dashboard with stats, charts, and activity feed demonstrating Zinc components. +fullWidth: true +--- + +# Main Dashboard + +A typical SaaS dashboard showing key metrics, trends, and recent activity. Demonstrates `zn-stat`, `zn-chart`, `zn-data-table`, and `zn-panel` components. + +```html:preview + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OrderCustomerTotalStatus
    #1284Sarah Wilson$234.50Delivered
    #1283Michael Chen$89.00Shipped
    #1282Emma Thompson$156.25Processing
    #1281James Rodriguez$412.00Delivered
    #1280Lisa Park$67.80Shipped
    +     +     + + + + + + + + + + + + + + + + + + + +     +     +     +``` + +**Components demonstrated:** `zn-pane`, `zn-sp`, `zn-cols`, `zn-stat`, `zn-panel`, `zn-chart`, `zn-data-table`, `zn-chip`, `zn-item`, `zn-icon` +``` + +**Step 2: Run dev server to verify** + +```bash +cd /Users/brooke.bryan/code/kubex/zinc/.worktrees/kitchen-sink +npm run docs:dev +# Visit http://localhost:8080/examples/dashboard to verify +``` + +**Step 3: Commit** + +```bash +git add docs/pages/examples/dashboard.md +git commit -m "feat(docs): add main dashboard kitchen sink example" +``` + +--- + +## Task 4: Settings Page Example + +**Files:** +- Create: `docs/pages/examples/settings.md` + +**Step 1: Create the settings example** + +Create `docs/pages/examples/settings.md`: + +```markdown +--- +meta: + title: Settings + description: Account settings page with tabs, forms, and toggles demonstrating Zinc form components. +fullWidth: true +--- + +# Settings + +A typical settings page with multiple sections organized by tabs. Demonstrates `zn-tabs`, `zn-input`, `zn-toggle`, `zn-select`, and form layout patterns. + +```html:preview + + + + +
  • Profile
    • +
  • Security
    • +
  • Notifications
    • +
  • Billing
    • +
  • Team
    • +     + + + + +
    + + Upload Avatar + +
    + + + + + + + + + + UTC + Eastern Time (EST) + Pacific Time (PST) + GMT + +
    + Cancel + Save Changes +
    +     +     +     + + + + + + + + + + + Update Password + + + + + + + + + Configured + + + Setup + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Change Plan + + + + + + + Edit + + +
    + Add Payment Method +
    +     +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    DateDescriptionAmountStatus
    Jan 15, 2026Professional Plan$49.00PaidDownload
    Dec 15, 2025Professional Plan$49.00PaidDownload
    Nov 15, 2025Professional Plan$49.00PaidDownload
    +     +     +     + + + +
    +

    Team Members

    + Invite Member +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    MemberRoleStatus
    +
    + +
    +
    Sarah Wilson
    +
    sarah@company.com
    +
    +
    +     		OwnerActive
    +
    + +
    +
    Michael Chen
    +
    michael@company.com
    +
    +
    +     		AdminActive
    +
    + +
    +
    Emma Thompson
    +
    emma@company.com
    +
    +
    +     		MemberPending
    +     +     +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-input`, `zn-textarea`, `zn-select`, `zn-option`, `zn-toggle`, `zn-file`, `zn-data-table`, `zn-panel`, `zn-item`, `zn-stat`, `zn-chip`, `zn-button` +``` + +**Step 2: Verify in browser** + +```bash +# Visit http://localhost:8080/examples/settings to verify +``` + +**Step 3: Commit** + +```bash +git add docs/pages/examples/settings.md +git commit -m "feat(docs): add settings page kitchen sink example" +``` + +--- + +## Task 5: User Management Example + +**Files:** +- Create: `docs/pages/examples/users.md` + +**Step 1: Create the user management example** + +Create `docs/pages/examples/users.md`: + +```markdown +--- +meta: + title: User Management + description: CRUD table with filters, search, and bulk actions demonstrating data table patterns. +fullWidth: true +--- + +# User Management + +A typical admin interface for managing users. Demonstrates `zn-data-table` with filters, search, bulk actions, and slideout forms. + +```html:preview + + + +
    +

    Users

    + Add User +
    + + + +
    + + + All roles + Admin + Member + Viewer + + + All statuses + Active + Inactive + Pending + + Clear Filters +
    +     + + + + 3 selected + Change Role + Deactivate + Delete + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameEmailRoleStatusLast Active
    +
    + + Sarah Wilson +
    +     		sarah.wilson@company.comAdminActive2 minutes ago + + + + Edit + View Activity + Reset Password + Deactivate + + +
    +
    + + Michael Chen +
    +     		michael.chen@company.comMemberActive1 hour ago + + + + Edit + View Activity + Reset Password + Deactivate + + +
    +
    + + Emma Thompson +
    +     		emma.thompson@company.comMemberPendingNever + + + + Edit + Resend Invite + Cancel Invite + + +
    +
    + + James Rodriguez +
    +     		james.rodriguez@company.comViewerActive3 days ago + + + + Edit + View Activity + Reset Password + Deactivate + + +
    +
    + + Lisa Park +
    +     		lisa.park@company.comMemberInactive2 weeks ago + + + + Edit + Reactivate + Delete + + +
    +     +     + + +
    + Showing 1-5 of 24 users + +
    +     +     +``` + +**Components demonstrated:** `zn-data-table`, `zn-bulk-actions`, `zn-pagination`, `zn-input`, `zn-select`, `zn-dropdown`, `zn-menu`, `zn-menu-item`, `zn-status-indicator`, `zn-chip` +``` + +**Step 2: Commit** + +```bash +git add docs/pages/examples/users.md +git commit -m "feat(docs): add user management kitchen sink example" +``` + +--- + +## Task 6: Notifications Center Example + +**Files:** +- Create: `docs/pages/examples/notifications.md` + +**Step 1: Create the notifications example** + +Create `docs/pages/examples/notifications.md`: + +```markdown +--- +meta: + title: Notifications + description: Notification center with tabs, empty states, and activity items. +fullWidth: true +--- + +# Notifications Center + +A notification/activity center showing different notification types with tabs and empty states. Demonstrates `zn-tabs`, `zn-item`, and `zn-empty-state`. + +```html:preview + + +
    + Mark all read +
    + + +
  • All 12
    • +
  • Unread 3
    • +
  • Mentions
    • +
  • System
    • +     + + + + + + 2 min ago + + + + 15 min ago + + + + 1 hour ago + + + + 2 hours ago + + + + 3 hours ago + + + + 5 hours ago + + + + 1 day ago + + + + + + + + 2 min ago + + + + 1 hour ago + + + + 3 hours ago + + + + +
    + + + No mentions yet + When someone mentions you in a comment or note, it will appear here. + +
    + + + + + + 2 days ago + + + + 1 week ago + + + + 2 weeks ago + + +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-item`, `zn-icon`, `zn-chip`, `zn-empty-state`, `zn-panel` +``` + +**Step 2: Commit** + +```bash +git add docs/pages/examples/notifications.md +git commit -m "feat(docs): add notifications center kitchen sink example" +``` + +--- + +## Task 7: Product Catalog Example + +**Files:** +- Create: `docs/pages/examples/ecommerce/catalog.md` + +**Step 1: Create the ecommerce directory and catalog example** + +Create `docs/pages/examples/ecommerce/catalog.md`: + +```markdown +--- +meta: + title: Product Catalog + description: E-commerce product catalog with filters, grid view, and pagination. +fullWidth: true +--- + +# Product Catalog + +A product browsing interface with sidebar filters, grid/list toggle, and product cards. Demonstrates `zn-sidebar`, `zn-tile`, `zn-checkbox-group`, and `zn-pagination`. + +```html:preview + + +
    +

    Filters

    + + + + + Electronics + Clothing + Home & Garden + Sports + + + + + + + + + + + + + + + All + In Stock + Low Stock + Out of Stock + + + + + + 4 stars & up + 3 stars & up + 2 stars & up + + + + Clear All Filters + +
    + + + + + +
    +
    +

    Products

    + Showing 1-12 of 156 products +
    +
    + + + Newest First + Price: Low to High + Price: High to Low + Most Popular + + + + + +
    +
    + + + + 4 selected + Publish + Archive + Delete + + + + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + Low Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + Out of Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     + + +
    + +
    + + Low Stock + + + + +     + + +
    + +
    + + In Stock + + + + +     +     + + +
    + +
    +     +     +     +``` + +**Components demonstrated:** `zn-sidebar`, `zn-tile`, `zn-tile-property`, `zn-checkbox-group`, `zn-checkbox`, `zn-radio-group`, `zn-radio`, `zn-pagination`, `zn-bulk-actions`, `zn-rating`, `zn-button-group` +``` + +**Step 2: Commit** + +```bash +git add docs/pages/examples/ecommerce/catalog.md +git commit -m "feat(docs): add product catalog kitchen sink example" +``` + +--- + +## Task 8: Order Management Example + +**Files:** +- Create: `docs/pages/examples/ecommerce/orders.md` + +**Step 1: Create the order management example** + +Create `docs/pages/examples/ecommerce/orders.md`: + +```markdown +--- +meta: + title: Order Management + description: E-commerce order list with status indicators and detail slideout. +fullWidth: true +--- + +# Order Management + +An order management interface showing orders with status, filters, and a detail slideout. Demonstrates `zn-data-table`, `zn-slideout`, and `zn-vertical-stepper`. + +```html:preview + + + +
    +

    Orders

    + Export +
    + + + +
    + + + All + Pending + Processing + Shipped + Delivered + Cancelled + + +
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OrderCustomerItemsTotalStatusDate
    #1284Sarah Wilson3 items$234.50DeliveredFeb 1, 2026View
    #1283Michael Chen1 item$89.00ShippedFeb 1, 2026View
    #1282Emma Thompson2 items$156.25ProcessingJan 31, 2026View
    #1281James Rodriguez5 items$412.00DeliveredJan 30, 2026View
    #1280Lisa Park1 item$67.80CancelledJan 30, 2026View
    #1279David Kim2 items$198.50PendingJan 29, 2026View
    +     +     + + +
    + Showing 1-6 of 1,284 orders + +
    +     +     + + + + + + + + + + + +
    + 123 Main Street
    + San Francisco, CA 94102
    + United States +
    +     +     +     + + + + + + $89.00 + + +
    +
    + Subtotal + $89.00 +
    +
    + Shipping + Free +
    +
    + Total + $89.00 +
    +
    +     + + + + + + + + + + +     + +
    + Refund + Cancel Order + Resend Confirmation +
    +     +``` + +**Components demonstrated:** `zn-data-table`, `zn-slideout`, `zn-vertical-stepper`, `zn-vertical-stepper-item`, `zn-datepicker`, `zn-chip`, `zn-pagination`, `zn-panel`, `zn-item` +``` + +**Step 2: Commit** + +```bash +git add docs/pages/examples/ecommerce/orders.md +git commit -m "feat(docs): add order management kitchen sink example" +``` + +--- + +## Task 9: Product Editor Example + +**Files:** +- Create: `docs/pages/examples/ecommerce/product-editor.md` + +**Step 1: Create the product editor example** + +Create `docs/pages/examples/ecommerce/product-editor.md`: + +```markdown +--- +meta: + title: Product Editor + description: Complex multi-tab form for editing product data with rich text editor. +fullWidth: true +--- + +# Product Editor + +A comprehensive product editing form with multiple tabs covering all product attributes. Demonstrates `zn-tabs`, `zn-editor`, `zn-file`, and complex form layouts. + +```html:preview + + + +
    +
    + +
    +

    Edit Product

    + Wireless Headphones Pro +
    +
    +
    + Discard + Save Changes +
    +
    + + + + + +
  • Details
    • +
  • Media
    • +
  • Inventory
    • +
  • Pricing
    • +
  • SEO
    • +     + + +
    + + + + +
    + + +

    Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, 30-hour battery life, and ultra-comfortable ear cushions.

    +
      +
    • Active Noise Cancellation
      • +
    • 30-hour battery life
      • +
    • Premium memory foam ear cushions
      • +
    • Bluetooth 5.2 connectivity
      • +
    +     +
    + + + + Electronics + Clothing + Home & Garden + + + ACME Audio + Sonic + Beats + + + +
    + + + Wireless + Bluetooth + Noise Cancelling + Premium + New Arrival + +
    +     + + + + + + Published + Draft + Archived + + + + + + + +     +
    + + +
    + +
    + + + Drag and drop images here, or click to browse + +
    + + + +
    + + Primary + +
    +
    + + +
    +
    + + +
    +     +     +     +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + Standard Rate + Reduced Rate + Zero Rate + + + + + +
    + + +
    + + +
    +
    Wireless Headphones Pro - ACME Audio
    +
    https://store.example.com/products/wireless-headphones-pro
    +
    Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, 30-hour battery life...
    +
    +     + + + + + Experience premium sound quality with our Wireless Headphones Pro. Featuring advanced noise cancellation, 30-hour battery life, and ultra-comfortable ear cushions. + + + + + + + +     +
    +     +     +     +     +``` + +**Components demonstrated:** `zn-tabs`, `zn-navbar`, `zn-editor`, `zn-file`, `zn-input`, `zn-textarea`, `zn-select`, `zn-checkbox-group`, `zn-toggle`, `zn-datepicker`, `zn-panel`, `zn-item`, `zn-cols` +``` + +**Step 2: Commit** + +```bash +git add docs/pages/examples/ecommerce/product-editor.md +git commit -m "feat(docs): add product editor kitchen sink example" +``` + +--- + +## Task 10-17: Remaining Example Pages + +The remaining tasks follow the same pattern. For brevity, here are the files to create with their key components: + +### Task 10: Ticket Queue (`docs/pages/examples/support/tickets.md`) +- DataTable with priority badges and SLA indicators +- Bulk actions for assign/close +- Filters by status, priority, assignee + +### Task 11: Ticket Detail (`docs/pages/examples/support/ticket-detail.md`) +- Split-pane layout with conversation thread +- Customer info sidebar +- Reply editor with attachments + +### Task 12: Knowledge Base (`docs/pages/examples/support/knowledge-base.md`) +- Tree navigation for categories +- Search functionality +- Collapsible article sections + +### Task 13: Contact List (`docs/pages/examples/crm/contacts.md`) +- DataTable with inline editing +- Company grouping +- Quick filters and export + +### Task 14: Deal Pipeline (`docs/pages/examples/crm/pipeline.md`) +- Kanban-style columns for sales stages +- Deal cards with value and probability +- Stage totals and summary stats + +### Task 15: Contact Detail (`docs/pages/examples/crm/contact-detail.md`) +- Customer header with key metrics +- Tabbed sections (Activity, Deals, Notes, Files) +- Activity timeline + +### Task 16: Analytics Dashboard (`docs/pages/examples/analytics/dashboard.md`) +- Multiple chart types (line, bar, pie, area) +- Date range picker +- Stat tiles with trends + +### Task 17: Report Builder (`docs/pages/examples/analytics/report-builder.md`) +- Query builder interface +- Chart type selector +- Live preview and export + +### Task 18: Onboarding Wizard (`docs/pages/examples/onboarding/wizard.md`) +- Multi-step stepper +- Form validation per step +- Progress indication + +### Task 19: Empty States Gallery (`docs/pages/examples/onboarding/empty-states.md`) +- Various empty state scenarios +- Different illustrations and CTAs +- Light/dark theme examples + +--- + +## Final Task: Verify and Commit All + +**Step 1: Start docs dev server and verify all pages** + +```bash +npm run docs:dev +``` + +Visit each page and verify it renders correctly in both light and dark themes. + +**Step 2: Create final commit if any fixes needed** + +```bash +git add -A +git commit -m "feat(docs): complete kitchen sink examples collection" +``` + +--- + +## Summary + +| Task | Page | Status | +|------|------|--------| +| 1 | Index & Directory Structure | Pending | +| 2 | Sidebar Navigation | Pending | +| 3 | Main Dashboard | Pending | +| 4 | Settings | Pending | +| 5 | User Management | Pending | +| 6 | Notifications | Pending | +| 7 | Product Catalog | Pending | +| 8 | Order Management | Pending | +| 9 | Product Editor | Pending | +| 10 | Ticket Queue | Pending | +| 11 | Ticket Detail | Pending | +| 12 | Knowledge Base | Pending | +| 13 | Contact List | Pending | +| 14 | Deal Pipeline | Pending | +| 15 | Contact Detail | Pending | +| 16 | Analytics Dashboard | Pending | +| 17 | Report Builder | Pending | +| 18 | Onboarding Wizard | Pending | +| 19 | Empty States Gallery | Pending |