Development and Utility Scripts

Development tools, utilities, and helper scripts for the monorepo

Development and Utility Scripts

🛠️ Overview

These scripts provide development utilities, debugging tools, and helper functions for working with the monorepo.

📁 Available Tools

1. `debug-tools.js` - Debugging Utilities

Purpose: Tools for debugging theme system and IndexedDB issues.

Usage:

# Generate browser debugging script
node tools/scripts/debug-tools.js

# The script will output a browser console script for debugging

Features:

Theme Storage Inspection: Inspect theme storage in IndexedDB
Theme Error Fixing: Fix common theme system errors
Duplicate Style Cleanup: Clean up duplicate styles
Browser Script Generation: Generate scripts for browser console debugging

Browser Console Usage:

// Copy and paste the generated script into browser console
// Example output:
const themeStorage = await debugTools.inspectThemeStorage();
console.log('Theme storage:', themeStorage);

// Fix theme errors
await debugTools.fixThemeErrors();

// Clean duplicate styles
await debugTools.cleanupDuplicateStyles();

2. `generate-theme-utilities.js` - Theme Utility Generator

Purpose: Generate utility classes and theme-related code.

Usage:

# Generate theme utilities
node tools/scripts/generate-theme-utilities.js

# Generate with specific options
node tools/scripts/generate-theme-utilities.js --output=libs/theme-system/src/lib/utilities

What it generates:

Utility classes for common styling patterns
Interactive element styles
Responsive design utilities
Theme-aware component styles

3. `generate-utility-classes.js` - Utility Class Generator

Purpose: Generate CSS utility classes for the design system.

Usage:

# Generate utility classes
node tools/scripts/generate-utility-classes.js

# Generate with custom configuration
node tools/scripts/generate-utility-classes.js --config=custom-config.json

Generated Classes:

Spacing utilities (margin, padding)
Typography utilities
Color utilities
Layout utilities
Responsive utilities

4. `update-theme-variables.js` - Theme Variable Synchronization

Purpose: Synchronize theme variables across the system.

Usage:

# Synchronize theme variables
node tools/scripts/update-theme-variables.js

# Update specific theme file
node tools/scripts/update-theme-variables.js --theme=dark

What it does:

Extracts SASS variables from source files
Ensures theme files exist
Synchronizes variables across theme files
Updates theme configurations

5. `update-imports.js` - Import Path Updater

Purpose: Update import paths across the codebase.

Usage:

# Update all imports
node tools/scripts/update-imports.js

# Update imports in specific directory
node tools/scripts/update-imports.js --path=libs/core-models/src

# Dry run to see what would be changed
node tools/scripts/update-imports.js --dry-run

Features:

Updates relative import paths
Fixes broken import references
Handles TypeScript and JavaScript files
Provides dry-run mode for safety

6. `extract-types.js` - Type Extraction Tool

Purpose: Extract and organize TypeScript types from source files.

Usage:

# Extract types from source library
node tools/scripts/extract-types.js --source=core --target=core-types

# Extract with custom mapping
node tools/scripts/extract-types.js --config=type-mapping.json

What it does:

Extracts TypeScript interfaces and types
Updates import paths automatically
Creates organized type libraries
Maintains type relationships

7. `create-types-libraries.js` - Type Library Creator

Purpose: Create new TypeScript type libraries.

Usage:

# Create new type library
node tools/scripts/create-types-libraries.js --name=my-types

# Create with specific configuration
node tools/scripts/create-types-libraries.js --name=api-types --path=libs/api-types

Generated Structure:

libs/my-types/
├── src/
│   ├── index.ts
│   └── lib/
│       └── types/
├── package.json
├── tsconfig.json
└── README.md

🔧 Development Workflow Tools

Theme Development

# Generate theme utilities
node tools/scripts/generate-theme-utilities.js

# Update theme variables
node tools/scripts/update-theme-variables.js

# Debug theme issues
node tools/scripts/debug-tools.js

Type Management

# Extract types from existing code
node tools/scripts/extract-types.js --source=core --target=core-types

# Create new type library
node tools/scripts/create-types-libraries.js --name=api-types

# Update import paths
node tools/scripts/update-imports.js

Code Generation

# Generate utility classes
node tools/scripts/generate-utility-classes.js

# Generate theme utilities
node tools/scripts/generate-theme-utilities.js

🐛 Debugging and Troubleshooting

Theme System Debugging

# Generate browser debugging script
node tools/scripts/debug-tools.js

# Copy the output to browser console for debugging

Import Path Issues

# Check what imports would be updated
node tools/scripts/update-imports.js --dry-run

# Update all imports
node tools/scripts/update-imports.js

Type Issues

# Extract types to fix type errors
node tools/scripts/extract-types.js --source=problematic-lib --target=types-lib

# Update imports after type extraction
node tools/scripts/update-imports.js

🚀 Quick Start Examples

Setting Up New Theme

# Generate theme utilities
node tools/scripts/generate-theme-utilities.js

# Update theme variables
node tools/scripts/update-theme-variables.js

# Generate utility classes
node tools/scripts/generate-utility-classes.js

Creating Type Library

# Create new type library
node tools/scripts/create-types-libraries.js --name=my-types

# Extract types from existing code
node tools/scripts/extract-types.js --source=core --target=my-types

# Update imports
node tools/scripts/update-imports.js

Debugging Theme Issues

# Generate debugging script
node tools/scripts/debug-tools.js

# Copy output to browser console
# Run the debugging commands in browser

📊 Generated Code Examples

Theme Utilities

// Generated utility classes
.theme-primary {
  color: var(--theme-primary);
}

.theme-secondary {
  color: var(--theme-secondary);
}

.interactive-hover {
  transition: all 0.2s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

Type Definitions

// Generated type definitions
export interface ThemeConfig {
  primary: string;
  secondary: string;
  accent: string;
}

export type ThemeMode = 'light' | 'dark' | 'auto';

export interface ComponentConfig {
  theme: ThemeConfig;
  mode: ThemeMode;
}

🔧 Configuration

Theme Generation Configuration

// Customize theme generation
const config = {
  outputPath: 'libs/theme-system/src/lib/utilities',
  includeResponsive: true,
  includeInteractive: true,
  colorPalette: ['primary', 'secondary', 'accent'],
  spacingScale: [0, 4, 8, 16, 24, 32, 48, 64]
};

Type Extraction Configuration

// Configure type extraction
const mapping = {
  source: 'libs/core-models/src',
  target: 'libs/core-types/src',
  patterns: ['**/*.interface.ts', '**/*.type.ts'],
  exclude: ['**/*.spec.ts', '**/*.test.ts']
};

🐛 Common Issues and Solutions

Theme Generation Fails

# Check if theme system is built
node tools/scripts/build-scripts/build-libs.js theme-system

# Regenerate theme utilities
node tools/scripts/generate-theme-utilities.js

Type Extraction Errors

# Check TypeScript compilation
npx tsc --noEmit

# Fix import paths first
node tools/scripts/update-imports.js

# Then extract types
node tools/scripts/extract-types.js --source=core --target=core-types

Import Path Issues

# Dry run to see what would change
node tools/scripts/update-imports.js --dry-run

# Update imports
node tools/scripts/update-imports.js

# Verify changes
git diff

📝 Best Practices

Generate Code Regularly: Run generators after theme changes
Update Imports: Keep import paths up to date
Extract Types: Organize types into dedicated libraries
Debug Systematically: Use debugging tools for theme issues
Version Control: Commit generated code changes
Test Generated Code: Verify generated utilities work correctly

🤝 Contributing

To improve development utilities:

Add new code generation patterns
Improve debugging capabilities
Add more utility class generators
Enhance type extraction algorithms
Add new development workflow tools

📄 License

These tools are part of the project and follow the same license terms.

Development and Utility Scripts

🛠️ Overview

📁 Available Tools

1. debug-tools.js - Debugging Utilities

2. generate-theme-utilities.js - Theme Utility Generator

3. generate-utility-classes.js - Utility Class Generator

4. update-theme-variables.js - Theme Variable Synchronization

5. update-imports.js - Import Path Updater

6. extract-types.js - Type Extraction Tool

7. create-types-libraries.js - Type Library Creator

🔧 Development Workflow Tools

Theme Development

Type Management

Code Generation

🐛 Debugging and Troubleshooting

Theme System Debugging

Import Path Issues

Type Issues

🚀 Quick Start Examples

Setting Up New Theme

Creating Type Library

Debugging Theme Issues

📊 Generated Code Examples

Theme Utilities

Type Definitions

🔧 Configuration

Theme Generation Configuration

Type Extraction Configuration

🐛 Common Issues and Solutions

Theme Generation Fails

Type Extraction Errors

Import Path Issues

📝 Best Practices

🤝 Contributing

📄 License

1. `debug-tools.js` - Debugging Utilities

2. `generate-theme-utilities.js` - Theme Utility Generator

3. `generate-utility-classes.js` - Utility Class Generator

4. `update-theme-variables.js` - Theme Variable Synchronization

5. `update-imports.js` - Import Path Updater

6. `extract-types.js` - Type Extraction Tool

7. `create-types-libraries.js` - Type Library Creator