feat: aded react-pdf-toolkit & added report-generation example (#1882)

* feat: aded react-pdf-toolkit & added report-generation example * feat: reduced font sizes * feat: removed unused assets & added favicon.ico * feat: updated readme * feat: updated index.html * feat: added favicon.ico to toolkit * fix: fixed types & removed hardcode & fixed example
ballerine-io · Dec 31, 2023 · 84940ff · 84940ff
1 parent e56fa83
commit 84940ff
Show file tree

Hide file tree

Showing 82 changed files with 3,975 additions and 100 deletions.
diff --git a/examples/report-generation-example/.eslintrc.cjs b/examples/report-generation-example/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+};
diff --git a/examples/report-generation-example/.gitignore b/examples/report-generation-example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/report-generation-example/README.md b/examples/report-generation-example/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/examples/report-generation-example/index.html b/examples/report-generation-example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/report-generation-example/package.json b/examples/report-generation-example/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@ballerine/report-generation-example",
+  "private": false,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ballerine/react-pdf-toolkit": "^0.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}
diff --git a/examples/report-generation-example/public/favicon.ico b/examples/report-generation-example/public/favicon.ico
diff --git a/examples/report-generation-example/src/App.css b/examples/report-generation-example/src/App.css
@@ -0,0 +1,15 @@
+#root {
+  width: 100%;
+  height: 100vh;
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pdf {
+  flex: 1;
+}
diff --git a/examples/report-generation-example/src/App.tsx b/examples/report-generation-example/src/App.tsx
@@ -0,0 +1,48 @@
+import {
+  Font,
+  PDFDownloadLink,
+  PDFViewer,
+  ReportTemplate,
+  registerFont,
+} from '@ballerine/react-pdf-toolkit';
+import { useCallback, useMemo } from 'react';
+import './App.css';
+import { exampleData } from './example-data';
+
+registerFont(Font);
+
+export default function App() {
+  const report = useMemo(() => <ReportTemplate report={exampleData} />, []);
+
+  const handleDownloadFromServer = useCallback(() => {
+    fetch(`${import.meta.env.VITE_API_URL}/reports`, {
+      method: 'GET',
+    })
+      .then(response => response.blob())
+      .then(blob => {
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'report.pdf';
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      });
+  }, []);
+
+  return (
+    <div className="container">
+      <div className="controls">
+        <PDFDownloadLink document={report} fileName="report.pdf">
+          <button>Generate on client</button>
+        </PDFDownloadLink>
+        <button onClick={handleDownloadFromServer}>Fetch from server</button>
+      </div>
+      <div className="pdf">
+        <PDFViewer width={'100%'} height={'100%'}>
+          {report}
+        </PDFViewer>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/report-generation-example/src/example-data.ts b/examples/report-generation-example/src/example-data.ts
@@ -0,0 +1,102 @@
+import { IReport } from '@ballerine/react-pdf-toolkit';
+
+export const exampleData: IReport = {
+  status: 'Published',
+  summary: {
+    generalRiskLevel: 'High Risk',
+    generalRiskScore: 80,
+    url: 'http://veaiio.com',
+    checkCreatedAt: 'Mon 5 Dec 2023, 15:57',
+    generalSummary:
+      "A check on Veaiio.com's operators revealed multiple websites linked by common email addresses, business registration numbers, and phone numbers, suggesting involvement in intellectual property (IP) infringement. Such activities can lead to significant legal and financial consequences, including fines by card schemes and potential termination of payment services. This brief highlights the ecosystem’s potential unauthorized operations and underscores the risks associated with IP violations.",
+    violations: [{ type: 'IP_RIGHTS_INFRINGEMENT' }],
+    indicators: [
+      {
+        indicator: 'INCONSISTENT_LINE_OF_BUSINESS_INDICATORS',
+        type: 'warning',
+      },
+      { indicator: 'SUSPICIOUS_TRAFFIC_PATTERNS', type: 'warning' },
+      {
+        indicator: 'ILLICIT_PRODUCTS_ON_ECOSYSTEM_WEBSITES',
+        type: 'warning',
+      },
+    ],
+  },
+  websiteChecks: [
+    {
+      website: 'Veaiio.com',
+      riskLevel: 'Medium Risk',
+      riskScore: 60,
+      indicators: [{ indicator: 'SUSPICIOUS_TRAFFIC_PATTERNS', type: 'warning' }],
+      riskAnalysis: {
+        lineOfBusiness: {
+          riskLevel: 'Medium Risk',
+          riskScore: 60,
+          summary:
+            "A check on Veaiio.com's operators revealed multiple websites linked by common email addresses, business registration numbers, and phone numbers, suggesting involvement in intellectual property (IP) infringement.",
+        },
+        reputation: {
+          riskLevel: 'Medium Risk',
+          riskScore: 60,
+          summary:
+            "A check on Veaiio.com's operators revealed multiple websites linked by common email addresses, business registration numbers, and phone numbers, suggesting involvement in intellectual property (IP) infringement.",
+        },
+        traffic: {
+          riskLevel: 'Medium Risk',
+          riskScore: 60,
+          summary:
+            "A check on Veaiio.com's operators revealed multiple websites linked by common email addresses, business registration numbers, and phone numbers, suggesting involvement in intellectual property (IP) infringement.",
+        },
+        pricing: {
+          riskLevel: 'Medium Risk',
+          riskScore: 30,
+          summary:
+            "A check on Veaiio.com's operators revealed multiple websites linked by common email addresses, business registration numbers, and phone numbers, suggesting involvement in intellectual property (IP) infringement.",
+        },
+      },
+    },
+  ],
+  ecosystemChecks: {
+    riskLevel: 'High Risk',
+    riskScore: 90,
+    url: 'http://veaiio.com',
+    checkCreatedAt: 'Mon 5 Dec 2023, 15:57',
+    generalSummary:
+      "A check on Veaiio.com's operators revealed multiple websites linked by common email addresses, business registration numbers, and phone numbers, suggesting involvement in intellectual property (IP) infringement. Such activities can lead to significant legal and financial consequences, including fines by card schemes and potential termination of payment services. This brief highlights the ecosystem’s potential unauthorized operations and underscores the risks associated with IP violations.",
+    websites: [
+      {
+        url: 'http://poiiao.com',
+        violations: [{ type: 'IP_RIGHTS_INFRINGEMENT' }],
+        relatedNodeType: 'SUPPORT_EMAIL_ADDRESS',
+        relatedNode: '[email protected]',
+        tlRiskScore: 25,
+      },
+      {
+        url: 'http://kr.feisasell.com',
+        violations: [{ type: 'IP_RIGHTS_INFRINGEMENT' }],
+        relatedNodeType: 'BUSINESS_REGISTRATION_NUMBER',
+        relatedNode: '750-87-02496',
+        tlRiskScore: 25,
+      },
+    ],
+  },
+  meta: {
+    companyId: 'TLR20231205',
+    reportId: 'TLR20231205',
+    companyName: 'Veaiio.com',
+    generatedBy: 'Ballerine Risk Assessment Tool',
+    reportVersion: '1.0',
+    assessmentMethodology:
+      'Cross-referencing public databases, proprietary algorithms, and risk scoring models',
+    contactInfo: {
+      analystName: 'John Doe',
+      analystContact: '[email protected]',
+    },
+    confidentialityLevel: 'High - Internal Use Only',
+    reportFor: 'Stakeholder Review',
+    disclaimer:
+      'This report is a snapshot based on the data available at the time of the report creation and is subject to change.',
+    additionalNotes:
+      'The report summarizes the potential risks associated with Veaiio.com and related entities based on detected indicators of intellectual property (IP) infringement.',
+  },
+};
diff --git a/examples/report-generation-example/src/index.css b/examples/report-generation-example/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/examples/report-generation-example/src/main.tsx b/examples/report-generation-example/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/report-generation-example/src/vite-env.d.ts b/examples/report-generation-example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/report-generation-example/tsconfig.json b/examples/report-generation-example/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}