From f553c47bc8112c764bfe6c77ffca7f28762b0f3c Mon Sep 17 00:00:00 2001 From: wagonsoftware Date: Fri, 21 Oct 2022 21:06:04 +0300 Subject: [PATCH] projects init --- projects/ui/README.md | 24 +++++++ projects/ui/karma.conf.js | 44 +++++++++++++ projects/ui/ng-package.json | 7 ++ projects/ui/package.json | 11 ++++ projects/ui/src/lib/icon/icon.component.html | 1 + projects/ui/src/lib/icon/icon.component.scss | 16 +++++ .../ui/src/lib/icon/icon.component.spec.ts | 23 +++++++ projects/ui/src/lib/icon/icon.component.ts | 37 +++++++++++ projects/ui/src/lib/icon/icon.module.ts | 11 ++++ .../lib/image-icon/image-icon.component.html | 1 + .../lib/image-icon/image-icon.component.scss | 14 ++++ .../image-icon/image-icon.component.spec.ts | 23 +++++++ .../lib/image-icon/image-icon.component.ts | 10 +++ .../src/lib/image-icon/image-icon.module.ts | 18 +++++ .../ui/src/lib/input/input.component.html | 5 ++ .../ui/src/lib/input/input.component.scss | 38 +++++++++++ .../ui/src/lib/input/input.component.spec.ts | 23 +++++++ projects/ui/src/lib/input/input.component.ts | 65 +++++++++++++++++++ projects/ui/src/lib/input/input.module.ts | 18 +++++ projects/ui/src/lib/interfaces/session.ts | 7 ++ projects/ui/src/lib/interfaces/sizes.ts | 1 + .../section-label.component.html | 6 ++ .../section-label.component.scss | 23 +++++++ .../section-label.component.spec.ts | 23 +++++++ .../section-label/section-label.component.ts | 15 +++++ .../lib/section-label/section-label.module.ts | 11 ++++ .../ui/src/lib/section/section.component.html | 4 ++ .../ui/src/lib/section/section.component.scss | 52 +++++++++++++++ .../src/lib/section/section.component.spec.ts | 23 +++++++ .../ui/src/lib/section/section.component.ts | 15 +++++ projects/ui/src/lib/section/section.module.ts | 18 +++++ .../ui/src/lib/session/session.component.html | 7 ++ .../ui/src/lib/session/session.component.scss | 22 +++++++ .../src/lib/session/session.component.spec.ts | 23 +++++++ .../ui/src/lib/session/session.component.ts | 15 +++++ projects/ui/src/lib/session/session.module.ts | 12 ++++ .../typography/heading/heading.component.html | 3 + .../typography/heading/heading.component.scss | 25 +++++++ .../heading/heading.component.spec.ts | 23 +++++++ .../typography/heading/heading.component.ts | 14 ++++ .../lib/typography/text/text.component.html | 1 + .../lib/typography/text/text.component.scss | 0 .../typography/text/text.component.spec.ts | 23 +++++++ .../src/lib/typography/text/text.component.ts | 15 +++++ .../src/lib/typography/typography.module.ts | 11 ++++ projects/ui/src/lib/ui.module.ts | 31 +++++++++ projects/ui/src/public-api.ts | 12 ++++ projects/ui/src/test.ts | 27 ++++++++ projects/ui/tsconfig.lib.json | 15 +++++ projects/ui/tsconfig.lib.prod.json | 10 +++ projects/ui/tsconfig.spec.json | 17 +++++ 51 files changed, 893 insertions(+) create mode 100644 projects/ui/README.md create mode 100644 projects/ui/karma.conf.js create mode 100644 projects/ui/ng-package.json create mode 100644 projects/ui/package.json create mode 100644 projects/ui/src/lib/icon/icon.component.html create mode 100644 projects/ui/src/lib/icon/icon.component.scss create mode 100644 projects/ui/src/lib/icon/icon.component.spec.ts create mode 100644 projects/ui/src/lib/icon/icon.component.ts create mode 100644 projects/ui/src/lib/icon/icon.module.ts create mode 100644 projects/ui/src/lib/image-icon/image-icon.component.html create mode 100644 projects/ui/src/lib/image-icon/image-icon.component.scss create mode 100644 projects/ui/src/lib/image-icon/image-icon.component.spec.ts create mode 100644 projects/ui/src/lib/image-icon/image-icon.component.ts create mode 100644 projects/ui/src/lib/image-icon/image-icon.module.ts create mode 100644 projects/ui/src/lib/input/input.component.html create mode 100644 projects/ui/src/lib/input/input.component.scss create mode 100644 projects/ui/src/lib/input/input.component.spec.ts create mode 100644 projects/ui/src/lib/input/input.component.ts create mode 100644 projects/ui/src/lib/input/input.module.ts create mode 100644 projects/ui/src/lib/interfaces/session.ts create mode 100644 projects/ui/src/lib/interfaces/sizes.ts create mode 100644 projects/ui/src/lib/section-label/section-label.component.html create mode 100644 projects/ui/src/lib/section-label/section-label.component.scss create mode 100644 projects/ui/src/lib/section-label/section-label.component.spec.ts create mode 100644 projects/ui/src/lib/section-label/section-label.component.ts create mode 100644 projects/ui/src/lib/section-label/section-label.module.ts create mode 100644 projects/ui/src/lib/section/section.component.html create mode 100644 projects/ui/src/lib/section/section.component.scss create mode 100644 projects/ui/src/lib/section/section.component.spec.ts create mode 100644 projects/ui/src/lib/section/section.component.ts create mode 100644 projects/ui/src/lib/section/section.module.ts create mode 100644 projects/ui/src/lib/session/session.component.html create mode 100644 projects/ui/src/lib/session/session.component.scss create mode 100644 projects/ui/src/lib/session/session.component.spec.ts create mode 100644 projects/ui/src/lib/session/session.component.ts create mode 100644 projects/ui/src/lib/session/session.module.ts create mode 100644 projects/ui/src/lib/typography/heading/heading.component.html create mode 100644 projects/ui/src/lib/typography/heading/heading.component.scss create mode 100644 projects/ui/src/lib/typography/heading/heading.component.spec.ts create mode 100644 projects/ui/src/lib/typography/heading/heading.component.ts create mode 100644 projects/ui/src/lib/typography/text/text.component.html create mode 100644 projects/ui/src/lib/typography/text/text.component.scss create mode 100644 projects/ui/src/lib/typography/text/text.component.spec.ts create mode 100644 projects/ui/src/lib/typography/text/text.component.ts create mode 100644 projects/ui/src/lib/typography/typography.module.ts create mode 100644 projects/ui/src/lib/ui.module.ts create mode 100644 projects/ui/src/public-api.ts create mode 100644 projects/ui/src/test.ts create mode 100644 projects/ui/tsconfig.lib.json create mode 100644 projects/ui/tsconfig.lib.prod.json create mode 100644 projects/ui/tsconfig.spec.json diff --git a/projects/ui/README.md b/projects/ui/README.md new file mode 100644 index 0000000..176a608 --- /dev/null +++ b/projects/ui/README.md @@ -0,0 +1,24 @@ +# Ui + +This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0. + +## Code scaffolding + +Run `ng generate component component-name --project ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ui`. +> Note: Don't forget to add `--project ui` or else it will be added to the default project in your `angular.json` file. + +## Build + +Run `ng build ui` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Publishing + +After building your library with `ng build ui`, go to the dist folder `cd dist/ui` and run `npm publish`. + +## Running unit tests + +Run `ng test ui` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/projects/ui/karma.conf.js b/projects/ui/karma.conf.js new file mode 100644 index 0000000..b08538b --- /dev/null +++ b/projects/ui/karma.conf.js @@ -0,0 +1,44 @@ +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + coverageReporter: { + dir: require('path').join(__dirname, '../../coverage/ui'), + subdir: '.', + reporters: [ + { type: 'html' }, + { type: 'text-summary' } + ] + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true + }); +}; diff --git a/projects/ui/ng-package.json b/projects/ui/ng-package.json new file mode 100644 index 0000000..e5e5da9 --- /dev/null +++ b/projects/ui/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/ui", + "lib": { + "entryFile": "src/public-api.ts" + } +} \ No newline at end of file diff --git a/projects/ui/package.json b/projects/ui/package.json new file mode 100644 index 0000000..44cffc6 --- /dev/null +++ b/projects/ui/package.json @@ -0,0 +1,11 @@ +{ + "name": "ui", + "version": "0.0.1", + "peerDependencies": { + "@angular/common": "^14.1.0", + "@angular/core": "^14.1.0" + }, + "dependencies": { + "tslib": "^2.3.0" + } +} \ No newline at end of file diff --git a/projects/ui/src/lib/icon/icon.component.html b/projects/ui/src/lib/icon/icon.component.html new file mode 100644 index 0000000..d49e5c9 --- /dev/null +++ b/projects/ui/src/lib/icon/icon.component.html @@ -0,0 +1 @@ + diff --git a/projects/ui/src/lib/icon/icon.component.scss b/projects/ui/src/lib/icon/icon.component.scss new file mode 100644 index 0000000..cdce41a --- /dev/null +++ b/projects/ui/src/lib/icon/icon.component.scss @@ -0,0 +1,16 @@ +:host::ng-deep { + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 100%; + height: 100%; + display: block; + + path, circle, rect { + stroke-width: var(--local-stroke, 1.5); + stroke: currentColor; + } + } +} diff --git a/projects/ui/src/lib/icon/icon.component.spec.ts b/projects/ui/src/lib/icon/icon.component.spec.ts new file mode 100644 index 0000000..64f4e38 --- /dev/null +++ b/projects/ui/src/lib/icon/icon.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IconComponent } from './icon.component'; + +describe('IconComponent', () => { + let component: IconComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ IconComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(IconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/icon/icon.component.ts b/projects/ui/src/lib/icon/icon.component.ts new file mode 100644 index 0000000..b65601f --- /dev/null +++ b/projects/ui/src/lib/icon/icon.component.ts @@ -0,0 +1,37 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { TuiIconError } from '@taiga-ui/core'; + +const BASE_SIZE = 24; +const BASE_STROKE_WIDTH = 1.5; + +@Component({ + selector: 'skirda-icon[name]', + templateUrl: './icon.component.html', + styleUrls: ['./icon.component.scss'], +}) +export class IconComponent implements OnInit { + @Input() name!: string; + @Input() size: number | string = 24; + @Input() sizeUnit: string = 'px'; + @Input() color: string = '#fff'; + + constructor() {} + + ngOnInit(): void {} + + get src() { + return `/assets/icons/Name=${this.name}.svg`; + } + + get sizeWithUnit() { + return this.size + this.sizeUnit; + } + + get stroke() { + return +this.size / BASE_SIZE < 1 ? 2.5 : 1.5; + } + + error(error: TuiIconError) { + console.log(`[${error.icon}]: ${error.message}`); + } +} diff --git a/projects/ui/src/lib/icon/icon.module.ts b/projects/ui/src/lib/icon/icon.module.ts new file mode 100644 index 0000000..57aceda --- /dev/null +++ b/projects/ui/src/lib/icon/icon.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IconComponent } from './icon.component'; +import { TuiSvgModule } from '@taiga-ui/core'; + +@NgModule({ + declarations: [IconComponent], + imports: [CommonModule, TuiSvgModule], + exports: [IconComponent], +}) +export class IconModule {} diff --git a/projects/ui/src/lib/image-icon/image-icon.component.html b/projects/ui/src/lib/image-icon/image-icon.component.html new file mode 100644 index 0000000..e315854 --- /dev/null +++ b/projects/ui/src/lib/image-icon/image-icon.component.html @@ -0,0 +1 @@ +
diff --git a/projects/ui/src/lib/image-icon/image-icon.component.scss b/projects/ui/src/lib/image-icon/image-icon.component.scss new file mode 100644 index 0000000..a835557 --- /dev/null +++ b/projects/ui/src/lib/image-icon/image-icon.component.scss @@ -0,0 +1,14 @@ +:host { + display: block; + + .sk-image-icon { + width: 40px; + height: 40px; + border-radius: 4px; + background-color: rgba(255, 255, 255, 0.1); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + overflow: hidden; + } +} diff --git a/projects/ui/src/lib/image-icon/image-icon.component.spec.ts b/projects/ui/src/lib/image-icon/image-icon.component.spec.ts new file mode 100644 index 0000000..1fb64b7 --- /dev/null +++ b/projects/ui/src/lib/image-icon/image-icon.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImageIconComponent } from './image-icon.component'; + +describe('ImageIconComponent', () => { + let component: ImageIconComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ImageIconComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ImageIconComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/image-icon/image-icon.component.ts b/projects/ui/src/lib/image-icon/image-icon.component.ts new file mode 100644 index 0000000..f0dbb75 --- /dev/null +++ b/projects/ui/src/lib/image-icon/image-icon.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'skirda-image-icon[src]', + templateUrl: './image-icon.component.html', + styleUrls: ['./image-icon.component.scss'], +}) +export class ImageIconComponent { + @Input() src!: string; +} diff --git a/projects/ui/src/lib/image-icon/image-icon.module.ts b/projects/ui/src/lib/image-icon/image-icon.module.ts new file mode 100644 index 0000000..801f1e9 --- /dev/null +++ b/projects/ui/src/lib/image-icon/image-icon.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ImageIconComponent } from './image-icon.component'; + + + +@NgModule({ + declarations: [ + ImageIconComponent + ], + imports: [ + CommonModule + ], + exports: [ + ImageIconComponent + ] +}) +export class ImageIconModule { } diff --git a/projects/ui/src/lib/input/input.component.html b/projects/ui/src/lib/input/input.component.html new file mode 100644 index 0000000..57abc16 --- /dev/null +++ b/projects/ui/src/lib/input/input.component.html @@ -0,0 +1,5 @@ + diff --git a/projects/ui/src/lib/input/input.component.scss b/projects/ui/src/lib/input/input.component.scss new file mode 100644 index 0000000..57e4cb1 --- /dev/null +++ b/projects/ui/src/lib/input/input.component.scss @@ -0,0 +1,38 @@ +:host { + display: block; + + label { + display: flex; + align-items: center; + gap: 0.5rem; + padding: var(--local-gap); + cursor: text; + background-color: var(--sk-input); + color: #fff; + border-radius: 8px; + + &:focus-within { + background-color: var(--sk-input-focus); + } + + input { + flex: 1; + border: 0; + font-family: var(--tui-text-font); + outline: none; + appearance: none; + background: transparent; + + &::placeholder { + color: rgba(255, 255, 255, 0.5); + } + } + } +} + +:host::ng-deep { + skirda-icon svg { + color: var(--tui-base-01); + opacity: 0.5; + } +} diff --git a/projects/ui/src/lib/input/input.component.spec.ts b/projects/ui/src/lib/input/input.component.spec.ts new file mode 100644 index 0000000..9cbd23a --- /dev/null +++ b/projects/ui/src/lib/input/input.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputComponent } from './input.component'; + +describe('InputComponent', () => { + let component: InputComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ InputComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(InputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/input/input.component.ts b/projects/ui/src/lib/input/input.component.ts new file mode 100644 index 0000000..6f0171e --- /dev/null +++ b/projects/ui/src/lib/input/input.component.ts @@ -0,0 +1,65 @@ +import { Component, forwardRef, Input, OnInit } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { Size } from '../interfaces/sizes'; + +@Component({ + selector: 'skirda-input', + templateUrl: './input.component.html', + styleUrls: ['./input.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: InputComponent, + multi: true, + }, + ], +}) +export class InputComponent implements ControlValueAccessor { + @Input() size: Size = 'm'; + @Input() placeholder: string = ''; + + onChange: any = () => {}; + onTouched: any = () => {}; + disabled = false; + value: any = ''; + touched = false; + + constructor() {} + + writeValue(value: any): void { + this.value = value; + } + + registerOnChange(fn: any): void { + this.onChange = fn; + } + + registerOnTouched(fn: any): void { + this.onTouched = fn; + } + + setDisabledState?(isDisabled: boolean): void { + this.disabled = isDisabled; + } + + markAsTouched() { + if (!this.touched) { + this.onTouched(); + this.touched = true; + } + } + + input(value: any) { + this.markAsTouched(); + this.value = value; + this.onChange(this.value); + } + + get style() { + let styles: string[] = []; + + styles.push(`--local-gap: var(--sk-gap-${this.size})`); + + return styles.join(';'); + } +} diff --git a/projects/ui/src/lib/input/input.module.ts b/projects/ui/src/lib/input/input.module.ts new file mode 100644 index 0000000..fcb29c7 --- /dev/null +++ b/projects/ui/src/lib/input/input.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { InputComponent } from './input.component'; + + + +@NgModule({ + declarations: [ + InputComponent + ], + imports: [ + CommonModule + ], + exports: [ + InputComponent + ] +}) +export class InputModule { } diff --git a/projects/ui/src/lib/interfaces/session.ts b/projects/ui/src/lib/interfaces/session.ts new file mode 100644 index 0000000..dc6aa82 --- /dev/null +++ b/projects/ui/src/lib/interfaces/session.ts @@ -0,0 +1,7 @@ +export interface Session { + icon: string; + title: string; + status?: string; + version: string; + expires: string | Date; +} diff --git a/projects/ui/src/lib/interfaces/sizes.ts b/projects/ui/src/lib/interfaces/sizes.ts new file mode 100644 index 0000000..46e30db --- /dev/null +++ b/projects/ui/src/lib/interfaces/sizes.ts @@ -0,0 +1 @@ +export type Size = 's' | 'm' | 'l' | 'xl'; diff --git a/projects/ui/src/lib/section-label/section-label.component.html b/projects/ui/src/lib/section-label/section-label.component.html new file mode 100644 index 0000000..b1a8800 --- /dev/null +++ b/projects/ui/src/lib/section-label/section-label.component.html @@ -0,0 +1,6 @@ + + + +
+ +
diff --git a/projects/ui/src/lib/section-label/section-label.component.scss b/projects/ui/src/lib/section-label/section-label.component.scss new file mode 100644 index 0000000..be6cd2c --- /dev/null +++ b/projects/ui/src/lib/section-label/section-label.component.scss @@ -0,0 +1,23 @@ +:host { + display: flex; + align-items: baseline; + padding: var(--sk-gap-m) var(--sk-gap-l); + gap: var(--sk-gap-m); + opacity: 0.65; + + skirda-text { + text-transform: uppercase; + letter-spacing: 1px; + } + + .count { + height: 18px; + min-width: 18px; + background-color: rgba(255, 255, 255, 0.2); + text-align: center; + line-height: 18px; + border-radius: 18px; + padding: 0rem 0.3125rem; + box-sizing: border-box; + } +} diff --git a/projects/ui/src/lib/section-label/section-label.component.spec.ts b/projects/ui/src/lib/section-label/section-label.component.spec.ts new file mode 100644 index 0000000..6938680 --- /dev/null +++ b/projects/ui/src/lib/section-label/section-label.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SectionLabelComponent } from './section-label.component'; + +describe('SectionLabelComponent', () => { + let component: SectionLabelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SectionLabelComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SectionLabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/section-label/section-label.component.ts b/projects/ui/src/lib/section-label/section-label.component.ts new file mode 100644 index 0000000..f91e944 --- /dev/null +++ b/projects/ui/src/lib/section-label/section-label.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-section-label', + templateUrl: './section-label.component.html', + styleUrls: ['./section-label.component.scss'] +}) +export class SectionLabelComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/section-label/section-label.module.ts b/projects/ui/src/lib/section-label/section-label.module.ts new file mode 100644 index 0000000..343aef9 --- /dev/null +++ b/projects/ui/src/lib/section-label/section-label.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SectionLabelComponent } from './section-label.component'; +import { TypographyModule } from '../typography/typography.module'; + +@NgModule({ + declarations: [SectionLabelComponent], + imports: [CommonModule, TypographyModule], + exports: [SectionLabelComponent], +}) +export class SectionLabelModule {} diff --git a/projects/ui/src/lib/section/section.component.html b/projects/ui/src/lib/section/section.component.html new file mode 100644 index 0000000..50502f5 --- /dev/null +++ b/projects/ui/src/lib/section/section.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/projects/ui/src/lib/section/section.component.scss b/projects/ui/src/lib/section/section.component.scss new file mode 100644 index 0000000..1939834 --- /dev/null +++ b/projects/ui/src/lib/section/section.component.scss @@ -0,0 +1,52 @@ +:host { + display: block; + border-radius: var(--sk-br-m); + overflow: hidden; + position: relative; + + .sk-section { + display: flex; + align-items: center; + padding: var(--sk-gap-l); + gap: var(--sk-gap-l); + opacity: 0.75; + mix-blend-mode: overlay; + transition: 0.2s ease; + cursor: pointer; + + &:hover { + opacity: 1; + + &:before { + opacity: 0.5; + } + } + + &:before { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.2); + width: 100%; + height: 100%; + mix-blend-mode: overlay; + z-index: -1; + opacity: 0; + transition: 0.2s ease; + } + } + + &.active { + + .sk-section { + opacity: 1; + mix-blend-mode: normal; + + &:before { + opacity: 1; + } + } + } +} diff --git a/projects/ui/src/lib/section/section.component.spec.ts b/projects/ui/src/lib/section/section.component.spec.ts new file mode 100644 index 0000000..409313f --- /dev/null +++ b/projects/ui/src/lib/section/section.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SectionComponent } from './section.component'; + +describe('SectionComponent', () => { + let component: SectionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SectionComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/section/section.component.ts b/projects/ui/src/lib/section/section.component.ts new file mode 100644 index 0000000..2a17691 --- /dev/null +++ b/projects/ui/src/lib/section/section.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-section', + templateUrl: './section.component.html', + styleUrls: ['./section.component.scss'] +}) +export class SectionComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/section/section.module.ts b/projects/ui/src/lib/section/section.module.ts new file mode 100644 index 0000000..72678c2 --- /dev/null +++ b/projects/ui/src/lib/section/section.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SectionComponent } from './section.component'; + + + +@NgModule({ + declarations: [ + SectionComponent + ], + imports: [ + CommonModule + ], + exports: [ + SectionComponent + ] +}) +export class SectionModule { } diff --git a/projects/ui/src/lib/session/session.component.html b/projects/ui/src/lib/session/session.component.html new file mode 100644 index 0000000..73c433d --- /dev/null +++ b/projects/ui/src/lib/session/session.component.html @@ -0,0 +1,7 @@ +
+ +
+ {{session.title}} + {{session.status}} +
+
diff --git a/projects/ui/src/lib/session/session.component.scss b/projects/ui/src/lib/session/session.component.scss new file mode 100644 index 0000000..b8fd348 --- /dev/null +++ b/projects/ui/src/lib/session/session.component.scss @@ -0,0 +1,22 @@ +:host { + display: block; + + &.active { + + .sk-session { + background-color: var(--sk-accent); + } + } + + .sk-session { + display: flex; + align-items: center; + gap: var(--sk-gap-l); + padding: var(--sk-gap-l); + border-radius: var(--sk-br-m); + + .sk-session-info { + + } + } +} diff --git a/projects/ui/src/lib/session/session.component.spec.ts b/projects/ui/src/lib/session/session.component.spec.ts new file mode 100644 index 0000000..8e16039 --- /dev/null +++ b/projects/ui/src/lib/session/session.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SessionComponent } from './session.component'; + +describe('SessionComponent', () => { + let component: SessionComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SessionComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SessionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/session/session.component.ts b/projects/ui/src/lib/session/session.component.ts new file mode 100644 index 0000000..f8b3963 --- /dev/null +++ b/projects/ui/src/lib/session/session.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Session } from '../interfaces/session'; + +@Component({ + selector: 'skirda-session[session]', + templateUrl: './session.component.html', + styleUrls: ['./session.component.scss'], +}) +export class SessionComponent implements OnInit { + @Input() session!: Session; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/projects/ui/src/lib/session/session.module.ts b/projects/ui/src/lib/session/session.module.ts new file mode 100644 index 0000000..07f9ffe --- /dev/null +++ b/projects/ui/src/lib/session/session.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SessionComponent } from './session.component'; +import { ImageIconModule } from '../image-icon/image-icon.module'; +import { TypographyModule } from '../typography/typography.module'; + +@NgModule({ + declarations: [SessionComponent], + imports: [CommonModule, ImageIconModule, TypographyModule], + exports: [SessionComponent], +}) +export class SessionModule {} diff --git a/projects/ui/src/lib/typography/heading/heading.component.html b/projects/ui/src/lib/typography/heading/heading.component.html new file mode 100644 index 0000000..99b03f2 --- /dev/null +++ b/projects/ui/src/lib/typography/heading/heading.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/projects/ui/src/lib/typography/heading/heading.component.scss b/projects/ui/src/lib/typography/heading/heading.component.scss new file mode 100644 index 0000000..a2eb592 --- /dev/null +++ b/projects/ui/src/lib/typography/heading/heading.component.scss @@ -0,0 +1,25 @@ +:host { + + .heading { + font-weight: 600; + + &[data-size="1"] { + font-size: 32px; + } + &[data-size="2"] { + font-size: 28px; + } + &[data-size="3"] { + font-size: 24px; + } + &[data-size="4"] { + font-size: 22px; + } + &[data-size="5"] { + font-size: 18px; + } + &[data-size="6"] { + font-size: 15px; + } + } +} diff --git a/projects/ui/src/lib/typography/heading/heading.component.spec.ts b/projects/ui/src/lib/typography/heading/heading.component.spec.ts new file mode 100644 index 0000000..ac80022 --- /dev/null +++ b/projects/ui/src/lib/typography/heading/heading.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeadingComponent } from './heading.component'; + +describe('HeadingComponent', () => { + let component: HeadingComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HeadingComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeadingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/typography/heading/heading.component.ts b/projects/ui/src/lib/typography/heading/heading.component.ts new file mode 100644 index 0000000..a22889d --- /dev/null +++ b/projects/ui/src/lib/typography/heading/heading.component.ts @@ -0,0 +1,14 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-heading', + templateUrl: './heading.component.html', + styleUrls: ['./heading.component.scss'], +}) +export class HeadingComponent implements OnInit { + @Input() size: number | string = 3; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/projects/ui/src/lib/typography/text/text.component.html b/projects/ui/src/lib/typography/text/text.component.html new file mode 100644 index 0000000..6dbc743 --- /dev/null +++ b/projects/ui/src/lib/typography/text/text.component.html @@ -0,0 +1 @@ + diff --git a/projects/ui/src/lib/typography/text/text.component.scss b/projects/ui/src/lib/typography/text/text.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/projects/ui/src/lib/typography/text/text.component.spec.ts b/projects/ui/src/lib/typography/text/text.component.spec.ts new file mode 100644 index 0000000..1faba22 --- /dev/null +++ b/projects/ui/src/lib/typography/text/text.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TextComponent } from './text.component'; + +describe('TextComponent', () => { + let component: TextComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TextComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TextComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/typography/text/text.component.ts b/projects/ui/src/lib/typography/text/text.component.ts new file mode 100644 index 0000000..9da264e --- /dev/null +++ b/projects/ui/src/lib/typography/text/text.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-text', + templateUrl: './text.component.html', + styleUrls: ['./text.component.scss'] +}) +export class TextComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/typography/typography.module.ts b/projects/ui/src/lib/typography/typography.module.ts new file mode 100644 index 0000000..c2a942a --- /dev/null +++ b/projects/ui/src/lib/typography/typography.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { HeadingComponent } from './heading/heading.component'; +import { TextComponent } from './text/text.component'; + +@NgModule({ + declarations: [HeadingComponent, TextComponent], + imports: [CommonModule], + exports: [HeadingComponent, TextComponent], +}) +export class TypographyModule {} diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts new file mode 100644 index 0000000..90b0ac3 --- /dev/null +++ b/projects/ui/src/lib/ui.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { IconModule } from './icon/icon.module'; +import { InputModule } from './input/input.module'; +import { SessionModule } from './session/session.module'; +import { SectionModule } from './section/section.module'; +import { TypographyModule } from './typography/typography.module'; +import { SectionLabelModule } from './section-label/section-label.module'; +import { ImageIconModule } from './image-icon/image-icon.module'; + +@NgModule({ + declarations: [], + imports: [ + IconModule, + InputModule, + SessionModule, + SectionModule, + TypographyModule, + SectionLabelModule, + ImageIconModule, + ], + exports: [ + IconModule, + InputModule, + SessionModule, + SectionModule, + TypographyModule, + SectionLabelModule, + ImageIconModule, + ], +}) +export class UiModule {} diff --git a/projects/ui/src/public-api.ts b/projects/ui/src/public-api.ts new file mode 100644 index 0000000..4c2d343 --- /dev/null +++ b/projects/ui/src/public-api.ts @@ -0,0 +1,12 @@ +/* + * Public API Surface of ui + */ + +export * from './lib/ui.module'; +export * from './lib/icon/icon.module'; +export * from './lib/input/input.module'; +export * from './lib/session/session.module'; +export * from './lib/section/section.module'; +export * from './lib/typography/typography.module'; +export * from './lib/section-label/section-label.module'; +export * from './lib/image-icon/image-icon.module'; diff --git a/projects/ui/src/test.ts b/projects/ui/src/test.ts new file mode 100644 index 0000000..5775317 --- /dev/null +++ b/projects/ui/src/test.ts @@ -0,0 +1,27 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js'; +import 'zone.js/testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + (id: string): T; + keys(): string[]; + }; +}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), +); + +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().forEach(context); diff --git a/projects/ui/tsconfig.lib.json b/projects/ui/tsconfig.lib.json new file mode 100644 index 0000000..b77b13c --- /dev/null +++ b/projects/ui/tsconfig.lib.json @@ -0,0 +1,15 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "src/test.ts", + "**/*.spec.ts" + ] +} diff --git a/projects/ui/tsconfig.lib.prod.json b/projects/ui/tsconfig.lib.prod.json new file mode 100644 index 0000000..06de549 --- /dev/null +++ b/projects/ui/tsconfig.lib.prod.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +} diff --git a/projects/ui/tsconfig.spec.json b/projects/ui/tsconfig.spec.json new file mode 100644 index 0000000..715dd0a --- /dev/null +++ b/projects/ui/tsconfig.spec.json @@ -0,0 +1,17 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +}