@pyreon/elements 0.11.4 → 0.11.6

package/src/__tests__/Portal.test.ts

@@ -1,82 +1,82 @@
-import type { VNode } from "@pyreon/core"
-import { Portal as CorePortal, h } from "@pyreon/core"
-import { describe, expect, it } from "vitest"
-import { Portal } from "../Portal"
+import type { VNode } from '@pyreon/core'
+import { Portal as CorePortal, h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { Portal } from '../Portal'
 
 const asVNode = (v: unknown) => v as VNode
 
-describe("Portal", () => {
-  describe("rendering", () => {
-    it("returns a VNode whose type is CorePortal", () => {
-      const child = h("div", null, "modal content")
+describe('Portal', () => {
+  describe('rendering', () => {
+    it('returns a VNode whose type is CorePortal', () => {
+      const child = h('div', null, 'modal content')
       const result = asVNode(Portal({ children: child }))
       expect(result.type).toBe(CorePortal)
     })
 
-    it("defaults target to document.body when DOMLocation is not provided", () => {
-      const child = h("div", null, "content")
+    it('defaults target to document.body when DOMLocation is not provided', () => {
+      const child = h('div', null, 'content')
       const result = asVNode(Portal({ children: child }))
       const props = result.props as Record<string, unknown>
       expect(props.target).toBe(document.body)
     })
 
-    it("uses DOMLocation as target when provided", () => {
-      const customTarget = document.createElement("div")
-      const child = h("span", null, "inside")
+    it('uses DOMLocation as target when provided', () => {
+      const customTarget = document.createElement('div')
+      const child = h('span', null, 'inside')
       const result = asVNode(Portal({ DOMLocation: customTarget, children: child }))
       const props = result.props as Record<string, unknown>
       expect(props.target).toBe(customTarget)
     })
 
-    it("passes children through to the CorePortal VNode", () => {
-      const child = h("div", { class: "modal" }, "Modal content")
+    it('passes children through to the CorePortal VNode', () => {
+      const child = h('div', { class: 'modal' }, 'Modal content')
       const result = asVNode(Portal({ children: child }))
       const props = result.props as Record<string, unknown>
       expect(props.children).toBe(child)
     })
 
-    it("passes string children", () => {
-      const result = asVNode(Portal({ children: "text content" }))
+    it('passes string children', () => {
+      const result = asVNode(Portal({ children: 'text content' }))
       const props = result.props as Record<string, unknown>
-      expect(props.children).toBe("text content")
+      expect(props.children).toBe('text content')
     })
 
-    it("passes number children", () => {
+    it('passes number children', () => {
       const result = asVNode(Portal({ children: 42 }))
       const props = result.props as Record<string, unknown>
       expect(props.children).toBe(42)
     })
 
-    it("passes nested VNode children", () => {
-      const nested = h("div", null, h("span", null, "level 1"), h("span", null, "level 2"))
+    it('passes nested VNode children', () => {
+      const nested = h('div', null, h('span', null, 'level 1'), h('span', null, 'level 2'))
       const result = asVNode(Portal({ children: nested }))
       const props = result.props as Record<string, unknown>
       const childVNode = asVNode(props.children)
-      expect(childVNode.type).toBe("div")
+      expect(childVNode.type).toBe('div')
       expect(childVNode.children).toHaveLength(2)
     })
   })
 
-  describe("tag prop", () => {
-    it("accepts tag prop without affecting output type", () => {
-      const child = h("div", null, "content")
-      const result = asVNode(Portal({ tag: "section", children: child }))
+  describe('tag prop', () => {
+    it('accepts tag prop without affecting output type', () => {
+      const child = h('div', null, 'content')
+      const result = asVNode(Portal({ tag: 'section', children: child }))
       // tag is accepted but not used — output is still a Portal VNode
       expect(result.type).toBe(CorePortal)
     })
   })
 
-  describe("statics", () => {
-    it("has correct displayName", () => {
-      expect(Portal.displayName).toBe("@pyreon/elements/Portal")
+  describe('statics', () => {
+    it('has correct displayName', () => {
+      expect(Portal.displayName).toBe('@pyreon/elements/Portal')
     })
 
-    it("has correct pkgName", () => {
-      expect(Portal.pkgName).toBe("@pyreon/elements")
+    it('has correct pkgName', () => {
+      expect(Portal.pkgName).toBe('@pyreon/elements')
     })
 
-    it("has correct PYREON__COMPONENT", () => {
-      expect(Portal.PYREON__COMPONENT).toBe("@pyreon/elements/Portal")
+    it('has correct PYREON__COMPONENT', () => {
+      expect(Portal.PYREON__COMPONENT).toBe('@pyreon/elements/Portal')
     })
   })
 })

package/src/__tests__/Text.test.ts

@@ -1,226 +1,226 @@
-import type { VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import { describe, expect, it } from "vitest"
-import { Text } from "../Text"
+import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { Text } from '../Text'
 
 const asVNode = (v: unknown) => v as VNode
 
-describe("Text", () => {
-  describe("static properties", () => {
-    it("has isText set to true", () => {
+describe('Text', () => {
+  describe('static properties', () => {
+    it('has isText set to true', () => {
       expect(Text.isText).toBe(true)
     })
 
-    it("has correct displayName", () => {
-      expect(Text.displayName).toBe("@pyreon/elements/Text")
+    it('has correct displayName', () => {
+      expect(Text.displayName).toBe('@pyreon/elements/Text')
     })
 
-    it("has correct pkgName", () => {
-      expect(Text.pkgName).toBe("@pyreon/elements")
+    it('has correct pkgName', () => {
+      expect(Text.pkgName).toBe('@pyreon/elements')
     })
 
-    it("has correct PYREON__COMPONENT", () => {
-      expect(Text.PYREON__COMPONENT).toBe("@pyreon/elements/Text")
+    it('has correct PYREON__COMPONENT', () => {
+      expect(Text.PYREON__COMPONENT).toBe('@pyreon/elements/Text')
     })
   })
 
-  describe("default rendering", () => {
-    it("returns a VNode whose type is the Styled component (a function)", () => {
-      const result = asVNode(Text({ children: "Hello" }))
-      expect(typeof result.type).toBe("function")
+  describe('default rendering', () => {
+    it('returns a VNode whose type is the Styled component (a function)', () => {
+      const result = asVNode(Text({ children: 'Hello' }))
+      expect(typeof result.type).toBe('function')
     })
 
-    it("does not set as prop when no tag or paragraph provided", () => {
-      const result = asVNode(Text({ children: "Hello" }))
+    it('does not set as prop when no tag or paragraph provided', () => {
+      const result = asVNode(Text({ children: 'Hello' }))
       expect(result.props.as).toBeUndefined()
     })
 
-    it("renders children in output", () => {
-      const result = asVNode(Text({ children: "Hello" }))
-      expect(result.props.children).toBe("Hello")
+    it('renders children in output', () => {
+      const result = asVNode(Text({ children: 'Hello' }))
+      expect(result.props.children).toBe('Hello')
     })
 
-    it("passes $text prop with extraStyles", () => {
-      const result = asVNode(Text({ children: "Hello" }))
+    it('passes $text prop with extraStyles', () => {
+      const result = asVNode(Text({ children: 'Hello' }))
       expect(result.props.$text).toEqual({ extraStyles: undefined })
     })
 
-    it("renders null content when no children or label", () => {
+    it('renders null content when no children or label', () => {
       const result = asVNode(Text({}))
       expect(result.props.children).toBeUndefined()
     })
   })
 
-  describe("content fallback chain", () => {
-    it("renders children as content", () => {
-      const result = asVNode(Text({ children: "child content" }))
-      expect(result.props.children).toBe("child content")
+  describe('content fallback chain', () => {
+    it('renders children as content', () => {
+      const result = asVNode(Text({ children: 'child content' }))
+      expect(result.props.children).toBe('child content')
     })
 
-    it("renders label when children not provided", () => {
-      const result = asVNode(Text({ label: "label text" }))
-      expect(result.props.children).toBe("label text")
+    it('renders label when children not provided', () => {
+      const result = asVNode(Text({ label: 'label text' }))
+      expect(result.props.children).toBe('label text')
     })
 
-    it("prefers children over label", () => {
-      const result = asVNode(Text({ children: "child", label: "label" }))
-      expect(result.props.children).toBe("child")
+    it('prefers children over label', () => {
+      const result = asVNode(Text({ children: 'child', label: 'label' }))
+      expect(result.props.children).toBe('child')
     })
 
-    it("renders VNode children", () => {
-      const child = h("strong", null, "bold")
+    it('renders VNode children', () => {
+      const child = h('strong', null, 'bold')
       const result = asVNode(Text({ children: child }))
       expect(result.props.children).toBe(child)
     })
 
-    it("renders number label", () => {
+    it('renders number label', () => {
       const result = asVNode(Text({ label: 42 }))
       expect(result.props.children).toBe(42)
     })
   })
 
-  describe("tag prop", () => {
-    it("sets as prop to h1", () => {
-      const result = asVNode(Text({ tag: "h1", children: "Heading" }))
-      expect(result.props.as).toBe("h1")
+  describe('tag prop', () => {
+    it('sets as prop to h1', () => {
+      const result = asVNode(Text({ tag: 'h1', children: 'Heading' }))
+      expect(result.props.as).toBe('h1')
     })
 
-    it("sets as prop to h2", () => {
-      const result = asVNode(Text({ tag: "h2", children: "Sub heading" }))
-      expect(result.props.as).toBe("h2")
+    it('sets as prop to h2', () => {
+      const result = asVNode(Text({ tag: 'h2', children: 'Sub heading' }))
+      expect(result.props.as).toBe('h2')
     })
 
-    it("sets as prop to strong", () => {
-      const result = asVNode(Text({ tag: "strong", children: "Bold" }))
-      expect(result.props.as).toBe("strong")
+    it('sets as prop to strong', () => {
+      const result = asVNode(Text({ tag: 'strong', children: 'Bold' }))
+      expect(result.props.as).toBe('strong')
     })
 
-    it("sets as prop to em", () => {
-      const result = asVNode(Text({ tag: "em", children: "Italic" }))
-      expect(result.props.as).toBe("em")
+    it('sets as prop to em', () => {
+      const result = asVNode(Text({ tag: 'em', children: 'Italic' }))
+      expect(result.props.as).toBe('em')
     })
 
-    it("does not forward tag as a prop", () => {
-      const result = asVNode(Text({ tag: "h1", children: "Heading" }))
+    it('does not forward tag as a prop', () => {
+      const result = asVNode(Text({ tag: 'h1', children: 'Heading' }))
       expect(result.props.tag).toBeUndefined()
     })
   })
 
-  describe("paragraph prop", () => {
-    it("sets as prop to p when paragraph is true", () => {
-      const result = asVNode(Text({ paragraph: true, children: "Paragraph text" }))
-      expect(result.props.as).toBe("p")
+  describe('paragraph prop', () => {
+    it('sets as prop to p when paragraph is true', () => {
+      const result = asVNode(Text({ paragraph: true, children: 'Paragraph text' }))
+      expect(result.props.as).toBe('p')
     })
 
-    it("does not set as prop when paragraph is false", () => {
-      const result = asVNode(Text({ paragraph: false, children: "Inline text" }))
+    it('does not set as prop when paragraph is false', () => {
+      const result = asVNode(Text({ paragraph: false, children: 'Inline text' }))
       expect(result.props.as).toBeUndefined()
     })
 
-    it("paragraph is overridden when tag is also set (tag wins because paragraph branch is skipped)", () => {
+    it('paragraph is overridden when tag is also set (tag wins because paragraph branch is skipped)', () => {
       // When paragraph is true, finalTag = 'p'
       // When tag is also set, the else branch is not reached, so paragraph wins
-      const result = asVNode(Text({ tag: "h1", paragraph: true, children: "Heading" }))
-      expect(result.props.as).toBe("p")
+      const result = asVNode(Text({ tag: 'h1', paragraph: true, children: 'Heading' }))
+      expect(result.props.as).toBe('p')
     })
 
-    it("uses tag when paragraph is false", () => {
-      const result = asVNode(Text({ tag: "h1", paragraph: false, children: "Heading" }))
-      expect(result.props.as).toBe("h1")
+    it('uses tag when paragraph is false', () => {
+      const result = asVNode(Text({ tag: 'h1', paragraph: false, children: 'Heading' }))
+      expect(result.props.as).toBe('h1')
     })
 
-    it("does not forward paragraph as a prop", () => {
-      const result = asVNode(Text({ paragraph: true, children: "text" }))
+    it('does not forward paragraph as a prop', () => {
+      const result = asVNode(Text({ paragraph: true, children: 'text' }))
       expect(result.props.paragraph).toBeUndefined()
     })
   })
 
-  describe("css prop", () => {
-    it("passes css value through $text.extraStyles", () => {
-      const customCss = "color: red;"
-      const result = asVNode(Text({ css: customCss, children: "styled" }))
+  describe('css prop', () => {
+    it('passes css value through $text.extraStyles', () => {
+      const customCss = 'color: red;'
+      const result = asVNode(Text({ css: customCss, children: 'styled' }))
       expect(result.props.$text).toEqual({ extraStyles: customCss })
     })
 
-    it("passes undefined extraStyles when no css prop", () => {
-      const result = asVNode(Text({ children: "plain" }))
+    it('passes undefined extraStyles when no css prop', () => {
+      const result = asVNode(Text({ children: 'plain' }))
       expect(result.props.$text).toEqual({ extraStyles: undefined })
     })
 
-    it("does not forward css as a direct prop", () => {
-      const result = asVNode(Text({ css: "color: blue;", children: "text" }))
+    it('does not forward css as a direct prop', () => {
+      const result = asVNode(Text({ css: 'color: blue;', children: 'text' }))
       expect(result.props.css).toBeUndefined()
     })
   })
 
-  describe("HTML attribute forwarding", () => {
-    it("passes through id", () => {
-      const result = asVNode(Text({ id: "text-id", children: "text" }))
-      expect(result.props.id).toBe("text-id")
+  describe('HTML attribute forwarding', () => {
+    it('passes through id', () => {
+      const result = asVNode(Text({ id: 'text-id', children: 'text' }))
+      expect(result.props.id).toBe('text-id')
     })
 
-    it("passes through role", () => {
-      const result = asVNode(Text({ role: "heading", children: "text" }))
-      expect(result.props.role).toBe("heading")
+    it('passes through role', () => {
+      const result = asVNode(Text({ role: 'heading', children: 'text' }))
+      expect(result.props.role).toBe('heading')
     })
 
-    it("passes through title", () => {
-      const result = asVNode(Text({ title: "tooltip", children: "text" }))
-      expect(result.props.title).toBe("tooltip")
+    it('passes through title', () => {
+      const result = asVNode(Text({ title: 'tooltip', children: 'text' }))
+      expect(result.props.title).toBe('tooltip')
     })
 
-    it("passes through data- attributes", () => {
-      const result = asVNode(Text({ "data-testid": "txt", children: "text" }))
-      expect(result.props["data-testid"]).toBe("txt")
+    it('passes through data- attributes', () => {
+      const result = asVNode(Text({ 'data-testid': 'txt', children: 'text' }))
+      expect(result.props['data-testid']).toBe('txt')
     })
 
-    it("passes through aria- attributes", () => {
-      const result = asVNode(Text({ "aria-label": "label", children: "text" }))
-      expect(result.props["aria-label"]).toBe("label")
+    it('passes through aria- attributes', () => {
+      const result = asVNode(Text({ 'aria-label': 'label', children: 'text' }))
+      expect(result.props['aria-label']).toBe('label')
     })
 
-    it("passes through on-prefixed event handlers", () => {
+    it('passes through on-prefixed event handlers', () => {
       const handler = () => undefined
-      const result = asVNode(Text({ onClick: handler, children: "text" }))
+      const result = asVNode(Text({ onClick: handler, children: 'text' }))
       expect(result.props.onClick).toBe(handler)
     })
 
-    it("passes through ref", () => {
+    it('passes through ref', () => {
       const ref = { current: null }
-      const result = asVNode(Text({ ref, children: "text" }))
+      const result = asVNode(Text({ ref, children: 'text' }))
       expect(result.props.ref).toBe(ref)
     })
 
-    it("passes through class", () => {
-      const result = asVNode(Text({ class: "title", children: "text" }))
-      expect(result.props.class).toBe("title")
+    it('passes through class', () => {
+      const result = asVNode(Text({ class: 'title', children: 'text' }))
+      expect(result.props.class).toBe('title')
     })
 
-    it("passes through style", () => {
-      const result = asVNode(Text({ style: "color: red;", children: "text" }))
-      expect(result.props.style).toBe("color: red;")
+    it('passes through style', () => {
+      const result = asVNode(Text({ style: 'color: red;', children: 'text' }))
+      expect(result.props.style).toBe('color: red;')
     })
 
-    it("does not set class when not provided", () => {
-      const result = asVNode(Text({ children: "text" }))
+    it('does not set class when not provided', () => {
+      const result = asVNode(Text({ children: 'text' }))
       expect(result.props.class).toBeUndefined()
     })
 
-    it("does not set style when not provided", () => {
-      const result = asVNode(Text({ children: "text" }))
+    it('does not set style when not provided', () => {
+      const result = asVNode(Text({ children: 'text' }))
       expect(result.props.style).toBeUndefined()
     })
   })
 
-  describe("reserved props are consumed and not forwarded", () => {
-    it("does not forward paragraph, label, tag, or css", () => {
+  describe('reserved props are consumed and not forwarded', () => {
+    it('does not forward paragraph, label, tag, or css', () => {
       const result = asVNode(
         Text({
           paragraph: true,
-          label: "lbl",
-          children: "text",
-          tag: "h1",
-          css: "font-size: 2rem;",
+          label: 'lbl',
+          children: 'text',
+          tag: 'h1',
+          css: 'font-size: 2rem;',
         }),
       )
       expect(result.props.paragraph).toBeUndefined()
@@ -230,45 +230,45 @@ describe("Text", () => {
     })
   })
 
-  describe("combined props", () => {
-    it("renders with paragraph, css, class, and data attribute together", () => {
+  describe('combined props', () => {
+    it('renders with paragraph, css, class, and data attribute together', () => {
       const result = asVNode(
         Text({
           paragraph: true,
-          css: "margin: 0;",
-          class: "intro",
-          "data-testid": "intro-text",
-          children: "Hello world",
+          css: 'margin: 0;',
+          class: 'intro',
+          'data-testid': 'intro-text',
+          children: 'Hello world',
         }),
       )
 
-      expect(typeof result.type).toBe("function")
-      expect(result.props.as).toBe("p")
-      expect(result.props.$text).toEqual({ extraStyles: "margin: 0;" })
-      expect(result.props.class).toBe("intro")
-      expect(result.props["data-testid"]).toBe("intro-text")
-      expect(result.props.children).toBe("Hello world")
+      expect(typeof result.type).toBe('function')
+      expect(result.props.as).toBe('p')
+      expect(result.props.$text).toEqual({ extraStyles: 'margin: 0;' })
+      expect(result.props.class).toBe('intro')
+      expect(result.props['data-testid']).toBe('intro-text')
+      expect(result.props.children).toBe('Hello world')
       // Reserved props not forwarded
       expect(result.props.paragraph).toBeUndefined()
       expect(result.props.css).toBeUndefined()
     })
 
-    it("renders with tag, ref, and event handler together", () => {
+    it('renders with tag, ref, and event handler together', () => {
       const ref = { current: null }
       const handler = () => undefined
       const result = asVNode(
         Text({
-          tag: "h2",
+          tag: 'h2',
           ref,
           onClick: handler,
-          children: "Subtitle",
+          children: 'Subtitle',
         }),
       )
 
-      expect(result.props.as).toBe("h2")
+      expect(result.props.as).toBe('h2')
       expect(result.props.ref).toBe(ref)
       expect(result.props.onClick).toBe(handler)
-      expect(result.props.children).toBe("Subtitle")
+      expect(result.props.children).toBe('Subtitle')
     })
   })
 })

package/src/__tests__/Util.test.ts

@@ -1,61 +1,61 @@
-import type { VNodeChild } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import { describe, expect, it } from "vitest"
-import Util from "../Util/component"
+import type { VNodeChild } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import Util from '../Util/component'
 
-describe("Util", () => {
-  describe("statics", () => {
-    it("has displayName", () => {
-      expect(Util.displayName).toBe("@pyreon/elements/Util")
+describe('Util', () => {
+  describe('statics', () => {
+    it('has displayName', () => {
+      expect(Util.displayName).toBe('@pyreon/elements/Util')
     })
 
-    it("has pkgName", () => {
-      expect(Util.pkgName).toBe("@pyreon/elements")
+    it('has pkgName', () => {
+      expect(Util.pkgName).toBe('@pyreon/elements')
     })
 
-    it("has PYREON__COMPONENT", () => {
-      expect(Util.PYREON__COMPONENT).toBe("@pyreon/elements/Util")
+    it('has PYREON__COMPONENT', () => {
+      expect(Util.PYREON__COMPONENT).toBe('@pyreon/elements/Util')
     })
   })
 
-  describe("className injection", () => {
-    it("calls render with className prop for string className", () => {
-      const child = h("div", { "data-testid": "child" }, "Content")
-      const result = Util({ children: child, className: "my-class" }) as VNodeChild
+  describe('className injection', () => {
+    it('calls render with className prop for string className', () => {
+      const child = h('div', { 'data-testid': 'child' }, 'Content')
+      const result = Util({ children: child, className: 'my-class' }) as VNodeChild
       // render() should merge className into the child
       expect(result).toBeDefined()
     })
 
-    it("joins array className into space-separated string", () => {
-      const child = h("div", { "data-testid": "child" }, "Content")
-      const result = Util({ children: child, className: ["cls-a", "cls-b"] }) as VNodeChild
+    it('joins array className into space-separated string', () => {
+      const child = h('div', { 'data-testid': 'child' }, 'Content')
+      const result = Util({ children: child, className: ['cls-a', 'cls-b'] }) as VNodeChild
       expect(result).toBeDefined()
     })
   })
 
-  describe("style injection", () => {
-    it("calls render with style prop for style object", () => {
-      const child = h("div", { "data-testid": "child" }, "Content")
-      const result = Util({ children: child, style: { color: "red" } }) as VNodeChild
+  describe('style injection', () => {
+    it('calls render with style prop for style object', () => {
+      const child = h('div', { 'data-testid': 'child' }, 'Content')
+      const result = Util({ children: child, style: { color: 'red' } }) as VNodeChild
       expect(result).toBeDefined()
     })
   })
 
-  describe("both className and style", () => {
-    it("passes both className and style to render", () => {
-      const child = h("div", { "data-testid": "child" }, "Content")
+  describe('both className and style', () => {
+    it('passes both className and style to render', () => {
+      const child = h('div', { 'data-testid': 'child' }, 'Content')
       const result = Util({
         children: child,
-        className: "my-class",
-        style: { color: "blue" },
+        className: 'my-class',
+        style: { color: 'blue' },
       }) as VNodeChild
       expect(result).toBeDefined()
     })
   })
 
-  describe("no-op when no props", () => {
-    it("renders children without modification when no className or style", () => {
-      const child = h("div", { "data-testid": "child" }, "Content")
+  describe('no-op when no props', () => {
+    it('renders children without modification when no className or style', () => {
+      const child = h('div', { 'data-testid': 'child' }, 'Content')
       const result = Util({ children: child }) as VNodeChild
       expect(result).toBeDefined()
     })