Files
ui-essentials/LIBRARY_EXTRACTION_PLAN.md
Giuliano Silvestro 8e10244086 Implement Git submodule packaging strategy for Angular libraries
This commit implements a complete library extraction and packaging solution
for converting the current Angular workspace into individual Git repositories
suitable for submodule distribution.

## Changes Made:

### Public API Optimizations:
- Fixed ui-design-system naming from "shared-ui" to "ui-design-system"
- Optimized ui-essentials exports for better tree-shaking
- Added specific exports for core components (ButtonComponent, TextInputComponent)
- Improved documentation and organization of public APIs

### Library Extraction Implementation:
- Created comprehensive extraction plan (LIBRARY_EXTRACTION_PLAN.md)
- Implemented automated extraction script (extract-library.sh)
- Extracted all 12 libraries into individual repository structures
- Each library now has standalone package.json, angular.json, and configs

### Documentation & Integration:
- Complete submodule integration guide (SUBMODULE_INTEGRATION_GUIDE.md)
- Development workflow recommendations
- Consumer integration instructions
- Library maintenance strategies

### Libraries Extracted:
- ui-design-system (SCSS design system)
- shared-utils (utilities)
- ui-essentials (essential components)
- ui-data-utils (data manipulation)
- ui-animations (CSS animations)
- ui-accessibility (a11y features)
- ui-backgrounds (background utilities)
- ui-font-manager (font management)
- hcl-studio (color management)
- auth-client (authentication)
- ui-code-display (syntax highlighting)
- ui-landing-pages (landing components)

## Benefits:
- LLM complexity reduction: ~90% (50k+ files → 500-2k per library)
- Professional library distribution via Git submodules
- Independent versioning and releases
- Reusable across multiple projects
- Selective library inclusion
- Clean, focused development contexts

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-11 16:15:13 +10:00

138 lines
3.4 KiB
Markdown

# 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