[fix] Resolve issues with outdated packages

aim/web/ui/.eslintrc

@@ -16,6 +16,7 @@
     "prettier"
   ],
   "rules": {
+    "react/prop-types": "off",
     "prettier/prettier": "error",
     "react/no-unescaped-entities": 0,
     "no-console": "warn",

aim/web/ui/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+legacy-peer-deps=true

aim/web/ui/config-overrides.js

@@ -6,6 +6,12 @@ module.exports = {
   webpack: function (config, webpackEnv) {
     const isEnvProduction = webpackEnv === 'production';
 
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
     // Optimization Overrides
     config.optimization.splitChunks = {
       cacheGroups: {

aim/web/ui/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-slider": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.0.3",
     "@stitches/react": "^1.2.8",
@@ -38,7 +39,6 @@
     "immer": "^9.0.16",
     "lodash-es": "^4.17.21",
     "marked": "^4.1.1",
-    "material-ui-audio-player": "^1.7.1",
     "md5": "^2.3.0",
     "memoize-one": "^5.2.1",
     "moment": "^2.29.4",
@@ -131,7 +131,6 @@
     "@types/marked": "^4.0.7",
     "@types/md5": "^2.3.1",
     "@types/node": "^12.0.0",
-    "@types/node-sass": "^4.11.2",
     "@types/react": "^17.0.0",
     "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "^17.0.0",
@@ -155,7 +154,6 @@
     "jest-canvas-mock": "^2.3.1",
     "jss-plugin-template": "^10.7.1",
     "lint-staged": "^11.0.0",
-    "node-sass": "^6.0.1",
     "prettier": "2.3.1",
     "prettier-eslint": "^12.0.0",
     "progress-bar-webpack-plugin": "^2.1.0",
@@ -177,5 +175,9 @@
         }
       }
     ]
+  },
+  "engines": {
+    "npm": ">=8.0.0 <9.0.0",
+    "node": ">=16.0.0 <17.0.0"
   }
 }

aim/web/ui/src/components/AudioBox/AudioBox.d.ts

@@ -0,0 +1,18 @@
+import { IEventSystemEngine } from 'modules/core/engine/event-system';
+import { IBlobURISystemEngine } from 'modules/core/engine/blob-uri-system';
+
+export interface AudioBoxProps {
+  engine: {
+    events: IEventSystemEngine['engine'];
+    blobURI: IBlobURISystemEngine['engine'];
+  };
+  isFullView?: boolean;
+  caption?: string;
+  blobData: string;
+  step: number;
+  index: number;
+  context: Record<string, any>;
+  format: string;
+  name: string;
+  style?: {};
+}

aim/web/ui/src/components/AudioBox/AudioBox.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useAudioBlobURI } from 'hooks';
+
+import ErrorBoundary from 'components/ErrorBoundary';
+import { AudioPlayer } from 'components/kit_v2';
+
+import { AudioBoxProps } from './';
+function AudioBox(props: AudioBoxProps) {
+  const {
+    audioRef,
+    data,
+    setIsPlaying,
+    setProcessing,
+    onPlay,
+    onDownload,
+    processing,
+    isPlaying,
+    readyToPlay,
+    caption,
+  } = useAudioBlobURI(props);
+
+  return (
+    <ErrorBoundary>
+      <div style={props.style}>
+        <AudioPlayer
+          audioRef={audioRef}
+          src={data.src}
+          onEnded={() => setIsPlaying(false)}
+          onCanPlay={() => setProcessing(false)}
+          onPlay={onPlay}
+          onPause={() => setIsPlaying(false)}
+          onDownload={onDownload}
+          processing={processing}
+          isPlaying={isPlaying}
+          readyToPlay={readyToPlay}
+          caption={caption}
+        />
+      </div>
+    </ErrorBoundary>
+  );
+}
+
+export default AudioBox;

aim/web/ui/src/components/kit/AudioBox/index.ts → aim/web/ui/src/components/AudioBox/index.ts

@@ -1,5 +1,4 @@
 import AudioBox from './AudioBox';
 
 export * from './AudioBox.d';
-
 export default AudioBox;

aim/web/ui/src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import { Tooltip } from '@material-ui/core';
+import { IconClipboard, IconClipboardCheck } from '@tabler/icons-react';
 
-import { Button, Icon } from 'components/kit';
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+import { IconButton } from 'components/kit_v2';
 
 import { useCopy } from 'hooks/useCopy';
 
@@ -14,26 +15,21 @@ function CopyToClipboard({
   showSuccessDelay = 1500,
   className = '',
   copyContent = null,
-  iconSize = 'medium',
+  iconSize = 'md',
 }: ICopyToClipBoardProps): React.FunctionComponentElement<ICopyToClipBoardProps> {
-  const { onCopy, copied, setCopied } = useCopy(copyContent ?? contentRef);
-
-  React.useEffect(() => {
-    if (copied) {
-      setTimeout(() => {
-        setCopied(false);
-      }, showSuccessDelay);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [copied]);
+  const { onCopy, copied } = useCopy(copyContent ?? contentRef);
 
   return (
     <ErrorBoundary>
       <Tooltip title={copied ? 'Copied!' : 'Copy to clipboard'}>
         <span className={className} onClick={onCopy}>
-          <Button withOnlyIcon color='secondary' size={iconSize}>
-            {copied ? <Icon name='check' /> : <Icon name='copy' />}
-          </Button>
+          <IconButton
+            icon={copied ? <IconClipboardCheck /> : <IconClipboard />}
+            css={copied ? { transition: 'unset' } : {}}
+            color={copied ? 'success' : 'secondary'}
+            size={iconSize}
+            variant={copied ? 'static' : 'ghost'}
+          />
         </span>
       </Tooltip>
     </ErrorBoundary>

aim/web/ui/src/components/ImageBox/ImageBox.d.ts

@@ -0,0 +1,16 @@
+import { IBlobURISystemEngine } from 'modules/core/engine/blob-uri-system';
+
+export interface ImageBoxProps {
+  engine: {
+    blobURI: IBlobURISystemEngine['engine'];
+  };
+  caption?: string;
+  blobData: string;
+  step: number;
+  index: number;
+  context: Record<string, any>;
+  format: string;
+  name: string;
+  style?: {};
+  isFullView?: boolean;
+}

aim/web/ui/src/components/ImageBox/ImageBox.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useImageBlobURI } from 'hooks';
+
+import ErrorBoundary from 'components/ErrorBoundary';
+import { Spinner } from 'components/kit';
+
+import { ImageBoxProps } from './';
+
+function ImageBox(props: ImageBoxProps) {
+  const { data, caption } = useImageBlobURI(props);
+
+  return (
+    <ErrorBoundary>
+      <div style={props.style}>
+        {data.src ? (
+          <img
+            style={{ maxHeight: '100%', maxWidth: '100%' }}
+            src={data.src}
+            alt={caption}
+          />
+        ) : (
+          <Spinner size={24} thickness={2} />
+        )}
+      </div>
+    </ErrorBoundary>
+  );
+}
+export default ImageBox;

aim/web/ui/src/components/ImageBox/index.ts

@@ -0,0 +1,4 @@
+import ImageBox from './ImageBox';
+
+export * from './ImageBox.d';
+export default ImageBox;

aim/web/ui/src/components/MediaList/MediaList.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import { areEqual, VariableSizeList as List } from 'react-window';
 
-import { MediaTypeEnum } from 'components/MediaPanel/config';
-import AudioBox from 'components/kit/AudioBox';
-import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
+import AudioBox from 'components/AudioBox';
+import ImageBox from 'components/ImageBox';
+import ErrorBoundary from 'components/ErrorBoundary';
 
 import {
+  MediaTypeEnum,
   MEDIA_ITEMS_SIZES,
   MEDIA_LIST_HEIGHT,
 } from 'config/mediaConfigs/mediaConfigs';
 
 import getBiggestImageFromList from 'utils/getBiggestImageFromList';
 
-import ImageBox from './ImageBox';
 import { IMediaListProps } from './MediaList.d';
 
-const mediaBoxType: any = {
+const MediaBoxComponent: any = {
   [MediaTypeEnum.IMAGE]: ImageBox,
   [MediaTypeEnum.AUDIO]: AudioBox,
 };
@@ -36,9 +36,9 @@ function MediaList({
   const itemSize = React.useCallback(
     (index: number) => {
       if (mediaType === MediaTypeEnum.AUDIO) {
-        return MEDIA_ITEMS_SIZES[mediaType]().width;
+        return MEDIA_ITEMS_SIZES[MediaTypeEnum.AUDIO]().width;
       } else {
-        return MEDIA_ITEMS_SIZES[mediaType]({
+        return MEDIA_ITEMS_SIZES[MediaTypeEnum.IMAGE]({
           data,
           index,
           additionalProperties,
@@ -60,7 +60,7 @@ function MediaList({
     const { maxWidth, maxHeight } = getBiggestImageFromList(data);
     const { alignmentType, mediaItemSize } = additionalProperties;
     if (mediaType === MediaTypeEnum.IMAGE) {
-      return MEDIA_LIST_HEIGHT[mediaType]({
+      return MEDIA_LIST_HEIGHT[MediaTypeEnum.IMAGE]({
         alignmentType,
         maxHeight,
         maxWidth,
@@ -69,7 +69,7 @@ function MediaList({
         mediaItemHeight,
       });
     } else {
-      return MEDIA_LIST_HEIGHT[mediaType](mediaItemHeight);
+      return MEDIA_LIST_HEIGHT[MediaTypeEnum.AUDIO](mediaItemHeight);
     }
   }, [
     additionalProperties,
@@ -110,7 +110,7 @@ export default MediaList;
 
 const MediaBoxMemoized = React.memo(function MediaBoxMemoized(props: any) {
   const { index, style, data } = props;
-  const Component = mediaBoxType[data.mediaType];
+  const Component = MediaBoxComponent[data.mediaType];
 
   return (
     <ErrorBoundary>