build: bundle assets inline for the component library (#513)

* build: bundle assets inline for the component library

* chore(deps): allow react version 17.x.x and 18.x.x

.depcheckrc.json

@@ -14,6 +14,7 @@
     "crypto*",
     "stream*",
     "env-paths",
-    "open"
+    "open",
+    "base64-inline-loader"
   ]
-}
+}

package.json

@@ -50,9 +50,9 @@
     "notistack": "1.0.10",
     "opener": "1.5.2",
     "qrcode.react": "1.0.1",
-    "react": ">= 17.0.2",
+    "react": ">=17.0.0 || >=18.0.0",
     "react-copy-to-clipboard": "5.0.4",
-    "react-dom": ">= 17.0.2",
+    "react-dom": ">=17.0.0 || >=18.0.0",
     "react-identicons": "1.2.5",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
@@ -92,6 +92,7 @@
     "babel-loader": "8.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-tsconfig-paths": "1.0.2",
+    "base64-inline-loader": "^2.0.1",
     "cors": "^2.8.5",
     "depcheck": "^1.4.3",
     "env-paths": "^3.0.0",
@@ -112,6 +113,7 @@
     "prettier": "2.4.1",
     "puppeteer": "^15.4.0",
     "react-scripts": "^5.0.1",
+    "rimraf": "^3.0.2",
     "ts-node": "^10.8.1",
     "typescript": "4.7.3",
     "web-vitals": "2.1.2",
@@ -127,7 +129,7 @@
     "start": "react-scripts start",
     "desktop": "node ./desktop.mjs",
     "build": "react-scripts build",
-    "build:component": "webpack --mode=production",
+    "build:component": "rimraf ./lib && webpack --mode=production",
     "compile:types": "tsc --project tsconfig.lib.json --emitDeclarationOnly --declaration",
     "test": "react-scripts test",
     "test:ui": "node ui-test/index.js",
@@ -160,4 +162,4 @@
     "npm": ">=6.9.0",
     "bee": ">=0.6.0"
   }
-}
+}

webpack.config.js

@@ -35,18 +35,9 @@ module.exports = () => {
           use: ['style-loader', 'css-loader'],
         },
         {
-          test: /\.(png|jp(e*)g|svg|gif)$/,
-          loader: 'file-loader',
-          options: {
-            name: 'assets/[name].[ext]',
-          },
-        },
-        {
-          test: /\.(ttf)$/,
-          loader: 'file-loader',
-          options: {
-            name: 'assets/fonts/[name].[ext]',
-          },
+            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+            use: ['base64-inline-loader'],
+            type: 'javascript/auto'
         },
         {
           test: /\.(ts|js|tsx|jsx)$/,