Move loadingdots, spinner, and bar

frontend/apps/editor3d/app/src/components/reusable/LoadingSpinner.tsx

@@ -1,27 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-interface LoadingSpinnerProps {
-  className?: string;
-}
-
-export const LoadingSpinner = ({ className }: LoadingSpinnerProps) => {
-  return (
-    <svg
-      className={twMerge("h-6 w-6 animate-spin", className)}
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24">
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"></circle>
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-  );
-};

frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { LoadingDots } from "~/components";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { Modal } from "@storyteller/ui-modal";
 import { UploadAssetError } from "./UploadAssetError";
 import { UploadSuccess } from "./UploadSuccess";

frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { LoadingDots } from "~/components";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { Modal } from "@storyteller/ui-modal";
 import { Label } from "@storyteller/ui-label";
 import { UploadAssetError } from "../UploadModal/UploadAssetError";

frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { LoadingDots } from "~/components";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { Modal } from "@storyteller/ui-modal";
 import { UploadAssetError } from "../UploadModal/UploadAssetError";
 import { UploadSuccess } from "../UploadModal/UploadSuccess";

frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 
-import { LoadingDots } from "~/components";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { Modal } from "@storyteller/ui-modal";
 
 import { UploadAssetError } from "../UploadModal/UploadAssetError";

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

@@ -1,9 +1,6 @@
 export * from "./FilterButtons";
 export * from "./InputVector";
 export * from "./ListDropdown";
-export * from "./LoadingBar";
-export * from "./LoadingDots";
-export * from "./LoadingSpinner";
 export * from "./NumberInput";
 export * from "./Pagination";
 export * from "./Popover";

frontend/apps/editor3d/app/src/hoc/withProtectedRoute.tsx

@@ -1,7 +1,7 @@
 import { ComponentType, useEffect, useRef } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
-import { LoadingDots } from "~/components";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { authentication, persistLogin } from "~/signals";
 import { AUTH_STATUS } from "~/enums";
 import { TWO_SECONDS } from "~/constants";

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from "react";
 import { useSignals } from "@preact/signals-react/runtime";
-import { LoadingDots, TopBar } from "~/components";
+import { TopBar } from "~/components";
 import { Controls3D } from "./comps/Controls3D";
 import { ControlsTopButtons } from "./comps/ControlsTopButtons";
 import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject";
@@ -28,6 +28,7 @@ import { Outliner } from "./comps/Outliner";
 import { CameraAspectRatio } from "./enums";
 import { PromptBox3D } from "@storyteller/ui-promptbox";
 import { PopoverItem } from "@storyteller/ui-popover";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { OnboardingHelper } from "./comps/OnboardingHelper";
 import { FocalLengthDisplay } from "./comps/FocalLengthDisplay/FocalLengthDisplay";
 import { appTabId, is3DEditorInitialized, setAppTabId } from "~/signals/appTab";
@@ -456,7 +457,7 @@ export const PageEditor = () => {
       </div>
 
       <LoginModal
-        onClose={() => {}}
+        onClose={() => { }}
         videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4"
         videoSrc3D="/resources/videos/artcraft-3d-demo.mp4"
         openAiLogo="/resources/images/openai-logo.png"

frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx

@@ -4,7 +4,7 @@ import { EngineProvider } from "./contexts/EngineContext";
 import { useActiveJobs } from "~/hooks/useActiveJobs";
 import { useBackgroundLoadingMedia } from "~/hooks/useBackgroundLoadingMedia";
 import { useQueueHandler } from "./hooks/useQueueHandler";
-import { ErrorDialog, LoadingDots } from "~/components";
+import { ErrorDialog } from "~/components";
 import { GenerateModals } from "~/pages/PageEnigma/comps/GenerateModals/GenerateModals";
 import { Toaster } from "@storyteller/ui-toaster";
 import { EditorLoadingBar } from "./comps/EditorLoadingBar";
@@ -25,6 +25,7 @@ import { useImageGenerationFailureEvent } from "./TauriEvents/useImageGeneration
 import { useImageGenerationSuccessEvent } from "./TauriEvents/useImageGenerationSuccessEvent";
 import { PageEditor } from "~/pages/PageEnigma/PageEditor";
 import { GalleryDragComponent } from "@storyteller/ui-gallery-modal";
+import { LoadingDots } from "@storyteller/ui-loading";
 
 export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   useSignals();
@@ -106,23 +107,23 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => {
   }
 
   return (
-  
-      <EngineProvider sceneToken={sceneToken}>
-        <PageEditor />
-        <DragComponent />
-        <GalleryDragComponent />
-        <PrecisionSelector
-          showSignal={showPrecisionSelector}
-          coordSignal={precisionSelectorMenuCoords}
-          valuesSignal={precisionSelectorValues}
-          selectedValueSignal={precisionSelectedValue}
-        />
-        <GenerateModals />
-        <ErrorDialog />
-     
-      <EditorLoadingBar/>
+
+    <EngineProvider sceneToken={sceneToken}>
+      <PageEditor />
+      <DragComponent />
+      <GalleryDragComponent />
+      <PrecisionSelector
+        showSignal={showPrecisionSelector}
+        coordSignal={precisionSelectorMenuCoords}
+        valuesSignal={precisionSelectorValues}
+        selectedValueSignal={precisionSelectedValue}
+      />
+      <GenerateModals />
+      <ErrorDialog />
+
+      <EditorLoadingBar />
       <Toaster offsetTop={70} offsetRight={12} />
-      </EngineProvider>
- 
+    </EngineProvider>
+
   );
 };

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/LoadUserScenes/LoadUserScenes.tsx

@@ -10,7 +10,7 @@ import { MediaInfo } from "~/pages/PageEnigma/models";
 import { FilterEngineCategories, ToastTypes } from "~/enums";
 import { addToast } from "~/signals";
 import { ScenePicker, SceneTypes } from "../ScenePicker";
-import { LoadingSpinner } from "~/components";
+import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
 import { Label } from "@storyteller/ui-label";
 import { MediaFilesApi } from "~/Classes/ApiManager/MediaFilesApi";
 

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/EditorLoadingBar.tsx

@@ -1,7 +1,7 @@
 import { useSignals } from "@preact/signals-react/runtime";
 import { loadingBarData, loadingBarIsShowing } from "~/signals";
 
-import { LoadingBar } from "~/components";
+import { LoadingBar } from "@storyteller/ui-loading";
 export const EditorLoadingBar = () => {
   useSignals();
   return (

frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElements.tsx

@@ -1,6 +1,6 @@
 import { ItemElement } from "./ItemElement";
 import { MediaItem } from "~/pages/PageEnigma/models";
-import { LoadingDots } from "~/components";
+import { LoadingDots } from "@storyteller/ui-loading";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEmptySet } from "@fortawesome/pro-solid-svg-icons";
 import { AutoSizer, Grid } from "react-virtualized";

frontend/apps/editor3d/tsconfig.json

@@ -97,6 +97,9 @@
     {
       "path": "../../libs/components/modal"
     },
+    {
+      "path": "../../libs/components/loading"
+    },
     {
       "path": "../../libs/components/file-uploader"
     },

frontend/libs/components/loading/.babelrc

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

frontend/libs/components/loading/README.md

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

frontend/libs/components/loading/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@storyteller/ui-loading",
+  "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/loading/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/LoadingBar';
+export * from './lib/LoadingDots';

frontend/libs/components/loading/src/lib/LoadingBar.tsx

@@ -1,6 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
-import { LoadingSpinner } from "~/components";
+import { LoadingSpinner } from "@storyteller/ui-loading-spinner";
 
 interface LoadingBarProps {
   id?: string;

frontend/libs/components/loading/tsconfig.json

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

frontend/libs/components/loading/tsconfig.lib.json

@@ -0,0 +1,50 @@
+{
+  "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"
+  ],
+  "references": [
+    {
+      "path": "../loading-spinner/tsconfig.lib.json"
+    }
+  ]
+}

frontend/libs/components/loading/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/loading/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/loading',
+  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-loading',
+      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

@@ -1357,6 +1357,10 @@
       "name": "@storyteller/ui-lightbox-modal",
       "version": "0.0.1"
     },
+    "libs/components/loading": {
+      "name": "@storyteller/ui-loading",
+      "version": "0.0.1"
+    },
     "libs/components/loading-spinner": {
       "name": "@storyteller/ui-loading-spinner",
       "version": "0.0.1"
@@ -9211,6 +9215,10 @@
       "resolved": "libs/components/lightbox-modal",
       "link": true
     },
+    "node_modules/@storyteller/ui-loading": {
+      "resolved": "libs/components/loading",
+      "link": true
+    },
     "node_modules/@storyteller/ui-loading-spinner": {
       "resolved": "libs/components/loading-spinner",
       "link": true

frontend/tsconfig.json

@@ -113,6 +113,9 @@
     },
     {
       "path": "./libs/components/gravatar"
+    },
+    {
+      "path": "./libs/components/loading"
     }
   ]
 }