ngx-opalbytes-components 1.20.0 → 1.21.0

package/src/lib/shared/components/base-input/base-input.stories.ts

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoBaseInput } from './base-input';
+
+const meta: Meta<CaoBaseInput> = {
+  title: 'Componentes/Base Input',
+  component: CaoBaseInput,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'textarea', 'number', 'password', 'date'],
+    },
+    placeholder: { control: 'text' },
+    inputClass: { control: 'text' },
+    value: { control: 'text' },
+    errorMessage: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    maxLength: { control: { type: 'number', min: 1 } },
+    searchMode: { control: 'boolean' },
+    showBorder: { control: 'boolean' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    mask: { control: 'text' },
+    tooltip: { control: 'text' },
+    dataCy: { control: 'text' },
+    textareaRows: { control: 'text' },
+    decimalMarker: { control: 'select', options: ['.', ','] },
+    thousandSeparator: { control: 'text' },
+    allowNegativeNumbers: { control: 'boolean' },
+    separatorLimit: { control: 'text' },
+  },
+  args: {
+    valueChange: fn(),
+    searchClick: fn(),
+    inputChange: fn(),
+    placeholder: 'Digite algo...',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseInput>;
+
+export const Padrao: Story = {
+  args: {
+    placeholder: 'Digite seu nome',
+    type: 'text',
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    placeholder: 'Buscar usuário',
+    type: 'text',
+    leadingIcon: 'Search',
+    isLucideIcon: true,
+  },
+};
+
+export const ComTrailingIcon: Story = {
+  args: {
+    placeholder: 'Buscar usuário',
+    type: 'text',
+    trailingIcon: 'ChevronDown',
+    isLucideIcon: true,
+  },
+};
+
+export const ComAmbosIcones: Story = {
+  args: {
+    placeholder: 'Valor monetário',
+    type: 'text',
+    leadingIcon: 'DollarSign',
+    trailingIcon: 'X',
+    isLucideIcon: true,
+  },
+};
+
+export const PadraoComIconeSVG: Story = {
+  args: {
+    placeholder: 'Buscar',
+    type: 'text',
+    leadingIcon: 'https://lucide.dev/icons/search.svg',
+    isLucideIcon: false,
+  },
+};
+
+export const AreaDeTexto: Story = {
+  args: {
+    placeholder: 'Descreva o problema...',
+    type: 'textarea',
+    textareaRows: '4',
+  },
+};
+
+export const Senha: Story = {
+  args: {
+    placeholder: 'Digite sua senha',
+    type: 'password',
+    trailingIcon: 'Eye',
+    isLucideIcon: true,
+  },
+};
+
+export const ModoSearch: Story = {
+  args: {
+    placeholder: 'Pesquisar itens...',
+    type: 'text',
+    searchMode: true,
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    placeholder: 'Campo desabilitado',
+    type: 'text',
+    isDisabled: true,
+    value: 'Valor bloqueado',
+  },
+};
+
+export const ComErro: Story = {
+  args: {
+    placeholder: 'Digite seu e-mail',
+    type: 'text',
+    errorMessage: 'E-mail obrigatório',
+  },
+};
+
+export const ComMascara: Story = {
+  args: {
+    placeholder: '00.000.000/0000-00',
+    type: 'text',
+    mask: '00.000.000/0000-00',
+  },
+};

package/src/lib/shared/components/base-time-range/base-time-range.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { BaseTimeRange } from './base-time-range';
+
+const meta: Meta<BaseTimeRange> = {
+  title: 'Componentes/Base Time Range',
+  component: BaseTimeRange,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    dataCy: { control: 'text' },
+    controlName: { control: 'text' },
+  },
+  args: {
+    rangeSelected: fn(),
+    label: 'Período',
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseTimeRange>;
+
+export const Padrao: Story = {
+  args: {
+    label: 'Período de análise',
+  },
+};
+
+export const ComMinimoEMaximo: Story = {
+  args: {
+    label: 'Período de análise',
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};
+
+export const ComInicioEFinal: Story = {
+  args: {
+    label: 'Período de análise',
+    startDate: new Date(2026, 2, 1),
+    finalDate: new Date(2026, 2, 15),
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};
+
+export const ComDataCy: Story = {
+  args: {
+    label: 'Período de análise',
+    dataCy: 'time-range-analise',
+    controlName: 'periodo',
+  },
+};

package/src/lib/shared/components/base-toggle/base-toggle.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoBaseToggleComponent } from './base-toggle.component';
+
+const meta: Meta<CaoBaseToggleComponent> = {
+  title: 'Componentes/Base Toggle',
+  component: CaoBaseToggleComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    isChecked: { control: 'boolean' },
+    checkedTextPlaceholder: { control: 'text' },
+    uncheckedTextPlaceholder: { control: 'text' },
+    isDisabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
+    errorMessage: { control: 'text' },
+  },
+  args: {
+    statusChanged: fn(),
+    valueChange: fn(),
+    searchClick: fn(),
+    inputChange: fn(),
+    checkedTextPlaceholder: 'Ligado',
+    uncheckedTextPlaceholder: 'Desligado',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseToggleComponent>;
+
+export const Padrao: Story = {
+  args: {
+    isChecked: false,
+  },
+};
+
+export const Ativado: Story = {
+  args: {
+    isChecked: true,
+    checkedTextPlaceholder: 'Módulo',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    isChecked: true,
+    isDisabled: true,
+  },
+};
+
+export const DesabilitadoSemChecagem: Story = {
+  args: {
+    isChecked: false,
+    isDisabled: true,
+  },
+};
+
+export const ComPlaceholderPersonalizado: Story = {
+  args: {
+    isChecked: false,
+    uncheckedTextPlaceholder: 'Notificações push',
+  },
+};

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoCardComponent, ICaoCardBadge, ICaoCardMeta } from './card.component';
+
+const cardMeta: ICaoCardMeta[] = [
+  { icon: 'https://lucide.dev/icons/eye.svg', label: 'Visualizações' },
+  { icon: 'https://lucide.dev/icons/clock.svg', label: 'Última atualização' },
+];
+
+const cardBadge: ICaoCardBadge = {
+  label: 'Novo',
+  color: 'text-white',
+  borderColor: 'border-green-600',
+  bg: '#22c55e',
+};
+
+const meta: Meta<CaoCardComponent> = {
+  title: 'Componentes/Card',
+  component: CaoCardComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['horizontal', 'square'] },
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    detail: { control: 'text' },
+    detailColor: { control: 'text' },
+    icon: { control: 'text' },
+    bgColor: { control: 'text' },
+    borderColor: { control: 'text' },
+    selected: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    cardClick: { action: 'cardClicked' },
+  },
+  args: {
+    cardClick: fn(),
+    title: 'Projeto Renova',
+    subtitle: 'Monitoramento de qualidade',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoCardComponent>;
+
+export const Horizontal: Story = {
+  args: {
+    variant: 'horizontal',
+  },
+};
+
+export const HorizontalComIcone: Story = {
+  args: {
+    variant: 'horizontal',
+    icon: 'https://lucide.dev/icons/image.svg',
+  },
+};
+
+export const HorizontalComAvatar: Story = {
+  args: {
+    variant: 'horizontal',
+    avatar: { initials: 'OP', color: 'bg-indigo-500' },
+  },
+};
+
+export const HorizontalComDetalhe: Story = {
+  args: {
+    variant: 'horizontal',
+    detail: 'Detalhe adicional do card',
+    detailColor: 'text-amber-600',
+  },
+};
+
+export const ComBadge: Story = {
+  args: {
+    variant: 'horizontal',
+    badge: cardBadge,
+  },
+};
+
+export const ComMeta: Story = {
+  args: {
+    variant: 'horizontal',
+    meta: cardMeta,
+  },
+};
+
+export const Clicavel: Story = {
+  args: {
+    variant: 'horizontal',
+    clickable: true,
+  },
+};
+
+export const Selecionado: Story = {
+  args: {
+    variant: 'horizontal',
+    selected: true,
+  },
+};
+
+export const Quadrado: Story = {
+  args: {
+    variant: 'square',
+    title: 'KPIs',
+  },
+};
+
+export const QuadradoComIcone: Story = {
+  args: {
+    variant: 'square',
+    title: 'Análises',
+    icon: 'https://lucide.dev/icons/image.svg',
+  },
+};

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/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',
+      },
+    },
+  },
+};