ngx-opalbytes-components 1.20.0 → 1.21.0

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/stepper/stepper.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { StepperComponent } from './stepper';
+
+const meta: Meta<StepperComponent> = {
+  title: 'Componentes/Stepper',
+  component: StepperComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
+    maxReachedEvent: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<StepperComponent>;
+
+const renderStepper = (steps: string) => ({
+  template: `
+    <cao-stepper title="Etapas do cadastro" (maxReachedEvent)="maxReachedEvent()">
+      ${steps}
+    </cao-stepper>
+  `,
+  props: { maxReachedEvent: fn() },
+});
+
+export const Padrao: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Dados pessoais" />
+      <cao-step title="Endereço" />
+      <cao-step title="Confirmação" />
+    `),
+};
+
+export const ComTitulo: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Etapa 1" />
+      <cao-step title="Etapa 2" />
+      <cao-step title="Etapa 3" />
+    `),
+};
+
+export const MultiplastEtapas: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Cadastro" />
+      <cao-step title="Documentos" />
+      <cao-step title="Bancário" />
+      <cao-step title="Revisão" />
+      <cao-step title="Conclusão" />
+    `),
+};
+
+export const SomenteStep: Story = {
+  render: () => ({
+    template: `
+      <div style="display:flex;gap:16px">
+        <cao-step title="Ativa" isActive="true" />
+        <cao-step title="Inativa" />
+      </div>
+    `,
+  }),
+};
+
+export const StepComStepComponent: Story = {
+  render: () =>
+    renderStepper(`
+      <cao-step title="Primeira" />
+      <cao-step title="Segunda" />
+      <cao-step title="Terceira" isActive="true" />
+    `),
+};

package/src/lib/shared/components/tab-group/tab-group.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoTabGroup } from './tab-group';
+import { CaoTabPanel } from '../tab-panel/tab-panel';
+
+const renderTabs = (panels: string) => ({
+  template: `<cao-tab-group>${panels}</cao-tab-group>`,
+  moduleMetadata: { imports: [CaoTabGroup, CaoTabPanel] },
+});
+
+const defaultPanels = `
+  <cao-tab-panel label="Aba 1"><p>Conteúdo da primeira aba.</p></cao-tab-panel>
+  <cao-tab-panel label="Aba 2"><p>Conteúdo da segunda aba.</p></cao-tab-panel>
+  <cao-tab-panel label="Aba 3"><p>Conteúdo da terceira aba.</p></cao-tab-panel>
+`;
+
+const panelsWithIcons = `
+  <cao-tab-panel label="Início" leadingIcon="Home"><p>Conteúdo de início.</p></cao-tab-panel>
+  <cao-tab-panel label="Buscar" leadingIcon="Search"><p>Conteúdo de busca.</p></cao-tab-panel>
+  <cao-tab-panel label="Configurações" leadingIcon="Settings"><p>Conteúdo de configurações.</p></cao-tab-panel>
+`;
+
+const meta: Meta<CaoTabGroup> = {
+  title: 'Componentes/Tab Group',
+  component: CaoTabGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    selectedIndex: { control: { type: 'number', min: 0 } },
+    labelHeight: { control: 'text' },
+    labelPaddingX: { control: 'text' },
+    labelGap: { control: 'text' },
+    colorText: { control: 'color' },
+    colorActive: { control: 'color' },
+    colorHoverBg: { control: 'color' },
+    colorDisabled: { control: 'color' },
+    colorInkBar: { control: 'color' },
+    colorHeaderBorder: { control: 'color' },
+    inkBarHeight: { control: 'text' },
+    contentPaddingTop: { control: 'text' },
+    labelRadius: { control: 'text' },
+    animationDuration: { control: 'text' },
+    dynamicHeight: { control: 'boolean' },
+    labelAlign: { control: 'select', options: ['start', 'center', 'end'] },
+    iconColorActive: { control: 'color' },
+    iconColorInactive: { control: 'color' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+  },
+  args: {
+    selectedTabChange: fn(),
+    focusChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoTabGroup>;
+
+export const Padrao: Story = {
+  render: () => renderTabs(defaultPanels),
+};
+
+export const ComIcones: Story = {
+  render: () => renderTabs(panelsWithIcons),
+};
+
+export const ComAbaDesabilitada: Story = {
+  args: {
+    selectedIndex: 0,
+  },
+  render: () =>
+    renderTabs(`
+      <cao-tab-panel label="Aba 1"><p>Conteúdo da primeira aba.</p></cao-tab-panel>
+      <cao-tab-panel label="Bloqueada" isDisabled="true"><p>Não acessível.</p></cao-tab-panel>
+      <cao-tab-panel label="Aba 3"><p>Conteúdo da terceira aba.</p></cao-tab-panel>
+    `),
+};
+
+export const CoresPersonalizadas: Story = {
+  args: {
+    colorText: '#374151',
+    colorActive: '#dc2626',
+    colorHoverBg: '#fee2e2',
+    colorInkBar: '#dc2626',
+    colorHeaderBorder: '#f3f4f6',
+  },
+  render: () => renderTabs(defaultPanels),
+};
+
+export const LabelsCentralizados: Story = {
+  args: {
+    labelAlign: 'center',
+  },
+  render: () => renderTabs(defaultPanels),
+};
+
+export const TrailingIcons: Story = {
+  render: () =>
+    renderTabs(`
+      <cao-tab-panel label="Notificações" trailingIcon="Bell"><p>Conteúdo com sino.</p></cao-tab-panel>
+      <cao-tab-panel label="Perfil" trailingIcon="User"><p>Conteúdo de perfil.</p></cao-tab-panel>
+    `),
+};

package/src/lib/shared/components/tab-panel/tab-panel.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoTabPanel } from './tab-panel';
+
+const meta: Meta<CaoTabPanel> = {
+  title: 'Componentes/Tab Panel',
+  component: CaoTabPanel,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    leadingIcon: { control: 'text' },
+    trailingIcon: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+  },
+  args: {
+    label: 'Conteúdo da aba',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoTabPanel>;
+
+export const Padrao: Story = {
+  render: (args) => ({
+    template: `
+      <cao-tab-panel
+        [label]="label"
+        [isLucideIcon]="isLucideIcon"
+        [leadingIcon]="leadingIcon"
+        [trailingIcon]="trailingIcon"
+        [isDisabled]="isDisabled">
+        <p>Este é o conteúdo renderizado pela aba.</p>
+      </cao-tab-panel>
+    `,
+    props: args,
+  }),
+};
+
+export const ComLeadingIcon: Story = {
+  args: { label: 'Início', leadingIcon: 'Home', isLucideIcon: true },
+};
+
+export const ComTrailingIcon: Story = {
+  args: { label: 'Notificações', trailingIcon: 'Bell', isLucideIcon: true },
+};
+
+export const ComAmbosIcones: Story = {
+  args: { label: 'Configurações', leadingIcon: 'Settings', trailingIcon: 'ChevronRight', isLucideIcon: true },
+};
+
+export const Desabilitado: Story = {
+  args: { label: 'Bloqueada', isDisabled: true },
+};

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

@@ -0,0 +1,66 @@
+import { FormControl } from '@angular/forms';
+
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { TimePicker } from './time-picker';
+
+const meta: Meta<TimePicker> = {
+  title: 'Componentes/Time Picker',
+  component: TimePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    isDisabled: { control: 'boolean' },
+    dataCy: { control: 'text' },
+    min: { control: 'text' },
+    max: { control: 'text' },
+  },
+  args: {
+    timeChange: fn(),
+    min: '07:00',
+    max: '23:00',
+  },
+};
+
+export default meta;
+type Story = StoryObj<TimePicker>;
+
+export const Padrao: Story = {
+  args: {
+    min: '07:00',
+    max: '23:00',
+  },
+};
+
+export const ComMinimoEMaximo: Story = {
+  args: {
+    min: '09:00',
+    max: '18:00',
+  },
+};
+
+export const ComValor: Story = {
+  render: (args) => ({
+    template: `
+      <cao-time-picker
+        [control]="control"
+        [min]="min"
+        [max]="max"
+        [isDisabled]="isDisabled"
+        (timeChange)="timeChange($event)" />
+    `,
+    props: {
+      control: new FormControl<Date | null>(new Date(2026, 0, 1, 14, 30)),
+      min: args.min,
+      max: args.max,
+      isDisabled: args.isDisabled,
+      timeChange: fn(),
+    },
+  }),
+};
+
+export const Desabilitado: Story = {
+  args: {
+    isDisabled: true,
+  },
+};