+ shared-utils works! +
+ `, + styles: `` +}) +export class SharedUtilsComponent { + +} diff --git a/projects/shared-utils/src/lib/shared-utils.service.spec.ts b/projects/shared-utils/src/lib/shared-utils.service.spec.ts new file mode 100644 index 0000000..484ed4d --- /dev/null +++ b/projects/shared-utils/src/lib/shared-utils.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { SharedUtilsService } from './shared-utils.service'; + +describe('SharedUtilsService', () => { + let service: SharedUtilsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(SharedUtilsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/projects/shared-utils/src/lib/shared-utils.service.ts b/projects/shared-utils/src/lib/shared-utils.service.ts new file mode 100644 index 0000000..ad84344 --- /dev/null +++ b/projects/shared-utils/src/lib/shared-utils.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class SharedUtilsService { + + constructor() { } +} diff --git a/projects/shared-utils/src/public-api.ts b/projects/shared-utils/src/public-api.ts new file mode 100644 index 0000000..caf6734 --- /dev/null +++ b/projects/shared-utils/src/public-api.ts @@ -0,0 +1,6 @@ +/* + * Public API Surface of shared-utils + */ + +export * from './lib/shared-utils.service'; +export * from './lib/shared-utils.component'; diff --git a/projects/shared-utils/tsconfig.lib.json b/projects/shared-utils/tsconfig.lib.json new file mode 100644 index 0000000..2359bf6 --- /dev/null +++ b/projects/shared-utils/tsconfig.lib.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/projects/shared-utils/tsconfig.lib.prod.json b/projects/shared-utils/tsconfig.lib.prod.json new file mode 100644 index 0000000..9215caa --- /dev/null +++ b/projects/shared-utils/tsconfig.lib.prod.json @@ -0,0 +1,11 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/projects/shared-utils/tsconfig.spec.json b/projects/shared-utils/tsconfig.spec.json new file mode 100644 index 0000000..254686d --- /dev/null +++ b/projects/shared-utils/tsconfig.spec.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/projects/ui-essentials/README.md b/projects/ui-essentials/README.md new file mode 100644 index 0000000..3cf870b --- /dev/null +++ b/projects/ui-essentials/README.md @@ -0,0 +1,63 @@ +# UiEssentials + +This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0. + +## Code scaffolding + +Angular CLI includes powerful code scaffolding tools. To generate a new component, run: + +```bash +ng generate component component-name +``` + +For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: + +```bash +ng generate --help +``` + +## Building + +To build the library, run: + +```bash +ng build ui-essentials +``` + +This command will compile your project, and the build artifacts will be placed in the `dist/` directory. + +### Publishing the Library + +Once the project is built, you can publish your library by following these steps: + +1. Navigate to the `dist` directory: + ```bash + cd dist/ui-essentials + ``` + +2. Run the `npm publish` command to publish your library to the npm registry: + ```bash + npm publish + ``` + +## Running unit tests + +To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: + +```bash +ng test +``` + +## Running end-to-end tests + +For end-to-end (e2e) testing, run: + +```bash +ng e2e +``` + +Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. + +## Additional Resources + +For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. diff --git a/projects/ui-essentials/ng-package.json b/projects/ui-essentials/ng-package.json new file mode 100644 index 0000000..e27c1eb --- /dev/null +++ b/projects/ui-essentials/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ui-essentials", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/projects/ui-essentials/package.json b/projects/ui-essentials/package.json new file mode 100644 index 0000000..6ecbb94 --- /dev/null +++ b/projects/ui-essentials/package.json @@ -0,0 +1,12 @@ +{ + "name": "ui-essentials", + "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^19.2.0", + "@angular/core": "^19.2.0" + }, + "dependencies": { + "tslib": "^2.3.0" + }, + "sideEffects": false +} diff --git a/projects/ui-essentials/src/lib/components/buttons/button.component.scss b/projects/ui-essentials/src/lib/components/buttons/button.component.scss new file mode 100644 index 0000000..6481dba --- /dev/null +++ b/projects/ui-essentials/src/lib/components/buttons/button.component.scss @@ -0,0 +1,247 @@ +@use "../../../../../shared-ui/src/styles/semantic/index" as *; + +// Tokens available globally via main application styles + +.ui-button { + // Reset and base styles + display: inline-flex; + align-items: center; + justify-content: center; + border: none; + border-radius: $semantic-border-radius-md; + cursor: pointer; + text-decoration: none; + outline: none; + position: relative; + overflow: hidden; + + // Typography + font-family: $semantic-typography-font-family-sans; + font-weight: $semantic-typography-font-weight-medium; + text-align: center; + text-transform: none; + letter-spacing: $semantic-typography-letter-spacing-normal; + white-space: nowrap; + + // Interaction states + user-select: none; + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; + + // Transitions + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); + + // Size variants + &--small { + height: $semantic-spacing-9; // 2.25rem + padding: 0 $semantic-spacing-3; // 0.75rem + font-size: $semantic-typography-font-size-sm; + line-height: $semantic-typography-line-height-tight; + min-width: $semantic-spacing-16; // 4rem + } + + &--medium { + height: $semantic-spacing-11; // 2.75rem + padding: 0 $semantic-spacing-4; // 1rem + font-size: $semantic-typography-font-size-md; + line-height: $semantic-typography-line-height-normal; + min-width: $semantic-spacing-20; // 5rem + } + + &--large { + height: $semantic-spacing-12; // 3rem + a bit + padding: 0 $semantic-spacing-6; // 1.5rem + font-size: $semantic-typography-font-size-lg; + line-height: $semantic-typography-line-height-normal; + min-width: $semantic-spacing-24; // 6rem + } + + // Filled variant (primary) + &--filled { + background-color: $semantic-color-interactive-primary; + color: $semantic-color-on-brand-primary; + + &:hover:not(:disabled) { + background-color: $semantic-color-brand-primary; + transform: translateY(-1px); + box-shadow: $semantic-shadow-button-hover; + } + + &:active:not(:disabled) { + transform: scale(0.98); + box-shadow: $semantic-shadow-button-active; + } + + &:focus-visible { + outline: 2px solid $semantic-color-brand-primary; + outline-offset: 2px; + } + } + + // Tonal variant + &--tonal { + background-color: $semantic-color-container-primary; + color: $semantic-color-on-container-primary; + + &:hover:not(:disabled) { + background-color: $semantic-color-container-primary; + transform: translateY(-1px); + box-shadow: $semantic-shadow-button-hover; + filter: brightness(0.95); + } + + &:active:not(:disabled) { + transform: scale(0.98); + } + + &:focus-visible { + outline: 2px solid $semantic-color-brand-primary; + outline-offset: 2px; + } + } + + // Outlined variant + &--outlined { + background-color: transparent; + color: $semantic-color-interactive-primary; + border: $semantic-border-width-1 solid $semantic-color-border-primary; + + &:hover:not(:disabled) { + background-color: $semantic-color-container-primary; + border-color: $semantic-color-interactive-primary; + transform: translateY(-1px); + } + + &:active:not(:disabled) { + background-color: $semantic-color-container-primary; + transform: scale(0.98); + filter: brightness(0.9); + } + + &:focus-visible { + outline: 2px solid $semantic-color-brand-primary; + outline-offset: 2px; + } + } + + // States + &--disabled { + opacity: 0.38; + cursor: not-allowed; + pointer-events: none; + } + + &--loading { + cursor: wait; + + .button-content { + opacity: 0; + } + } + + &--full-width { + width: 100%; + } + + // Icon styles + .button-content { + display: flex; + align-items: center; + justify-content: center; + } + + .button-icon { + display: inline-flex; + align-items: center; + flex-shrink: 0; + + &--left { + margin-right: $semantic-spacing-2; // 0.5rem + } + + &--right { + margin-left: $semantic-spacing-2; // 0.5rem + } + } + + // Size-specific icon adjustments + &--small .button-icon { + font-size: $semantic-typography-font-size-xs; + + &--left { + margin-right: $semantic-spacing-1-5; // 0.375rem + } + + &--right { + margin-left: $semantic-spacing-1-5; // 0.375rem + } + } + + &--medium .button-icon { + font-size: $semantic-typography-font-size-sm; + + &--left { + margin-right: $semantic-spacing-2; // 0.5rem + } + + &--right { + margin-left: $semantic-spacing-2; // 0.5rem + } + } + + &--large .button-icon { + font-size: $semantic-typography-font-size-md; + + &--left { + margin-right: $semantic-spacing-2-5; // 0.625rem + } + + &--right { + margin-left: $semantic-spacing-2-5; // 0.625rem + } + } + + // Loader styles + .button-loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .button-spinner { + width: $semantic-spacing-4; // 1rem + height: $semantic-spacing-4; // 1rem + border: 2px solid currentColor; + border-top: 2px solid transparent; + border-radius: 50%; + animation: spin 1s linear infinite; + opacity: 0.7; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + // Ripple effect + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); + transform: scale(0); + opacity: 0; + pointer-events: none; + transition: transform 0.3s ease, opacity 0.3s ease; + } + + &:active:not(:disabled)::after { + transform: scale(1); + opacity: 1; + transition: none; + } +} \ No newline at end of file diff --git a/projects/ui-essentials/src/lib/components/buttons/button.component.ts b/projects/ui-essentials/src/lib/components/buttons/button.component.ts new file mode 100644 index 0000000..7d61a68 --- /dev/null +++ b/projects/ui-essentials/src/lib/components/buttons/button.component.ts @@ -0,0 +1,75 @@ +import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { IconDefinition } from '@fortawesome/fontawesome-svg-core'; + +export type ButtonVariant = 'filled' | 'tonal' | 'outlined'; +export type ButtonSize = 'small' | 'medium' | 'large'; +export type IconPosition = 'left' | 'right'; + +@Component({ + selector: 'ui-button', + standalone: true, + imports: [CommonModule, FontAwesomeModule], + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` + + `, + styleUrl: './button.component.scss' +}) +export class ButtonComponent { + @Input() variant: ButtonVariant = 'filled'; + @Input() size: ButtonSize = 'medium'; + @Input() disabled: boolean = false; + @Input() loading: boolean = false; + @Input() type: 'button' | 'submit' | 'reset' = 'button'; + @Input() fullWidth: boolean = false; + @Input() class: string = ''; + @Input() icon?: IconDefinition; + @Input() iconPosition: IconPosition = 'left'; + + @Output() clicked = new EventEmitter