From 8e8da70c8d0fc9dcc6b4ef0889d0797855b981de Mon Sep 17 00:00:00 2001 From: Tanish Manku Date: Mon, 26 May 2025 23:58:37 -0700 Subject: [PATCH] Move loadingdots, spinner, and bar --- .../components/reusable/LoadingSpinner.tsx | 27 ---------- .../reusable/UploadModal/UploadModal.tsx | 2 +- .../reusable/UploadModal3D/UploadModal3D.tsx | 2 +- .../UploadImageMediaModal.tsx | 2 +- .../UploadModalMedia/UploadModalMedia.tsx | 2 +- .../app/src/components/reusable/index.ts | 3 -- .../app/src/hoc/withProtectedRoute.tsx | 2 +- .../app/src/pages/PageEnigma/PageEditor.tsx | 5 +- .../app/src/pages/PageEnigma/PageEnigma.tsx | 37 +++++++------- .../LoadUserScenes/LoadUserScenes.tsx | 2 +- .../PageEnigma/comps/EditorLoadingBar.tsx | 2 +- .../sharedComps/ItemElements.tsx | 2 +- frontend/apps/editor3d/tsconfig.json | 3 ++ frontend/libs/components/loading/.babelrc | 12 +++++ frontend/libs/components/loading/README.md | 7 +++ frontend/libs/components/loading/package.json | 17 +++++++ frontend/libs/components/loading/src/index.ts | 2 + .../loading/src/lib}/LoadingBar.tsx | 2 +- .../loading/src/lib}/LoadingDots.tsx | 0 .../libs/components/loading/tsconfig.json | 16 ++++++ .../libs/components/loading/tsconfig.lib.json | 50 +++++++++++++++++++ .../components/loading/tsconfig.spec.json | 34 +++++++++++++ .../libs/components/loading/vite.config.ts | 49 ++++++++++++++++++ frontend/package-lock.json | 8 +++ frontend/tsconfig.json | 3 ++ 25 files changed, 232 insertions(+), 59 deletions(-) delete mode 100644 frontend/apps/editor3d/app/src/components/reusable/LoadingSpinner.tsx create mode 100644 frontend/libs/components/loading/.babelrc create mode 100644 frontend/libs/components/loading/README.md create mode 100644 frontend/libs/components/loading/package.json create mode 100644 frontend/libs/components/loading/src/index.ts rename frontend/{apps/editor3d/app/src/components/reusable => libs/components/loading/src/lib}/LoadingBar.tsx (97%) rename frontend/{apps/editor3d/app/src/components/reusable => libs/components/loading/src/lib}/LoadingDots.tsx (100%) create mode 100644 frontend/libs/components/loading/tsconfig.json create mode 100644 frontend/libs/components/loading/tsconfig.lib.json create mode 100644 frontend/libs/components/loading/tsconfig.spec.json create mode 100644 frontend/libs/components/loading/vite.config.ts diff --git a/frontend/apps/editor3d/app/src/components/reusable/LoadingSpinner.tsx b/frontend/apps/editor3d/app/src/components/reusable/LoadingSpinner.tsx deleted file mode 100644 index 89bb46c414..0000000000 --- a/frontend/apps/editor3d/app/src/components/reusable/LoadingSpinner.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { twMerge } from "tailwind-merge"; - -interface LoadingSpinnerProps { - className?: string; -} - -export const LoadingSpinner = ({ className }: LoadingSpinnerProps) => { - return ( - - - - - ); -}; diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx index d17393458a..ca0b1d2326 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModal/UploadModal.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx index 671be0dd1f..de284c78cc 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx index 941125c238..34e373287c 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadImageMediaModal.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx index 03f52edc82..761c272fda 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModalMedia/UploadModalMedia.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/components/reusable/index.ts b/frontend/apps/editor3d/app/src/components/reusable/index.ts index 9ac14ecc1c..84250aed05 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/index.ts +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/hoc/withProtectedRoute.tsx b/frontend/apps/editor3d/app/src/hoc/withProtectedRoute.tsx index 68db6e20bb..5e96ed0bf2 100644 --- a/frontend/apps/editor3d/app/src/hoc/withProtectedRoute.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx index 32b194e74e..e0b3954caa 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx +++ b/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 = () => { {}} + onClose={() => { }} videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4" videoSrc3D="/resources/videos/artcraft-3d-demo.mp4" openAiLogo="/resources/images/openai-logo.png" diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx index bea6e0ee37..1c765aae57 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx +++ b/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 ( - - - - - - - - - - + + + + + + + + + + - - + + ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/LoadUserScenes/LoadUserScenes.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/LoadUserScenes/LoadUserScenes.tsx index 3b6bff2277..3987f0d634 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/ControlsTopButtons/LoadUserScenes/LoadUserScenes.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/EditorLoadingBar.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/EditorLoadingBar.tsx index 5375482108..75625b86d3 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/EditorLoadingBar.tsx +++ b/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 ( diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElements.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElements.tsx index 6b41bdd931..ffadcd5bf4 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/SidePanelTabs/sharedComps/ItemElements.tsx +++ b/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"; diff --git a/frontend/apps/editor3d/tsconfig.json b/frontend/apps/editor3d/tsconfig.json index 56bf82ca0d..a0ff0895e0 100644 --- a/frontend/apps/editor3d/tsconfig.json +++ b/frontend/apps/editor3d/tsconfig.json @@ -97,6 +97,9 @@ { "path": "../../libs/components/modal" }, + { + "path": "../../libs/components/loading" + }, { "path": "../../libs/components/file-uploader" }, diff --git a/frontend/libs/components/loading/.babelrc b/frontend/libs/components/loading/.babelrc new file mode 100644 index 0000000000..1ea870ead4 --- /dev/null +++ b/frontend/libs/components/loading/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/frontend/libs/components/loading/README.md b/frontend/libs/components/loading/README.md new file mode 100644 index 0000000000..1948222386 --- /dev/null +++ b/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/). diff --git a/frontend/libs/components/loading/package.json b/frontend/libs/components/loading/package.json new file mode 100644 index 0000000000..4384a2b8b1 --- /dev/null +++ b/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" + } + } +} diff --git a/frontend/libs/components/loading/src/index.ts b/frontend/libs/components/loading/src/index.ts new file mode 100644 index 0000000000..fd1b0344c6 --- /dev/null +++ b/frontend/libs/components/loading/src/index.ts @@ -0,0 +1,2 @@ +export * from './lib/LoadingBar'; +export * from './lib/LoadingDots'; diff --git a/frontend/apps/editor3d/app/src/components/reusable/LoadingBar.tsx b/frontend/libs/components/loading/src/lib/LoadingBar.tsx similarity index 97% rename from frontend/apps/editor3d/app/src/components/reusable/LoadingBar.tsx rename to frontend/libs/components/loading/src/lib/LoadingBar.tsx index 614edb3931..37c8352fdb 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/LoadingBar.tsx +++ b/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; diff --git a/frontend/apps/editor3d/app/src/components/reusable/LoadingDots.tsx b/frontend/libs/components/loading/src/lib/LoadingDots.tsx similarity index 100% rename from frontend/apps/editor3d/app/src/components/reusable/LoadingDots.tsx rename to frontend/libs/components/loading/src/lib/LoadingDots.tsx diff --git a/frontend/libs/components/loading/tsconfig.json b/frontend/libs/components/loading/tsconfig.json new file mode 100644 index 0000000000..38bc46252b --- /dev/null +++ b/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" +} diff --git a/frontend/libs/components/loading/tsconfig.lib.json b/frontend/libs/components/loading/tsconfig.lib.json new file mode 100644 index 0000000000..697e550c5c --- /dev/null +++ b/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" + } + ] +} diff --git a/frontend/libs/components/loading/tsconfig.spec.json b/frontend/libs/components/loading/tsconfig.spec.json new file mode 100644 index 0000000000..18b7de51b8 --- /dev/null +++ b/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" + } + ] +} diff --git a/frontend/libs/components/loading/vite.config.ts b/frontend/libs/components/loading/vite.config.ts new file mode 100644 index 0000000000..53366aa946 --- /dev/null +++ b/frontend/libs/components/loading/vite.config.ts @@ -0,0 +1,49 @@ +/// +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, + } + }, +})); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6f3b4708b2..1cb67b40de 100644 --- a/frontend/package-lock.json +++ b/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 diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 2caf881a79..b583cf9119 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -113,6 +113,9 @@ }, { "path": "./libs/components/gravatar" + }, + { + "path": "./libs/components/loading" } ] }