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
164
admin-ui/src/stories/ComponentsDataDisplay.stories.js
Normal file
164
admin-ui/src/stories/ComponentsDataDisplay.stories.js
Normal file
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* Data Display
|
||||
* Components for displaying data
|
||||
* @generated 2025-12-10T21:48:22.319651
|
||||
*/
|
||||
export default {
|
||||
title: 'Components/Data Display',
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Components for displaying data'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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>Accordion</h3>
|
||||
<span class="radix-badge">@radix-ui/react-accordion</span>
|
||||
</div>
|
||||
<p class="description">A vertically stacked set of interactive headings that reveal content sections</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Avatar</h3>
|
||||
<span class="radix-badge">@radix-ui/react-avatar</span>
|
||||
</div>
|
||||
<p class="description">An image element with a fallback for user profile images</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">size:</span> <span class="badge">sm</span> <span class="badge">md</span> <span class="badge">lg</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Badge</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Displays a badge or label</p>
|
||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">secondary</span> <span class="badge">destructive</span> <span class="badge">outline</span></div></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Carousel</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">A carousel with embla-carousel</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: embla-carousel-react</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Chart</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Beautiful charts using Recharts</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: recharts</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Collapsible</h3>
|
||||
<span class="radix-badge">@radix-ui/react-collapsible</span>
|
||||
</div>
|
||||
<p class="description">An interactive component that expands/collapses content</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Data Table</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Powerful table with sorting, filtering, pagination</p>
|
||||
<div class="variants"></div>
|
||||
<div class="deps">deps: @tanstack/react-table</div>
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Item</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Generic list item component</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Kbd</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Keyboard key display</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Table</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Styled HTML table</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
<div class="component-card">
|
||||
<div class="card-header">
|
||||
<h3>Typography</h3>
|
||||
|
||||
</div>
|
||||
<p class="description">Text styling components</p>
|
||||
<div class="variants"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
Reference in New Issue
Block a user