feat: Add DSS infrastructure, remove legacy admin-ui code
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
- Remove legacy admin-ui/js/ vanilla JS components - Add .dss/ directory with core tokens, skins, themes - Add Storybook configuration and generated stories - Add DSS management scripts (dss-services, dss-init, dss-setup, dss-reset) - Add MCP command definitions for DSS plugin - Add Figma sync architecture and scripts - Update pre-commit hooks with documentation validation - Fix JSON trailing commas in skin files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DSS
146
admin-ui/src/stories/ComponentsOverlay.stories.js
Normal file
146
admin-ui/src/stories/ComponentsOverlay.stories.js
Normal file
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* Overlay
|
||||
* Modal and overlay components
|
||||
* @generated 2025-12-10T21:48:22.320136
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Overlay',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Modal and overlay components'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styles = `
|
||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
||||
.component-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
||||
.radix-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
||||
.variants { margin-bottom: 0.5rem; }
|
||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.25rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
||||
`;
|
||||
|
||||
export const Overview = {
|
||||
name: 'Component Catalog',
|
||||
render: () => `
|
||||
<style>${styles}</style>
|
||||
<div class="component-grid">
|
||||
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Alert Dialog</h3>
|
||||
<span class="radix-badge">@radix-ui/react-alert-dialog</span>
|
||||
</div>
|
||||
<p class="description">A modal dialog that interrupts user flow with important information</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Context Menu</h3>
|
||||
<span class="radix-badge">@radix-ui/react-context-menu</span>
|
||||
</div>
|
||||
<p class="description">Right-click context menu with keyboard support</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Dialog</h3>
|
||||
<span class="radix-badge">@radix-ui/react-dialog</span>
|
||||
</div>
|
||||
<p class="description">A modal dialog for content display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Drawer</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">A drawer component extending dialog</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: vaul</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Dropdown Menu</h3>
|
||||
<span class="radix-badge">@radix-ui/react-dropdown-menu</span>
|
||||
</div>
|
||||
<p class="description">Menu displayed on trigger interaction</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Hover Card</h3>
|
||||
<span class="radix-badge">@radix-ui/react-hover-card</span>
|
||||
</div>
|
||||
<p class="description">Content appearing on hover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Popover</h3>
|
||||
<span class="radix-badge">@radix-ui/react-popover</span>
|
||||
</div>
|
||||
<p class="description">Floating content panel</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Sheet</h3>
|
||||
<span class="radix-badge">@radix-ui/react-dialog</span>
|
||||
</div>
|
||||
<p class="description">Side panel overlay</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">side:</span> <span class="badge">top</span> <span class="badge">right</span> <span class="badge">bottom</span> <span class="badge">left</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Tooltip</h3>
|
||||
<span class="radix-badge">@radix-ui/react-tooltip</span>
|
||||
</div>
|
||||
<p class="description">Informative popup on hover</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user