npm - mtrl-addons - Versions diffs - 0.1.0 → 0.1.2 - Mend

mtrl-addons 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/.cursorrules +117 -0
package/AI.md +241 -0
package/build.js +148 -0
package/bun.lock +792 -0
package/index.ts +7 -0
package/package.json +10 -17
package/scripts/analyze-orphaned-functions.ts +387 -0
package/src/components/index.ts +45 -0
package/src/components/list/api.ts +314 -0
package/src/components/list/config.ts +352 -0
package/src/components/list/constants.ts +56 -0
package/src/components/list/features/api.ts +428 -0
package/src/components/list/features/index.ts +31 -0
package/src/components/list/features/list-manager.ts +502 -0
package/src/components/list/features.ts +112 -0
package/src/components/list/index.ts +39 -0
package/src/components/list/list.ts +234 -0
package/src/components/list/types.ts +513 -0
package/src/core/collection/base-collection.ts +100 -0
package/src/core/collection/collection-composer.ts +178 -0
package/src/core/collection/collection.ts +745 -0
package/src/core/collection/constants.ts +172 -0
package/src/core/collection/events.ts +428 -0
package/src/core/collection/features/api/loading.ts +279 -0
package/src/core/collection/features/operations/data-operations.ts +147 -0
package/src/core/collection/index.ts +104 -0
package/src/core/collection/state.ts +497 -0
package/src/core/collection/types.ts +404 -0
package/src/core/compose/features/collection.ts +119 -0
package/src/core/compose/features/index.ts +39 -0
package/src/core/compose/features/performance.ts +161 -0
package/src/core/compose/features/selection.ts +213 -0
package/src/core/compose/features/styling.ts +108 -0
package/src/core/compose/index.ts +31 -0
package/src/core/index.ts +167 -0
package/src/core/layout/config.ts +102 -0
package/src/core/layout/index.ts +168 -0
package/src/core/layout/jsx.ts +174 -0
package/src/core/layout/schema.ts +963 -0
package/src/core/layout/types.ts +92 -0
package/src/core/list-manager/api.ts +599 -0
package/src/core/list-manager/config.ts +593 -0
package/src/core/list-manager/constants.ts +268 -0
package/src/core/list-manager/features/api.ts +58 -0
package/src/core/list-manager/features/collection/collection.ts +705 -0
package/src/core/list-manager/features/collection/index.ts +17 -0
package/src/core/list-manager/features/viewport/constants.ts +42 -0
package/src/core/list-manager/features/viewport/index.ts +16 -0
package/src/core/list-manager/features/viewport/item-size.ts +274 -0
package/src/core/list-manager/features/viewport/loading.ts +263 -0
package/src/core/list-manager/features/viewport/placeholders.ts +281 -0
package/src/core/list-manager/features/viewport/rendering.ts +575 -0
package/src/core/list-manager/features/viewport/scrollbar.ts +495 -0
package/src/core/list-manager/features/viewport/scrolling.ts +795 -0
package/src/core/list-manager/features/viewport/template.ts +220 -0
package/src/core/list-manager/features/viewport/viewport.ts +654 -0
package/src/core/list-manager/features/viewport/virtual.ts +309 -0
package/src/core/list-manager/index.ts +279 -0
package/src/core/list-manager/list-manager.ts +206 -0
package/src/core/list-manager/types.ts +439 -0
package/src/core/list-manager/utils/calculations.ts +290 -0
package/src/core/list-manager/utils/range-calculator.ts +349 -0
package/src/core/list-manager/utils/speed-tracker.ts +273 -0
package/src/index.ts +17 -0
package/src/styles/components/_list.scss +244 -0
package/src/styles/index.scss +12 -0
package/src/types/mtrl.d.ts +6 -0
package/test/benchmarks/layout/advanced.test.ts +656 -0
package/test/benchmarks/layout/comparison.test.ts +519 -0
package/test/benchmarks/layout/performance-comparison.test.ts +274 -0
package/test/benchmarks/layout/real-components.test.ts +733 -0
package/test/benchmarks/layout/simple.test.ts +321 -0
package/test/benchmarks/layout/stress.test.ts +990 -0
package/test/collection/basic.test.ts +304 -0
package/test/components/list.test.ts +256 -0
package/test/core/collection/collection.test.ts +394 -0
package/test/core/collection/failed-ranges.test.ts +270 -0
package/test/core/compose/features.test.ts +183 -0
package/test/core/layout/layout.test.ts +201 -0
package/test/core/list-manager/features/collection.test.ts +704 -0
package/test/core/list-manager/features/viewport.test.ts +698 -0
package/test/core/list-manager/list-manager.test.ts +593 -0
package/test/core/list-manager/utils/calculations.test.ts +433 -0
package/test/core/list-manager/utils/range-calculator.test.ts +569 -0
package/test/core/list-manager/utils/speed-tracker.test.ts +530 -0
package/test/utils/dom-helpers.ts +275 -0
package/test/utils/performance-helpers.ts +392 -0
package/tsconfig.build.json +23 -0
package/tsconfig.json +20 -0
package/dist/index.d.ts +0 -5
package/dist/index.js +0 -38
package/dist/index.mjs +0 -8

package/test/collection/basic.test.ts ADDED Viewed

@@ -0,0 +1,304 @@
+/**
+ * Basic collection tests
+ *
+ * Tests the core functionality of the collection system
+ * including creation, data operations, and template rendering.
+ */
+import { describe, test, expect, beforeEach } from "bun:test";
+import { JSDOM } from "jsdom";
+// Mock DOM environment for testing
+const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
+global.document = dom.window.document;
+global.HTMLElement = dom.window.HTMLElement;
+global.requestAnimationFrame = (cb: FrameRequestCallback) => {
+  setTimeout(cb, 0);
+  return 0;
+};
+// Import our collection system
+import {
+  createCollection,
+  type CollectionItem,
+} from "../../src/core/collection";
+// Test data interface
+interface TestUser extends CollectionItem {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+}
+// Test data
+const testUsers: TestUser[] = [
+  { id: "1", name: "John Doe", email: "john@example.com", age: 30 },
+  { id: "2", name: "Jane Smith", email: "jane@example.com", age: 25 },
+  { id: "3", name: "Bob Johnson", email: "bob@example.com", age: 35 },
+];
+describe("Collection System", () => {
+  let container: HTMLElement;
+  beforeEach(() => {
+    // Create a fresh container for each test
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+  test("creates collection with basic configuration", () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+      className: "user-list",
+      ariaLabel: "User List",
+    });
+    expect(collection.element).toBe(container);
+    expect(collection.getSize()).toBe(3);
+    expect(collection.isEmpty()).toBe(false);
+    expect(container.classList.contains("mtrl-collection")).toBe(true);
+    expect(container.classList.contains("user-list")).toBe(true);
+    expect(container.getAttribute("aria-label")).toBe("User List");
+  });
+  test("renders items with default template", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(container.children.length).toBe(3);
+    expect(container.children[0].textContent).toBe("1");
+    expect(container.children[1].textContent).toBe("2");
+    expect(container.children[2].textContent).toBe("3");
+  });
+  test("renders items with object template", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+      template: {
+        tag: "div",
+        className: "user-item",
+        children: [
+          { tag: "div", className: "user-name", textContent: "{{name}}" },
+          { tag: "div", className: "user-email", textContent: "{{email}}" },
+        ],
+      },
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(container.children.length).toBe(3);
+    const firstUser = container.children[0] as HTMLElement;
+    expect(firstUser.className).toBe("user-item");
+    expect(firstUser.children.length).toBe(2);
+    expect(firstUser.children[0].textContent).toBe("John Doe");
+    expect(firstUser.children[1].textContent).toBe("john@example.com");
+  });
+  test("renders items with string template", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+      template: "<div class='user'>{{name}} ({{email}})</div>",
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(container.children.length).toBe(3);
+    expect(container.children[0].innerHTML).toBe(
+      "<div class='user'>John Doe (john@example.com)</div>"
+    );
+  });
+  test("adds new items", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: [testUsers[0]],
+    });
+    expect(collection.getSize()).toBe(1);
+    const newUser: TestUser = {
+      id: "4",
+      name: "Alice Brown",
+      email: "alice@example.com",
+      age: 28,
+    };
+    await collection.add(newUser);
+    expect(collection.getSize()).toBe(2);
+    const items = collection.getItems();
+    expect(items.length).toBe(2);
+    expect(items[1].name).toBe("Alice Brown");
+  });
+  test("updates existing items", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    const updatedUser: TestUser = {
+      id: "1",
+      name: "John Smith",
+      email: "johnsmith@example.com",
+      age: 31,
+    };
+    await collection.update(updatedUser);
+    const user = collection.getItem("1");
+    expect(user?.name).toBe("John Smith");
+    expect(user?.email).toBe("johnsmith@example.com");
+  });
+  test("removes items", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    expect(collection.getSize()).toBe(3);
+    await collection.remove("2");
+    expect(collection.getSize()).toBe(2);
+    expect(collection.getItem("2")).toBeUndefined();
+    expect(collection.getItem("1")).toBeDefined();
+    expect(collection.getItem("3")).toBeDefined();
+  });
+  test("clears all items", () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    expect(collection.getSize()).toBe(3);
+    collection.clear();
+    expect(collection.getSize()).toBe(0);
+    expect(collection.isEmpty()).toBe(true);
+  });
+  test("filters items with query", () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    expect(collection.getSize()).toBe(3);
+    // Filter users over 30
+    collection.query((user) => user.age > 30);
+    expect(collection.getSize()).toBe(1);
+    expect(collection.getItems()[0].name).toBe("Bob Johnson");
+  });
+  test("sorts items", () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    // Sort by age ascending
+    collection.sort((a, b) => a.age - b.age);
+    const items = collection.getItems();
+    expect(items[0].name).toBe("Jane Smith"); // age 25
+    expect(items[1].name).toBe("John Doe"); // age 30
+    expect(items[2].name).toBe("Bob Johnson"); // age 35
+  });
+  test("validates items when adding", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: [],
+      validate: (user) => user.age >= 18,
+    });
+    const validUser: TestUser = {
+      id: "1",
+      name: "John Doe",
+      email: "john@example.com",
+      age: 30,
+    };
+    const invalidUser: TestUser = {
+      id: "2",
+      name: "Minor",
+      email: "minor@example.com",
+      age: 16,
+    };
+    await collection.add([validUser, invalidUser]);
+    expect(collection.getSize()).toBe(1);
+    expect(collection.getItems()[0].name).toBe("John Doe");
+  });
+  test("transforms items when adding", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: [],
+      transform: (user: any) => ({
+        ...user,
+        name: user.name.toUpperCase(),
+      }),
+    });
+    const user: TestUser = {
+      id: "1",
+      name: "John Doe",
+      email: "john@example.com",
+      age: 30,
+    };
+    await collection.add(user);
+    expect(collection.getItems()[0].name).toBe("JOHN DOE");
+  });
+  test("handles template changes", async () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: [testUsers[0]],
+    });
+    // Change template
+    collection.setTemplate({
+      tag: "div",
+      className: "new-template",
+      textContent: "User: {{name}}",
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(container.children[0].textContent).toBe("User: John Doe");
+    expect(container.children[0].className).toBe("new-template");
+  });
+  test("destroys collection properly", () => {
+    const collection = createCollection<TestUser>({
+      container,
+      items: testUsers,
+    });
+    expect(container.children.length).toBeGreaterThan(0);
+    collection.destroy();
+    expect(container.children.length).toBe(0);
+  });
+});

package/test/components/list.test.ts ADDED Viewed

@@ -0,0 +1,256 @@
+/**
+ * Basic list component tests
+ *
+ * Tests the pipe composition list component that wraps the collection system
+ */
+import { describe, test, expect, beforeEach } from "bun:test";
+import { JSDOM } from "jsdom";
+// Mock DOM environment for testing
+const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");
+global.document = dom.window.document;
+global.HTMLElement = dom.window.HTMLElement;
+global.window = dom.window as any;
+global.navigator = dom.window.navigator;
+global.requestAnimationFrame = (cb: FrameRequestCallback) => {
+  setTimeout(cb, 0);
+  return 0;
+};
+// Mock scrollIntoView since JSDOM doesn't implement it
+global.HTMLElement.prototype.scrollIntoView = function (
+  options?: ScrollIntoViewOptions
+) {
+  // Mock implementation - just logs the call
+  console.log(`Mock scrollIntoView called with options:`, options);
+};
+// Import our list component
+import { createList, type ListItem } from "../../src/components/list";
+// Test data interface
+interface TestUser extends ListItem {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+}
+// Test data
+const testUsers: TestUser[] = [
+  { id: "1", name: "John Doe", email: "john@example.com", age: 30 },
+  { id: "2", name: "Jane Smith", email: "jane@example.com", age: 25 },
+  { id: "3", name: "Bob Johnson", email: "bob@example.com", age: 35 },
+];
+describe("List Component (Pipe Composition)", () => {
+  let container: HTMLElement;
+  beforeEach(() => {
+    // Create a fresh container for each test
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+  test("creates list with pipe composition pattern", () => {
+    const list = createList<TestUser>({
+      container,
+      items: testUsers,
+      className: "user-list",
+      ariaLabel: "User List",
+    });
+    // mtrl creates a new element and mounts it to the container
+    expect(list.element).not.toBe(container);
+    expect(list.element.parentElement).toBe(container);
+    expect(list.getSize()).toBe(3);
+    expect(list.isEmpty()).toBe(false);
+    expect(list.element.classList.contains("mtrl-list")).toBe(true);
+    expect(list.element.getAttribute("aria-label")).toBe("User List");
+    expect(list.element.getAttribute("role")).toBe("list");
+  });
+  test("applies list styling through composition", async () => {
+    const list = createList<TestUser>({
+      container,
+      items: testUsers,
+      listStyle: {
+        itemSize: 60,
+        gap: 8,
+        padding: 16,
+        striped: true,
+        hoverable: true,
+        bordered: false,
+      },
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    // Check styling on the list element, not the container
+    expect(list.element.style.getPropertyValue("--mtrl-list-gap")).toBe("8px");
+    expect(list.element.style.getPropertyValue("--mtrl-list-padding")).toBe(
+      "16px"
+    );
+    expect(list.element.style.getPropertyValue("--mtrl-list-item-height")).toBe(
+      "60px"
+    );
+    expect(list.element.classList.contains("mtrl-list--striped")).toBe(true);
+    expect(list.element.classList.contains("mtrl-list--hoverable")).toBe(true);
+    expect(list.element.classList.contains("mtrl-list--bordered")).toBe(false);
+  });
+  test("enables selection through composition", async () => {
+    const list = createList<TestUser>({
+      container,
+      items: testUsers,
+      selection: {
+        enabled: true,
+        multiple: true,
+      },
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    // Test selection methods exist
+    expect(typeof list.selectItem).toBe("function");
+    expect(typeof list.deselectItem).toBe("function");
+    expect(typeof list.selectAll).toBe("function");
+    expect(typeof list.deselectAll).toBe("function");
+    expect(typeof list.getSelectedItems).toBe("function");
+    expect(typeof list.getSelectedIds).toBe("function");
+    // Test selection functionality
+    list.selectItem("1");
+    expect(list.getSelectedIds()).toContain("1");
+    expect(list.getSelectedItems().length).toBe(1);
+    list.selectItem("2");
+    expect(list.getSelectedIds()).toHaveLength(2);
+    list.deselectItem("1");
+    expect(list.getSelectedIds()).toHaveLength(1);
+    expect(list.getSelectedIds()).toContain("2");
+    list.deselectAll();
+    expect(list.getSelectedIds()).toHaveLength(0);
+  });
+  test("tracks performance through composition", async () => {
+    const list = createList<TestUser>({
+      container,
+      items: testUsers,
+      performance: {
+        recycleElements: true,
+        bufferSize: 50,
+      },
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    // Test performance methods exist
+    expect(typeof list.getMetrics).toBe("function");
+    expect(typeof list.resetMetrics).toBe("function");
+    const metrics = list.getMetrics();
+    expect(typeof metrics.renderCount).toBe("number");
+    expect(typeof metrics.scrollCount).toBe("number");
+    expect(typeof metrics.averageRenderTime).toBe("number");
+    expect(typeof metrics.averageScrollTime).toBe("number");
+  });
+  test("provides list API through composition", async () => {
+    const list = createList<TestUser>({
+      container,
+      items: testUsers,
+    });
+    // Wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    // Test API methods exist
+    expect(typeof list.scrollToItem).toBe("function");
+    expect(typeof list.scrollToIndex).toBe("function");
+    expect(typeof list.scrollToPage).toBe("function");
+    // Test scrolling doesn't crash
+    list.scrollToItem("2");
+    list.scrollToIndex(1);
+  });
+  test("maintains collection functionality", async () => {
+    const list = createList<TestUser>({
+      container,
+      items: [testUsers[0]],
+    });
+    // Test collection methods still work
+    expect(list.getSize()).toBe(1);
+    const newUser: TestUser = {
+      id: "4",
+      name: "Alice Brown",
+      email: "alice@example.com",
+      age: 28,
+    };
+    await list.add(newUser);
+    expect(list.getSize()).toBe(2);
+    expect(list.getItem("4")?.name).toBe("Alice Brown");
+    await list.remove("1");
+    expect(list.getSize()).toBe(1);
+    expect(list.getItem("1")).toBeUndefined();
+  });
+  test("console shows pipe composition pattern", () => {
+    // Capture console logs
+    const logs: string[] = [];
+    const originalLog = console.log;
+    console.log = (message: string) => {
+      logs.push(message);
+    };
+    try {
+      createList<TestUser>({
+        container,
+        items: testUsers,
+        selection: { enabled: true },
+        listStyle: { striped: true },
+      });
+      // Restore console
+      console.log = originalLog;
+      // Verify composition pattern logs
+      expect(
+        logs.some((log) =>
+          log.includes("Creating list component (mtrl compose system)")
+        )
+      ).toBe(true);
+      expect(
+        logs.some((log) => log.includes("Adding collection capabilities"))
+      ).toBe(true);
+      expect(
+        logs.some((log) => log.includes("Adding styling capabilities"))
+      ).toBe(true);
+      expect(
+        logs.some((log) => log.includes("Adding selection capabilities"))
+      ).toBe(true);
+      expect(
+        logs.some((log) => log.includes("Adding performance tracking"))
+      ).toBe(true);
+      expect(logs.some((log) => log.includes("Adding list API methods"))).toBe(
+        true
+      );
+      expect(
+        logs.some((log) => log.includes("created via mtrl compose system"))
+      ).toBe(true);
+    } finally {
+      console.log = originalLog;
+    }
+  });
+});