react-pdf-builder
Version:
Build beautiful PDF documents in React.
318 lines (317 loc) • 34.3 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Demo = void 0;
const renderer_1 = require("@react-pdf/renderer");
const react_1 = __importDefault(require("react"));
const Fonts_1 = require("../../fonts/Fonts");
const ThemeBuilder_1 = require("../../themes/ThemeBuilder");
const Themes_1 = require("../../themes/Themes");
const BackdropDecorators_1 = require("../backdrops/BackdropDecorators");
const GradientBackdrop_1 = require("../backdrops/GradientBackdrop");
const ThemedLink_1 = require("../basics/ThemedLink");
const ThemedPage_1 = require("../basics/ThemedPage");
const Button_1 = require("../button/Button");
const Card_1 = require("../card/Card");
const CardBody_1 = require("../card/CardBody");
const CardHeader_1 = require("../card/CardHeader");
const Box_1 = require("../layout/Box");
const ListItem_1 = require("../lists/ListItem");
const OrderedList_1 = require("../lists/OrderedList");
const UnorderedList_1 = require("../lists/UnorderedList");
const PageNumber_1 = require("../pages/PageNumber");
const CircleShape_1 = require("../shapes/CircleShape");
const Gradients_1 = require("../shapes/Gradients");
const RectangleShape_1 = require("../shapes/RectangleShape");
const Signature_1 = require("../signature/Signature");
const Table_1 = require("../table/Table");
const TableCell_1 = require("../table/TableCell");
const TableRow_1 = require("../table/TableRow");
const Blockquote_1 = require("../typography/Blockquote");
const Heading1_1 = require("../typography/Heading1");
const Heading2_1 = require("../typography/Heading2");
const Heading3_1 = require("../typography/Heading3");
const Heading4_1 = require("../typography/Heading4");
const Heading5_1 = require("../typography/Heading5");
const Heading6_1 = require("../typography/Heading6");
const Paragraph_1 = require("../typography/Paragraph");
const ThemedText_1 = require("../basics/ThemedText");
const HorizontalRule_1 = require("../hr/HorizontalRule");
const EllipseShape_1 = require("../shapes/EllipseShape");
const PDFThemeProvider_1 = require("../theme/PDFThemeProvider");
/**
* A Demo of React PDF Builder
*/
const Demo = (_a) => {
var _b, _c;
var { themeName = 'light', pageSize = 'LETTER', orientation = 'portrait', showCoverPage = true, override, scale = 1 } = _a, props = __rest(_a, ["themeName", "pageSize", "orientation", "showCoverPage", "override", "scale"]);
const buttonHref = 'https://github.com/justinmahar/react-pdf-builder';
const themeBuilder = themeName === 'dark' ? Themes_1.Themes.dark : Themes_1.Themes.light;
// Register fonts
const bodyFont = Fonts_1.Fonts.load(Fonts_1.Fonts.sansSerif.lato);
renderer_1.Font.register(bodyFont);
const titleFont = Fonts_1.Fonts.load(Fonts_1.Fonts.serif.ebGaramond);
renderer_1.Font.register(titleFont);
renderer_1.Font.registerEmojiSource(Fonts_1.Fonts.emojis.joyPixels());
// Disable hyphenation
renderer_1.Font.registerHyphenationCallback(Fonts_1.Fonts.noHyphenation);
const themeOverride = {
pageProps: { style: { fontFamily: bodyFont === null || bodyFont === void 0 ? void 0 : bodyFont.family } },
};
const themeConfig = {
scale,
override: ThemeBuilder_1.ThemeBuilder.overrideTheme(override !== null && override !== void 0 ? override : {}, themeOverride),
};
const theme = themeBuilder.build(themeConfig);
const footerHeight = '12.12%';
const pagePadding = 72 * 0.5 * scale;
return (react_1.default.createElement("div", Object.assign({}, props),
react_1.default.createElement(renderer_1.PDFViewer, { style: { height: 700, width: 500 } },
react_1.default.createElement(renderer_1.Document, null,
react_1.default.createElement(PDFThemeProvider_1.PDFThemeProvider, { theme: theme },
showCoverPage && (react_1.default.createElement(ThemedPage_1.ThemedPage, { size: pageSize, orientation: orientation, className: "flex-column text-white p-0" },
react_1.default.createElement(GradientBackdrop_1.GradientBackdrop, { size: pageSize, orientation: orientation, swatch: "blue", darken: true, darkenAmounts: [0.4, 0.7] }, BackdropDecorators_1.BackdropDecorators.circles3),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "h-100" },
react_1.default.createElement(Box_1.Box, { style: { height: '5%', backgroundColor: '#00000022' } }),
react_1.default.createElement(Box_1.Box, { style: { height: '15%' } }),
react_1.default.createElement(Box_1.Box, { dir: "y", shrink: true, className: "justify-content-center p-4", style: {
backgroundColor: '#00000022',
} },
react_1.default.createElement(Heading1_1.Heading1, { className: "text-center display-3 fw-semibold", style: { fontFamily: titleFont === null || titleFont === void 0 ? void 0 : titleFont.family } }, "React PDF Builder"),
react_1.default.createElement(Heading5_1.Heading5, { className: "text-center fs-3 fw-medium" }, "Build beautiful PDF documents in React.")),
react_1.default.createElement(Box_1.Box, { grow: true, className: "justify-content-center align-items-center" },
react_1.default.createElement(renderer_1.Image, { src: "https://justinmahar.github.io/react-pdf-builder/images/logo-red.png", style: { width: 200 * scale } })),
react_1.default.createElement(Box_1.Box, { style: { height: '5%', backgroundColor: '#00000022' } })))),
react_1.default.createElement(ThemedPage_1.ThemedPage, { size: pageSize, orientation: orientation },
react_1.default.createElement(GradientBackdrop_1.GradientBackdrop, { size: pageSize, orientation: orientation, gradient: [
{ offset: '0%', stopColor: 'red', stopOpacity: 0 },
{ offset: '100%', stopColor: 'red', stopOpacity: 0 },
] },
react_1.default.createElement(RectangleShape_1.RectangleShape, { linearGradientCoords: { x1: 0.85, y1: 0.5, x2: 0.87, y2: 0 }, gradient: [
{ offset: '0%', stopColor: '#000000', stopOpacity: 0 },
{ offset: '96%', stopColor: '#000000', stopOpacity: 0 },
{ offset: '96%', stopColor: theme.colorScheme.greyscale.black, stopOpacity: 0.05 },
{ offset: '100%', stopColor: theme.colorScheme.greyscale.black, stopOpacity: 0.05 },
] }),
react_1.default.createElement(RectangleShape_1.RectangleShape, { linearGradientCoords: { x1: 0.83, y1: 0.5, x2: 0.88, y2: 0 }, gradient: [
{ offset: '0%', stopColor: '#000000', stopOpacity: 0 },
{ offset: '96%', stopColor: '#000000', stopOpacity: 0 },
{ offset: '96%', stopColor: theme.colorScheme.greyscale.black, stopOpacity: 0.05 },
{ offset: '100%', stopColor: theme.colorScheme.greyscale.black, stopOpacity: 0.05 },
] }),
react_1.default.createElement(RectangleShape_1.RectangleShape, { linearGradientCoords: { x1: 0.81, y1: 0.5, x2: 0.9, y2: 0 }, gradient: [
{ offset: '0%', stopColor: '#000000', stopOpacity: 0 },
{ offset: '96%', stopColor: '#000000', stopOpacity: 0 },
{ offset: '96%', stopColor: theme.colorScheme.greyscale.black, stopOpacity: 0.05 },
{ offset: '100%', stopColor: theme.colorScheme.greyscale.black, stopOpacity: 0.05 },
] })),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "gap-2" },
react_1.default.createElement(Heading5_1.Heading5, { rule: true }, "Basic Typography"),
react_1.default.createElement(Heading1_1.Heading1, { rule: true }, "Heading 1"),
react_1.default.createElement(Heading2_1.Heading2, { rule: true }, "Heading 2"),
react_1.default.createElement(Heading3_1.Heading3, { rule: true }, "Heading 3"),
react_1.default.createElement(Heading4_1.Heading4, { rule: true }, "Heading 4"),
react_1.default.createElement(Heading5_1.Heading5, { rule: true }, "Heading 5"),
react_1.default.createElement(Heading6_1.Heading6, { rule: true }, "Heading 6"),
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" },
"Paragraph text. ",
react_1.default.createElement(ThemedLink_1.ThemedLink, { href: "#" }, "This is a link."),
' ',
react_1.default.createElement(ThemedText_1.ThemedText, { className: "fw-bold" }, "This text is bold."),
' ',
react_1.default.createElement(ThemedText_1.ThemedText, { className: "fst-italic" }, "This text is italic."),
" And next, let's try using some emojis in this paragraph. \u2615\uFE0F\uD83D\uDC4D\u2705"),
react_1.default.createElement(HorizontalRule_1.HorizontalRule, null),
react_1.default.createElement(Paragraph_1.Paragraph, null, "Above this paragraph is a horizontal rule. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Below is a signature component."),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "gap-1 ms-auto", style: { width: 400 * scale } },
react_1.default.createElement(Signature_1.Signature, { x: true, className: "mb-0" }),
react_1.default.createElement(Paragraph_1.Paragraph, { className: "small" }, "Sign here")),
react_1.default.createElement(Heading5_1.Heading5, { rule: true, break: true }, "Unordered Lists"),
react_1.default.createElement(UnorderedList_1.UnorderedList, null,
react_1.default.createElement(ListItem_1.ListItem, null, "React"),
react_1.default.createElement(ListItem_1.ListItem, null, "PDF"),
react_1.default.createElement(ListItem_1.ListItem, null, "Builder"),
react_1.default.createElement(ListItem_1.ListItem, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
react_1.default.createElement(Heading5_1.Heading5, { rule: true }, "Ordered Lists"),
react_1.default.createElement(OrderedList_1.OrderedList, null,
react_1.default.createElement(ListItem_1.ListItem, null, "List Item A"),
react_1.default.createElement(ListItem_1.ListItem, null, "List Item B"),
react_1.default.createElement(ListItem_1.ListItem, null, "List Item C"),
react_1.default.createElement(ListItem_1.ListItem, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
react_1.default.createElement(Heading5_1.Heading5, { rule: true }, "Unstyled Lists"),
react_1.default.createElement(OrderedList_1.OrderedList, { unstyled: true },
react_1.default.createElement(ListItem_1.ListItem, null, "This list has no bullets or numbers"),
react_1.default.createElement(ListItem_1.ListItem, null, "Second list item"),
react_1.default.createElement(ListItem_1.ListItem, null, "Third list item")),
react_1.default.createElement(Heading5_1.Heading5, { rule: true, break: true }, "Blockquotes"),
react_1.default.createElement(Box_1.Box, { className: "gap-3 flex-wrap justify-content-center" },
react_1.default.createElement(Blockquote_1.Blockquote, { wrap: false, className: "mb-0", style: { width: 220 * scale } }, "Default blockquote"),
Object.keys((_c = (_b = theme.colorScheme) === null || _b === void 0 ? void 0 : _b.contrast) !== null && _c !== void 0 ? _c : {}).map((swatch, i) => (react_1.default.createElement(Blockquote_1.Blockquote, { className: "mb-0", wrap: false, break: i > 0 && (i + 1) % 16 === 0, key: `bq-${swatch}`, swatch: swatch, style: { width: 220 * scale } }, `"${swatch}" swatch`)))),
react_1.default.createElement(Heading5_1.Heading5, { rule: true, break: true }, "Tables"),
react_1.default.createElement(Heading6_1.Heading6, null, "Plain and bordered inside, 80% width"),
react_1.default.createElement(Box_1.Box, { className: "justify-content-center mb-3" },
react_1.default.createElement(Table_1.Table, { borderedInside: true, style: { width: '80%' } },
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, { className: "justify-content-end text-end" }, "Lorem ipsum"),
react_1.default.createElement(TableCell_1.TableCell, { className: "justify-content-end text-center" }, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, { className: "justify-content-end" }, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, { className: "text-end" }, "Incididunt ut labore"),
react_1.default.createElement(TableCell_1.TableCell, { className: "text-center" }, "Lorem ipsum dolor sit amet"),
react_1.default.createElement(TableCell_1.TableCell, null, "Dolore magna aliqua")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, { className: "text-end" }, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, { className: "text-center" }, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")))),
react_1.default.createElement(Heading6_1.Heading6, null, "Striped, horizontal bordered, with page wrapping support"),
react_1.default.createElement(Table_1.Table, { borderedOutside: true, borderedHorizontal: true, striped: true, className: "mb-0" },
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Incididunt ut labore"),
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua."),
react_1.default.createElement(TableCell_1.TableCell, null, "Dolore magna aliqua")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Incididunt ut labore"),
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua."),
react_1.default.createElement(TableCell_1.TableCell, null, "Dolore magna aliqua")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "Consectetur adipiscing elit"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod"))),
react_1.default.createElement(Heading6_1.Heading6, null, "Styled with column widths 30%, 50%, 20%"),
react_1.default.createElement(Table_1.Table, { bordered: true, inverseStriped: true, swatch: "primary", className: "rounded", colWidths: ['30%', '50%', '20%'] },
react_1.default.createElement(TableRow_1.TableRow, { swatch: "primary", inverseStriped: false, className: "fw-bold" },
react_1.default.createElement(TableCell_1.TableCell, null, "Col 30%"),
react_1.default.createElement(TableCell_1.TableCell, null, "Column 50%"),
react_1.default.createElement(TableCell_1.TableCell, null, "20%")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, null, "Lorem ipsum dolor"),
react_1.default.createElement(TableCell_1.TableCell, null, "This table has the \"primary\" swatch with inverseStriped"),
react_1.default.createElement(TableCell_1.TableCell, null, "Sed do eiusmod")),
react_1.default.createElement(TableRow_1.TableRow, null,
react_1.default.createElement(TableCell_1.TableCell, { swatch: "blue" }, "Blue swatch"),
react_1.default.createElement(TableCell_1.TableCell, null,
"This cell has a horizontal rule with the \"blue\" swatch.",
react_1.default.createElement(HorizontalRule_1.HorizontalRule, { swatch: "blue" }),
"Sed do eiusmod tempor incididunt ut labore et magna aliqua."),
react_1.default.createElement(TableCell_1.TableCell, null, "Dolore magna aliqua")),
react_1.default.createElement(TableRow_1.TableRow, { colWidths: ['80%', '20%'] },
react_1.default.createElement(TableCell_1.TableCell, null, "This row has only two cells. The first is 80%, the second is 20%. This imitates a colspan."),
react_1.default.createElement(TableCell_1.TableCell, { swatch: "teal" }, "Teal swatch")),
react_1.default.createElement(TableRow_1.TableRow, { colWidths: ['50%', '50%'] },
react_1.default.createElement(TableCell_1.TableCell, null, "50% col width"),
react_1.default.createElement(TableCell_1.TableCell, null, "50% col width"))),
react_1.default.createElement(Heading5_1.Heading5, { rule: true, break: true }, "Cards & Buttons"),
react_1.default.createElement(Card_1.Card, null,
react_1.default.createElement(CardHeader_1.CardHeader, null,
react_1.default.createElement(Heading5_1.Heading5, { className: "mb-0" }, "Card Title")),
react_1.default.createElement(CardBody_1.CardBody, null,
react_1.default.createElement(Box_1.Box, { className: "flex-wrap justify-content-center gap-2" },
react_1.default.createElement(Button_1.Button, { swatch: "primary", href: buttonHref }, "Primary"),
react_1.default.createElement(Button_1.Button, { swatch: "secondary", href: buttonHref }, "Secondary"),
react_1.default.createElement(Button_1.Button, { swatch: "success", href: buttonHref }, "Success"),
react_1.default.createElement(Button_1.Button, { swatch: "danger", href: buttonHref }, "Danger"),
react_1.default.createElement(Button_1.Button, { swatch: "warning", href: buttonHref }, "Warning"),
react_1.default.createElement(Button_1.Button, { swatch: "info", href: buttonHref }, "Info"),
react_1.default.createElement(Button_1.Button, { swatch: "light", href: buttonHref }, "Light"),
react_1.default.createElement(Button_1.Button, { swatch: "dark", href: buttonHref }, "Dark"),
react_1.default.createElement(Button_1.Button, { swatch: "link", href: buttonHref }, "Link")))),
react_1.default.createElement(Card_1.Card, { swatch: "primary" },
react_1.default.createElement(CardHeader_1.CardHeader, null,
react_1.default.createElement(Heading5_1.Heading5, { className: "mb-0" }, "Primary Card")),
react_1.default.createElement(CardBody_1.CardBody, null,
react_1.default.createElement(Paragraph_1.Paragraph, null, "Cards can be swatched using theme colors, greyscale colors, or palette colors. Border, background, and the header text contrast color will be configured based on the theme's color scheme."),
react_1.default.createElement(Box_1.Box, { className: "flex-wrap justify-content-center gap-2" },
react_1.default.createElement(Button_1.Button, { swatch: "blue", href: buttonHref }, "Blue"),
react_1.default.createElement(Button_1.Button, { swatch: "indigo", href: buttonHref }, "Indigo"),
react_1.default.createElement(Button_1.Button, { swatch: "purple", href: buttonHref }, "Purple"),
react_1.default.createElement(Button_1.Button, { swatch: "pink", href: buttonHref }, "Pink"),
react_1.default.createElement(Button_1.Button, { swatch: "red", href: buttonHref }, "Red"),
react_1.default.createElement(Button_1.Button, { swatch: "orange", href: buttonHref }, "Orange"),
react_1.default.createElement(Button_1.Button, { swatch: "yellow", href: buttonHref }, "Yellow"),
react_1.default.createElement(Button_1.Button, { swatch: "green", href: buttonHref }, "Green"),
react_1.default.createElement(Button_1.Button, { swatch: "teal", href: buttonHref }, "Teal"),
react_1.default.createElement(Button_1.Button, { swatch: "cyan", href: buttonHref }, "Cyan")))),
react_1.default.createElement(Heading5_1.Heading5, { rule: true, break: true }, "Layout"),
react_1.default.createElement(Heading6_1.Heading6, null, "Horizontal Box"),
react_1.default.createElement(Box_1.Box, null,
react_1.default.createElement(Box_1.Box, { grow: true, className: "justify-content-center align-items-center border border-end-0 p-3" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Grow")),
react_1.default.createElement(Box_1.Box, { className: "justify-content-center align-items-center border border-end-0 p-3" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Shrink")),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "justify-content-center align-items-center border text-justify w-50 p-3" },
react_1.default.createElement(Paragraph_1.Paragraph, null, "Width 50%. Text justified. Specify a width to allow text wrapping."),
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),
react_1.default.createElement(Box_1.Box, { className: "mb-3 gap-2" },
react_1.default.createElement(Box_1.Box, { grow: true, className: "justify-content-center align-items-center border py-2 px-3" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Grow")),
react_1.default.createElement(Box_1.Box, { shrink: true, className: "justify-content-center align-items-center border py-2 px-3" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Shrink")),
react_1.default.createElement(Box_1.Box, { className: "justify-content-center align-items-center border py-2 px-3 w-50" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "50%"))),
react_1.default.createElement(Blockquote_1.Blockquote, { swatch: "info" },
react_1.default.createElement(Box_1.Box, { className: "gap-3" },
react_1.default.createElement(ThemedText_1.ThemedText, null, "\u2139\uFE0F"),
react_1.default.createElement(ThemedText_1.ThemedText, null, "Borders have been added to visualize boundaries."))),
react_1.default.createElement(Heading6_1.Heading6, { break: true }, "Vertical Box"),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "mb-3" },
react_1.default.createElement(Box_1.Box, { className: "justify-content-center align-items-center border border-bottom-0 p-3" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "A")),
react_1.default.createElement(Box_1.Box, { className: "justify-content-center align-items-center border border-bottom-0 p-3" },
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "B")),
react_1.default.createElement(Box_1.Box, { dir: "y", className: "justify-content-center align-items-center border text-justify p-3" },
react_1.default.createElement(Paragraph_1.Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
react_1.default.createElement(Paragraph_1.Paragraph, { className: "mb-0" }, "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))),
react_1.default.createElement(Blockquote_1.Blockquote, { swatch: "info" },
react_1.default.createElement(Box_1.Box, { className: "gap-3" },
react_1.default.createElement(ThemedText_1.ThemedText, null, "\u2139\uFE0F"),
react_1.default.createElement(ThemedText_1.ThemedText, null, "Borders have been added to visualize boundaries."))),
react_1.default.createElement(Heading5_1.Heading5, { rule: true, break: true }, "SVG Shapes"),
react_1.default.createElement(Paragraph_1.Paragraph, null, "Shape components are available for circles, ellipses, rectangles, and squares. These components make SVG sizing, gradients, and strokes convenient for these four simple shapes so you can focus on bringing your design to life."),
react_1.default.createElement(Heading6_1.Heading6, { rule: true }, "Circles & Ellipses"),
react_1.default.createElement(Box_1.Box, { className: "mb-4 gap-4" },
react_1.default.createElement(Box_1.Box, null,
react_1.default.createElement(CircleShape_1.CircleShape, { size: 75 * scale, fill: "red" })),
react_1.default.createElement(Box_1.Box, { style: { padding: 10 * scale } },
react_1.default.createElement(EllipseShape_1.EllipseShape, { width: 100 * scale, height: 60 * scale, gradient: ['yellow', 'maroon'], ellipseProps: { stroke: 'maroon', strokeWidth: 2 * scale }, gradientType: Gradients_1.GradientType.radial, style: { transform: 'rotate(15deg)' } }))),
react_1.default.createElement(Heading6_1.Heading6, { rule: true }, "Rectangles & Squares"),
react_1.default.createElement(Box_1.Box, { className: "mb-4 gap-4" },
react_1.default.createElement(Box_1.Box, null,
react_1.default.createElement(RectangleShape_1.RectangleShape, { width: 75 * scale, height: 150 * scale, fill: "orange", color: "red" })),
react_1.default.createElement(Box_1.Box, null,
react_1.default.createElement(RectangleShape_1.RectangleShape, { className: "mt-3 ms-4", width: 75 * scale, height: 75 * scale, gradient: ['lightblue', 'darkblue'], gradientType: Gradients_1.GradientType.topLeftToBottomRight, rectProps: { stroke: 'darkblue', strokeWidth: 3 * scale }, style: { transform: 'rotate(15deg)' } }))),
react_1.default.createElement(Paragraph_1.Paragraph, null, "Shapes can be rotated, scaled, and skewed using the CSS transform style. Additional SVG components are available for more advanced SVG creation.")),
react_1.default.createElement(Box_1.Box, { fixed: true, className: "position-absolute start-0 bottom-0 w-100 justify-content-between gap-2 align-items-end", style: {
height: footerHeight,
paddingLeft: pagePadding,
paddingRight: pagePadding,
paddingBottom: pagePadding,
} },
react_1.default.createElement(ThemedLink_1.ThemedLink, { href: "https://github.com/justinmahar/react-pdf-builder", className: "text-decoration-none" }, "React PDF Builder"),
react_1.default.createElement(PageNumber_1.PageNumber, { format: "Page %n of %t" }))))))));
};
exports.Demo = Demo;