Update website doc

README.md

@@ -79,27 +79,29 @@ npm i @pdfme/ui @pdfme/common
 
 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 type { Template } from '@pdfme/generator';
+import type { Template } from '@pdfme/common';
 import { generate } from '@pdfme/generator';
 ```
 
 ```ts
-import type { Template } from '@pdfme/generator';
+import type { Template } from '@pdfme/common';
 import { Designer, Form, Viewer } from '@pdfme/ui';
 ```
 
@@ -292,7 +294,7 @@ const viewer = new Viewer({ domContainer, template, inputs });
 
 ## Examples using pdfme
 
-If you are looking for code examples using pdfme to get started, please check out the [pdfme-playground](https://github.com/pdfme/pdfme-playground) repository 
+If you are looking for code examples using pdfme to get started, please check out the [pdfme-playground](https://github.com/pdfme/pdfme-playground) repository
 or look at the examples in the `websit/src/pages/` folder of this repository. Settings these up is covered in the [DEVELOPMENT.md](DEVELOPMENT.md) file.
 
 ## Special Thanks

packages/generator/README.md

@@ -73,17 +73,19 @@ npm i @pdfme/ui @pdfme/common
 
 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.
 

packages/generator/package.json

@@ -57,8 +57,7 @@
     "pdf2json": "^2.0.0"
   },
   "peerDependencies": {
-    "@pdfme/common": "latest",
-    "@pdfme/schemas": "latest"
+    "@pdfme/common": "latest"
   },
   "jest": {
     "resolver": "ts-jest-resolver",

packages/schemas/src/text/uiRender.ts

@@ -30,7 +30,11 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   return 'flex-start';
 };
 
-function getBackgroundColor(mode: 'form' | 'viewer' | 'designer', value: string, schema: Schema) {
+const getBackgroundColor = (
+  mode: 'form' | 'viewer' | 'designer',
+  value: string,
+  schema: Schema
+) => {
   if ((mode === 'form' || mode === 'designer') && value && schema.backgroundColor) {
     return schema.backgroundColor as string;
   } else if (mode === 'viewer') {
@@ -38,7 +42,7 @@ function getBackgroundColor(mode: 'form' | 'viewer' | 'designer', value: string,
   } else {
     return 'rgb(242 244 255 / 75%)';
   }
-}
+};
 
 export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const {

packages/ui/README.md

@@ -73,17 +73,19 @@ npm i @pdfme/ui @pdfme/common
 
 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.
 

packages/ui/package.json

@@ -71,8 +71,7 @@
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "@pdfme/common": "latest",
-    "@pdfme/schemas": "latest"
+    "@pdfme/common": "latest"
   },
   "jest": {
     "setupFiles": [

website/docs/development-guide.md

@@ -30,20 +30,15 @@ As of writing this page, we just released Version 2 two weeks ago. However, we a
 
 As we aim for the release of the next version, given our limited resources, we anticipate it being a long-term plan. Therefore, to ensure we do not lose sight of our developmental direction and to address our users who are anticipating new features, we have written this document.
 
-- ### [V2 Roadmap](https://github.com/orgs/pdfme/projects/5/views/1)
-  In this version, we mainly address what needs to be done before the release of V3. Development in V2 will not involve any schema other than the text type schema, and we will proceed with development that doesn't depend on schemas. While being conscious of the V3 release, we will improve the completeness of pdfme itself and work towards decoupling schemas from pdfme.
-  - Bug fixes and improvements for text type schema
-  - Bug fixes and usability improvements for the UI package
-  - Refactoring with V3 in mind
 - ### [V3 Roadmap](https://github.com/orgs/pdfme/projects/6/views/1)
   In this version, we will realize a more customizable pdfme to cater to individual user needs. It will be possible to create custom schemas to cater to various needs and designs that better match user sites. We believe that with this version, users will address niche problems and being open source will further make pdfme a special library.
-  - [Custom Schema Plugin](https://github.com/pdfme/pdfme/issues/213)
+  - [x] [Custom Schema Plugin](https://github.com/pdfme/pdfme/issues/213)
     - Allow users to create custom schemas and define PDF and wysiwyg rendering from the outside.
     - Currently built-in schemas will be packaged separately, and improvements will be made individually.
-  - [Custom Design for UI](https://github.com/pdfme/pdfme/issues/243)
+  - [ ] [Custom Design for UI](https://github.com/pdfme/pdfme/issues/243)
     - Allow changes to the accent color (currently it's light blue)
     - Add class names to each UI component to allow customization from the outside.
-  - [Custom Label for UI](https://github.com/pdfme/pdfme/issues/107)
+  - [ ] [Custom Label for UI](https://github.com/pdfme/pdfme/issues/107)
     - Allow users to change the label of the UI component from the outside.
     - Overwrite the any language label with the user's own label
 

website/docs/getting-started.md

@@ -31,17 +31,19 @@ npm i @pdfme/ui @pdfme/common
 
 The following type, function and classes are available in pdfme.
 
+`@pdfme/common`
+
+- [Template](https://pdfme.com/docs/getting-started#template)
+
 `@pdfme/generator`
 
-- [generate](/docs/getting-started#generator)
-- [Template](/docs/getting-started#template)
+- [generate](https://pdfme.com/docs/getting-started#generator)
 
 `@pdfme/ui`
 
-- [Designer](/docs/getting-started#designer)
-- [Form](/docs/getting-started#form)
-- [Viewer](/docs/getting-started#viewer)
-- [Template](/docs/getting-started#template)
+- [Designer](https://pdfme.com/docs/getting-started#designer)
+- [Form](https://pdfme.com/docs/getting-started#form)
+- [Viewer](https://pdfme.com/docs/getting-started#viewer)
 
 If your environment uses webpack, import the necessary items as shown below.
 

website/src/hooks.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Template } from '@pdfme/common';
+import type { Template } from '@pdfme/common';
 import type { Form, Viewer } from '@pdfme/ui';
 import { text, image, barcodes } from '@pdfme/schemas';
 import { getFont } from './libs/helper';

website/src/libs/helper.ts

@@ -1,4 +1,4 @@
-import { Template, Font, checkTemplate } from '@pdfme/generator';
+import { Template, Font, checkTemplate } from '@pdfme/common';
 import { examplePdfb64, dogPngb64 } from './sampleData';
 
 export const getSampleTemplate = (): Template => ({