Move UploadModal

frontend/apps/editor3d/app/src/components/reusable/index.ts

@@ -1,3 +1,2 @@
-export * from "./UploadModal";
 export * from "./UploadModal3D";
 export * from "./UploadModalMedia";

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabAnimations.tsx

@@ -9,7 +9,7 @@ import {
 } from "~/enums";
 import {
   UploadModal,
-} from "~/components";
+} from "@storyteller/ui-upload-modal";
 import { SearchFilter } from "@storyteller/ui-search";
 import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button";
@@ -27,6 +27,7 @@ import {
   filterMMDAnimations,
 } from "./filterCharacterTypes";
 import { MediaItem } from "~/pages/PageEnigma/models";
+import { getFileExtension, getFileName } from "~/utilities";
 
 const filterEngineCategories = [FilterEngineCategories.ANIMATION];
 
@@ -177,6 +178,8 @@ export const AnimationsTab = ({
         />
       )}
       <UploadModal
+        getFileName={getFileName}
+        getFileExtension={getFileExtension}
         onClose={() => setOpenUploadModal(false)}
         onSuccess={fetchUserObjects}
         isOpen={openUploadModal}

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabCharacters.tsx

@@ -11,7 +11,7 @@ import {
 import { MediaItem } from "~/pages/PageEnigma/models";
 import {
   UploadModal,
-} from "~/components";
+} from "@storyteller/ui-upload-modal";
 import { SearchFilter } from "@storyteller/ui-search";
 import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button";
@@ -24,6 +24,7 @@ import {
   useSearchUserObjects,
   useFeatureFlags,
 } from "../../hooks";
+import { getFileExtension, getFileName } from "~/utilities";
 
 const filterEngineCategories = [FilterEngineCategories.CHARACTER];
 
@@ -195,6 +196,8 @@ export const CharactersTab = ({
         />
       )}
       <UploadModal
+        getFileName={getFileName}
+        getFileExtension={getFileExtension}
         onClose={() => setOpenUploadModal(false)}
         onSuccess={fetchUserObjects}
         isOpen={openUploadModal}

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/subtabExpressions.tsx

@@ -7,7 +7,7 @@ import {
 } from "~/enums";
 import {
   UploadModal,
-} from "~/components";
+} from "@storyteller/ui-upload-modal";
 import { SearchFilter } from "@storyteller/ui-search";
 import { Pagination } from "@storyteller/ui-pagination";
 import { Button, FilterButtons } from "@storyteller/ui-button";
@@ -20,6 +20,7 @@ import {
   useSearchUserObjects,
   useFeatureFlags,
 } from "../../hooks";
+import { getFileExtension, getFileName } from "~/utilities";
 
 const filterEngineCategories = [FilterEngineCategories.EXPRESSION];
 
@@ -154,6 +155,8 @@ export const ExpressionTab = () => {
         />
       )}
       <UploadModal
+        getFileName={getFileName}
+        getFileExtension={getFileExtension}
         onClose={() => setOpenUploadModal(false)}
         onSuccess={fetchUserObjects}
         isOpen={openUploadModal}

frontend/libs/common/src/lib/enums/MediaFileAnimationType.ts

@@ -0,0 +1,14 @@
+export enum MediaFileAnimationType {
+  ArKit = "ar_kit",
+  MikuMikuDance = "miku_miku_dance",
+  MikuMikuDanceArKit = "miku_miku_dance_ar_kit",
+  Mixamo = "mixamo",
+  MixamoArKit = "mixamo_ar_kit",
+  MocapNet = "mocap_net",
+  MocapNetArKit = "mocap_net_ar_kit",
+  MoveAi = "move_ai",
+  MoveAiArKit = "move_ai_ar_kit",
+  Rigify = "rigify",
+  RigifyArKit = "rigify_ar_kit",
+  Rokoko = "rokoko",
+}

frontend/libs/common/src/lib/enums/ThumbnailsFileType.ts

@@ -0,0 +1,6 @@
+export enum THUMBNAILS_FILE_TYPE {
+  PNG = "png",
+  JPG = "jpg",
+  JPEG = "jpeg",
+  GIF = "gif",
+}

frontend/libs/common/src/lib/enums/index.ts

@@ -4,3 +4,5 @@ export * from "./UploaderStates";
 export * from "./Hotkeys";
 export * from "./Toaster";
 export * from "./AssetFilterOption";
+export * from "./ThumbnailsFileType";
+export * from "./MediaFileAnimationType";

frontend/libs/components/upload-modal/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

frontend/libs/components/upload-modal/README.md

@@ -0,0 +1,7 @@
+# @storyteller/ui-upload-modal
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @storyteller/ui-upload-modal` to execute the unit tests via [Vitest](https://vitest.dev/).

frontend/libs/components/upload-modal/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-upload-modal",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  }
+}

frontend/libs/components/upload-modal/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/index';

frontend/libs/components/upload-modal/src/lib/UploadAssetError.tsx

@@ -1,4 +1,4 @@
-import { FilterEngineCategories } from "~/enums";
+import { FilterEngineCategories } from "@storyteller/api";
 import { Button } from "@storyteller/ui-button";
 interface Props {
   onCancel: () => void;

frontend/libs/components/upload-modal/src/lib/UploadFiles.tsx

@@ -3,13 +3,15 @@ import { Input } from "@storyteller/ui-input";
 import { Button } from "@storyteller/ui-button";
 import { FileUploader } from "@storyteller/ui-file-uploader";
 import { useState } from "react";
+import {
+  FilterEngineCategories,
+} from "@storyteller/api";
 import {
   THUMBNAILS_FILE_TYPE,
   MediaFileAnimationType,
-  FilterEngineCategories,
-} from "~/enums";
+  UploaderState
+} from "@storyteller/common";
 import { uploadAssets } from "./uploadAssets";
-import { UploaderState } from "~/models";
 
 interface Props {
   title: string;
@@ -22,6 +24,8 @@ interface Props {
     hasThumbnailUpload?: boolean;
   };
   onUploadProgress: (newState: UploaderState) => void;
+  getFileName: (file: File) => string;
+  getFileExtension: (file: File) => string;
 }
 
 export const UploadFiles = ({
@@ -31,6 +35,8 @@ export const UploadFiles = ({
   title,
   options,
   onUploadProgress,
+  getFileName,
+  getFileExtension,
 }: Props) => {
   const fileSubtypes = options?.fileSubtypes;
   const hasLength = options?.hasLength;
@@ -82,6 +88,8 @@ export const UploadFiles = ({
       thumbnailFile: thumbnailFile || undefined,
       length: uploadLength,
       progressCallback: onUploadProgress,
+      getFileName: getFileName,
+      getFileExtension: getFileExtension,
     });
   };
 

frontend/libs/components/upload-modal/src/lib/UploadModal.tsx

@@ -19,6 +19,8 @@ interface Props {
     hasLength?: boolean;
     hasThumbnailUpload?: boolean;
   };
+  getFileName: (file: File) => string;
+  getFileExtension: (file: File) => string;
 }
 
 export function UploadModal({
@@ -29,6 +31,8 @@ export function UploadModal({
   fileTypes,
   type,
   options,
+  getFileName,
+  getFileExtension,
 }: Props) {
   const [uploaderState, setUploaderState] =
     useState<UploaderState>(initialUploaderState);
@@ -58,6 +62,8 @@ export function UploadModal({
             options={options}
             onClose={onClose}
             onUploadProgress={updateUploaderState}
+            getFileName={getFileName}
+            getFileExtension={getFileExtension}
           />
         );
       case UploaderStates.uploadingAsset:

frontend/libs/components/upload-modal/src/lib/uploadAssets.ts

@@ -2,14 +2,14 @@ import { v4 as uuidv4 } from "uuid";
 
 import {
   FilterEngineCategories,
-  MediaFileAnimationType,
+} from "@storyteller/api";
+import {
   UploaderStates,
-} from "~/enums";
+  MediaFileAnimationType,
+  UploaderState
+} from "@storyteller/common";
 
-import { getFileName, getFileExtension } from "~/utilities";
-
-import { MediaUploadApi, MediaFilesApi } from "~/Classes/ApiManager";
-import { UploaderState } from "~/models";
+import { MediaUploadApi, MediaFilesApi } from "@storyteller/api";
 
 export const uploadAssets = async ({
   title,
@@ -19,6 +19,8 @@ export const uploadAssets = async ({
   animationType,
   length,
   progressCallback,
+  getFileName,
+  getFileExtension,
 }: {
   title: string;
   assetFile: File;
@@ -27,6 +29,8 @@ export const uploadAssets = async ({
   animationType?: MediaFileAnimationType;
   length?: number;
   progressCallback: (newState: UploaderState) => void;
+  getFileName: (file: File) => string;
+  getFileExtension: (file: File) => string;
 }) => {
   progressCallback({ status: UploaderStates.uploadingAsset });
   const mediaUploadApi = new MediaUploadApi();

frontend/libs/components/upload-modal/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

frontend/libs/components/upload-modal/tsconfig.lib.json

@@ -0,0 +1,45 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
+}

frontend/libs/components/upload-modal/tsconfig.spec.json

@@ -0,0 +1,34 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/upload-modal/vite.config.ts

@@ -0,0 +1,49 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/components/upload-modal',
+  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@storyteller/ui-upload-modal',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const]
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react','react-dom','react/jsx-runtime']
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    }
+  },
+}));

frontend/package-lock.json

@@ -1433,6 +1433,10 @@
       "version": "0.0.1",
       "extraneous": true
     },
+    "libs/components/upload-modal": {
+      "name": "@storyteller/ui-upload-modal",
+      "version": "0.0.1"
+    },
     "libs/login": {
       "name": "@frontend/login",
       "version": "0.0.1"
@@ -9295,6 +9299,10 @@
       "resolved": "libs/components/tooltip",
       "link": true
     },
+    "node_modules/@storyteller/ui-upload-modal": {
+      "resolved": "libs/components/upload-modal",
+      "link": true
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",

frontend/tsconfig.json

@@ -125,6 +125,9 @@
     },
     {
       "path": "./libs/components/search"
+    },
+    {
+      "path": "./libs/components/upload-modal"
     }
   ]
 }