125 lines
5.1 KiB
Markdown
125 lines
5.1 KiB
Markdown
# PettyUI Kitchen Sink Showcase
|
|
|
|
## Overview
|
|
|
|
A single-page component showcase app (`packages/showcase/`) that displays every PettyUI component grouped by category. Each component shows its name, description, and a live interactive demo. Built with Vite + SolidJS + Tailwind v4.
|
|
|
|
## Page Structure
|
|
|
|
Vertical scroll, sectioned by category. Sticky top bar with project title and TOC dropdown for jumping to categories. Smooth scroll behavior with scroll-margin offsets for anchor links.
|
|
|
|
### Sticky Header
|
|
|
|
- "PettyUI" branding left
|
|
- Category quick-links right (horizontal list on desktop, dropdown on mobile)
|
|
|
|
### Category Sections
|
|
|
|
Each section has:
|
|
- Category title (h2) with a horizontal rule
|
|
- Components listed vertically within the section
|
|
|
|
### Component Blocks
|
|
|
|
Each component block contains:
|
|
- Component name (h3)
|
|
- Description text (pulled from registry metadata)
|
|
- Demo area: bordered container with the live interactive demo inside
|
|
|
|
## Categories & Components (44 total)
|
|
|
|
### 1. Layout & Display (6)
|
|
- **Avatar** — image with fallback initials
|
|
- **Badge** — status indicator labels (info, success, warning, error variants)
|
|
- **Card** — header/content/footer container with sample content
|
|
- **Image** — image with fallback placeholder
|
|
- **Separator** — horizontal and vertical dividers
|
|
- **Skeleton** — loading placeholders in different shapes
|
|
|
|
### 2. Inputs & Forms (14)
|
|
- **Button** — primary, secondary, outline, ghost variants
|
|
- **TextField** — text input with label, placeholder, description, error state
|
|
- **NumberField** — numeric input with increment/decrement buttons
|
|
- **Checkbox** — checked, unchecked, indeterminate states
|
|
- **Switch** — on/off toggle
|
|
- **RadioGroup** — group of 3 radio options
|
|
- **Slider** — range slider with value display
|
|
- **Toggle** — pressed/unpressed states
|
|
- **ToggleGroup** — single and multi-select toggle groups
|
|
- **Select** — dropdown with grouped options
|
|
- **Combobox** — searchable select with filtering
|
|
- **Listbox** — inline selectable list
|
|
- **Form** — complete form with Zod validation, multiple field types, submit + error display
|
|
- **DatePicker** — date input with calendar dropdown
|
|
|
|
### 3. Navigation (8)
|
|
- **Link** — internal, external, disabled states
|
|
- **Breadcrumbs** — 3-level breadcrumb trail
|
|
- **Tabs** — 3 tabs with content panels
|
|
- **Accordion** — 3 collapsible sections
|
|
- **Collapsible** — single expand/collapse section
|
|
- **Pagination** — page navigation with ellipsis
|
|
- **NavigationMenu** — horizontal nav with dropdown submenus
|
|
- **Wizard** — 3-step wizard flow
|
|
|
|
### 4. Overlays (9)
|
|
- **Dialog** — modal with title, description, close
|
|
- **AlertDialog** — confirmation dialog with cancel/action
|
|
- **Drawer** — slide-in panel from right
|
|
- **Popover** — floating content panel with arrow
|
|
- **Tooltip** — hover tooltip on a button
|
|
- **HoverCard** — rich preview card on hover
|
|
- **DropdownMenu** — action menu with groups and separators
|
|
- **ContextMenu** — right-click context menu
|
|
- **CommandPalette** — search-driven command menu (opened via button)
|
|
|
|
### 5. Feedback & Status (4)
|
|
- **Alert** — info, success, warning, error variants
|
|
- **Toast** — button that triggers a temporary notification
|
|
- **Progress** — determinate progress bar at 60%
|
|
- **Meter** — value gauge indicator
|
|
|
|
### 6. Data (3)
|
|
- **Calendar** — month grid with selectable dates
|
|
- **DataTable** — sortable table with sample data rows
|
|
- **VirtualList** — virtualized list of 10,000 items
|
|
|
|
## Tech Stack
|
|
|
|
- **Package**: `packages/showcase/`
|
|
- **Build**: Vite + vite-plugin-solid
|
|
- **Styling**: Tailwind CSS v4
|
|
- **Imports**: Direct source imports via workspace path aliases (`pettyui/*` -> `../core/src/components/*/index.ts`)
|
|
- **Dev**: `pnpm dev` from showcase package
|
|
|
|
## File Structure
|
|
|
|
```
|
|
packages/showcase/
|
|
package.json
|
|
vite.config.ts
|
|
tailwind.config.ts (if needed for v4)
|
|
index.html
|
|
src/
|
|
index.tsx (mount point)
|
|
app.tsx (main page layout, sticky header, category sections)
|
|
sections/
|
|
layout-display.tsx (Avatar, Badge, Card, Image, Separator, Skeleton)
|
|
inputs-forms.tsx (Button, TextField, NumberField, Checkbox, Switch, RadioGroup, Slider, Toggle, ToggleGroup, Select, Combobox, Listbox, Form, DatePicker)
|
|
navigation.tsx (Link, Breadcrumbs, Tabs, Accordion, Collapsible, Pagination, NavigationMenu, Wizard)
|
|
overlays.tsx (Dialog, AlertDialog, Drawer, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, CommandPalette)
|
|
feedback-status.tsx (Alert, Toast, Progress, Meter)
|
|
data.tsx (Calendar, DataTable, VirtualList)
|
|
```
|
|
|
|
## Styling Approach
|
|
|
|
Components are headless — each demo applies Tailwind classes directly to the component parts to make them visible and interactive. Demos should look clean and professional but don't need to be production-grade designs. The goal is to show what each component does, not to be a design system showcase.
|
|
|
|
## Scroll Behavior
|
|
|
|
- `scroll-behavior: smooth` on html
|
|
- Each category section has an `id` for anchor linking
|
|
- `scroll-margin-top` on sections to offset the sticky header
|
|
- No sidebar — the sticky header contains the category links
|