Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
188
dss-mvp1/.storybook/preview.js
Normal file
188
dss-mvp1/.storybook/preview.js
Normal file
@@ -0,0 +1,188 @@
|
||||
/**
|
||||
* Storybook Preview Configuration
|
||||
*
|
||||
* Integrates DSS design tokens into Storybook:
|
||||
* - Applies tokens globally to all stories
|
||||
* - Configures Storybook UI with DSS colors
|
||||
* - Sets up theme switching with token variables
|
||||
* - Enables component stories to use own design system
|
||||
*/
|
||||
|
||||
// Import tokens generated from Figma
|
||||
// These would be auto-generated via build process from token exporters
|
||||
const DSSTokens = {
|
||||
colors: {
|
||||
primary: '#0066FF',
|
||||
secondary: '#FF6B00',
|
||||
success: '#00B600',
|
||||
warning: '#FFB800',
|
||||
danger: '#FF0000',
|
||||
text: '#1A1A1A',
|
||||
textLight: '#666666',
|
||||
surface: '#FFFFFF',
|
||||
background: '#F5F5F5',
|
||||
border: '#E0E0E0',
|
||||
},
|
||||
spacing: {
|
||||
xs: '4px',
|
||||
sm: '8px',
|
||||
md: '16px',
|
||||
lg: '24px',
|
||||
xl: '32px',
|
||||
},
|
||||
typography: {
|
||||
headingFamily: "'Inter', sans-serif",
|
||||
bodyFamily: "'Inter', sans-serif",
|
||||
monospaceFamily: "'Courier New', monospace",
|
||||
},
|
||||
borderRadius: {
|
||||
sm: '4px',
|
||||
md: '8px',
|
||||
lg: '12px',
|
||||
full: '9999px',
|
||||
},
|
||||
shadows: {
|
||||
sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
|
||||
md: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
||||
lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
};
|
||||
|
||||
// Create Storybook theme using DSS tokens
|
||||
const createStorybookTheme = () => ({
|
||||
base: 'light',
|
||||
colorPrimary: DSSTokens.colors.primary,
|
||||
colorSecondary: DSSTokens.colors.secondary,
|
||||
appBg: DSSTokens.colors.background,
|
||||
appContentBg: DSSTokens.colors.surface,
|
||||
appBorderColor: DSSTokens.colors.border,
|
||||
appBorderRadius: parseInt(DSSTokens.borderRadius.md),
|
||||
textColor: DSSTokens.colors.text,
|
||||
textInverseColor: '#FFFFFF',
|
||||
barTextColor: DSSTokens.colors.text,
|
||||
barBg: DSSTokens.colors.surface,
|
||||
barSelectedColor: DSSTokens.colors.primary,
|
||||
barHoverColor: DSSTokens.colors.primary,
|
||||
barBorderColor: DSSTokens.colors.border,
|
||||
inputBg: '#FFFFFF',
|
||||
inputBorder: DSSTokens.colors.border,
|
||||
inputTextColor: DSSTokens.colors.text,
|
||||
inputBorderRadius: parseInt(DSSTokens.borderRadius.md),
|
||||
brandUrl: 'https://dss.overbits.luz.uy',
|
||||
brandImage: '/dss-logo.svg',
|
||||
brandTitle: 'DSS Design System',
|
||||
});
|
||||
|
||||
// Register all CSS variables globally
|
||||
const registerCSSVariables = () => {
|
||||
const style = document.documentElement.style;
|
||||
|
||||
// Register color tokens
|
||||
Object.entries(DSSTokens.colors).forEach(([name, value]) => {
|
||||
style.setProperty(`--dss-color-${name}`, value);
|
||||
});
|
||||
|
||||
// Register spacing tokens
|
||||
Object.entries(DSSTokens.spacing).forEach(([name, value]) => {
|
||||
style.setProperty(`--dss-spacing-${name}`, value);
|
||||
});
|
||||
|
||||
// Register typography tokens
|
||||
Object.entries(DSSTokens.typography).forEach(([name, value]) => {
|
||||
style.setProperty(`--dss-typography-${name}`, value);
|
||||
});
|
||||
|
||||
// Register border radius tokens
|
||||
Object.entries(DSSTokens.borderRadius).forEach(([name, value]) => {
|
||||
style.setProperty(`--dss-radius-${name}`, value);
|
||||
});
|
||||
|
||||
// Register shadow tokens
|
||||
Object.entries(DSSTokens.shadows).forEach(([name, value]) => {
|
||||
style.setProperty(`--dss-shadow-${name}`, value);
|
||||
});
|
||||
};
|
||||
|
||||
// Export preview configuration
|
||||
export const preview = {
|
||||
parameters: {
|
||||
// Apply DSS theme to Storybook UI
|
||||
docs: {
|
||||
theme: createStorybookTheme(),
|
||||
},
|
||||
// Configure viewport options
|
||||
viewport: {
|
||||
viewports: {
|
||||
mobile: {
|
||||
name: 'Mobile',
|
||||
styles: { width: '375px', height: '812px' },
|
||||
type: 'mobile',
|
||||
},
|
||||
tablet: {
|
||||
name: 'Tablet',
|
||||
styles: { width: '768px', height: '1024px' },
|
||||
type: 'tablet',
|
||||
},
|
||||
desktop: {
|
||||
name: 'Desktop',
|
||||
styles: { width: '1280px', height: '720px' },
|
||||
type: 'desktop',
|
||||
},
|
||||
},
|
||||
},
|
||||
// Setup backgrounds
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
values: [
|
||||
{ name: 'light', value: DSSTokens.colors.surface },
|
||||
{ name: 'dark', value: '#1A1A1A' },
|
||||
{ name: 'gray', value: DSSTokens.colors.background },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// Global decorator to apply DSS tokens to all stories
|
||||
decorators: [
|
||||
(Story, context) => {
|
||||
// Register CSS variables
|
||||
registerCSSVariables();
|
||||
|
||||
// Get the story content
|
||||
const storyContent = Story();
|
||||
|
||||
// Create wrapper div with DSS token styles
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.cssText = `
|
||||
--dss-primary: ${DSSTokens.colors.primary};
|
||||
--dss-secondary: ${DSSTokens.colors.secondary};
|
||||
--dss-text: ${DSSTokens.colors.text};
|
||||
--dss-surface: ${DSSTokens.colors.surface};
|
||||
--dss-background: ${DSSTokens.colors.background};
|
||||
--dss-border: ${DSSTokens.colors.border};
|
||||
--dss-spacing-base: ${DSSTokens.spacing.md};
|
||||
--dss-font-body: ${DSSTokens.typography.bodyFamily};
|
||||
--dss-font-heading: ${DSSTokens.typography.headingFamily};
|
||||
--dss-radius: ${DSSTokens.borderRadius.md};
|
||||
font-family: ${DSSTokens.typography.bodyFamily};
|
||||
color: ${DSSTokens.colors.text};
|
||||
background-color: ${DSSTokens.colors.surface};
|
||||
padding: ${DSSTokens.spacing.lg};
|
||||
`;
|
||||
|
||||
// Append story content to wrapper
|
||||
if (typeof storyContent === 'string') {
|
||||
wrapper.innerHTML = storyContent;
|
||||
} else if (storyContent instanceof Node) {
|
||||
wrapper.appendChild(storyContent);
|
||||
}
|
||||
|
||||
return wrapper;
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Export Storybook theme (for use in stories)
|
||||
export const dssTheme = createStorybookTheme();
|
||||
|
||||
// Export DSS tokens for use in stories
|
||||
export const dssTokens = DSSTokens;
|
||||
Reference in New Issue
Block a user