ng-comps 0.2.0 → 1.0.0

package/ng-package.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist/ng-comps",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "LICENSE",
+    "README.md",
+    "src/styles.css",
+    "src/theme/**/*"
+  ],
+  "allowedNonPeerDependencies": [
+    "@angular/animations",
+    "@angular/cdk",
+    "@angular/common",
+    "@angular/compiler",
+    "@angular/core",
+    "@angular/forms",
+    "@angular/material",
+    "@angular/platform-browser",
+    "@angular/router",
+    "@fontsource/material-icons",
+    "rxjs",
+    "tslib"
+  ]
+}

package/package.json

@@ -1,45 +1,58 @@
-{
-  "name": "ng-comps",
-  "version": "0.2.0",
-  "description": "Angular UI components for mf-design-system",
-  "keywords": [
-    "angular",
-    "components",
-    "ui",
-    "design-system",
-    "material"
-  ],
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "main": "./fesm2022/ng-comps.mjs",
-  "module": "./fesm2022/ng-comps.mjs",
-  "typings": "./types/ng-comps.d.ts",
-  "exports": {
-    ".": {
-      "types": "./types/ng-comps.d.ts",
-      "default": "./fesm2022/ng-comps.mjs"
-    },
-    "./styles.css": "./src/styles.css",
-    "./theme/tokens.css": "./src/theme/tokens.css",
-    "./theme/material-theme.scss": "./src/theme/material-theme.scss",
-    "./package.json": "./package.json"
-  },
-  "peerDependencies": {
-    "@angular/animations": "^21.2.0",
-    "@angular/cdk": "^21.2.2",
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0",
-    "@angular/material": "^21.2.2",
-    "@angular/platform-browser": "^21.2.0",
-    "@angular/router": "^21.2.0",
-    "rxjs": "~7.8.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "ng-comps",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:lib": "ng-packagr -p ng-package.json",
+    "prepare:package": "node scripts/prepare-package.mjs",
+    "release:dry-run": "npm run build:lib && npm run prepare:package && npm pack ./dist/ng-comps --dry-run",
+    "publish:npm": "npm run build:lib && npm run prepare:package && npm publish ./dist/ng-comps --access public",
+    "version:patch": "npm version patch --no-git-tag-version",
+    "version:minor": "npm version minor --no-git-tag-version",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "test:ci": "ng test --watch=false",
+    "storybook": "ng run ng-comps:storybook",
+    "build-storybook": "ng run ng-comps:build-storybook",
+    "ci": "npm run build:lib && npm run test:ci && npm run build-storybook"
+  },
+  "private": false,
+  "packageManager": "npm@10.8.2",
+  "dependencies": {
+    "@angular/animations": "^21.2.4",
+    "@angular/cdk": "^21.2.2",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/material": "^21.2.2",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@fontsource/material-icons": "^5.2.7",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/architect": "^0.2102.0",
+    "@angular-devkit/build-angular": "^21.2.0",
+    "@angular-devkit/core": "^21.2.0",
+    "@angular/build": "^21.2.2",
+    "@angular/cli": "^21.2.2",
+    "@angular/compiler-cli": "^21.2.0",
+    "@angular/platform-browser-dynamic": "^21.2.0",
+    "@compodoc/compodoc": "^1.2.1",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/angular": "^10.2.19",
+    "axe-core": "^4.11.0",
+    "jsdom": "^28.0.0",
+    "prettier": "^3.8.1",
+    "storybook": "^10.2.19",
+    "ng-packagr": "^21.2.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

package/scripts/prepare-package.mjs

@@ -0,0 +1,61 @@
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const root = process.cwd();
+const rootPkgPath = resolve(root, 'package.json');
+const distDir = resolve(root, 'dist', 'ng-comps');
+const distPkgPath = resolve(distDir, 'package.json');
+
+if (!existsSync(distDir)) {
+  throw new Error('No existe dist/ng-comps. Ejecuta primero npm run build:lib');
+}
+
+const rootPkg = JSON.parse(readFileSync(rootPkgPath, 'utf8'));
+const angularVersion = rootPkg.dependencies['@angular/core'];
+const cdkVersion = rootPkg.dependencies['@angular/cdk'];
+const materialVersion = rootPkg.dependencies['@angular/material'];
+const rxjsVersion = rootPkg.dependencies.rxjs;
+const tslibVersion = rootPkg.dependencies.tslib;
+
+const packageJson = {
+  name: rootPkg.name,
+  version: rootPkg.version,
+  description: 'Angular UI components for mf-design-system',
+  keywords: ['angular', 'components', 'ui', 'design-system', 'material'],
+  license: rootPkg.license || 'MIT',
+  type: 'module',
+  sideEffects: false,
+  main: './fesm2022/ng-comps.mjs',
+  module: './fesm2022/ng-comps.mjs',
+  typings: './types/ng-comps.d.ts',
+  exports: {
+    '.': {
+      types: './types/ng-comps.d.ts',
+      default: './fesm2022/ng-comps.mjs'
+    },
+    './styles.css': './src/styles.css',
+    './theme/tokens.css': './src/theme/tokens.css',
+    './theme/material-theme.scss': './src/theme/material-theme.scss',
+    './package.json': './package.json'
+  },
+  peerDependencies: {
+    '@angular/animations': angularVersion,
+    '@angular/cdk': cdkVersion,
+    '@angular/common': angularVersion,
+    '@angular/core': angularVersion,
+    '@angular/forms': angularVersion,
+    '@angular/material': materialVersion,
+    '@angular/platform-browser': angularVersion,
+    '@angular/router': angularVersion,
+    rxjs: rxjsVersion
+  },
+  dependencies: {
+    tslib: tslibVersion
+  },
+  publishConfig: {
+    access: 'public'
+  }
+};
+
+writeFileSync(distPkgPath, `${JSON.stringify(packageJson, null, 2)}\n`, 'utf8');
+console.log(`package.json optimizado generado en ${distPkgPath}`);

package/src/app/a11y/accessibility.utils.ts

@@ -0,0 +1,35 @@
+import { isDevMode } from '@angular/core';
+
+let nextUniqueId = 0;
+const emittedWarnings = new Set<string>();
+
+export function createUniqueId(prefix: string): string {
+  nextUniqueId += 1;
+  return `${prefix}-${nextUniqueId}`;
+}
+
+export function mergeAriaIds(
+  ...values: Array<string | null | undefined>
+): string | null {
+  const ids = values
+    .flatMap((value) => (value ? value.split(/\s+/) : []))
+    .map((value) => value.trim())
+    .filter(Boolean);
+
+  return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : null;
+}
+
+export function hasAccessibleName(
+  ...values: Array<string | null | undefined>
+): boolean {
+  return values.some((value) => Boolean(value?.trim()));
+}
+
+export function warnInDev(message: string): void {
+  if (!isDevMode() || emittedWarnings.has(message)) {
+    return;
+  }
+
+  emittedWarnings.add(message);
+  console.warn(`[ng-comps:a11y] ${message}`);
+}

package/src/app/a11y/index.ts

@@ -0,0 +1,6 @@
+export {
+  createUniqueId,
+  hasAccessibleName,
+  mergeAriaIds,
+  warnInDev,
+} from './accessibility.utils';

package/src/app/accessibility/ng-comps.a11y.spec.ts

@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import * as axe from 'axe-core';
+import { MfButtonComponent } from '../components/button';
+import { MfDialogComponent } from '../components/dialog';
+import { MfInputComponent } from '../components/input';
+import { MfSelectComponent } from '../components/select';
+
+async function expectNoAxeViolations(
+  fixture: ComponentFixture<unknown>,
+): Promise<void> {
+  await fixture.whenStable();
+  const results = await axe.run(fixture.nativeElement as HTMLElement, {
+    runOnly: {
+      type: 'tag',
+      values: ['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'],
+    },
+    rules: {
+      region: { enabled: false },
+      'page-has-heading-one': { enabled: false },
+      'landmark-one-main': { enabled: false },
+    },
+  });
+
+  const summaries = results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    nodes: violation.nodes.map((node) => node.target.join(' ')),
+  }));
+
+  expect(summaries).toEqual([]);
+}
+
+describe('ng-comps accessibility contract', () => {
+  it('renders a labeled text button without axe violations', async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfButtonComponent],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(MfButtonComponent);
+    fixture.componentRef.setInput('label', 'Guardar cambios');
+    fixture.detectChanges();
+
+    await expectNoAxeViolations(fixture);
+  });
+
+  it('renders an icon-only button with an explicit accessible name', async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfButtonComponent],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(MfButtonComponent);
+    fixture.componentRef.setInput('iconOnly', true);
+    fixture.componentRef.setInput('leadingIcon', 'settings');
+    fixture.componentRef.setInput('ariaLabel', 'Abrir configuración');
+    fixture.detectChanges();
+
+    await expectNoAxeViolations(fixture);
+  });
+
+  it('renders an input with visible label, hint and error wiring', async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfInputComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(MfInputComponent);
+    fixture.componentRef.setInput('label', 'Correo electrónico');
+    fixture.componentRef.setInput('hint', 'Usa tu correo corporativo');
+    fixture.componentRef.setInput('error', 'El correo es obligatorio');
+    fixture.detectChanges();
+
+    await expectNoAxeViolations(fixture);
+  });
+
+  it('renders a select with visible label and helper text', async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfSelectComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(MfSelectComponent);
+    fixture.componentRef.setInput('label', 'Framework');
+    fixture.componentRef.setInput('hint', 'Selecciona una opción');
+    fixture.componentRef.setInput('options', [
+      { value: 'angular', label: 'Angular' },
+      { value: 'react', label: 'React' },
+    ]);
+    fixture.detectChanges();
+
+    await expectNoAxeViolations(fixture);
+  });
+
+  it('renders an inline dialog with title and description', async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfDialogComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(MfDialogComponent);
+    fixture.componentRef.setInput('title', 'Confirmar acción');
+    fixture.componentRef.setInput(
+      'message',
+      'Este cambio se aplicará de forma permanente.',
+    );
+    fixture.componentRef.setInput('showActions', false);
+    fixture.detectChanges();
+
+    await expectNoAxeViolations(fixture);
+  });
+});

package/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes)
+  ]
+};

package/src/app/app.css

@@ -0,0 +1,107 @@
+:host {
+  display: block;
+  min-height: 100dvh;
+  background:
+    radial-gradient(circle at 10% 5%, rgba(15, 118, 110, 0.12), transparent 35%),
+    radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.15), transparent 32%),
+    #f7fafc;
+}
+
+.welcome {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 32px 20px 40px;
+  display: grid;
+  gap: 16px;
+  color: #0f172a;
+  font-family: var(--mf-font-base, 'Segoe UI', sans-serif);
+}
+
+.hero {
+  background: #ffffff;
+  border: 1px solid #d9e4ec;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
+}
+
+.badge {
+  display: inline-flex;
+  margin: 0 0 10px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #166534;
+  font-weight: 600;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-family: var(--mf-font-display, 'Segoe UI', sans-serif);
+  font-size: clamp(1.8rem, 4vw, 2.4rem);
+  line-height: 1.1;
+}
+
+.lead {
+  margin: 10px 0 0;
+  color: #334155;
+  max-width: 62ch;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #d9e4ec;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
+}
+
+.card h2 {
+  margin: 0 0 10px;
+  font-size: 1.1rem;
+}
+
+.card p {
+  margin: 0 0 10px;
+  color: #334155;
+}
+
+pre {
+  margin: 0;
+  padding: 12px;
+  border-radius: 10px;
+  background: #0b1220;
+  color: #e2e8f0;
+  border: 1px solid #1e293b;
+  overflow-x: auto;
+}
+
+code {
+  font-family: 'Cascadia Code', Consolas, monospace;
+  font-size: 0.88rem;
+}
+
+ul {
+  margin: 0;
+  padding-left: 18px;
+  color: #334155;
+}
+
+li + li {
+  margin-top: 6px;
+}
+
+@media (max-width: 640px) {
+  .welcome {
+    padding: 20px 12px 28px;
+  }
+
+  .hero,
+  .card {
+    padding: 16px;
+    border-radius: 12px;
+  }
+}

package/src/app/app.html

@@ -0,0 +1,48 @@
+<main class="welcome">
+  <header class="hero">
+    <p class="badge">UI Library</p>
+    <h1>Welcome to {{ title() }}</h1>
+    <p class="lead">
+      This page explains how to install and start using <strong>ng-comps</strong>
+      in any Angular project.
+    </p>
+  </header>
+
+  <section class="card" aria-labelledby="install-title">
+    <h2 id="install-title">1) Install package</h2>
+    <pre><code>npm i ng-comps</code></pre>
+  </section>
+
+  <section class="card" aria-labelledby="styles-title">
+    <h2 id="styles-title">2) Load base styles and design tokens</h2>
+    <p>Add these imports in your global styles file (for example <code>src/styles.css</code>):</p>
+    <pre><code>@import 'ng-comps/theme/tokens.css';
+@import 'ng-comps/styles.css';</code></pre>
+  </section>
+
+  <section class="card" aria-labelledby="usage-title">
+    <h2 id="usage-title">3) Use components in standalone Angular pages</h2>
+    <p>Import only what you need for better tree-shaking.</p>
+    <pre><code>import &#123; Component &#125; from '@angular/core';
+import &#123; MfButtonComponent, MfInputComponent &#125; from 'ng-comps';
+
+@Component(&#123;
+  selector: 'app-example',
+  imports: [MfButtonComponent, MfInputComponent],
+  template: `
+    &lt;mf-input label="Email" placeholder="you@company.com" /&gt;
+    &lt;mf-button label="Save" variant="filled" /&gt;
+  `,
+&#125;)
+export class ExampleComponent &#123;&#125;</code></pre>
+  </section>
+
+  <section class="card" aria-labelledby="notes-title">
+    <h2 id="notes-title">4) Notes for production projects</h2>
+    <ul>
+      <li>The package is published with <code>sideEffects: false</code> for max tree-shaking.</li>
+      <li>Angular and RxJS are peer dependencies to avoid duplicated framework installs.</li>
+      <li>Import components directly from <code>ng-comps</code>; avoid wildcard barrel files in your app.</li>
+    </ul>
+  </section>
+</main>

package/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to ng-comps');
+  });
+});

package/src/app/app.ts

@@ -0,0 +1,10 @@
+import { Component, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css'
+})
+export class App {
+  protected readonly title = signal('ng-comps');
+}

package/src/app/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export { MfAccordionComponent } from './mf-accordion.component';
+export type { MfAccordionPanel } from './mf-accordion.component';

package/src/app/components/accordion/mf-accordion.component.css

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+}
+
+.mf-accordion .mat-expansion-panel {
+  font-family: var(--mf-font-base) !important;
+  border-radius: var(--mf-radius-md) !important;
+  box-shadow: var(--mf-shadow-none) !important;
+  border: 1px solid var(--mf-color-border);
+  margin-bottom: var(--mf-space-2);
+}
+
+.mf-accordion .mat-expansion-panel-header {
+  font-family: var(--mf-font-base) !important;
+}
+
+.mf-accordion .mat-expansion-panel-header-title {
+  font-weight: var(--mf-weight-bold) !important;
+  color: var(--mf-color-on-surface) !important;
+}
+
+.mf-accordion .mat-expansion-panel-header-description {
+  color: var(--mf-color-neutral-400) !important;
+}
+
+.mf-accordion .mat-expansion-panel-body {
+  font-size: var(--mf-text-sm) !important;
+  color: var(--mf-color-neutral-600) !important;
+  line-height: var(--mf-leading-normal);
+}
+
+.mf-accordion .mat-expansion-indicator::after {
+  color: var(--mf-color-brand) !important;
+}
+
+.mf-accordion .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover {
+  background-color: var(--mf-color-brand-light) !important;
+}

package/src/app/components/accordion/mf-accordion.component.spec.ts

@@ -0,0 +1,48 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfAccordionComponent } from './mf-accordion.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfAccordionComponent', () => {
+  let fixture: ComponentFixture<MfAccordionComponent>;
+  let component: MfAccordionComponent;
+
+  const testPanels = [
+    { title: 'Panel 1', content: 'Content 1' },
+    { title: 'Panel 2', description: 'Description', content: 'Content 2' },
+    { title: 'Panel 3', content: 'Content 3', disabled: true },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfAccordionComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfAccordionComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('panels', testPanels);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render expansion panels', () => {
+    const panels = fixture.nativeElement.querySelectorAll('mat-expansion-panel');
+    expect(panels.length).toBe(3);
+  });
+
+  it('should apply host classes', () => {
+    expect(component.hostClasses()).toBe('mf-accordion');
+  });
+
+  it('should not allow multi by default', () => {
+    expect(component.multi()).toBe(false);
+  });
+
+  it('should render panel titles', () => {
+    const titles = fixture.nativeElement.querySelectorAll('mat-panel-title');
+    expect(titles.length).toBe(3);
+    expect(titles[0].textContent).toContain('Panel 1');
+  });
+});