Skip to content

Commit 8e64eb5

Browse files
robdimarco-atxprobdimarco-atxp
authored
Add vanilla HTML/CSS/JS export with interactive showcase (#3)
This adds a complete vanilla HTML/CSS/JS version of the ATXP Design System for use in environments where React is not available. Key features: - 20+ components across 8 HTML files (buttons, cards, inputs, alerts, dialogs, forms, UI elements, interactive components) - Interactive showcase demonstrating component composition in a dashboard-style layout - Vanilla JavaScript for dialogs, theme switching, toasts, tabs, accordions - Build script that creates deployable site + downloadable archive (136KB) - Automated component extraction tool from React sources - Full theme support (light, dark, ATXP, DBG) via CSS variables - Zero dependencies - fully self-contained Components: - Forms: Checkbox, Radio, Select, Textarea - UI Elements: Badge, Avatar, Separator - Interactive: Tabs, Accordion, Progress, Skeleton - Layout: Button, Card, Input, Alert, Dialog Build & Deploy: - Build script copies dist/ and updates paths for deployment - Creates tar.gz archive for easy distribution - Render.com deployment configuration - .gitignore excludes build artifacts and backups Documentation: - Updated CLAUDE.md with vanilla maintenance reminders - Updated main README.md with vanilla quick start - Vanilla README.md with complete usage guide
1 parent b94e07a commit 8e64eb5

17 files changed

Lines changed: 3901 additions & 0 deletions

‎CLAUDE.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,23 @@ mcp__figma__get_design_context({
4141

4242
**Patterns**: Use native HTML elements, `.sr-only` for accessibility, `peer-*` modifiers for state styling, design tokens (`border-primary`, `bg-background`), avoid Radix UI unless complex state needed
4343

44+
5. **Update Vanilla Components** (IMPORTANT):
45+
- Extract component classes: `node vanilla/extract-components.cjs ComponentName`
46+
- Update relevant vanilla HTML files in `vanilla/components/`
47+
- If new component: Create new `.html` file with examples
48+
- If modified component: Update existing examples to match new styles/variants
49+
- Add component to `vanilla/index.html` showcase if not already present
50+
- Update `vanilla/README.md` with new component documentation
51+
- Test: Open HTML files in browser, verify styling matches React version
52+
53+
**Vanilla Component Files**:
54+
- `vanilla/components/forms.html` - Checkbox, Radio, Select, Textarea
55+
- `vanilla/components/ui-elements.html` - Badge, Avatar, Separator
56+
- `vanilla/components/interactive.html` - Tabs, Accordion, Progress, Skeleton
57+
- `vanilla/components/button.html`, `card.html`, `input.html`, `alert.html`, `dialog.html`
58+
59+
**Important**: The vanilla HTML/CSS/JS version must stay in sync with React components for consistency across frameworks.
60+
4461
---
4562

4663
## Adding a New Theme

‎README.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,87 @@ function MyCustomComponent() {
149149

150150
**Note**: This is completely optional. The design system components work perfectly without any Tailwind setup in your project.
151151

152+
## Vanilla HTML/CSS/JS Version
153+
154+
Can't use React? **We've got you covered!** The ATXP Design System includes a complete vanilla HTML/CSS/JavaScript version of all components for projects that can't use React.
155+
156+
### Quick Start
157+
158+
```html
159+
<!DOCTYPE html>
160+
<html lang="en" data-theme="light">
161+
<head>
162+
<!-- Include the compiled CSS -->
163+
<link rel="stylesheet" href="node_modules/@atxp/design-system/dist/styles.css">
164+
</head>
165+
<body>
166+
<!-- Use components with pure HTML -->
167+
<button class="inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-lg text-sm font-medium leading-5 transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2">
168+
Click Me
169+
</button>
170+
171+
<!-- Include vanilla JS for interactive components (optional) -->
172+
<script src="node_modules/@atxp/design-system/vanilla/js/components.js"></script>
173+
</body>
174+
</html>
175+
```
176+
177+
### Available Components
178+
179+
The vanilla version includes 20+ components:
180+
181+
- **Form Components**: Checkbox, Radio, Select, Textarea, Input
182+
- **UI Elements**: Badge, Avatar, Separator
183+
- **Interactive**: Tabs, Accordion, Progress, Skeleton
184+
- **Layout**: Button, Card, Alert, Dialog, Toast
185+
186+
### Features
187+
188+
- ✅ **Zero Dependencies** - Just HTML, CSS, and vanilla JavaScript
189+
- ✅ **All 4 Themes** - Light, Dark, ATXP, DBG with live switching
190+
- ✅ **Fully Accessible** - ARIA labels, keyboard navigation, screen reader support
191+
- ✅ **Same Design** - Matches the React version pixel-perfect
192+
- ✅ **Interactive Components** - Dialog, Tabs, Accordion, Toast with vanilla JS
193+
194+
### Documentation
195+
196+
- **Main Guide**: [`vanilla/README.md`](./vanilla/README.md)
197+
- **Live Examples**: Open [`vanilla/index.html`](./vanilla/index.html) in your browser
198+
- **Component Pages**:
199+
- [`vanilla/components/forms.html`](./vanilla/components/forms.html) - Complete form elements
200+
- [`vanilla/components/ui-elements.html`](./vanilla/components/ui-elements.html) - Badges, avatars, separators
201+
- [`vanilla/components/interactive.html`](./vanilla/components/interactive.html) - Tabs, accordions, progress
202+
- And more individual component examples
203+
204+
### Theme Switching
205+
206+
```html
207+
<!-- Add theme selector -->
208+
<select data-theme-control>
209+
<option value="light">Light</option>
210+
<option value="dark">Dark</option>
211+
<option value="atxp">ATXP</option>
212+
<option value="dbg">DBG</option>
213+
</select>
214+
215+
<!-- JavaScript handles theme switching automatically -->
216+
<script src="vanilla/js/components.js"></script>
217+
```
218+
219+
### Extraction Tool
220+
221+
Keep vanilla components in sync with React:
222+
223+
```bash
224+
# Extract a single component's classes
225+
node vanilla/extract-components.cjs Button
226+
227+
# Extract all components
228+
node vanilla/extract-components.cjs --all
229+
```
230+
231+
See [`vanilla/README.md`](./vanilla/README.md) for complete documentation, examples, and JavaScript API reference.
232+
152233
## Development
153234

154235
### Prerequisites

‎render.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,13 @@ services:
66
buildCommand: pnpm install --frozen-lockfile && pnpm run build-storybook
77
staticPublishPath: storybook-static
88
autoDeployTrigger: commit
9+
10+
- type: web
11+
name: design-system-vanilla
12+
runtime: static
13+
repo: https://github.com/atxp-dev/design-system
14+
buildCommand: pnpm install --frozen-lockfile && chmod +x vanilla/build.sh && ./vanilla/build.sh
15+
staticPublishPath: vanilla
16+
autoDeployTrigger: commit
17+
918
version: "1"

‎vanilla/.gitignore‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Build artifacts
2+
dist/
3+
*.tar.gz
4+
*.zip
5+
6+
# Backup files
7+
*.bak
8+
*~
9+
10+
# Extracted component data
11+
extracted/
12+
13+
# OS files
14+
.DS_Store

0 commit comments

Comments
 (0)