@inglorious/logo 1.0.0 → 2.0.1

package/LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2025 Inglorious Coderz Srl.
+
+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,71 @@
+# @inglorious/logo
+
+The Inglorious Logo component — a small, dependency-light package that provides the 3D logo render and interactive handlers for Inglorious Web.
+
+---
+
+## Install
+
+Add the package to your project:
+
+```bash
+pnpm add @inglorious/logo
+```
+
+---
+
+## Usage
+
+Import the package and its stylesheet, and (optionally) the types for TypeScript.
+
+Then, register the `logo` type in your store, create an entity of that type, and use `api.render(entityId)` inside your templates (see the [`web-logo`](https://github.com/IngloriousCoderz/inglorious-forge/tree/main/examples/apps/web-logo) demo app).
+
+```js
+import { createStore } from "@inglorious/web"
+import { logo } from "@inglorious/logo"
+import "@inglorious/logo/style.css"
+
+const entities = {
+  logo: {
+    type: "logo",
+    size: 256,
+    faces: [
+      { image: "I", reverse: false, eye: true },
+      { image: "W", reverse: false, eye: false },
+    ],
+    isInteractive: false,
+    isScrollPrevented: true,
+  },
+}
+
+const store = createStore({
+  types: { logo },
+  entities,
+})
+
+// app render function receives `api` from mount()
+const app = {
+  render(api) {
+    return api.render("logo")
+  },
+}
+
+// TypeScript: import the entity type if you want to annotate entity shapes
+// import type { LogoEntity } from "@inglorious/logo"
+```
+
+---
+
+## License
+
+**MIT License - Free and open source**
+
+Created by [Matteo Antony Mistretta](https://github.com/IngloriousCoderz)
+
+You're free to use, modify, and distribute this software. See [LICENSE](./LICENSE) for details.
+
+---
+
+## Contributing
+
+Contributions welcome! Please read our [Contributing Guidelines](../../CONTRIBUTING.md) first.

package/package.json

@@ -1,51 +1,61 @@
 {
   "name": "@inglorious/logo",
-  "version": "1.0.0",
-  "private": false,
-  "license": "SEE LICENSE IN LICENSE.md",
-  "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://www.ingloriouscoderz.it)",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "source": "src/index.jsx",
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "version": "2.0.1",
+  "description": "The Inglorious Coderz logo, remade to be compatible with Inglorious Web.",
+  "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IngloriousCoderz/inglorious-forge.git",
+    "directory": "packages/logo"
+  },
+  "bugs": {
+    "url": "https://github.com/IngloriousCoderz/inglorious-forge/issues"
+  },
+  "keywords": [
+    "inglorious",
+    "inglorious-logo",
+    "logo",
+    "svg",
+    "lit-html",
+    "inglorious-web",
+    "ui",
+    "interactive"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./style.css": {
+      "import": "./src/style.css"
+    }
   },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+  "files": [
+    "src",
+    "types"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@inglorious/web": "2.4.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-interactions": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/addon-onboarding": "1.0.8",
-    "@storybook/blocks": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-vite": "7.4.6",
-    "@storybook/testing-library": "0.2.2",
-    "babel-loader": "^9.1.3",
-    "eslint": "^8.51.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "prop-types": "15.8.1",
-    "rimraf": "^5.0.5",
-    "storybook": "7.4.6",
-    "vite-plugin-svgr": "^4.1.0",
-    "vitest": "^0.34.6"
+    "prettier": "^3.6.2",
+    "vite": "^7.1.3",
+    "vitest": "^4.0.15",
+    "@inglorious/eslint-config": "1.1.1"
+  },
+  "engines": {
+    "node": ">= 22"
   },
+  "types": "types/index.d.ts",
   "scripts": {
-    "lint": "eslint src --fix --ext .js,.jsx",
-    "test": "vitest",
-    "coverage": "vitest run --coverage",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "babel src -d dist --copy-files",
-    "prepublish": "rimraf dist && npm run build"
+    "format": "prettier --write '**/*.{js,jsx}'",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "test:watch": "vitest",
+    "test": "vitest run"
   }
 }

package/src/assets/faces/index.js

@@ -0,0 +1,55 @@
+import A from "./A.svg"
+import B from "./B.svg"
+import C from "./C.svg"
+import D from "./D.svg"
+import E from "./E.svg"
+import F from "./F.svg"
+import G from "./G.svg"
+import H from "./H.svg"
+import I from "./I.svg"
+import J from "./J.svg"
+import K from "./K.svg"
+import L from "./L.svg"
+import M from "./M.svg"
+import N from "./N.svg"
+import O from "./O.svg"
+import P from "./P.svg"
+import Q from "./Q.svg"
+import R from "./R.svg"
+import S from "./S.svg"
+import T from "./T.svg"
+import U from "./U.svg"
+import V from "./V.svg"
+import W from "./W.svg"
+import X from "./X.svg"
+import Y from "./Y.svg"
+import Z from "./Z.svg"
+
+export {
+  A,
+  B,
+  C,
+  D,
+  E,
+  F,
+  G,
+  H,
+  I,
+  J,
+  K,
+  L,
+  M,
+  N,
+  O,
+  P,
+  Q,
+  R,
+  S,
+  T,
+  U,
+  V,
+  W,
+  X,
+  Y,
+  Z,
+}

package/src/handlers.js

@@ -0,0 +1,99 @@
+/**
+ * @typedef {import("./render").LogoEntity} LogoEntity
+ *
+ * @typedef {Object} Api
+ * @property {(id: string) => LogoEntity} getEntity
+ * @property {(topic: string, payload: any) => void} notify
+ */
+import { closestAncestor, isTouchDevice, saturate } from "./utils"
+
+const MAX_HEAD_TILT_X = 400
+const MAX_HEAD_TILT_Y = 400
+const HALF = 0.5
+const FIRST_ITEM = 0
+
+const eventType = isTouchDevice() ? "touchmove" : "mousemove"
+let moveListener = null
+
+export const logo = {
+  /**
+   * Initialize interactivity for the given entity.
+   * @param {LogoEntity} entity
+   * @param {string} id
+   * @param {Api} api
+   */
+  create(entity, id, api) {
+    if (id !== entity.id) return
+
+    if (!entity.isInteractive) {
+      return
+    }
+
+    startInteraction(entity, api)
+  },
+
+  /**
+   * Update the entity head tilt coordinates.
+   * @param {LogoEntity} entity
+   * @param {{x:number,y:number}} payload
+   */
+  coordsChange(entity, { x, y }) {
+    entity.x = x
+    entity.y = y
+  },
+
+  /**
+   * Cleanup listeners when the entity is destroyed.
+   * @param {LogoEntity} entity
+   * @param {string} id
+   */
+  destroy(entity, id) {
+    if (id !== entity.id) return
+
+    stopInteraction()
+  },
+}
+
+export function startInteraction(entity, api) {
+  moveListener = createMoveListener(entity.id, api)
+  document.addEventListener(eventType, moveListener, {
+    passive: !entity.isScrollPrevented,
+  })
+}
+
+export function stopInteraction() {
+  document.removeEventListener(eventType, moveListener)
+}
+
+/**
+ * Create the move listener used by `create` / `fieldChange`.
+ * The listener calculates the position of the pointer relative to
+ * the element center and notifies the entity's `coordsChange`.
+ *
+ * @param {string} entityId
+ * @param {Api} api
+ * @returns {(event:MouseEvent|Touch) => void}
+ */
+function createMoveListener(entityId, api) {
+  return (event) => {
+    const { left, top, width, height } = event.target.getBoundingClientRect()
+
+    const center = {
+      x: window.scrollX + left + width * HALF,
+      y: window.scrollY + top + height * HALF,
+    }
+
+    const { target, pageX, pageY } =
+      eventType === "touchmove" ? event.touches[FIRST_ITEM] : event
+
+    const entity = api.getEntity(entityId)
+    if (entity.isScrollPrevented && closestAncestor(target, "logo")) {
+      event.preventDefault()
+    }
+
+    api.notify(`#${entityId}:coordsChange`, {
+      x: saturate(pageX - center.x, MAX_HEAD_TILT_X),
+      y: saturate(pageY - center.y, MAX_HEAD_TILT_Y),
+    })
+  }
+}

package/src/index.js

@@ -0,0 +1,6 @@
+import { logo as logic } from "./handlers"
+import { render } from "./render"
+
+export const logo = { ...logic, render }
+
+export { startInteraction, stopInteraction } from "./handlers"

package/src/render.js

@@ -0,0 +1,80 @@
+/**
+ * @typedef {Object} FaceSpec
+ * @property {string} image - svg key (A..Z)
+ * @property {boolean} [reverse] - whether the face image should be flipped horizontally
+ * @property {boolean} [eye] - whether to render the small eye asset on the face
+ *
+ * @typedef {Object} LogoEntity
+ * @property {string} id
+ * @property {number} size
+ * @property {number} x
+ * @property {number} y
+ * @property {[FaceSpec,FaceSpec]} faces - tuple: [leftFace, rightFace]
+ * @property {boolean} [isInteractive]
+ * @property {boolean} [isScrollPrevented]
+ */
+
+import { html, styleMap, when } from "@inglorious/web"
+
+import eye from "./assets/eye.svg"
+import * as faces from "./assets/faces"
+
+const MINUS_FORTY_DEGREES = -0.6981
+const MINUS_FORTY_FIVE_DEGREES = -0.7854
+const DEFAULT_SIZE = 256
+const DEFAULT_COORDS = 0
+const STEP = 0.001
+const HALF = 0.5
+
+/**
+ * Render the logo template for a `LogoEntity`.
+ * The returned value is a lit-html `TemplateResult` produced by `html`.
+ *
+ * @param {LogoEntity} entity
+ * @returns {import('lit-html').TemplateResult}
+ */
+export function render(entity) {
+  const { size = DEFAULT_SIZE, x = DEFAULT_COORDS, y = DEFAULT_COORDS } = entity
+  const [left, right] = entity.faces
+
+  return html`<div
+    class="iw-logo"
+    style=${styleMap({
+      "--size": `${size}px`,
+      "--transform": `scaleY(1.2) translateZ(-${size}px) rotateX(${
+        MINUS_FORTY_DEGREES - STEP * y
+      }rad)
+          rotateY(${MINUS_FORTY_FIVE_DEGREES + STEP * x}rad)`,
+      "--z-translation": `${size * HALF}px`,
+      "--left-face-flip": left.reverse ? "rotateY(180deg)" : "none",
+      "--right-face-flip": right.reverse ? "rotateY(180deg)" : "none",
+    })}
+  >
+    <div class="iw-logo-cube">
+      <div class="iw-logo-cube-face left">
+        <img src=${faces[left.image]} alt=${left.image} />
+        ${when(
+          left.eye,
+          () =>
+            html`<img
+              class="iw-logo-cube-face-eye"
+              src=${eye}
+              alt="left eye"
+            />`,
+        )}
+      </div>
+      <div class="iw-logo-cube-face right">
+        <img src=${faces[right.image]} alt=${right.image} />
+        ${when(
+          right.eye,
+          () =>
+            html`<img
+              class="iw-logo-cube-face-eye"
+              src=${eye}
+              alt="right eye"
+            />`,
+        )}
+      </div>
+    </div>
+  </div>`
+}

package/src/style.css

@@ -0,0 +1,44 @@
+.iw-logo {
+  width: var(--size);
+  height: var(--size);
+  perspective: var(--size);
+  user-select: none;
+
+  > .iw-logo-cube {
+    height: var(--size);
+    transform-style: preserve-3d;
+    transform: var(--transform);
+    transition: ease-out 0.2s;
+
+    > .iw-logo-cube-face {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transform-origin: bottom center;
+
+      > img {
+        position: absolute;
+      }
+
+      &.left {
+        transform: rotateY(0deg) translateZ(var(--z-translation)) skew(12deg);
+
+        > img {
+          transform: var(--left-face-flip);
+        }
+      }
+
+      &.right {
+        transform: rotateY(90deg) translateZ(var(--z-translation)) skew(-12deg);
+
+        > img {
+          transform: var(--right-face-flip);
+        }
+
+        > .iw-logo-cube-face-eye {
+          transform: rotateY(180deg);
+        }
+      }
+    }
+  }
+}

package/src/utils.js

@@ -0,0 +1,42 @@
+export function isTouchDevice() {
+  if (
+    "ontouchstart" in window ||
+    (window.DocumentTouch && document instanceof window.DocumentTouch)
+  ) {
+    return true
+  }
+
+  // include the 'heartz' as a way to have a non matching mediaQuery to help terminate the join
+  // https://git.io/vznFH
+  const prefixes = " -webkit- -moz- -o- -ms- ".split(" ")
+  var query = ["(", prefixes.join("touch-enabled),("), "heartz", ")"].join("")
+  return window.matchMedia(query).matches
+}
+
+export function saturate(num, limit) {
+  if (num < -limit) return -limit
+  if (num > limit) return limit
+  return num
+}
+
+export function closestAncestor(el, className) {
+  const limit = 4
+  let i = 0
+  let closest = el
+  while (closest && i < limit) {
+    if (
+      closest.className == null ||
+      typeof closest.className.split !== "function"
+    ) {
+      return null
+    }
+
+    const classes = closest.className.split(" ")
+    if (classes.includes(className)) {
+      return closest
+    }
+
+    closest = closest.parentNode
+    i++
+  }
+}

package/src/utils.test.js

@@ -0,0 +1,46 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it } from "vitest"
+
+import { closestAncestor, saturate } from "./utils.js"
+
+describe("utils", () => {
+  describe("saturate", () => {
+    it("clamps positive values to the limit", () => {
+      expect(saturate(10, 5)).toBe(5)
+    })
+
+    it("clamps negative values to -limit", () => {
+      expect(saturate(-10, 5)).toBe(-5)
+    })
+
+    it("returns value when within limits", () => {
+      expect(saturate(3, 5)).toBe(3)
+    })
+  })
+
+  describe("closestAncestor", () => {
+    it("finds an ancestor by class name up to the search depth", () => {
+      const root = document.createElement("div")
+      root.className = "logo"
+
+      const child1 = document.createElement("div")
+      const child2 = document.createElement("div")
+      const leaf = document.createElement("span")
+
+      root.appendChild(child1)
+      child1.appendChild(child2)
+      child2.appendChild(leaf)
+
+      const found = closestAncestor(leaf, "logo")
+      expect(found).toBe(root)
+    })
+
+    it("returns null when ancestor not found or invalid className", () => {
+      const el = document.createElement("div")
+      const result = closestAncestor(el, "non-existent")
+      expect(result).toBeUndefined()
+    })
+  })
+})

package/types/index.d.ts

@@ -0,0 +1,45 @@
+export interface Face {
+  /** name of the svg */
+  image:
+    | "A"
+    | "B"
+    | "C"
+    | "D"
+    | "E"
+    | "F"
+    | "G"
+    | "H"
+    | "I"
+    | "J"
+    | "K"
+    | "L"
+    | "M"
+    | "N"
+    | "O"
+    | "P"
+    | "Q"
+    | "R"
+    | "S"
+    | "T"
+    | "U"
+    | "V"
+    | "W"
+    | "X"
+    | "Y"
+    | "Z"
+  /** whether this face should be flipped horizontally */
+  reverse?: boolean
+  /** whether the small eye asset should be rendered */
+  eye?: boolean
+}
+
+export interface LogoEntity {
+  id?: string
+  type: string
+  size: number
+  x: number
+  y: number
+  faces: [Face, Face]
+  isInteractive?: boolean
+  isScrollPrevented?: boolean
+}

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    ["@babel/preset-react", { "runtime": "automatic" }]
-  ]
-}

package/.eslintrc.cjs

@@ -1,33 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended",
-  ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
-  settings: { react: { version: "18.2" } },
-  plugins: ["react-refresh", "simple-import-sort"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-    "no-unused-vars": 1,
-    "no-console": [1, { allow: ["error"] }],
-    "no-magic-numbers": 1,
-    "simple-import-sort/imports": "warn",
-    "simple-import-sort/exports": "warn",
-  },
-  overrides: [
-    {
-      files: "*.test.js",
-      rules: {
-        "no-magic-numbers": 0,
-      },
-    },
-  ],
-};

package/.storybook/main.js

@@ -1,18 +0,0 @@
-/** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/.storybook/preview.js

@@ -1,14 +0,0 @@
-/** @type { import('@storybook/react').Preview } */
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
-export default preview;

package/LICENSE.md

@@ -1 +0,0 @@
-Copyright © Inglorious Coderz 2023 All rights reserved.