Merge pull request #24 from UncoderIO/ui-fix-3

Add UI improvements

Author: alex-bredikhin

uncoder-os/.env.common

@@ -0,0 +1 @@
+MODULE_VERSION=1.1.0

uncoder-os/.gitignore

@@ -20,3 +20,4 @@ yarn-error.log*
 # .env
 
 /.idea
+.editorconfig

uncoder-os/configs/webpack.common.js

@@ -19,7 +19,25 @@ const rules = [
         onlyCompileBundledFiles: true,
       },
     }],
-    exclude: /node_modules/,
+    exclude: [/node_modules/, /workers/],
+  },
+  {
+    test: /\.worker\.ts$/,
+    use: [
+      {
+        loader: 'worker-loader',
+        options: {
+          inline: 'no-fallback',
+        },
+      },
+      'babel-loader',
+      {
+        loader: 'ts-loader',
+        options: {
+          onlyCompileBundledFiles: true,
+        },
+      }],
+    exclude: [/node_modules/],
   },
   {
     test: /\.svg$/,

uncoder-os/configs/webpack.compile.js

@@ -12,7 +12,7 @@ const plugins = [
     name: 'uncoder',
     filename: 'remoteEntry.js',
     exposes: {
-      './UncoderEditor': './src/pages/UncoderEditor/bootstrap',
+      './UncoderEditor': './src/pages/UncoderEditor/bootstrap.tsx',
     },
     shared: packageJson.dependencies,
   }),

uncoder-os/package.json

@@ -16,7 +16,9 @@
     "react": "^18",
     "react-ace": "^10.1.0",
     "react-dom": "^18",
+    "react-error-boundary": "^4.0.11",
     "react-redux": "^8.1.3",
+    "react-tooltip": "^5.24.0",
     "redux": "^4.2.1",
     "simplebar-react": "^3.2.4"
   },
@@ -63,6 +65,7 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^5.10.0",
+    "worker-loader": "^3.0.8"
   }
 }

uncoder-os/src/App.tsx

@@ -0,0 +1,11 @@
+import React, { FC, Suspense } from 'react';
+import { MainPage } from './pages/MainPage';
+import { Spinner } from './components/Spinner';
+
+const App: FC = () => (
+    <Suspense fallback={<Spinner />}>
+      <MainPage />
+    </Suspense>
+);
+
+export default App;

uncoder-os/src/assets/svg/GridIcon.svg

@@ -14,8 +14,11 @@
   font-weight: 400
   font-size: 14px
   color: $textDarkBlue
+  text-decoration: none
   transition: background-color .1s
   cursor: pointer
+  &:hover
+    text-decoration: none
   &:disabled,
   &.disabled
     &,
@@ -58,3 +61,5 @@
     font-size: 16px
     &.button--icon
       min-width: 30px
+  &--inline
+    display: inline-flex

uncoder-os/src/assets/svg/LittleDownIcon.svg

@@ -0,0 +1,17 @@
+import React, { AnchorHTMLAttributes, FC } from 'react';
+
+import './Button.sass';
+
+type ButtonLinkPropsType = AnchorHTMLAttributes<Element> & {
+  classes?: string;
+};
+
+export const ButtonLink: FC<ButtonLinkPropsType> = ({
+  children,
+  classes = '',
+  ...otherProps
+}) => (
+  <a className={`button ${classes}`} {...otherProps}>
+    {children}
+  </a>
+);