UI Parser

UI Parser is a tool for analyzing, generating, and transforming UI components. It extracts class names from React components and generates semantic and quark CSS classes.

Installation

# Using npm
npm install -D uiparser@latest

# Using bun
bun add -d uiparser

Repository

This project is part of Factory/UI and is available on GitHub: https://github.com/alexy-os/ui-factory/tree/main/packages/ui-parser

Features

• Component Analysis: Analyzes React components and extracts class names
• CSS Generation: Generates semantic and quark CSS classes directly from analysis results
• Component Transformation: Transforms components by replacing class names
• Multiple Adapters: Supports different methods for extracting classes
• TV/CVA Support: Full support for tailwind-variants (tv) and class-variance-authority (cva)
• Direct Replacement: Efficient class name replacement using mapping from dataClasses.json
• Modifier Groups: Support for handling groups of modifiers and their variants
• Multiple Output Formats: Generates both semantic and crypto (quark) versions of components

Usage

Add these scripts to your package.json:

{
  "scripts": {
    "ui:analyze": "bun node_modules/uiparser/dist/cli/bin.js analyze",
    "ui:generate": "bun node_modules/uiparser/dist/cli/bin.js generate",
    "ui:config": "bun node_modules/uiparser/dist/cli/bin.js config",
    "ui:transform": "bun node_modules/uiparser/dist/cli/bin.js transform",
    "ui:all": "bun node_modules/uiparser/dist/cli/bin.js all",
    "rm": "rm -rf src/output/*"
  }
}

Then run:

# Analyze components
npm run ui:analyze

# Generate CSS
npm run ui:generate

# Transform components
npm run ui:transform

# Run all operations
npm run ui:all

Configuration

Create a configuration file in your project:

import { configManager } from 'uiparser';

configManager.updateConfig({
  paths: {
    sourceDir: './src/components',
    componentOutput: './src/output',
    domAnalysisResults: './src/output/domAnalysis.json',
    dataClasses: './src/data/dataClasses.json'  // Mapping file for class replacements
  },
  classNames: {
    semanticPrefix: 'sc-',    // Prefix for semantic classes
    quarkPrefix: '',         // Prefix for quark classes (crypto)
    outputFormats: ['semantic', 'quark']  // Available output formats
  },
  parser: {
    extractors: ['tv', 'direct'],  // Available extraction methods
    modifierSupport: true,         // Enable modifier groups support
    preserveComments: true         // Preserve component comments during transformation
  }
});

Component Examples

Button Component with TV

// Source component with utility classes
const buttonStyles = tv({
  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium",
  variants: {
    variant: {
      primary: "bg-primary text-primary-foreground",
      secondary: "bg-secondary text-secondary-foreground"
    },
    size: {
      sm: "h-8 px-3 text-xs",
      md: "h-10 px-4",
      lg: "h-12 px-6 text-base"
    }
  }
});

// Transformed to semantic classes
const buttonStyles = tv({
  base: "sc-layout-center sc-button-base",
  variants: {
    variant: {
      primary: "sc-button-primary",
      secondary: "sc-button-secondary"
    },
    size: {
      sm: "sc-button-sm",
      md: "sc-button-md",
      lg: "sc-button-lg"
    }
  }
});

// Transformed to quark classes
const buttonStyles = tv({
  base: "ivir3",
  variants: {
    variant: {
      primary: "q2idm",
      secondary: "q3kuh"
    },
    size: {
      sm: "h3i4t",
      md: "rcdad",
      lg: "nipd0"
    }
  }
});

Advanced Features

• Modifier Groups: Automatically handles related classes as groups
• Direct Replacement: Fast and efficient class replacement using pre-defined mappings
• TV/CVA Integration: Full support for tailwind-variants and class-variance-authority patterns
• Multiple Output Formats: Generate different versions of components simultaneously
• Preservation: Maintains component structure and comments during transformation

License

MIT