feat(ui): move to React 18 and base for using shadcn/ui (#4174)

Co-authored-by: IbrahimCSAE <ibrahim.mdev@gmail.com>

platform/cli/templates/mode/.webpack/webpack.prod.js

@@ -49,6 +49,38 @@ const config = {
   ],
   module: {
     rules: [
+      {
+        test: /\.svg?$/,
+        oneOf: [
+          {
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false
+                          },
+                        },
+                      },
+                    ]
+                  },
+                  prettier: false,
+                  svgo: true,
+                  titleProp: true,
+                },
+              },
+            ],
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+          },
+        ],
+      },
       {
         test: /(\.jsx|\.js|\.tsx|\.ts)$/,
         loader: 'babel-loader',

platform/cli/templates/mode/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [

platform/cli/templates/mode/dependencies.json

@@ -37,7 +37,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "babel-eslint": "^8.0.3",
     "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
+    "@svgr/webpack": "^8.1.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",