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
84
dss-claude-plugin/commands/dss-init.md
Normal file
84
dss-claude-plugin/commands/dss-init.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
name: dss-init
|
||||
description: Full DSS workflow - reset, structure, analyze, sync, build CSS
|
||||
arguments:
|
||||
- name: flags
|
||||
description: Optional flags (--reset, --skip-analysis)
|
||||
required: false
|
||||
---
|
||||
|
||||
# DSS Init Command - Full Workflow Pipeline
|
||||
|
||||
Complete DSS initialization and build pipeline for admin-ui and storybook targets.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/dss-init [--reset] [--skip-analysis]
|
||||
```
|
||||
|
||||
## Full Workflow
|
||||
|
||||
1. **Reset** (with --reset flag)
|
||||
- Clears all DSS data, tokens, themes
|
||||
- Resets skins to empty state
|
||||
- Removes generated CSS/stories
|
||||
|
||||
2. **Validate Environment**
|
||||
- Python3, Node.js, style-dictionary
|
||||
- FIGMA_TOKEN availability
|
||||
|
||||
3. **Create Structure**
|
||||
- `.dss/data/_system/themes/` - CSS output
|
||||
- `.dss/data/_system/tokens/` - Token JSON
|
||||
- Database initialization
|
||||
|
||||
4. **Analyze Targets**
|
||||
- admin-ui: web app consumer
|
||||
- storybook: documentation
|
||||
|
||||
5. **Figma Sync** (MCP required)
|
||||
- Uses `dss_sync_figma` tool
|
||||
- Populates tokens from Figma
|
||||
|
||||
6. **Build CSS**
|
||||
- Runs style-dictionary
|
||||
- Generates tokens.css, _tokens.scss, tokens.json
|
||||
|
||||
## Instructions for Claude
|
||||
|
||||
When the user runs this command:
|
||||
|
||||
1. Execute: `scripts/dss-init.sh [flags]`
|
||||
|
||||
2. If status shows "AWAITING FIGMA SYNC":
|
||||
- Run `dss_sync_figma` MCP tool to populate tokens
|
||||
- Re-run `scripts/dss-init.sh` to build CSS
|
||||
|
||||
3. If status shows "READY":
|
||||
- admin-ui can import from `.dss/data/_system/themes/`
|
||||
|
||||
## Flags
|
||||
|
||||
- `--reset`: Clear everything first (fresh start)
|
||||
- `--skip-analysis`: Skip code analysis step
|
||||
|
||||
## Typical Workflow
|
||||
|
||||
```bash
|
||||
# Fresh start
|
||||
scripts/dss-init.sh --reset
|
||||
|
||||
# Populate tokens (MCP tool)
|
||||
dss_sync_figma
|
||||
|
||||
# Build CSS
|
||||
scripts/dss-init.sh
|
||||
|
||||
# admin-ui imports from .dss/data/_system/themes/
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/dss-figma` - Sync tokens from Figma
|
||||
- `/dss-analyze` - Analyze specific project
|
||||
68
dss-claude-plugin/commands/dss-reset.md
Normal file
68
dss-claude-plugin/commands/dss-reset.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
name: dss-reset
|
||||
description: Reset DSS to clean state (clear all data, skins, tokens)
|
||||
arguments:
|
||||
- name: confirm
|
||||
description: Pass --confirm to execute (otherwise dry-run)
|
||||
required: false
|
||||
---
|
||||
|
||||
# DSS Reset Command
|
||||
|
||||
Clear all DSS data, skins, tokens, and generated files. Returns to clean state awaiting Figma sync.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/dss-reset [--confirm]
|
||||
```
|
||||
|
||||
Without `--confirm`, runs in dry-run mode showing what would be deleted.
|
||||
|
||||
## What This Clears
|
||||
|
||||
1. `.dss/data/` - Projects, teams, cache, activity
|
||||
2. `.dss/dss.db` - SQLite database
|
||||
3. `admin-ui/css/dss-*.css` - Generated CSS files
|
||||
4. `admin-ui/src/components/*.stories.js` - Generated stories
|
||||
5. `admin-ui/src/components/ds-*.js` - Generated components
|
||||
6. `dss/core_tokens/tokens.json` - Reset to empty
|
||||
7. `dss-claude-plugin/core/skins/*.json` - Reset to awaiting sync
|
||||
8. `.dss/logs/` - Clear log files
|
||||
|
||||
## Instructions for Claude
|
||||
|
||||
When the user runs this command:
|
||||
|
||||
1. Check if `--confirm` flag is provided
|
||||
2. Execute reset script:
|
||||
```bash
|
||||
scripts/dss-reset.sh [--confirm]
|
||||
```
|
||||
3. Show what was cleared (or would be cleared in dry-run)
|
||||
4. Remind user to run `/dss-init` to re-initialize structure
|
||||
|
||||
## Safety
|
||||
|
||||
- Default is DRY RUN - no changes unless `--confirm` is passed
|
||||
- Regenerates hash manifest after reset
|
||||
- Stops any running Storybook processes
|
||||
|
||||
## Example Output (Dry Run)
|
||||
|
||||
```
|
||||
DSS Full Reset
|
||||
==========================================
|
||||
|
||||
DRY RUN MODE - No changes will be made
|
||||
Run with --confirm to execute
|
||||
|
||||
1. Clearing .dss/data/ structure...
|
||||
Would run: rm -rf .dss/data/projects/* ...
|
||||
2. Resetting database...
|
||||
Would run: rm -f .dss/dss.db
|
||||
...
|
||||
|
||||
DRY RUN COMPLETE
|
||||
Run with --confirm to execute
|
||||
```
|
||||
109
dss-claude-plugin/commands/dss-services.md
Normal file
109
dss-claude-plugin/commands/dss-services.md
Normal file
@@ -0,0 +1,109 @@
|
||||
---
|
||||
name: dss-services
|
||||
description: Manage all DSS development services (API, admin-ui, Storybook)
|
||||
arguments:
|
||||
- name: action
|
||||
description: Action to perform (start, stop, status, restart, logs)
|
||||
required: true
|
||||
- name: service
|
||||
description: Specific service (api, admin-ui, storybook) - optional
|
||||
required: false
|
||||
---
|
||||
|
||||
# DSS Services Command
|
||||
|
||||
Manage all DSS development services from a single command.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/dss-services <action> [service]
|
||||
```
|
||||
|
||||
## Actions
|
||||
|
||||
| Action | Description |
|
||||
|--------|-------------|
|
||||
| start | Start all services (or specific service) |
|
||||
| stop | Stop all services (or specific service) |
|
||||
| status | Show status of all services |
|
||||
| restart | Restart all services (or specific service) |
|
||||
| logs | Show service logs |
|
||||
|
||||
## Services
|
||||
|
||||
| Service | Port | Description |
|
||||
|---------|------|-------------|
|
||||
| api | 8000 | FastAPI REST server |
|
||||
| admin-ui | 3456 | Vite dev server |
|
||||
| storybook | 6006 | Storybook design docs |
|
||||
|
||||
## Examples
|
||||
|
||||
```bash
|
||||
# Start all services
|
||||
/dss-services start
|
||||
|
||||
# Check status
|
||||
/dss-services status
|
||||
|
||||
# Start only the API server
|
||||
/dss-services start api
|
||||
|
||||
# Stop Storybook
|
||||
/dss-services stop storybook
|
||||
|
||||
# View admin-ui logs
|
||||
/dss-services logs admin-ui
|
||||
|
||||
# Restart everything
|
||||
/dss-services restart
|
||||
```
|
||||
|
||||
## Instructions for Claude
|
||||
|
||||
When the user runs this command:
|
||||
|
||||
1. Execute: `scripts/dss-services.sh <action> [service]`
|
||||
|
||||
2. Present the output in a clean format
|
||||
|
||||
3. For `status` action, show a table with service states
|
||||
|
||||
4. After `start`, provide clickable URLs:
|
||||
- API: http://localhost:8000
|
||||
- admin-ui: http://localhost:3456
|
||||
- Storybook: http://localhost:6006
|
||||
|
||||
## Service Details
|
||||
|
||||
### API Server (port 8000)
|
||||
- FastAPI REST API
|
||||
- Endpoints: projects, figma, health, config
|
||||
- Command: `uvicorn apps.api.server:app --reload`
|
||||
- Log: `/tmp/dss-api.log`
|
||||
|
||||
### Admin UI (port 3456)
|
||||
- Preact/Vite development server
|
||||
- Design system management interface
|
||||
- Command: `npm run dev`
|
||||
- Log: `/tmp/dss-admin-ui.log`
|
||||
|
||||
### Storybook (port 6006)
|
||||
- Component documentation
|
||||
- Token visualization
|
||||
- Command: `npm run storybook`
|
||||
- Log: `/tmp/dss-storybook.log`
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If a service fails to start:
|
||||
1. Check the log file: `/dss-services logs <service>`
|
||||
2. Verify port is not in use: `lsof -i :<port>`
|
||||
3. Check dependencies are installed
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/dss-setup` - Full environment setup
|
||||
- `/dss-init` - Initialize DSS structure
|
||||
- `/dss-reset` - Reset to clean state
|
||||
70
dss-claude-plugin/commands/dss-setup.md
Normal file
70
dss-claude-plugin/commands/dss-setup.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
name: dss-setup
|
||||
description: Complete DSS setup - MCP config, init, and start servers
|
||||
arguments:
|
||||
- name: flags
|
||||
description: Optional flags (--reset, --skip-servers)
|
||||
required: false
|
||||
---
|
||||
|
||||
# DSS Setup Command
|
||||
|
||||
Complete DSS environment setup including MCP configuration, initialization, and development servers.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/dss-setup [--reset] [--skip-servers]
|
||||
```
|
||||
|
||||
## What This Does
|
||||
|
||||
1. **Generate MCP Config**
|
||||
- Creates `.mcp.json` with absolute paths
|
||||
- Configures DSS MCP server connection
|
||||
|
||||
2. **Check Dependencies**
|
||||
- Python venv setup
|
||||
- Node modules installation
|
||||
|
||||
3. **Initialize DSS** (calls dss-init.sh)
|
||||
- Directory structure
|
||||
- Database initialization
|
||||
- Target analysis (admin-ui, storybook)
|
||||
- Token structure
|
||||
- Hash manifest
|
||||
|
||||
4. **Start Servers**
|
||||
- admin-ui on port 3456
|
||||
- Storybook on port 6006
|
||||
|
||||
## Instructions for Claude
|
||||
|
||||
When the user runs this command:
|
||||
|
||||
1. Execute: `scripts/dss-setup.sh [flags]`
|
||||
|
||||
2. After completion, remind user to restart Claude Code to load MCP server
|
||||
|
||||
## Flags
|
||||
|
||||
- `--reset`: Clear all DSS data first (fresh start)
|
||||
- `--skip-servers`: Don't start development servers
|
||||
|
||||
## Services
|
||||
|
||||
| Service | Port | URL |
|
||||
|---------|------|-----|
|
||||
| admin-ui | 3456 | http://localhost:3456 |
|
||||
| Storybook | 6006 | http://localhost:6006 |
|
||||
|
||||
## Logs
|
||||
|
||||
- `/tmp/dss-admin-ui.log`
|
||||
- `/tmp/dss-storybook.log`
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/dss-init` - Initialize DSS structure only
|
||||
- `/dss-reset` - Reset to clean state
|
||||
- `/dss-figma` - Sync tokens from Figma
|
||||
@@ -2,27 +2,7 @@
|
||||
"meta": {
|
||||
"id": "base",
|
||||
"version": "1.0.0",
|
||||
"description": "Foundation tokens shared across all skins"
|
||||
"description": "Base skin - awaiting Figma sync"
|
||||
},
|
||||
"tokens": {
|
||||
"colors": {
|
||||
"transparent": "transparent",
|
||||
"current": "currentColor",
|
||||
"white": "#ffffff",
|
||||
"black": "#000000"
|
||||
},
|
||||
"spacing": {
|
||||
"0": "0px",
|
||||
"1": "4px",
|
||||
"2": "8px",
|
||||
"4": "16px",
|
||||
"8": "32px"
|
||||
},
|
||||
"typography": {
|
||||
"fontFamily": {
|
||||
"sans": ["system-ui", "sans-serif"],
|
||||
"mono": ["monospace"]
|
||||
}
|
||||
}
|
||||
}
|
||||
"tokens": {}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,9 @@
|
||||
{
|
||||
"meta": {
|
||||
"id": "classic",
|
||||
"version": "2.0.0",
|
||||
"parent": "base"
|
||||
"version": "1.0.0",
|
||||
"description": "Classic skin - awaiting Figma sync",
|
||||
"extends": "base"
|
||||
},
|
||||
"tokens": {
|
||||
"colors": {
|
||||
"primary": "#3B82F6",
|
||||
"secondary": "#10B981",
|
||||
"danger": "#EF4444",
|
||||
"background": "#F3F4F6",
|
||||
"surface": "#FFFFFF",
|
||||
"text": "#1F2937"
|
||||
},
|
||||
"borderRadius": {
|
||||
"default": "0.25rem",
|
||||
"lg": "0.5rem"
|
||||
}
|
||||
}
|
||||
"tokens": {}
|
||||
}
|
||||
|
||||
@@ -1,33 +1,9 @@
|
||||
{
|
||||
"meta": {
|
||||
"id": "workbench",
|
||||
"version": "2.0.0",
|
||||
"parent": "base",
|
||||
"description": "High density technical interface skin"
|
||||
"version": "1.0.0",
|
||||
"description": "Workbench skin - awaiting Figma sync",
|
||||
"extends": "base"
|
||||
},
|
||||
"tokens": {
|
||||
"colors": {
|
||||
"primary": "#2563EB",
|
||||
"secondary": "#475569",
|
||||
"danger": "#DC2626",
|
||||
"background": "#0F172A",
|
||||
"surface": "#1E293B",
|
||||
"text": "#E2E8F0"
|
||||
},
|
||||
"spacing": {
|
||||
"1": "2px",
|
||||
"2": "4px",
|
||||
"4": "8px",
|
||||
"8": "16px"
|
||||
},
|
||||
"borderRadius": {
|
||||
"default": "0px",
|
||||
"lg": "2px"
|
||||
},
|
||||
"typography": {
|
||||
"fontFamily": {
|
||||
"sans": ["Inter", "system-ui", "sans-serif"]
|
||||
}
|
||||
}
|
||||
}
|
||||
"tokens": {}
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
1765316404612
|
||||
1765407101539
|
||||
@@ -66,13 +66,19 @@ except ImportError:
|
||||
try:
|
||||
import dss
|
||||
from dss import (
|
||||
# Analyze - Context generation & project graph
|
||||
ProjectScanner, ReactAnalyzer, StyleAnalyzer, DependencyGraph, QuickWinFinder,
|
||||
# Ingest - Token sources
|
||||
CSSTokenSource, SCSSTokenSource, TailwindTokenSource, JSONTokenSource,
|
||||
TokenMerger, MergeStrategy, TokenCollection,
|
||||
StyleDictionaryWrapper, ShadcnWrapper, FigmaWrapper,
|
||||
# Models
|
||||
Theme, Project, ProjectMetadata,
|
||||
# Storybook
|
||||
StorybookScanner, StoryGenerator, ThemeGenerator,
|
||||
DSSSettings, DSSManager, settings, manager
|
||||
# Settings
|
||||
DSSSettings, DSSManager, settings, manager,
|
||||
# Figma
|
||||
FigmaToolSuite,
|
||||
)
|
||||
DSS_AVAILABLE = True
|
||||
except ImportError as e:
|
||||
@@ -962,7 +968,10 @@ async def list_tools() -> List[Tool]:
|
||||
async def call_tool(name: str, arguments: Dict[str, Any]) -> List[TextContent]:
|
||||
"""Handle tool calls"""
|
||||
|
||||
if not DSS_AVAILABLE and name.startswith("dss_"):
|
||||
# Tools that work without DSS module imports (use scripts directly)
|
||||
DSS_INDEPENDENT_TOOLS = {"dss_sync_figma", "dss_get_status", "dss_list_themes"}
|
||||
|
||||
if not DSS_AVAILABLE and name.startswith("dss_") and name not in DSS_INDEPENDENT_TOOLS:
|
||||
return [TextContent(
|
||||
type="text",
|
||||
text=json.dumps({
|
||||
@@ -1430,19 +1439,90 @@ async def setup_storybook(path: str, action: str) -> Dict[str, Any]:
|
||||
|
||||
|
||||
async def sync_figma(file_key: str) -> Dict[str, Any]:
|
||||
"""Sync tokens from Figma"""
|
||||
"""Sync tokens from Figma using intelligent sync v2.0
|
||||
|
||||
Features:
|
||||
- Rate limiting with exponential backoff
|
||||
- Caching with lastModified checks
|
||||
- Figma Variables extraction
|
||||
- W3C token format output
|
||||
- Component variant classification
|
||||
"""
|
||||
if not file_key:
|
||||
return {"success": False, "error": "file_key is required"}
|
||||
figma_token = os.environ.get("FIGMA_TOKEN") or settings.FIGMA_TOKEN
|
||||
|
||||
# Get token from env or config
|
||||
figma_token = os.environ.get("FIGMA_TOKEN")
|
||||
if not figma_token:
|
||||
return {"success": False, "error": "FIGMA_TOKEN not configured."}
|
||||
config_path = Path(__file__).parent.parent.parent / ".dss/config/figma.json"
|
||||
if config_path.exists():
|
||||
try:
|
||||
with open(config_path) as f:
|
||||
config = json.load(f)
|
||||
figma_token = config.get("token")
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
if not figma_token:
|
||||
return {"success": False, "error": "FIGMA_TOKEN not configured. Set env var or add to .dss/config/figma.json"}
|
||||
|
||||
try:
|
||||
loop = asyncio.get_event_loop()
|
||||
figma = FigmaWrapper(token=figma_token)
|
||||
result = await loop.run_in_executor(None, lambda: figma.extract_tokens(file_key))
|
||||
return {"success": True, "file_key": file_key, "tokens": safe_serialize(result)}
|
||||
# Import intelligent sync from scripts
|
||||
scripts_dir = Path(__file__).parent.parent.parent / "scripts"
|
||||
sys.path.insert(0, str(scripts_dir))
|
||||
|
||||
from importlib import import_module
|
||||
import importlib.util
|
||||
|
||||
spec = importlib.util.spec_from_file_location("figma_sync", scripts_dir / "figma-sync.py")
|
||||
figma_sync_module = importlib.util.module_from_spec(spec)
|
||||
spec.loader.exec_module(figma_sync_module)
|
||||
|
||||
# Run intelligent sync
|
||||
success = await figma_sync_module.intelligent_sync(
|
||||
file_key=file_key,
|
||||
token=figma_token,
|
||||
force=True,
|
||||
verbose=False
|
||||
)
|
||||
|
||||
if success:
|
||||
# Load results
|
||||
tokens_path = Path(__file__).parent.parent.parent / ".dss/data/_system/tokens/figma-tokens.json"
|
||||
components_path = Path(__file__).parent.parent.parent / ".dss/components/figma-registry.json"
|
||||
|
||||
tokens = {}
|
||||
components = {}
|
||||
|
||||
if tokens_path.exists():
|
||||
with open(tokens_path) as f:
|
||||
tokens = json.load(f)
|
||||
|
||||
if components_path.exists():
|
||||
with open(components_path) as f:
|
||||
components = json.load(f)
|
||||
|
||||
token_count = sum(
|
||||
len(v) for k, v in tokens.items()
|
||||
if not k.startswith("$") and not k.startswith("_") and isinstance(v, dict)
|
||||
)
|
||||
|
||||
return {
|
||||
"success": True,
|
||||
"file_key": file_key,
|
||||
"tokens_extracted": token_count,
|
||||
"components_extracted": components.get("component_count", 0),
|
||||
"output_files": {
|
||||
"tokens": str(tokens_path),
|
||||
"components": str(components_path)
|
||||
}
|
||||
}
|
||||
else:
|
||||
return {"success": False, "error": "Sync failed - check logs"}
|
||||
|
||||
except Exception as e:
|
||||
return {"success": False, "error": str(e)}
|
||||
import traceback
|
||||
return {"success": False, "error": str(e), "traceback": traceback.format_exc()}
|
||||
|
||||
|
||||
async def find_quick_wins(path: str) -> Dict[str, Any]:
|
||||
|
||||
Reference in New Issue
Block a user