@incursa/ui-kit 1.0.1 → 1.4.0

package/dist/web-components/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/dist/web-components/registry.js

@@ -0,0 +1,74 @@
+import { defineCustomElement, getIncWebComponentsNamespace } from "./shared.js";
+
+const registryEntries = new Map();
+
+function registerComponent(name, constructor) {
+    if (typeof name !== "string" || !name.startsWith("inc-")) {
+        throw new TypeError(`Web Component name must use the "inc-" prefix. Received "${name}".`);
+    }
+
+    if (typeof constructor !== "function") {
+        throw new TypeError(`Constructor for "${name}" must be a function.`);
+    }
+
+    registryEntries.set(name, constructor);
+    return constructor;
+}
+
+function registerComponents(entries) {
+    if (!entries || typeof entries !== "object") {
+        return [];
+    }
+
+    const registered = [];
+    Object.entries(entries).forEach(([name, constructor]) => {
+        registerComponent(name, constructor);
+        registered.push(name);
+    });
+    return registered;
+}
+
+function getRegisteredComponents() {
+    return [...registryEntries.entries()].map(([name, constructor]) => ({ name, constructor }));
+}
+
+function defineAll(options = {}) {
+    const results = [];
+    const registry = options.registry || null;
+
+    registryEntries.forEach((constructor, name) => {
+        results.push(defineCustomElement(name, constructor, registry));
+    });
+
+    return results;
+}
+
+function hasRegisteredComponent(name) {
+    return registryEntries.has(name);
+}
+
+function installRegistryNamespace() {
+    const namespace = getIncWebComponentsNamespace();
+    if (!namespace) {
+        return null;
+    }
+
+    namespace.registry = {
+        registerComponent,
+        registerComponents,
+        getRegisteredComponents,
+        hasRegisteredComponent,
+        defineAll,
+    };
+
+    return namespace.registry;
+}
+
+export {
+    defineAll,
+    getRegisteredComponents,
+    hasRegisteredComponent,
+    installRegistryNamespace,
+    registerComponent,
+    registerComponents,
+};

package/dist/web-components/shared.js

@@ -0,0 +1,186 @@
+const BOOLEAN_FALSE_TOKENS = new Set(["false", "0", "off", "no"]);
+
+function isClientEnvironment() {
+    return typeof window !== "undefined" && typeof document !== "undefined";
+}
+
+function isCustomElementsAvailable() {
+    return typeof globalThis !== "undefined" && "customElements" in globalThis;
+}
+
+function toKebabCase(value) {
+    return String(value)
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .replace(/[_\s]+/g, "-")
+        .toLowerCase();
+}
+
+function normalizeAttributeConfig(propertyName, config) {
+    const normalized = typeof config === "string"
+        ? { attribute: config }
+        : { ...config };
+    const type = normalized.type || "string";
+
+    return {
+        property: propertyName,
+        attribute: normalized.attribute || toKebabCase(propertyName),
+        type,
+        reflect: normalized.reflect !== false,
+        defaultValue: normalized.defaultValue,
+        parse: normalized.parse,
+        serialize: normalized.serialize,
+    };
+}
+
+function parseBoolean(value) {
+    if (value == null) {
+        return false;
+    }
+
+    return !BOOLEAN_FALSE_TOKENS.has(String(value).toLowerCase());
+}
+
+function parseNumber(value, fallback = null) {
+    if (value == null || value === "") {
+        return fallback;
+    }
+
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function parseValueFromAttribute(rawValue, config) {
+    if (typeof config.parse === "function") {
+        return config.parse(rawValue);
+    }
+
+    if (config.type === "boolean") {
+        return parseBoolean(rawValue);
+    }
+
+    if (config.type === "number") {
+        return parseNumber(rawValue, config.defaultValue ?? null);
+    }
+
+    return rawValue ?? config.defaultValue ?? "";
+}
+
+function serializeValueForAttribute(value, config) {
+    if (typeof config.serialize === "function") {
+        return config.serialize(value);
+    }
+
+    if (config.type === "boolean") {
+        return value ? "" : null;
+    }
+
+    if (value == null) {
+        return null;
+    }
+
+    return String(value);
+}
+
+function reflectAttributeValue(host, attribute, serializedValue) {
+    if (!host || typeof host.setAttribute !== "function") {
+        return;
+    }
+
+    if (serializedValue == null) {
+        host.removeAttribute(attribute);
+        return;
+    }
+
+    host.setAttribute(attribute, serializedValue);
+}
+
+function readReflectedAttribute(host, config) {
+    const rawValue = host.getAttribute(config.attribute);
+    return parseValueFromAttribute(rawValue, config);
+}
+
+function getAssignedSlotElements(host, slotName = "") {
+    if (!host || typeof host.querySelector !== "function") {
+        return [];
+    }
+
+    const selector = slotName ? `slot[name="${slotName}"]` : "slot:not([name])";
+    const slot = host.querySelector(selector);
+
+    if (typeof HTMLSlotElement === "undefined" || !(slot instanceof HTMLSlotElement)) {
+        return [];
+    }
+
+    return slot.assignedElements({ flatten: true });
+}
+
+function dispatchComponentEvent(host, type, detail = {}, options = {}) {
+    if (!host || typeof host.dispatchEvent !== "function") {
+        return false;
+    }
+
+    const event = new CustomEvent(type, {
+        bubbles: options.bubbles !== false,
+        composed: options.composed !== false,
+        cancelable: options.cancelable === true,
+        detail,
+    });
+
+    return host.dispatchEvent(event);
+}
+
+function createUniqueId(prefix = "inc-wc") {
+    const random = Math.random().toString(36).slice(2, 8);
+    return `${prefix}-${random}`;
+}
+
+function getIncWebComponentsNamespace() {
+    if (typeof globalThis === "undefined") {
+        return null;
+    }
+
+    if (!globalThis.IncWebComponents || typeof globalThis.IncWebComponents !== "object") {
+        globalThis.IncWebComponents = {};
+    }
+
+    return globalThis.IncWebComponents;
+}
+
+function defineCustomElement(name, constructor, registry = null) {
+    if (!isCustomElementsAvailable()) {
+        return { defined: false, reason: "custom-elements-unavailable", name };
+    }
+
+    const targetRegistry = registry || globalThis.customElements;
+    const existing = targetRegistry.get(name);
+
+    if (existing) {
+        return {
+            defined: existing === constructor,
+            reason: existing === constructor ? "already-defined" : "name-conflict",
+            name,
+            constructor: existing,
+        };
+    }
+
+    targetRegistry.define(name, constructor);
+    return { defined: true, reason: "defined", name, constructor };
+}
+
+export {
+    createUniqueId,
+    defineCustomElement,
+    dispatchComponentEvent,
+    getAssignedSlotElements,
+    getIncWebComponentsNamespace,
+    isClientEnvironment,
+    isCustomElementsAvailable,
+    normalizeAttributeConfig,
+    parseBoolean,
+    parseNumber,
+    parseValueFromAttribute,
+    readReflectedAttribute,
+    reflectAttributeValue,
+    serializeValueForAttribute,
+    toKebabCase,
+};

package/dist/web-components/style.css

@@ -0,0 +1,6 @@
+/*
+ * Convenience stylesheet entrypoint for the optional Web Components layer.
+ * This aliases the shared compiled UI kit stylesheet so consumers can pair
+ * one package-local CSS import with the custom-elements runtime.
+ */
+@import "../inc-design-language.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incursa/ui-kit",
-  "version": "1.0.1",
+  "version": "1.4.0",
   "private": false,
   "description": "Reusable UI kit for data-heavy business applications.",
   "keywords": [
@@ -29,6 +29,11 @@
       "style": "./dist/inc-design-language.css",
       "sass": "./src/inc-design-language.scss"
     },
+    "./web-components": {
+      "default": "./dist/web-components/index.js",
+      "style": "./dist/web-components/style.css"
+    },
+    "./web-components/style.css": "./dist/web-components/style.css",
     "./dist/inc-design-language.css": "./dist/inc-design-language.css",
     "./dist/inc-design-language.min.css": "./dist/inc-design-language.min.css",
     "./src/inc-design-language.scss": "./src/inc-design-language.scss",
@@ -48,7 +53,10 @@
     "build:css": "sass --load-path=node_modules --quiet-deps --silence-deprecation=import src/inc-design-language.scss dist/inc-design-language.css --style=expanded",
     "build:css:min": "sass --load-path=node_modules --quiet-deps --silence-deprecation=import src/inc-design-language.scss dist/inc-design-language.min.css --style=compressed",
     "build:js": "node -e \"require('fs').copyFileSync('src/inc-design-language.js', 'dist/inc-design-language.js')\"",
-    "build": "npm run build:css && npm run build:css:min && npm run build:js",
+    "build:wc": "node scripts/build-web-components.mjs",
+    "build": "npm run build:css && npm run build:css:min && npm run build:js && npm run build:wc",
+    "test:browser:install": "playwright install chromium",
+    "test:browser": "playwright test",
     "smoke": "node scripts/verify-ui-kit.mjs",
     "verify": "npm run build && npm run smoke && npm pack --dry-run",
     "preversion": "npm run verify",
@@ -59,6 +67,7 @@
     "package": "npm run build && npm run smoke && npm run pack:tarball"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "bootstrap": "^5.3.3",
     "linkedom": "^0.18.12",
     "sass": "^1.93.2"