@pyreon/document-primitives 0.11.4 → 0.11.6

package/src/__tests__/primitives.test.ts

@@ -1,43 +1,43 @@
-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"
+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", () => {
+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" },
+    { 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) {
@@ -46,59 +46,59 @@ describe("document primitives _documentType markers", () => {
     })
   }
 
-  it("all 18 node types are covered", () => {
+  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")
+describe('document primitives have displayName', () => {
+  it('DocHeading', () => {
+    expect(DocHeading.displayName).toBe('DocHeading')
   })
 
-  it("DocText", () => {
-    expect(DocText.displayName).toBe("DocText")
+  it('DocText', () => {
+    expect(DocText.displayName).toBe('DocText')
   })
 
-  it("DocSection", () => {
-    expect(DocSection.displayName).toBe("DocSection")
+  it('DocSection', () => {
+    expect(DocSection.displayName).toBe('DocSection')
   })
 
-  it("DocTable", () => {
-    expect(DocTable.displayName).toBe("DocTable")
+  it('DocTable', () => {
+    expect(DocTable.displayName).toBe('DocTable')
   })
 })
 
-describe("document primitives are callable", () => {
-  it("DocHeading is a function", () => {
-    expect(typeof DocHeading).toBe("function")
+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('DocText is a function', () => {
+    expect(typeof DocText).toBe('function')
   })
 
-  it("DocTable is a function", () => {
-    expect(typeof DocTable).toBe("function")
+  it('DocTable is a function', () => {
+    expect(typeof DocTable).toBe('function')
   })
 
-  it("DocDocument is a function", () => {
-    expect(typeof DocDocument).toBe("function")
+  it('DocDocument is a function', () => {
+    expect(typeof DocDocument).toBe('function')
   })
 })
 
-describe("document primitives IS_ROCKETSTYLE", () => {
-  it("DocHeading is a rocketstyle component", () => {
+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", () => {
+  it('DocText is a rocketstyle component', () => {
     expect((DocText as any).IS_ROCKETSTYLE).toBe(true)
   })
 
-  it("DocSection is a rocketstyle component", () => {
+  it('DocSection is a rocketstyle component', () => {
     expect((DocSection as any).IS_ROCKETSTYLE).toBe(true)
   })
 })

package/src/__tests__/useDocumentExport.test.ts

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

package/src/index.ts

@@ -6,32 +6,32 @@ export type {
   ExtractOptions,
   NodeType,
   ResolvedStyles,
-} from "@pyreon/connector-document"
-export { extractDocumentTree, resolveStyles } from "@pyreon/connector-document"
+} from '@pyreon/connector-document'
+export { extractDocumentTree, resolveStyles } from '@pyreon/connector-document'
 // Preview
-export { default as DocumentPreview } from "./DocumentPreview"
+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"
+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 type { DocumentTheme } from './theme'
+export { documentTheme } from './theme'
 // Export helper
-export type { DocumentExport, DocumentExportOptions } from "./useDocumentExport"
-export { createDocumentExport } from "./useDocumentExport"
+export type { DocumentExport, DocumentExportOptions } from './useDocumentExport'
+export { createDocumentExport } from './useDocumentExport'

package/src/primitives/DocButton.ts

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

package/src/primitives/DocCode.ts

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

package/src/primitives/DocColumn.ts

@@ -1,11 +1,11 @@
-import { Element } from "@pyreon/elements"
-import rocketstyle from "@pyreon/rocketstyle"
+import { Element } from '@pyreon/elements'
+import rocketstyle from '@pyreon/rocketstyle'
 
-const DocColumn = rocketstyle()({ name: "DocColumn", component: Element })
-  .statics({ _documentType: "column" as const })
+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",
+      tag: 'div',
       _documentProps: props.width != null ? { width: props.width } : {},
     }),
   )

package/src/primitives/DocDivider.ts

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

package/src/primitives/DocDocument.ts

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

package/src/primitives/DocHeading.ts

@@ -1,15 +1,15 @@
-import { Text } from "@pyreon/elements"
-import rocketstyle from "@pyreon/rocketstyle"
+import { Text } from '@pyreon/elements'
+import rocketstyle from '@pyreon/rocketstyle'
 
 const DocHeading = rocketstyle({
   dimensions: {
-    levels: "level",
+    levels: 'level',
   },
   useBooleans: true,
-})({ name: "DocHeading", component: Text })
+})({ name: 'DocHeading', component: Text })
   .theme({
-    fontWeight: "bold",
-    color: "#1a1a2e",
+    fontWeight: 'bold',
+    color: '#1a1a2e',
     marginBottom: 12,
   })
   .levels({
@@ -20,10 +20,10 @@ const DocHeading = rocketstyle({
     h5: { fontSize: 16, lineHeight: 1.5 },
     h6: { fontSize: 14, lineHeight: 1.5 },
   })
-  .statics({ _documentType: "heading" as const })
+  .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
+    const lvl = props.level ?? 'h1'
+    const num = Number.parseInt(String(lvl).replace('h', ''), 10) || 1
     return {
       tag: lvl,
       _documentProps: { level: num },

package/src/primitives/DocImage.ts

@@ -1,8 +1,8 @@
-import { Element } from "@pyreon/elements"
-import rocketstyle from "@pyreon/rocketstyle"
+import { Element } from '@pyreon/elements'
+import rocketstyle from '@pyreon/rocketstyle'
 
-const DocImage = rocketstyle()({ name: "DocImage", component: Element })
-  .statics({ _documentType: "image" as const })
+const DocImage = rocketstyle()({ name: 'DocImage', component: Element })
+  .statics({ _documentType: 'image' as const })
   .attrs<{
     src?: string
     alt?: string
@@ -12,9 +12,9 @@ const DocImage = rocketstyle()({ name: "DocImage", component: Element })
     tag: string
     _documentProps: Record<string, unknown>
   }>((props) => ({
-    tag: "img",
+    tag: 'img',
     _documentProps: {
-      src: props.src ?? "",
+      src: props.src ?? '',
       ...(props.alt ? { alt: props.alt } : {}),
       ...(props.width ? { width: props.width } : {}),
       ...(props.height ? { height: props.height } : {}),

package/src/primitives/DocLink.ts

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

package/src/primitives/DocList.ts

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

package/src/primitives/DocListItem.ts

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