ngx-opalbytes-components 1.20.0 → 1.21.0

package/cli/cao-comp.cjs

@@ -5,9 +5,11 @@ const fs = require('fs');
 const path = require('path');
 
 const USAGE = `cao-comp — Copia um componente da lib ngx-opalbytes-components para qualquer projeto
+e gera o setup de Storybook para visualizar os componentes
 
 Uso:
   cao-comp <componente> <destino> [opcoes]
+  cao-comp storybook <destino> [opcoes]
 
 Argumentos:
   <componente>   Nome da pasta do componente em shared/components (ex: base-button)
@@ -19,10 +21,214 @@ Opcoes:
   -f, --force     Sobrescreve arquivos existentes no destino
   -v, --version   Exibe a versao
 
+Subcomando storybook:
+  Gera o setup minimo do Storybook (.storybook/, exemplo de story e STORYBOOK-SETUP.md)
+  em <destino>, pronto para visualizar os componentes copiados.
+
 Exemplos:
   cao-comp base-button ./src/app/components
   cao-comp stepper ./src/app/components --force
   cao-comp --list
+  cao-comp storybook ./meu-projeto
+  cao-comp base-button ./meu-projeto/src/app/components && cao-comp storybook ./meu-projeto
+`;
+
+const STORYBOOK_FILES = {
+  '.storybook/main.ts': `import type { StorybookConfig } from '@storybook/angular-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": {
+    "name": "@storybook/angular-vite",
+    "options": {
+      "compodoc": false,
+      "compodocArgs": [
+        "-e",
+        "json",
+        "-d",
+        "."
+      ]
+    }
+  }
+};
+export default config;
+`,
+  '.storybook/preview.ts': `import type { Preview } from '@storybook/angular-vite';
+
+// Para habilitar as docs automaticas (argTypes) com Compodoc:
+// 1. Gere o documentation.json:  npx @compodoc/compodoc -p tsconfig.json -e json -d .
+// 2. Coloque "compodoc": true no framework options do .storybook/main.ts
+// 3. Descomente as linhas abaixo:
+// import { setCompodocJson } from '@storybook/addon-docs/angular';
+// import docJson from '../documentation.json';
+// setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
+`,
+  '.storybook/tsconfig.json': `{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["../src/**/*.stories.*", "./preview.ts", "./main.ts", "./typings.d.ts"]
+}
+`,
+  '.storybook/typings.d.ts': `declare module '*.md';
+`,
+};
+
+const EXAMPLE_STORY_LINES = [
+  `import { Component, EventEmitter, Input, Output } from '@angular/core';`,
+  `import type { Meta, StoryObj } from '@storybook/angular-vite';`,
+  `import { fn } from 'storybook/test';`,
+  ``,
+  `@Component({`,
+  `  standalone: true,`,
+  `  selector: 'storybook-example-button',`,
+  `  template: \``,
+  `    <button`,
+  `      type="button"`,
+  `      (click)="onClick.emit()"`,
+  `      [disabled]="isDisabled"`,
+  `      style="padding:10px 18px;font-size:14px;cursor:pointer;border-radius:6px;border:1px solid #4f46e5;background:#4f46e5;color:#fff;">`,
+  `      {{ label }}`,
+  `    </button>`,
+  `  \`,`,
+  `})`,
+  `export class StorybookExampleButtonComponent {`,
+  `  @Input() label = 'Clique!';`,
+  `  @Input() isDisabled = false;`,
+  `  @Output() readonly onClick = new EventEmitter<void>();`,
+  `}`,
+  ``,
+  `const meta: Meta<StorybookExampleButtonComponent> = {`,
+  `  title: 'Exemplo/Cao Button',`,
+  `  component: StorybookExampleButtonComponent,`,
+  `  tags: ['autodocs'],`,
+  `  args: { onClick: fn() },`,
+  `};`,
+  ``,
+  `export default meta;`,
+  `type Story = StoryObj<StorybookExampleButtonComponent>;`,
+  ``,
+  `export const Default: Story = {`,
+  `  args: { label: 'Clique!' },`,
+  `};`,
+  ``,
+  `export const ComIconeTexto: Story = {`,
+  `  args: { label: 'Salvar' },`,
+  `};`,
+  ``,
+  `export const Desabilitado: Story = {`,
+  `  args: { label: 'Bloqueado', isDisabled: true },`,
+  `};`,
+  ``,
+];
+
+const STORYBOOK_SETUP_DOC = `# Storybook — Setup gerado pelo cao-comp
+
+Este diretorio contem o setup minimo do Storybook para visualizar os
+componentes da lib ngx-opalbytes-components em um projeto externo.
+
+## 1. Instalar as dependencias (no destino)
+
+Adicione as dependencias de desenvolvimento:
+
+\`\`\`bash
+npm i -D storybook @storybook/angular-vite @storybook/addon-essentials @storybook/addon-a11y @storybook/addon-docs @storybook/addon-onboarding @compodoc/compodoc
+\`\`\`
+
+Certifique-se de que as peer dependencies dos componentes estao instaladas:
+\`@angular/core\`, \`@angular/common\`, \`@angular/material\`, \`@angular/cdk\`,
+\`@lucide/angular\` e \`ngx-mask\`.
+
+## 2. Copiar os componentes que deseja visualizar
+
+\`\`\`bash
+cao-comp base-button ./src/app/components
+cao-comp base-input ./src/app/components
+cao-comp --list   # lista todos os componentes disponiveis
+\`\`\`
+
+## 3. Criar stories para os componentes copiados
+
+Abra \`src/stories/CaoButton.stories.ts\` (exemplo gerado) ou crie arquivos
+\`*.stories.ts\` junto dos componentes. Exemplo:
+
+\`\`\`ts
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+import { CaoBaseButtonComponent } from '../../app/components/base-button/base-button.component';
+
+const meta: Meta<CaoBaseButtonComponent> = {
+  title: 'Components/Base Button',
+  component: CaoBaseButtonComponent,
+  tags: ['autodocs'],
+  args: { buttonClick: fn() },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseButtonComponent>;
+
+export const Default: Story = { args: { buttonText: 'Clique!' } };
+export const ComIcone: Story = { args: { buttonText: 'Salvar', leadingIcon: 'Save', isLucideIcon: true } };
+\`\`\`
+
+## 4. Rodar
+
+\`\`\`bash
+# Servidor de desenvolvimento (porta 6006)
+npx storybook dev -c .storybook -p 6006
+
+# Build estatico
+npx storybook build -c .storybook -o storybook-static
+\`\`\`
+
+Dica: adicione ao package.json do projeto de destino:
+
+\`\`\`json
+{
+  "scripts": {
+    "storybook": "storybook dev -c .storybook -p 6006",
+    "build-storybook": "storybook build -c .storybook -o storybook-static"
+  }
+}
+\`\`\`
+
+## Opcional: Compodoc (docs automaticas)
+
+1. Gere o JSON de documentacao na raiz do destino:
+   \`\`\`bash
+   npx @compodoc/compodoc -p tsconfig.json -e json -d .
+   \`\`\`
+2. No \`.storybook/main.ts\`, altere \`"compodoc": false\` para \`"compodoc": true\`.
+3. No \`.storybook/preview.ts\`, descomente o bloco do Compodoc.
+
+> O \`--force\` sobrescreve os arquivos gerados pelo cao-comp no destino.
 `;
 
 function resolveTemplatesDir() {
@@ -86,6 +292,57 @@ function copyRecursive(src, dest, force, conflicts) {
   }
 }
 
+function writeFileIfAllowed(filePath, content, force, conflicts) {
+  if (fs.existsSync(filePath) && !force) {
+    conflicts.push(filePath);
+    return false;
+  }
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, content);
+  return true;
+}
+
+function setupStorybook(destination, force) {
+  const root = path.resolve(destination);
+  const conflicts = [];
+  const created = [];
+
+  for (const [rel, content] of Object.entries(STORYBOOK_FILES)) {
+    const file = path.join(root, rel);
+    if (writeFileIfAllowed(file, content, force, conflicts)) {
+      created.push(path.relative(root, file));
+    }
+  }
+
+  const storyFile = path.join(root, 'src', 'stories', 'CaoButton.stories.ts');
+  if (writeFileIfAllowed(storyFile, EXAMPLE_STORY_LINES.join('\n'), force, conflicts)) {
+    created.push(path.relative(root, storyFile));
+  }
+
+  const docFile = path.join(root, 'STORYBOOK-SETUP.md');
+  if (writeFileIfAllowed(docFile, STORYBOOK_SETUP_DOC, force, conflicts)) {
+    created.push(path.relative(root, docFile));
+  }
+
+  if (conflicts.length) {
+    process.stderr.write(
+      `Erro: os seguintes arquivos ja existem no destino (use --force para sobrescrever):\n` +
+        conflicts.map((c) => `  - ${c}`).join('\n') +
+        '\n'
+    );
+    return 1;
+  }
+
+  process.stdout.write(
+    `Setup de Storybook gerado em "${root}".\n` +
+      `Arquivos criados:\n` +
+      created.map((c) => `  - ${c}`).join('\n') +
+      '\n' +
+      `Leia ${path.join(root, 'STORYBOOK-SETUP.md')} para instalar as dependencias e rodar.\n`
+  );
+  return 0;
+}
+
 function parseArgs(argv) {
   const positionals = [];
   const flags = { help: false, list: false, force: false, version: false };
@@ -146,7 +403,20 @@ function main() {
     return 0;
   }
 
-  const [component, destination] = positionals;
+  const [first, second] = positionals;
+
+  if (first === 'storybook') {
+    if (!second) {
+      process.stderr.write(
+        'Erro: informe o destino do Storybook.\n\n' + USAGE + '\n'
+      );
+      return 1;
+    }
+    return setupStorybook(second, flags.force);
+  }
+
+  const component = first;
+  const destination = second;
   if (!component || !destination) {
     process.stderr.write(
       'Erro: informe o componente e o destino.\n\n' + USAGE + '\n'
@@ -183,4 +453,4 @@ function main() {
   return 0;
 }
 
-process.exit(main());
+process.exit(main());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.20.0",
+  "version": "1.21.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,
+  },
+};