Kakemono - React PDF Generator

Docs: https://www.notion.so/gethearth/Emakimono-d6ec11368ea5433ab9743b1b8c725a23

What is Kakemono?

Kakemono is a library to convert specially formatted JSON and Variables Objects into a properly formatted React PDF. Currently, at Hearth, we use Kakemono for our Contracts, Invoices, and Quotes product to allow users to render customized PDFs.

Some of the key features of Kakemono include:

• Preview and Finalized PDF Renders
• Custom Runtime Variables
• Multiple Node Types (Document, Page, View, Markdown, Image, Image List, Line Items, Rows, Total Quotes Row, Signature, Checkbox, Table, Text Entry, ParseableHtml, Textbox, and Footer Link)

Kakemono exposes two methods. Both accept the same arguments:

    fileBlob: JSON blob
    fileVariables: Record<string, any>

fileBlob and fileVariables should be structured according to the documentation.

The methods:

1. useGeneratePdf: Returns:

    {
        instance: {
            loading: boolean;
            blob: Blob | null;
            url: string | null;
            error: string | null;
        }
        update: () => void;
    }

instance contains the data used to render a PDF. update tells Kakemono to regenerate the PDF. You must call update to show a modified version of the PDF when related values change.

useGeneratePdf is a React hook, and the rules of hooks apply to it.

2. renderPdfToStream: Returns a ReadableStream. renderPdfToStream should be used whenever we need to generate a PDF on the server side (currently handled in daidokoro, a Vercel lambda that calls renderPdfToStream, uploads the PDF to S3, and returns a presigned URL).

How does Kakemono work?

Emakimono is the team tasked to build out Kakemono, Hearth’s PDF Generator tool for Contracts, Quotes, Invoices, and more. Kakemono takes in a JSON Blob from Izakaya, Bonsai, or Ginza, and returns a URL to a readily-made and formatted PDF.

1. Kakemono receives a JSON Blob and a Variables Object from Izakaya, Bonsai, or Ginza through the access point useGenerate, which in short, returns back a PDF
   1. Example: const result = useGeneratePdf(exampleBlob, variablesObject)
2. Once Kakemono receives the JSON Blob, it parses through each of the Nodes and converts that to a React PDF Component
3. Then, Kakemono looks at the Variables Object to feed information about the homeowner, contractor, and more, during runtime
4. Kakemono then takes all of these components and stitches them together into one single PDF
5. Then, it returns back the PDF as a Blob or URL via useGeneratePdf, which can then be displayed, downloaded, or stored in an S3 bucket

Testing Kakemono

1. In the Kakemono directory, run npm link
2. In the directory of the app in which you want to test Kakemono, run npm link kakemono
3. If you encounter an error related to the rules of hooks, run the following command in the Kakemono directory: npm link <path-to-test-app>/node_modules/react

While Kakemono is linked, you can update the version used in the test app by running npm link again from the Kakemono directory.

Kakemono Documentation

How Kakemono Works & Setting It Up: Link Emakimono is the team tasked to build out Kakemono, Hearth’s PDF Generator tool for Contracts, Quotes, Invoices, and more. Kakemono takes in a JSON Blob from Izakaya, Bonsai, or Ginza, and returns a URL to a readily-made and formatted PDF.

PDF-Generator Setup Document: Link PDF-gen is our PDF generator that utilizes the Kakemono library to create customizable PDFs through JSON Blobs. PDF-gen is a helper application that connects to Kakemono to help developers build and test JSON Blobs and view their resulting PDF files.

PDF Component Props: Link In this document, we will specify all the various PDF Components in Kakemono, list their properties, and visually display the PDF Component. In total, we have built 14 different components, each having unique types and properties.

JSON Building: Link

Example JSON Blobs and Variables: Link