From 335e2c60cfd304b23533fde08ce5877aed824ca8 Mon Sep 17 00:00:00 2001 From: lucasferreiralimax Date: Tue, 22 Oct 2024 21:11:49 -0300 Subject: [PATCH] implementation nucleus-angular --- package-lock.json | 49 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/app.component.html | 18 ++++---------- src/app/app.component.scss | 15 ++++++------ src/app/app.component.ts | 36 +++++++++++++++++++++++++++- src/app/app.example.ts | 10 ++++++++ src/app/app.module.ts | 3 ++- src/styles.scss | 7 ------ 8 files changed, 109 insertions(+), 30 deletions(-) create mode 100644 src/app/app.example.ts diff --git a/package-lock.json b/package-lock.json index 118446b..cfd5904 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@angular/platform-browser": "^18.2.2", "@angular/platform-browser-dynamic": "^18.2.2", "@angular/router": "^18.2.2", + "nucleus-angular": "^0.0.6", "rxjs": "~7.8.1", "tslib": "^2.7.0", "zone.js": "~0.14.10" @@ -5093,6 +5094,18 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-techs-logos": { + "version": "0.1.29", + "resolved": "https://registry.npmjs.org/angular-techs-logos/-/angular-techs-logos-0.1.29.tgz", + "integrity": "sha512-blcIwlD3K4AC+B6ujH0LsZ0YsA4uD/ISF7oEWhmPDi9Tbrz+249v02dApE2XbtGTe4dLKLozn3pH6+LjYKJH8g==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^18.0.0", + "@angular/core": "^18.0.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -6584,6 +6597,18 @@ "dev": true, "license": "MIT" }, + "node_modules/darkmode-angular": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/darkmode-angular/-/darkmode-angular-0.1.4.tgz", + "integrity": "sha512-NWtUoB2Uj4GRE9+8C7buGRcJRmMaeB2ap2Fp0ufU+5GLtoA4QiNpiaqH94/k3YjqKfUSZqFndTX4vJd0G48OMQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^18.2.0", + "@angular/core": "^18.2.0" + } + }, "node_modules/data-uri-to-buffer": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz", @@ -8162,6 +8187,15 @@ "node": ">= 0.4" } }, + "node_modules/highlight.js": { + "version": "11.10.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz", + "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/hosted-git-info": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz", @@ -11163,6 +11197,21 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/nucleus-angular": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/nucleus-angular/-/nucleus-angular-0.0.6.tgz", + "integrity": "sha512-abV2FfMLiQnVnYNDBMpmqch9Dbl4i2JXrzQ2kY2g6Cb/nx/9RdMugXgcbCIWEkKwVfBlwRWGTvrmlzyMjKXkzg==", + "dependencies": { + "angular-techs-logos": "^0.1.29", + "darkmode-angular": "^0.1.4", + "highlight.js": "^11.10.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^18.2.0", + "@angular/core": "^18.2.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", diff --git a/package.json b/package.json index efada62..e2f00e1 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@angular/platform-browser": "^18.2.2", "@angular/platform-browser-dynamic": "^18.2.2", "@angular/router": "^18.2.2", + "nucleus-angular": "^0.0.6", "rxjs": "~7.8.1", "tslib": "^2.7.0", "zone.js": "~0.14.10" diff --git a/src/app/app.component.html b/src/app/app.component.html index b2a5adb..d553154 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,5 @@ -
- Angular Logo -
-
- -
- + +
+ +
+ diff --git a/src/app/app.component.scss b/src/app/app.component.scss index c764229..52ef24d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,9 +1,8 @@ -footer { - display: flex; - justify-content: center; - align-items: center; - a { - text-decoration: none; - color: var(--color-text); - } +::ng-deep .content .btn-mode { + position: relative !important; + z-index: 1; +} + +::ng-deep .btn-mode.hiddenLabel { + display: none; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 935528f..b608527 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import pkg from '../../package.json'; +import { ExampleComponent } from './app.example'; @Component({ selector: 'app-root', @@ -8,5 +9,38 @@ import pkg from '../../package.json'; styleUrls: ['./app.component.scss'] }) export class AppComponent { - appVersion = pkg.version; + public appVersion; + public angularVersion; + public configNucleus: { + name: string; + github: string; + npm: string; + appVersion: string; + angularVersion: string; + stepsInstall: Array<{ name: string; language: string; content: string }>; + }; + + constructor() { + this.appVersion = pkg.version; + this.angularVersion = pkg.dependencies?.['@angular/core'].replace('^', ''); + this.configNucleus = { + name: 'darkmode-angular', + github: 'https://github.com/livresaber/darkmode-angular', + npm: 'https://www.npmjs.com/package/darkmode-angular', + appVersion: this.appVersion, + angularVersion: this.angularVersion, + stepsInstall: [ + { + name: 'Install', + language: 'bash', + content: 'npm install darkmode-angular', + }, + { + name: 'Usage', + language: 'tsx', + content: ExampleComponent, + }, + ], + }; + } } diff --git a/src/app/app.example.ts b/src/app/app.example.ts new file mode 100644 index 0000000..593d355 --- /dev/null +++ b/src/app/app.example.ts @@ -0,0 +1,10 @@ +export const ExampleComponent = `// Example Component +import { Component } from '@angular/core'; +import { DarkmodeComponent } from 'darkmode-angular'; + +@Component({ + selector: 'app-example', + imports: [DarkmodeComponent], + template: \`\`, +}) +export class AppExample {}` diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3605ab9..f68226f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,10 +3,11 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DarkmodeComponent } from 'projects/darkmode-angular/src/public-api'; +import { NucleusAngularApp } from 'nucleus-angular'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, DarkmodeComponent], + imports: [BrowserModule, DarkmodeComponent, NucleusAngularApp], providers: [], bootstrap: [AppComponent], }) diff --git a/src/styles.scss b/src/styles.scss index e1799cc..3b40730 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,11 +1,4 @@ body { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - padding: 0; - margin: 0; - font-family: Arial; color: var(--color-text); background: var(--color-background); }