# Library Extraction Plan

## Overview
Convert current Angular workspace with 12 libraries into individual Git repositories for submodule distribution.

## Dependencies Analysis

### Core Libraries (No internal dependencies)
1. **ui-design-system** - Foundation styles and tokens
2. **shared-utils** - Utility functions
3. **ui-data-utils** - Data manipulation utilities
4. **ui-animations** - Animation utilities
5. **ui-accessibility** - Accessibility features
6. **ui-backgrounds** - Background utilities
7. **ui-font-manager** - Font management
8. **hcl-studio** - Color management
9. **auth-client** - Authentication

### Special Dependencies
- **ui-code-display** - Has prismjs and @types/prismjs dependencies
- **ui-essentials** - Likely depends on ui-design-system for styling
- **ui-landing-pages** - May depend on ui-essentials for components

## Extraction Order (Dependencies First)

### Phase 1: Foundation Libraries
1. **ui-design-system** (SCSS foundation)
2. **shared-utils** (utility foundation)
3. **ui-data-utils** (data utilities)

### Phase 2: Standalone Libraries
4. **ui-animations** 
5. **ui-accessibility**
6. **ui-backgrounds**
7. **ui-font-manager**
8. **hcl-studio**
9. **auth-client**

### Phase 3: Dependent Libraries
10. **ui-code-display** (has external deps)
11. **ui-essentials** (may depend on ui-design-system)
12. **ui-landing-pages** (may depend on ui-essentials)

## Repository Structure Template

Each repository will have:
```
library-name/
├── .gitignore
├── README.md
├── CHANGELOG.md
├── LICENSE
├── package.json
├── ng-package.json
├── tsconfig.lib.json
├── tsconfig.lib.prod.json
├── tsconfig.spec.json
├── karma.conf.js
├── src/
│   ├── lib/
│   │   └── [library source files]
│   ├── public-api.ts
│   └── test.ts
├── dist/ (gitignored)
└── node_modules/ (gitignored)
```

## Standard Files for Each Repo

### .gitignore
```
/node_modules/
/dist/
*.tsbuildinfo
.DS_Store
Thumbs.db
```

### README.md Template
```markdown
# [Library Name]

## Installation
```bash
git submodule add https://github.com/yourorg/[library-name].git libs/[library-name]
```

## Usage
[Usage examples]

## Development
```bash
npm install
npm test
npm run build
```
```

### package.json (standalone)
- Remove workspace references
- Add necessary build scripts
- Include all required dependencies

## Implementation Steps

1. **Create base template repository**
2. **Extract libraries in dependency order**
3. **Test each library builds independently**
4. **Create consumer integration example**
5. **Update original workspace to use submodules**

## Consumer Integration

After extraction, consumers will use:
```bash
# Add specific libraries as submodules
git submodule add https://github.com/yourorg/ui-design-system.git libs/ui-design-system
git submodule add https://github.com/yourorg/ui-essentials.git libs/ui-essentials

# Update tsconfig.json
{
  "paths": {
    "ui-design-system": ["./libs/ui-design-system/dist"],
    "ui-essentials": ["./libs/ui-essentials/dist"]
  }
}

# Build libraries
cd libs/ui-design-system && npm run build
cd libs/ui-essentials && npm run build
```

## Benefits
- ✅ Clean, focused repositories for LLM analysis
- ✅ Independent versioning and releases
- ✅ Selective library inclusion
- ✅ Professional library distribution
- ✅ Reusable across multiple projects