feat: rewrite all pipes for modern Angular and add tests

Author: mofirojean

libs/ngx-transforms/src/index.ts

@@ -1,2 +1,25 @@
-export * from './lib/pipes/count/count.pipe';
-export * from './lib/ngx-transforms/ngx-transforms';
+export * from './lib/pipes/ascii-art/ascii-art';
+export * from './lib/pipes/barcode/barcode';
+export * from './lib/pipes/camel-case/camel-case';
+export * from './lib/pipes/color-convert/color-convert';
+export * from './lib/pipes/count/count';
+export * from './lib/pipes/credit-card-mask/credit-card-mask';
+export * from './lib/pipes/device-type/device-type';
+export * from './lib/pipes/email-mask/email-mask';
+export * from './lib/pipes/gravatar/gravatar';
+export * from './lib/pipes/highlight/highlight';
+export * from './lib/pipes/html-escape/html-escape';
+export * from './lib/pipes/html-sanitize/html-sanitize';
+export * from './lib/pipes/initials/initials';
+export * from './lib/pipes/ip-address-mask/ip-address-mask';
+export * from './lib/pipes/json-pretty/json-pretty';
+export * from './lib/pipes/kebab-case/kebab-case';
+export * from './lib/pipes/morse-code/morse-code';
+export * from './lib/pipes/qr-code/qr-code';
+export * from './lib/pipes/replace/replace';
+export * from './lib/pipes/reverse/reverse';
+export * from './lib/pipes/snake-case/snake-case';
+export * from './lib/pipes/text-to-speech/text-to-speech';
+export * from './lib/pipes/title-case/title-case';
+export * from './lib/pipes/truncate/truncate';
+export * from './providers/all-pipes.provider';

libs/ngx-transforms/src/lib/pipes/ascii-art/ascii-art.spec.ts

@@ -0,0 +1,9 @@
+import { AsciiArtPipe } from './ascii-art';
+import { describe, it, expect } from 'vitest';
+
+describe('AsciiArtPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AsciiArtPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

libs/ngx-transforms/src/lib/pipes/ascii-art/ascii-art.ts

@@ -0,0 +1,82 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import figlet from 'figlet';
+/**
+ * Supported figlet fonts for ASCII art.
+ */
+export type FigletFont = 'Standard' | 'Ghost' | 'Doom' | 'Big' | 'Banner';
+
+/**
+ * Supported figlet horizaontal layout options.
+ */
+export type FigletLayout = 'default' | 'fitted' | 'full';
+
+/**
+ * Options for configuring figlet ASCII art generation
+ */
+export interface FigletOptions {
+  font?: FigletFont;
+  horizontalLayout?: FigletLayout;
+  width?: number;
+  whitespaceBreak?: boolean
+}
+
+/**
+ * AsciiArtPipe: Converts text into ASCII art using figlet.js.
+ *
+ * @param {string} value - The text to convert to ASCII art.
+ * @param {FigletOptions} [options] - Configuration options for figlet (font, layout, width, whitespaceBreak).
+ *
+ * @returns {string} - The ASCII art wrapped in a <pre> tag with CSS classes.
+ *
+ * @remarks
+ * This pipe returns plain HTML (e.g., `<pre class="ascii-art">...</pre>`). For production,
+ * use Angular's `DomSanitizer` to sanitize the output and prevent XSS attacks. Example:
+ * ```typescript
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ * constructor(private sanitizer: DomSanitizer) {}
+ * transform(value: string, options: FigletOptions = {}): SafeHtml {
+ *   const html = this.generateAsciiArt(value, options);
+ *   return this.sanitizer.bypassSecurityTrustHtml(html);
+ * }
+ * ```
+ *
+ * @example
+ * {{ 'HI' | asciiArt }} // Outputs ASCII art using default options (Standard font)
+ * {{ 'HI' | asciiArt:{ font: 'Ghost', horizontalLayout: 'fitted', width: 60 } }} // Outputs ASCII art with custom options
+ * <div [innerHTML]="userInput | asciiArt:{ font: 'Doom' }"></div>
+ *
+ * @author Mofiro Jean
+ */
+@Pipe({
+  name: 'asciiArt',
+  standalone: true
+})
+export class AsciiArtPipe implements PipeTransform {
+
+  transform(value: string, options: FigletOptions = {}): string {
+    if (!value || typeof value !== 'string') {
+      return '';
+    }
+
+    const config: FigletOptions = {
+      font: options.font ?? 'Standard',
+      horizontalLayout: options.horizontalLayout ?? 'default',
+      width: options.width ?? 80,
+      whitespaceBreak: options.whitespaceBreak ?? true
+    };
+
+    try {
+      const asciiArt = figlet.textSync(value, {
+        font: config.font,
+        horizontalLayout: config.horizontalLayout,
+        verticalLayout: 'default', // Most fonts don't support vertical smushing
+        width: config.width,
+        whitespaceBreak: config.whitespaceBreak
+      });
+      return `<pre class="ascii-art">${asciiArt}</pre>`;
+    } catch (error) {
+      console.log(`AsciiArtPipe: Error generating ASCII art for "${value}" with font "${config.font}"`);
+      return `<pre class="ascii-art-error">Error: Invalid font or input</pre>`;
+    }
+  }
+}

libs/ngx-transforms/src/lib/pipes/barcode/barcode.spec.ts

@@ -0,0 +1,75 @@
+import { TestBed } from '@angular/core/testing';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
+import { describe, it, expect, beforeEach, beforeAll, vi } from 'vitest';
+import { BarcodeElementType, BarcodePipe } from './barcode';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+beforeAll(() => {
+  TestBed.initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+  );
+});
+
+describe('BarcodePipe', () => {
+  let pipe: BarcodePipe;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BrowserModule],
+      providers: [BarcodePipe],
+    });
+    pipe = TestBed.inject(BarcodePipe);
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should generate SVG barcode', async () => {
+    const result = await pipe.transform('123456789', { elementType: 'svg' as BarcodeElementType });
+    const html = (result as any).changingThisBreaksApplicationSecurity;
+    expect(html).toContain('<svg');
+  });
+
+  it('should generate image data URL for img', async () => {
+    const result = await pipe.transform('123456789', { elementType: 'img' as BarcodeElementType });
+    const url = (result as any).changingThisBreaksApplicationSecurity;
+    expect(url).toMatch(/^data:image\/png;base64,/);
+  });
+
+  it('should generate image data URL for canvas', async () => {
+    const result = await pipe.transform('123456789', { elementType: 'canvas' as BarcodeElementType });
+    const url = (result as any).changingThisBreaksApplicationSecurity;
+    expect(url).toMatch(/^data:image\/png;base64,/);
+  });
+
+  it('should apply custom options', async () => {
+    const result = await pipe.transform('123456789', {
+      elementType: 'svg' as BarcodeElementType,
+      format: 'CODE128',
+      width: 3,
+      height: 150,
+      lineColor: '#FF0000',
+      displayValue: false,
+    });
+    const html = (result as any).changingThisBreaksApplicationSecurity;
+    expect(html).toContain('<svg');
+    expect(html).toContain('width');
+  });
+
+  it('should handle empty input', async () => {
+    const result = await pipe.transform('');
+    expect(result).toBe('');
+  });
+
+  it('should handle invalid value', async () => {
+    const spy = vi.spyOn(console, 'error');
+    const result = await pipe.transform('invalid', { format: 'EAN13' as any });
+    expect(result).toBe('');
+    expect(spy).toHaveBeenCalledWith('Barcode generation failed:', new Error('"invalid" is not a valid input for EAN13'));
+  });
+});

libs/ngx-transforms/src/lib/pipes/barcode/barcode.ts

@@ -0,0 +1,91 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';
+import JsBarcode from 'jsbarcode';
+
+/**
+ * BarcodeElementType: Defines the type of element to render the barcode.
+ *
+ * @typedef {'svg' | 'img' | 'canvas'} BarcodeElementType
+ */
+export type BarcodeElementType = 'svg' | 'img' | 'canvas';
+
+/**
+ * BarcodeFormat: Defines supported barcode formats.
+ *
+ * @typedef {'CODE128' | 'EAN13' | 'CODE39'} BarcodeFormat
+ */
+export type BarcodeFormat = 'CODE128' | 'EAN13' | 'CODE39';
+
+/**
+ * BarcodeOptions: Configuration options for barcode generation.
+ *
+ * @interface BarcodeOptions
+ * @property {BarcodeElementType} [elementType='svg'] - Output type (svg, img, canvas).
+ * @property {BarcodeFormat} [format='CODE128'] - Barcode format.
+ * @property {number} [width=2] - Bar width in pixels.
+ * @property {number} [height=100] - Barcode height in pixels.
+ * @property {string} [lineColor='#000000'] - Color of bars.
+ * @property {boolean} [displayValue=true] - Show value below barcode.
+ */
+export interface BarcodeOptions {
+  elementType?: BarcodeElementType;
+  format?: BarcodeFormat;
+  width?: number;
+  height?: number;
+  lineColor?: string;
+  displayValue?: boolean;
+}
+
+/**
+ * BarcodePipe: Generates a barcode from a string value.
+ *
+ * @param {string} value - The value to encode (e.g., '123456789').
+ * @param {BarcodeOptions} [options={}] - Configuration options.
+ *
+ * @returns {Promise<SafeHtml | SafeResourceUrl>} - SVG markup or image data URL.
+ *
+ * @example
+ * <div [innerHTML]="'123456789' | barcode:{elementType:'svg',format:'CODE128'} | async"></div>
+ * <img [src]="'123456789' | barcode:{elementType:'img'} | async" />
+ *
+ * @author Mofiro Jean
+ */
+@Pipe({
+  name: 'barcode',
+  standalone: true,
+})
+export class BarcodePipe implements PipeTransform {
+  private sanitizer = inject(DomSanitizer);
+
+  async transform(value: string, options: BarcodeOptions = {}): Promise<SafeHtml | SafeResourceUrl | ''> {
+    const {
+      elementType = 'svg',
+      format = 'CODE128',
+      lineColor = '#000000',
+      width = 2,
+      height = 100,
+      displayValue = true,
+    } = options;
+
+    if (!value) {
+      return '';
+    }
+
+    try {
+      const config = { format, lineColor, width, height, displayValue };
+      if (elementType === 'svg') {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        JsBarcode(svg, value, config);
+        return this.sanitizer.bypassSecurityTrustHtml(svg.outerHTML);
+      } else {
+        const canvas = document.createElement('canvas');
+        JsBarcode(canvas, value, config);
+        const dataUrl = canvas.toDataURL('image/png');
+        return this.sanitizer.bypassSecurityTrustResourceUrl(dataUrl);
+      }
+    } catch (error) {
+      console.error('Barcode generation failed:', error);
+      return '';
+    }
+  }
+}

libs/ngx-transforms/src/lib/pipes/camel-case/camel-case.spec.ts

@@ -0,0 +1,42 @@
+import { CamelCasePipe } from './camel-case';
+import { describe, it, expect, beforeEach } from 'vitest';
+
+describe('CamelCasePipe', () => {
+  let pipe: CamelCasePipe;
+
+  beforeEach(() => {
+    pipe = new CamelCasePipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should convert "hello world" to "helloWorld"', () => {
+    expect(pipe.transform('hello world')).toBe('helloWorld');
+  });
+
+  it('should handle single word', () => {
+    expect(pipe.transform('hello')).toBe('hello');
+  });
+
+  it('should handle multiple spaces and special characters', () => {
+    expect(pipe.transform('hello   world!')).toBe('helloWorld');
+  });
+
+  it('should handle underscore-separated input', () => {
+    expect(pipe.transform('hello_world')).toBe('helloWorld');
+  });
+
+  it('should return empty string for empty input', () => {
+    expect(pipe.transform('')).toBe('');
+  });
+
+  it('should return empty string for null input', () => {
+    expect(pipe.transform(null as any)).toBe('');
+  });
+
+  it('should return empty string for undefined input', () => {
+    expect(pipe.transform(undefined as any)).toBe('');
+  });
+});

libs/ngx-transforms/src/lib/pipes/camel-case/camel-case.ts

@@ -0,0 +1,37 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * CamelCasePipe: Converts text to camelCase (e.g., "hello world" → "helloWorld").
+ *
+ * @param {string} value - The input string to transform.
+ * @returns {string} The string in camelCase, or an empty string if input is invalid.
+ *
+ * @example
+ * ```html
+ * {{ 'hello world' | camelCase }} <!-- Outputs: helloWorld -->
+ * ```
+ * 
+ * @author Mofiro Jean
+ */
+@Pipe({
+  name: 'camelCase',
+  standalone: true
+})
+export class CamelCasePipe implements PipeTransform {
+
+  transform(value: string): string {
+    if (!value || typeof value !== 'string') return '';
+    return value
+      .toLowerCase()
+      .replace(/[^a-zA-Z0-9]+/g, ' ')
+      .trim()
+      .split(' ')
+      .filter(word => word.length > 0)
+      .map((word, index) => 
+        index === 0 
+          ? word.toLowerCase() 
+          : word.charAt(0).toUpperCase() + word.slice(1)
+      )
+      .join('');
+  }
+}