@droans/ha-components 0.1.0

package/.editorconfig

@@ -0,0 +1,8 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 2
+max_line_length = 120

package/.gitattributes

@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated

package/.github/workflows/publish.yaml

@@ -0,0 +1,24 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types:
+      - published
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm publish

package/.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "cSpell.words": [
+    "dimgray",
+    "Hacs",
+    "Hass",
+    "homeassistant"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.defaultFormatter": "vscode.typescript-language-features",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "tslint.configFile": "./tsconfig.json",
+  "tslint.packageManager": "yarn",
+  "tslint.suppressWhileTypeErrorsPresent": true,
+  "js/ts.implicitProjectConfig.target": "ES2021",
+  "typescript.reportStyleChecksAsWarnings": true,
+  "tslint.alwaysShowRuleFailuresAsWarnings": true
+}

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Gábor Tolnai
+
+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

@@ -0,0 +1,6 @@
+# ha-components
+
+A library of HA components. For reusability, none of the components are exported and must be redefined by the developer.
+
+Elements:
+  * marquee-text

package/eslint.config.mjs

@@ -0,0 +1,55 @@
+import eslint from "@eslint/js";
+import prettierConfig from "eslint-config-prettier";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+import wc from 'eslint-plugin-wc';
+const rootConfigFiles = [".prettierrc.js", "eslint.config.mjs"];
+
+export default tseslint.config(
+  { ignores: ["dist", "node_modules/*"] },
+  // apply default config
+  prettierConfig,
+  eslint.configs.recommended,
+  tseslint.configs.strictTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
+  {
+    plugins: {
+      wc: wc,
+    },
+    rules: {
+      ...wc.configs.recommended.rules,
+    }
+  },
+  // default language/parser options
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: {
+          allowDefaultProject: rootConfigFiles,
+        },
+        tsconfigRootDir: import.meta.dirname,
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  // individual rule overrides
+  {
+    rules: {
+      "no-console": "warn",
+      "@typescript-eslint/no-unnecessary-condition": "off",
+    },
+  },
+  // disable type checking for root config files
+  {
+    files: rootConfigFiles,
+    ...tseslint.configs.disableTypeChecked,
+    languageOptions: { sourceType: "commonjs" },
+    rules: {
+      ...tseslint.configs.disableTypeChecked.rules,
+      "@typescript-eslint/no-require-imports": "off",
+    },
+  }
+);

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@droans/ha-components",
+  "description": "Home Assistant Built-In Components re-exported for reuse",
+  "repository": "https://github.com/droans/mass-queue-types",
+  "author": "Michael Carroll",
+  "version": "0.1.0",
+  "keywords": [
+    "home-assistant",
+    "homeassistant",
+    "hass",
+    "hacs",
+    "lovelace",
+    "custom-cards",
+    "home",
+    "assistant"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "devDependencies": {
+    "@eslint/js": "9.39.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "eslint": "9.21.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-jest": "29.1.0",
+    "eslint-plugin-wc": "^3.0.1",
+    "prettier": "^3.6.2",
+    "rollup": "^4.53.2",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-serve": "^3.0.0",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.26.0"
+  },
+  "scripts": {
+    "build": "yarn rollup",
+    "prettier": "prettier ./packages --write",
+    "lint": "eslint packages/**/*.ts --max-warnings 0 --no-warn-ignored",
+    "full": "echo 'Generating TOC' && yarn docs && echo 'Running Prettier' && yarn prettier && echo 'Linting' && yarn lint",
+    "docs": "doctoc ./README.md --maxlevel 2"
+  },
+  "packageManager": "yarn@4.9.1",
+  "prettier": {
+    "printWidth": 80,
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+  },
+  "dependencies": {
+    "@droans/webawesome": "^3.0.0",
+    "@mdi/js": "^7.4.47",
+    "lit": "^3.3.2"
+  }
+}

package/packages/components/marquee-text.ts

@@ -0,0 +1,176 @@
+import {
+  type TemplateResult,
+  LitElement,
+  html,
+  css,
+  type PropertyValues,
+} from "lit";
+import { property, query } from "lit/decorators.js";
+
+export class MarqueeText extends LitElement {
+  @property({ type: Number }) speed = 15; // pixels per second
+
+  @property({ type: Number, attribute: "pause-duration" }) pauseDuration = 1000; // ms delay at ends
+
+  @property({ type: Boolean, attribute: "pause-on-hover" })
+  pauseOnHover = false;
+
+  private _direction: "left" | "right" = "left";
+
+  private _animationFrame?: number;
+
+  @query(".marquee-container")
+  private _container?: HTMLDivElement;
+
+  @query(".marquee-text")
+  private _textSpan?: HTMLSpanElement;
+
+  private _position = 0;
+
+  private _maxOffset = 0;
+
+  private _pauseTimeout?: number;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    setTimeout(
+      () => {
+        this._setupAnimation()
+      },
+      50
+    )
+    // this._setupAnimation();
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (changedProps.has("text")) {
+      this._setupAnimation();
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+    }
+    if (this._pauseTimeout) {
+      clearTimeout(this._pauseTimeout);
+      this._pauseTimeout = undefined;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        class="marquee-container"
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @touchstart=${this._handleMouseEnter}
+        @touchend=${this._handleMouseLeave}
+      >
+        <span class="marquee-text"><slot></slot></span>
+      </div>
+    `;
+  }
+
+  private _setupAnimation() {
+    if (!this._container || !this._textSpan) {
+      return;
+    }
+
+    this._position = 0;
+    this._direction = "left";
+    this._maxOffset = Math.max(
+      0,
+      this._textSpan.offsetWidth - this._container.offsetWidth
+    );
+    this._textSpan.style.transform = `translateX(0px)`;
+    if (this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+    }
+    if (this._pauseTimeout) {
+      clearTimeout(this._pauseTimeout);
+      this._pauseTimeout = undefined;
+    }
+    this._animate();
+  }
+
+  private _animate = () => {
+    if (!this._container || !this._textSpan) {
+      return;
+    }
+
+    const dt = 1 / 60; // ~16ms per frame
+    const pxPerFrame = this.speed * dt;
+    let reachedEnd = false;
+    if (this._direction === "left") {
+      this._position -= pxPerFrame;
+      if (this._position <= -this._maxOffset) {
+        this._position = -this._maxOffset;
+        this._direction = "right";
+        reachedEnd = true;
+      }
+    } else {
+      this._position += pxPerFrame;
+      if (this._position >= 0) {
+        this._position = 0;
+        this._direction = "left";
+        reachedEnd = true;
+      }
+    }
+    this._textSpan.style.transform = `translateX(${this._position.toString()}px)`;
+    if (reachedEnd) {
+      this._pauseTimeout = window.setTimeout(() => {
+        this._pauseTimeout = undefined;
+        this._animationFrame = requestAnimationFrame(this._animate);
+      }, this.pauseDuration);
+    } else {
+      this._animationFrame = requestAnimationFrame(this._animate);
+    }
+  };
+
+  private _handleMouseEnter = () => {
+    if (this.pauseOnHover && this._animationFrame) {
+      cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+    if (this.pauseOnHover && this._pauseTimeout) {
+      clearTimeout(this._pauseTimeout);
+      this._pauseTimeout = undefined;
+    }
+  }
+
+  private _handleMouseLeave = () => {
+    if (this.pauseOnHover && !this._animationFrame && !this._pauseTimeout) {
+      this._animate();
+    }
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .marquee-container {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      user-select: none;
+      cursor: default;
+    }
+
+    .marquee-text {
+      display: inline-block;
+      vertical-align: middle;
+      will-change: transform;
+      font-size: 1em;
+      pointer-events: none;
+    }
+  `;
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": ["es2021", "dom", "dom.iterable"],
+    "noEmit": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+  },
+  "include": ["packages"]
+}