ngx-opalbytes-components 1.20.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoAutocompleteComponent, ICaoAutoCompleteOption } from './autocomplete.component';
+
+const defaultOptions: ICaoAutoCompleteOption[] = [
+  { id: 1, nome: 'João Silva' },
+  { id: 2, nome: 'Maria Souza' },
+  { id: 3, nome: 'Pedro Santos' },
+  { id: 4, nome: 'Ana Oliveira' },
+];
+
+const optionsWithIcons: ICaoAutoCompleteOption[] = [
+  { id: 1, nome: 'João Silva', icon: 'User' },
+  { id: 2, nome: 'Maria Souza', icon: 'User' },
+  { id: 3, nome: 'Pedro Santos', icon: 'User' },
+  { id: 4, nome: 'Ana Oliveira', icon: 'User' },
+];
+
+const meta: Meta<CaoAutocompleteComponent> = {
+  title: 'Componentes/Autocomplete',
+  component: CaoAutocompleteComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    options: { control: 'object' },
+    dataCy: { control: 'text' },
+    controlName: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    optionIcon: { control: 'text' },
+    optionIConColor: { control: 'color' },
+    isLucideOptionIcon: { control: 'boolean' },
+    autocompleteBgColor: { control: 'color' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+    isDisabled: { control: 'boolean' },
+    inputHeigth: { control: 'text' },
+    iconSize: { control: { type: 'number', min: 8, max: 48 } },
+    showCheckIcon: { control: 'boolean' },
+    isLucideCheckIcon: { control: 'boolean' },
+  },
+  args: {
+    itemSelected: fn(),
+    blurEvent: fn(),
+    focusEvent: fn(),
+    leadingIconClick: fn(),
+    trailingIconClick: fn(),
+    label: 'Selecione um usuário',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoAutocompleteComponent>;
+
+export const Padrao: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+    _leadingIcon: 'Search',
+    isLucideIcon: true,
+    iconColor: '#6b7280',
+  },
+};
+
+export const ComLeadingETrailingIcons: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+    _leadingIcon: 'Search',
+    _trailingIcon: 'ChevronsUpDown',
+    isLucideIcon: true,
+  },
+};
+
+export const ComIconesNasOpcoes: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: optionsWithIcons,
+    optionIcon: 'User',
+    isLucideOptionIcon: true,
+    optionIConColor: '#f97316',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+    isDisabled: true,
+  },
+};
+
+export const AlturaPersonalizada: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+    inputHeigth: '70px',
+  },
+};
+
+export const IconeCheckOculto: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+    showCheckIcon: false,
+  },
+};
+
+export const FundoPersonalizado: Story = {
+  args: {
+    label: 'Usuários',
+    placeholder: 'Buscar usuário...',
+    options: defaultOptions,
+    autocompleteBgColor: '#f3f4f6',
+  },
+};

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoBaseButtonComponent } from './base-button.component';
+
+const meta: Meta<CaoBaseButtonComponent> = {
+  title: 'Componentes/Base Button',
+  component: CaoBaseButtonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    buttonText: { control: 'text' },
+    btnClass: { control: 'text' },
+    tooltip: { control: 'text' },
+    leadingIcon: { control: 'text' },
+    trailingIcon: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    isDarkMode: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+    minTextToTooltip: { control: { type: 'number', min: 1, max: 100 } },
+    iconSize: { control: { type: 'number', min: 8, max: 64 } },
+    dataCy: { control: 'text' },
+  },
+  args: {
+    buttonClick: fn(),
+    buttonText: 'Clique!',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseButtonComponent>;
+
+export const Padrao: Story = {
+  args: {
+    buttonText: 'Clique!',
+  },
+};
+
+export const Principal: Story = {
+  args: {
+    buttonText: 'Salvar',
+    btnClass: 'btn-primary',
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    buttonText: 'Salvar',
+    leadingIcon: 'Save',
+    isLucideIcon: true,
+  },
+};
+
+export const ComTrailingIcon: Story = {
+  args: {
+    buttonText: 'Próximo',
+    trailingIcon: 'ArrowRight',
+    isLucideIcon: true,
+  },
+};
+
+export const ComAmbosIcones: Story = {
+  args: {
+    buttonText: 'Enviar',
+    leadingIcon: 'Send',
+    trailingIcon: 'ArrowRight',
+    isLucideIcon: true,
+    iconColor: '#f97316',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    buttonText: 'Desabilitado',
+    isDisabled: true,
+  },
+};
+
+export const Carregando: Story = {
+  args: {
+    buttonText: 'Carregando...',
+    isLoading: true,
+  },
+};
+
+export const ModoEscuro: Story = {
+  args: {
+    buttonText: 'Tema Escuro',
+    isDarkMode: true,
+  },
+};
+
+export const DesabilitadoComIcone: Story = {
+  args: {
+    buttonText: 'Bloqueado',
+    leadingIcon: 'Lock',
+    isLucideIcon: true,
+    isDisabled: true,
+  },
+};

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoBaseIcon } from './base-icon';
+
+const meta: Meta<CaoBaseIcon> = {
+  title: 'Componentes/Base Icon',
+  component: CaoBaseIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    imgSource: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+    iconColor: { control: 'color' },
+    size: { control: { type: 'number', min: 8, max: 96 } },
+  },
+  args: {
+    imgSource: 'Home',
+    isLucideIcon: true,
+    size: 32,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseIcon>;
+
+export const IconeLucide: Story = {
+  args: {
+    imgSource: 'Home',
+    isLucideIcon: true,
+  },
+};
+
+export const IconeLucideComCor: Story = {
+  args: {
+    imgSource: 'Settings',
+    isLucideIcon: true,
+    iconColor: '#3b82f6',
+  },
+};
+
+export const TamanhoPersonalizado: Story = {
+  args: {
+    imgSource: 'Bell',
+    isLucideIcon: true,
+    size: 48,
+    strokeWidthIcon: 2,
+  },
+};
+
+export const IconeSVG: Story = {
+  args: {
+    imgSource: 'https://lucide.dev/icons/home.svg',
+    isLucideIcon: false,
+    size: 32,
+  },
+};

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