update imports for gloabl components

.gitignore

@@ -57,3 +57,6 @@ Cargo.lock
 
 *.env
 .DS_Store
+
+# Node.js dependencies
+node_modules/

node_modules/buster-web

@@ -1 +0,0 @@
-../web

web/src/api/createInstance.ts

@@ -2,6 +2,7 @@ import { BusterRoutes } from '@/routes/busterRoutes/busterRoutes';
 import axios, { AxiosError } from 'axios';
 import { rustErrorHandler } from './buster/errors';
 import { AxiosRequestHeaders } from 'axios';
+import { isServer } from '@tanstack/react-query';
 import { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies';
 
 const AXIOS_TIMEOUT = 120000; // 2 minutes
@@ -22,7 +23,7 @@ export const createInstance = (baseURL: string) => {
     (error: AxiosError) => {
       // console.error(error);
       //Redirect to login if 401 unauthorized error
-      if (error.status === 401 && typeof window !== 'undefined') {
+      if (error.status === 401 && !isServer) {
         window.location.href = BusterRoutes.AUTH_LOGIN;
       }
       return Promise.reject(rustErrorHandler(error));
@@ -40,7 +41,6 @@ export const defaultRequestHandler = async (
   }
 ) => {
   let token = '';
-  const isServer = typeof window === 'undefined';
   if (isServer) {
     const { cookies } = require('next/headers');
     const cookiesManager = cookies() as ReadonlyRequestCookies;

web/src/app/app/_layouts/AppAssetCheckLayout.tsx

@@ -5,7 +5,7 @@ import { AppPasswordAccess } from '../_controllers/AppPasswordAccess';
 import { AppNoPageAccess } from '../_controllers/AppNoPageAccess';
 import { BusterShareAssetType } from '@/api/busterv2';
 import { useBusterSupabaseAuthMethods } from '@/hooks/useBusterSupabaseAuthMethods';
-import { ClientSideAnonCheck } from './_ClientSideAnonCheck';
+import { ClientSideAnonCheck } from './ClientSideAnonCheck';
 import { redirect } from 'next/navigation';
 import { BusterRoutes, createBusterRoute } from '@/routes';
 

web/src/app/app/layoutClient.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { AppLayout } from './_controllers/AppLayout';
 import { BusterUserResponse } from '@/api/busterv2';
 import { useSupabaseServerContext } from '@/context/Supabase/useSupabaseContext';
-import { GlobalErrorComponent } from './_components/GlobalErrorComponent';
+import { GlobalErrorComponent } from '../../components/error';
 
 export const AppLayoutClient = ({
   children,

web/src/app/layout.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import '../styles/styles.scss';
 
 import { BusterStyleProvider } from '@/context/BusterStyles/BusterStyles';
-import { GlobalErrorComponent } from './app/_components/GlobalErrorComponent';
+import { GlobalErrorComponent } from '../components/error/GlobalErrorComponent';
 
 export const metadata: Metadata = {
   title: 'Buster',

web/src/components/error/GlobalErrorComponent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Alert, Button } from 'antd';
+import { Button } from 'antd';
-import { Component, ErrorInfo, ReactNode, useEffect } from 'react';
+import { Component, ErrorInfo, ReactNode } from 'react';
 import { Title } from '@/components/text';
 
 interface Props {

web/src/components/error/index.ts

@@ -1 +1,2 @@
 export * from './ErrorBoundary';
+export * from './GlobalErrorComponent';

web/src/components/inputs/AppCodeEditor/AppCodeEditor.tsx

@@ -120,8 +120,8 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
     const onMountCodeEditor = useMemoizedFn(
       async (editor: editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => {
         const [GithubLightTheme, NightOwlTheme] = await Promise.all([
-          (await import('./Github_light')).default,
+          (await import('./themes/github_light_theme')).default,
-          (await import('./Tomorrow-Night')).default
+          (await import('./themes/tomorrow_night_theme')).default
         ]);
 
         if (language === 'yaml') {

web/src/components/inputs/AppCodeEditor/themes/github_light_theme.ts

@@ -1,4 +1,4 @@
-import tailwind from '../../../../tailwind.config';
+import tailwind from '../../../../../tailwind.config';
 import type { editor } from 'monaco-editor';
 const colors = tailwind.theme.extend.colors;
 

web/src/components/inputs/AppCodeEditor/themes/xcode_default_theme.ts

@@ -1,4 +1,4 @@
-import tailwind from '../../../../tailwind.config';
+import tailwind from '../../../../../tailwind.config';
 const colors = tailwind.theme.extend.colors;
 
 const theme = {

web/src/components/inputs/AppSwitch.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Switch, SwitchProps } from 'antd';
-
-export interface AppSwitchProps extends SwitchProps {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onChange: (checked: boolean) => void;
-}
-
-export const AppSwitch: React.FC<AppSwitchProps> = (props) => {
-  return <Switch {...props} />;
-};

web/src/components/inputs/index.ts

@@ -1,2 +1 @@
-export * from './AppSwitch';
 export * from './AppSearchInput';

web/src/components/layout/PreventNavigation.tsx

@@ -38,8 +38,6 @@ export const PreventNavigation: React.FC<PreventNavigationProps> = React.memo(
 
     // Used to make popstate event trigger when back button is clicked.
     // Without this, the popstate event will not fire because it needs there to be a href to return.
-    if (typeof window !== 'undefined') {
-    }
 
     /**
      * Used to prevent navigation when use click in navigation `<Link />` or `<a />`.

web/src/context/Posthog/usePosthog.tsx

@@ -7,7 +7,7 @@ import { PostHogConfig } from 'posthog-js';
 import { isDev } from '@/config';
 import posthog from 'posthog-js';
 import { useUserConfigContextSelector } from '../Users';
-
+import { isServer } from '@tanstack/react-query';
 const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY!;
 
 export const BusterPosthogProvider: React.FC<PropsWithChildren> = React.memo(({ children }) => {
@@ -38,7 +38,7 @@ const PosthogWrapper: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const team = userTeams[0];
 
   useEffect(() => {
-    if (POSTHOG_KEY && typeof window !== 'undefined' && user && posthog && team) {
+    if (POSTHOG_KEY && !isServer && user && posthog && team) {
       posthog.init(POSTHOG_KEY, options);
 
       const email = user.email;

web/src/utils/canvas.ts

@@ -1,6 +1,5 @@
 import memoize from 'lodash/memoize';
-
+import { isServer } from '@tanstack/react-query';
-const isBrowser = typeof window !== 'undefined';
 
 let ctx: CanvasRenderingContext2D;
 const getCanvasContext = () => {
@@ -14,7 +13,7 @@ const getCanvasContext = () => {
 
 export const measureTextWidth = memoize(
   (text: string, font: any = {}) => {
-    if (isBrowser) {
+    if (!isServer) {
       const { fontSize, fontFamily = 'sans-serif', fontWeight, fontStyle, fontVariant } = font;
       const ctx = getCanvasContext();
       // @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/font

web/src/utils/text.ts

@@ -1,8 +1,6 @@
 import isNumber from 'lodash/isNumber';
 import { formatNumber } from './numbers';
 
-const isBrowser = typeof window !== 'undefined';
-
 export const inputHasText = (input: unknown): boolean => {
   if (typeof input !== 'string') {
     return false;