@pyreon/document-primitives 0.3.0

package/lib/index.js

@@ -0,0 +1,447 @@
+import { extractDocumentTree, extractDocumentTree as extractDocumentTree$1, resolveStyles } from "@pyreon/connector-document";
+import { Element, Text } from "@pyreon/elements";
+import rocketstyle from "@pyreon/rocketstyle";
+
+//#region src/DocumentPreview.ts
+const DocumentPreview = rocketstyle({
+	dimensions: { sizes: "size" },
+	useBooleans: true
+})({
+	name: "DocumentPreview",
+	component: Element
+}).theme({
+	backgroundColor: "#f5f5f5",
+	padding: 40
+}).sizes({
+	A4: {
+		width: "210mm",
+		minHeight: "297mm"
+	},
+	A3: {
+		width: "297mm",
+		minHeight: "420mm"
+	},
+	A5: {
+		width: "148mm",
+		minHeight: "210mm"
+	},
+	letter: {
+		width: "8.5in",
+		minHeight: "11in"
+	},
+	legal: {
+		width: "8.5in",
+		minHeight: "14in"
+	}
+}).styles((css) => css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+
+    & > * {
+      background: white;
+      padding: 25mm;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      margin: 20px 0;
+    }
+  `).statics({ _documentType: "document" }).attrs((props) => ({
+	tag: "div",
+	_documentProps: {
+		...props.size ? { size: props.size } : { size: "A4" },
+		...props.showPageBreaks ? { showPageBreaks: props.showPageBreaks } : {}
+	}
+}));
+
+//#endregion
+//#region src/primitives/DocButton.ts
+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" }).attrs((props) => ({
+	tag: "a",
+	_documentProps: { href: props.href ?? "#" }
+}));
+
+//#endregion
+//#region src/primitives/DocCode.ts
+const DocCode = rocketstyle()({
+	name: "DocCode",
+	component: Text
+}).theme({
+	fontFamily: "ui-monospace, monospace",
+	fontSize: 13,
+	backgroundColor: "#f5f5f5",
+	padding: "8px 12px",
+	borderRadius: 4
+}).statics({ _documentType: "code" }).attrs((props) => ({
+	tag: "pre",
+	_documentProps: props.language ? { language: props.language } : {}
+}));
+
+//#endregion
+//#region src/primitives/DocColumn.ts
+const DocColumn = rocketstyle()({
+	name: "DocColumn",
+	component: Element
+}).statics({ _documentType: "column" }).attrs((props) => ({
+	tag: "div",
+	_documentProps: props.width != null ? { width: props.width } : {}
+}));
+
+//#endregion
+//#region src/primitives/DocDivider.ts
+const DocDivider = rocketstyle()({
+	name: "DocDivider",
+	component: Element
+}).theme({
+	borderColor: "#dddddd",
+	borderWidth: 1
+}).statics({ _documentType: "divider" }).attrs((props) => ({
+	tag: "hr",
+	_documentProps: {
+		...props.color ? { color: props.color } : {},
+		...props.thickness ? { thickness: props.thickness } : {}
+	}
+}));
+
+//#endregion
+//#region src/primitives/DocDocument.ts
+const DocDocument = rocketstyle()({
+	name: "DocDocument",
+	component: Element
+}).statics({ _documentType: "document" }).attrs((props) => ({
+	tag: "div",
+	_documentProps: {
+		...props.title ? { title: props.title } : {},
+		...props.author ? { author: props.author } : {},
+		...props.subject ? { subject: props.subject } : {}
+	}
+}));
+
+//#endregion
+//#region src/primitives/DocHeading.ts
+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" }).attrs((props) => {
+	const lvl = props.level ?? "h1";
+	return {
+		tag: lvl,
+		_documentProps: { level: Number.parseInt(String(lvl).replace("h", ""), 10) || 1 }
+	};
+});
+
+//#endregion
+//#region src/primitives/DocImage.ts
+const DocImage = rocketstyle()({
+	name: "DocImage",
+	component: Element
+}).statics({ _documentType: "image" }).attrs((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 } : {}
+	}
+}));
+
+//#endregion
+//#region src/primitives/DocLink.ts
+const DocLink = rocketstyle()({
+	name: "DocLink",
+	component: Text
+}).theme({
+	color: "#4f46e5",
+	textDecoration: "underline"
+}).statics({ _documentType: "link" }).attrs((props) => ({
+	tag: "a",
+	_documentProps: { href: props.href ?? "#" }
+}));
+
+//#endregion
+//#region src/primitives/DocList.ts
+const DocList = rocketstyle()({
+	name: "DocList",
+	component: Element
+}).theme({
+	marginBottom: 8,
+	paddingLeft: 20
+}).statics({ _documentType: "list" }).attrs((props) => ({
+	tag: props.ordered ? "ol" : "ul",
+	_documentProps: props.ordered ? { ordered: props.ordered } : {}
+}));
+
+//#endregion
+//#region src/primitives/DocListItem.ts
+const DocListItem = rocketstyle()({
+	name: "DocListItem",
+	component: Text
+}).theme({
+	fontSize: 14,
+	lineHeight: 1.5
+}).statics({ _documentType: "list-item" }).attrs((_props) => ({
+	tag: "li",
+	_documentProps: {}
+}));
+
+//#endregion
+//#region src/primitives/DocPage.ts
+const DocPage = rocketstyle()({
+	name: "DocPage",
+	component: Element
+}).theme({
+	backgroundColor: "#ffffff",
+	padding: "25mm"
+}).statics({ _documentType: "page" }).attrs((props) => ({
+	tag: "div",
+	_documentProps: {
+		...props.size ? { size: props.size } : {},
+		...props.orientation ? { orientation: props.orientation } : {}
+	}
+}));
+
+//#endregion
+//#region src/primitives/DocPageBreak.ts
+const DocPageBreak = rocketstyle()({
+	name: "DocPageBreak",
+	component: Element
+}).statics({ _documentType: "page-break" }).attrs((_props) => ({
+	tag: "div",
+	_documentProps: {}
+}));
+
+//#endregion
+//#region src/primitives/DocQuote.ts
+const DocQuote = rocketstyle()({
+	name: "DocQuote",
+	component: Element
+}).theme({
+	borderColor: "#4f46e5",
+	padding: "8px 16px",
+	fontStyle: "italic",
+	color: "#666666"
+}).statics({ _documentType: "quote" }).attrs((props) => ({
+	tag: "blockquote",
+	_documentProps: props.borderColor ? { borderColor: props.borderColor } : {}
+}));
+
+//#endregion
+//#region src/primitives/DocRow.ts
+const DocRow = rocketstyle()({
+	name: "DocRow",
+	component: Element
+}).theme({ direction: "row" }).statics({ _documentType: "row" }).attrs((_props) => ({
+	tag: "div",
+	_documentProps: {}
+}));
+
+//#endregion
+//#region src/primitives/DocSection.ts
+const DocSection = rocketstyle({
+	dimensions: { directions: "direction" },
+	useBooleans: false
+})({
+	name: "DocSection",
+	component: Element
+}).theme({ padding: 0 }).directions({
+	column: {},
+	row: { direction: "row" }
+}).statics({ _documentType: "section" }).attrs((props) => ({
+	tag: "div",
+	_documentProps: { direction: props.direction ?? "column" }
+}));
+
+//#endregion
+//#region src/primitives/DocSpacer.ts
+const DocSpacer = rocketstyle()({
+	name: "DocSpacer",
+	component: Element
+}).statics({ _documentType: "spacer" }).attrs((props) => ({
+	tag: "div",
+	_documentProps: { height: props.height ?? 16 }
+}));
+
+//#endregion
+//#region src/primitives/DocTable.ts
+const DocTable = rocketstyle({
+	dimensions: { variants: "variant" },
+	useBooleans: true
+})({
+	name: "DocTable",
+	component: Element
+}).theme({
+	fontSize: 14,
+	borderColor: "#dddddd"
+}).statics({ _documentType: "table" }).attrs((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 } : {}
+	}
+}));
+
+//#endregion
+//#region src/primitives/DocText.ts
+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" }).attrs((_props) => ({
+	tag: "p",
+	_documentProps: {}
+}));
+
+//#endregion
+//#region src/theme.ts
+const documentTheme = {
+	colors: {
+		primary: "#4f46e5",
+		text: "#333333",
+		textSecondary: "#666666",
+		background: "#ffffff",
+		border: "#dddddd",
+		headerBg: "#1a1a2e",
+		headerText: "#ffffff",
+		stripedRow: "#f9f9f9"
+	},
+	fonts: {
+		heading: "system-ui, -apple-system, sans-serif",
+		body: "system-ui, -apple-system, sans-serif",
+		mono: "ui-monospace, monospace"
+	},
+	sizes: {
+		h1: 32,
+		h2: 24,
+		h3: 20,
+		h4: 18,
+		h5: 16,
+		h6: 14,
+		body: 14,
+		caption: 12,
+		label: 11
+	},
+	spacing: {
+		xs: 4,
+		sm: 8,
+		md: 16,
+		lg: 24,
+		xl: 40
+	}
+};
+
+//#endregion
+//#region src/useDocumentExport.ts
+/**
+* Create a document export helper from a template function.
+*
+* The template function should return a VNode tree built with
+* document primitives (DocHeading, DocText, DocTable, etc.).
+*
+* ```ts
+* const doc = createDocumentExport(() =>
+*   DocDocument({ title: 'Report', children: [
+*     DocHeading({ h1: true, children: 'Sales Report' }),
+*     DocText({ children: 'Q4 summary.' }),
+*   ]})
+* )
+*
+* const tree = doc.getDocNode()
+* // Pass to @pyreon/document's render() for any format
+* ```
+*
+* When @pyreon/document is published, this will also expose
+* convenience methods like toPdf(), toDocx(), download(), etc.
+*/
+function createDocumentExport(templateFn, options = {}) {
+	const getDocNode = () => {
+		return extractDocumentTree$1(templateFn(), options);
+	};
+	return { getDocNode };
+}
+
+//#endregion
+export { DocButton, DocCode, DocColumn, DocDivider, DocDocument, DocHeading, DocImage, DocLink, DocList, DocListItem, DocPage, DocPageBreak, DocQuote, DocRow, DocSection, DocSpacer, DocTable, DocText, DocumentPreview, createDocumentExport, documentTheme, extractDocumentTree, resolveStyles };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@pyreon/document-primitives",
+  "version": "0.3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/ui-system",
+    "directory": "packages/document-primitives"
+  },
+  "description": "Rocketstyle document components — render in browser, export to 18 formats",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "source": "./src/index.ts",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "!lib/**/*.map",
+    "!lib/analysis",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublish": "bun run build",
+    "build": "bun run vl_rolldown_build",
+    "build:watch": "bun run vl_rolldown_build-watch",
+    "lint": "biome check src/",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pyreon/core": ">=0.7.0",
+    "@pyreon/document": ">=0.10.0",
+    "@pyreon/elements": ">=0.3.0",
+    "@pyreon/rocketstyle": ">=0.3.0",
+    "@pyreon/styler": ">=0.3.0",
+    "@pyreon/ui-core": ">=0.3.0"
+  },
+  "dependencies": {
+    "@pyreon/connector-document": "workspace:*"
+  },
+  "devDependencies": {
+    "@pyreon/core": "^0.7.0",
+    "@pyreon/elements": "workspace:*",
+    "@pyreon/rocketstyle": "workspace:*",
+    "@pyreon/styler": "workspace:*",
+    "@pyreon/ui-core": "workspace:*",
+    "@vitus-labs/tools-rolldown": "^1.15.4",
+    "@pyreon/typescript": "^0.7.4"
+  }
+}