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

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

@@ -1,302 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-: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

@@ -1,38 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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('%');
-  }
-}