@mathstack/app-kit 2.1.0 → 2.2.1

package/project.json

@@ -1,76 +0,0 @@
-{
-  "name": "app-kit",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "libs/app-kit/src",
-  "prefix": "adk",
-  "targets": {
-    "build": {
-      "executor": "@angular-devkit/build-angular:ng-packagr",
-      "options": {
-        "project": "libs/app-kit/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/app-kit/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "libs/app-kit/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production",
-      "outputs": ["{workspaceRoot}/dist/app-kit"]
-    },
-    "build-release": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "npx nx build app-kit"
-      }
-    },
-    "publish": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "cd ./dist/app-kit && npm publish --access public && git push --tags"
-      }
-    },
-    "github-release": {
-      "executor": "@jscutlery/semver:github",
-      "options": {
-        "tag": "{tag}",
-        "notes": "{notes}"
-      }
-    },
-    "test": {
-      "executor": "@angular-devkit/build-angular:karma",
-      "options": {
-        "tsConfig": "libs/app-kit/tsconfig.spec.json",
-        "polyfills": ["zone.js", "zone.js/testing"],
-        "browsers": "ChromeHeadlessNoSandbox",
-        "watch": false
-      }
-    },
-    "lint": {
-      "executor": "@angular-eslint/builder:lint",
-      "options": {
-        "lintFilePatterns": ["libs/app-kit/**/*.ts", "libs/app-kit/**/*.html"]
-      },
-      "outputs": ["{options.outputFile}"]
-    },
-    "create-changelog": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "touch libs/app-kit/CHANGELOG.md"
-      }
-    },
-    "version": {
-      "executor": "@jscutlery/semver:version",
-      "options": {
-        "preset": "angular",
-        "skipCommit": true,
-        "skipRootChangelog": true,
-        "postTargets": ["build-release", "publish", "github-release"],
-        "skipCommitTypes": ["build", "ci", "docs", "refactor", "style", "test"]
-      }
-    }
-  }
-}

package/src/lib/assets/assets-resource.ts

@@ -1,18 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { AdkAssetResponse } from './assets-service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AdkAssetsResource {
-  private http = inject(HttpClient);
-
-  getAsset(path: string, responseType: AdkAssetResponse): Observable<unknown> {
-    return this.http.get<unknown>(path, {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      responseType: responseType as any,
-    });
-  }
-}

package/src/lib/assets/assets-service.spec.ts

@@ -1,54 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { TestBed } from '@angular/core/testing';
-import { of } from 'rxjs';
-import { MainServiceStub } from '../core/testing/stubs/services/main.service.stub';
-import { AdkAssetsResource } from './assets-resource';
-import { AdkAssetResponse, AdkAssetsService } from './assets-service';
-
-describe('AssetsService', () => {
-  let service: AdkAssetsService;
-  let mainServiceStub: MainServiceStub;
-
-  beforeEach(() => {
-    mainServiceStub = new MainServiceStub();
-    TestBed.configureTestingModule({
-      providers: [
-        AdkAssetsService,
-        {
-          provide: AdkAssetsResource,
-          useValue: mainServiceStub.assetsResourceStub,
-        },
-      ],
-    });
-    service = TestBed.inject(AdkAssetsService);
-  });
-
-  describe('setAssetsPath()', () => {
-    it('should set the assets path', () => {
-      service.setAssetsPath('test/');
-      expect(service['assetsPath']).toBe('test/');
-    });
-  });
-
-  describe('getAsset()', () => {
-    beforeEach(() => {
-      spyOn(service as any, 'fetchAsset').and.returnValue(of('asset text'));
-    });
-    it('calls fetch asset if asset does not exist in assets object', (done) => {
-      service.getAsset('test', AdkAssetResponse.Text).subscribe(() => {
-        expect(service['fetchAsset']).toHaveBeenCalledOnceWith(
-          'test',
-          AdkAssetResponse.Text
-        );
-        done();
-      });
-    });
-    it('does not call fetch asset if asset exists in assets object', (done) => {
-      service['assets']['test'] = of('asset text');
-      service.getAsset('test', AdkAssetResponse.Text).subscribe(() => {
-        expect(service['fetchAsset']).not.toHaveBeenCalled();
-        done();
-      });
-    });
-  });
-});

package/src/lib/assets/assets-service.ts

@@ -1,73 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { csvParse } from 'd3';
-import { forkJoin, Observable } from 'rxjs';
-import { parse as yamlParse } from 'yaml';
-import { AdkAssetsResource } from './assets-resource';
-
-export enum AdkAssetResponse {
-  ArrayBuffer = 'arraybuffer',
-  Blob = 'blob',
-  Json = 'json',
-  Text = 'text',
-}
-
-@Injectable({ providedIn: 'root' })
-export class AdkAssetsService {
-  private assets: { [key: string]: Observable<unknown> } = {};
-  private assetsPath = 'assets/';
-
-  private resource = inject(AdkAssetsResource);
-
-  setAssetsPath(path: string): void {
-    this.assetsPath = path;
-  }
-
-  /**
-   * Loads an asset from the assets folder.
-   *
-   * @param assetName The path to the asset from assets/. Should not include leading slash.
-   * @returns An observable that emits the asset data.
-   */
-  getAsset(
-    assetName: string,
-    responseType: AdkAssetResponse
-  ): Observable<unknown> {
-    if (!this.assets[assetName]) {
-      this.assets[assetName] = this.fetchAsset(assetName, responseType);
-    }
-    return this.assets[assetName];
-  }
-
-  private fetchAsset(
-    assetName: string,
-    responseType: AdkAssetResponse
-  ): Observable<unknown> {
-    return this.resource.getAsset(
-      `${this.assetsPath}${assetName}`,
-      responseType
-    );
-  }
-
-  /**
-   * Loads multiple assets concurrently.
-   *
-   * @param assetNames An array of asset names to load.
-   * @returns An observable that emits an array of asset data.
-   */
-  getAssets(
-    assetNames: string[],
-    responseType: AdkAssetResponse
-  ): Observable<unknown[]> {
-    return forkJoin(
-      assetNames.map((assetName) => this.getAsset(assetName, responseType))
-    );
-  }
-
-  parseCsv<T>(str: string): T[] {
-    return csvParse(str) as unknown as T[];
-  }
-
-  parseYaml<T>(str: string): T {
-    return yamlParse(str) as T;
-  }
-}

package/src/lib/assets/index.ts

@@ -1,2 +0,0 @@
-export * from './assets-resource';
-export * from './assets-service';

package/src/lib/content-parsing/index.ts

@@ -1,2 +0,0 @@
-export * from './markdown-parser';
-export * from './shiki-highlighter';

package/src/lib/content-parsing/markdown-parser.ts

@@ -1,197 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeRaw from 'rehype-raw';
-import rehypeSlug from 'rehype-slug';
-import rehypeStringify from 'rehype-stringify';
-import remarkGfm from 'remark-gfm';
-import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
-import { forkJoin, from, map, mergeMap, Observable, of, switchMap } from 'rxjs';
-import { BundledLanguage } from 'shiki/langs';
-import { BundledTheme } from 'shiki/themes';
-import { HighlighterGeneric } from 'shiki/types.mjs';
-import { unified } from 'unified';
-import { deepMerge } from '../core/utilities/deep-merge';
-import { AdkShikiHighlighter, ShikiTheme } from './shiki-highlighter';
-
-export interface AdkParsedContentSection<Content = string> {
-  type: string;
-  content: Content;
-  html?: SafeHtml;
-  headers: { id: string; text: string; level: number }[];
-}
-
-export interface AdkMarkdownParsingOptions {
-  highlighter?: AdkShikiHighlighterOptions;
-  gfm?: boolean;
-  headingIds?: boolean;
-  headingFragmentLinks?: AdkHeadingFragmentLinkOptions;
-}
-
-export interface AdkShikiHighlighterOptions {
-  highlighter?: HighlighterGeneric<BundledLanguage, BundledTheme>;
-  theme?: ShikiTheme;
-  type?: 'html' | 'markdown';
-  ignoreUnknownLanguage?: boolean;
-}
-
-export interface AdkHeadingFragmentLinkOptions {
-  createLinks?: boolean;
-  behavior?: 'append' | 'prepend' | 'wrap' | 'before' | 'after';
-}
-
-const DEFAULT_HIGHLIGHTER_OPTIONS: AdkShikiHighlighterOptions = {
-  highlighter: undefined,
-  theme: ShikiTheme.GitHubLight,
-  type: 'markdown',
-  ignoreUnknownLanguage: true,
-};
-
-const DEFAULT_PARSING_OPTIONS: AdkMarkdownParsingOptions = {
-  gfm: true,
-  headingIds: true,
-  headingFragmentLinks: { createLinks: false },
-  highlighter: DEFAULT_HIGHLIGHTER_OPTIONS,
-};
-
-@Injectable()
-export class AdkMarkdownParser {
-  parser: typeof unified;
-
-  private sanitizer = inject(DomSanitizer);
-  private shikiHighlighter = inject(AdkShikiHighlighter);
-
-  constructor() {
-    this.parser = unified;
-  }
-
-  parse(
-    markdown: string,
-    options?: AdkMarkdownParsingOptions
-  ): Observable<AdkParsedContentSection[]> {
-    const mergedOptions = deepMerge(DEFAULT_PARSING_OPTIONS, options || {});
-
-    return of(mergedOptions).pipe(
-      mergeMap((_options) => {
-        if (_options.highlighter && !_options.highlighter.highlighter) {
-          return from(this.shikiHighlighter.getHighlighter()).pipe(
-            map((highlighter) => ({
-              ..._options,
-              highlighter: {
-                ..._options.highlighter,
-                highlighter,
-              },
-            }))
-          );
-        } else {
-          return of(_options);
-        }
-      }),
-      switchMap((_options) => {
-        const sections = this.getSections(markdown);
-        const parsedSections$ = sections.map((section) => {
-          return this.parseSection(section, _options);
-        });
-        return forkJoin(parsedSections$);
-      })
-    );
-  }
-
-  private getSections(markdown: string): AdkParsedContentSection[] {
-    const sections: AdkParsedContentSection[] = [];
-    let currentMarkdown = '';
-
-    const lines = markdown.split('\n');
-
-    for (const line of lines) {
-      currentMarkdown += line + '\n';
-    }
-
-    // Add any remaining markdown
-    if (currentMarkdown.trim()) {
-      sections.push({
-        type: 'markdown',
-        content: currentMarkdown,
-        html: undefined,
-        headers: this.getHeaders(currentMarkdown),
-      });
-    }
-
-    return sections;
-  }
-
-  private parseSection(
-    section: AdkParsedContentSection,
-    options: AdkMarkdownParsingOptions
-  ): Observable<AdkParsedContentSection> {
-    const parsedContent$ = from(
-      unified()
-        .use(remarkParse)
-        .use(options.gfm ? remarkGfm : undefined)
-        .use(
-          options.highlighter && options.highlighter.type === 'markdown'
-            ? this.shikiHighlighter.remarkHighlight
-            : undefined,
-          options.highlighter
-        )
-        .use(remarkRehype, { allowDangerousHtml: true })
-        .use(rehypeRaw)
-        .use(options.headingIds ? rehypeSlug : undefined)
-        .use(
-          options.headingFragmentLinks ? rehypeAutolinkHeadings : undefined,
-          { behavior: options.headingFragmentLinks?.behavior }
-        )
-        .use(rehypeStringify)
-        .process(section.content)
-        .then((file) => String(file))
-    );
-
-    return parsedContent$.pipe(
-      map((parsedContent) => {
-        const toReturn = {
-          ...section,
-          html: this.sanitizer.bypassSecurityTrustHtml(parsedContent),
-        };
-        return toReturn;
-      })
-    );
-  }
-
-  getHeaders(markdown: string): { id: string; text: string; level: number }[] {
-    const headerRegex =
-      /^(#{1,6})\s*(.+)$|<h([1-6])(?:\s+[^>]*)?>(.*?)<\/h[1-6]>/gm;
-    const headers: { id: string; text: string; level: number }[] = [];
-    let match;
-
-    while ((match = headerRegex.exec(markdown)) !== null) {
-      let level: number;
-      let text: string;
-
-      if (match[1]) {
-        // Markdown header, e.g., ## Heading
-        level = match[1].length;
-        text = match[2].trim();
-      } else {
-        // HTML header, e.g., <h2>Heading</h2>
-        level = parseInt(match[3], 10);
-        text = match[4].trim();
-      }
-
-      const id = text
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^\w-]+/g, '');
-      headers.push({ id, text, level });
-    }
-    return headers;
-  }
-
-  parseComponent(content: string): { name: string; pathTo: string } {
-    const cleanedLine = content.trim().slice(2, -2).trim();
-    const [nameKV, pathToKV] = cleanedLine.split(',');
-    const name = nameKV.split(':')[1]?.trim();
-    const pathTo = pathToKV.split(':')[1]?.trim();
-    return { name, pathTo };
-  }
-}

package/src/lib/content-parsing/shiki-highlighter.ts

@@ -1,219 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Root } from 'hast';
-import { fromParse5 } from 'hast-util-from-parse5';
-import { parse } from 'parse5';
-import { createHighlighter } from 'shiki/index.mjs';
-import { BundledLanguage } from 'shiki/langs';
-import { BundledTheme } from 'shiki/themes';
-import { HighlighterGeneric } from 'shiki/types.mjs';
-import { visit } from 'unist-util-visit';
-import { AdkShikiHighlighterOptions } from './markdown-parser';
-
-export const defaultHighlighterLangs = [
-  'json',
-  'ts',
-  'js',
-  'html',
-  'css',
-  'scss',
-  'yaml',
-  'angular-html',
-  'angular-ts',
-  'mermaid',
-  'bash',
-];
-
-export enum ShikiTheme {
-  Andromeeda = 'andromeeda',
-  AuroraX = 'aurora-x',
-  AyuDark = 'ayu-dark',
-  CatppuccinFrappe = 'catppuccin-frappe',
-  CatppuccinLatte = 'catppuccin-latte',
-  CatppuccinMacchiato = 'catppuccin-macchiato',
-  CatppuccinMocha = 'catppuccin-mocha',
-  DarkPlus = 'dark-plus',
-  DraculaTheme = 'dracula',
-  DraculaThemeSoft = 'dracula-soft',
-  EverforestDark = 'everforest-dark',
-  EverforestLight = 'everforest-light',
-  GitHubDark = 'github-dark',
-  GitHubDarkDefault = 'github-dark-default',
-  GitHubDarkDimmed = 'github-dark-dimmed',
-  GitHubDarkHighContrast = 'github-dark-high-contrast',
-  GitHubLight = 'github-light',
-  GitHubLightDefault = 'github-light-default',
-  GitHubLightHighContrast = 'github-light-high-contrast',
-  Houston = 'houston',
-  LaserWave = 'laserwave',
-  LightPlus = 'light-plus',
-  MaterialTheme = 'material-theme',
-  MaterialThemeDarker = 'material-theme-darker',
-  MaterialThemeLighter = 'material-theme-lighter',
-  MaterialThemeOcean = 'material-theme-ocean',
-  MaterialThemePalenight = 'material-theme-palenight',
-  MinDark = 'min-dark',
-  MinLight = 'min-light',
-  Monokai = 'monokai',
-  NightOwl = 'night-owl',
-  Nord = 'nord',
-  OneDarkPro = 'one-dark-pro',
-  OneLight = 'one-light',
-  Plastic = 'plastic',
-  Poimandres = 'poimandres',
-  Red = 'red',
-  RosePine = 'rose-pine',
-  RosePineDawn = 'rose-pine-dawn',
-  RosePineMoon = 'rose-pine-moon',
-  SlackDark = 'slack-dark',
-  SlackOchin = 'slack-ochin',
-  SnazzyLight = 'snazzy-light',
-  SolarizedDark = 'solarized-dark',
-  SolarizedLight = 'solarized-light',
-  Synthwave84 = 'synthwave-84',
-  TokyoNight = 'tokyo-night',
-  Vesper = 'vesper',
-  VitesseBlack = 'vitesse-black',
-  VitesseDark = 'vitesse-dark',
-  VitesseLight = 'vitesse-light',
-}
-
-const MISSING_HIGHLIGHTER = `Please provide a \`shiki\` highlighter instance via \`options\`.`;
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AdkShikiHighlighter {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private highlighterPromise: Promise<
-    HighlighterGeneric<BundledLanguage, BundledTheme>
-  > | null = null;
-
-  /**
-   * Initialize the highlighter. This should only be called one in an application.
-   *
-   * @param themes an array of any Shiki themes you may want to use anywhere in the app. You can control which theme for your particular parsing by passing the theme name to the actual parsing function.
-   *
-   * @returns void
-   */
-  async initialize(
-    themes: ShikiTheme[],
-    langs: string[] = defaultHighlighterLangs
-  ): Promise<void> {
-    if (!this.highlighterPromise) {
-      this.highlighterPromise = createHighlighter({
-        langs,
-        themes: themes.length ? themes : [ShikiTheme.GitHubLight],
-      });
-    }
-    await this.highlighterPromise;
-  }
-
-  async getHighlighter(): Promise<
-    HighlighterGeneric<BundledLanguage, BundledTheme>
-  > {
-    if (!this.highlighterPromise) {
-      throw new Error(
-        'Highlighter is not initialized. Please call initialize() once in your application first.'
-      );
-    }
-    return this.highlighterPromise;
-  }
-
-  remarkHighlight(options: AdkShikiHighlighterOptions): (tree: Root) => void {
-    const highlighter = options.highlighter;
-    if (!options.highlighter) {
-      throw new Error(MISSING_HIGHLIGHTER);
-    }
-    const loadedLanguages = highlighter.getLoadedLanguages();
-    const ignoreUnknownLanguage =
-      options.ignoreUnknownLanguage === undefined
-        ? true
-        : options.ignoreUnknownLanguage;
-
-    const visitor = (node) => {
-      if (!loadedLanguages.includes(node.lang)) {
-        if (ignoreUnknownLanguage) {
-          node.lang = null;
-        } else {
-          return;
-        }
-      }
-
-      const highlighted = highlighter.codeToHtml(node.value, {
-        lang: node.lang,
-        theme: options.theme,
-      });
-
-      node.type = 'html';
-      node.value = highlighted;
-    };
-
-    const transformer = (tree: Root) => {
-      visit(tree, 'code', visitor);
-    };
-
-    return transformer;
-  }
-
-  rehypeHighlight(options: AdkShikiHighlighterOptions): (tree: Root) => void {
-    const highlighter = options.highlighter;
-    if (!options.highlighter) {
-      throw new Error(MISSING_HIGHLIGHTER);
-    }
-
-    const visitor = (node, _index, parent) => {
-      if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
-        return;
-      }
-
-      const [langClass] = node.properties.className;
-      const lang = langClass.replace('language-', '');
-
-      if (highlighter.getLoadedLanguages().includes(lang)) {
-        const code = node.children[0]?.value;
-        if (!code) {
-          return;
-        }
-        const highlighted = highlighter.codeToHtml(code, {
-          lang,
-          theme: options.theme,
-        });
-        const parsed = parse(highlighted);
-        const hastTree = fromParse5(parsed);
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const content = (hastTree as any).children[0].children[1].children[0]
-          .children[0];
-
-        content.properties.class = ['shiki', 'shiki-' + lang, langClass];
-
-        node.properties = content.properties;
-        node.children = content.children;
-      }
-    };
-
-    const transformer = (tree: Root) => {
-      visit(tree, 'element', visitor);
-    };
-
-    return transformer;
-  }
-
-  getLanguage(node): string {
-    const dataLanguage = node.properties.dataLanguage;
-
-    if (dataLanguage != null) {
-      return dataLanguage;
-    }
-
-    const className = node.properties.className || [];
-
-    for (const classListItem of className) {
-      if (classListItem.slice(0, 9) === 'language-') {
-        return classListItem.slice(9).toLowerCase();
-      }
-    }
-
-    return null;
-  }
-}

package/src/lib/core/scss/_colors.scss

@@ -1,37 +0,0 @@
-$primary-0: var(--hsi-adk-color-primary-0);
-$primary-5: var(--hsi-adk-color-primary-5);
-$primary-10: var(--hsi-adk-color-primary-10);
-$primary-15: var(--hsi-adk-color-primary-15);
-$primary-20: var(--hsi-adk-color-primary-20);
-$primary-25: var(--hsi-adk-color-primary-25);
-$primary-30: var(--hsi-adk-color-primary-30);
-$primary-35: var(--hsi-adk-color-primary-35);
-$primary-40: var(--hsi-adk-color-primary-40);
-$primary-50: var(--hsi-adk-color-primary-50);
-$primary-60: var(--hsi-adk-color-primary-60);
-$primary-70: var(--hsi-adk-color-primary-70);
-$primary-80: var(--hsi-adk-color-primary-80);
-$primary-90: var(--hsi-adk-color-primary-90);
-$primary-95: var(--hsi-adk-color-primary-95);
-$primary-98: var(--hsi-adk-color-primary-98);
-$primary-99: var(--hsi-adk-color-primary-99);
-$primary-100: var(--hsi-adk-color-primary-100);
-
-$muted-primary-0: var(--hsi-adk-color-muted-primary-0);
-$muted-primary-5: var(--hsi-adk-color-muted-primary-5);
-$muted-primary-10: var(--hsi-adk-color-muted-primary-10);
-$muted-primary-15: var(--hsi-adk-color-muted-primary-15);
-$muted-primary-20: var(--hsi-adk-color-muted-primary-20);
-$muted-primary-25: var(--hsi-adk-color-muted-primary-25);
-$muted-primary-30: var(--hsi-adk-color-muted-primary-30);
-$muted-primary-35: var(--hsi-adk-color-muted-primary-35);
-$muted-primary-40: var(--hsi-adk-color-muted-primary-40);
-$muted-primary-50: var(--hsi-adk-color-muted-primary-50);
-$muted-primary-60: var(--hsi-adk-color-muted-primary-60);
-$muted-primary-70: var(--hsi-adk-color-muted-primary-70);
-$muted-primary-80: var(--hsi-adk-color-muted-primary-80);
-$muted-primary-90: var(--hsi-adk-color-muted-primary-90);
-$muted-primary-95: var(--hsi-adk-color-muted-primary-95);
-$muted-primary-98: var(--hsi-adk-color-muted-primary-98);
-$muted-primary-99: var(--hsi-adk-color-muted-primary-99);
-$muted-primary-100: var(--hsi-adk-color-muted-primary-100);

package/src/lib/core/scss/_functions.scss

@@ -1,4 +0,0 @@
-@function grid($number) {
-  $grid: 0.25rem;
-  @return $number * $grid;
-}

package/src/lib/core/scss/_placeholders.scss

@@ -1 +0,0 @@
-@forward '../../baseline-styles/typography';