@maxsteinwender/sort-ui 0.1.0

package/README.md

@@ -0,0 +1,136 @@
+# Sort UI Design System
+
+A coded design system based on the [Sort UI Kit](https://sortui.company) — Figma components translated into production-ready Next.js components, documented in Storybook.
+
+## Overview
+
+| | |
+|---|---|
+| **Components** | 106 UI components across 26 categories |
+| **Stories** | 93 interactive Storybook stories + 10 documentation pages |
+| **Themes** | 4 themes (2 color schemes x light/dark) |
+| **Source** | [Sort UI Kit 1.3](https://sortui.company) (Figma) |
+| **Storybook** | [Live Documentation](http://localhost:6006) |
+
+## Tech Stack
+
+- **Framework:** Next.js 16 (App Router), TypeScript
+- **Styling:** Tailwind CSS v3 + CSS custom properties (design tokens)
+- **Components:** shadcn/ui (restyled with Sort UI tokens)
+- **Icons:** Remix Icons
+- **Documentation:** Storybook 10
+- **Charts:** Recharts
+- **Rich Text:** Lexical Editor
+
+## Quick Start
+
+```bash
+# Clone & install
+git clone <repo-url> sort-ui-design-system
+cd sort-ui-design-system
+npm install
+
+# Start Storybook (main entry point)
+npm run storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) to browse all components.
+
+## Theme System
+
+Sort UI supports 4 themes built on two color schemes:
+
+| Theme | Base | Accent | Mode |
+|-------|------|--------|------|
+| Theme 1 Light | Zinc | Blue | `light` |
+| Theme 1 Dark | Zinc | Blue | `dark` |
+| Theme 2 Light | Neutral | Orange | `theme-2` |
+| Theme 2 Dark | Neutral | Orange | `theme-2-dark` |
+
+Themes are applied via CSS classes on the root element. Switch between them in Storybook using the theme toolbar.
+
+## Component Categories
+
+| Category | Components |
+|----------|-----------|
+| **Actions** | Button, ButtonGroup, LinkButton, ControlButton, FilterButton, SocialButton |
+| **Avatar** | Avatar, AvatarGroup, AvatarButton, AvatarUpload |
+| **Badge** | Badge, StatusBadge, Chip, Label |
+| **Charts** | LineChart, BarChart, DonutChart, PieChart |
+| **Checkbox** | Checkbox, CheckboxWithText, CheckboxList, CheckboxCard |
+| **Date Picker** | DatePicker (Calendar, Range, Popover compositions) |
+| **Feedback** | Tooltip, InlineTips, EmptyState, Divider |
+| **File Upload** | FileUploadArea, FileUploadCard, FileUpload (composition) |
+| **Forms** | InputField, InputButton, InputCaption, TextAreaField, SelectInput |
+| **Grid Table** | GridTableHeaderItem, GridTableSlotItem, GridTableRow |
+| **Navigation** | Breadcrumb, Paginator, DropdownMenu, Sidebar, SidebarCard |
+| **Progress** | ProgressBar, RadialProgressBar |
+| **Radio** | RadioButton, RadioButtonWithText, RadioButtonList, RadioButtonCard |
+| **Selection** | ToggleGroup, SelectMenu, SelectMenuItem |
+| **Slider** | Slider, SliderRange, DataRangeSlider, SliderInput, SliderRangeInput |
+| **Stepper** | HorizontalStepper, VerticalStepper, StepperIcon, StepperNumber |
+| **Switch** | Switch, SwitchWithText, SwitchList |
+| **Table** | TableHeaderItem, TableItem, TableRowSort, TablePagination, TableSkeletonRow |
+| **Tabs** | TabItem, TabList, UnderlineTabItem, UnderlineTabs |
+| **Code** | CodeBlock, MarkdownEditor |
+| **Layout** | Userbar, SidebarMenuItem, AccordionItem |
+
+## Project Structure
+
+```
+sort-ui-design-system/
+├── src/
+│   ├── components/
+│   │   └── ui/              # 106 restyled shadcn/ui components
+│   ├── stories/             # 93 Storybook stories + 10 MDX docs
+│   ├── tokens/              # Figma token exports (JSON)
+│   └── app/                 # Next.js app (redirects to Storybook)
+├── .storybook/              # Storybook configuration
+├── features/                # Component specs (PROJ-1 to PROJ-85)
+├── docs/
+│   ├── PRD.md               # Product vision
+│   └── COMPONENT-PATTERNS.md # Token & code patterns reference
+└── public/
+    ├── fonts/               # Redaction font files
+    ├── icons/               # Brand & file type icons
+    └── userpics/            # Demo avatar images
+```
+
+## Scripts
+
+```bash
+npm run storybook        # Start Storybook (port 6006)
+npm run build-storybook  # Build static Storybook
+npm run dev              # Next.js dev server
+npm run build            # Next.js production build
+npm run lint             # ESLint
+```
+
+## Design Tokens
+
+Tokens are exported from Figma and converted to CSS custom properties. The token layer maps Sort UI's design decisions to Tailwind utility classes:
+
+- **Colors:** Semantic tokens (background, foreground, primary, muted, etc.)
+- **Shadows:** shadow-default, shadow-card, shadow-focus, shadow-popover
+- **Typography:** Geist (sans) + Geist Mono + Redaction (display)
+- **Spacing & Radius:** Consistent scale via Tailwind config
+
+See `docs/COMPONENT-PATTERNS.md` for the complete token mapping reference.
+
+## Sort UI Ecosystem
+
+This coded design system is one part of the Sort UI ecosystem:
+
+- **Figma UI Kit** — [Sort UI 1.3](https://sortui.company) — Design source of truth
+- **Coded Design System** — This repo — Production-ready components
+- **Framer Kit** — [Sort UI Framer](https://sortui.company/framer) — No-code website builder components
+
+## Credits
+
+- **Sort UI Kit** by [sortui.company](https://sortui.company) — The Figma design system this project is based on
+- **shadcn/ui** — Component primitives
+- **Remix Icons** — Icon library
+
+## License
+
+Private project. Sort UI Kit license applies to design tokens and visual design.