From 83b19e6926e74d39cd0d8f287ef3da05334f3ed7 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Mon, 22 Jul 2024 21:53:06 -0300 Subject: [PATCH 01/19] fix: remove unnecessary log --- src/app/core/auth/login.resolve.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/core/auth/login.resolve.ts b/src/app/core/auth/login.resolve.ts index f5f5258..8c6fd12 100644 --- a/src/app/core/auth/login.resolve.ts +++ b/src/app/core/auth/login.resolve.ts @@ -32,7 +32,6 @@ export const loginResolver: ResolveFn = async ( (await authService.login(code)) && !!(await userService.loadProfile()) ); } - console.log(route.queryParams); if (route.queryParams['logout']) { dialog.open(ConfirmDialogComponent, { From ea3c42e308ae72fe44e1adbdbf52ade5e3f670e1 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Tue, 23 Jul 2024 22:44:54 -0300 Subject: [PATCH 02/19] feat: add material icons --- src/assets/icons/account.svg | 1 + src/assets/icons/logo.svg | 29 +++++++++++++++++++++++++++++ src/assets/icons/logout.svg | 1 + src/assets/icons/marquinhos.svg | 21 +++++++++++++++++++++ src/assets/icons/music-note.svg | 1 + src/assets/icons/settings.svg | 1 + src/assets/icons/sidebar-close.svg | 1 + src/assets/icons/sidebar-open.svg | 1 + 8 files changed, 56 insertions(+) create mode 100644 src/assets/icons/account.svg create mode 100644 src/assets/icons/logo.svg create mode 100644 src/assets/icons/logout.svg create mode 100644 src/assets/icons/marquinhos.svg create mode 100644 src/assets/icons/music-note.svg create mode 100644 src/assets/icons/settings.svg create mode 100644 src/assets/icons/sidebar-close.svg create mode 100644 src/assets/icons/sidebar-open.svg diff --git a/src/assets/icons/account.svg b/src/assets/icons/account.svg new file mode 100644 index 0000000..7176e7a --- /dev/null +++ b/src/assets/icons/account.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg new file mode 100644 index 0000000..a15af9c --- /dev/null +++ b/src/assets/icons/logo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/logout.svg b/src/assets/icons/logout.svg new file mode 100644 index 0000000..334178c --- /dev/null +++ b/src/assets/icons/logout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/marquinhos.svg b/src/assets/icons/marquinhos.svg new file mode 100644 index 0000000..07f1ff6 --- /dev/null +++ b/src/assets/icons/marquinhos.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/music-note.svg b/src/assets/icons/music-note.svg new file mode 100644 index 0000000..408aa48 --- /dev/null +++ b/src/assets/icons/music-note.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg new file mode 100644 index 0000000..67aa37d --- /dev/null +++ b/src/assets/icons/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/sidebar-close.svg b/src/assets/icons/sidebar-close.svg new file mode 100644 index 0000000..31051dc --- /dev/null +++ b/src/assets/icons/sidebar-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/sidebar-open.svg b/src/assets/icons/sidebar-open.svg new file mode 100644 index 0000000..b2ee93d --- /dev/null +++ b/src/assets/icons/sidebar-open.svg @@ -0,0 +1 @@ + \ No newline at end of file From 266ba21d9dd98d159f4068d8557b60e131cce533 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Tue, 23 Jul 2024 22:45:15 -0300 Subject: [PATCH 03/19] feat: change material theme to light --- src/styles.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index 16b742d..0ee9273 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -20,7 +20,7 @@ $my-typography: mat.define-typography-config( // Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". -$marquinhos-web-theme: mat.define-dark-theme( +$marquinhos-web-theme: mat.define-light-theme( ( color: ( primary: $marquinhos-web-primary, @@ -87,7 +87,7 @@ body { } .section { - background-color: #2f3136; + background-color: var(--secondary-background-color); padding: 3rem; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); From ecd20d381f297196e0639c3c9caf6d2de68d2ffd Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Tue, 23 Jul 2024 22:45:34 -0300 Subject: [PATCH 04/19] feat: add sidebar component --- .../components/sidebar/sidebar.component.html | 20 +++ .../components/sidebar/sidebar.component.scss | 158 ++++++++++++++++++ .../sidebar/sidebar.component.spec.ts | 28 ++++ .../components/sidebar/sidebar.component.ts | 60 +++++++ 4 files changed, 266 insertions(+) create mode 100644 src/app/components/sidebar/sidebar.component.html create mode 100644 src/app/components/sidebar/sidebar.component.scss create mode 100644 src/app/components/sidebar/sidebar.component.spec.ts create mode 100644 src/app/components/sidebar/sidebar.component.ts diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html new file mode 100644 index 0000000..78fd265 --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.html @@ -0,0 +1,20 @@ + + +
+
    +
  • + Account icon + {{ item.label }} +
    • +
+
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss new file mode 100644 index 0000000..35ce1f4 --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.scss @@ -0,0 +1,158 @@ +:host(.app-sidebar) { + --animation-duration: 0.3s; + position: absolute; + top: 0; + left: 0; + height: 100dvh; + color: var(--secondary-color); + background-color: var(--secondary-background-color); + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12); + z-index: 10; + max-width: 240px; + min-width: 240px; + height: 100dvh; + border-top-right-radius: 32px; + padding: 36px 24px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; + transition: min-width var(--animation-duration) ease-in-out, + max-width var(--animation-duration) ease-in-out, + padding var(--animation-duration) ease-in-out; + + .sidebar-logo { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 8px; + width: 100%; + height: 40px; + overflow: hidden; + transition: width var(--animation-duration) ease-in-out; + font-size: 20px; + font-weight: 600; + + img { + object-fit: contain; + width: 40px; + height: 40px; + } + } + + .sidebar-menu { + display: flex; + flex-grow: 1; + width: 100%; + + ul { + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + gap: 16px; + width: 100%; + + li { + display: flex; + justify-content: flex-start; + align-items: center; + flex-direction: row; + gap: 8px; + width: 100%; + padding: 12px 20px; + border-radius: 12px; + transition-timing-function: ease-in-out; + transition: width var(--animation-duration), + padding var(--animation-duration); + + img { + object-fit: none; + object-position: center; + } + + span { + overflow: hidden; + font-weight: 500; + width: 100%; + transition: width var(--animation-duration) ease-in-out; + } + + &:hover:not(.selected) { + cursor: pointer; + background-color: rgba(228, 228, 252, 0.3); + } + + &.selected { + background-color: var(--primary-color); + } + } + + li:last-child { + margin-top: auto; + } + } + } + + &.app-sidebar-collapsed { + align-items: flex-start; + max-width: 80px; + min-width: 80px; + padding: 36px 16px; + + .sidebar-logo { + width: 0; + } + + .sidebar-menu { + ul { + li { + width: 48px; + padding: 12px; + + span { + width: 0; + } + } + } + } + + .sidebar-control { + transform: rotate(180deg); + right: 20px; + } + } + + .sidebar-control { + position: absolute; + display: flex; + padding: 8px; + top: 36px; + right: 14px; + transition: transform var(--animation-duration) ease-in-out; + + :hover { + cursor: pointer; + } + + img { + width: 24px; + height: 24px; + } + } + + @media screen and (max-width: 768px) { + position: fixed; + &.app-sidebar-collapsed { + left: -80px; + + .sidebar-control { + border-radius: 50%; + right: -56px; + background-color: var(--secondary-background-color); + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12); + } + } + } +} diff --git a/src/app/components/sidebar/sidebar.component.spec.ts b/src/app/components/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..1845f29 --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts new file mode 100644 index 0000000..40bfb8a --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.ts @@ -0,0 +1,60 @@ +import { DOCUMENT, NgFor } from '@angular/common'; +import { + Component, + EventEmitter, + inject, + OnInit, + Output, + Input, +} from '@angular/core'; +import { BreakpointObserver } from '@angular/cdk/layout'; + +@Component({ + selector: 'app-sidebar', + imports: [NgFor], + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'], + standalone: true, + host: { + class: 'app-sidebar', + '[class.app-sidebar-collapsed]': 'collapsed', + }, +}) +export class SidebarComponent implements OnInit { + @Output() collapseChange = new EventEmitter(); + @Output() itemChange = new EventEmitter(); + + @Input() collapsed = true; + @Input() selected = ''; + @Input() options = [ + { id: 'profile', icon: 'account', label: 'Perfil' }, + { id: 'lastfm', icon: 'music-note', label: 'Lastfm' }, + { id: 'settings', icon: 'settings', label: 'Ajustes' }, + { id: 'logout', icon: 'logout', label: 'Sair' }, + ]; + @Input() mobile = false; + + private readonly _breakpointObserver = inject(BreakpointObserver); + + constructor() {} + + ngOnInit() { + this._breakpointObserver + .observe('(min-width: 768px)') + .subscribe((state) => { + if (!state.matches) { + this.mobile = true; + } + }); + } + + toggleSidebar() { + this.collapsed = !this.collapsed; + this.collapseChange.emit(this.collapsed); + } + + onItemClick(item: any) { + this.selected = item.id; + this.itemChange.emit(item.id); + } +} From a1892bd3a7d2934302949797f1391f416b998ed8 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Tue, 23 Jul 2024 22:49:43 -0300 Subject: [PATCH 05/19] feat: use color variables instead of hardcoded --- src/app/app.component.scss | 5 ++--- src/app/pages/home/home.component.ts | 4 ---- src/app/pages/profile/profile.component.ts | 1 - src/app/pages/story-gen/story-gen.component.scss | 5 +++-- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 5d8f85d..e29eb0e 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,8 +3,8 @@ width: 100dvw; display: flex; flex-direction: column; - background-color: #36393f; - color: white; + background-color: var(--primary-color); + color: var(--text-color); overflow-y: overlay; header { @@ -13,7 +13,6 @@ justify-content: space-between; color: #7289da; padding: 1rem; - background-color: #2f3136; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); .logo { diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index c00c638..e66d210 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -49,7 +49,6 @@ import { LastfmStoryComponent } from 'src/app/components/lastfm-story/lastfm-sto align-items: center; justify-content: center; height: 100%; - color: #fff; header { text-align: center; @@ -62,7 +61,6 @@ import { LastfmStoryComponent } from 'src/app/components/lastfm-story/lastfm-sto p { font-size: 1.2rem; - color: #aaa; } } @@ -92,7 +90,6 @@ import { LastfmStoryComponent } from 'src/app/components/lastfm-story/lastfm-sto } .privacy-policy { - color: #fff; text-decoration: underline; cursor: pointer; } @@ -100,7 +97,6 @@ import { LastfmStoryComponent } from 'src/app/components/lastfm-story/lastfm-sto footer { font-size: 1.2rem; - color: #aaa; text-align: center; margin-top: 2rem; diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts index a289d32..b700bdc 100644 --- a/src/app/pages/profile/profile.component.ts +++ b/src/app/pages/profile/profile.component.ts @@ -100,7 +100,6 @@ import { LoginHelperService } from 'src/app/core/auth/login-helper.service'; display: flex; flex-direction: column; padding: 2rem 15rem; - color: #fff; gap: 2rem; table { diff --git a/src/app/pages/story-gen/story-gen.component.scss b/src/app/pages/story-gen/story-gen.component.scss index fe5e4d1..44c09f1 100644 --- a/src/app/pages/story-gen/story-gen.component.scss +++ b/src/app/pages/story-gen/story-gen.component.scss @@ -3,6 +3,7 @@ flex-direction: column; align-items: center; justify-content: space-between; + color: var(--primary-text-color); .config { display: flex; @@ -11,7 +12,7 @@ width: 100dvw; max-width: 500px; padding: 8px; - background-color: #2f3136; + background-color: var(--secondary-background-color); border-radius: 8px; margin: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); @@ -61,7 +62,7 @@ } &-selected { - background-color: #9c27b0; + background-color: var(--primary-background-color); padding: 6px 14px; border-radius: 20px; } From 8f9334ff38c1a81957b5d981a87bbc911f47a9fc Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:18:37 -0300 Subject: [PATCH 06/19] build: add svg to ts and update icons --- .svg-to-tsrc | 16 ++ .vscode/settings.json | 3 +- angular.json | 4 +- package-lock.json | 400 ++++++++++++++++++++++------- package.json | 6 +- src/assets/icons/account.svg | 2 +- src/assets/icons/dark-mode.svg | 1 + src/assets/icons/light-mode.svg | 1 + src/assets/icons/logo.svg | 44 ++-- src/assets/icons/logout.svg | 2 +- src/assets/icons/marquinhos.svg | 34 +-- src/assets/icons/music-note.svg | 2 +- src/assets/icons/settings.svg | 2 +- src/assets/icons/sidebar-close.svg | 2 +- src/assets/icons/sidebar-open.svg | 2 +- 15 files changed, 375 insertions(+), 146 deletions(-) create mode 100644 .svg-to-tsrc create mode 100644 src/assets/icons/dark-mode.svg create mode 100644 src/assets/icons/light-mode.svg diff --git a/.svg-to-tsrc b/.svg-to-tsrc new file mode 100644 index 0000000..a517a9e --- /dev/null +++ b/.svg-to-tsrc @@ -0,0 +1,16 @@ +{ + "srcFiles": [ + "./src/assets/icons/*.svg" + ], + "outputDirectory": "./src/app/components/svg-icon", + "interfaceName": "maquinhosIcon", + "typeName": "marquinhosIcon", + "prefix": "marquinhosIcon", + "fileName": "marquinhos-icons", + "svgoConfig": { + "plugins": [ + "cleanupAttrs" + ] + }, + "compileSources": true +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 4baad8c..4cb9128 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,7 +21,8 @@ }, "angular-schematics.schematicsDefaultOptions": { "angular-*": { - "style": "scss" + "style": "scss", + "externalTemplate": true } } } diff --git a/angular.json b/angular.json index 53b7325..5b3b0f4 100644 --- a/angular.json +++ b/angular.json @@ -11,8 +11,8 @@ "projectType": "application", "schematics": { "@schematics/angular:component": { - "inlineTemplate": true, - "inlineStyle": true, + "inlineTemplate": false, + "inlineStyle": false, "style": "scss", "standalone": true }, diff --git a/package-lock.json b/package-lock.json index a52b35f..f22ab97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "@angular/router": "^16.1.0", "html-to-image": "^1.11.11", "rxjs": "~7.8.0", + "svg-to-ts": "^12.0.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, @@ -554,7 +555,6 @@ "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", - "dev": true, "dependencies": { "@babel/highlight": "^7.24.2", "picocolors": "^1.0.0" @@ -968,7 +968,6 @@ "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -1014,7 +1013,6 @@ "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", @@ -3947,6 +3945,14 @@ "node": ">= 10" } }, + "node_modules/@trysound/sax": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/@tufjs/canonical-json": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz", @@ -4111,6 +4117,11 @@ "integrity": "sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" + }, "node_modules/@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", @@ -4548,7 +4559,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, "engines": { "node": ">=8" } @@ -4557,7 +4567,6 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -4729,14 +4738,12 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "dev": true, "funding": [ { "type": "github", @@ -4789,7 +4796,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz", "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==", - "dev": true, "dependencies": { "buffer": "^5.5.0", "inherits": "^2.0.4", @@ -4850,8 +4856,7 @@ "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "dev": true + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "node_modules/brace-expansion": { "version": "2.0.1", @@ -4910,7 +4915,6 @@ "version": "5.7.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", - "dev": true, "funding": [ { "type": "github", @@ -5003,7 +5007,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true, "engines": { "node": ">=6" } @@ -5041,7 +5044,6 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -5115,7 +5117,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", - "dev": true, "dependencies": { "restore-cursor": "^3.1.0" }, @@ -5127,7 +5128,6 @@ "version": "2.9.0", "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz", "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==", - "dev": true, "engines": { "node": ">=6" }, @@ -5162,7 +5162,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==", - "dev": true, "engines": { "node": ">=0.8" } @@ -5185,7 +5184,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -5193,8 +5191,7 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, "node_modules/color-support": { "version": "1.1.3", @@ -5286,8 +5283,7 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "node_modules/connect": { "version": "3.7.0", @@ -5621,7 +5617,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "dev": true, "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -5633,11 +5628,22 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "dev": true, "engines": { "node": ">= 6" }, @@ -5657,6 +5663,36 @@ "node": ">=4" } }, + "node_modules/csso": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", + "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "dependencies": { + "css-tree": "~2.2.0" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/css-tree": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", + "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "dependencies": { + "mdn-data": "2.0.28", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0", + "npm": ">=7.0.0" + } + }, + "node_modules/csso/node_modules/mdn-data": { + "version": "2.0.28", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + }, "node_modules/custom-event": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz", @@ -5705,7 +5741,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==", - "dev": true, "dependencies": { "clone": "^1.0.2" }, @@ -5805,7 +5840,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -5819,7 +5853,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "dev": true, "funding": [ { "type": "github", @@ -5831,7 +5864,6 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -5846,7 +5878,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -5974,7 +6005,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "devOptional": true, "engines": { "node": ">=0.12" }, @@ -6014,7 +6044,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "dependencies": { "is-arrayish": "^0.2.1" } @@ -6093,7 +6122,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "dev": true, "engines": { "node": ">=0.8.0" } @@ -6606,8 +6634,7 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "dev": true + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "node_modules/fsevents": { "version": "2.3.2", @@ -6795,8 +6822,7 @@ "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", - "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", - "dev": true + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" }, "node_modules/handle-thing": { "version": "2.0.1", @@ -6820,7 +6846,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, "engines": { "node": ">=4" } @@ -7135,7 +7160,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "dev": true, "funding": [ { "type": "github", @@ -7195,7 +7219,6 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -7211,7 +7234,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true, "engines": { "node": ">=4" } @@ -7238,7 +7260,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -7247,8 +7268,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/ini": { "version": "4.1.1", @@ -7373,8 +7393,7 @@ "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", - "dev": true + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" }, "node_modules/is-binary-path": { "version": "2.1.0", @@ -7449,7 +7468,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", - "dev": true, "engines": { "node": ">=8" } @@ -7509,7 +7527,6 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz", "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", - "dev": true, "engines": { "node": ">=10" }, @@ -7762,8 +7779,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "3.14.1", @@ -7793,8 +7809,7 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, "node_modules/json-schema-traverse": { "version": "1.0.0", @@ -8213,8 +8228,7 @@ "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", - "dev": true + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "node_modules/loader-runner": { "version": "4.3.0", @@ -8252,17 +8266,31 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash.camelcase": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", + "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, + "node_modules/lodash.kebabcase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", + "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==" + }, + "node_modules/lodash.snakecase": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz", + "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==" + }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==", - "dev": true, "dependencies": { "chalk": "^4.1.0", "is-unicode-supported": "^0.1.0" @@ -8278,7 +8306,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -8293,7 +8320,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -8309,7 +8335,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -8320,14 +8345,12 @@ "node_modules/log-symbols/node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/log-symbols/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -8336,7 +8359,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -8440,6 +8462,11 @@ "node": ">=12" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -8541,7 +8568,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", - "dev": true, "engines": { "node": ">=6" } @@ -9208,7 +9234,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dev": true, "dependencies": { "boolbase": "^1.0.0" }, @@ -9265,7 +9290,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dev": true, "dependencies": { "wrappy": "1" } @@ -9274,7 +9298,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz", "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==", - "dev": true, "dependencies": { "mimic-fn": "^2.1.0" }, @@ -9306,7 +9329,6 @@ "version": "5.4.1", "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz", "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==", - "dev": true, "dependencies": { "bl": "^4.1.0", "chalk": "^4.1.0", @@ -9329,7 +9351,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -9344,7 +9365,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -9360,7 +9380,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -9371,14 +9390,12 @@ "node_modules/ora/node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/ora/node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -9387,7 +9404,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -9519,7 +9535,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, "dependencies": { "callsites": "^3.0.0" }, @@ -9531,7 +9546,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -9614,7 +9628,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -9669,7 +9682,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, "engines": { "node": ">=8" } @@ -9677,8 +9689,7 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -9857,6 +9868,20 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -10068,7 +10093,6 @@ "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", - "dev": true, "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", @@ -10266,7 +10290,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", - "dev": true, "dependencies": { "onetime": "^5.1.0", "signal-exit": "^3.0.2" @@ -10278,8 +10301,7 @@ "node_modules/restore-cursor/node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", - "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", - "dev": true + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==" }, "node_modules/retry": { "version": "0.12.0", @@ -10423,7 +10445,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true, "funding": [ { "type": "github", @@ -10953,7 +10974,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -11117,7 +11137,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "dev": true, "dependencies": { "safe-buffer": "~5.2.0" } @@ -11155,7 +11174,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -11261,7 +11279,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -11281,6 +11298,198 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-to-ts": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/svg-to-ts/-/svg-to-ts-12.0.0.tgz", + "integrity": "sha512-jTHHaSQdXbzzXZ0uwbOPXkrGhHakJbnoe0dNob98AzRgTVSX+sKCOm/AUSdn4xcIOTCrZ2zS86ZpcmycW8QJbA==", + "dependencies": { + "chalk": "^3.0.0", + "commander": "^4.0.1", + "cosmiconfig": "^6.0.0", + "glob": "^7.1.6", + "graceful-fs": "^4.2.6", + "lodash.camelcase": "^4.3.0", + "lodash.kebabcase": "^4.1.1", + "lodash.snakecase": "^4.1.1", + "ora": "^5.1.0", + "prettier": "^3.2.5", + "svgo": "^3.0.2", + "typescript": "^4.9.4" + }, + "bin": { + "svg-to-ts-constants": "src/bin/svg-to-ts-constants.js", + "svg-to-ts-files": "src/bin/svg-to-ts-files.js", + "svg-to-ts-object": "src/bin/svg-to-ts-object.js" + } + }, + "node_modules/svg-to-ts/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/svg-to-ts/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/svg-to-ts/node_modules/chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/svg-to-ts/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/svg-to-ts/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/svg-to-ts/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "engines": { + "node": ">= 6" + } + }, + "node_modules/svg-to-ts/node_modules/cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/svg-to-ts/node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/svg-to-ts/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/svg-to-ts/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/svg-to-ts/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/svg-to-ts/node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, + "node_modules/svgo": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", + "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "dependencies": { + "@trysound/sax": "0.2.0", + "commander": "^7.2.0", + "css-select": "^5.1.0", + "css-tree": "^2.3.1", + "css-what": "^6.1.0", + "csso": "^5.0.5", + "picocolors": "^1.0.0" + }, + "bin": { + "svgo": "bin/svgo" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/svgo" + } + }, + "node_modules/svgo/node_modules/commander": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "engines": { + "node": ">= 10" + } + }, "node_modules/symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", @@ -11790,8 +11999,7 @@ "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "dev": true + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "node_modules/utils-merge": { "version": "1.0.1", @@ -11925,7 +12133,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==", - "dev": true, "dependencies": { "defaults": "^1.0.3" } @@ -12357,8 +12564,7 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "dev": true + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, "node_modules/ws": { "version": "8.11.0", @@ -12396,6 +12602,14 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "engines": { + "node": ">= 6" + } + }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index 9c68e75..4d94bfb 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,12 @@ "name": "marquinhos-web", "version": "0.0.0", "scripts": { - "ng": "ng", + "ng": "generate-icons && ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", - "test": "ng test" + "test": "ng test", + "generate-icons": "svg-to-ts-constants" }, "private": true, "dependencies": { @@ -22,6 +23,7 @@ "@angular/router": "^16.1.0", "html-to-image": "^1.11.11", "rxjs": "~7.8.0", + "svg-to-ts": "^12.0.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, diff --git a/src/assets/icons/account.svg b/src/assets/icons/account.svg index 7176e7a..3ca9cfe 100644 --- a/src/assets/icons/account.svg +++ b/src/assets/icons/account.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/dark-mode.svg b/src/assets/icons/dark-mode.svg new file mode 100644 index 0000000..0a7385a --- /dev/null +++ b/src/assets/icons/dark-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/light-mode.svg b/src/assets/icons/light-mode.svg new file mode 100644 index 0000000..d7a911d --- /dev/null +++ b/src/assets/icons/light-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg index a15af9c..c4697b2 100644 --- a/src/assets/icons/logo.svg +++ b/src/assets/icons/logo.svg @@ -1,29 +1,29 @@ - + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - + diff --git a/src/assets/icons/logout.svg b/src/assets/icons/logout.svg index 334178c..c637945 100644 --- a/src/assets/icons/logout.svg +++ b/src/assets/icons/logout.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/marquinhos.svg b/src/assets/icons/marquinhos.svg index 07f1ff6..0f07524 100644 --- a/src/assets/icons/marquinhos.svg +++ b/src/assets/icons/marquinhos.svg @@ -1,21 +1,15 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/src/assets/icons/music-note.svg b/src/assets/icons/music-note.svg index 408aa48..9df5acc 100644 --- a/src/assets/icons/music-note.svg +++ b/src/assets/icons/music-note.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg index 67aa37d..d0f8f03 100644 --- a/src/assets/icons/settings.svg +++ b/src/assets/icons/settings.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/sidebar-close.svg b/src/assets/icons/sidebar-close.svg index 31051dc..e16929e 100644 --- a/src/assets/icons/sidebar-close.svg +++ b/src/assets/icons/sidebar-close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/sidebar-open.svg b/src/assets/icons/sidebar-open.svg index b2ee93d..d0cf0b8 100644 --- a/src/assets/icons/sidebar-open.svg +++ b/src/assets/icons/sidebar-open.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From f75f88b95377940b7197277df8fc799cdd9c2e52 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:20:07 -0300 Subject: [PATCH 07/19] feat: add base card component --- .../base-card/base-card.component.html | 1 + .../base-card/base-card.component.scss | 16 ++++++++++++++++ .../components/base-card/base-card.component.ts | 14 ++++++++++++++ 3 files changed, 31 insertions(+) create mode 100644 src/app/components/base-card/base-card.component.html create mode 100644 src/app/components/base-card/base-card.component.scss create mode 100644 src/app/components/base-card/base-card.component.ts diff --git a/src/app/components/base-card/base-card.component.html b/src/app/components/base-card/base-card.component.html new file mode 100644 index 0000000..6dbc743 --- /dev/null +++ b/src/app/components/base-card/base-card.component.html @@ -0,0 +1 @@ + diff --git a/src/app/components/base-card/base-card.component.scss b/src/app/components/base-card/base-card.component.scss new file mode 100644 index 0000000..d12af9f --- /dev/null +++ b/src/app/components/base-card/base-card.component.scss @@ -0,0 +1,16 @@ +:host { + display: flex; + flex-direction: column; + gap: 16px; + background-color: var(--secondary-background-color); + padding: 32px; + border-radius: 20px; + width: 100%; + height: 100%; + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12); + + @media screen and (max-width: 768px) { + padding: 16px; + width: 100%; + } +} diff --git a/src/app/components/base-card/base-card.component.ts b/src/app/components/base-card/base-card.component.ts new file mode 100644 index 0000000..4ded0d9 --- /dev/null +++ b/src/app/components/base-card/base-card.component.ts @@ -0,0 +1,14 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-base-card', + standalone: true, + imports: [ + CommonModule, + ], + templateUrl: './base-card.component.html', + styleUrls: ['./base-card.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BaseCardComponent { } From 66d705f3a60ff5e60b78eda2b8ffe1175d5f4833 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:20:39 -0300 Subject: [PATCH 08/19] feat: use base card on story gen page --- .../pages/story-gen/story-gen.component.html | 4 ++-- .../pages/story-gen/story-gen.component.scss | 19 +++---------------- .../pages/story-gen/story-gen.component.ts | 2 ++ 3 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/app/pages/story-gen/story-gen.component.html b/src/app/pages/story-gen/story-gen.component.html index 9e403df..dd808a1 100644 --- a/src/app/pages/story-gen/story-gen.component.html +++ b/src/app/pages/story-gen/story-gen.component.html @@ -1,4 +1,4 @@ -
+
- +
diff --git a/src/app/pages/story-gen/story-gen.component.scss b/src/app/pages/story-gen/story-gen.component.scss index 44c09f1..6085eb2 100644 --- a/src/app/pages/story-gen/story-gen.component.scss +++ b/src/app/pages/story-gen/story-gen.component.scss @@ -4,20 +4,8 @@ align-items: center; justify-content: space-between; color: var(--primary-text-color); - - .config { - display: flex; - flex-direction: column; - gap: 32px; - width: 100dvw; - max-width: 500px; - padding: 8px; - background-color: var(--secondary-background-color); - border-radius: 8px; - margin: 16px; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); - box-sizing: border-box; - } + width: 100%; + height: 100%; .options-list { display: flex; @@ -34,13 +22,12 @@ display: flex; flex-direction: column; max-width: 500px; - min-width: 344px; &-item-header { display: flex; align-items: center; justify-content: space-between; - padding: 16px; + padding: 16px 0; &:hover { cursor: pointer; diff --git a/src/app/pages/story-gen/story-gen.component.ts b/src/app/pages/story-gen/story-gen.component.ts index c4f52bc..8793dfe 100644 --- a/src/app/pages/story-gen/story-gen.component.ts +++ b/src/app/pages/story-gen/story-gen.component.ts @@ -12,6 +12,7 @@ import { LastfmStoryComponent } from 'src/app/components/lastfm-story/lastfm-sto import { UserService } from 'src/app/core/services/user.service'; import { Platform } from '@angular/cdk/platform'; import { ShareService } from 'src/app/core/services/share.service'; +import { BaseCardComponent } from '../../components/base-card/base-card.component'; @Component({ selector: 'app-story-gen', @@ -27,6 +28,7 @@ import { ShareService } from 'src/app/core/services/share.service'; MatIconModule, MatProgressSpinnerModule, LastfmStoryComponent, + BaseCardComponent, ], }) export class StoryGenComponent implements OnInit { From 207ad72fa768a823e0b128f9e4c74542f89f43c7 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:21:10 -0300 Subject: [PATCH 09/19] feat: move to external template and use base card --- .../pages/settings/settings.component.html | 13 ++++++ .../pages/settings/settings.component.scss | 13 ++++++ src/app/pages/settings/settings.component.ts | 44 ++----------------- 3 files changed, 30 insertions(+), 40 deletions(-) create mode 100644 src/app/pages/settings/settings.component.html create mode 100644 src/app/pages/settings/settings.component.scss diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html new file mode 100644 index 0000000..98fb30e --- /dev/null +++ b/src/app/pages/settings/settings.component.html @@ -0,0 +1,13 @@ + +
+

Apagar seus Dados

+
+
+ + +
+ diff --git a/src/app/pages/settings/settings.component.scss b/src/app/pages/settings/settings.component.scss new file mode 100644 index 0000000..5da5883 --- /dev/null +++ b/src/app/pages/settings/settings.component.scss @@ -0,0 +1,13 @@ +:host { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + + .section-actions { + display: flex; + flex-direction: column; + gap: 1rem; + width: fit-content; + } +} diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts index 1b3ceff..b0570b7 100644 --- a/src/app/pages/settings/settings.component.ts +++ b/src/app/pages/settings/settings.component.ts @@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { ConfirmDialogComponent } from 'src/app/components/confirm-dialog/confirm-dialog.component'; import { UserService } from 'src/app/core/services/user.service'; +import { BaseCardComponent } from '../../components/base-card/base-card.component'; @Component({ standalone: true, @@ -12,47 +13,10 @@ import { UserService } from 'src/app/core/services/user.service'; MatButtonModule, ConfirmDialogComponent, MatDialogModule, + BaseCardComponent, ], - template: ` -
-
-

Apagar seus Dados

-
-
- - -
-
- `, - styles: [ - ` - :host { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - padding: 20px 15rem; - color: #fff; - - .section-actions { - display: flex; - flex-direction: column; - gap: 1rem; - width: fit-content; - } - } - - @media screen and (max-width: 768px) { - :host { - padding: 20px 0.5rem; - } - } - `, - ], + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.scss'], }) export class SettingsComponent { private _userService = inject(UserService); From 7faab0684b031e96611bbd0ba3aaae9d567578fb Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:21:50 -0300 Subject: [PATCH 10/19] feat: add lastfm page --- src/app/pages/lastfm/lastfm.component.html | 9 +++ src/app/pages/lastfm/lastfm.component.scss | 5 ++ src/app/pages/lastfm/lastfm.component.spec.ts | 28 +++++++ src/app/pages/lastfm/lastfm.component.ts | 78 +++++++++++++++++++ 4 files changed, 120 insertions(+) create mode 100644 src/app/pages/lastfm/lastfm.component.html create mode 100644 src/app/pages/lastfm/lastfm.component.scss create mode 100644 src/app/pages/lastfm/lastfm.component.spec.ts create mode 100644 src/app/pages/lastfm/lastfm.component.ts diff --git a/src/app/pages/lastfm/lastfm.component.html b/src/app/pages/lastfm/lastfm.component.html new file mode 100644 index 0000000..86d0cc3 --- /dev/null +++ b/src/app/pages/lastfm/lastfm.component.html @@ -0,0 +1,9 @@ + diff --git a/src/app/pages/lastfm/lastfm.component.scss b/src/app/pages/lastfm/lastfm.component.scss new file mode 100644 index 0000000..7c9f891 --- /dev/null +++ b/src/app/pages/lastfm/lastfm.component.scss @@ -0,0 +1,5 @@ +:host { + display: flex; + width: 100%; + height: 100%; +} diff --git a/src/app/pages/lastfm/lastfm.component.spec.ts b/src/app/pages/lastfm/lastfm.component.spec.ts new file mode 100644 index 0000000..7733fb5 --- /dev/null +++ b/src/app/pages/lastfm/lastfm.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { LastfmComponent } from './lastfm.component'; + +describe('LastfmComponent', () => { + let component: LastfmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LastfmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LastfmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/lastfm/lastfm.component.ts b/src/app/pages/lastfm/lastfm.component.ts new file mode 100644 index 0000000..ca7778a --- /dev/null +++ b/src/app/pages/lastfm/lastfm.component.ts @@ -0,0 +1,78 @@ +import { Component, inject, OnInit } from '@angular/core'; +import { ProfileCardComponent } from 'src/app/components/profile-card/profile-card.component'; +import { LastfmStatusCardComponent } from '../../components/lastfm-status-card/lastfm-status-card.component'; +import { DOCUMENT } from '@angular/common'; +import { Router } from '@angular/router'; +import { Observable } from 'rxjs'; +import { LoginHelperService } from 'src/app/core/auth/login-helper.service'; +import { UserService } from 'src/app/core/services/user.service'; +import { User } from 'src/app/core/types/user.interface'; + +@Component({ + selector: 'app-lastfm', + templateUrl: './lastfm.component.html', + styleUrls: ['./lastfm.component.scss'], + standalone: true, + imports: [LastfmStatusCardComponent], +}) +export class LastfmComponent implements OnInit { + registerStatusMessage: string | null = null; + registered = false; + scrobblesOn = false; + scrobbleToggleDisabled = false; + user?: Observable = undefined; + + private readonly _userService = inject(UserService); + private readonly _loginHelperService = inject(LoginHelperService); + private readonly _router = inject(Router); + private readonly _document = inject(DOCUMENT); + + constructor() {} + + ngOnInit(): void { + this.getRegisterStatus(); + this.user = this._userService.userObservable; + } + + register(): void { + this._loginHelperService.lastfmLoginURL().then((url) => { + this._document.defaultView?.open(url, '_self'); + }); + } + + goToStoryGen(): void { + this._router.navigate(['/story-gen']); + } + + async getRegisterStatus(): Promise { + try { + const response = await this._userService.lastfmIntegrationStatus(); + if (response && response.id !== '') { + this.registerStatusMessage = 'Conta do Last.fm vinculada!'; + this.registered = true; + this.scrobblesOn = response.scrobblesOn; + } else { + this.registerStatusMessage = 'Conta do Last.fm não vinculada!'; + this.registered = false; + this.scrobblesOn = false; + } + } catch (error) { + this.registerStatusMessage = 'Houve um erro ao verificar o registro!'; + this.registered = false; + this.scrobblesOn = false; + } + } + + async toggleScrobbles(): Promise { + this.scrobbleToggleDisabled = true; + try { + const response = await this._userService.toggleScrobble(); + if (response) { + this.scrobblesOn = response.scrobblesOn; + this.scrobbleToggleDisabled = false; + } + } catch (error) { + this.scrobblesOn = false; + } + } +} From 13604a59bb14acf68ab1c305f6b8a5031c542f50 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:22:14 -0300 Subject: [PATCH 11/19] feat: add svg icon component with svg to ts icons --- .../components/svg-icon/marquinhos-icons.ts | 100 ++++++++++++++++++ .../components/svg-icon/svg-icon.directive.ts | 18 ++++ 2 files changed, 118 insertions(+) create mode 100644 src/app/components/svg-icon/marquinhos-icons.ts create mode 100644 src/app/components/svg-icon/svg-icon.directive.ts diff --git a/src/app/components/svg-icon/marquinhos-icons.ts b/src/app/components/svg-icon/marquinhos-icons.ts new file mode 100644 index 0000000..7c0c066 --- /dev/null +++ b/src/app/components/svg-icon/marquinhos-icons.ts @@ -0,0 +1,100 @@ +/* 🤖 this file was generated by svg-to-ts */ +export const marquinhosIconAccount: { + name: 'account'; + data: string; +} = { + name: 'account', + data: ``, +}; +export const marquinhosIconDarkMode: { + name: 'dark_mode'; + data: string; +} = { + name: 'dark_mode', + data: ``, +}; +export const marquinhosIconLightMode: { + name: 'light_mode'; + data: string; +} = { + name: 'light_mode', + data: ``, +}; +export const marquinhosIconLogo: { + name: 'logo'; + data: string; +} = { + name: 'logo', + data: ``, +}; +export const marquinhosIconLogout: { + name: 'logout'; + data: string; +} = { + name: 'logout', + data: ``, +}; +export const marquinhosIconMarquinhos: { + name: 'marquinhos'; + data: string; +} = { + name: 'marquinhos', + data: ``, +}; +export const marquinhosIconMusicNote: { + name: 'music_note'; + data: string; +} = { + name: 'music_note', + data: ``, +}; +export const marquinhosIconSettings: { + name: 'settings'; + data: string; +} = { + name: 'settings', + data: ``, +}; +export const marquinhosIconSidebarClose: { + name: 'sidebar_close'; + data: string; +} = { + name: 'sidebar_close', + data: ``, +}; +export const marquinhosIconSidebarOpen: { + name: 'sidebar_open'; + data: string; +} = { + name: 'sidebar_open', + data: ``, +}; +export type marquinhosIcon = + | 'account' + | 'dark_mode' + | 'light_mode' + | 'logo' + | 'logout' + | 'marquinhos' + | 'music_note' + | 'settings' + | 'sidebar_close' + | 'sidebar_open'; +export interface maquinhosIcon { + name: marquinhosIcon; + data: string; +} +export type maquinhosIconNameSubset> = + T[number]['name']; +export const completeIconSet = [ + marquinhosIconAccount, + marquinhosIconDarkMode, + marquinhosIconLightMode, + marquinhosIconLogo, + marquinhosIconLogout, + marquinhosIconMarquinhos, + marquinhosIconMusicNote, + marquinhosIconSettings, + marquinhosIconSidebarClose, + marquinhosIconSidebarOpen, +]; diff --git a/src/app/components/svg-icon/svg-icon.directive.ts b/src/app/components/svg-icon/svg-icon.directive.ts new file mode 100644 index 0000000..ad33ac1 --- /dev/null +++ b/src/app/components/svg-icon/svg-icon.directive.ts @@ -0,0 +1,18 @@ +import { Directive, ElementRef, inject, Input } from '@angular/core'; +import { completeIconSet } from './marquinhos-icons'; + +@Directive({ + selector: 'svg-icon', + standalone: true, +}) +export class SvgIconDirective { + @Input() set appSvgIcon(iconName: string) { + if (completeIconSet.find((iconSet) => iconSet.name === iconName)) { + this._elementRef.nativeElement.innerHTML = + completeIconSet.find((iconSet) => iconSet.name === iconName)?.data || + ''; + } + } + + private readonly _elementRef = inject(ElementRef); +} From b7f98600527cea2d8bcc7c4e9f5495750bda667b Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:23:27 -0300 Subject: [PATCH 12/19] feat: enhancements on sidebar --- .../components/sidebar/sidebar.component.html | 46 ++++++++------- .../components/sidebar/sidebar.component.scss | 57 +++++++++++++------ .../components/sidebar/sidebar.component.ts | 33 +++++++---- 3 files changed, 87 insertions(+), 49 deletions(-) diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html index 78fd265..ac01f42 100644 --- a/src/app/components/sidebar/sidebar.component.html +++ b/src/app/components/sidebar/sidebar.component.html @@ -1,20 +1,28 @@ - - -
-
    -
  • - Account icon - {{ item.label }} -
    • -
+
+ + +
+
    +
  • + + {{ item.label }} +
    • +
+
+ +
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss index 35ce1f4..ba9c6f3 100644 --- a/src/app/components/sidebar/sidebar.component.scss +++ b/src/app/components/sidebar/sidebar.component.scss @@ -1,10 +1,10 @@ -:host(.app-sidebar) { +.app-sidebar { --animation-duration: 0.3s; - position: absolute; + position: sticky; top: 0; left: 0; height: 100dvh; - color: var(--secondary-color); + color: var(--accent-color); background-color: var(--secondary-background-color); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12); z-index: 10; @@ -17,8 +17,11 @@ flex-direction: column; align-items: flex-start; gap: 32px; - transition: min-width var(--animation-duration) ease-in-out, + z-index: 10; + transition: + min-width var(--animation-duration) ease-in-out, max-width var(--animation-duration) ease-in-out, + left var(--animation-duration) ease-in-out, padding var(--animation-duration) ease-in-out; .sidebar-logo { @@ -27,17 +30,11 @@ justify-content: flex-start; gap: 8px; width: 100%; - height: 40px; + height: 44px; overflow: hidden; transition: width var(--animation-duration) ease-in-out; font-size: 20px; font-weight: 600; - - img { - object-fit: contain; - width: 40px; - height: 40px; - } } .sidebar-menu { @@ -64,12 +61,14 @@ padding: 12px 20px; border-radius: 12px; transition-timing-function: ease-in-out; - transition: width var(--animation-duration), + transition: + width var(--animation-duration), padding var(--animation-duration); img { object-fit: none; object-position: center; + fill: white; } span { @@ -81,11 +80,12 @@ &:hover:not(.selected) { cursor: pointer; - background-color: rgba(228, 228, 252, 0.3); + background-color: var(--primary-color); } &.selected { - background-color: var(--primary-color); + color: var(--primary-color); + background-color: var(--secondary-color); } } @@ -96,7 +96,6 @@ } &.app-sidebar-collapsed { - align-items: flex-start; max-width: 80px; min-width: 80px; padding: 36px 16px; @@ -130,7 +129,11 @@ padding: 8px; top: 36px; right: 14px; - transition: transform var(--animation-duration) ease-in-out; + border-radius: 50%; + transition: + transform var(--animation-duration) ease-in-out, + top var(--animation-duration) ease-in-out, + right var(--animation-duration) ease-in-out; :hover { cursor: pointer; @@ -144,15 +147,33 @@ @media screen and (max-width: 768px) { position: fixed; + padding: 16px; + gap: 16px; + + .sidebar-control { + top: 16px; + } + &.app-sidebar-collapsed { left: -80px; .sidebar-control { - border-radius: 50%; - right: -56px; background-color: var(--secondary-background-color); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12); + right: -56px; } } } } + +@media screen and (max-width: 768px) { + .backdrop { + position: fixed; + top: 0; + left: 0; + width: 100dvw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 5; + } +} diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts index 40bfb8a..997ad68 100644 --- a/src/app/components/sidebar/sidebar.component.ts +++ b/src/app/components/sidebar/sidebar.component.ts @@ -1,4 +1,4 @@ -import { DOCUMENT, NgFor } from '@angular/common'; +import { DOCUMENT, NgFor, NgIf } from '@angular/common'; import { Component, EventEmitter, @@ -8,30 +8,26 @@ import { Input, } from '@angular/core'; import { BreakpointObserver } from '@angular/cdk/layout'; +import { SidebarItem } from '../../core/types/sidebar-item.type'; +import { SvgIconDirective } from '../svg-icon/svg-icon.directive'; @Component({ selector: 'app-sidebar', - imports: [NgFor], + imports: [NgFor, NgIf, SvgIconDirective], templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'], standalone: true, host: { class: 'app-sidebar', - '[class.app-sidebar-collapsed]': 'collapsed', }, }) export class SidebarComponent implements OnInit { @Output() collapseChange = new EventEmitter(); - @Output() itemChange = new EventEmitter(); + @Output() itemChange = new EventEmitter(); @Input() collapsed = true; @Input() selected = ''; - @Input() options = [ - { id: 'profile', icon: 'account', label: 'Perfil' }, - { id: 'lastfm', icon: 'music-note', label: 'Lastfm' }, - { id: 'settings', icon: 'settings', label: 'Ajustes' }, - { id: 'logout', icon: 'logout', label: 'Sair' }, - ]; + @Input() options: SidebarItem[] = []; @Input() mobile = false; private readonly _breakpointObserver = inject(BreakpointObserver); @@ -54,7 +50,20 @@ export class SidebarComponent implements OnInit { } onItemClick(item: any) { - this.selected = item.id; - this.itemChange.emit(item.id); + this.collapsed = true; + this.itemChange.emit(item); + this.collapseChange.emit(this.collapsed); + } + + onHomeClick() { + this.itemChange.emit({ id: 'home', icon: 'home', label: 'Início' }); + this.collapsed = true; + this.collapseChange.emit(this.collapsed); + } + + onBackdropClick() { + if (this.mobile) { + this.toggleSidebar(); + } } } From e866dfc86129119a52502caba14a1a107ff2cdab Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:24:08 -0300 Subject: [PATCH 13/19] feat: lastfm status card with old information --- .../lastfm-status-card.component.html | 52 +++++++++++++++++++ .../lastfm-status-card.component.scss | 7 +++ .../lastfm-status-card.component.ts | 42 +++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 src/app/components/lastfm-status-card/lastfm-status-card.component.html create mode 100644 src/app/components/lastfm-status-card/lastfm-status-card.component.scss create mode 100644 src/app/components/lastfm-status-card/lastfm-status-card.component.ts diff --git a/src/app/components/lastfm-status-card/lastfm-status-card.component.html b/src/app/components/lastfm-status-card/lastfm-status-card.component.html new file mode 100644 index 0000000..afd5566 --- /dev/null +++ b/src/app/components/lastfm-status-card/lastfm-status-card.component.html @@ -0,0 +1,52 @@ + + + error + verified + hourglass_empty +

{{ registerStatusMessage ?? 'Verificando o registro' }}

+ + + + + Scrobbles on! + diff --git a/src/app/components/lastfm-status-card/lastfm-status-card.component.scss b/src/app/components/lastfm-status-card/lastfm-status-card.component.scss new file mode 100644 index 0000000..2e901c4 --- /dev/null +++ b/src/app/components/lastfm-status-card/lastfm-status-card.component.scss @@ -0,0 +1,7 @@ +:host { + display: flex; + + @media screen and (max-width: 768px) { + width: 100%; + } +} diff --git a/src/app/components/lastfm-status-card/lastfm-status-card.component.ts b/src/app/components/lastfm-status-card/lastfm-status-card.component.ts new file mode 100644 index 0000000..3386a98 --- /dev/null +++ b/src/app/components/lastfm-status-card/lastfm-status-card.component.ts @@ -0,0 +1,42 @@ +import { CommonModule } from '@angular/common'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + Output, +} from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { Observable } from 'rxjs'; +import { User } from '../../core/types/user.interface'; +import { BaseCardComponent } from '../base-card/base-card.component'; + +@Component({ + selector: 'app-lastfm-status-card', + standalone: true, + imports: [ + CommonModule, + MatButtonModule, + MatChipsModule, + MatIconModule, + MatSlideToggleModule, + BaseCardComponent, + ], + templateUrl: './lastfm-status-card.component.html', + styleUrls: ['./lastfm-status-card.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class LastfmStatusCardComponent { + @Output() registerClick = new EventEmitter(); + @Output() storyClick = new EventEmitter(); + @Output() scrobbleChange = new EventEmitter(); + + @Input() registerStatusMessage: string | null = null; + @Input() registered = false; + @Input() scrobblesOn = false; + @Input() scrobbleToggleDisabled = false; + @Input() user?: Observable = undefined; +} From bac4acc767b4f4e8f4c05e2006a8b80914f7eb9c Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:24:49 -0300 Subject: [PATCH 14/19] feat: add lastfm route and page titles --- src/app/app-routing.module.ts | 14 ++++++++++++++ src/app/app.module.ts | 4 ++++ 2 files changed, 18 insertions(+) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 00eed74..4701d0c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,41 +8,55 @@ import { LoginLastFmComponent } from './pages/redirect-lastfm/redirect-lastfm.co import { SettingsComponent } from './pages/settings/settings.component'; import { StoryGenComponent } from './pages/story-gen/story-gen.component'; import { loginResolver } from './core/auth/login.resolve'; +import { LastfmComponent } from './pages/lastfm/lastfm.component'; const routes: Routes = [ { path: 'home', component: HomeComponent, + title: 'Marquinhos - Início', }, { path: 'login', component: LoginComponent, resolve: { loggedIn: loginResolver }, + title: 'Marquinhos - Login', }, { path: 'profile', component: ProfileComponent, canActivate: [authGuard], + title: 'Marquinhos - Perfil', }, { path: 'story-gen', component: StoryGenComponent, canActivate: [authGuard], + title: 'Marquinhos - Last.fm Story Generator', }, { path: 'redirect-lastfm', component: LoginLastFmComponent, canActivate: [authGuard], + title: 'Marquinhos - Redirecionando do Last.fm', }, { path: 'settings', component: SettingsComponent, canActivate: [authGuard], + title: 'Marquinhos - Ajustes', + }, + { + path: 'lastfm', + component: LastfmComponent, + canActivate: [authGuard], + title: 'Marquinhos - Last.fm', }, { path: '', redirectTo: '/home', pathMatch: 'full', + title: 'Marquinhos - Início', }, { path: '**', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2fb65c3..642c68e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,8 @@ import { ProfileOptionsComponent } from './components/profile-options/profile-op import { AppRoutingModule } from './app-routing.module'; import { UserService } from './core/services/user.service'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; +import { SidebarComponent } from './components/sidebar/sidebar.component'; +import { SvgIconDirective } from './components/svg-icon/svg-icon.directive'; @NgModule({ declarations: [AppComponent], @@ -29,6 +31,8 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog'; ProfileOptionsComponent, BrowserAnimationsModule, MatDialogModule, + SidebarComponent, + SvgIconDirective, ], providers: [ provideHttpClient(withInterceptors([headersInterceptor])), From 65ee9c638208235aaa798f1b5ed5bb6fbef7c726 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Sun, 28 Jul 2024 21:25:28 -0300 Subject: [PATCH 15/19] feat: use new sidebar and organize layout structure --- src/app/app.component.html | 36 +++++++++------- src/app/app.component.scss | 83 ++++++++++++++++++++++++++----------- src/app/app.component.ts | 85 +++++++++++++++++++++++++++++++------- 3 files changed, 150 insertions(+), 54 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 83d23dd..0ffaf23 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,15 +1,23 @@ -
-
- + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e29eb0e..2e60cd9 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -2,42 +2,75 @@ height: 100dvh; width: 100dvw; display: flex; - flex-direction: column; - background-color: var(--primary-color); - color: var(--text-color); - overflow-y: overlay; + flex-direction: row; + background-color: var(--primary-background-color); + color: var(--accent-color); + overflow: hidden; header { + width: 100%; + height: 96px; display: flex; - align-items: center; + flex-direction: row; justify-content: space-between; - color: #7289da; - padding: 1rem; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); + align-items: center; + padding: 0 32px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + h1 { + font-size: 2rem; + font-weight: 500; + } + } - .logo { + main { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + + .content { display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - - &-image { - width: 3rem; - height: 3rem; - border-radius: 50%; + flex-direction: row; + justify-content: center; + padding: 32px; + overflow: hidden; + height: 100%; + width: 100%; + } + } + + @media screen and (max-width: 768px) { + header { + height: 80px; + padding: 0 64px; + + h1 { + font-size: 1.5rem; } - &-text { - font-weight: 600; - font-size: 1.2rem; + } + + main { + .content { + padding: 16px; } } } -} -@media (max-width: 768px) { - :host { - header { - padding: 1rem 0.5rem; + header.login { + padding: 0 16px; + } + + button.login-button { + position: absolute; + right: 64px; + top: 32px; + padding: 12px 24px; + border-radius: 16px; + font-size: 16px; + + &:hover { + box-shadow: 0 0 0 1px var(--secondary-color); } } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7517f1b..589e675 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,12 @@ import { Component, OnInit, inject } from '@angular/core'; -import { AsyncPipe, NgIf } from '@angular/common'; import { Router, RouterOutlet } from '@angular/router'; -import { HttpClientModule } from '@angular/common/http'; -import { ProfileOptionsComponent } from './components/profile-options/profile-options.component'; import { AuthService } from './core/auth/auth.service'; import { UserService } from './core/services/user.service'; import { Observable } from 'rxjs'; import { User } from './core/types/user.interface'; +import { AuthStateService } from './core/auth/auth-state.service'; +import { SidebarItem } from './core/types/sidebar-item.type'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-root', @@ -15,32 +15,87 @@ import { User } from './core/types/user.interface'; }) export class AppComponent implements OnInit { user?: Observable = undefined; + showSidebar = false; + showHeader = true; + sidebarSelectedItem = ''; + darkTheme = false; + sidebarCollapsed = true; + sidebarOptions = [ + { id: 'profile', icon: 'account', label: 'Perfil' }, + { id: 'lastfm', icon: 'music_note', label: 'Lastfm' }, + { id: 'settings', icon: 'settings', label: 'Ajustes' }, + { + id: 'theme', + icon: this.darkTheme ? 'light_mode' : 'dark_mode', + label: this.darkTheme ? 'Claro' : 'Escuro', + }, + { id: 'logout', icon: 'logout', label: 'Sair' }, + ]; + title = ''; + isLoginPage = false; public userService = inject(UserService); public router = inject(Router); private authService = inject(AuthService); + private readonly _authStateService = inject(AuthStateService); + private readonly _document = inject(DOCUMENT); ngOnInit(): void { this.user = this.userService.userObservable; - } + this._authStateService.appAuthState$?.subscribe((state) => { + this.showSidebar = !!state; + }); - logout(): void { - this.authService.logout(); - this.router.navigate(['/login']); + this.router.events.subscribe(() => { + this.sidebarSelectedItem = this.router.url.split('/')[1]; + this.showHeader = true; + if ( + this.sidebarSelectedItem === 'home' || + this.sidebarSelectedItem === '' + ) { + this.showHeader = false; + } + this.isLoginPage = this.sidebarSelectedItem === 'login'; + this.title = + this.sidebarSelectedItem === 'login' + ? 'Login' + : this.sidebarOptions.find( + (option) => option.id === this.sidebarSelectedItem, + )?.label || ''; + }); } - openSettings(): void { - this.router.navigate(['/settings']); - } + sidebarClick({ id, label }: SidebarItem): void { + if (id === 'theme') { + this.sidebarCollapsed = true; + this.darkTheme = !this.darkTheme; + this.sidebarOptions = this.sidebarOptions.map((option) => { + if (option.id === 'theme') { + return { + id: 'theme', + icon: this.darkTheme ? 'light_mode' : 'dark_mode', + label: this.darkTheme ? 'Claro' : 'Escuro', + }; + } + return option; + }); + this._document.body.classList.toggle('dark-theme'); + return; + } - openProfile(): void { - this.router.navigate(['/profile']); + this.title = label === 'Sair' ? 'Login' : label; + this.router.navigate([`/${id}`]); + + if (id === 'logout') { + this.logout(); + } } - goToHome(): void { - this.router.navigate(['/home']); + logout(): void { + this.authService.logout(); + this.router.navigate(['/login']); } - goToLogin(): void { + login(): void { this.router.navigate(['/login']); } } From def7caff434095704e04b148b84852ea24020bee Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Mon, 29 Jul 2024 03:11:00 -0300 Subject: [PATCH 16/19] feat: add profile card component --- .../profile-card/profile-card.component.html | 19 +++++++ .../profile-card/profile-card.component.scss | 56 +++++++++++++++++++ .../profile-card.component.spec.ts | 28 ++++++++++ .../profile-card/profile-card.component.ts | 36 ++++++++++++ 4 files changed, 139 insertions(+) create mode 100644 src/app/components/profile-card/profile-card.component.html create mode 100644 src/app/components/profile-card/profile-card.component.scss create mode 100644 src/app/components/profile-card/profile-card.component.spec.ts create mode 100644 src/app/components/profile-card/profile-card.component.ts diff --git a/src/app/components/profile-card/profile-card.component.html b/src/app/components/profile-card/profile-card.component.html new file mode 100644 index 0000000..f13ad73 --- /dev/null +++ b/src/app/components/profile-card/profile-card.component.html @@ -0,0 +1,19 @@ + +
+ Profile avatar +

+ {{ (user | async)?.global_name || (user | async)?.username || '' }} +

+
{{ (user | async)?.highestRole || '' }}
+
+
    +
  • + Username +

    {{ (user | async)?.username || '' }}

    +
    • +
  • + ID +

    {{ (user | async)?.id || '' }}

    +
    • +
+ diff --git a/src/app/components/profile-card/profile-card.component.scss b/src/app/components/profile-card/profile-card.component.scss new file mode 100644 index 0000000..e9bb21b --- /dev/null +++ b/src/app/components/profile-card/profile-card.component.scss @@ -0,0 +1,56 @@ +:host { + display: flex; + width: 100%; + height: 100%; + + .profile-avatar { + display: flex; + flex-direction: column; + align-items: center; + + img { + width: 128px; + height: 128px; + border-radius: 50%; + object-fit: contain; + margin-bottom: 8px; + } + + h3 { + margin-top: 0.5rem; + font-size: 1.5rem; + font-weight: 500; + color: var(--primary-text-color); + } + + h5 { + margin-top: 0.5rem; + font-size: 1rem; + font-weight: 400; + color: var(--shade-color); + } + } + + ul.profile-data { + display: flex; + flex-direction: column; + gap: 8px; + + li { + display: flex; + flex-direction: column; + gap: 8px; + align-items: flex-start; + font-size: 1rem; + font-weight: 400; + color: var(--primary-text-color); + padding: 16px; + border-radius: 10px; + border: 1px solid var(--accent-color); + + span { + color: var(--shade-color); + } + } + } +} diff --git a/src/app/components/profile-card/profile-card.component.spec.ts b/src/app/components/profile-card/profile-card.component.spec.ts new file mode 100644 index 0000000..a3b6de2 --- /dev/null +++ b/src/app/components/profile-card/profile-card.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { ProfileCardComponent } from './profile-card.component'; + +describe('ProfileCardComponent', () => { + let component: ProfileCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProfileCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProfileCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/profile-card/profile-card.component.ts b/src/app/components/profile-card/profile-card.component.ts new file mode 100644 index 0000000..45047d4 --- /dev/null +++ b/src/app/components/profile-card/profile-card.component.ts @@ -0,0 +1,36 @@ +import { Component, inject, OnInit } from '@angular/core'; +import { BaseCardComponent } from '../base-card/base-card.component'; +import { UserService } from '../../core/services/user.service'; +import { AsyncPipe } from '@angular/common'; +import { User } from '../../core/types/user.interface'; + +@Component({ + selector: 'app-profile-card', + templateUrl: './profile-card.component.html', + styleUrls: ['./profile-card.component.scss'], + standalone: true, + imports: [BaseCardComponent, AsyncPipe], +}) +export class ProfileCardComponent implements OnInit { + avatarUrl = 'https://cdn.discordapp.com/embed/avatars/0.png'; + + private readonly _userService = inject(UserService); + + constructor() {} + + ngOnInit() { + this._userService.userObservable.subscribe((user: User | null) => { + if (!user) return; + + if (user.avatar && user.id) { + this.avatarUrl = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`; + } else if (user.id) { + this.avatarUrl = `https://cdn.discordapp.com/embed/avatars/${(BigInt(user.id) >> 22n) % 6n}.png`; + } + }); + } + + get user() { + return this._userService.userObservable; + } +} From 895e473513adcd9441db0d5133d70feb21955756 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Mon, 29 Jul 2024 03:11:25 -0300 Subject: [PATCH 17/19] feat: user profile and base card on profile page --- src/app/core/types/sidebar-item.type.ts | 5 + src/app/core/types/user.interface.ts | 1 + src/app/pages/profile/profile.component.html | 5 + src/app/pages/profile/profile.component.scss | 48 +++++++ src/app/pages/profile/profile.component.ts | 126 +------------------ 5 files changed, 64 insertions(+), 121 deletions(-) create mode 100644 src/app/core/types/sidebar-item.type.ts create mode 100644 src/app/pages/profile/profile.component.html create mode 100644 src/app/pages/profile/profile.component.scss diff --git a/src/app/core/types/sidebar-item.type.ts b/src/app/core/types/sidebar-item.type.ts new file mode 100644 index 0000000..0a163b6 --- /dev/null +++ b/src/app/core/types/sidebar-item.type.ts @@ -0,0 +1,5 @@ +export type SidebarItem = { + id: string; + icon: string; + label: string; +}; diff --git a/src/app/core/types/user.interface.ts b/src/app/core/types/user.interface.ts index 60cbb24..3cabcdb 100644 --- a/src/app/core/types/user.interface.ts +++ b/src/app/core/types/user.interface.ts @@ -13,4 +13,5 @@ export interface User { mfa_enabled: boolean; locale: string; premium_type: number; + highestRole: string; } diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html new file mode 100644 index 0000000..b0c9fa8 --- /dev/null +++ b/src/app/pages/profile/profile.component.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/pages/profile/profile.component.scss b/src/app/pages/profile/profile.component.scss new file mode 100644 index 0000000..099a89f --- /dev/null +++ b/src/app/pages/profile/profile.component.scss @@ -0,0 +1,48 @@ +:host { + display: grid; + grid-template-columns: 2fr repeat(3, 1.75fr); + grid-template-rows: repeat(5, 1fr); + grid-column-gap: 32px; + grid-row-gap: 32px; + width: 100%; + height: 100%; + + app-profile-card { + grid-area: 1 / 1 / 4 / 2; + } + .stats-1 { + grid-area: 1 / 2 / 2 / 3; + } + .stats-2 { + grid-area: 1 / 3 / 2 / 4; + } + .stats-4 { + grid-area: 1 / 4 / 2 / 5; + } + .activities { + grid-area: 2 / 2 / 5 / 5; + } + + @media screen and (max-width: 768px) { + grid-template-columns: 1fr; + grid-template-rows: repeat(7, 1fr); + grid-column-gap: 16px; + grid-row-gap: 16px; + + app-profile-card { + grid-area: 1 / 1 / 2 / 2; + } + .stats-1 { + grid-area: 2 / 1 / 3 / 2; + } + .stats-2 { + grid-area: 3 / 1 / 4 / 2; + } + .stats-4 { + grid-area: 4 / 1 / 5 / 2; + } + .activities { + grid-area: 5 / 1 / 8 / 2; + } + } +} diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts index b700bdc..efeca1c 100644 --- a/src/app/pages/profile/profile.component.ts +++ b/src/app/pages/profile/profile.component.ts @@ -9,131 +9,15 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { Observable } from 'rxjs'; import { Router } from '@angular/router'; import { LoginHelperService } from 'src/app/core/auth/login-helper.service'; +import { ProfileCardComponent } from '../../components/profile-card/profile-card.component'; +import { BaseCardComponent } from '../../components/base-card/base-card.component'; @Component({ standalone: true, - imports: [ - CommonModule, - MatButtonModule, - MatChipsModule, - MatIconModule, - MatSlideToggleModule, - ], + imports: [CommonModule, ProfileCardComponent, BaseCardComponent], providers: [], - template: ` -
-

Perfil

- - - - - - - - - -
Nome de usuário{{ (user | async)?.username }}
ID{{ (user | async)?.id }}
-
-
-

Integração com Lastfm

-
- - error - verified - hourglass_empty -

{{ registerStatusMessage ?? 'Verificando o registro' }}

- - - - - Scrobbles on! -
-
- `, - styles: [ - ` - :host { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - padding: 2rem 15rem; - gap: 2rem; - - table { - width: 100%; - border-collapse: collapse; - border: none; - font-size: 1.2rem; - - td { - padding: 1rem 0; - border: none; - } - - tr:not(:last-child) { - border-bottom: 1px solid #ffffff50; - } - } - - .lastfm-status { - display: flex; - flex-direction: column; - align-items: flex-start; - width: fit-content; - gap: 1rem; - } - } - - @media (max-width: 768px) { - :host { - padding: 4rem 0.5rem; - } - } - `, - ], + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.scss'], }) export class ProfileComponent implements OnInit { registerStatusMessage: string | null = null; From 4495a58e272e4f63a04abba23d686ef1f93aff21 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Mon, 29 Jul 2024 03:17:13 -0300 Subject: [PATCH 18/19] feat: add global css variables and dark theme --- src/index.html | 2 +- src/styles.scss | 68 +++++++++++++++---------------------------------- 2 files changed, 21 insertions(+), 49 deletions(-) diff --git a/src/index.html b/src/index.html index ec0d471..baa6c4b 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - MarquinhosBOT + Marquinhos diff --git a/src/styles.scss b/src/styles.scss index 0ee9273..6943aa6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -39,6 +39,7 @@ $marquinhos-web-theme: mat.define-light-theme( html, body { height: 100%; + width: 100%; } body { margin: 0; @@ -46,64 +47,35 @@ body { // Set the variables for the theme --primary-color: #d6d6fe; - --secondary-color: #1e1e3d; - --accent-color: #e4e4fc; + --secondary-color: #3b3b80; + --accent-color: #060633; --primary-background-color: #e3e3e6; --secondary-background-color: #fafaf9; - --text-color: #111139; + --shade-color: #7a7a81; background-color: var(--primary-background-color); - color: var(--text-color); -} - -.profile-menu-container { - margin-top: 1rem; + color: var(--accent-color); + + &.dark-theme { + --primary-color: #1f1f2e; + --secondary-color: #aeaed9; + --accent-color: #a9a9f5; + --primary-background-color: #1f1f2e; + --secondary-background-color: #171723; + --shade-color: #6e6e72; + } } * { box-sizing: border-box; } -[scrollState] { - overflow: scroll; - transition: box-shadow 125ms ease-in-out; - - $topShadow: inset 0px 6px 6px -5px #88888881; - $topShadowTransparent: inset 0px 6px 6px -5px transparent; - $bottomShadow: inset 0px -6px 6px -5px #88888881; - $bottomShadowTransparent: inset 0px -6px 6px -5px transparent; - - &.can-scroll-up { - box-shadow: $topShadow, $bottomShadowTransparent; - } - - &.can-scroll-down { - box-shadow: $topShadowTransparent, $bottomShadow; - } - - &.can-scroll-up.can-scroll-down { - box-shadow: $topShadow, $bottomShadow; - } -} - -.section { - background-color: var(--secondary-background-color); - padding: 3rem; - border-radius: 5px; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); -} - -.section-name { - font-size: 2rem; - margin-bottom: 1.5rem; -} - -@media (max-width: 768px) { - .section { - padding: 1rem; - } +svg-icon { + display: flex; + justify-content: center; + align-items: center; - .section-name { - font-size: 1.5rem; + > svg { + fill: currentColor; } } From 5af0de3a6271ab92de05876c79c3ea3a67114d07 Mon Sep 17 00:00:00 2001 From: Guilherme Afonso Date: Mon, 29 Jul 2024 03:20:42 -0300 Subject: [PATCH 19/19] build: update npm build script --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4d94bfb..33b8a6d 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,9 @@ "name": "marquinhos-web", "version": "0.0.0", "scripts": { - "ng": "generate-icons && ng", + "ng": "ng", "start": "ng serve", - "build": "ng build", + "build": "generate-icons && ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "generate-icons": "svg-to-ts-constants"