From 40594b0b5371d5d2e7e24ea5e41cb7b069b73293 Mon Sep 17 00:00:00 2001 From: Zavier Miller Date: Thu, 4 Jul 2024 13:07:37 -0500 Subject: [PATCH] add initial readme for pacakges --- .../nodes/receipt-image-browser/README.md | 3 + .../nodes/receipt-image-node/README.md | 3 + .../plugins/nodes/receipt-layout/README.md | 3 + .../renderers/receipt-html-renderer/README.md | 89 +------------------ 4 files changed, 11 insertions(+), 87 deletions(-) create mode 100644 packages/plugins/nodes/receipt-image-browser/README.md create mode 100644 packages/plugins/nodes/receipt-image-node/README.md create mode 100644 packages/plugins/nodes/receipt-layout/README.md diff --git a/packages/plugins/nodes/receipt-image-browser/README.md b/packages/plugins/nodes/receipt-image-browser/README.md new file mode 100644 index 0000000..95441cb --- /dev/null +++ b/packages/plugins/nodes/receipt-image-browser/README.md @@ -0,0 +1,3 @@ +# receipt-image-browser + +docs incoming diff --git a/packages/plugins/nodes/receipt-image-node/README.md b/packages/plugins/nodes/receipt-image-node/README.md new file mode 100644 index 0000000..e086ae7 --- /dev/null +++ b/packages/plugins/nodes/receipt-image-node/README.md @@ -0,0 +1,3 @@ +# receipt-image-node + +docs incoming diff --git a/packages/plugins/nodes/receipt-layout/README.md b/packages/plugins/nodes/receipt-layout/README.md new file mode 100644 index 0000000..0c57e5e --- /dev/null +++ b/packages/plugins/nodes/receipt-layout/README.md @@ -0,0 +1,3 @@ +# receipt-layout + +NOT READY YET diff --git a/packages/plugins/renderers/receipt-html-renderer/README.md b/packages/plugins/renderers/receipt-html-renderer/README.md index 1aa8ecf..2713468 100644 --- a/packages/plugins/renderers/receipt-html-renderer/README.md +++ b/packages/plugins/renderers/receipt-html-renderer/README.md @@ -1,88 +1,3 @@ -# receipt-components +# receipt-html-renderer -This package is for building complex and evolving receipts using a simple XML style language and component engine. The XML is converted to a simple JS representation that is then converted to either HTML or an ESC/POS byte array at runtime with supplied data. - -## Getting started - -First, install the package with yarn or npm: - -`npm install @resaleai/receipt-components` - -After that, import the `ReceiptComponent` class and create a new component with a template: - -```javascript -import { ReceiptComponent } from '@resaleai/receipt-components'; - -let Receipt = new ReceiptComponent({ - template: ` - Hello world! - `, -}); -``` - -## Dependancies - -This project tries not to use any deps, but the image processing does require access to a `Canvas` API. This is always available in the browser, and can be simulated using another package, such as... - -After building the template, you can render the component into either HTML or the ESC/POS bytes using - -```javascript -let htmlStr = Receipt.renderHTML(); // build the HTML -let epBytes = Receipt.renderPrinterBytes(); // build the byte array -``` - -This will output - -**printer bytes and html** - -## Templated - -On top of this, there is a simple templating engine built in for putting dynamic data in the receipts. - -**example** - -## Components - -The component system is simple, but surprisingly powerful. Take, for instance, some sort of legalise that needs to be put on the bottom of every receipt: - -```javascript -let ReceiptLegalise = new ReceiptComponent({ - template: ` - - ------- - - {{ tnLegal }} - - ------- - - `, -}); -``` - -This component, as well as any other components we need, can be used in the template of any other receipt component by registering it in the `components` constructor param. - -```javascript -let Receipt = new ReceiptComponent({ - template: - ` - ... - - ` - components: { - ReceiptLegalise - } -}) - -let output = Receipt.renderPrinterBytes({ - tnLegal: "This is the legal statement, you are legally obligated to have a good time :)" -}) -``` - -Note that the data is global. You must define any data you need in the render function. - -### TODO - -[ ] allow passing options to a different renderer -[ ] build html renderer -[ ] move images in to a separate package -[ ] write docs +docs incoming