ngx-opalbytes-components 1.20.0 → 1.22.0

package/src/lib/shared/components/date-picker/date-picker.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoDatePicker } from './date-picker';
+
+const meta: Meta<CaoDatePicker> = {
+  title: 'Componentes/Date Picker',
+  component: CaoDatePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    inputClass: { control: 'text' },
+    errorMessage: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    searchMode: { control: 'boolean' },
+    showBorder: { control: 'boolean' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    tooltip: { control: 'text' },
+    dataCy: { control: 'text' },
+    dateHint: { control: 'text' },
+    controlName: { control: 'text' },
+    openOnFocus: { control: 'boolean' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
+  },
+  args: {
+    valueChange: fn(),
+    searchClick: fn(),
+    inputChange: fn(),
+    leadingIconClick: fn(),
+    trailingIconClick: fn(),
+    placeholder: 'Data de nascimento',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoDatePicker>;
+
+export const Padrao: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    leadingIcon: 'Calendar',
+    isLucideIcon: true,
+    iconColor: '#3b82f6',
+  },
+};
+
+export const ComTrailingIcon: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    trailingIcon: 'X',
+    isLucideIcon: true,
+  },
+};
+
+export const ComDataMinimaEMaxima: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};
+
+export const ComDica: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    dateHint: 'DD/MM/AAAA',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    isDisabled: true,
+    value: new Date(2026, 0, 15),
+  },
+};
+
+export const ComErro: Story = {
+  args: {
+    placeholder: 'Selecione uma data',
+    errorMessage: 'Data obrigatória',
+  },
+};

package/src/lib/shared/components/drop-down/drop-down.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoDropDownComponent, ICaoDropDownOption } from './drop-down';
+
+const defaultOptions: ICaoDropDownOption[] = [
+  { id: 1, nome: 'Ativo' },
+  { id: 2, nome: 'Inativo' },
+  { id: 3, nome: 'Pendente' },
+  { id: 4, nome: 'Suspenso' },
+];
+
+const optionsWithIcons: ICaoDropDownOption[] = [
+  { id: 1, nome: 'Ativo', icon: 'check_circle' },
+  { id: 2, nome: 'Inativo', icon: 'cancel' },
+  { id: 3, nome: 'Pendente', icon: 'schedule' },
+  { id: 4, nome: 'Suspenso', icon: 'block' },
+];
+
+const meta: Meta<CaoDropDownComponent> = {
+  title: 'Componentes/Drop Down',
+  component: CaoDropDownComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    textHeader: { control: 'text' },
+    options: { control: 'object' },
+    dropDownClass: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    tooltip: { control: 'text' },
+    dropDirectionInput: { control: 'select', options: ['up', 'down'] },
+    dataCy: { control: 'text' },
+    ariaLabel: { control: 'text' },
+    ariaLabelledBy: { control: 'text' },
+    listAriaLabel: { control: 'text' },
+  },
+  args: {
+    itemSelected: fn(),
+    textHeader: 'SELECIONE UM ITEM',
+    options: defaultOptions,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoDropDownComponent>;
+
+export const Padrao: Story = {
+  args: {
+    textHeader: 'Selecione um status',
+    options: defaultOptions,
+  },
+};
+
+export const ComIcones: Story = {
+  args: {
+    textHeader: 'Selecione um status',
+    options: optionsWithIcons,
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    textHeader: 'Selecione um status',
+    options: defaultOptions,
+    isDisabled: true,
+  },
+};
+
+export const AberturaParaCima: Story = {
+  args: {
+    textHeader: 'Selecione um status',
+    options: defaultOptions,
+    dropDirectionInput: 'up',
+  },
+};
+
+export const ComTooltip: Story = {
+  args: {
+    textHeader: 'Selecione um status',
+    options: defaultOptions,
+    tooltip: 'Escolha um dos status disponíveis',
+  },
+};
+
+export const ClassePersonalizada: Story = {
+  args: {
+    textHeader: 'Selecione um status',
+    options: defaultOptions,
+    dropDownClass: 'dropdown-secundary',
+  },
+};

package/src/lib/shared/components/footer/footer.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { Footer } from './footer';
+
+const meta: Meta<Footer> = {
+  title: 'Componentes/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  argTypes: {
+    currentRoute: { control: 'text' },
+    footerText: { control: 'text' },
+    isFixed: { control: 'boolean' },
+  },
+  args: {
+    footerText: 'Opalbytes',
+  },
+};
+
+export default meta;
+type Story = StoryObj<Footer>;
+
+export const Padrao: Story = {
+  args: {
+    footerText: 'Opalbytes',
+  },
+};
+
+export const Fixo: Story = {
+  args: {
+    footerText: 'Opalbytes',
+    isFixed: true,
+  },
+};
+
+export const ComRota: Story = {
+  args: {
+    footerText: 'Opalbytes',
+    currentRoute: '/dashboard',
+  },
+};
+
+export const ComConteudo: Story = {
+  render: (args) => ({
+    template: `
+      <cao-footer [currentRoute]="currentRoute" [footerText]="footerText" [isFixed]="isFixed">
+        <div>Links úteis: <a href="#">Termos</a> | <a href="#">Privacidade</a></div>
+      </cao-footer>
+    `,
+    props: args,
+  }),
+};

package/src/lib/shared/components/index.ts

@@ -16,4 +16,9 @@ export * from "./tab-group/tab-group"
 export * from "./tab-panel/tab-panel"
 
 export * from "./base-icon/base-icon"
-export * from "./kpi/kpi"
+export * from "./kpi/kpi"
+export * from "./skeleton/skeleton"
+
+export * from "./card/card.component"
+export * from "./base-toggle/base-toggle.component"
+export * from "./footer/footer"

package/src/lib/shared/components/kpi/kpi.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoKpi, ICaoKPI } from './kpi';
+
+const defaultKpi: ICaoKPI = {
+  title: 'Faturamento',
+  value: 'R$ 128.450,00',
+  textColor: '#111827',
+  borderColor: '#e5e7eb',
+  icon: {
+    src: 'https://lucide.dev/icons/trending-up.svg',
+    alt: 'ícone de tendência',
+  },
+};
+
+const meta: Meta<CaoKpi> = {
+  title: 'Componentes/KPI',
+  component: CaoKpi,
+  tags: ['autodocs'],
+  argTypes: {
+    kpiData: { control: 'object' },
+  },
+  args: {
+    kpiData: defaultKpi,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoKpi>;
+
+export const Padrao: Story = {
+  args: {
+    kpiData: defaultKpi,
+  },
+};
+
+export const Sucesso: Story = {
+  args: {
+    kpiData: {
+      title: 'Meta de vendas',
+      value: '87%',
+      textColor: '#16a34a',
+      borderColor: '#16a34a',
+      icon: {
+        src: 'https://lucide.dev/icons/check-circle.svg',
+        alt: 'ícone de sucesso',
+      },
+    },
+  },
+};
+
+export const Alerta: Story = {
+  args: {
+    kpiData: {
+      title: 'Pedidos pendentes',
+      value: '32',
+      textColor: '#dc2626',
+      borderColor: '#dc2626',
+      icon: {
+        src: 'https://lucide.dev/icons/alert-triangle.svg',
+        alt: 'ícone de alerta',
+      },
+    },
+  },
+};

package/src/lib/shared/components/links-button/links-button.stories.ts

@@ -0,0 +1,75 @@
+import { signal } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular-vite';
+
+import { LinksButton, INavContent } from './links-button';
+
+const defaultNav: INavContent = {
+  title: 'Navegação',
+  links: [
+    { text: 'Dashboard', url: '/dashboard' },
+    { text: 'Relatórios', url: '/relatorios' },
+    { text: 'Configurações', url: '/configuracoes' },
+  ],
+};
+
+const meta: Meta<LinksButton> = {
+  title: 'Componentes/Links Button',
+  component: LinksButton,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      providers: [
+        { provide: Router, useValue: { navigate: () => Promise.resolve(true) } },
+        { provide: ActivatedRoute, useValue: {} },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<LinksButton>;
+
+export const Padrao: Story = {
+  args: {
+    navContent: signal(defaultNav),
+  },
+};
+
+export const ComLinkDesabilitado: Story = {
+  args: {
+    navContent: signal({
+      title: 'Navegação',
+      links: [
+        { text: 'Dashboard', url: '/dashboard' },
+        { text: 'Indisponível', url: '/x', disabled: true },
+        { text: 'Configurações', url: '/configuracoes' },
+      ],
+    }),
+  },
+};
+
+export const ComRotaDireta: Story = {
+  args: {
+    navContent: signal({
+      title: 'Navegação externa',
+      links: [
+        { text: 'Site oficial', url: 'https://example.com', directRoute: true },
+        { text: 'Dashboard', url: '/dashboard' },
+      ],
+    }),
+  },
+};
+
+export const ComDataCy: Story = {
+  args: {
+    navContent: signal({
+      title: 'Navegação instrumentada',
+      links: [
+        { text: 'Dashboard', url: '/dashboard', dataCy: 'link-dashboard' },
+        { text: 'Relatórios', url: '/relatorios', dataCy: 'link-relatorios' },
+      ],
+    }),
+  },
+};

package/src/lib/shared/components/paginator/paginator.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { Paginator } from './paginator';
+
+const meta: Meta<Paginator> = {
+  title: 'Componentes/Paginator',
+  component: Paginator,
+  tags: ['autodocs'],
+  argTypes: {
+    totalItems: { control: { type: 'number', min: 0 } },
+    pageSize: { control: { type: 'number', min: 1 } },
+    currentPage: { control: { type: 'number', min: 1 } },
+    pageSizeOptions: { control: 'object' },
+    customClass: { control: 'text' },
+    showFirstLastButtons: { control: 'boolean' },
+  },
+  args: {
+    pageEvent: fn(),
+    totalItems: 250,
+    pageSize: 10,
+  },
+};
+
+export default meta;
+type Story = StoryObj<Paginator>;
+
+export const Padrao: Story = {
+  args: {
+    totalItems: 250,
+    pageSize: 10,
+  },
+};
+
+export const OpcoesPersonalizadas: Story = {
+  args: {
+    totalItems: 1000,
+    pageSize: 25,
+    pageSizeOptions: [10, 25, 50, 100],
+  },
+};
+
+export const SemPrimeiroEUltimo: Story = {
+  args: {
+    totalItems: 250,
+    pageSize: 10,
+    showFirstLastButtons: false,
+  },
+};
+
+export const VariasPaginas: Story = {
+  args: {
+    totalItems: 3,
+    pageSize: 1,
+  },
+};

package/src/lib/shared/components/skeleton/skeleton.css

@@ -0,0 +1,92 @@
+/*
+ * CSS Custom Properties — all prefixed with --skeleton-*
+ * These cascade naturally, so a parent component can override any token:
+ *
+ *   .my-card {
+ *     --skeleton-bg: #d1d5db;
+ *     --skeleton-shine: #f3f4f6;
+ *     --skeleton-radius: 8px;
+ *     --skeleton-speed: 2s;
+ *   }
+ */
+
+:host {
+  /* ─── Layout defaults (overridable via [width]/[height] inputs) ─── */
+  --skeleton-width: 100%;
+  --skeleton-height: 100%;
+
+  /* ─── Visual tokens — inherit from parent if set there ─── */
+  --skeleton-bg: #e2e8f0;
+  --skeleton-shine: #f8fafc;
+  --skeleton-radius: 14px;
+  --skeleton-speed: 2s;
+  --skeleton-animation-deg: 90deg;
+
+  display: contents; /* host element is transparent to layout */
+}
+
+/* ─────────────────────────── Base block ─────────────────────────── */
+
+.cao-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: var(--skeleton-width);
+  height: var(--skeleton-height);
+  background-color: var(--skeleton-bg);
+  border-radius: var(--skeleton-radius);
+
+  /* Prevent content from leaking during SSR */
+  color: transparent;
+  user-select: none;
+  pointer-events: none;
+
+  /* Respect reduced-motion preference */
+  @media (prefers-reduced-motion: no-preference) {
+    will-change: transform; /* promote shimmer layer */
+  }
+}
+
+/* ─────────────────────────── Variants ───────────────────────────── */
+
+.cao-skeleton--circle {
+  --skeleton-radius: 50%;
+  /* For circles the consumer usually sets equal width/height;
+     but we guard with aspect-ratio so it stays circular even
+     when only width is specified. */
+  aspect-ratio: 1 / 1;
+}
+
+.cao-skeleton--text {
+  --skeleton-radius: 4px;
+  height: 1em; /* matches current font-size of parent context */
+  width: var(--skeleton-width);
+}
+
+/* ─────────────────────────── Shimmer ────────────────────────────── */
+
+.cao-skeleton__shimmer {
+  position: absolute;
+  inset: 0;
+
+  background: linear-gradient(
+    var(--skeleton-animation-deg),
+    transparent 30%,
+    var(--skeleton-shine) 50%,
+    transparent 70%
+  );
+  background-size: 200% 100%;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: skeleton-shimmer var(--skeleton-speed) ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}

package/src/lib/shared/components/skeleton/skeleton.html

@@ -0,0 +1,3 @@
+<span class="cao-skeleton" [ngClass]="'cao-skeleton--' + variant()" [style]="skeletonStyles()">
+  <span class="cao-skeleton__shimmer"></span>
+</span>

package/src/lib/shared/components/skeleton/skeleton.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CaoSkeletonComponent } from './skeleton';
+
+describe('CaoSkeletonComponent', () => {
+  let component: CaoSkeletonComponent;
+  let fixture: ComponentFixture<CaoSkeletonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoSkeletonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoSkeletonComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/shared/components/skeleton/skeleton.stories.ts

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoSkeletonComponent } from './skeleton';
+
+const meta: Meta<CaoSkeletonComponent> = {
+  title: 'Componentes/Skeleton',
+  component: CaoSkeletonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['rect', 'circle', 'text'],
+    },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    size: { control: 'text' },
+    bgColor: { control: 'color' },
+    shine: { control: 'color' },
+    borderRadius: { control: 'text' },
+    speed: { control: 'text' },
+    animationDeg: { control: 'text' },
+  },
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    bgColor: '#e2e8f0',
+    shine: '#f8fafc',
+    speed: '2s',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoSkeletonComponent>;
+
+export const Retangulo: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+  },
+};
+
+export const RetanguloComBordaArredondada: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '60px',
+    borderRadius: '8px',
+  },
+};
+
+export const Circulos: Story = {
+  args: {
+    bgColor: '#8100ff',
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <cao-skeleton [size]="'24px'" [variant]="'circle'"></cao-skeleton>
+        <cao-skeleton [size]="'48px'" [variant]="'circle'"></cao-skeleton>
+        <cao-skeleton [size]="'80px'" [variant]="'circle'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const RetangulosComTamanhosVariados: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; width: 320px;">
+        <cao-skeleton [width]="'100%'" [height]="'12px'"></cao-skeleton>
+        <cao-skeleton [width]="'80%'" [height]="'12px'"></cao-skeleton>
+        <cao-skeleton [width]="'60%'" [height]="'12px'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const LinhaDeTexto: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; width: 260px;">
+        <cao-skeleton [variant]="'text'" [width]="'100%'"></cao-skeleton>
+        <cao-skeleton [variant]="'text'" [width]="'90%'"></cao-skeleton>
+        <cao-skeleton [variant]="'text'" [width]="'70%'"></cao-skeleton>
+      </div>
+    `,
+  }),
+};
+
+export const CorCustomizada: Story = {
+  args: {
+    variant: 'rect',
+    width: '220px',
+    height: '48px',
+    bgColor: '#e0e7ff',
+    shine: '#ffffff',
+    borderRadius: '12px',
+  },
+};
+
+export const AnimacaoRapida: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    speed: '0.8s',
+  },
+};
+
+export const AnimacaoLenta: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    speed: '4s',
+  },
+};
+
+export const GradienteVertical: Story = {
+  args: {
+    variant: 'rect',
+    width: '200px',
+    height: '40px',
+    animationDeg: '0deg',
+  },
+};