@formepdf/react 0.1.0

package/dist/components.d.ts

@@ -0,0 +1,200 @@
+import type { DocumentProps, PageProps, ViewProps, TextProps, ImageProps, TableProps, RowProps, CellProps, FixedProps, SvgProps } from './types.js';
+/**
+ * Root document container. Must be the top-level element in every Forme document.
+ *
+ * All other Forme components must be descendants of `<Document>`.
+ *
+ * @param props.title - PDF metadata title
+ * @param props.author - PDF metadata author
+ * @param props.subject - PDF metadata subject
+ * @param props.creator - PDF metadata creator application
+ * @param props.children - Page or content elements
+ *
+ * @example
+ * ```tsx
+ * <Document title="Invoice" author="Acme Corp">
+ *   <Text>Hello World</Text>
+ * </Document>
+ * ```
+ */
+export declare function Document(_props: DocumentProps): null;
+/**
+ * A page boundary with explicit size and margin configuration.
+ *
+ * When used, content inside each `<Page>` is laid out independently.
+ * Without `<Page>`, content uses the document's default page config.
+ *
+ * @param props.size - Page size: `"A4"`, `"Letter"`, `"Legal"`, `"A3"`, `"A5"`, `"Tabloid"`, or `{ width, height }` in points
+ * @param props.margin - Page margins as a uniform number or `{ top, right, bottom, left }`
+ * @param props.children - Content elements for this page
+ *
+ * @example
+ * ```tsx
+ * <Document>
+ *   <Page size="Letter" margin={72}>
+ *     <Text>US Letter page with 1-inch margins</Text>
+ *   </Page>
+ * </Document>
+ * ```
+ */
+export declare function Page(_props: PageProps): null;
+/**
+ * A flex container, analogous to an HTML `<div>`.
+ *
+ * Defaults to `flexDirection: "column"`. Supports all flex properties
+ * including `flexWrap`, `gap`, `justifyContent`, and `alignItems`.
+ *
+ * @param props.style - CSS-like style properties
+ * @param props.wrap - Whether this container can break across pages (default: true). Set to `false` to keep children together.
+ * @param props.children - Child elements
+ *
+ * @example
+ * ```tsx
+ * <View style={{ flexDirection: 'row', gap: 12, padding: 8 }}>
+ *   <Text>Left</Text>
+ *   <Text>Right</Text>
+ * </View>
+ * ```
+ */
+export declare function View(_props: ViewProps): null;
+/**
+ * A text node. Children are flattened to a single string.
+ *
+ * Supports font properties, text alignment, color, and text transforms.
+ * Nested `<Text>` children have their content concatenated.
+ *
+ * @param props.style - Typography and color styles
+ * @param props.children - Text content (strings, numbers, or nested `<Text>`)
+ *
+ * @example
+ * ```tsx
+ * <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#333' }}>
+ *   Invoice Total: $1,234.00
+ * </Text>
+ * ```
+ */
+export declare function Text(_props: TextProps): null;
+/**
+ * An image element. Supports JPEG and PNG via base64 data URIs or file paths.
+ *
+ * If only `width` or `height` is specified, the other dimension is calculated
+ * from the image's aspect ratio.
+ *
+ * @param props.src - Image source: base64 data URI (`data:image/png;base64,...`) or file path
+ * @param props.width - Display width in points
+ * @param props.height - Display height in points
+ * @param props.style - Additional style properties
+ *
+ * @example
+ * ```tsx
+ * <Image src="data:image/png;base64,..." width={200} />
+ * ```
+ */
+export declare function Image(_props: ImageProps): null;
+/**
+ * A table container. Children should be `<Row>` elements.
+ *
+ * Tables support automatic page breaks between rows and repeat header rows
+ * on continuation pages.
+ *
+ * @param props.columns - Column width definitions: `{ fraction: 0.5 }`, `{ fixed: 100 }`, or `"auto"`
+ * @param props.style - Style properties for the table container
+ * @param props.children - `<Row>` elements
+ *
+ * @example
+ * ```tsx
+ * <Table columns={[{ width: { fraction: 0.6 } }, { width: { fraction: 0.4 } }]}>
+ *   <Row header>
+ *     <Cell><Text>Name</Text></Cell>
+ *     <Cell><Text>Price</Text></Cell>
+ *   </Row>
+ *   <Row>
+ *     <Cell><Text>Widget</Text></Cell>
+ *     <Cell><Text>$10.00</Text></Cell>
+ *   </Row>
+ * </Table>
+ * ```
+ */
+export declare function Table(_props: TableProps): null;
+/**
+ * A table row. Must be a direct child of `<Table>`.
+ *
+ * Header rows (`header={true}`) are automatically repeated at the top of
+ * each continuation page when a table spans multiple pages.
+ *
+ * @param props.header - Whether this is a header row that repeats on page breaks
+ * @param props.style - Style properties (e.g., `backgroundColor` for alternating rows)
+ * @param props.children - `<Cell>` elements
+ *
+ * @example
+ * ```tsx
+ * <Row header style={{ backgroundColor: '#333' }}>
+ *   <Cell><Text style={{ color: '#fff' }}>Header</Text></Cell>
+ * </Row>
+ * ```
+ */
+export declare function Row(_props: RowProps): null;
+/**
+ * A table cell inside a `<Row>`.
+ *
+ * @param props.colSpan - Number of columns this cell spans (default: 1)
+ * @param props.rowSpan - Number of rows this cell spans (default: 1)
+ * @param props.style - Style properties (padding, background, etc.)
+ * @param props.children - Cell content (any Forme elements)
+ *
+ * @example
+ * ```tsx
+ * <Cell colSpan={2} style={{ padding: 8, backgroundColor: '#f5f5f5' }}>
+ *   <Text>Spanning two columns</Text>
+ * </Cell>
+ * ```
+ */
+export declare function Cell(_props: CellProps): null;
+/**
+ * A fixed element that repeats on every page as a header or footer.
+ *
+ * Fixed elements reduce the available content area on each page.
+ * Use `{{pageNumber}}` and `{{totalPages}}` placeholders in text content
+ * for automatic page numbering.
+ *
+ * @param props.position - `"header"` (top of page) or `"footer"` (bottom of page)
+ * @param props.style - Style properties
+ * @param props.children - Content to repeat on each page
+ *
+ * @example
+ * ```tsx
+ * <Fixed position="footer">
+ *   <Text style={{ textAlign: 'center', fontSize: 10 }}>
+ *     Page {'{{pageNumber}}'} of {'{{totalPages}}'}
+ *   </Text>
+ * </Fixed>
+ * ```
+ */
+export declare function Fixed(_props: FixedProps): null;
+/**
+ * An SVG element. Renders basic SVG shapes (rect, circle, ellipse, line, path, polygon, polyline) to PDF.
+ *
+ * @param props.width - Display width in points
+ * @param props.height - Display height in points
+ * @param props.viewBox - SVG viewBox string (e.g., "0 0 100 100")
+ * @param props.content - SVG markup string (the inner content, not the outer <svg> tag)
+ * @param props.style - Additional style properties (margin, etc.)
+ *
+ * @example
+ * ```tsx
+ * <Svg width={100} height={100} viewBox="0 0 100 100"
+ *   content='<rect x="10" y="10" width="80" height="80" fill="blue"/>' />
+ * ```
+ */
+export declare function Svg(_props: SvgProps): null;
+/**
+ * An explicit page break. Content after this element starts on a new page.
+ *
+ * @example
+ * ```tsx
+ * <Text>Page 1 content</Text>
+ * <PageBreak />
+ * <Text>Page 2 content</Text>
+ * ```
+ */
+export declare function PageBreak(_props: object): null;

package/dist/components.js

@@ -0,0 +1,221 @@
+/**
+ * Root document container. Must be the top-level element in every Forme document.
+ *
+ * All other Forme components must be descendants of `<Document>`.
+ *
+ * @param props.title - PDF metadata title
+ * @param props.author - PDF metadata author
+ * @param props.subject - PDF metadata subject
+ * @param props.creator - PDF metadata creator application
+ * @param props.children - Page or content elements
+ *
+ * @example
+ * ```tsx
+ * <Document title="Invoice" author="Acme Corp">
+ *   <Text>Hello World</Text>
+ * </Document>
+ * ```
+ */
+export function Document(_props) {
+    return null;
+}
+/**
+ * A page boundary with explicit size and margin configuration.
+ *
+ * When used, content inside each `<Page>` is laid out independently.
+ * Without `<Page>`, content uses the document's default page config.
+ *
+ * @param props.size - Page size: `"A4"`, `"Letter"`, `"Legal"`, `"A3"`, `"A5"`, `"Tabloid"`, or `{ width, height }` in points
+ * @param props.margin - Page margins as a uniform number or `{ top, right, bottom, left }`
+ * @param props.children - Content elements for this page
+ *
+ * @example
+ * ```tsx
+ * <Document>
+ *   <Page size="Letter" margin={72}>
+ *     <Text>US Letter page with 1-inch margins</Text>
+ *   </Page>
+ * </Document>
+ * ```
+ */
+export function Page(_props) {
+    return null;
+}
+/**
+ * A flex container, analogous to an HTML `<div>`.
+ *
+ * Defaults to `flexDirection: "column"`. Supports all flex properties
+ * including `flexWrap`, `gap`, `justifyContent`, and `alignItems`.
+ *
+ * @param props.style - CSS-like style properties
+ * @param props.wrap - Whether this container can break across pages (default: true). Set to `false` to keep children together.
+ * @param props.children - Child elements
+ *
+ * @example
+ * ```tsx
+ * <View style={{ flexDirection: 'row', gap: 12, padding: 8 }}>
+ *   <Text>Left</Text>
+ *   <Text>Right</Text>
+ * </View>
+ * ```
+ */
+export function View(_props) {
+    return null;
+}
+/**
+ * A text node. Children are flattened to a single string.
+ *
+ * Supports font properties, text alignment, color, and text transforms.
+ * Nested `<Text>` children have their content concatenated.
+ *
+ * @param props.style - Typography and color styles
+ * @param props.children - Text content (strings, numbers, or nested `<Text>`)
+ *
+ * @example
+ * ```tsx
+ * <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#333' }}>
+ *   Invoice Total: $1,234.00
+ * </Text>
+ * ```
+ */
+export function Text(_props) {
+    return null;
+}
+/**
+ * An image element. Supports JPEG and PNG via base64 data URIs or file paths.
+ *
+ * If only `width` or `height` is specified, the other dimension is calculated
+ * from the image's aspect ratio.
+ *
+ * @param props.src - Image source: base64 data URI (`data:image/png;base64,...`) or file path
+ * @param props.width - Display width in points
+ * @param props.height - Display height in points
+ * @param props.style - Additional style properties
+ *
+ * @example
+ * ```tsx
+ * <Image src="data:image/png;base64,..." width={200} />
+ * ```
+ */
+export function Image(_props) {
+    return null;
+}
+/**
+ * A table container. Children should be `<Row>` elements.
+ *
+ * Tables support automatic page breaks between rows and repeat header rows
+ * on continuation pages.
+ *
+ * @param props.columns - Column width definitions: `{ fraction: 0.5 }`, `{ fixed: 100 }`, or `"auto"`
+ * @param props.style - Style properties for the table container
+ * @param props.children - `<Row>` elements
+ *
+ * @example
+ * ```tsx
+ * <Table columns={[{ width: { fraction: 0.6 } }, { width: { fraction: 0.4 } }]}>
+ *   <Row header>
+ *     <Cell><Text>Name</Text></Cell>
+ *     <Cell><Text>Price</Text></Cell>
+ *   </Row>
+ *   <Row>
+ *     <Cell><Text>Widget</Text></Cell>
+ *     <Cell><Text>$10.00</Text></Cell>
+ *   </Row>
+ * </Table>
+ * ```
+ */
+export function Table(_props) {
+    return null;
+}
+/**
+ * A table row. Must be a direct child of `<Table>`.
+ *
+ * Header rows (`header={true}`) are automatically repeated at the top of
+ * each continuation page when a table spans multiple pages.
+ *
+ * @param props.header - Whether this is a header row that repeats on page breaks
+ * @param props.style - Style properties (e.g., `backgroundColor` for alternating rows)
+ * @param props.children - `<Cell>` elements
+ *
+ * @example
+ * ```tsx
+ * <Row header style={{ backgroundColor: '#333' }}>
+ *   <Cell><Text style={{ color: '#fff' }}>Header</Text></Cell>
+ * </Row>
+ * ```
+ */
+export function Row(_props) {
+    return null;
+}
+/**
+ * A table cell inside a `<Row>`.
+ *
+ * @param props.colSpan - Number of columns this cell spans (default: 1)
+ * @param props.rowSpan - Number of rows this cell spans (default: 1)
+ * @param props.style - Style properties (padding, background, etc.)
+ * @param props.children - Cell content (any Forme elements)
+ *
+ * @example
+ * ```tsx
+ * <Cell colSpan={2} style={{ padding: 8, backgroundColor: '#f5f5f5' }}>
+ *   <Text>Spanning two columns</Text>
+ * </Cell>
+ * ```
+ */
+export function Cell(_props) {
+    return null;
+}
+/**
+ * A fixed element that repeats on every page as a header or footer.
+ *
+ * Fixed elements reduce the available content area on each page.
+ * Use `{{pageNumber}}` and `{{totalPages}}` placeholders in text content
+ * for automatic page numbering.
+ *
+ * @param props.position - `"header"` (top of page) or `"footer"` (bottom of page)
+ * @param props.style - Style properties
+ * @param props.children - Content to repeat on each page
+ *
+ * @example
+ * ```tsx
+ * <Fixed position="footer">
+ *   <Text style={{ textAlign: 'center', fontSize: 10 }}>
+ *     Page {'{{pageNumber}}'} of {'{{totalPages}}'}
+ *   </Text>
+ * </Fixed>
+ * ```
+ */
+export function Fixed(_props) {
+    return null;
+}
+/**
+ * An SVG element. Renders basic SVG shapes (rect, circle, ellipse, line, path, polygon, polyline) to PDF.
+ *
+ * @param props.width - Display width in points
+ * @param props.height - Display height in points
+ * @param props.viewBox - SVG viewBox string (e.g., "0 0 100 100")
+ * @param props.content - SVG markup string (the inner content, not the outer <svg> tag)
+ * @param props.style - Additional style properties (margin, etc.)
+ *
+ * @example
+ * ```tsx
+ * <Svg width={100} height={100} viewBox="0 0 100 100"
+ *   content='<rect x="10" y="10" width="80" height="80" fill="blue"/>' />
+ * ```
+ */
+export function Svg(_props) {
+    return null;
+}
+/**
+ * An explicit page break. Content after this element starts on a new page.
+ *
+ * @example
+ * ```tsx
+ * <Text>Page 1 content</Text>
+ * <PageBreak />
+ * <Text>Page 2 content</Text>
+ * ```
+ */
+export function PageBreak(_props) {
+    return null;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Document, Page, View, Text, Image, Table, Row, Cell, Fixed, Svg, PageBreak } from './components.js';
+export { serialize, mapStyle, mapDimension, parseColor, expandEdges, expandCorners } from './serialize.js';
+export { StyleSheet } from './stylesheet.js';
+export { render, renderToObject } from './render.js';
+export type { Style, Edges, Corners, EdgeColors, DocumentProps, PageProps, ViewProps, TextProps, ImageProps, ColumnDef, TableProps, RowProps, CellProps, FixedProps, SvgProps, TextRun, FormeDocument, FormeNode, FormeNodeKind, FormeStyle, FormePageConfig, FormePageSize, FormeEdges, FormeMetadata, FormeColumnDef, FormeColumnWidth, FormeDimension, FormeColor, FormeEdgeValues, FormeCornerValues, } from './types.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+// Components
+export { Document, Page, View, Text, Image, Table, Row, Cell, Fixed, Svg, PageBreak } from './components.js';
+// Serialization
+export { serialize, mapStyle, mapDimension, parseColor, expandEdges, expandCorners } from './serialize.js';
+// StyleSheet
+export { StyleSheet } from './stylesheet.js';
+// Render functions
+export { render, renderToObject } from './render.js';

package/dist/render.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import type { FormeDocument } from './types.js';
+/**
+ * Render a React element tree to a Forme JSON string.
+ * The top-level element must be a <Document>.
+ */
+export declare function render(element: ReactElement): string;
+/**
+ * Render a React element tree to a Forme document object.
+ * The top-level element must be a <Document>.
+ */
+export declare function renderToObject(element: ReactElement): FormeDocument;

package/dist/render.js

@@ -0,0 +1,15 @@
+import { serialize } from './serialize.js';
+/**
+ * Render a React element tree to a Forme JSON string.
+ * The top-level element must be a <Document>.
+ */
+export function render(element) {
+    return JSON.stringify(serialize(element));
+}
+/**
+ * Render a React element tree to a Forme document object.
+ * The top-level element must be a <Document>.
+ */
+export function renderToObject(element) {
+    return serialize(element);
+}

package/dist/serialize.d.ts

@@ -0,0 +1,12 @@
+import { type ReactElement } from 'react';
+import type { Style, Edges, Corners, FormeDocument, FormeStyle, FormeEdges, FormeDimension, FormeColor, FormeCornerValues } from './types.js';
+/**
+ * Serialize a React element tree into a Forme JSON document object.
+ * The top-level element must be a <Document>.
+ */
+export declare function serialize(element: ReactElement): FormeDocument;
+export declare function mapStyle(style?: Style): FormeStyle;
+export declare function mapDimension(val: number | string): FormeDimension;
+export declare function parseColor(hex: string): FormeColor;
+export declare function expandEdges(val: number | Edges): FormeEdges;
+export declare function expandCorners(val: number | Corners): FormeCornerValues;