From 684a4c7f9b5b66fb99ebd37d12f82f8355da2836 Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Wed, 7 Feb 2024 17:35:58 +0800 Subject: [PATCH 1/5] chore: change nodejs version in package.json to node 18 --- README.md | 4 +++- package.json | 2 +- src/templates/examples/TemplateA/index.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2c6187a..a266d81 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ To stay as simple and less opinionated as possible, these are omitted: ### Prerequisite - Node (optionally, use [nvm](https://github.com/nvm-sh/nvm) to manage node version) - - Node version 14 onwards. +- Node version 18 onwards. ### Development @@ -47,11 +47,13 @@ Core components, located in the `src/core directory`, are reusable React compone This repository contains a collection of example templates along with demonstrations of how to use core components. You can find these examples in the `/src/templates` directory. These templates serve as references and guides to help you set up your own templates to meet your unique requirements. #### DocumentQrCode + It allows users to share documents across devices using a QR code. For detailed information on how to use the QR Code Component, please refer to the official documentation [here](https://docs.tradetrust.io/docs/reference/tradetrust-website/qr-code/). #### Wrapper/ Error Boundary + The Wrapper/Error Boundary Component is designed to handle scenarios where a template cannot be rendered correctly. In such cases, this component acts as a fallback, displaying a user-friendly error message and stack. #### PrivacyFilter diff --git a/package.json b/package.json index 507cad3..5b74da3 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "build": "run-s check-types build:app", "build:app": "cross-env NODE_ENV=production webpack --progress --mode production", "check-types": "tsc --sourceMap false --noEmit", - "dev": "run-s build:css:renderer dev:server", + "dev": "run-s dev:server", "dev:server": "cross-env NODE_ENV=development webpack-dev-server", "lint": "eslint . --ext .ts,.tsx --max-warnings 0", "lint:fix": "npm run lint -- --fix", diff --git a/src/templates/examples/TemplateA/index.tsx b/src/templates/examples/TemplateA/index.tsx index fdce721..6c9f8ba 100644 --- a/src/templates/examples/TemplateA/index.tsx +++ b/src/templates/examples/TemplateA/index.tsx @@ -14,7 +14,7 @@ export const TemplateATemplates = [ template: TemplateAWithWrapperAndErrorBoundry, }, { - id: "template-a-with-qr", + id: "template-a-with-watermark", label: "With water mark", template: TemplateAWithWaterMark, }, From fb0dd9b1a4ad291b9ee7326c6eaf34346d35d06b Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Thu, 8 Feb 2024 16:15:27 +0800 Subject: [PATCH 2/5] docs: remove white space from ErrorBoundry component --- README.md | 6 +++--- src/core/ErrorBoundary/ErrorBoundary.tsx | 16 ++++++++++++---- .../TemplateAWithWrapperAndErrorBoundry.tsx | 14 +++++++------- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index a266d81..475eec2 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Head off to `http://localhost:6006/` to see storybook, while `http://127.0.0.1:8 ### Core Components -Core components, located in the `src/core directory`, are reusable React components that offer enhanced functionalities for renderer templates. +Core components, located in the `src/core directory`, are reusable React components that offer enhanced functionalities for renderer templates. When you run `npm run storybook`, the example templates with core components will be displayed. This repository contains a collection of example templates along with demonstrations of how to use core components. You can find these examples in the `/src/templates` directory. These templates serve as references and guides to help you set up your own templates to meet your unique requirements. @@ -52,9 +52,9 @@ It allows users to share documents across devices using a QR code. For detailed information on how to use the QR Code Component, please refer to the official documentation [here](https://docs.tradetrust.io/docs/reference/tradetrust-website/qr-code/). -#### Wrapper/ Error Boundary +#### Wrapper/ ErrorBoundary -The Wrapper/Error Boundary Component is designed to handle scenarios where a template cannot be rendered correctly. In such cases, this component acts as a fallback, displaying a user-friendly error message and stack. +The Wrapper/ErrorBoundary Component is designed to handle scenarios where a template cannot be rendered correctly. In such cases, this component acts as a fallback, displaying a user-friendly error message and stack. #### PrivacyFilter diff --git a/src/core/ErrorBoundary/ErrorBoundary.tsx b/src/core/ErrorBoundary/ErrorBoundary.tsx index 0fb2f01..f12db41 100644 --- a/src/core/ErrorBoundary/ErrorBoundary.tsx +++ b/src/core/ErrorBoundary/ErrorBoundary.tsx @@ -9,13 +9,18 @@ interface ErrorBoundaryState { error: { message: string; stack: string }; } -export class ErrorBoundary extends React.Component { +export class ErrorBoundary extends React.Component< + ErrorBoundaryProps, + ErrorBoundaryState +> { constructor(props: ErrorBoundaryProps) { super(props); this.state = { hasError: false, error: { message: "", stack: "" } }; } - static getDerivedStateFromError(error: ErrorBoundaryState["error"]): ErrorBoundaryState { + static getDerivedStateFromError( + error: ErrorBoundaryState["error"] + ): ErrorBoundaryState { // Update state so the next render will show the fallback UI. return { hasError: true, error }; } @@ -25,9 +30,12 @@ export class ErrorBoundary extends React.Component -

Template renderer encountered an error

+

+ Template renderer encountered an error +

- Message: {this.state.error.message} + Message:{" "} + {this.state.error.message}
Stack: {this.state.error.stack} diff --git a/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx b/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx index 9434755..4053426 100644 --- a/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx +++ b/src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx @@ -16,7 +16,6 @@ const Content = (document: TemplateADocument): JSX.Element => { - {document.data1} {document.data2} @@ -27,14 +26,15 @@ const Content = (document: TemplateADocument): JSX.Element => { ); }; - -export const TemplateAWithWrapperAndErrorBoundry: FunctionComponent> = ({ document }) => { +export const TemplateAWithWrapperAndErrorBoundry: FunctionComponent< + TemplateProps +> = ({ document }) => { const documentData = getDocumentData(document) as TemplateADocument; return ( <> - -
{Content(documentData)}
- + +
{Content(documentData)}
+ ); -}; \ No newline at end of file +}; From 8f250f31e7782826a90b497e2b21e264f7dddf49 Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Tue, 13 Feb 2024 11:20:36 +0800 Subject: [PATCH 3/5] docs: rename PrivacyFilter to RedactableValues --- README.md | 12 +- src/core/PrivacyFilter/index.ts | 1 - .../RedactableValues.tsx} | 25 +- src/core/RedactableValues/index.ts | 1 + .../TemplateBWithPrivacyFilter.stories.tsx | 15 - .../TemplateB/TemplateBWithPrivacyFilter.tsx | 245 ---------------- .../TemplateBWithRedactableValues.stories.tsx | 20 ++ .../TemplateBWithRedactableValues.tsx | 276 ++++++++++++++++++ src/templates/examples/TemplateB/index.tsx | 6 +- 9 files changed, 325 insertions(+), 276 deletions(-) delete mode 100644 src/core/PrivacyFilter/index.ts rename src/core/{PrivacyFilter/PrivacyFilter.tsx => RedactableValues/RedactableValues.tsx} (64%) create mode 100644 src/core/RedactableValues/index.ts delete mode 100644 src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.stories.tsx delete mode 100644 src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.tsx create mode 100644 src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx create mode 100644 src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx diff --git a/README.md b/README.md index 475eec2..05b1200 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # TradeTrust Decentralized Renderer (React Template) -This template serves as a quick way to start building your own decentralized renderer using OpenAttestation stack. +This template serves as a quick way to start building your own decentralized renderer using TradeTrust stack. You can follow our tutorial over at (https://docs.tradetrust.io/docs/tutorial/decentralised-renderer/). ## How and what? @@ -35,7 +35,7 @@ To stay as simple and less opinionated as possible, these are omitted: ```sh npm i -npm run start +npm run storybook ``` Head off to `http://localhost:6006/` to see storybook, while `http://127.0.0.1:8080/` to see your actual document rendered in a dummy application. @@ -56,13 +56,13 @@ For detailed information on how to use the QR Code Component, please refer to th The Wrapper/ErrorBoundary Component is designed to handle scenarios where a template cannot be rendered correctly. In such cases, this component acts as a fallback, displaying a user-friendly error message and stack. -#### PrivacyFilter +#### RedactableValues -The Privacy Filter Component is a powerful tool for safeguarding sensitive information within a document. To use the Privacy Filter in the decentralized renderer, follow these steps +The RedactableValues Component is a powerful tool for safeguarding sensitive information within a document. To use the RedactableValues in the decentralized renderer, follow these steps -- Click the "Edit Document" button within the PrivacyFilter component. +- Click the "Edit Document" button within the RedactableValues component. - Click "Remove" on the redactable values to specify the information you want to remove. -- Click "Done" on the Privacy Filter Component to complete the process. +- Click "Done" on the Component to complete the process. - Download the document with hidden values #### PrintWatermark diff --git a/src/core/PrivacyFilter/index.ts b/src/core/PrivacyFilter/index.ts deleted file mode 100644 index ce94764..0000000 --- a/src/core/PrivacyFilter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./PrivacyFilter"; diff --git a/src/core/PrivacyFilter/PrivacyFilter.tsx b/src/core/RedactableValues/RedactableValues.tsx similarity index 64% rename from src/core/PrivacyFilter/PrivacyFilter.tsx rename to src/core/RedactableValues/RedactableValues.tsx index e30f09f..3c98d6c 100644 --- a/src/core/PrivacyFilter/PrivacyFilter.tsx +++ b/src/core/RedactableValues/RedactableValues.tsx @@ -2,7 +2,7 @@ import { Button } from "@tradetrust-tt/tradetrust-ui-components"; import React, { FunctionComponent } from "react"; import patternWaves from "/static/images/pattern-waves.png"; -interface PrivacyFilterProps { +interface RedactableValueProps { editable: boolean; onToggleEditable: () => void; options?: { @@ -12,23 +12,36 @@ interface PrivacyFilterProps { }; } -export const PrivacyFilter: FunctionComponent = ({ editable, onToggleEditable, options }) => { +export const RedactableValues: FunctionComponent = ({ + editable, + onToggleEditable, + options, +}) => { const defaultOptions = { - className: "print:hidden bg-cover bg-cerulean-500 text-white rounded-lg p-4 mb-8", + className: + "print:hidden bg-cover bg-cerulean-500 text-white rounded-lg p-4 mb-8", description: `Remove sensitive information on this document by clicking on the edit button. Downloaded document remains valid.`, buttonText: "Edit Document", }; const { className, description, buttonText } = options ?? defaultOptions; return ( -
+
-

The document allows fields to be selectively disclosed.

+

+ The document allows fields to be selectively disclosed. +

{description}

-
diff --git a/src/core/RedactableValues/index.ts b/src/core/RedactableValues/index.ts new file mode 100644 index 0000000..e6cb17f --- /dev/null +++ b/src/core/RedactableValues/index.ts @@ -0,0 +1 @@ +export * from "./RedactableValues"; diff --git a/src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.stories.tsx b/src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.stories.tsx deleted file mode 100644 index 1e40d54..0000000 --- a/src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { TemplateBWithPrivacyFilter } from "./TemplateBWithPrivacyFilter"; -import { TemplateBSampleV2 } from "./sampleV2"; - -export default { - title: "TemplateB", - component: TemplateBWithPrivacyFilter, - parameters: { - componentSubtitle: "Sample Template B", - }, -}; - -export const TemplateWithPrivacyFilter: FunctionComponent = () => { - return {}} />; -}; \ No newline at end of file diff --git a/src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.tsx b/src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.tsx deleted file mode 100644 index 1a76321..0000000 --- a/src/templates/examples/TemplateB/TemplateBWithPrivacyFilter.tsx +++ /dev/null @@ -1,245 +0,0 @@ -import styled from "@emotion/styled"; -import { RedactableValue, TemplateProps } from "@tradetrust-tt/decentralized-renderer-react-components"; -import { format } from "date-fns"; -import React, { FunctionComponent, useState } from "react"; -import { DocumentQrCode } from "../../../core/DocumentQrCode"; -import { Wrapper } from "../../../core/Wrapper"; -import { IconRedact, PrivacyFilter } from "../../../core/PrivacyFilter"; -import { getDocumentData } from "../../../utils"; -import { TemplateB, TemplateBSchema } from "./types"; - -const CustomStyles = styled.div` - font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; - position: relative; - - h1 { - color: #4172af; - font-size: 40px; - font-weight: 700; - } - - h2 { - color: #4172af; - font-size: 28px; - font-weight: 700; - } - - .bg-blue { - background-color: #4172af; - color: #fff; - } - - th { - background-color: #4172af; - color: white; - } - - .table-responsive { - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } -`; - -export const TemplateBWithPrivacyFilter: FunctionComponent> = ({ - document, - handleObfuscation, -}) => { - const [editable, setEditable] = useState(false); - const documentData = getDocumentData(document) as TemplateB; - const { - id, - date, - customerId, - terms, - billFrom, - billTo, - billableItems, - subtotal = 0, - tax = 0, - taxTotal = 0, - total = 0, - } = documentData; - const qrCodeUrl = documentData?.links?.self.href; - return ( - <> - - - setEditable(!editable)} /> - -
-
-

INVOICE

-
-
-

INVOICE #

-
-
-

DATE

-
-
-
-
-

{id}

-
-
-

{date && format(new Date(date), "d MMM yyyy")}

-
-
-
-
-

CUSTOMER ID

-
-
-

TERMS

-
-
-
-
-

{customerId}

-
-
{terms}
-
-
-
-
-

- handleObfuscation(`billFrom.name`)} - iconRedact={} - /> -

-

- handleObfuscation(`billFrom.streetAddress`)} - iconRedact={} - /> -

-

- {billFrom?.city} - {billFrom?.postalCode && `, `} - handleObfuscation(`billFrom.postalCode`)} - iconRedact={} - /> -

-

- handleObfuscation(`billFrom.phoneNumber`)} - iconRedact={} - /> -

-
-
-
-

BILL TO

-
-
-
-
-

- handleObfuscation(`billTo.name`)} - iconRedact={} - /> -

-

- handleObfuscation(`billTo.company.name`)} - iconRedact={} - /> -

-

- handleObfuscation(`billTo.company.streetAddress`)} - iconRedact={} - /> -

-

- {billTo.company.city} - {billTo.company.postalCode && `, `} - handleObfuscation(`billTo.company.postalCode`)} - iconRedact={} - /> -

-

- handleObfuscation(`billTo.company.phoneNumber`)} - iconRedact={} - /> -

-

- handleObfuscation(`billTo.email`)} - iconRedact={} - /> -

-
-
-
-
-
-
- - - - - - - - - - - {billableItems?.map((item, index) => { - return ( - - - - - - - ); - })} - -
DESCRIPTIONQTYUNIT PRICEAMOUNT
{item.description}{item.quantity}{item.unitPrice} {item.amount}
-
-
-
-

SUBTOTAL

-

TAX (${tax}%)

-
-

BALANCE DUE

-
-
-

{subtotal}

-

{taxTotal && taxTotal}

-
-

{total}

-
-
- {qrCodeUrl && } - - - - ); -}; diff --git a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx new file mode 100644 index 0000000..fe8201a --- /dev/null +++ b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent } from "react"; +import { TemplateBWithRedactableValues } from "./TemplateBWithRedactableValues"; +import { TemplateBSampleV2 } from "./sampleV2"; + +export default { + title: "TemplateB", + component: TemplateBWithRedactableValues, + parameters: { + componentSubtitle: "Sample Template B", + }, +}; + +export const TemplateWithRedactableValues: FunctionComponent = () => { + return ( + {}} + /> + ); +}; diff --git a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx new file mode 100644 index 0000000..0236cb9 --- /dev/null +++ b/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx @@ -0,0 +1,276 @@ +import styled from "@emotion/styled"; +import { + RedactableValue, + TemplateProps, +} from "@tradetrust-tt/decentralized-renderer-react-components"; +import { format } from "date-fns"; +import React, { FunctionComponent, useState } from "react"; +import { DocumentQrCode } from "../../../core/DocumentQrCode"; +import { Wrapper } from "../../../core/Wrapper"; +import { IconRedact, RedactableValues } from "../../../core/RedactableValues"; +import { getDocumentData } from "../../../utils"; +import { TemplateB, TemplateBSchema } from "./types"; + +const CustomStyles = styled.div` + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + position: relative; + + h1 { + color: #4172af; + font-size: 40px; + font-weight: 700; + } + + h2 { + color: #4172af; + font-size: 28px; + font-weight: 700; + } + + .bg-blue { + background-color: #4172af; + color: #fff; + } + + th { + background-color: #4172af; + color: white; + } + + .table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +`; + +export const TemplateBWithRedactableValues: FunctionComponent< + TemplateProps +> = ({ document, handleObfuscation }) => { + const [editable, setEditable] = useState(false); + const documentData = getDocumentData(document) as TemplateB; + const { + id, + date, + customerId, + terms, + billFrom, + billTo, + billableItems, + subtotal = 0, + tax = 0, + taxTotal = 0, + total = 0, + } = documentData; + const qrCodeUrl = documentData?.links?.self.href; + return ( + <> + + setEditable(!editable)} + /> + +
+
+

INVOICE

+
+
+

INVOICE #

+
+
+

DATE

+
+
+
+
+

{id}

+
+
+

{date && format(new Date(date), "d MMM yyyy")}

+
+
+
+
+

CUSTOMER ID

+
+
+

TERMS

+
+
+
+
+

{customerId}

+
+
{terms}
+
+
+
+
+

+ + handleObfuscation(`billFrom.name`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billFrom.streetAddress`) + } + iconRedact={} + /> +

+

+ {billFrom?.city} + {billFrom?.postalCode && `, `} + + handleObfuscation(`billFrom.postalCode`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billFrom.phoneNumber`) + } + iconRedact={} + /> +

+
+
+
+

BILL TO

+
+
+
+
+

+ + handleObfuscation(`billTo.name`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.company.name`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.company.streetAddress`) + } + iconRedact={} + /> +

+

+ {billTo.company.city} + {billTo.company.postalCode && `, `} + + handleObfuscation(`billTo.company.postalCode`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.company.phoneNumber`) + } + iconRedact={} + /> +

+

+ + handleObfuscation(`billTo.email`) + } + iconRedact={} + /> +

+
+
+
+
+
+
+ + + + + + + + + + + {billableItems?.map((item, index) => { + return ( + + + + + + + ); + })} + +
DESCRIPTIONQTYUNIT PRICEAMOUNT
{item.description} + {item.quantity} + + {item.unitPrice} + + {" "} + {item.amount} +
+
+
+
+

SUBTOTAL

+

TAX (${tax}%)

+
+

BALANCE DUE

+
+
+

{subtotal}

+

{taxTotal && taxTotal}

+
+

{total}

+
+
+ {qrCodeUrl && } + + + + ); +}; diff --git a/src/templates/examples/TemplateB/index.tsx b/src/templates/examples/TemplateB/index.tsx index dfbd993..9be2f96 100644 --- a/src/templates/examples/TemplateB/index.tsx +++ b/src/templates/examples/TemplateB/index.tsx @@ -1,9 +1,9 @@ -import { TemplateBWithPrivacyFilter } from "./TemplateBWithPrivacyFilter"; +import { TemplateBWithRedactableValues } from "./TemplateBWithRedactableValues"; export const TemplateBTemplates = [ { id: "template-b", - label: "Template B with privacy filter", - template: TemplateBWithPrivacyFilter, + label: "Template B with RedactableValues", + template: TemplateBWithRedactableValues, }, ]; From 722002baccf91569b48f1e7875d8fa7691842638 Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Tue, 13 Feb 2024 14:00:56 +0800 Subject: [PATCH 4/5] change name from RedactableValues to SelectiveRedaction --- src/core/RedactableValues/index.ts | 1 - .../SelectiveRedaction.tsx} | 4 ++-- src/core/SelectiveRedaction/index.ts | 1 + ...s.tsx => TemplateBWithSelectiveRedaction.stories.tsx} | 8 ++++---- ...bleValues.tsx => TemplateBWithSelectiveRedaction.tsx} | 9 ++++++--- src/templates/examples/TemplateB/index.tsx | 6 +++--- 6 files changed, 16 insertions(+), 13 deletions(-) delete mode 100644 src/core/RedactableValues/index.ts rename src/core/{RedactableValues/RedactableValues.tsx => SelectiveRedaction/SelectiveRedaction.tsx} (93%) create mode 100644 src/core/SelectiveRedaction/index.ts rename src/templates/examples/TemplateB/{TemplateBWithRedactableValues.stories.tsx => TemplateBWithSelectiveRedaction.stories.tsx} (55%) rename src/templates/examples/TemplateB/{TemplateBWithRedactableValues.tsx => TemplateBWithSelectiveRedaction.tsx} (98%) diff --git a/src/core/RedactableValues/index.ts b/src/core/RedactableValues/index.ts deleted file mode 100644 index e6cb17f..0000000 --- a/src/core/RedactableValues/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./RedactableValues"; diff --git a/src/core/RedactableValues/RedactableValues.tsx b/src/core/SelectiveRedaction/SelectiveRedaction.tsx similarity index 93% rename from src/core/RedactableValues/RedactableValues.tsx rename to src/core/SelectiveRedaction/SelectiveRedaction.tsx index 3c98d6c..f8d387d 100644 --- a/src/core/RedactableValues/RedactableValues.tsx +++ b/src/core/SelectiveRedaction/SelectiveRedaction.tsx @@ -2,7 +2,7 @@ import { Button } from "@tradetrust-tt/tradetrust-ui-components"; import React, { FunctionComponent } from "react"; import patternWaves from "/static/images/pattern-waves.png"; -interface RedactableValueProps { +interface SelectiveRedaction { editable: boolean; onToggleEditable: () => void; options?: { @@ -12,7 +12,7 @@ interface RedactableValueProps { }; } -export const RedactableValues: FunctionComponent = ({ +export const SelectiveRedaction: FunctionComponent = ({ editable, onToggleEditable, options, diff --git a/src/core/SelectiveRedaction/index.ts b/src/core/SelectiveRedaction/index.ts new file mode 100644 index 0000000..33d37fb --- /dev/null +++ b/src/core/SelectiveRedaction/index.ts @@ -0,0 +1 @@ +export * from "./SelectiveRedaction"; diff --git a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx b/src/templates/examples/TemplateB/TemplateBWithSelectiveRedaction.stories.tsx similarity index 55% rename from src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx rename to src/templates/examples/TemplateB/TemplateBWithSelectiveRedaction.stories.tsx index fe8201a..517b9b0 100644 --- a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.stories.tsx +++ b/src/templates/examples/TemplateB/TemplateBWithSelectiveRedaction.stories.tsx @@ -1,18 +1,18 @@ import React, { FunctionComponent } from "react"; -import { TemplateBWithRedactableValues } from "./TemplateBWithRedactableValues"; +import { TemplateBWithSelectiveRedaction } from "./TemplateBWithSelectiveRedaction"; import { TemplateBSampleV2 } from "./sampleV2"; export default { title: "TemplateB", - component: TemplateBWithRedactableValues, + component: TemplateBWithSelectiveRedaction, parameters: { componentSubtitle: "Sample Template B", }, }; -export const TemplateWithRedactableValues: FunctionComponent = () => { +export const TemplateWithSelectiveRedaction: FunctionComponent = () => { return ( - {}} /> diff --git a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx b/src/templates/examples/TemplateB/TemplateBWithSelectiveRedaction.tsx similarity index 98% rename from src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx rename to src/templates/examples/TemplateB/TemplateBWithSelectiveRedaction.tsx index 0236cb9..7b080c9 100644 --- a/src/templates/examples/TemplateB/TemplateBWithRedactableValues.tsx +++ b/src/templates/examples/TemplateB/TemplateBWithSelectiveRedaction.tsx @@ -7,7 +7,10 @@ import { format } from "date-fns"; import React, { FunctionComponent, useState } from "react"; import { DocumentQrCode } from "../../../core/DocumentQrCode"; import { Wrapper } from "../../../core/Wrapper"; -import { IconRedact, RedactableValues } from "../../../core/RedactableValues"; +import { + IconRedact, + SelectiveRedaction, +} from "../../../core/SelectiveRedaction"; import { getDocumentData } from "../../../utils"; import { TemplateB, TemplateBSchema } from "./types"; @@ -43,7 +46,7 @@ const CustomStyles = styled.div` } `; -export const TemplateBWithRedactableValues: FunctionComponent< +export const TemplateBWithSelectiveRedaction: FunctionComponent< TemplateProps > = ({ document, handleObfuscation }) => { const [editable, setEditable] = useState(false); @@ -65,7 +68,7 @@ export const TemplateBWithRedactableValues: FunctionComponent< return ( <> - setEditable(!editable)} /> diff --git a/src/templates/examples/TemplateB/index.tsx b/src/templates/examples/TemplateB/index.tsx index 9be2f96..bdf75ec 100644 --- a/src/templates/examples/TemplateB/index.tsx +++ b/src/templates/examples/TemplateB/index.tsx @@ -1,9 +1,9 @@ -import { TemplateBWithRedactableValues } from "./TemplateBWithRedactableValues"; +import { TemplateBWithSelectiveRedaction } from "./TemplateBWithSelectiveRedaction"; export const TemplateBTemplates = [ { id: "template-b", - label: "Template B with RedactableValues", - template: TemplateBWithRedactableValues, + label: "Template B with SelectiveRedaction", + template: TemplateBWithSelectiveRedaction, }, ]; From a11d73c5d1f3675a055baf165ced15f71864ea76 Mon Sep 17 00:00:00 2001 From: Min Htet Oo Date: Tue, 13 Feb 2024 14:06:41 +0800 Subject: [PATCH 5/5] docs: add install section --- README.md | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 05b1200..5b57fde 100644 --- a/README.md +++ b/README.md @@ -31,14 +31,33 @@ To stay as simple and less opinionated as possible, these are omitted: - Node (optionally, use [nvm](https://github.com/nvm-sh/nvm) to manage node version) - Node version 18 onwards. +## Install + +The easiest way to use **tradetrust-decentralized-renderer-template** is through github by clicking on `Use this template` button in the repository page. + +You can also download or `git clone` this repo + +```sh +git clone https://github.com/TradeTrust/tradetrust-decentralized-renderer.git +cd tradetrust-decentralized-renderer +rm -rf .git +npm install +``` + +Make sure to edit the following files according to your module's info: + +- package.json (module name and version) +- README.md +- LICENSE +- add your own template (in `src/templates` folder) and configure correctly the template registry (in `src/templates/index.tsx` file) + ### Development ```sh -npm i npm run storybook ``` -Head off to `http://localhost:6006/` to see storybook, while `http://127.0.0.1:8080/` to see your actual document rendered in a dummy application. +Head off to `http://localhost:6006/` to see storybook. ### Core Components @@ -56,11 +75,11 @@ For detailed information on how to use the QR Code Component, please refer to th The Wrapper/ErrorBoundary Component is designed to handle scenarios where a template cannot be rendered correctly. In such cases, this component acts as a fallback, displaying a user-friendly error message and stack. -#### RedactableValues +#### SelectiveRedaction -The RedactableValues Component is a powerful tool for safeguarding sensitive information within a document. To use the RedactableValues in the decentralized renderer, follow these steps +The SelectiveRedaction Component is a powerful tool for safeguarding sensitive information within a document. To use the SelectiveRedaction in the decentralized renderer, follow these steps -- Click the "Edit Document" button within the RedactableValues component. +- Click the "Edit Document" button within the SelectiveRedaction component. - Click "Remove" on the redactable values to specify the information you want to remove. - Click "Done" on the Component to complete the process. - Download the document with hidden values