@pyreon/elements 0.11.1 → 0.11.2

package/src/Text/component.tsx

@@ -0,0 +1,65 @@
+/**
+ * Text component for rendering inline or block-level text. Supports a
+ * `paragraph` shorthand that automatically renders as a `<p>` tag, or
+ * a custom `tag` for semantic HTML (h1-h6, span, etc.). Marked with
+ * a static `isText` flag so other components can detect text children.
+ */
+
+import type { PyreonHTMLAttributes, VNodeChild } from "@pyreon/core"
+import type { HTMLTextTags } from "@pyreon/ui-core"
+import { PKG_NAME } from "../constants"
+import type { ExtendCss, PyreonComponent } from "../types"
+import Styled from "./styled"
+
+export type Props = Partial<{
+  /**
+   * Label can be used instead of children for inline syntax. But **children** prop takes a precedence
+   */
+  label: VNodeChild
+  /**
+   * Children to be rendered within **Text** component.
+   */
+  children: VNodeChild
+  /**
+   * Defines whether should behave as a block text element. Automatically adds **p** HTML tag
+   */
+  paragraph: boolean
+  /**
+   * Defines what kind of HTML tag should be rendered
+   */
+  tag: HTMLTextTags
+  /**
+   * If an additional styling needs to be added, it can be do so via injecting styles using this property.
+   */
+  css: ExtendCss
+}> &
+  PyreonHTMLAttributes
+
+const Component: PyreonComponent<Props> & {
+  isText?: true
+} = ({ paragraph, label, children, tag, css, ref, ...props }) => {
+  let finalTag: string | undefined
+
+  if (paragraph) finalTag = "p"
+  else {
+    finalTag = tag
+  }
+
+  return (
+    <Styled ref={ref} as={finalTag} $text={{ extraStyles: css }} {...props}>
+      {children ?? label}
+    </Styled>
+  )
+}
+
+// ----------------------------------------------
+// DEFINE STATICS
+// ----------------------------------------------
+const name = `${PKG_NAME}/Text` as const
+
+Component.displayName = name
+Component.pkgName = PKG_NAME
+Component.PYREON__COMPONENT = name
+Component.isText = true
+
+export default Component

package/src/Text/index.ts

@@ -0,0 +1,5 @@
+import type { Props } from "./component"
+import component from "./component"
+
+export type { Props as TextProps }
+export { component as Text }

package/src/Text/styled.ts

@@ -0,0 +1,30 @@
+/**
+ * Styled text primitive that inherits color, font-weight, and line-height
+ * from its parent so it blends seamlessly into any context. Additional
+ * styles can be injected via the responsive `extraStyles` prop processed
+ * through makeItResponsive.
+ */
+import { config } from "@pyreon/ui-core"
+import { extendCss, makeItResponsive } from "@pyreon/unistyle"
+import type { ResponsiveStylesCallback } from "../types"
+
+const { styled, css, textComponent } = config
+
+const styles: ResponsiveStylesCallback = ({ css: cssFn, theme: t }) => cssFn`
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`
+
+export default styled(textComponent)`
+  ${css`
+    color: inherit;
+    font-weight: inherit;
+    line-height: 1;
+  `};
+
+  ${makeItResponsive({
+    key: "$text",
+    styles,
+    css,
+    normalize: false,
+  })};
+`

package/src/Util/component.tsx

@@ -0,0 +1,43 @@
+/**
+ * Utility wrapper that injects className and/or style props into its
+ * children without adding any DOM nodes of its own. Uses the core `render`
+ * helper to clone children with the merged props.
+ */
+
+import type { VNode, VNodeChild } from "@pyreon/core"
+import { render } from "@pyreon/ui-core"
+import { PKG_NAME } from "../constants"
+import type { PyreonComponent } from "../types"
+
+export interface Props {
+  /**
+   * Children to be rendered within **Util** component.
+   */
+  children: VNodeChild
+  /**
+   * Class name(s) to be added to children component.
+   */
+  className?: string | string[] | undefined
+  /**
+   * Style property to extend children component inline styles
+   */
+  style?: Record<string, unknown> | undefined
+}
+
+const Component: PyreonComponent<Props> = (({ children, className, style }: Props) => {
+  const mergedClasses = Array.isArray(className) ? className.join(" ") : className
+
+  const finalProps: Record<string, any> = {}
+  if (style) finalProps.style = style
+  if (mergedClasses) finalProps.className = mergedClasses
+
+  return render(children, finalProps) as VNode | null
+}) as PyreonComponent<Props>
+
+const name = `${PKG_NAME}/Util` as const
+
+Component.displayName = name
+Component.pkgName = PKG_NAME
+Component.PYREON__COMPONENT = name
+
+export default Component

package/src/Util/index.ts

@@ -0,0 +1,5 @@
+import type { Props } from "./component"
+import component from "./component"
+
+export type { Props as UtilProps }
+export { component as Util }

package/src/__tests__/Content.test.tsx

@@ -0,0 +1,115 @@
+import type { VNode } from "@pyreon/core"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+const mocks = vi.hoisted(() => ({
+  render: vi.fn((children: unknown) => children),
+}))
+
+vi.mock("@pyreon/ui-core", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>
+  return {
+    ...actual,
+    render: mocks.render,
+  }
+})
+
+vi.mock("~/utils", () => ({
+  IS_DEVELOPMENT: true,
+}))
+
+import Content from "../helpers/Content/component"
+import Styled from "../helpers/Content/styled"
+
+const asVNode = (v: unknown) => v as VNode
+
+describe("Content component", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("returns a VNode whose type is the Styled component", () => {
+    const result = asVNode(Content({ contentType: "content" }))
+    expect(result.type).toBe(Styled)
+  })
+
+  it("passes tag as the 'as' prop to Styled", () => {
+    const result = asVNode(Content({ tag: "span" }))
+    expect(result.props.as).toBe("span")
+  })
+
+  it("passes contentType as $contentType prop", () => {
+    const result = asVNode(Content({ contentType: "before" }))
+    expect(result.props.$contentType).toBe("before")
+  })
+
+  it("passes styling props bundled as $element prop", () => {
+    const result = asVNode(
+      Content({
+        contentType: "content",
+        parentDirection: "inline",
+        direction: "rows",
+        alignX: "center",
+        alignY: "top",
+        equalCols: true,
+        gap: 8,
+        extendCss: "color: red;",
+      }),
+    )
+
+    expect(result.props.$element).toEqual({
+      contentType: "content",
+      parentDirection: "inline",
+      direction: "rows",
+      alignX: "center",
+      alignY: "top",
+      equalCols: true,
+      gap: 8,
+      extraStyles: "color: red;",
+    })
+  })
+
+  it("adds data-pyr-element attribute in development mode", () => {
+    const result = asVNode(Content({ contentType: "after" }))
+    expect(result.props["data-pyr-element"]).toBe("after")
+  })
+
+  it("passes children through render()", () => {
+    const children = "Some text"
+    Content({ children })
+    expect(mocks.render).toHaveBeenCalledWith(children)
+  })
+
+  it("spreads remaining props to Styled", () => {
+    const result = asVNode(Content({ id: "test-id", className: "custom" } as any))
+    expect(result.props.id).toBe("test-id")
+    expect(result.props.className).toBe("custom")
+  })
+
+  it("maps extendCss to extraStyles in $element", () => {
+    const result = asVNode(Content({ extendCss: "font-size: 14px;" }))
+    expect((result.props.$element as any).extraStyles).toBe("font-size: 14px;")
+  })
+})
+
+describe("Content component (production mode)", () => {
+  it("does not add data-pyr-element when IS_DEVELOPMENT is false", async () => {
+    // Reset module registry so the new mock takes effect
+    vi.resetModules()
+    vi.doMock("../utils", () => ({
+      IS_DEVELOPMENT: false,
+    }))
+    // Re-mock @pyreon/ui-core after resetModules
+    vi.doMock("@pyreon/ui-core", async (importOriginal) => {
+      const actual = (await importOriginal()) as Record<string, unknown>
+      return { ...actual, render: (children: unknown) => children }
+    })
+
+    const { default: ContentProd } = await import("../helpers/Content/component")
+    const result = asVNode(ContentProd({ contentType: "before" }))
+
+    expect(result.props["data-pyr-element"]).toBeUndefined()
+  })
+})