Improve showcase pages: drawers, modals, badges, and Vite caching fix
- DTDrawer: storefront-matching dual-element bevel border, slide-in/out animations from correct edge, 99vh height, bold 2em header, box shadow - DTModal: interactive demos on Bevels page with all 5 mode variants - Badges: solid color fill with contrasting text (black on dark, white on light) instead of transparent fill with colored text - Animations: add dt-slide-right and dt-slide-left keyframes for drawers - Bevels page: remove trash "Button Bevels", add interactive modal/drawer demos, fix media frame to use real images with proper bevel styling - Advanced Cards: remove redundant media frame sections, rename "Menu Items" to "Buttons", remove DTButton/dt-btn references - Forms page: rename "Menu Items" to "Buttons" - Vite config: exclude design system packages from optimizeDeps pre-bundling and watch dist directories to prevent stale CSS during development Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael
@@ -1,10 +1,14 @@
|
||||
import { DTCard, DTMediaFrame } from '@dangerousthings/react';
|
||||
import { useState } from 'react';
|
||||
import { DTCard, DTModal, DTDrawer } from '@dangerousthings/react';
|
||||
import type { DTVariant } from '@dangerousthings/tokens';
|
||||
import { Section, Row, CodeLabel } from '../components/Section';
|
||||
|
||||
const modes: DTVariant[] = ['normal', 'emphasis', 'warning', 'success', 'other'];
|
||||
|
||||
export function BevelsPage() {
|
||||
const [modalVariant, setModalVariant] = useState<DTVariant | null>(null);
|
||||
const [drawerSide, setDrawerSide] = useState<'right' | 'left' | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1 className="page-title">Bevels</h1>
|
||||
@@ -21,55 +25,59 @@ export function BevelsPage() {
|
||||
<CodeLabel text="<DTCard> (no title prop)" />
|
||||
</Section>
|
||||
|
||||
<Section title="Button Bevels" description="Top-right corner cut. Filled buttons use direct clip-path, outline uses dual-element.">
|
||||
<Section title="Badge Bevels" description="Top-right bevel with dual-element technique. Color variants via CSS custom properties.">
|
||||
<Row>
|
||||
<button className="btn-primary" type="button">PRIMARY</button>
|
||||
<button className="btn-secondary" type="button">SECONDARY</button>
|
||||
<button className="btn-danger" type="button">DANGER</button>
|
||||
</Row>
|
||||
<CodeLabel text=".btn-primary | .btn-secondary | .btn-danger" />
|
||||
</Section>
|
||||
|
||||
<Section title="Badge Bevels" description="Top-right bevel with dual-element technique. Color variants via CSS custom properties.">
|
||||
<Row>
|
||||
<span className="badge">Default</span>
|
||||
<span className="badge badge-success">Success</span>
|
||||
<span className="badge badge-error">Error</span>
|
||||
<span className="badge badge-warning">Warning</span>
|
||||
<span className="badge badge-info">Info</span>
|
||||
<span className="badge">DEFAULT</span>
|
||||
<span className="badge badge-success">IN STOCK</span>
|
||||
<span className="badge badge-error">SOLD OUT</span>
|
||||
<span className="badge badge-warning">LAB</span>
|
||||
<span className="badge badge-info">NFC</span>
|
||||
</Row>
|
||||
<CodeLabel text=".badge | .badge-success | .badge-error | .badge-warning | .badge-info" />
|
||||
</Section>
|
||||
|
||||
<Section title="Media Frame Bevels" description="Diagonal opposite corners (top-left + bottom-right).">
|
||||
<DTMediaFrame>
|
||||
<div style={{ background: 'var(--color-primary)', width: '100%', aspectRatio: '16/9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ color: 'var(--color-bg)', fontWeight: 700 }}>MEDIA FRAME</span>
|
||||
<Section title="Media Frame Bevels" description="Diagonal opposite corners (top-left + bottom-right). Dual-element border with inner surface fill.">
|
||||
<div className="grid grid-cols-3 gap-dt-4">
|
||||
<div className="dt-bevel-media mode-normal" style={{ aspectRatio: '16/9' }}>
|
||||
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=600&h=338&fit=crop" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
</div>
|
||||
</DTMediaFrame>
|
||||
<CodeLabel text="<DTMediaFrame> or .dt-bevel-media" />
|
||||
</Section>
|
||||
|
||||
<Section title="Modal Bevels" description="Dual bottom bevels at bevel-lg scale.">
|
||||
<div className="dt-bevel-modal" style={{ background: 'var(--color-primary)', padding: 'var(--space-8)', textAlign: 'center' }}>
|
||||
<div style={{ background: 'var(--color-surface)', padding: 'var(--space-6)' }}>
|
||||
<div style={{ fontWeight: 700, textTransform: 'uppercase' }}>Modal Content</div>
|
||||
<div style={{ color: 'var(--color-text-muted)', marginTop: 'var(--space-2)' }}>Large dual bottom bevels</div>
|
||||
<div className="dt-bevel-media mode-emphasis" style={{ aspectRatio: '16/9' }}>
|
||||
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=338&fit=crop" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
</div>
|
||||
<div className="dt-bevel-media mode-warning" style={{ aspectRatio: '16/9' }} />
|
||||
</div>
|
||||
<CodeLabel text=".dt-bevel-modal" />
|
||||
<CodeLabel text=".dt-bevel-media | .dt-bevel-media (no img = 'MISSING MEDIA' placeholder)" />
|
||||
</Section>
|
||||
|
||||
<Section title="Drawer Bevels" description="Exposed-edge bevels for sliding panels.">
|
||||
<Section title="Modals" description="Beveled card dialog with backdrop blur. Click to open, click backdrop or press Escape to dismiss.">
|
||||
<Row>
|
||||
<div className="dt-bevel-drawer-right" style={{ background: 'var(--color-primary)', padding: 'var(--space-6)', width: 200, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ color: 'var(--color-bg)', fontWeight: 700 }}>RIGHT</span>
|
||||
</div>
|
||||
<div className="dt-bevel-drawer-left" style={{ background: 'var(--color-primary)', padding: 'var(--space-6)', width: 200, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<span style={{ color: 'var(--color-bg)', fontWeight: 700 }}>LEFT</span>
|
||||
</div>
|
||||
{modes.map(mode => (
|
||||
<button key={mode} className={`dt-menu-item mode-${mode}`} type="button" onClick={() => setModalVariant(mode)}>
|
||||
{mode.toUpperCase()} MODAL
|
||||
</button>
|
||||
))}
|
||||
</Row>
|
||||
<CodeLabel text=".dt-bevel-drawer-right | .dt-bevel-drawer-left" />
|
||||
<CodeLabel text="<DTModal variant='normal' visible onDismiss title='...'>content</DTModal>" />
|
||||
<DTModal visible={modalVariant !== null} onDismiss={() => setModalVariant(null)} variant={modalVariant ?? 'normal'} title={`${(modalVariant ?? 'normal').toUpperCase()} MODAL`}>
|
||||
<p style={{ marginBottom: 'var(--space-4)' }}>This is a <strong>{modalVariant}</strong> modal with beveled card shape, backdrop blur, and scale-in animation.</p>
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Click the backdrop or press Escape to dismiss.</p>
|
||||
</DTModal>
|
||||
</Section>
|
||||
|
||||
<Section title="Drawers" description="Sliding side panel with beveled edges. Click to open from either side.">
|
||||
<Row>
|
||||
<button className="dt-menu-item mode-emphasis" type="button" onClick={() => setDrawerSide('right')}>
|
||||
OPEN RIGHT DRAWER
|
||||
</button>
|
||||
<button className="dt-menu-item mode-other" type="button" onClick={() => setDrawerSide('left')}>
|
||||
OPEN LEFT DRAWER
|
||||
</button>
|
||||
</Row>
|
||||
<CodeLabel text="<DTDrawer position='right' heading='...' visible onDismiss>content</DTDrawer>" />
|
||||
<DTDrawer visible={drawerSide !== null} onDismiss={() => setDrawerSide(null)} position={drawerSide ?? 'right'} heading={`${(drawerSide ?? 'right').toUpperCase()} DRAWER`} headingVariant={drawerSide === 'left' ? 'other' : 'emphasis'}>
|
||||
<p style={{ marginBottom: 'var(--space-4)' }}>Sliding panel from the <strong>{drawerSide}</strong> edge with beveled corners and backdrop blur.</p>
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>Click the backdrop, press Escape, or click ✕ to dismiss.</p>
|
||||
</DTDrawer>
|
||||
</Section>
|
||||
|
||||
<Section title="Small Bevel Utility" description="For compact elements — arrows, stepper buttons.">
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { createElement, useState, type CSSProperties } from 'react';
|
||||
import {
|
||||
DTCard,
|
||||
DTButton,
|
||||
DTStaggerContainer,
|
||||
DTFeatureLegend,
|
||||
} from '@dangerousthings/react';
|
||||
import type { DTFeatureItem } from '@dangerousthings/react';
|
||||
import type { DTVariant } from '@dangerousthings/tokens';
|
||||
import { Section, Row, CodeLabel } from '../components/Section';
|
||||
import { Section, CodeLabel } from '../components/Section';
|
||||
|
||||
// Feature icons from dt-shopify-storefront
|
||||
import {
|
||||
@@ -91,7 +90,7 @@ export function CardsAdvancedPage() {
|
||||
<CodeLabel text="<DTCard progress={50} /> — height driven by --dt-card-progress" />
|
||||
</Section>
|
||||
|
||||
<Section title="Card Badges" description="Bottom-right chip badge on product image area. Inherits card mode color.">
|
||||
<Section title="Card Badges" description="Bottom-right chip badge on card product image area. Inherits card mode color.">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-dt-4">
|
||||
{[
|
||||
{ label: 'LAB', mode: 'warning' as DTVariant, img: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=400&h=400&fit=crop' },
|
||||
@@ -106,52 +105,10 @@ export function CardsAdvancedPage() {
|
||||
</DTCard>
|
||||
))}
|
||||
</div>
|
||||
<CodeLabel text=".dt-badge-parent > .dt-card-badge — badge positioned on image container" />
|
||||
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem', margin: 'var(--space-4) 0 var(--space-2)' }}>
|
||||
Also works on beveled media frames:
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-dt-4">
|
||||
{[
|
||||
{ label: 'LAB', mode: 'warning' as DTVariant, img: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=400&h=400&fit=crop' },
|
||||
{ label: 'BUNDLE', mode: 'other' as DTVariant, img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=400&h=400&fit=crop' },
|
||||
{ label: 'NFC', mode: 'normal' as DTVariant, img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=400&h=400&fit=crop' },
|
||||
].map(badge => (
|
||||
<div key={badge.label} className={`dt-bevel-media mode-${badge.mode}`} style={{ aspectRatio: '1', overflow: 'hidden' }}>
|
||||
<img src={badge.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
|
||||
<span className="dt-card-badge">{badge.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<CodeLabel text=".dt-bevel-media.mode-warning > .dt-card-badge" />
|
||||
|
||||
<p style={{ color: 'var(--color-text-muted)', fontSize: '0.75rem', margin: 'var(--space-4) 0 var(--space-2)' }}>
|
||||
Missing image placeholder (no img element):
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-dt-4">
|
||||
{(['warning', 'other', 'normal'] as DTVariant[]).map(mode => (
|
||||
<div key={mode} className={`dt-bevel-media mode-${mode}`} style={{ aspectRatio: '1' }} />
|
||||
))}
|
||||
</div>
|
||||
<CodeLabel text=".dt-bevel-media without child img — shows 'MISSING MEDIA' placeholder" />
|
||||
<CodeLabel text=".dt-badge-parent > .dt-card-badge — badge positioned on card image container" />
|
||||
</Section>
|
||||
|
||||
<Section title="Interactive Bevel Buttons" description="Outlined rectangle by default. Bottom-right bevel appears on hover/select, fills with mode color.">
|
||||
<Row>
|
||||
{modes.map(mode => (
|
||||
<DTButton key={mode} variant={mode}>{mode.toUpperCase()}</DTButton>
|
||||
))}
|
||||
</Row>
|
||||
<CodeLabel text="<DTButton variant='normal'> — hover for bevel + fill" />
|
||||
<Row style={{ marginTop: 'var(--space-4)' }}>
|
||||
{modes.map(mode => (
|
||||
<DTButton key={mode} variant={mode} selected>{mode.toUpperCase()} SEL</DTButton>
|
||||
))}
|
||||
</Row>
|
||||
<CodeLabel text="<DTButton variant='emphasis' selected /> — persistent bevel + fill" />
|
||||
</Section>
|
||||
|
||||
<Section title="Menu Items" description="Filter-style beveled menu items with active/selected states and level indentation.">
|
||||
<Section title="Buttons" description="Beveled buttons with active/selected states, mode colors, and level indentation.">
|
||||
<div style={{ maxWidth: 300 }}>
|
||||
{['All Products', 'NFC Implants', 'RFID Tags', 'Accessories', 'Lab Products'].map((item, i) => (
|
||||
<button
|
||||
|
||||
@@ -102,7 +102,7 @@ export function FormsPage() {
|
||||
<CodeLabel text=".dt-filter-header | .dt-filter-header.active" />
|
||||
</Section>
|
||||
|
||||
<Section title="Menu Items" description="Beveled filter menu items with active state and level indentation.">
|
||||
<Section title="Buttons" description="Beveled buttons with active state, mode colors, and level indentation.">
|
||||
<div style={{ maxWidth: 300 }}>
|
||||
{['All Products', 'NFC Implants', 'RFID Tags', 'Accessories', 'Lab Products'].map((name, i) => (
|
||||
<button
|
||||
|
||||
@@ -15,4 +15,16 @@ export default defineConfig({
|
||||
'@dangerousthings/web': path.resolve(__dirname, '../../web/dist'),
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
// Don't pre-bundle design system packages — they're local workspace deps
|
||||
// that change frequently during development. Pre-bundling caches them in
|
||||
// node_modules/.vite which causes stale CSS/JS after rebuilds.
|
||||
exclude: ['@dangerousthings/web', '@dangerousthings/react', '@dangerousthings/tokens'],
|
||||
},
|
||||
server: {
|
||||
// Watch design system dist directories for changes during dev
|
||||
watch: {
|
||||
ignored: ['!**/packages/web/dist/**', '!**/packages/react/dist/**', '!**/packages/tokens/dist/**'],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user