From d108cf1ee2d149f209468cff232663628b35935a Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 24 Jun 2026 09:31:37 -0300 Subject: [PATCH] feat: add routing for componentes-test and create reusable button component - Implemented lazy loading for the componentes-test feature module. - Created a redirect route to componentes-test as the default path. - Added a new ReutilizablesTestPageComponent to showcase reusable components. - Developed a reusable ButtonComponent with various styles and states. - Updated global styles to include Bootstrap. - Added SCSS styles for the new components and pages. --- src/app/app.html | 343 ------------------ src/app/app.routes.ts | 13 +- src/app/app.scss | 3 + src/app/app.spec.ts | 2 +- src/app/app.ts | 6 +- .../componentes-test.routes.ts | 14 + .../reutilizables-test-page.component.html | 19 + .../reutilizables-test-page.component.scss | 36 ++ .../reutilizables-test-page.component.ts | 10 + .../components/button/button.component.html | 7 + .../components/button/button.component.scss | 8 + .../components/button/button.component.ts | 34 ++ src/styles.scss | 2 +- 13 files changed, 147 insertions(+), 350 deletions(-) create mode 100644 src/app/features/componentes-test/componentes-test.routes.ts create mode 100644 src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html create mode 100644 src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss create mode 100644 src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts create mode 100644 src/app/shared/components/button/button.component.html create mode 100644 src/app/shared/components/button/button.component.scss create mode 100644 src/app/shared/components/button/button.component.ts diff --git a/src/app/app.html b/src/app/app.html index a1c4296..67e7bd4 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,344 +1 @@ - - - - - - - - - - - -
-
-
- -

Hello, {{ title() }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'Prompt and best practices for AI', link: 'https://angular.dev/ai/develop-with-ai'}, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..c1ff96f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,14 @@ import { Routes } from '@angular/router'; -export const routes: Routes = []; +export const routes: Routes = [ + { + path: 'componentes-test', + loadChildren: () => + import('./features/componentes-test/componentes-test.routes').then((m) => m.routes) + }, + { + path: '', + pathMatch: 'full', + redirectTo: 'componentes-test' + } +]; diff --git a/src/app/app.scss b/src/app/app.scss index e69de29..5d4e87f 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts index 1887a27..d26bfac 100644 --- a/src/app/app.spec.ts +++ b/src/app/app.spec.ts @@ -18,6 +18,6 @@ describe('App', () => { const fixture = TestBed.createComponent(App); await fixture.whenStable(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, shopit-front'); + expect(compiled.querySelector('router-outlet')).not.toBeNull(); }); }); diff --git a/src/app/app.ts b/src/app/app.ts index ba99bde..fb4c9d5 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,4 +1,4 @@ -import { Component, signal } from '@angular/core'; +import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ @@ -7,6 +7,4 @@ import { RouterOutlet } from '@angular/router'; templateUrl: './app.html', styleUrl: './app.scss' }) -export class App { - protected readonly title = signal('shopit-front'); -} +export class App {} diff --git a/src/app/features/componentes-test/componentes-test.routes.ts b/src/app/features/componentes-test/componentes-test.routes.ts new file mode 100644 index 0000000..4763b7b --- /dev/null +++ b/src/app/features/componentes-test/componentes-test.routes.ts @@ -0,0 +1,14 @@ +import { Routes } from '@angular/router'; +import { ReutilizablesTestPageComponent } from './pages/reutilizables-test-page/reutilizables-test-page.component'; + +export const routes: Routes = [ + { + path: 'reutilizables', + component: ReutilizablesTestPageComponent + }, + { + path: '', + pathMatch: 'full', + redirectTo: 'reutilizables' + } +]; diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html new file mode 100644 index 0000000..584fe66 --- /dev/null +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html @@ -0,0 +1,19 @@ +
+
+
+ Componentes reutilizables +

Button

+

+ Pagina dedicada a probar variantes del componente compartido. +

+ +
+ Primary + Secondary + Danger + Danger secondary + Cancel +
+
+
+
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss new file mode 100644 index 0000000..fd8aad0 --- /dev/null +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss @@ -0,0 +1,36 @@ +:host { + display: block; + min-height: 100dvh; +} + +.app-shell { + display: grid; + place-items: center; + min-height: 100dvh; + padding: 1.5rem; +} + +.button-demo { + width: min(100%, 48rem); + border: 0; +} + +.eyebrow { + display: inline-block; + margin-bottom: 0.75rem; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: #6c757d; +} + +h1 { + margin-bottom: 0.75rem; +} + +.button-grid { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts new file mode 100644 index 0000000..c9bf901 --- /dev/null +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +import { ButtonComponent } from '../../../../shared/components/button/button.component'; + +@Component({ + selector: 'app-reutilizables-test-page', + imports: [ButtonComponent], + templateUrl: './reutilizables-test-page.component.html', + styleUrl: './reutilizables-test-page.component.scss' +}) +export class ReutilizablesTestPageComponent {} diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html new file mode 100644 index 0000000..8ccde62 --- /dev/null +++ b/src/app/shared/components/button/button.component.html @@ -0,0 +1,7 @@ + diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss new file mode 100644 index 0000000..0913cf2 --- /dev/null +++ b/src/app/shared/components/button/button.component.scss @@ -0,0 +1,8 @@ +:host { + display: inline-block; +} + +.btn { + min-width: 8rem; + font-weight: 600; +} diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts new file mode 100644 index 0000000..6933e32 --- /dev/null +++ b/src/app/shared/components/button/button.component.ts @@ -0,0 +1,34 @@ +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; +import { NgClass } from '@angular/common'; + +export type ButtonVariant = + | 'primary' + | 'secondary' + | 'danger' + | 'danger-secondary' + | 'cancel'; + +@Component({ + selector: 'app-button', + imports: [NgClass], + templateUrl: './button.component.html', + styleUrl: './button.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ButtonComponent { + readonly variant = input('primary'); + readonly type = input<'button' | 'submit' | 'reset'>('button'); + readonly disabled = input(false); + + protected readonly buttonClasses = computed(() => { + const variants: Record = { + primary: 'btn-primary', + secondary: 'btn-outline-primary', + danger: 'btn-danger', + 'danger-secondary': 'btn-outline-danger', + cancel: 'btn-secondary' + }; + + return ['btn', variants[this.variant()]]; + }); +} diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..9807e99 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1 @@ -/* You can add global styles to this file, and also import other style files */ +@use "bootstrap/scss/bootstrap";