@pyreon/elements 0.11.1 → 0.11.3

package/src/__tests__/Text.test.ts

@@ -0,0 +1,274 @@
+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", () => {
+      expect(Text.isText).toBe(true)
+    })
+
+    it("has correct displayName", () => {
+      expect(Text.displayName).toBe("@pyreon/elements/Text")
+    })
+
+    it("has correct pkgName", () => {
+      expect(Text.pkgName).toBe("@pyreon/elements")
+    })
+
+    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")
+    })
+
+    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("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", () => {
+      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")
+    })
+
+    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("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", () => {
+      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")
+    })
+
+    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 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" }))
+      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")
+    })
+
+    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)", () => {
+      // 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")
+    })
+
+    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" }))
+      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" }))
+      expect(result.props.$text).toEqual({ extraStyles: customCss })
+    })
+
+    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" }))
+      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")
+    })
+
+    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 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 on-prefixed event handlers", () => {
+      const handler = () => undefined
+      const result = asVNode(Text({ onClick: handler, children: "text" }))
+      expect(result.props.onClick).toBe(handler)
+    })
+
+    it("passes through ref", () => {
+      const ref = { current: null }
+      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 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" }))
+      expect(result.props.class).toBeUndefined()
+    })
+
+    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", () => {
+      const result = asVNode(
+        Text({
+          paragraph: true,
+          label: "lbl",
+          children: "text",
+          tag: "h1",
+          css: "font-size: 2rem;",
+        }),
+      )
+      expect(result.props.paragraph).toBeUndefined()
+      expect(result.props.label).toBeUndefined()
+      expect(result.props.tag).toBeUndefined()
+      expect(result.props.css).toBeUndefined()
+    })
+  })
+
+  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",
+        }),
+      )
+
+      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", () => {
+      const ref = { current: null }
+      const handler = () => undefined
+      const result = asVNode(
+        Text({
+          tag: "h2",
+          ref,
+          onClick: handler,
+          children: "Subtitle",
+        }),
+      )
+
+      expect(result.props.as).toBe("h2")
+      expect(result.props.ref).toBe(ref)
+      expect(result.props.onClick).toBe(handler)
+      expect(result.props.children).toBe("Subtitle")
+    })
+  })
+})

package/src/__tests__/Util.test.ts

@@ -0,0 +1,63 @@
+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")
+    })
+
+    it("has pkgName", () => {
+      expect(Util.pkgName).toBe("@pyreon/elements")
+    })
+
+    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
+      // 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
+      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
+      expect(result).toBeDefined()
+    })
+  })
+
+  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" },
+      }) 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")
+      const result = Util({ children: child }) as VNodeChild
+      expect(result).toBeDefined()
+    })
+  })
+})

package/src/__tests__/Wrapper.test.tsx

@@ -0,0 +1,152 @@
+import type { VNode } from "@pyreon/core"
+import { describe, expect, it, vi } from "vitest"
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+vi.mock("~/utils", () => ({
+  IS_DEVELOPMENT: true,
+}))
+
+import Wrapper from "../helpers/Wrapper/component"
+import Styled from "../helpers/Wrapper/styled"
+
+const asVNode = (v: unknown) => v as VNode
+
+describe("Wrapper component", () => {
+  describe("normal element (no flex fix needed)", () => {
+    it("returns a VNode whose type is the Styled component", () => {
+      const result = asVNode(Wrapper({ tag: "div" }))
+      expect(result.type).toBe(Styled)
+    })
+
+    it("passes normalElement as $element prop with block, direction, alignX, alignY, equalCols, extraStyles", () => {
+      const result = asVNode(
+        Wrapper({
+          tag: "div",
+          block: true,
+          direction: "inline",
+          alignX: "center",
+          alignY: "top",
+          equalCols: false,
+          extendCss: "color: red;",
+        }),
+      )
+
+      expect(result.props.$element).toEqual({
+        block: true,
+        direction: "inline",
+        alignX: "center",
+        alignY: "top",
+        equalCols: false,
+        extraStyles: "color: red;",
+      })
+    })
+
+    it("passes tag as the 'as' prop", () => {
+      const result = asVNode(Wrapper({ tag: "div" }))
+      expect(result.props.as).toBe("div")
+    })
+
+    it("passes ref through", () => {
+      const ref = () => {}
+      const result = asVNode(Wrapper({ tag: "div", ref }))
+      expect(result.props.ref).toBe(ref)
+    })
+
+    it("passes children through", () => {
+      const result = asVNode(Wrapper({ tag: "div", children: "child content" }))
+      expect(result.props.children).toBe("child content")
+    })
+
+    it("adds data-pyr-element in development mode", () => {
+      const result = asVNode(Wrapper({ tag: "div" }))
+      expect(result.props["data-pyr-element"]).toBe("Element")
+    })
+
+    it("spreads extra props", () => {
+      const result = asVNode(Wrapper({ tag: "section", id: "wrapper", role: "main" } as any))
+      expect(result.props.id).toBe("wrapper")
+      expect(result.props.role).toBe("main")
+    })
+  })
+
+  describe("flex-fix path (button/fieldset/legend)", () => {
+    it("renders parent Styled with parentFixElement for button", () => {
+      const result = asVNode(Wrapper({ tag: "button", children: "Click me" }))
+      expect(result.type).toBe(Styled)
+      expect((result.props.$element as any).parentFix).toBe(true)
+    })
+
+    it("parent Styled receives parentFixElement props (block + extraStyles only)", () => {
+      const result = asVNode(
+        Wrapper({
+          tag: "button",
+          block: true,
+          extendCss: "border: none;",
+          direction: "inline",
+          alignX: "center",
+          alignY: "center",
+        }),
+      )
+
+      expect(result.props.$element).toEqual({
+        parentFix: true,
+        block: true,
+        extraStyles: "border: none;",
+      })
+      expect(result.props.as).toBe("button")
+    })
+
+    it("child Styled receives childFixElement props (direction, alignX, alignY, equalCols)", () => {
+      const result = asVNode(
+        Wrapper({
+          tag: "fieldset",
+          direction: "rows",
+          alignX: "left",
+          alignY: "bottom",
+          equalCols: true,
+        }),
+      )
+
+      // The child is the first (only) child of the parent
+      const child = asVNode(result.props.children)
+      expect(child.type).toBe(Styled)
+      expect(child.props.$childFix).toBe(true)
+      expect(child.props.$element).toEqual({
+        childFix: true,
+        direction: "rows",
+        alignX: "left",
+        alignY: "bottom",
+        equalCols: true,
+      })
+    })
+
+    it("uses 'div' as inner tag by default", () => {
+      const result = asVNode(Wrapper({ tag: "button" }))
+      const child = asVNode(result.props.children)
+      expect(child.props.as).toBe("div")
+    })
+
+    it("uses 'span' as inner tag when isInline is true", () => {
+      const result = asVNode(Wrapper({ tag: "button", isInline: true }))
+      const child = asVNode(result.props.children)
+      expect(child.props.as).toBe("span")
+    })
+  })
+
+  describe("dangerouslySetInnerHTML skips fix", () => {
+    it("renders single Styled without parentFix for button when dangerouslySetInnerHTML is set", () => {
+      const result = asVNode(
+        Wrapper({
+          tag: "button",
+          dangerouslySetInnerHTML: { __html: "<b>Bold</b>" },
+        } as any),
+      )
+
+      // Should be the normal (non-fix) path
+      expect(result.type).toBe(Styled)
+      expect((result.props.$element as any).parentFix).toBeUndefined()
+    })
+  })
+})

package/src/__tests__/equalBeforeAfter.test.ts

@@ -0,0 +1,122 @@
+import type { VNode } from "@pyreon/core"
+import { h } from "@pyreon/core"
+import { describe, expect, it } from "vitest"
+import { Element } from "../Element"
+import Content from "../helpers/Content/component"
+import Wrapper from "../helpers/Wrapper/component"
+
+const asVNode = (v: unknown) => v as VNode
+
+const getContentSlots = (result: VNode): VNode[] => {
+  const children = result.props.children
+  if (!Array.isArray(children)) return []
+  return children.filter(
+    (c: unknown) =>
+      c != null && typeof c === "object" && "type" in (c as VNode) && (c as VNode).type === Content,
+  ) as VNode[]
+}
+
+describe("Element equalBeforeAfter", () => {
+  it("always passes a ref function to Wrapper", () => {
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        direction: "inline",
+        beforeContent: h("span", null, "Before"),
+        afterContent: h("span", null, "After"),
+        children: "Main",
+      }),
+    )
+    expect(result.type).toBe(Wrapper)
+    expect(typeof result.props.ref).toBe("function")
+  })
+
+  it("does not crash without before/after content", () => {
+    const result = asVNode(Element({ equalBeforeAfter: true, children: "Main only" }))
+    expect(result.type).toBe(Wrapper)
+  })
+
+  it("does not crash with only beforeContent", () => {
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        beforeContent: h("span", null, "Before"),
+        children: "Main",
+      }),
+    )
+    expect(result.type).toBe(Wrapper)
+  })
+
+  it("does not crash with only afterContent", () => {
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        afterContent: h("span", null, "After"),
+        children: "Main",
+      }),
+    )
+    expect(result.type).toBe(Wrapper)
+  })
+
+  it("renders three slot children when both before and after exist", () => {
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        direction: "inline",
+        beforeContent: h("span", null, "Short"),
+        afterContent: h("span", null, "Longer content"),
+        children: "Center",
+      }),
+    )
+    const slots = getContentSlots(result)
+    expect(slots).toHaveLength(3)
+  })
+
+  it("merged ref calls external function ref", () => {
+    let captured: HTMLElement | null = null
+    const ref = (node: HTMLElement | null) => {
+      captured = node
+    }
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        ref,
+        beforeContent: h("span", null, "Before"),
+        afterContent: h("span", null, "After"),
+        children: "Main",
+      }),
+    )
+    const fakeNode = {} as HTMLElement
+    ;(result.props.ref as (node: HTMLElement | null) => void)(fakeNode)
+    expect(captured).toBe(fakeNode)
+  })
+
+  it("merged ref sets object ref current", () => {
+    const ref = { current: null as HTMLElement | null }
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        ref,
+        beforeContent: h("span", null, "Before"),
+        afterContent: h("span", null, "After"),
+        children: "Main",
+      }),
+    )
+    const fakeNode = {} as HTMLElement
+    ;(result.props.ref as (node: HTMLElement | null) => void)(fakeNode)
+    expect(ref.current).toBe(fakeNode)
+  })
+
+  it("uses inline direction for equalBeforeAfter", () => {
+    const result = asVNode(
+      Element({
+        equalBeforeAfter: true,
+        direction: "inline",
+        beforeContent: h("span", null, "B"),
+        afterContent: h("span", null, "A"),
+        children: "Main",
+      }),
+    )
+    expect(result.props.direction).toBe("inline")
+  })
+})

package/src/__tests__/helpers.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest"
+import { INLINE_ELEMENTS_FLEX_FIX } from "../helpers/Wrapper/constants"
+import { isWebFixNeeded } from "../helpers/Wrapper/utils"
+
+describe("Wrapper utils", () => {
+  describe("isWebFixNeeded", () => {
+    it("returns true for button", () => {
+      expect(isWebFixNeeded("button")).toBe(true)
+    })
+
+    it("returns true for fieldset", () => {
+      expect(isWebFixNeeded("fieldset")).toBe(true)
+    })
+
+    it("returns true for legend", () => {
+      expect(isWebFixNeeded("legend")).toBe(true)
+    })
+
+    it("returns false for div", () => {
+      expect(isWebFixNeeded("div")).toBe(false)
+    })
+
+    it("returns false for span", () => {
+      expect(isWebFixNeeded("span")).toBe(false)
+    })
+
+    it("returns false for section", () => {
+      expect(isWebFixNeeded("section")).toBe(false)
+    })
+
+    it("returns false for undefined", () => {
+      expect(isWebFixNeeded(undefined)).toBe(false)
+    })
+
+    it("returns false for empty string", () => {
+      expect(isWebFixNeeded("")).toBe(false)
+    })
+
+    it("returns false for input", () => {
+      expect(isWebFixNeeded("input")).toBe(false)
+    })
+
+    it("returns false for form", () => {
+      expect(isWebFixNeeded("form")).toBe(false)
+    })
+  })
+
+  describe("INLINE_ELEMENTS_FLEX_FIX", () => {
+    it("contains button", () => {
+      expect(INLINE_ELEMENTS_FLEX_FIX.button).toBe(true)
+    })
+
+    it("contains fieldset", () => {
+      expect(INLINE_ELEMENTS_FLEX_FIX.fieldset).toBe(true)
+    })
+
+    it("contains legend", () => {
+      expect(INLINE_ELEMENTS_FLEX_FIX.legend).toBe(true)
+    })
+
+    it("only has 3 entries", () => {
+      expect(Object.keys(INLINE_ELEMENTS_FLEX_FIX)).toHaveLength(3)
+    })
+  })
+})