Rename shared-ui to ui-design-system
- More descriptive name for design system library - Update all imports and configurations - No functional changes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
28
CLAUDE.md
28
CLAUDE.md
@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
||||
|
||||
SSuite is an Angular workspace containing three libraries and a demo application:
|
||||
|
||||
- **shared-ui**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
|
||||
- **ui-design-system**: UI design system with comprehensive SCSS styling, design tokens, and reusable components
|
||||
- **shared-utils**: Common utilities and shared services
|
||||
- **ui-essentials**: Essential UI components with comprehensive component library (buttons, forms, data-display, navigation, media, feedback, overlays, layout)
|
||||
- **demo-ui-essentials**: Demo application showcasing all components with live examples
|
||||
@@ -19,7 +19,7 @@ SSuite is an Angular workspace containing three libraries and a demo application
|
||||
ng build
|
||||
|
||||
# Build specific library
|
||||
ng build shared-ui
|
||||
ng build ui-design-system
|
||||
ng build shared-utils
|
||||
ng build ui-essentials
|
||||
|
||||
@@ -33,7 +33,7 @@ ng build --watch --configuration development
|
||||
ng test
|
||||
|
||||
# Run tests for specific library
|
||||
ng test shared-ui
|
||||
ng test ui-design-system
|
||||
ng test shared-utils
|
||||
ng test ui-essentials
|
||||
```
|
||||
@@ -52,7 +52,7 @@ npm start
|
||||
### Workspace Structure
|
||||
```
|
||||
projects/
|
||||
├── shared-ui/ - Design system and SCSS architecture
|
||||
├── ui-design-system/ - Design system and SCSS architecture
|
||||
├── shared-utils/ - Common utilities and services
|
||||
├── ui-essentials/ - Component library with 8 major categories
|
||||
└── demo-ui-essentials/ - Demo application with component examples
|
||||
@@ -69,7 +69,7 @@ Each library follows Angular's standard structure:
|
||||
Libraries are mapped in `tsconfig.json` paths:
|
||||
```json
|
||||
"paths": {
|
||||
"shared-ui": ["./dist/shared-ui"],
|
||||
"ui-design-system": ["./dist/ui-design-system"],
|
||||
"shared-utils": ["./dist/shared-utils"],
|
||||
"ui-essentials": ["./dist/ui-essentials"]
|
||||
}
|
||||
@@ -86,7 +86,7 @@ The component library is organized into these categories:
|
||||
- **overlays**: Modals, drawers, backdrops, overlay containers
|
||||
- **layout**: Containers, spacers, grid systems
|
||||
|
||||
### Design System (shared-ui)
|
||||
### Design System (ui-design-system)
|
||||
Contains a comprehensive SCSS architecture:
|
||||
- **Base tokens**: Colors, typography, spacing, motion, shadows
|
||||
- **Semantic tokens**: High-level design tokens built on base tokens
|
||||
@@ -99,25 +99,25 @@ Contains a comprehensive SCSS architecture:
|
||||
#### Style Import Options:
|
||||
```scss
|
||||
// Complete design system (includes semantic + base tokens + fonts)
|
||||
@use 'shared-ui/src/styles' as ui;
|
||||
@use 'ui-design-system/src/styles' as ui;
|
||||
|
||||
// Tokens only (semantic + base tokens)
|
||||
@use 'shared-ui/src/styles/tokens' as tokens;
|
||||
@use 'ui-design-system/src/styles/tokens' as tokens;
|
||||
|
||||
// Semantic tokens only (includes base tokens)
|
||||
@use 'shared-ui/src/styles/semantic' as semantic;
|
||||
@use 'ui-design-system/src/styles/semantic' as semantic;
|
||||
|
||||
// Base tokens only
|
||||
@use 'shared-ui/src/styles/base' as base;
|
||||
@use 'ui-design-system/src/styles/base' as base;
|
||||
|
||||
// Components and utilities (import separately to avoid circular dependencies)
|
||||
@use 'shared-ui/src/styles/commons' as commons;
|
||||
@use 'ui-design-system/src/styles/commons' as commons;
|
||||
```
|
||||
|
||||
Entry points:
|
||||
- Main: `projects/shared-ui/src/styles/index.scss`
|
||||
- Tokens: `projects/shared-ui/src/styles/tokens.scss`
|
||||
- Semantic: `projects/shared-ui/src/styles/semantic/index.scss`
|
||||
- Main: `projects/ui-design-system/src/styles/index.scss`
|
||||
- Tokens: `projects/ui-design-system/src/styles/tokens.scss`
|
||||
- Semantic: `projects/ui-design-system/src/styles/semantic/index.scss`
|
||||
|
||||
## Development Workflow
|
||||
|
||||
|
||||
14
angular.json
14
angular.json
@@ -3,23 +3,23 @@
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"shared-ui": {
|
||||
"ui-design-system": {
|
||||
"projectType": "library",
|
||||
"root": "projects/shared-ui",
|
||||
"sourceRoot": "projects/shared-ui/src",
|
||||
"root": "projects/ui-design-system",
|
||||
"sourceRoot": "projects/ui-design-system/src",
|
||||
"prefix": "lib",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"project": "projects/shared-ui/ng-package.json"
|
||||
"project": "projects/ui-design-system/ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/shared-ui/tsconfig.lib.prod.json"
|
||||
"tsConfig": "projects/ui-design-system/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {
|
||||
"tsConfig": "projects/shared-ui/tsconfig.lib.json"
|
||||
"tsConfig": "projects/ui-design-system/tsconfig.lib.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
@@ -27,7 +27,7 @@
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"tsConfig": "projects/shared-ui/tsconfig.spec.json",
|
||||
"tsConfig": "projects/ui-design-system/tsconfig.spec.json",
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: 32px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as tokens;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding-bottom: 120px; // Extra space to accommodate bottom navigation examples
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../shared-ui/src/styles/semantic";
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
|
||||
.carousel-demo {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-wrapper {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../shared-ui/src/styles/semantic/index" as *;
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.enhanced-table-demo {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../shared-ui/src/styles/semantic";
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
.demo-container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as tokens;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../shared-ui/src/styles/semantic";
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../shared-ui/src/styles/tokens" as *;
|
||||
@use "../../../../../ui-design-system/src/styles/tokens" as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as tokens;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../shared-ui/src/styles/semantic/index" as *;
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
|
||||
.popover-demo {
|
||||
padding: $semantic-spacing-layout-section-xs;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as tokens;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../shared-ui/src/styles/semantic/index" as *;
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../shared-ui/src/styles/semantic";
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../shared-ui/src/styles/semantic" as *;
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
|
||||
|
||||
// ==========================================================================
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic' as semantic;
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
|
||||
|
||||
.sidebar-container {
|
||||
padding: 1rem 0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../dist/shared-ui",
|
||||
"dest": "../../dist/ui-design-system",
|
||||
"lib": {
|
||||
"entryFile": "src/public-api.ts"
|
||||
},
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "shared-ui",
|
||||
"name": "ui-design-system",
|
||||
"version": "0.0.1",
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^19.2.0",
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user