fix: upgrade dependencies

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Clean Install
         run: npm ci
       - name: Run lint
@@ -18,9 +18,9 @@ jobs:
         run: npm run test
       - name: Run build
         run: npm run build
-      
+
       - name: Release
         run: npx [email protected] --branches master
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.storybook/main.js

@@ -3,14 +3,17 @@ const toPath = (_path) => path.join(process.cwd(), _path);
 
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-essentials", "@storybook/addon-mdx-gfm"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-mdx-gfm",
+    "@storybook/addon-webpack5-compiler-swc",
+    "@chromatic-com/storybook"
+  ],
 
   framework: {
     name: "@storybook/react-webpack5",
     options: {
-      builder: {
-        useSWC: true, // This flag is automatically set by Storybook for all new Webpack5 projects (except Angular) in Storybook 7.6
-      },
+      builder: {},
     },
   },
 
@@ -39,7 +42,5 @@ module.exports = {
       },
     };
   },
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
 };

.storybook/preview.js

@@ -6,4 +6,5 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}
+export const tags = ["autodocs"];

example/application/app.tsx

@@ -1,11 +1,14 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { rawOpencerts } from "./fixtures/v2/opencerts";
 import { certWithBadTemplateName, certWithNoTemplate } from "./fixtures/v2/certs-to-test-default-renderer";
 import { driverLicense } from "./fixtures/v3/driverLicense";
 import { malformSvgDemoV2, svgEmbeddedDemoV2, svgHostedDemoV2 } from "./fixtures/v2/svgDemoV2";
 import React from "react";
 import { AppContainer } from "./container";
 
+const container = document.getElementById("root");
+const root = createRoot(container);
+
 export const App: React.FunctionComponent = (): React.ReactElement => {
   return (
     <AppContainer
@@ -31,4 +34,4 @@ export const App: React.FunctionComponent = (): React.ReactElement => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById("root"));
+root.render(<App />);

example/application/webpack.config.js

@@ -9,16 +9,19 @@ module.exports = {
     filename: "bundle.js",
   },
   devServer: {
-    contentBase: path.join(__dirname, "."),
     compress: true,
     port: 9001,
-    index: "index.html",
+    static: {
+      directory: path.join(__dirname, "."),
+      serveIndex: true,
+    },
   },
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx"],
     fallback: {
       crypto: require.resolve("crypto-browserify"),
       stream: require.resolve("stream-browserify"),
+      buffer: require.resolve("buffer"),
     },
   },
   module: {

example/decentralized-renderer/app.tsx

@@ -1,6 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { FramedDocumentRenderer } from "../../src";
+import { fullAttachmentRenderer } from "../../src/components/renderer/FullAttachmentRenderer";
 import { registry } from "./templates";
 
-ReactDOM.render(<FramedDocumentRenderer templateRegistry={registry} />, document.getElementById("root"));
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(<FramedDocumentRenderer templateRegistry={registry} attachmentToComponent={fullAttachmentRenderer} />);

example/decentralized-renderer/index.html

@@ -4,6 +4,13 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <!-- TODO: Remove reliance on Bootstrap CSS -->
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    /> -->
     <title>Custom decentralized renderer</title>
   </head>
   <body>

example/decentralized-renderer/webpack.config.js

@@ -3,16 +3,19 @@ const path = require("path");
 
 module.exports = {
   // ...webpackConfig,
+  mode: process.env.NODE_ENV ?? "development",
   entry: path.join(__dirname, "./app.tsx"),
   externals: {},
   output: {
     filename: "bundle.js",
   },
   devServer: {
-    contentBase: path.join(__dirname, "."),
     compress: true,
     port: 9000,
-    index: "index.html",
+    static: {
+      directory: path.join(__dirname, "."),
+      serveIndex: true,
+    },
   },
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx"],