@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/code-preview/code-preview.test.js

@@ -1,139 +1,116 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
 
 // Skip entire test file - importing code-preview.js loads Shiki which causes memory issues
 // Even with lazy loading, the import itself can trigger Shiki initialization
-describe.skip("Code Preview Component", () => {
-	// Import moved inside describe.skip to prevent loading
-	// import "./code-preview.js";
-	// Entire suite skipped: Shiki code highlighting library causes memory issues in tests
-	// Even importing the component can trigger Shiki loading which freezes tests
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	// Skip most tests to avoid memory issues with Shiki
-	// Only test basic rendering and properties
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-code-preview");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have language property defaulting to html", async () => {
-		element = await fixture("grantcodes-code-preview");
-		assert.strictEqual(
-			element.language,
-			"html",
-			"Language should default to html",
-		);
-	});
-
-	it("should have theme property defaulting to aurora-x", async () => {
-		element = await fixture("grantcodes-code-preview");
-		assert.strictEqual(
-			element.theme,
-			"aurora-x",
-			"Theme should default to aurora-x",
-		);
-	});
-
-	it("should support different languages", async () => {
-		element = await fixture("grantcodes-code-preview", {
-			language: "javascript",
-		});
-
-		assert.strictEqual(
-			element.language,
-			"javascript",
-			"Language should be javascript",
-		);
-	});
-
-	it("should support different themes", async () => {
-		element = await fixture("grantcodes-code-preview", {
-			theme: "github-dark",
-		});
-
-		assert.strictEqual(
-			element.theme,
-			"github-dark",
-			"Theme should be github-dark",
-		);
-	});
-
-	it("should render code preview wrapper", async () => {
-		element = await fixture("grantcodes-code-preview");
-		const preview = element.shadowRoot.querySelector(".code-preview");
-		assert.ok(preview, "Code preview wrapper should exist");
-	});
-
-	it("should render pre element", async () => {
-		element = await fixture("grantcodes-code-preview");
-		await element.updateComplete;
-		const pre = element.shadowRoot.querySelector("pre");
-		assert.ok(pre, "Pre element should exist");
-	});
-
-	it.skip("should have slot for code content", async () => {
-		// Skipped: Can cause memory issues
-		element = await fixture("grantcodes-code-preview");
-		await element.updateComplete;
-		await new Promise((resolve) => setTimeout(resolve, 10));
-		const pre = element.shadowRoot.querySelector("pre");
-		assert.ok(pre, "Pre element should exist");
-		const slot = pre?.querySelector("slot");
-		assert.ok(slot, "Slot should exist for code content");
-	});
-
-	it.skip("should handle code highlighting", async () => {
-		// Skipped: Shiki is memory-intensive and causes test suite to freeze
-		element = await fixture("grantcodes-code-preview", {
-			language: "javascript",
-		});
-
-		element.textContent = "const x = 42;";
-
-		await element.updateComplete;
-
-		// The doHighlight method is called in firstUpdated
-		// Shiki highlighting happens asynchronously
-		const preview = element.shadowRoot.querySelector(".code-preview");
-		assert.ok(preview, "Preview should exist after highlighting");
-	});
-
-	it.skip("should initialize codePreview property", async () => {
-		// Skipped: Can cause memory issues
-		element = await fixture("grantcodes-code-preview");
-		assert.strictEqual(
-			element.codePreview,
-			null,
-			"codePreview should be null initially",
-		);
-	});
-
-	it.skip("should set codePreview in firstUpdated", async () => {
-		// Skipped: Can cause memory issues
-		element = await fixture("grantcodes-code-preview");
-		await element.updateComplete;
-		assert.ok(
-			element.codePreview !== null,
-			"codePreview should be set after firstUpdated",
-		);
-	});
-
-	it.skip("should support various programming languages", async () => {
-		// Skipped: Shiki is memory-intensive and causes test suite to freeze
-		const languages = ["javascript", "typescript", "python", "css", "json"];
-
-		for (const lang of languages) {
-			element = await fixture("grantcodes-code-preview", { language: lang });
-			assert.strictEqual(element.language, lang, `Language should be ${lang}`);
-			cleanup(element);
-		}
-	});
+describe.skip('Code Preview Component', () => {
+  // Import moved inside describe.skip to prevent loading
+  // import "./code-preview.js";
+  // Entire suite skipped: Shiki code highlighting library causes memory issues in tests
+  // Even importing the component can trigger Shiki loading which freezes tests
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  // Skip most tests to avoid memory issues with Shiki
+  // Only test basic rendering and properties
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-code-preview');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have language property defaulting to html', async () => {
+    element = await fixture('grantcodes-code-preview');
+    assert.strictEqual(element.language, 'html', 'Language should default to html');
+  });
+
+  it('should have theme property defaulting to aurora-x', async () => {
+    element = await fixture('grantcodes-code-preview');
+    assert.strictEqual(element.theme, 'aurora-x', 'Theme should default to aurora-x');
+  });
+
+  it('should support different languages', async () => {
+    element = await fixture('grantcodes-code-preview', {
+      language: 'javascript',
+    });
+
+    assert.strictEqual(element.language, 'javascript', 'Language should be javascript');
+  });
+
+  it('should support different themes', async () => {
+    element = await fixture('grantcodes-code-preview', {
+      theme: 'github-dark',
+    });
+
+    assert.strictEqual(element.theme, 'github-dark', 'Theme should be github-dark');
+  });
+
+  it('should render code preview wrapper', async () => {
+    element = await fixture('grantcodes-code-preview');
+    const preview = element.shadowRoot.querySelector('.code-preview');
+    assert.ok(preview, 'Code preview wrapper should exist');
+  });
+
+  it('should render pre element', async () => {
+    element = await fixture('grantcodes-code-preview');
+    await element.updateComplete;
+    const pre = element.shadowRoot.querySelector('pre');
+    assert.ok(pre, 'Pre element should exist');
+  });
+
+  it.skip('should have slot for code content', async () => {
+    // Skipped: Can cause memory issues
+    element = await fixture('grantcodes-code-preview');
+    await element.updateComplete;
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    const pre = element.shadowRoot.querySelector('pre');
+    assert.ok(pre, 'Pre element should exist');
+    const slot = pre?.querySelector('slot');
+    assert.ok(slot, 'Slot should exist for code content');
+  });
+
+  it.skip('should handle code highlighting', async () => {
+    // Skipped: Shiki is memory-intensive and causes test suite to freeze
+    element = await fixture('grantcodes-code-preview', {
+      language: 'javascript',
+    });
+
+    element.textContent = 'const x = 42;';
+
+    await element.updateComplete;
+
+    // The doHighlight method is called in firstUpdated
+    // Shiki highlighting happens asynchronously
+    const preview = element.shadowRoot.querySelector('.code-preview');
+    assert.ok(preview, 'Preview should exist after highlighting');
+  });
+
+  it.skip('should initialize codePreview property', async () => {
+    // Skipped: Can cause memory issues
+    element = await fixture('grantcodes-code-preview');
+    assert.strictEqual(element.codePreview, null, 'codePreview should be null initially');
+  });
+
+  it.skip('should set codePreview in firstUpdated', async () => {
+    // Skipped: Can cause memory issues
+    element = await fixture('grantcodes-code-preview');
+    await element.updateComplete;
+    assert.ok(element.codePreview !== null, 'codePreview should be set after firstUpdated');
+  });
+
+  it.skip('should support various programming languages', async () => {
+    // Skipped: Shiki is memory-intensive and causes test suite to freeze
+    const languages = ['javascript', 'typescript', 'python', 'css', 'json'];
+
+    for (const lang of languages) {
+      element = await fixture('grantcodes-code-preview', { language: lang });
+      assert.strictEqual(element.language, lang, `Language should be ${lang}`);
+      cleanup(element);
+    }
+  });
 });

package/src/components/code-preview/index.js

@@ -1 +1 @@
-export * from "./code-preview.js";
+export * from './code-preview.js';

package/src/components/container/container.component.js

@@ -1,39 +1,39 @@
-import { LitElement, html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import containerStyles from "./container.css" with { type: "css" };
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import containerStyles from './container.css' with { type: 'css' };
 
 export class GrantCodesContainer extends LitElement {
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
-	static styles = [containerStyles];
+  // Styles are scoped to this element: they won't conflict with styles
+  // on the main page or in other components. Styling API can be exposed
+  // via CSS custom properties.
+  static styles = [containerStyles];
 
-	static properties = {
-		align: { type: String },
-		nopad: { type: Boolean },
-	};
+  static properties = {
+    align: { type: String },
+    nopad: { type: Boolean },
+  };
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.align = "default";
-		this.nopad = false;
-	}
+    this.align = 'default';
+    this.nopad = false;
+  }
 
-	render() {
-		const classes = classMap({
-			container: true,
-			"container--wide": this.align === "wide",
-			"container--full": this.align === "full",
-			"container--prose": this.align === "prose",
-			"container--viewport": this.align === "viewport",
-			"container--nopad": this.nopad,
-		});
+  render() {
+    const classes = classMap({
+      container: true,
+      'container--wide': this.align === 'wide',
+      'container--full': this.align === 'full',
+      'container--prose': this.align === 'prose',
+      'container--viewport': this.align === 'viewport',
+      'container--nopad': this.nopad,
+    });
 
-		return html`
+    return html`
       <div class=${classes}>
         <slot></slot>
       </div>
     `;
-	}
+  }
 }

package/src/components/container/container.css

@@ -1,44 +1,44 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .container {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: stretch;
-	inline-size: 1200px;
-	max-inline-size: 100%;
-	padding-inline: var(--g-spacing-md);
-	margin-inline: auto;
-	background-color: inherit;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  inline-size: 1200px;
+  max-inline-size: 100%;
+  padding-inline: var(--g-spacing-md);
+  margin-inline: auto;
+  background-color: inherit;
 }
 
 .container--prose {
-	inline-size: 100%;
-	max-inline-size: 65ch;
+  inline-size: 100%;
+  max-inline-size: 65ch;
 }
 
 .container--wide {
-	inline-size: 1400px;
+  inline-size: 1400px;
 }
 
 .container--full {
-	inline-size: 100%;
+  inline-size: 100%;
 }
 
 .container--viewport {
-	inset-inline-start: 50%;
-	position: relative;
-	inset-inline-end: 50%;
-	margin-inline-start: -50dvw;
-	margin-inline-end: -50dvw;
-	max-inline-size: 100dvw;
-	inline-size: 100dvw;
+  inset-inline-start: 50%;
+  position: relative;
+  inset-inline-end: 50%;
+  margin-inline-start: -50dvw;
+  margin-inline-end: -50dvw;
+  max-inline-size: 100dvw;
+  inline-size: 100dvw;
 }
 
 .container--nopad {
-	padding-inline: 0;
+  padding-inline: 0;
 }

package/src/components/container/container.js

@@ -1,6 +1,6 @@
-import { GrantCodesContainer } from "./container.component.js";
+import { GrantCodesContainer } from './container.component.js';
 
-export * from "./container.component.js";
+export * from './container.component.js';
 export default GrantCodesContainer;
 
-customElements.define("grantcodes-container", GrantCodesContainer);
+customElements.define('grantcodes-container', GrantCodesContainer);

package/src/components/container/container.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesContainer } from "./container.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesContainer } from './container.js';
 
 export const Container = createComponent({
-	tagName: "grantcodes-container",
-	elementClass: GrantCodesContainer,
-	react: React,
+  tagName: 'grantcodes-container',
+  elementClass: GrantCodesContainer,
+  react: React,
 });

package/src/components/container/container.stories.js

@@ -1,41 +1,41 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } = getStorybookHelpers(
-	"grantcodes-container",
-);
-import "./container.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-container');
+
+import './container.js';
 
 const meta = {
-	title: "Components/Container",
-	component: "grantcodes-container",
-	args: {
-		...args,
-		content: "This content is inside the container.",
-		align: undefined,
-		nopad: false,
-	},
-	argTypes: {
-		...argTypes,
-		align: {
-			type: "string",
-			options: ["default", "wide", "full", "viewport", "prose"],
-			control: { type: "radio" },
-		},
-	},
-	render: (args) =>
-		template(
-			args,
-			html`<div
+  title: 'Components/Container',
+  component: 'grantcodes-container',
+  args: {
+    ...args,
+    content: 'This content is inside the container.',
+    align: undefined,
+    nopad: false,
+  },
+  argTypes: {
+    ...argTypes,
+    align: {
+      type: 'string',
+      options: ['default', 'wide', 'full', 'viewport', 'prose'],
+      control: { type: 'radio' },
+    },
+  },
+  render: (args) =>
+    template(
+      args,
+      html`<div
         style="background-color: var(--g-color-background-subtle)"
       >
         ${args.content}
       </div>`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -43,25 +43,25 @@ export default meta;
 export const Container = {};
 
 export const WideContainer = {
-	args: {
-		align: "wide",
-	},
+  args: {
+    align: 'wide',
+  },
 };
 
 export const FullContainer = {
-	args: {
-		align: "full",
-	},
+  args: {
+    align: 'full',
+  },
 };
 
 export const ViewportContainer = {
-	args: {
-		align: "viewport",
-	},
+  args: {
+    align: 'viewport',
+  },
 };
 
 export const ProseContainer = {
-	args: {
-		align: "prose",
-	},
+  args: {
+    align: 'prose',
+  },
 };