@pyreon/document-primitives 0.11.0 → 0.11.2

package/src/__tests__/primitives.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest"
+import DocButton from "../primitives/DocButton"
+import DocCode from "../primitives/DocCode"
+import DocColumn from "../primitives/DocColumn"
+import DocDivider from "../primitives/DocDivider"
+import DocDocument from "../primitives/DocDocument"
+import DocHeading from "../primitives/DocHeading"
+import DocImage from "../primitives/DocImage"
+import DocLink from "../primitives/DocLink"
+import DocList from "../primitives/DocList"
+import DocListItem from "../primitives/DocListItem"
+import DocPage from "../primitives/DocPage"
+import DocPageBreak from "../primitives/DocPageBreak"
+import DocQuote from "../primitives/DocQuote"
+import DocRow from "../primitives/DocRow"
+import DocSection from "../primitives/DocSection"
+import DocSpacer from "../primitives/DocSpacer"
+import DocTable from "../primitives/DocTable"
+import DocText from "../primitives/DocText"
+
+describe("document primitives _documentType markers", () => {
+  const components = [
+    { name: "DocDocument", component: DocDocument, type: "document" },
+    { name: "DocPage", component: DocPage, type: "page" },
+    { name: "DocSection", component: DocSection, type: "section" },
+    { name: "DocRow", component: DocRow, type: "row" },
+    { name: "DocColumn", component: DocColumn, type: "column" },
+    { name: "DocHeading", component: DocHeading, type: "heading" },
+    { name: "DocText", component: DocText, type: "text" },
+    { name: "DocLink", component: DocLink, type: "link" },
+    { name: "DocImage", component: DocImage, type: "image" },
+    { name: "DocTable", component: DocTable, type: "table" },
+    { name: "DocList", component: DocList, type: "list" },
+    { name: "DocListItem", component: DocListItem, type: "list-item" },
+    { name: "DocCode", component: DocCode, type: "code" },
+    { name: "DocDivider", component: DocDivider, type: "divider" },
+    { name: "DocSpacer", component: DocSpacer, type: "spacer" },
+    { name: "DocButton", component: DocButton, type: "button" },
+    { name: "DocQuote", component: DocQuote, type: "quote" },
+    { name: "DocPageBreak", component: DocPageBreak, type: "page-break" },
+  ]
+
+  for (const { name, component, type } of components) {
+    it(`${name} has _documentType = "${type}"`, () => {
+      expect((component as any)._documentType).toBe(type)
+    })
+  }
+
+  it("all 18 node types are covered", () => {
+    expect(components).toHaveLength(18)
+    const types = new Set(components.map((c) => c.type))
+    expect(types.size).toBe(18)
+  })
+})
+
+describe("document primitives have displayName", () => {
+  it("DocHeading", () => {
+    expect(DocHeading.displayName).toBe("DocHeading")
+  })
+
+  it("DocText", () => {
+    expect(DocText.displayName).toBe("DocText")
+  })
+
+  it("DocSection", () => {
+    expect(DocSection.displayName).toBe("DocSection")
+  })
+
+  it("DocTable", () => {
+    expect(DocTable.displayName).toBe("DocTable")
+  })
+})
+
+describe("document primitives are callable", () => {
+  it("DocHeading is a function", () => {
+    expect(typeof DocHeading).toBe("function")
+  })
+
+  it("DocText is a function", () => {
+    expect(typeof DocText).toBe("function")
+  })
+
+  it("DocTable is a function", () => {
+    expect(typeof DocTable).toBe("function")
+  })
+
+  it("DocDocument is a function", () => {
+    expect(typeof DocDocument).toBe("function")
+  })
+})
+
+describe("document primitives IS_ROCKETSTYLE", () => {
+  it("DocHeading is a rocketstyle component", () => {
+    expect((DocHeading as any).IS_ROCKETSTYLE).toBe(true)
+  })
+
+  it("DocText is a rocketstyle component", () => {
+    expect((DocText as any).IS_ROCKETSTYLE).toBe(true)
+  })
+
+  it("DocSection is a rocketstyle component", () => {
+    expect((DocSection as any).IS_ROCKETSTYLE).toBe(true)
+  })
+})

package/src/__tests__/useDocumentExport.test.ts

@@ -0,0 +1,92 @@
+import type { DocumentMarker } from "@pyreon/connector-document"
+import { describe, expect, it } from "vitest"
+import { createDocumentExport } from "../useDocumentExport"
+
+// Mock VNode
+const vnode = (
+  type: string | ((...args: any[]) => any),
+  props: Record<string, any> = {},
+  children: unknown[] = [],
+) => ({ type, props, children })
+
+// Mock document-marked component
+const docComponent = (docType: string) => {
+  const fn = (props: any) => vnode("div", props, props.children ? [props.children] : [])
+  ;(fn as any)._documentType = docType
+  return fn as ((...args: any[]) => any) & DocumentMarker
+}
+
+const DocDocument = docComponent("document")
+const DocHeading = docComponent("heading")
+const DocText = docComponent("text")
+
+describe("createDocumentExport", () => {
+  it("extracts a document tree from template function", () => {
+    const doc = createDocumentExport(() =>
+      vnode(DocDocument, { _documentProps: { title: "Test" } }, [
+        vnode(
+          DocHeading,
+          {
+            $rocketstyle: { fontSize: 24, fontWeight: "bold" },
+            _documentProps: { level: 1 },
+          },
+          ["Hello"],
+        ),
+        vnode(
+          DocText,
+          {
+            $rocketstyle: { fontSize: 14, color: "#333" },
+          },
+          ["World"],
+        ),
+      ]),
+    )
+
+    const tree = doc.getDocNode()
+
+    expect(tree.type).toBe("document")
+    expect(tree.props.title).toBe("Test")
+    expect(tree.children).toHaveLength(2)
+
+    const heading = tree.children[0] as any
+    expect(heading.type).toBe("heading")
+    expect(heading.props.level).toBe(1)
+    expect(heading.styles?.fontSize).toBe(24)
+    expect(heading.children).toEqual(["Hello"])
+
+    const text = tree.children[1] as any
+    expect(text.type).toBe("text")
+    expect(text.styles?.fontSize).toBe(14)
+    expect(text.styles?.color).toBe("#333")
+  })
+
+  it("can be called multiple times", () => {
+    const doc = createDocumentExport(() =>
+      vnode(DocText, { $rocketstyle: { fontSize: 14 } }, ["Static"]),
+    )
+
+    const tree1 = doc.getDocNode()
+    const tree2 = doc.getDocNode()
+
+    expect(tree1.type).toBe("text")
+    expect(tree2.type).toBe("text")
+  })
+
+  it("respects includeStyles option", () => {
+    const doc = createDocumentExport(
+      () => vnode(DocHeading, { $rocketstyle: { fontSize: 24 } }, ["Hello"]),
+      { includeStyles: false },
+    )
+
+    const tree = doc.getDocNode()
+    expect(tree.styles).toBeUndefined()
+  })
+
+  it("handles empty template", () => {
+    const doc = createDocumentExport(() => null)
+
+    const tree = doc.getDocNode()
+    expect(tree.type).toBe("document")
+    expect(tree.children).toEqual([])
+  })
+})

package/src/index.ts

@@ -0,0 +1,37 @@
+// Re-export connector utilities
+
+export type {
+  DocChild,
+  DocNode,
+  ExtractOptions,
+  NodeType,
+  ResolvedStyles,
+} from "@pyreon/connector-document"
+export { extractDocumentTree, resolveStyles } from "@pyreon/connector-document"
+// Preview
+export { default as DocumentPreview } from "./DocumentPreview"
+// Primitives
+export { default as DocButton } from "./primitives/DocButton"
+export { default as DocCode } from "./primitives/DocCode"
+export { default as DocColumn } from "./primitives/DocColumn"
+export { default as DocDivider } from "./primitives/DocDivider"
+export { default as DocDocument } from "./primitives/DocDocument"
+export { default as DocHeading } from "./primitives/DocHeading"
+export { default as DocImage } from "./primitives/DocImage"
+export { default as DocLink } from "./primitives/DocLink"
+export { default as DocList } from "./primitives/DocList"
+export { default as DocListItem } from "./primitives/DocListItem"
+export { default as DocPage } from "./primitives/DocPage"
+export { default as DocPageBreak } from "./primitives/DocPageBreak"
+export { default as DocQuote } from "./primitives/DocQuote"
+export { default as DocRow } from "./primitives/DocRow"
+export { default as DocSection } from "./primitives/DocSection"
+export { default as DocSpacer } from "./primitives/DocSpacer"
+export { default as DocTable } from "./primitives/DocTable"
+export { default as DocText } from "./primitives/DocText"
+// Theme
+export type { DocumentTheme } from "./theme"
+export { documentTheme } from "./theme"
+// Export helper
+export type { DocumentExport, DocumentExportOptions } from "./useDocumentExport"
+export { createDocumentExport } from "./useDocumentExport"

package/src/primitives/DocButton.ts

@@ -0,0 +1,37 @@
+import { Text } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocButton = rocketstyle({
+  dimensions: {
+    variants: "variant",
+  },
+  useBooleans: true,
+})({ name: "DocButton", component: Text })
+  .theme({
+    fontSize: 14,
+    fontWeight: "bold",
+    padding: "10px 24px",
+    borderRadius: 4,
+    textAlign: "center",
+    textDecoration: "none",
+  })
+  .variants({
+    primary: {
+      backgroundColor: "#4f46e5",
+      color: "#ffffff",
+    },
+    secondary: {
+      backgroundColor: "#ffffff",
+      color: "#4f46e5",
+      borderWidth: 1,
+      borderColor: "#4f46e5",
+      borderStyle: "solid",
+    },
+  })
+  .statics({ _documentType: "button" as const })
+  .attrs<{ href?: string; tag: string; _documentProps: { href: string } }>((props) => ({
+    tag: "a",
+    _documentProps: { href: props.href ?? "#" },
+  }))
+
+export default DocButton

package/src/primitives/DocCode.ts

@@ -0,0 +1,18 @@
+import { Text } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocCode = rocketstyle()({ name: "DocCode", component: Text })
+  .theme({
+    fontFamily: "ui-monospace, monospace",
+    fontSize: 13,
+    backgroundColor: "#f5f5f5",
+    padding: "8px 12px",
+    borderRadius: 4,
+  })
+  .statics({ _documentType: "code" as const })
+  .attrs<{ language?: string; tag: string; _documentProps: Record<string, unknown> }>((props) => ({
+    tag: "pre",
+    _documentProps: props.language ? { language: props.language } : {},
+  }))
+
+export default DocCode

package/src/primitives/DocColumn.ts

@@ -0,0 +1,13 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocColumn = rocketstyle()({ name: "DocColumn", component: Element })
+  .statics({ _documentType: "column" as const })
+  .attrs<{ width?: number | string; tag: string; _documentProps: Record<string, unknown> }>(
+    (props) => ({
+      tag: "div",
+      _documentProps: props.width != null ? { width: props.width } : {},
+    }),
+  )
+
+export default DocColumn

package/src/primitives/DocDivider.ts

@@ -0,0 +1,23 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocDivider = rocketstyle()({ name: "DocDivider", component: Element })
+  .theme({
+    borderColor: "#dddddd",
+    borderWidth: 1,
+  })
+  .statics({ _documentType: "divider" as const })
+  .attrs<{
+    color?: string
+    thickness?: number
+    tag: string
+    _documentProps: Record<string, unknown>
+  }>((props) => ({
+    tag: "hr",
+    _documentProps: {
+      ...(props.color ? { color: props.color } : {}),
+      ...(props.thickness ? { thickness: props.thickness } : {}),
+    },
+  }))
+
+export default DocDivider

package/src/primitives/DocDocument.ts

@@ -0,0 +1,21 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocDocument = rocketstyle()({ name: "DocDocument", component: Element })
+  .statics({ _documentType: "document" as const })
+  .attrs<{
+    title?: string
+    author?: string
+    subject?: string
+    tag: string
+    _documentProps: Record<string, unknown>
+  }>((props) => ({
+    tag: "div",
+    _documentProps: {
+      ...(props.title ? { title: props.title } : {}),
+      ...(props.author ? { author: props.author } : {}),
+      ...(props.subject ? { subject: props.subject } : {}),
+    },
+  }))
+
+export default DocDocument

package/src/primitives/DocHeading.ts

@@ -0,0 +1,33 @@
+import { Text } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocHeading = rocketstyle({
+  dimensions: {
+    levels: "level",
+  },
+  useBooleans: true,
+})({ name: "DocHeading", component: Text })
+  .theme({
+    fontWeight: "bold",
+    color: "#1a1a2e",
+    marginBottom: 12,
+  })
+  .levels({
+    h1: { fontSize: 32, lineHeight: 1.2 },
+    h2: { fontSize: 24, lineHeight: 1.3 },
+    h3: { fontSize: 20, lineHeight: 1.4 },
+    h4: { fontSize: 18, lineHeight: 1.4 },
+    h5: { fontSize: 16, lineHeight: 1.5 },
+    h6: { fontSize: 14, lineHeight: 1.5 },
+  })
+  .statics({ _documentType: "heading" as const })
+  .attrs<{ level?: string; tag: string; _documentProps: { level: number } }>((props) => {
+    const lvl = props.level ?? "h1"
+    const num = Number.parseInt(String(lvl).replace("h", ""), 10) || 1
+    return {
+      tag: lvl,
+      _documentProps: { level: num },
+    }
+  })
+
+export default DocHeading

package/src/primitives/DocImage.ts

@@ -0,0 +1,25 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocImage = rocketstyle()({ name: "DocImage", component: Element })
+  .statics({ _documentType: "image" as const })
+  .attrs<{
+    src?: string
+    alt?: string
+    width?: number | string
+    height?: number | string
+    caption?: string
+    tag: string
+    _documentProps: Record<string, unknown>
+  }>((props) => ({
+    tag: "img",
+    _documentProps: {
+      src: props.src ?? "",
+      ...(props.alt ? { alt: props.alt } : {}),
+      ...(props.width ? { width: props.width } : {}),
+      ...(props.height ? { height: props.height } : {}),
+      ...(props.caption ? { caption: props.caption } : {}),
+    },
+  }))
+
+export default DocImage

package/src/primitives/DocLink.ts

@@ -0,0 +1,15 @@
+import { Text } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocLink = rocketstyle()({ name: "DocLink", component: Text })
+  .theme({
+    color: "#4f46e5",
+    textDecoration: "underline",
+  })
+  .statics({ _documentType: "link" as const })
+  .attrs<{ href?: string; tag: string; _documentProps: { href: string } }>((props) => ({
+    tag: "a",
+    _documentProps: { href: props.href ?? "#" },
+  }))
+
+export default DocLink

package/src/primitives/DocList.ts

@@ -0,0 +1,15 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocList = rocketstyle()({ name: "DocList", component: Element })
+  .theme({
+    marginBottom: 8,
+    paddingLeft: 20,
+  })
+  .statics({ _documentType: "list" as const })
+  .attrs<{ ordered?: boolean; tag: string; _documentProps: Record<string, unknown> }>((props) => ({
+    tag: props.ordered ? "ol" : "ul",
+    _documentProps: props.ordered ? { ordered: props.ordered } : {},
+  }))
+
+export default DocList

package/src/primitives/DocListItem.ts

@@ -0,0 +1,15 @@
+import { Text } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocListItem = rocketstyle()({ name: "DocListItem", component: Text })
+  .theme({
+    fontSize: 14,
+    lineHeight: 1.5,
+  })
+  .statics({ _documentType: "list-item" as const })
+  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+    tag: "li",
+    _documentProps: {},
+  }))
+
+export default DocListItem

package/src/primitives/DocPage.ts

@@ -0,0 +1,23 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocPage = rocketstyle()({ name: "DocPage", component: Element })
+  .theme({
+    backgroundColor: "#ffffff",
+    padding: "25mm",
+  })
+  .statics({ _documentType: "page" as const })
+  .attrs<{
+    size?: string
+    orientation?: string
+    tag: string
+    _documentProps: Record<string, unknown>
+  }>((props) => ({
+    tag: "div",
+    _documentProps: {
+      ...(props.size ? { size: props.size } : {}),
+      ...(props.orientation ? { orientation: props.orientation } : {}),
+    },
+  }))
+
+export default DocPage

package/src/primitives/DocPageBreak.ts

@@ -0,0 +1,11 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocPageBreak = rocketstyle()({ name: "DocPageBreak", component: Element })
+  .statics({ _documentType: "page-break" as const })
+  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+    tag: "div",
+    _documentProps: {},
+  }))
+
+export default DocPageBreak

package/src/primitives/DocQuote.ts

@@ -0,0 +1,19 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocQuote = rocketstyle()({ name: "DocQuote", component: Element })
+  .theme({
+    borderColor: "#4f46e5",
+    padding: "8px 16px",
+    fontStyle: "italic",
+    color: "#666666",
+  })
+  .statics({ _documentType: "quote" as const })
+  .attrs<{ borderColor?: string; tag: string; _documentProps: Record<string, unknown> }>(
+    (props) => ({
+      tag: "blockquote",
+      _documentProps: props.borderColor ? { borderColor: props.borderColor } : {},
+    }),
+  )
+
+export default DocQuote

package/src/primitives/DocRow.ts

@@ -0,0 +1,14 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocRow = rocketstyle()({ name: "DocRow", component: Element })
+  .theme({
+    direction: "row",
+  })
+  .statics({ _documentType: "row" as const })
+  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+    tag: "div",
+    _documentProps: {},
+  }))
+
+export default DocRow

package/src/primitives/DocSection.ts

@@ -0,0 +1,23 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocSection = rocketstyle({
+  dimensions: {
+    directions: "direction",
+  },
+  useBooleans: false,
+})({ name: "DocSection", component: Element })
+  .theme({
+    padding: 0,
+  })
+  .directions({
+    column: {},
+    row: { direction: "row" },
+  })
+  .statics({ _documentType: "section" as const })
+  .attrs<{ direction?: string; tag: string; _documentProps: { direction: string } }>((props) => ({
+    tag: "div",
+    _documentProps: { direction: props.direction ?? "column" },
+  }))
+
+export default DocSection

package/src/primitives/DocSpacer.ts

@@ -0,0 +1,11 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocSpacer = rocketstyle()({ name: "DocSpacer", component: Element })
+  .statics({ _documentType: "spacer" as const })
+  .attrs<{ height?: number; tag: string; _documentProps: { height: number } }>((props) => ({
+    tag: "div",
+    _documentProps: { height: props.height ?? 16 },
+  }))
+
+export default DocSpacer

package/src/primitives/DocTable.ts

@@ -0,0 +1,36 @@
+import { Element } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocTable = rocketstyle({
+  dimensions: {
+    variants: "variant",
+  },
+  useBooleans: true,
+})({ name: "DocTable", component: Element })
+  .theme({
+    fontSize: 14,
+    borderColor: "#dddddd",
+  })
+  .statics({ _documentType: "table" as const })
+  .attrs<{
+    columns?: unknown[]
+    rows?: unknown[]
+    headerStyle?: Record<string, unknown>
+    striped?: boolean
+    bordered?: boolean
+    caption?: string
+    tag: string
+    _documentProps: Record<string, unknown>
+  }>((props) => ({
+    tag: "table",
+    _documentProps: {
+      columns: props.columns ?? [],
+      rows: props.rows ?? [],
+      ...(props.headerStyle ? { headerStyle: props.headerStyle } : {}),
+      ...(props.striped ? { striped: props.striped } : {}),
+      ...(props.bordered ? { bordered: props.bordered } : {}),
+      ...(props.caption ? { caption: props.caption } : {}),
+    },
+  }))
+
+export default DocTable

package/src/primitives/DocText.ts

@@ -0,0 +1,35 @@
+import { Text } from "@pyreon/elements"
+import rocketstyle from "@pyreon/rocketstyle"
+
+const DocText = rocketstyle({
+  dimensions: {
+    variants: "variant",
+    weights: "weight",
+  },
+  useBooleans: true,
+})({ name: "DocText", component: Text })
+  .theme({
+    color: "#333333",
+    lineHeight: 1.5,
+    marginBottom: 8,
+  })
+  .variants({
+    body: { fontSize: 14 },
+    caption: { fontSize: 12, color: "#666666" },
+    label: { fontSize: 11, fontWeight: "bold" },
+  })
+  .weights({
+    normal: { fontWeight: "normal" },
+    bold: { fontWeight: "bold" },
+  })
+  .statics({ _documentType: "text" as const })
+  // .attrs(
+  //   (props: any) =>
+  //     ({
+  //       tag: "p",
+  .attrs<{ tag: string; _documentProps: Record<string, unknown> }>((_props) => ({
+    tag: "p",
+    _documentProps: {},
+  }))
+
+export default DocText