@mathstack/app-kit 1.1.1 → 2.0.3

package/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["libs/app-kit/tsconfig.(lib|spec).json"]
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "hsi-adk",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "hsi-adk",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Mathematica
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Mathematica
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,32 +1,36 @@
-# AppDevKit
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version
-19.2.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project app-dev-kit` to generate a new component. You
-can also use
-`ng generate directive|pipe|service|class|guard|interface|enum|module --project app-dev-kit`.
-
-> Note: Don't forget to add `--project app-dev-kit` or else it will be added to the default project
-> in your `angular.json` file.
-
-## Build
-
-Run `ng build app-dev-kit` to build the project. The build artifacts will be stored in the `dist`
-directory.
-
-## Publishing
-
-After building your library with `ng build app-dev-kit`, go to the dist folder `cd dist/app-dev-kit`
-and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test app-dev-kit` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the
-[Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# AppDevKit
+
+## Overview
+
+The app-kit is a library of miscellaneous utilities, styles, and components that are specific to
+neither the `@mathstack/ui` nor the `@mathstack/viz` libraries.
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version
+19.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project app-kit` to generate a new component. You can
+also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project app-kit`.
+
+> Note: Don't forget to add `--project app-kit` or else it will be added to the default project in
+> your `angular.json` file.
+
+## Build
+
+Run `ng build app-kit` to build the project. The build artifacts will be stored in the `dist`
+directory.
+
+## Publishing
+
+After building your library with `ng build app-kit`, go to the dist folder `cd dist/app-kit` and run
+`npm publish`.
+
+## Running unit tests
+
+Run `ng test app-kit` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the
+[Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/app-kit",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "input": "src/lib/baseline-styles/",
+      "glob": "**/*.scss",
+      "output": "baseline-styles"
+    },
+    "LICENSE"
+  ]
+}

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@mathstack/app-kit",
   "license": "MIT",
+  "scripts": {
+    "build": "ng build"
+  },
+  "version": "2.0.3",
   "peerDependencies": {
-    "@angular/common": "^19.2.2",
-    "@angular/core": "^19.2.2",
+    "@angular/common": ">=18.0.0 <22.0.0",
+    "@angular/core": ">=18.0.0 <22.0.0",
     "hast-util-from-parse5": "^8.0.1",
     "html-entities": "^2.5.2",
     "lodash-es": "^4.17.21",
@@ -26,16 +30,13 @@
   },
   "exports": {
     ".": {
-      "sass": "./baseline-styles/_index.scss",
-      "types": "./index.d.ts",
-      "default": "./fesm2022/mathstack-app-kit.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
+      "sass": "./baseline-styles/_index.scss"
     }
   },
   "sideEffects": false,
-  "version": "1.1.1",
-  "module": "fesm2022/mathstack-app-kit.mjs",
-  "typings": "index.d.ts"
-}
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mathematica-pub/frontend-shared-packages.git",
+    "directory": "libs/app-kit"
+  }
+}

package/project.json

@@ -0,0 +1,76 @@
+{
+  "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

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

@@ -0,0 +1,54 @@
+/* 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

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

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

package/{baseline-styles → src/lib/baseline-styles}/_css-reset.scss

@@ -1,118 +1,118 @@
-@mixin css-reset($default-font: var(--hsi-adk-font-sans), $color-text: #000) {
-  $system-font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  body {
-    min-height: 100vh;
-    width: 100vw;
-    overflow-x: hidden;
-    background: white;
-    font-family: $default-font, $system-font-family;
-    color: $color-text;
-    font-size: 1rem;
-  }
-
-  body,
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  figure,
-  blockquote,
-  dl,
-  dd {
-    margin: 0;
-  }
-
-  p {
-    line-height: 1.5;
-  }
-
-  button,
-  a {
-    cursor: pointer;
-    color: $color-text;
-  }
-
-  button {
-    border: none;
-    background: none;
-    padding: 0;
-    padding-block: 0;
-    padding-inline: 0;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  ul[role='list'],
-  ol[role='list'] {
-    list-style: none;
-  }
-
-  html:focus-within {
-    scroll-behavior: smooth;
-  }
-
-  a:not([class]) {
-    text-decoration-skip-ink: auto;
-  }
-
-  img,
-  picture {
-    max-width: 100%;
-    display: block;
-  }
-
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-  }
-
-  fieldset {
-    border: none;
-    padding: 0;
-    margin: 0;
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-    padding-block-start: 0;
-    padding-block-end: 0;
-    min-inline-size: 0px;
-  }
-
-  legend {
-    padding: 0;
-    margin: 0;
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-    border: none;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    html:focus-within {
-      scroll-behavior: auto;
-    }
-
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}
+@mixin css-reset($default-font: var(--hsi-adk-font-sans), $color-text: #000) {
+  $system-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    min-height: 100vh;
+    width: 100vw;
+    overflow-x: hidden;
+    background: white;
+    font-family: $default-font, $system-font-family;
+    color: $color-text;
+    font-size: 1rem;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  button,
+  a {
+    cursor: pointer;
+    color: $color-text;
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  ul[role='list'],
+  ol[role='list'] {
+    list-style: none;
+  }
+
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
+
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  img,
+  picture {
+    max-width: 100%;
+    display: block;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    min-inline-size: 0px;
+  }
+
+  legend {
+    padding: 0;
+    margin: 0;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    border: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/{baseline-styles → src/lib/baseline-styles}/_grid.scss

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