From a596f3b2bba8428a79a42e9cc2e282456e594a3f Mon Sep 17 00:00:00 2001 From: Kyohei Fukuda Date: Sun, 29 Oct 2023 16:21:41 +0900 Subject: [PATCH] Update website doc --- README.md | 12 +++++++----- packages/generator/README.md | 6 ++++-- packages/generator/package.json | 3 +-- packages/schemas/src/text/uiRender.ts | 8 ++++++-- packages/ui/README.md | 6 ++++-- packages/ui/package.json | 3 +-- website/docs/development-guide.md | 11 +++-------- website/docs/getting-started.md | 14 ++++++++------ website/src/hooks.ts | 2 +- website/src/libs/helper.ts | 2 +- 10 files changed, 36 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 1b2b39bb..a37d5af0 100644 --- a/README.md +++ b/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 diff --git a/packages/generator/README.md b/packages/generator/README.md index d455c2cb..3a9749ee 100644 --- a/packages/generator/README.md +++ b/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. diff --git a/packages/generator/package.json b/packages/generator/package.json index 8f55b236..1744f87a 100644 --- a/packages/generator/package.json +++ b/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", diff --git a/packages/schemas/src/text/uiRender.ts b/packages/schemas/src/text/uiRender.ts index e7388ba1..888f8493 100644 --- a/packages/schemas/src/text/uiRender.ts +++ b/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) => { const { diff --git a/packages/ui/README.md b/packages/ui/README.md index 493e7b29..9153ddbe 100644 --- a/packages/ui/README.md +++ b/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. diff --git a/packages/ui/package.json b/packages/ui/package.json index 91071f50..eedc3025 100644 --- a/packages/ui/package.json +++ b/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": [ diff --git a/website/docs/development-guide.md b/website/docs/development-guide.md index 638da354..45c5223a 100644 --- a/website/docs/development-guide.md +++ b/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 diff --git a/website/docs/getting-started.md b/website/docs/getting-started.md index aaf8504e..fb0288a1 100644 --- a/website/docs/getting-started.md +++ b/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. diff --git a/website/src/hooks.ts b/website/src/hooks.ts index 03579ee6..303a0517 100644 --- a/website/src/hooks.ts +++ b/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'; diff --git a/website/src/libs/helper.ts b/website/src/libs/helper.ts index 484aeb99..a4c8c950 100644 --- a/website/src/libs/helper.ts +++ b/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 => ({