@griddo/ax 11.10.23 → 11.10.24

package/src/modules/Forms/FormEditor/index.tsx

@@ -1,9 +1,15 @@
-import React, { useState, useRef, useEffect } from "react";
-import { connect } from "react-redux";
-import { RouteComponentProps } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
 import { withErrorBoundary } from "react-error-boundary";
+import { connect } from "react-redux";
+import type { RouteComponentProps } from "react-router-dom";
 
-import {
+import { ErrorPage, ErrorToast, Loading, MainWrapper, Notification, OcassionalToast } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { formsActions } from "@ax/containers/Forms";
+import { findFieldsErrors } from "@ax/forms";
+import { RouteLeavingGuard } from "@ax/guards";
+import { useDefaultTheme, useModal, usePermission, useShouldBeSaved } from "@ax/hooks";
+import type {
 	FormContent,
 	FormLanguage,
 	FormState,
@@ -13,17 +19,10 @@ import {
 	IRootState,
 	ISite,
 } from "@ax/types";
-import { MainWrapper, Loading, ErrorToast, Notification, ErrorPage, OcassionalToast } from "@ax/components";
-import { appActions } from "@ax/containers/App";
-import { formsActions } from "@ax/containers/Forms";
-import { RouteLeavingGuard } from "@ax/guards";
-import { useModal, usePermission, useShouldBeSaved } from "@ax/hooks";
-import { getDefaultTheme } from "@ax/helpers";
-import { findFieldsErrors } from "@ax/forms";
 
-import Editor from "./Editor";
-import FormUseModal from "../FormUseModal";
 import { DeleteModal, UnPublishModal, UpdateModal } from "../atoms";
+import FormUseModal from "../FormUseModal";
+import Editor from "./Editor";
 
 import * as S from "./style";
 
@@ -93,7 +92,7 @@ const FormEditor = (props: IProps) => {
 
 	const toastMsg = "This form is used in some pages. Changes will apply to all pages where it’s in use.";
 	const backLinkRoute = isSiteView ? "/sites/forms" : "/forms";
-	const theme = getDefaultTheme();
+	const { defaultTheme: theme } = useDefaultTheme();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {

package/src/modules/FramePreview/index.tsx

@@ -1,13 +1,11 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { getDefaultTheme } from "@ax/helpers";
-import { Loading, BrowserContent } from "@ax/components";
-import { FormContent, ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
-import { pageEditorActions } from "@ax/containers/PageEditor";
+import { BrowserContent, Loading } from "@ax/components";
 import { formsActions } from "@ax/containers/Forms";
+import { pageEditorActions } from "@ax/containers/PageEditor";
 import { findByEditorID } from "@ax/forms";
-import { useOnMessageReceivedFromOutside, useURLSearchParam } from "@ax/hooks";
+import { useDefaultTheme, useOnMessageReceivedFromOutside, useURLSearchParam } from "@ax/hooks";
+import type { FormContent, ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
 import * as S from "./style";
 
@@ -53,6 +51,7 @@ const FramePreview = (props: IProps) => {
 
 	const selectEditorID = (
 		selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
+		// biome-ignore lint/correctness/noUnusedFunctionParameters: TODO: fix this
 		parentComponent: string | undefined | null,
 		e: React.SyntheticEvent,
 	) => {
@@ -78,7 +77,7 @@ const FramePreview = (props: IProps) => {
 		}
 	};
 
-	const globalTheme = getDefaultTheme();
+	const { defaultTheme: globalTheme, isLoading: schemasLoading } = useDefaultTheme();
 	const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
 	const langs = currentSiteInfo ? siteLangs : globalLangs;
 	const siteID = currentSiteInfo ? currentSiteInfo.id : canonicalSite;
@@ -100,9 +99,10 @@ const FramePreview = (props: IProps) => {
 		duplicateModuleAction: duplicateModuleSelected,
 	};
 
-	if (isLoading) return <Loading />;
+	if (isLoading || schemasLoading) return <Loading />;
 
 	return (
+		// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
 		<S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
 			<BrowserContent
 				cloudinaryName={cloudinaryName}

package/src/modules/GlobalEditor/index.tsx

@@ -1,8 +1,29 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { withErrorBoundary } from "react-error-boundary";
 import { connect } from "react-redux";
 import type { RouteComponentProps } from "react-router-dom";
-import { withErrorBoundary } from "react-error-boundary";
 
+import {
+	CancelScheduleModal,
+	ErrorPage,
+	ErrorToast,
+	Loading,
+	MainWrapper,
+	Modal,
+	Notification,
+	OcassionalToast,
+	RestoreModal,
+	ScheduleModal,
+} from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { pageStatus } from "@ax/containers/PageEditor/interfaces";
+import { sitesActions } from "@ax/containers/Sites";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { usersActions } from "@ax/containers/Users";
+import { RouteLeavingGuard } from "@ax/guards";
+import { dateToString } from "@ax/helpers";
+import { useDefaultTheme, useIsDirty, useModal, usePermission } from "@ax/hooks";
 import type {
 	IErrorItem,
 	ILanguage,
@@ -13,27 +34,6 @@ import type {
 	ISite,
 	IUserEditing,
 } from "@ax/types";
-import {
-	MainWrapper,
-	Loading,
-	ErrorToast,
-	Notification,
-	Modal,
-	ErrorPage,
-	CancelScheduleModal,
-	ScheduleModal,
-	RestoreModal,
-	OcassionalToast,
-} from "@ax/components";
-import { pageEditorActions } from "@ax/containers/PageEditor";
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { usersActions } from "@ax/containers/Users";
-import { appActions } from "@ax/containers/App";
-import { sitesActions } from "@ax/containers/Sites";
-import { pageStatus } from "@ax/containers/PageEditor/interfaces";
-import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal, usePermission } from "@ax/hooks";
-import { dateToString, getDefaultTheme } from "@ax/helpers";
 
 import Editor from "./Editor";
 import Preview from "./Preview";
@@ -74,7 +74,7 @@ const GlobalEditor = (props: IProps) => {
 	const isAllowedToCreatePages = usePermission("global.globalData.createAllGlobalData");
 	const isAllowedToDeletePage = usePermission("global.globalData.deleteAllGlobalData");
 	const isAllowedToEditContentPage = usePermission("global.globalData.editAllGlobalData");
-
+	//
 	const defaultTab = isAllowedToEditContentPage ? "edit" : "view";
 
 	const { isOpen, toggleModal } = useModal();
@@ -85,7 +85,10 @@ const GlobalEditor = (props: IProps) => {
 	const [toastMsg, setToastMsg] = useState<string | null>(null);
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
 	const [errorPagesChecked, setErrorPagesChecked] = useState(false);
-	const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
+	const [scheduleDate, setScheduleDate] = useState({
+		date: dateToString(new Date(), "yyy/MM/dd"),
+		time: "12:00 am",
+	});
 	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
 	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
@@ -113,7 +116,7 @@ const GlobalEditor = (props: IProps) => {
 
 	const backLinkRoute = "/data";
 
-	const theme = getDefaultTheme();
+	const { defaultTheme: theme } = useDefaultTheme();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -189,7 +192,7 @@ const GlobalEditor = (props: IProps) => {
 			const isSaved =
 				pageID && !isNewTranslation
 					? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-					: await savePage({ publishPage});
+					: await savePage({ publishPage });
 
 			if (isSaved) {
 				resetDirty();
@@ -209,7 +212,7 @@ const GlobalEditor = (props: IProps) => {
 				status: pageStatus.UPLOAD_PENDING,
 			};
 
-			const isSaved = await savePage({publishPage});
+			const isSaved = await savePage({ publishPage });
 			if (isSaved) {
 				resetDirty();
 			}
@@ -265,7 +268,7 @@ const GlobalEditor = (props: IProps) => {
 	const handleCreateDraft = async () => {
 		const { savePage } = props;
 
-		const isSaved = await savePage({ createDraft: true});
+		const isSaved = await savePage({ createDraft: true });
 		if (isSaved) resetDirty();
 	};
 
@@ -386,10 +389,10 @@ const GlobalEditor = (props: IProps) => {
 	const handleSavePage = async (setToast?: (msg: string) => void) => {
 		const { savePage } = props;
 
-		const isSaved = await savePage({setToast});
-		if (isSaved){
-			 resetDirty();
-			 setToastMsg(null);
+		const isSaved = await savePage({ setToast });
+		if (isSaved) {
+			resetDirty();
+			setToastMsg(null);
 		}
 	};
 
@@ -494,14 +497,20 @@ const GlobalEditor = (props: IProps) => {
 		onClick: handleSchedulePublication,
 	};
 
-	const secondaryScheduleModalAction = { title: "Cancel", onClick: toggleScheduleModal };
+	const secondaryScheduleModalAction = {
+		title: "Cancel",
+		onClick: toggleScheduleModal,
+	};
 
 	const mainCancelScheduleModalAction = {
 		title: "Cancel Schedule",
 		onClick: handleCancelSchedulePublication,
 	};
 
-	const secondaryCancelScheduleModalAction = { title: "Back", onClick: toggleCancelScheduleModal };
+	const secondaryCancelScheduleModalAction = {
+		title: "Back",
+		onClick: toggleCancelScheduleModal,
+	};
 
 	const tabIcons = isAllowedToEditContentPage
 		? [
@@ -511,11 +520,11 @@ const GlobalEditor = (props: IProps) => {
 		: [{ name: "view", text: "Preview mode" }];
 
 	const handleSelectedTab = async (tab: string) => {
-		if(tab === "view" && (!isPublished || isDraft)){
+		if (tab === "view" && (!isPublished || isDraft)) {
 			handleSavePage(setToastMsg);
 		}
 		setSelectedTab(tab);
-	}
+	};
 
 	const tabsPreview = {
 		icons: tabIcons,
@@ -656,9 +665,8 @@ const GlobalEditor = (props: IProps) => {
 					{isOpen && (
 						<S.ModalContent>
 							<p>
-								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview
-								the page but <strong>you cannot make changes to it</strong> until {userEditing?.name}{" "}
-								leaves the page.
+								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview the page but{" "}
+								<strong>you cannot make changes to it</strong> until {userEditing?.name} leaves the page.
 							</p>
 						</S.ModalContent>
 					)}
@@ -772,7 +780,12 @@ const mapDispatchToProps = {
 
 interface IPageEditorDispatchProps {
 	getPage(pageID?: number, global?: boolean): Promise<void>;
-	savePage(data?: {createDraft?: boolean; publishPage?: { status: string }; publishDraft?: boolean; setToast?: (msg: string) => void}): Promise<boolean>;
+	savePage(data?: {
+		createDraft?: boolean;
+		publishPage?: { status: string };
+		publishDraft?: boolean;
+		setToast?: (msg: string) => void;
+	}): Promise<boolean>;
 	deletePage(params?: ISavePageParams): Promise<boolean>;
 	validatePage(publish?: boolean): Promise<boolean>;
 	updatePageStatus(id: number[], status: string): Promise<boolean>;
@@ -793,6 +806,8 @@ interface IPageEditorDispatchProps {
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;
 
-const GlobalEditorWithErrorBoundary = withErrorBoundary(GlobalEditor, { fallback: <ErrorPage type="wrongEditor" /> });
+const GlobalEditorWithErrorBoundary = withErrorBoundary(GlobalEditor, {
+	fallback: <ErrorPage type="wrongEditor" />,
+});
 
 export default connect(mapStateToProps, mapDispatchToProps)(GlobalEditorWithErrorBoundary);

package/src/modules/MediaGallery/ImageModal/index.tsx

@@ -1,11 +1,15 @@
-import React, { useState } from "react";
-import { IGetFolderParams, IImage } from "@ax/types";
-import { Button, ErrorToast, IconAction, Toast, Tooltip } from "@ax/components";
+import { useState } from "react";
+
+import { Button, ErrorToast, IconAction, Loader, Toast, Tooltip } from "@ax/components";
 import { useModal, useToast } from "@ax/hooks";
-import ImageDragAndDrop from "../ImageDragAndDrop";
+import type { IGetFolderParams, IImage } from "@ax/types";
+
+import { type Fields, GriddoImageExp } from "@griddo/core";
+
+import type { IImageFormState } from "..";
 import { NotSavedModal } from "../atoms";
+import ImageDragAndDrop from "../ImageDragAndDrop";
 import DetailPanel from "./DetailPanel";
-import { IImageFormState } from "..";
 
 import * as S from "./style";
 
@@ -26,7 +30,7 @@ const ImageModal = (props: IProps) => {
 		getParams,
 	} = props;
 
-	const { name, id, site, alt, url } = image;
+	const { name, id, site } = image;
 
 	const [isDNDVisible, setDNDVisible] = useState(false);
 	const [isArrowPrev, setIsArrowPrev] = useState(false);
@@ -89,9 +93,11 @@ const ImageModal = (props: IProps) => {
 					<IconAction icon="leftArrow" onClick={handleArrowClick(true)} disabled={index === 0} />
 					<S.FilePreview>
 						<S.ImageWrapper>
-							<div>
-								<img src={url} alt={alt} />
-							</div>
+							<S.SpinnerWrapper>
+								<Loader name="dots" />
+							</S.SpinnerWrapper>
+							{/* Fields.Image (Core) y IImage (AX) no son **exactamente** iguales por lo que se ha decidido castearlo (aunque es lo mismo que poner any)...*/}
+							<GriddoImageExp key={image.id} image={image as unknown as Fields.Image} widths={["1000"]} />
 							{isDNDVisible && (
 								<S.DragAndDropWrapper>
 									<ImageDragAndDrop

package/src/modules/MediaGallery/ImageModal/style.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 
 const Wrapper = styled.div`
   display: flex;
@@ -91,6 +91,20 @@ const DragAndDropWrapper = styled.div`
   width: 100%;
 `;
 
+const fadeIn = keyframes`
+  to { opacity: 1; }
+}`;
+
+const SpinnerWrapper = styled.div`
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-Index: -1;
+  animation: ${fadeIn} 1s linear infinite;
+`;
+
 export {
 	Wrapper,
 	FilePreview,
@@ -103,4 +117,5 @@ export {
 	ActionItem,
 	TextType,
 	DragAndDropWrapper,
+	SpinnerWrapper,
 };

package/src/modules/PublicPreview/index.tsx

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { pages } from "@ax/api";
-import { getDefaultTheme, isReqOk } from "@ax/helpers";
 import { BrowserContent, Loading } from "@ax/components";
+import { isReqOk } from "@ax/helpers";
+import { useDefaultTheme } from "@ax/hooks";
 
 import * as S from "./style";
 
@@ -38,13 +39,13 @@ const PublicPreview = () => {
 		};
 	}, []);
 
-	const globalTheme = getDefaultTheme();
+	const { defaultTheme: globalTheme, isLoading: schemasLoading } = useDefaultTheme();
 	const theme = state && state.site ? state.siteInfo.theme : globalTheme;
 	const socials = state && state.site ? state.siteInfo.socials : [];
 	const langs = state && state.site ? state.siteInfo.siteLanguages : [];
 	const siteID = state && state.siteInfo ? state.siteInfo.siteId : undefined;
 
-	if (isLoading || !state) return <Loading />;
+	if (isLoading || schemasLoading || !state) return <Loading />;
 
 	return (
 		<S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/index.tsx

@@ -1,15 +1,14 @@
-import React from "react";
 import { connect } from "react-redux";
 
 import { ResizePanel } from "@ax/components";
-import { IRootState } from "@ax/types";
-import { getDefaultTheme } from "@ax/helpers";
+import { useDefaultTheme } from "@ax/hooks";
+import type { IRootState } from "@ax/types";
 
-import TemplateBrowser from "./TemplateBrowser";
 import ConfigPanel from "./ConfigPanel";
+import TemplateBrowser from "./TemplateBrowser";
 
 const Editor = (props: IProps) => {
-	const theme = getDefaultTheme();
+	const { defaultTheme: theme } = useDefaultTheme();
 
 	return <ResizePanel leftPanel={<TemplateBrowser />} rightPanel={<ConfigPanel theme={theme} {...props} />} />;
 };

package/src/modules/Settings/Globals/index.tsx

@@ -1,19 +1,17 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { config } from "components";
 
-const themes = config.schemas.config.themes;
-
-import { IGriddoTheme, IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
-import { RouteLeavingGuard } from "@ax/guards";
-import { useModal, useShouldBeSaved } from "@ax/hooks";
+import { ErrorToast, FieldGroup, FieldsBehavior, MainWrapper, Modal, Nav, Notification } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { FieldsBehavior, FieldGroup, MainWrapper, ErrorToast, Nav, Notification, Modal } from "@ax/components";
 import { sitesActions } from "@ax/containers/Sites";
+import { RouteLeavingGuard } from "@ax/guards";
 import { getNavigationModules } from "@ax/helpers";
+import { useModal, useShouldBeSaved, useThemes } from "@ax/hooks";
+import type { IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
 
-import NavigationModules from "./NavigationModules";
 import { timezones } from "./constants";
+import NavigationModules from "./NavigationModules";
+
 import * as S from "./style";
 
 const Globals = (props: IProps): JSX.Element => {
@@ -22,6 +20,7 @@ const Globals = (props: IProps): JSX.Element => {
 	const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
 	const [tempTheme, setTempTheme] = useState<string | undefined>();
 	const { isOpen, toggleModal } = useModal();
+	const { themes } = useThemes();
 
 	const title = "General settings";
 
@@ -43,8 +42,8 @@ const Globals = (props: IProps): JSX.Element => {
 	const setNameValue = (value: string) => setValue({ name: value });
 	const setTimezoneValue = (value: string) => setValue({ timezone: value });
 	const setThemeValue = (value: string) => {
-		const theme = (themes as IGriddoTheme[]).find((th) => th.value === value);
-		if (theme && theme.elements) {
+		const theme = themes?.find((theme) => theme.value === value);
+		if (theme?.elements) {
 			setTempTheme(value);
 			toggleModal();
 		} else {

package/src/modules/Sites/index.tsx

@@ -1,14 +1,14 @@
-import React, { useLayoutEffect } from "react";
-
+import { useLayoutEffect } from "react";
 import { connect } from "react-redux";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+import { type RouteComponentProps, withRouter } from "react-router-dom";
 
-import { IGetRoles, ILanguage, IRootState, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
-import { sitesActions } from "@ax/containers/Sites";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
+import { sitesActions } from "@ax/containers/Sites";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
+import { schemasService } from "@ax/services";
+import type { IGetRoles, ILanguage, IRootState, ISite } from "@ax/types";
 
 import SitesList from "./SitesList";
 
@@ -25,12 +25,18 @@ const Sites = (props: ISitesProps): JSX.Element => {
 		updateCurrentSearch,
 		resetCurrentData,
 		setIsLoading,
+		loadSchemas,
 	} = props;
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useLayoutEffect(() => {
 		const fetchInitialData = async () => {
 			setIsLoading(true);
+
+			// Cargar schemas primero (después del login)
+			await loadSchemas();
+			console.log("------------SCHEMAS LOADED-----------");
+
 			setCurrentSiteInfo(null);
 			updateCurrentSearch("");
 			resetCurrentData();
@@ -78,6 +84,7 @@ interface IDispatchProps {
 	updateCurrentSearch(query: string): Promise<void>;
 	resetCurrentData(): Promise<void>;
 	setIsLoading(isLoading: boolean): void;
+	loadSchemas(): Promise<boolean>;
 }
 
 export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;
@@ -92,6 +99,7 @@ const mapDispatchToProps = {
 	updateCurrentSearch: structuredDataActions.updateCurrentSearch,
 	resetCurrentData: structuredDataActions.resetCurrentData,
 	setIsLoading: appActions.setIsLoading,
+	loadSchemas: appActions.loadSchemas,
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sites));

package/src/modules/StructuredData/Form/index.tsx

@@ -1,7 +1,23 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
 import {
+	CancelScheduleModal,
+	ErrorToast,
+	Loading,
+	MainWrapper,
+	Notification,
+	RestoreModal,
+	ScheduleModal,
+} from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { setIsSavedData } from "@ax/forms";
+import { RouteLeavingGuard } from "@ax/guards";
+import { dateToString, getActivatedDataPacksIds } from "@ax/helpers";
+import { useDefaultTheme, useIsDirty, useModal } from "@ax/hooks";
+import type {
 	IDataLanguage,
 	IDataPack,
 	IErrorItem,
@@ -11,22 +27,6 @@ import {
 	ISchemaField,
 	ISite,
 } from "@ax/types";
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import {
-	MainWrapper,
-	ErrorToast,
-	Notification,
-	Loading,
-	CancelScheduleModal,
-	ScheduleModal,
-	RestoreModal,
-} from "@ax/components";
-import { dateToString, getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
-import { appActions } from "@ax/containers/App";
-import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal } from "@ax/hooks";
-import { setIsSavedData } from "@ax/forms";
-import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 
 import ConnectedField from "./ConnectedField";
 
@@ -108,7 +108,7 @@ const Form = (props: IProps) => {
 	const deletedNotificationText =
 		"This content type has been deleted and can’t be edited. It will be permanently removed from the trash after 30 days.";
 
-	const theme = getDefaultTheme();
+	const { defaultTheme: theme } = useDefaultTheme();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -180,17 +180,13 @@ const Form = (props: IProps) => {
 
 	const getCurrentLanguages = () => {
 		const availables: ILanguage[] = [];
-
-		form?.dataLanguages &&
-			form.dataLanguages.forEach(
-				(dataLang: IDataLanguage) =>
-					languages &&
-					languages.forEach((language) => {
-						if (language.id === dataLang.language) {
-							availables.push(language);
-						}
-					}),
-			);
+		form?.dataLanguages?.forEach((dataLang: IDataLanguage) => {
+			languages?.forEach((language) => {
+				if (language.id === dataLang.language) {
+					availables.push(language);
+				}
+			});
+		});
 
 		return availables;
 	};

package/src/modules/StructuredData/StructuredDataList/OptionTable/index.tsx

@@ -1,11 +1,20 @@
-import React, { useReducer, useEffect } from "react";
+import { useEffect, useReducer } from "react";
 
-import { IStructuredDataFilter, IStructuredDataValue } from "@ax/types";
-import { getDefaultTheme, getThumbnailProps } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
+import { getThumbnailProps } from "@ax/helpers";
+import { useDefaultTheme } from "@ax/hooks";
+import type { IStructuredDataFilter, IStructuredDataValue } from "@ax/types";
+
+import { MainActionButton, SecondaryActionButton } from "./../atoms";
+import {
+	type IOptionTableStore,
+	reducer,
+	setColumnValues,
+	setOption,
+	setSelectedType,
+	setShowThumbnail,
+} from "./store";
 
-import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
-import { SecondaryActionButton, MainActionButton } from "./../atoms";
 import * as S from "./style";
 
 const OptionTable = (props: IOptionTableProps): JSX.Element => {
@@ -48,7 +57,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 		return columns.includes(optionValues[0]);
 	};
 
-	const theme = getDefaultTheme();
+	const { defaultTheme: theme } = useDefaultTheme();
 
 	const thumbnailProps =
 		state.showThumbnail &&