teste

.github/workflows/deploy-gh-pages.yml

@@ -0,0 +1,36 @@
+name: Deploy Demo to GitHub Pages
+
+on:
+  push:
+    branches:
+      - demo/guided-tour-gh-pages
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ⚙️
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Dependencies 📦
+        run: npm install --legacy-peer-deps
+
+      - name: Build Library 🏗️
+        run: npm run build:ui
+
+      - name: Build Demo App 🚀
+        run: npx ng build app --base-href /po-angular/
+
+      - name: Deploy to GitHub Pages 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist/app
+          branch: gh-pages

projects/app/src/app/app.component.html

@@ -0,0 +1,34 @@
+<div class="po-wrapper">
+  <po-menu p-title="PO UI Guided Tour" [p-menus]="[{ label: 'Home', link: '/' }, { label: 'Showcase', link: '/showcase' }]"></po-menu>
+
+  <po-page-default p-title="Guided Tour Showcase">
+    <div class="po-row">
+      <po-info class="po-md-12" p-label="Demonstração" p-value="Este é um exemplo de uso do novo componente de tour guiado."></po-info>
+    </div>
+
+    <div class="po-row">
+      <po-widget class="po-md-6" id="welcome-card" p-title="Bem-vindo!">
+        <p>Este card é o primeiro passo do nosso tour. Ele serve para dar as boas-vindas aos usuários.</p>
+      </po-widget>
+
+      <po-widget class="po-md-6" p-title="Configurações">
+        <p>Clique no botão abaixo para iniciar a experiência guiada.</p>
+        <po-button id="action-btn" p-label="Iniciar Tour" (p-click)="startTour()" p-type="primary"></po-button>
+      </po-widget>
+    </div>
+
+    <div class="po-row">
+      <po-widget class="po-md-12" id="final-card" p-title="Resumo da Experiência">
+        <p>O tour guiado ajuda a aumentar o engajamento e diminuir a curva de aprendizado da sua aplicação.</p>
+      </po-widget>
+    </div>
+  </po-page-default>
+
+  <!-- Componente de Tour Guiado -->
+  <po-guided-tour
+    [p-steps]="tourSteps"
+    [p-allow-close]="true"
+    [p-allow-skip]="true"
+    (p-on-complete)="onTourComplete()"
+  ></po-guided-tour>
+</div>

projects/app/src/app/app.component.ts

@@ -1,8 +1,52 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { PoGuidedTourStep } from './../../ui/src/lib/components/po-guided-tour/po-guided-tour.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   standalone: false
 })
-export class AppComponent {}
+export class AppComponent {
+
+  @ViewChild(PoGuidedTourComponent) guidedTour: PoGuidedTourComponent;
+
+  readonly tourSteps: Array<PoGuidedTourStep> = [
+    {
+      id: 'step-welcome',
+      element: '#welcome-card',
+      title: 'Boas-vindas!',
+      description: 'Olá! Este é o novo componente de tour guiado do PO UI. Vamos conhecer algumas funcionalidades?',
+      position: 'bottom'
+    },
+    {
+      id: 'step-menu',
+      element: '.po-menu-item-link',
+      title: 'Navegação Fácil',
+      description: 'Aqui você pode navegar por todas as áreas da nossa aplicação de demonstração.',
+      position: 'right'
+    },
+    {
+      id: 'step-action',
+      element: '#action-btn',
+      title: 'Ações Contextuais',
+      description: 'Você pode disparar ações importantes diretamente daqui.',
+      position: 'left'
+    },
+    {
+      id: 'step-final',
+      element: '#final-card',
+      title: 'Pronto para começar?',
+      description: 'Agora que você conhece o básico, explore à vontade o nosso Design System!',
+      position: 'top'
+    }
+  ];
+
+  startTour() {
+    this.guidedTour.start();
+  }
+
+  onTourComplete() {
+    console.log('Tour finalizado com sucesso!');
+  }
+
+}

projects/app/src/app/app.module.ts

@@ -6,11 +6,19 @@ import { RouterModule } from '@angular/router';
 
 import { PoModule } from '@po-ui/ng-components';
 import { AppComponent } from './app.component';
-
+import { PoGuidedTourModule } from '@po-ui/ng-components';
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [  
+    AppComponent,
+  ],
   bootstrap: [AppComponent],
-  imports: [BrowserModule, FormsModule, RouterModule.forRoot([], {}), PoModule],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([], {}),
+    PoModule,
+    PoGuidedTourModule
+  ],
   providers: [provideHttpClient(withInterceptorsFromDi())]
 })
 export class AppModule {}

projects/ui/src/lib/components/components.module.ts

@@ -18,6 +18,7 @@ import { PoFieldModule } from './po-field/po-field.module';
 import { PoSwitchModule } from './po-field/po-switch/po-switch.module';
 import { PoGaugeModule } from './po-gauge/po-gauge.module';
 import { PoGridModule } from './po-grid/po-grid.module';
+import { PoGuidedTourModule } from './po-guided-tour/po-guided-tour.module';
 import { PoIconModule } from './po-icon/po-icon.module';
 import { PoImageModule } from './po-image/po-image.module';
 import { PoInfoModule } from './po-info/po-info.module';
@@ -68,6 +69,7 @@ const PO_MODULES = [
   PoFieldModule,
   PoGaugeModule,
   PoGridModule,
+    PoGuidedTourModule,
   PoIconModule,
   PoInfoModule,
   PoListViewModule,

projects/ui/src/lib/components/index.ts

@@ -17,6 +17,7 @@ export * from './po-dynamic/index';
 export * from './po-field/index';
 export * from './po-gauge/index';
 export * from './po-grid/index';
+export * from './po-guided-tour/index';
 export * from './po-helper/index';
 export * from './po-icon/index';
 export * from './po-image/index';

projects/ui/src/lib/components/po-guided-tour/index.ts

@@ -0,0 +1,2 @@
+export * from './po-guided-tour.module';
+export * from './po-guided-tour.component';

projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.html

@@ -0,0 +1,54 @@
+<div class="po-guided-tour-container" *ngIf="isActive">
+  <!-- Popover com controles -->
+  <div class="po-guided-tour-popover" [style.z-index]="zIndex + 1">
+    <div class="po-guided-tour-popover-header">
+      <h3 class="po-guided-tour-title">{{ getCurrentStep()?.title }}</h3>
+      <button 
+        *ngIf="allowClose" 
+        class="po-guided-tour-close-btn"
+        (click)="cancel()"
+        title="Close tour"
+        aria-label="Close guided tour">
+        ×
+      </button>
+    </div>
+
+    <div class="po-guided-tour-content">
+      <p>{{ getCurrentStep()?.description }}</p>
+    </div>
+
+    <div class="po-guided-tour-progress">
+      <div class="po-guided-tour-progress-bar" 
+        [style.width.%]="getProgress()"></div>
+    </div>
+
+    <div class="po-guided-tour-footer">
+      <small>{{ currentStep + 1 }} of {{ steps.length }}</small>
+
+      <div class="po-guided-tour-actions">
+        <button 
+          *ngIf="!isFirstStep()"
+          class="po-guided-tour-btn po-guided-tour-btn-secondary"
+          (click)="previous()"
+          aria-label="Previous step">
+          Previous
+        </button>
+
+        <button 
+          *ngIf="allowSkip"
+          class="po-guided-tour-btn po-guided-tour-btn-tertiary"
+          (click)="skipTour()"
+          aria-label="Skip tour">
+          Skip
+        </button>
+
+        <button 
+          class="po-guided-tour-btn po-guided-tour-btn-primary"
+          (click)="isLastStep() ? complete() : next()"
+          [attr.aria-label]="isLastStep() ? 'Complete tour' : 'Next step'">
+          {{ isLastStep() ? 'Complete' : 'Next' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

projects/ui/src/lib/components/po-guided-tour/po-guided-tour.component.scss

@@ -0,0 +1,19 @@
+.po-guided-tour-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 9999;
+}
+
+.po-guided-tour-spotlight {
+  position: absolute;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  transition: all 0.3s ease-in-out;
+  pointer-events: auto;
+}