fix:tt-11 Rename core component to Selective Redaction

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?
 
@@ -29,38 +29,59 @@ 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.
+
+## 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 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.
+Head off to `http://localhost:6006/` to see storybook.
 
 ### 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.
 
 #### 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.
+#### Wrapper/ ErrorBoundary
+
+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
+#### SelectiveRedaction
 
-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 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 PrivacyFilter 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 Privacy Filter Component to complete the process.
+- Click "Done" on the Component to complete the process.
 - Download the document with hidden values
 
 #### PrintWatermark

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",

src/core/ErrorBoundary/ErrorBoundary.tsx

@@ -9,13 +9,18 @@ interface ErrorBoundaryState {
   error: { message: string; stack: string };
 }
 
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+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<ErrorBoundaryProps, ErrorBoun
       // You can render any custom fallback UI
       return (
         <div>
-          <h1 className="text-xl font-bold mb-2">Template renderer encountered an error</h1>
+          <h1 className="text-xl font-bold mb-2">
+            Template renderer encountered an error
+          </h1>
           <div className="mb-2">
-            <span className="font-medium">Message:</span> {this.state.error.message}
+            <span className="font-medium">Message:</span>{" "}
+            {this.state.error.message}
           </div>
           <div className="mb-2">
             <span className="font-medium">Stack:</span> {this.state.error.stack}

src/core/PrivacyFilter/PrivacyFilter.tsx → 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 PrivacyFilterProps {
+interface SelectiveRedaction {
   editable: boolean;
   onToggleEditable: () => void;
   options?: {
@@ -12,23 +12,36 @@ interface PrivacyFilterProps {
   };
 }
 
-export const PrivacyFilter: FunctionComponent<PrivacyFilterProps> = ({ editable, onToggleEditable, options }) => {
+export const SelectiveRedaction: FunctionComponent<SelectiveRedaction> = ({
+  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 (
-    <div className={className} style={{ backgroundImage: `url(${patternWaves})` }}>
+    <div
+      className={className}
+      style={{ backgroundImage: `url(${patternWaves})` }}
+    >
       <div className="container">
         <div className="md:flex items-center">
           <div className="grow mb-4 md:mb-0 mr-0 md:mr-4">
-            <h3 className="font-normal">The document allows fields to be selectively disclosed.</h3>
+            <h3 className="font-normal">
+              The document allows fields to be selectively disclosed.
+            </h3>
             <p>{description}</p>
           </div>
-          <Button onClick={onToggleEditable} className="bg-white text-cerulean-500 hover:bg-gray-50 whitespace-nowrap">
+          <Button
+            onClick={onToggleEditable}
+            className="bg-white text-cerulean-500 hover:bg-gray-50 whitespace-nowrap"
+          >
             {editable ? "Done" : buttonText}
           </Button>
         </div>

src/core/SelectiveRedaction/index.ts

@@ -0,0 +1 @@
+export * from "./SelectiveRedaction";

src/templates/examples/TemplateA/TemplateAWithWrapperAndErrorBoundry.tsx

@@ -16,7 +16,6 @@ const Content = (document: TemplateADocument): JSX.Element => {
           </tr>
         </thead>
         <tbody>
-
           <tr>
             <td className="border border-black p-2">{document.data1}</td>
             <td className="border border-black p-2">{document.data2}</td>
@@ -27,14 +26,15 @@ const Content = (document: TemplateADocument): JSX.Element => {
   );
 };
 
-
-export const TemplateAWithWrapperAndErrorBoundry: FunctionComponent<TemplateProps<TemplateASchema>> = ({ document }) => {
+export const TemplateAWithWrapperAndErrorBoundry: FunctionComponent<
+  TemplateProps<TemplateASchema>
+> = ({ document }) => {
   const documentData = getDocumentData(document) as TemplateADocument;
   return (
     <>
-    <Wrapper data-testid="bill-of-lading-template">
-      <div className="mb-8">{Content(documentData)}</div>
-    </Wrapper>
+      <Wrapper data-testid="bill-of-lading-template">
+        <div className="mb-8">{Content(documentData)}</div>
+      </Wrapper>
     </>
   );
-};
+};

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,
   },