@tacdaed/fragments 1.0.0-beta.3 → 1.0.0-beta.4

package/src/lib/components/code-block/code-block.component.ts

@@ -0,0 +1,302 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  Type,
+  ViewChild,
+  inject,
+} from '@angular/core';
+
+import hljs from 'highlight.js';
+import { generateUniqueId } from '../../utils/uuid.utils';
+import { CodeBlockConfig, CodeBlockHeader } from './code-block.interface';
+import { CodeBlockBody, THLJSLanguage } from './code-block.type';
+
+@Component({
+  selector: 'frg-code-block',
+  templateUrl: './code-block.component.html',
+  styleUrls: ['./code-block.component.scss'],
+  imports: [],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CodeBlockComponent implements AfterViewInit, OnChanges, OnDestroy {
+  private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
+
+  /**
+   * Configuration options for the code block.
+   */
+  @Input() public config: CodeBlockConfig | undefined = undefined;
+
+  /**
+   * Emitted when the code block is closed.
+   */
+  @Output() public closed = new EventEmitter<void>();
+
+  protected copied = false;
+  private copyResetId: ReturnType<typeof setTimeout> | null = null;
+
+  /**
+   * Reference to the code element in the template.
+   */
+  @ViewChild('codeElement', { static: false })
+    codeElement?: ElementRef<HTMLElement>;
+  /**
+   * Reference to the container element in the template.
+   */
+  @ViewChild('container', { static: false })
+    containerElement?: ElementRef<HTMLElement>;
+
+  /**
+   * Indicates if the code block has a footer.
+   */
+  protected get hasConfig(): boolean {
+    return !!this.config;
+  }
+
+  /**
+   * Returns the header configuration of the code block.
+   * This includes properties like title, minimize, fullscreen, and close options.
+   * @return {CodeBlockHeader | undefined} The header configuration or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get header(): CodeBlockHeader | undefined {
+    return this.config?.header;
+  }
+
+  /**
+   * Returns the body of the code block, which can be either text or a component.
+   * @return {CodeBlockBody | undefined} The body configuration or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get title(): string | undefined {
+    return this.config?.header?.title;
+  }
+
+  /**
+   * Returns the body configuration of the code block.
+   * This includes properties like content and language.
+   * @return {CodeBlockBody | undefined} The body configuration or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get body(): CodeBlockBody | undefined {
+    return this.config?.body;
+  }
+
+  /**
+   * Returns the type of content in the body of the code block.
+   * This can be either 'text' for plain text content or 'component' for a component.
+   * @return {'text' | 'component' | undefined} The type of content or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get type(): 'text' | 'component' | undefined {
+    return this.config?.body?.type;
+  }
+
+  /**
+   * Returns the component type in the body of the code block.
+   * @return {Type<T> | undefined} The component type or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get component(): Type<unknown> | undefined {
+    return this.config?.body?.component;
+  }
+
+  /**
+   * Returns the inputs for the component in the body of the code block.
+   * @return {Record<string, unknown> | undefined} The inputs or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get inputs(): Record<string, unknown> | undefined {
+    return this.config?.body?.inputs;
+  }
+
+  /**
+   * Returns the content for the code block.
+   * @return {string | undefined} The content or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get content(): string | undefined {
+    return this.config?.body?.content;
+  }
+
+  /**
+   * Returns the programming language for the code block.
+   * @return {THLJSLanguage | undefined} The language or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get language(): THLJSLanguage | undefined {
+    return this.config?.body?.language;
+  }
+
+  /**
+   * Returns the lines to highlight in the code block.
+   * @return {string | undefined} The highlight lines or undefined if not set.
+   * @memberof CodeBlockComponent
+   */
+  protected get highlightLines(): string | undefined {
+    return this.config?.body?.highlightLines;
+  }
+
+  protected get showCopyButton(): boolean {
+    if (this.config?.body?.type !== 'text' || !this.header) {
+      return false;
+    }
+    return this.header.showCopy ?? true;
+  }
+
+  protected get copyLabel(): string {
+    return this.header?.copyLabel ?? 'Copy';
+  }
+
+  protected get copiedLabel(): string {
+    return this.header?.copiedLabel ?? 'Copied';
+  }
+
+  ngAfterViewInit() {
+    if (this.config?.body?.type === 'text') {
+      this.highlightCode();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['config']) {
+      if (!this.config?.id) {
+        this.config = {
+          ...this.config,
+          id: generateUniqueId('codeblock'),
+        };
+      }
+
+      const prevContent = changes['config'].previousValue?.body?.content;
+      const newContent = changes['config'].currentValue?.body?.content;
+
+      if (prevContent !== newContent && this.config?.body?.type === 'text') {
+        this.highlightCode();
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.copyResetId) {
+      clearTimeout(this.copyResetId);
+      this.copyResetId = null;
+    }
+  }
+
+  protected copyToClipboard(): void {
+    if (this.config?.body?.type !== 'text') {
+      return;
+    }
+
+    const text = this.getCopyContent();
+    if (!text) {
+      return;
+    }
+
+    const onSuccess = () => {
+      this.copied = true;
+      this.cdr.markForCheck();
+      if (this.copyResetId) {
+        clearTimeout(this.copyResetId);
+      }
+      this.copyResetId = setTimeout(() => {
+        this.copied = false;
+        this.cdr.markForCheck();
+      }, 1500);
+    };
+
+    const canUseClipboard = window.isSecureContext && navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+    if (canUseClipboard) {
+      navigator.clipboard.writeText(text).then(onSuccess).catch(() => {
+        this.fallbackCopy(text, onSuccess);
+      });
+      return;
+    }
+
+    this.fallbackCopy(text, onSuccess);
+  }
+
+  /**
+   * Highlights the code in the code block.
+   * This method uses the highlight.js library to apply syntax highlighting.
+   */
+  private highlightCode() {
+    if (this.config?.body?.type === 'text' && this.codeElement) {
+      let code = this.config.body.content ?? '';
+
+      code = this.dedent(code).trim();
+      if(this.config.body.hasNumberLine){
+        code = this.addNumberLines(code);
+      }
+
+      this.codeElement.nativeElement.textContent = code;
+      hljs.highlightElement(this.codeElement.nativeElement);
+    }
+  }
+
+  private getCopyContent(): string {
+    let code = this.config?.body?.content ?? '';
+    code = this.dedent(code).trim();
+    return code;
+  }
+
+  private fallbackCopy(text: string, onSuccess: () => void): void {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', 'true');
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    textarea.setSelectionRange(0, textarea.value.length);
+    const copied = document.execCommand('copy');
+    document.body.removeChild(textarea);
+    if (copied) {
+      onSuccess();
+    }
+  }
+
+  /**
+   * Dedents a given string by removing common leading whitespace.
+   * @param str The input string to dedent.
+   * @returns The dedented string.
+   */
+  private dedent(str: string): string {
+    const lines = str.replace(/\t/g, '  ').split('\n');
+
+    while (lines.length && lines[0].trim() === '') lines.shift();
+    while (lines.length && lines[lines.length - 1].trim() === '') lines.pop();
+
+    const minIndent = Math.min(
+      ...lines
+        .filter(line => line.trim().length > 0)
+        .map(line => {
+          const match = /^(\s*)/.exec(line);
+          return match ? match[0].length : 0;
+        })
+    );
+
+    return lines.map(line => line.slice(minIndent)).join('\n');
+  }
+
+  private readonly addNumberLines = (str: string): string => {
+    const lines = str.split('\n');
+    const maxLength = lines.length.toString().length;
+
+    return lines
+      .map((line, index) => {
+        const lineNumber = (index + 1).toString().padStart(maxLength, ' ');
+        return `${lineNumber} | ${line}`;
+      })
+      .join('\n');
+  };
+}

package/src/lib/components/code-block/code-block.interface.ts

@@ -0,0 +1,28 @@
+import { CodeBlockBody } from './code-block.type';
+
+/**
+ * Configuration options for the code block component.
+ */
+export interface CodeBlockConfig {
+  id?: string;
+  header?: CodeBlockHeader;
+  body?: CodeBlockBody;
+  footer?: CodeBlockFooter;
+}
+
+/**
+ * Configuration options for the code block header.
+ */
+export interface CodeBlockHeader {
+  title?: string;
+  showCopy?: boolean;
+  copyLabel?: string;
+  copiedLabel?: string;
+}
+
+/**
+ * Configuration options for the code block footer.
+ */
+export interface CodeBlockFooter {
+  text?: string;
+}

package/src/lib/components/code-block/code-block.type.ts

@@ -0,0 +1,73 @@
+import { Type } from '@angular/core';
+import { XOR } from '../../types/common.types';
+
+export type THLJSLanguage =
+  | 'html'
+  | 'xml'
+  | 'xhtml'
+  | 'svg'
+  | 'css'
+  | 'scss'
+  | 'less'
+  | 'javascript'
+  | 'typescript'
+  | 'json'
+  | 'markdown'
+  | 'yaml'
+  | 'yml'
+  | 'php'
+  | 'java'
+  | 'python'
+  | 'ruby'
+  | 'c'
+  | 'cpp'
+  | 'csharp'
+  | 'go'
+  | 'rust'
+  | 'kotlin'
+  | 'perl'
+  | 'swift'
+  | 'dart'
+  | 'scala'
+  | 'haskell'
+  | 'erlang'
+  | 'bash'
+  | 'shell'
+  | 'powershell'
+  | 'docker'
+  | 'makefile'
+  | 'git'
+  | 'ini'
+  | 'toml'
+  | 'sql'
+  | 'graphql'
+  | 'json5'
+  | 'text'
+  | 'diff'
+  | 'http'
+  | 'nginx'
+  | 'apache'
+  | 'log'
+  | 'env';
+
+type TextContent = {
+  type: 'text';
+  content: string;
+  language?: THLJSLanguage;
+  highlightLines?: string;
+  hasNumberLine?: boolean;
+};
+
+type ComponentContent<
+  T = unknown,
+  I extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  type: 'component';
+  component: Type<T>;
+  inputs?: I;
+};
+
+export type CodeBlockBody<
+  T = unknown,
+  I extends Record<string, unknown> = Record<string, unknown>,
+> = XOR<TextContent, ComponentContent<T, I>>;

package/src/lib/components/decorative/sparkle-field/sparkle-field.component.html

@@ -0,0 +1,14 @@
+<div
+  class="frg-sparkle-field"
+  [style.--frg-sparkle-color]="color || null"
+>
+  <span
+    #sparkle
+    *ngFor="let sparkle of sparkles"
+    class="frg-sparkle"
+    [style.left.%]="sparkle.x"
+    [style.top.%]="sparkle.y"
+    [style.width.px]="sparkle.size"
+    [style.height.px]="sparkle.size"
+  ></span>
+</div>

package/src/lib/components/decorative/sparkle-field/sparkle-field.component.scss

@@ -0,0 +1,20 @@
+:host {
+  display: inline-block;
+}
+
+.frg-sparkle-field {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.frg-sparkle {
+  position: absolute;
+  border-radius: 999px;
+  background: var(--frg-sparkle-color, currentColor);
+  opacity: 0.6;
+  filter: blur(0.2px);
+  transform: translateZ(0);
+  will-change: transform, opacity;
+}

package/src/lib/components/decorative/sparkle-field/sparkle-field.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SparkleFieldComponent } from './sparkle-field.component';
+
+describe('SparkleFieldComponent', () => {
+  let fixture: ComponentFixture<SparkleFieldComponent>;
+  let component: SparkleFieldComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SparkleFieldComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SparkleFieldComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('renders the configured number of sparkles', () => {
+    component.count = 5;
+
+    fixture.detectChanges();
+
+    const sparkles = fixture.debugElement.queryAll(By.css('.frg-sparkle'));
+    expect(sparkles.length).toBe(5);
+  });
+
+  it('applies width and height styles to the field', () => {
+    component.width = 200;
+    component.height = 120;
+
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement as HTMLElement;
+
+    expect(host.style.width).toBe('200px');
+    expect(host.style.height).toBe('120px');
+  });
+});

package/src/lib/components/decorative/sparkle-field/sparkle-field.component.ts

@@ -0,0 +1,181 @@
+import { NgFor } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  QueryList,
+  SimpleChanges,
+  ViewChildren,
+} from '@angular/core';
+import { animate } from 'animejs';
+import { Subscription } from 'rxjs';
+
+interface Sparkle {
+  x: number;
+  y: number;
+  size: number;
+  delay: number;
+  duration: number;
+  driftX: number;
+  driftY: number;
+}
+
+@Component({
+  selector: 'frg-sparkle-field',
+  templateUrl: './sparkle-field.component.html',
+  styleUrl: './sparkle-field.component.scss',
+  imports: [NgFor],
+})
+export class SparkleFieldComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  @Input() width: number | string = 260;
+  @Input() height: number | string = 160;
+  @Input() count = 12;
+  @Input() minSize = 2;
+  @Input() maxSize = 6;
+  @Input() drift = 18;
+  @Input() minDuration = 2400;
+  @Input() maxDuration = 5200;
+  @Input() loop = true;
+  @Input() color: string | null = null;
+
+  sparkles: Sparkle[] = [];
+
+  @ViewChildren('sparkle')
+    sparkleRefs!: QueryList<ElementRef<HTMLSpanElement>>;
+
+  private sparkleAnimations: Array<ReturnType<typeof animate>> = [];
+  private sparkleChangesSub: Subscription | null = null;
+  private readonly fallbackWidth = 260;
+  private readonly fallbackHeight = 160;
+
+  @HostBinding('style.width') get hostWidth(): string {
+    return this.widthStyle;
+  }
+
+  @HostBinding('style.height') get hostHeight(): string {
+    return this.heightStyle;
+  }
+
+  @HostBinding('style.minWidth') get hostMinWidth(): string | null {
+    return this.needsMinSize(this.width) ? `${this.fallbackWidth}px` : null;
+  }
+
+  @HostBinding('style.minHeight') get hostMinHeight(): string | null {
+    return this.needsMinSize(this.height) ? `${this.fallbackHeight}px` : null;
+  }
+
+  ngOnInit(): void {
+    this.buildSparkles();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes['count'] ||
+      changes['minSize'] ||
+      changes['maxSize'] ||
+      changes['drift'] ||
+      changes['minDuration'] ||
+      changes['maxDuration'] ||
+      changes['loop']
+    ) {
+      this.buildSparkles();
+      this.restartAnimation();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.sparkleChangesSub = this.sparkleRefs.changes.subscribe(() =>
+      this.restartAnimation()
+    );
+    this.restartAnimation();
+  }
+
+  ngOnDestroy(): void {
+    this.sparkleAnimations.forEach((animation) => animation.pause());
+    this.sparkleChangesSub?.unsubscribe();
+  }
+
+  private buildSparkles(): void {
+    const count = Math.max(0, Math.floor(this.count));
+    const minSize = Math.min(this.minSize, this.maxSize);
+    const maxSize = Math.max(this.minSize, this.maxSize);
+    const minDuration = Math.min(this.minDuration, this.maxDuration);
+    const maxDuration = Math.max(this.minDuration, this.maxDuration);
+
+    this.sparkles = Array.from({ length: count }, () => ({
+      x: this.randomInRange(0, 100),
+      y: this.randomInRange(0, 100),
+      size: this.randomInRange(minSize, maxSize),
+      delay: this.randomInRange(0, 900),
+      duration: this.randomInRange(minDuration, maxDuration),
+      driftX: this.randomInRange(-this.drift, this.drift),
+      driftY: this.randomInRange(-this.drift, this.drift),
+    }));
+  }
+
+  private restartAnimation(): void {
+    if (!this.sparkleRefs || this.sparkleRefs.length === 0) {
+      return;
+    }
+
+    this.sparkleAnimations.forEach((animation) => animation.pause());
+    this.sparkleAnimations = [];
+
+    const targets = this.sparkleRefs.toArray();
+
+    targets.forEach((ref, i) => {
+      const sparkle = this.sparkles[i];
+      if (!sparkle) {
+        return;
+      }
+
+      const animation = animate(ref.nativeElement, {
+        translateX: [-sparkle.driftX, sparkle.driftX],
+        translateY: [-sparkle.driftY, sparkle.driftY],
+        scale: [0.7, 1.2],
+        opacity: [0.35, 1],
+        duration: sparkle.duration ?? 3000,
+        alternate: true,
+        loop: this.loop,
+        ease: 'inOut',
+      });
+
+      if (sparkle.delay > 0) {
+        animation.seek(sparkle.delay % (sparkle.duration || 3000));
+      }
+
+      this.sparkleAnimations.push(animation);
+    });
+  }
+
+  private randomInRange(min: number, max: number): number {
+    if (min === max) {
+      return min;
+    }
+    return min + Math.random() * (max - min);
+  }
+
+  get widthStyle(): string {
+    return this.formatSize(this.width);
+  }
+
+  get heightStyle(): string {
+    return this.formatSize(this.height);
+  }
+
+  private formatSize(value: number | string): string {
+    if (typeof value === 'number') {
+      return `${value}px`;
+    }
+    return value;
+  }
+
+  private needsMinSize(value: number | string): boolean {
+    return typeof value === 'string' && value.trim().endsWith('%');
+  }
+}