@pdfme/ui 2.2.0 → 3.0.0-beta.2

package/README.md

@@ -1,4 +1,5 @@
 # PDFME
+
 <p>
   <a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
@@ -12,7 +13,7 @@
   <a href="https://npmcharts.com/compare/@pdfme/ui?minimal=true">
     <img src="https://img.shields.io/npm/dm/@pdfme/ui.svg" alt="Downloads per month on npm." />
   </a>
-  <a href="https://pdfme.com/development-guide#contribution">
+  <a href="https://pdfme.com/docs/development-guide#contribution">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
   <a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
@@ -53,7 +54,7 @@ As an example, the author's service [https://labelmake.jp/](https://labelmake.jp
 
 ## Installation
 
-The operating requirements should be the node environment `>=16`.    
+The operating requirements should be the node environment `>=16`.  
 There are two packages in pdfme, generator and UI.
 
 The package for generating PDF can be installed with the following command.
@@ -68,30 +69,34 @@ The packages for using PDF designer, forms and viewers can be installed with the
 npm i @pdfme/ui @pdfme/common
 ```
 
-*You must install `@pdfme/common` regardless of which package you use.
+\*You must install `@pdfme/common` regardless of which package you use.
 
 The following type, function and classes are available in pdfme.
 
+`@pdfme/common`
+
+- [Template](https://pdfme.com/docs/getting-started#template)
+
 `@pdfme/generator`
 
 - [generate](https://pdfme.com/docs/getting-started#generator)
-- [Template](https://pdfme.com/docs/getting-started#template)
 
 `@pdfme/ui`
 
 - [Designer](https://pdfme.com/docs/getting-started#designer)
 - [Form](https://pdfme.com/docs/getting-started#form)
 - [Viewer](https://pdfme.com/docs/getting-started#viewer)
-- [Template](https://pdfme.com/docs/getting-started#template)
 
 If your environment uses webpack, import the necessary items as shown below.
 
 ```ts
-import { Template, generate } from '@pdfme/generator';
+import type { Template } from '@pdfme/common';
+import { generate } from '@pdfme/generator';
 ```
 
 ```ts
-import { Template, Designer, Form, Viewer } from '@pdfme/ui';
+import type { Template } from '@pdfme/common';
+import { Designer, Form, Viewer } from '@pdfme/ui';
 ```
 
 **All objects use `Template`, which will be briefly explained in the next section.**
@@ -113,11 +118,9 @@ The following image is a good illustration of a template.
 **basePdf** can be given a `string`(base64), `ArrayBuffer`, or `Uint8Array`.  
 A blank A4 PDF can be imported with `BLANK_PDF`. You can use it to check how it works.
 
-**schemas** currently has the following types of data available
-
-- text
-- image
-- Various types of barcodes
+**schemas** can only utilize text by default, but you can load images and various barcodes like QR codes as plugins from the `@pdfme/schemas` package.  
+Additionally, you can create your own schemas, allowing you to render types other than the ones mentioned above.  
+Check detail about [Custom Schemas](https://pdfme.com/docs/custom-schemas) from here
 
 Let's take a look at some specific data.  
 (If you are using TypeScript, you can import the Template type.)
@@ -125,8 +128,7 @@ Let's take a look at some specific data.
 ### Minimal Template
 
 ```ts
-import { Template, BLANK_PDF } from '@pdfme/generator';
-// import { Template, BLANK_PDF } from '@pdfme/ui'; <- Template types and BLANK_PDF can also be imported from @pdfme/ui.
+import { Template, BLANK_PDF } from '@pdfme/common';
 
 const template: Template = {
   basePdf: BLANK_PDF,
@@ -155,8 +157,6 @@ const template: Template = {
 };
 ```
 
-[For more information, please refer to the API documentation of the Template type here](https://pdfme.com/docs/api/common/#template).
-
 You can create a template from [Template Design page](https://pdfme.com/template-design). Or, if you want to integrate the template creation feature into your application, check out the [Designer section](https://pdfme.com/docs/getting-started#designer).
 
 ## Generator
@@ -166,7 +166,8 @@ The PDF generator function, `generate`, takes 2 arguments of `template` and `inp
 The code to generate a PDF file using the [template created above](https://pdfme.com/docs/getting-started#sample-template) is shown below.
 
 ```ts
-import { Template, generate } from '@pdfme/generator';
+import type { Template } from '@pdfme/common';
+import { generate } from '@pdfme/generator';
 
 const template: Template = {
   // skip...　Check the Template section.
@@ -187,14 +188,14 @@ generate({ template, inputs }).then((pdf) => {
 
 You can create a PDF file like the below.
 
-![](https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/simplePdf.png)
+![](https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/simple-pdf.png)
 
 Also, each element in the inputs array corresponds to a page in the PDF, you can create a multi-page PDF file by providing multiple elements of inputs.
 
-[For more information, please refer to the API documentation of the generate function here](https://pdfme.com/docs/api/generator/#generate).
-
 ## UI
 
+The UI is composed of the Designer, Form, and Viewer classes.
+
 ### Designer
 
 The Designer allows you to edit the Template schemas, making it easy for anyone to create Template json objects.
@@ -204,7 +205,8 @@ You can design your own template from [Template Design page](https://pdfme.com/t
 Let's integrate the designer using the template created above as the default template.
 
 ```ts
-import { Template, Designer } from '@pdfme/ui';
+import type { Template } from '@pdfme/common';
+import { Designer } from '@pdfme/ui';
 
 const domContainer = document.getElementById('container');
 const template: Template = {
@@ -228,8 +230,6 @@ The designer instance can be manipulated with the following methods.
 - `onSaveTemplate`
 - `destroy`
 
-[For more information, please refer to the API documentation of the Designer class here](https://pdfme.com/docs/api/ui/classes/Designer).
-
 ### Form
 
 You can use templates to create forms and PDF viewers.
@@ -237,7 +237,8 @@ You can use templates to create forms and PDF viewers.
 The Form creates a UI for the user to enter schemas based on the template.
 
 ```ts
-import { Template, Form } from '@pdfme/ui';
+import type { Template } from '@pdfme/common';
+import { Form } from '@pdfme/ui';
 
 const domContainer = document.getElementById('container');
 const template: Template = {
@@ -262,8 +263,6 @@ generate({ template, inputs: form.getInputs() }).then((pdf) => {
 });
 ```
 
-[For more information, please refer to the API documentation of the Form class here](https://pdfme.com/docs/api/ui/classes/Form).
-
 ### Viewer
 
 Viewing a PDF file in a mobile browser is a pain, because it doesn't display well in an iframe.
@@ -273,7 +272,8 @@ The Viewer is a byproduct of the Form development process, but it allows you to
 Using the Viewer is basically the same as using the Form, except that user cannot edit it.
 
 ```ts
-import { Template, Viewer } from '@pdfme/ui';
+import type { Template } from '@pdfme/common';
+import { Viewer } from '@pdfme/ui';
 
 const domContainer = document.getElementById('container');
 const template: Template = {
@@ -286,20 +286,18 @@ const viewer = new Viewer({ domContainer, template, inputs });
 
 ![](https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/viewer.png)
 
-[For more information, please refer to the API documentation of the Viewer class here](https://pdfme.com/docs/api/ui/classes/Viewer).
-
 ## Special Thanks
 
-- [pdf-lib](https://pdf-lib.js.org/):
+- [pdf-lib](https://pdf-lib.js.org/): Used in PDF generation.
 - [fontkit](https://github.com/foliojs/fontkit): Used in font rendering.
 - [PDF.js](https://mozilla.github.io/pdf.js/): Used in PDF viewing.
 - [React](https://reactjs.org/): Used in building the UI.
+- [form-render](https://xrender.fun/form-render): Used in building the UI.
+- [antd](https://ant.design/): Used in building the UI.
 - [react-moveable](https://daybrush.com/moveable/), [react-selecto](https://github.com/daybrush/selecto), [@scena/react-guides](https://daybrush.com/guides/): Used in Designer UI.
 - [dnd-kit](https://github.com/clauderic/dnd-kit): Used in Designer UI.
-- [bwip-js](https://github.com/metafloor/bwip-js): Used in barcode generation.
-- [zod](https://github.com/colinhacks/zod): Used in Validation.
 
-I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.
+  I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.
 
-If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/development-guide) page.  
-We look forward to your contribution!
+If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.  
+We look forward to your contribution!

package/__mocks__/form-render.js

@@ -0,0 +1,7 @@
+const useForm = jest.fn();
+const FormRender = jest.fn();
+
+module.exports = {
+  useForm,
+  default: FormRender,
+};