@griddo/ax 11.10.16 → 11.10.17-rc.0

package/src/hooks/bulk.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { areEquals } from "@ax/helpers";
-import { ICheck } from "@ax/types";
+import type { ICheck } from "@ax/types";
 
 const useBulkSelection = (itemIDs: any[]) => {
-	const selectedItemsInitialState: { all: any[]; notPublished: any[]; published: any[]; drafts: any[] } = {
+	const selectedItemsInitialState: IBulkSelectedItems = {
 		all: [],
 		notPublished: [],
 		published: [],
@@ -97,11 +97,13 @@ const useBulkSelection = (itemIDs: any[]) => {
 
 		let bulkSelection: any = [...selectedItems.all];
 
-		isChecked && isMultiCheck
-			? (bulkSelection = multiSelectTo(value))
-			: isChecked
-				? bulkSelection.push(value)
-				: (bulkSelection = bulkSelection.filter((id: any) => id !== value));
+		if (isChecked && isMultiCheck) {
+			bulkSelection = multiSelectTo(value);
+		} else if (isChecked) {
+			bulkSelection.push(value);
+		} else {
+			bulkSelection = bulkSelection.filter((id: any) => id !== value);
+		}
 
 		if (callback) {
 			const filteredItems = callback(bulkSelection);
@@ -139,4 +141,11 @@ const useBulkSelection = (itemIDs: any[]) => {
 	};
 };
 
+export interface IBulkSelectedItems {
+	all: any[];
+	notPublished: any[];
+	published: any[];
+	drafts: any[];
+}
+
 export { useBulkSelection };

package/src/hooks/index.tsx

@@ -1,13 +1,13 @@
-import { useBulkSelection } from "./bulk";
+import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
+import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
 import { useDebounce, useEqualStructured, useIsDirty, usePrevious, useShouldBeSaved } from "./forms";
-import { useHandleClickOutside, useModal, useToast } from "./modals";
-import { useURLSearchParam } from "./location";
-import { useCategoryColors, useEmptyState, useAdaptiveText } from "./content";
-import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
-import { usePermission, useGlobalPermission } from "./users";
-import { useResizable } from "./resize";
+import { useURLSearchParam } from "./location";
+import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
+import { useResizable } from "./resize";
+import { useGlobalPermission, usePermission } from "./users";
+import { useWindowSize } from "./window";
 
 export {
 	useModal,
@@ -30,4 +30,5 @@ export {
 	useOnMessageReceivedFromIframe,
 	useOnMessageReceivedFromOutside,
 	useNetworkStatus,
+	type IBulkSelectedItems,
 };

package/src/locales/en-US.ts

@@ -0,0 +1,47 @@
+/**
+ * English translations organized by domain/feature
+ */
+export const enUS = {
+	common: {
+		save: "Save",
+		cancel: "Cancel",
+		delete: "Delete",
+		edit: "Edit",
+		add: "Add",
+		close: "Close",
+		confirm: "Confirm",
+		loading: "Loading...",
+		saving: "Saving",
+		search: "Search",
+		noResults: "No results found",
+		copyUrl: "Copy URL",
+	},
+	fields: {
+		tags: {
+			helptext: "Type a tag and press enter to create it",
+		},
+		image: {
+			title: "Title",
+			alt: "Alternative text",
+			addImage: "Add image",
+			saveAndAdd: "Save & Add",
+		},
+	},
+	gallery: {
+		uploaded: "Uploaded",
+		type: "Type",
+		size: "Size",
+		resolution: "Resolution",
+	},
+	validation: {
+		required: "This field is required",
+		invalidEmail: "Please enter a valid email",
+		minLength: "Minimum {min} characters required",
+		maxLength: "Maximum {max} characters allowed",
+	},
+	errors: {
+		generic: "Something went wrong. Please try again.",
+		network: "Network error. Please check your connection.",
+		unauthorized: "You are not authorized to perform this action.",
+	},
+} as const;

package/src/locales/es-ES.ts

@@ -0,0 +1,47 @@
+/**
+ * Spanish translations organized by domain/feature
+ */
+export const esES = {
+	common: {
+		save: "Guardar",
+		cancel: "Cancelar",
+		delete: "Eliminar",
+		edit: "Editar",
+		add: "Añadir",
+		close: "Cerrar",
+		confirm: "Confirmar",
+		loading: "Cargando...",
+		saving: "Guardando",
+		search: "Buscar",
+		noResults: "No se encontraron resultados",
+		copyUrl: "Copiar URL",
+	},
+	fields: {
+		tags: {
+			helptext: "Escribe una etiqueta y pulsa enter para crearla",
+		},
+		image: {
+			title: "Título",
+			alt: "Texto alternativo",
+			addImage: "Añadir imagen",
+			saveAndAdd: "Guardar & Añadir",
+		},
+	},
+	gallery: {
+		uploaded: "Cargado",
+		type: "Tipo",
+		size: "Tamaño",
+		resolution: "Resolución",
+	},
+	validation: {
+		required: "Este campo es requerido",
+		invalidEmail: "Por favor, escriba un email válido",
+		minLength: "Mínimo {min} caracteres requeridos",
+		maxLength: "Máximo {max} caracteres permitidos",
+	},
+	errors: {
+		generic: "Algo salió mal. Por favor, intente nuevamente.",
+		network: "Error de red. Por favor, verifique su conexión.",
+		unauthorized: "No está autorizado para realizar esta acción.",
+	},
+} as const;

package/src/locales/index.ts

@@ -0,0 +1,11 @@
+import { enUS } from "./en-US";
+import { esES } from "./es-ES";
+
+const currentLocale = localStorage.getItem("locale") || "en-US";
+
+const allLocales = {
+	"en-US": enUS,
+	"es-ES": esES,
+} as const;
+
+export const LOCALE = allLocales[currentLocale as keyof typeof allLocales];

package/src/modules/Categories/CategoriesList/BulkHeader/TableHeader/index.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import { CheckField, TableCounter, Tooltip, TranslationsFilter } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 

package/src/modules/Categories/CategoriesList/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,14 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.xs} ${p.theme.spacing.m}`};
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  align-items: center;
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/Categories/CategoriesList/BulkHeader/index.tsx

@@ -1,6 +1,7 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IQueryValue } from "@ax/types";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -15,6 +16,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		filterItems,
 		filterValues,
 		setHoverCheck,
+		selectedItems,
 	} = props;
 
 	return showBulk ? (
@@ -23,6 +25,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			actions={bulkActions}
 			selectItems={selectItems}
 			totalItems={totalItems}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -48,6 +51,7 @@ interface IProps {
 	filterValues: Record<string, IQueryValue[]>;
 	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Categories/CategoriesList/index.tsx

@@ -1,16 +1,34 @@
-import React, { useEffect, useCallback, useState, useRef, useLayoutEffect, useMemo } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { connect } from "react-redux";
+
+import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, TableList, Toast } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { sortBy } from "@ax/helpers";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import type {
+	ICategoryGroup,
+	IDataPack,
+	IGetStructuredDataParams,
+	ILanguage,
+	IOrderCategoryParams,
+	IQueryValue,
+	IRootState,
+	IStructuredData,
+	IStructuredDataCategory,
+} from "@ax/types";
+
 import {
 	closestCenter,
 	DndContext,
-	DragEndEvent,
-	DragMoveEvent,
-	DragOverEvent,
-	DragStartEvent,
+	type DragEndEvent,
+	type DragMoveEvent,
+	type DragOverEvent,
+	type DragStartEvent,
 	KeyboardSensor,
 	MeasuringStrategy,
 	PointerSensor,
-	UniqueIdentifier,
+	type UniqueIdentifier,
 	useSensor,
 	useSensors,
 } from "@dnd-kit/core";
@@ -21,33 +39,15 @@ import {
 	verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { appActions } from "@ax/containers/App";
-import {
-	IRootState,
-	IStructuredData,
-	IGetStructuredDataParams,
-	IDataPack,
-	IStructuredDataCategory,
-	ICategoryGroup,
-	IOrderCategoryParams,
-	IQueryValue,
-	ILanguage,
-} from "@ax/types";
-import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
-import { MainWrapper, TableList, ErrorToast, Toast, EmptyState, SearchTagsBar, FilterTagsBar } from "@ax/components";
-import { sortBy } from "@ax/helpers";
-
 import { DeleteGroupModal, DeleteModal } from "./atoms";
-import { filterCategoriesAndGroups, getAllLangCategoriesIds } from "./utils";
+import BulkHeader from "./BulkHeader";
 import CategoryItem from "./CategoryItem";
-import CategoryPanel from "./CategoryPanel";
 import CategoryNav from "./CategoryNav";
-import BulkHeader from "./BulkHeader";
+import CategoryPanel from "./CategoryPanel";
+import { buildTree, type FlattenedItem, flattenTree, getProjection, removeChildrenOf, setProperty } from "./helpers";
 import { useFilterQuery } from "./hooks";
-import { buildTree, FlattenedItem, flattenTree, getProjection, removeChildrenOf, setProperty } from "./helpers";
-
 import * as S from "./style";
+import { filterCategoriesAndGroups, getAllLangCategoriesIds } from "./utils";
 
 const CategoriesList = (props: IProps): JSX.Element => {
 	const {
@@ -256,6 +256,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			filterValues={filterValues}
 			filterItems={filterItems}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 

package/src/modules/Categories/CategoriesList/utils.tsx

@@ -1,8 +1,9 @@
-import { ICategoryGroup, IDataLanguage, IStructuredDataCategory } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { ICategoryGroup, IDataLanguage, IStructuredDataCategory } from "@ax/types";
 
 const getAllLangCategoriesIds = (
 	currentCategories: (IStructuredDataCategory | ICategoryGroup)[],
-	selectedItems: Record<string, number[]>,
+	selectedItems: IBulkSelectedItems,
 ): number[] => {
 	let langsCategoryIds: number[] = [];
 

package/src/modules/Content/BulkHeader/TableHeader/style.tsx

@@ -1,13 +1,14 @@
-import styled from "styled-components";
-
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/Content/BulkHeader/index.tsx

@@ -1,7 +1,8 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IColumn, IQueryValue } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
+import type { IColumn, IQueryValue } from "@ax/types";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -29,6 +30,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		maxColumns,
 		exportAction,
 		setHoverCheck,
+		selectedItems,
 	} = props;
 
 	const isAllowedToDeletePage = usePermission("content.deletePages");
@@ -65,6 +67,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			exportAction={exportAction}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -112,6 +115,7 @@ interface IProps {
 	siteID: number;
 	exportAction?(formats: (number | string)[]): void;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Content/index.tsx

@@ -1,79 +1,78 @@
-import React, { useEffect, useCallback, useState, useRef, useLayoutEffect } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
+
 import { config } from "components";
 
 const schemas = config.schemas.ui;
 
-import { useModal, useBulkSelection, useToast, useCategoryColors, usePermission, useWindowSize } from "@ax/hooks";
-import {
-	IRootState,
-	IPage,
-	ISavePageParams,
-	IStructuredDataContent,
-	IDataPack,
-	IEmptyStateProps,
-	ICheck,
-	IGetSitePagesParams,
-	ISite,
-	IUser,
-	IErrorItem,
-	IGetSitesParams,
-	ISiteRoles,
-	IPageLanguage,
-	IQueryValue,
-	IStructuredData,
-	ISchemaField,
-	IExportDataParams,
-	ILanguage,
-} from "@ax/types";
 import {
+	EmptyState,
+	ErrorToast,
+	FilterTagsBar,
 	MainWrapper,
 	Modal,
-	TableList,
-	ErrorToast,
-	Toast,
-	EmptyState,
 	Notification,
 	SearchTagsBar,
-	FilterTagsBar,
+	TableList,
+	Toast,
 } from "@ax/components";
-import { getMaxColumns, isGlobalStructuredData, isStructuredDataFromPage, updateColumns } from "@ax/helpers";
-
 import { appActions } from "@ax/containers/App";
-import { sitesActions } from "@ax/containers/Sites";
-import { pageEditorActions } from "@ax/containers/PageEditor";
-import { structuredDataActions } from "@ax/containers/StructuredData";
+import { IError } from "@ax/containers/App/reducer";
+import { integrationsActions } from "@ax/containers/Integrations";
 import { navigationActions } from "@ax/containers/Navigation/Defaults";
+import { pageEditorActions } from "@ax/containers/PageEditor";
 import { INITIAL_TEMPLATE } from "@ax/containers/PageEditor/constants";
-import { dataPacksActions } from "@ax/containers/Settings";
 import {
 	ISetCurrentPageIDAction,
-	ISetCurrentPageStatusAction,
 	ISetCurrentPageNameAction,
+	ISetCurrentPageStatusAction,
 	pageStatus,
 } from "@ax/containers/PageEditor/interfaces";
-import { integrationsActions } from "@ax/containers/Integrations";
-import { IError } from "@ax/containers/App/reducer";
-
+import { dataPacksActions } from "@ax/containers/Settings";
+import { sitesActions } from "@ax/containers/Sites";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { getMaxColumns, isGlobalStructuredData, isStructuredDataFromPage, updateColumns } from "@ax/helpers";
+import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast, useWindowSize } from "@ax/hooks";
 import {
-	getOptionValues,
-	getOptionFilters,
-	getCurrentFilter,
-	filterByStatus,
-	getSortedListStatus,
-	getColumns,
-} from "./utils";
-import { useSortedListStatus, useFilterQuery } from "./hooks";
-import OptionTable from "./OptionTable";
-import ContentFilters from "./ContentFilters";
-import PageItem from "./PageItem";
+	ICheck,
+	IDataPack,
+	IEmptyStateProps,
+	IErrorItem,
+	IExportDataParams,
+	IGetSitePagesParams,
+	IGetSitesParams,
+	ILanguage,
+	IPage,
+	IPageLanguage,
+	IQueryValue,
+	IRootState,
+	ISavePageParams,
+	ISchemaField,
+	ISite,
+	ISiteRoles,
+	IStructuredData,
+	IStructuredDataContent,
+	IUser,
+} from "@ax/types";
+
 import StructuredDataItem from "./../StructuredData/StructuredDataList/StructuredDataItem";
+import { DeleteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
+import ContentFilters from "./ContentFilters";
+import { useFilterQuery, useSortedListStatus } from "./hooks";
+import OptionTable from "./OptionTable";
 import PageImporter from "./PageImporter";
-import { DeleteModal } from "./atoms";
-
+import PageItem from "./PageItem";
 import * as S from "./style";
+import {
+	filterByStatus,
+	getColumns,
+	getCurrentFilter,
+	getOptionFilters,
+	getOptionValues,
+	getSortedListStatus,
+} from "./utils";
 
 // TODO: Make this monster manageable
 const Content = (props: IProps): JSX.Element => {
@@ -594,6 +593,7 @@ const Content = (props: IProps): JSX.Element => {
 			maxColumns={maxColumns}
 			exportAction={exportContent}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 

package/src/modules/FileDrive/BulkGridHeader/GridHeader/style.tsx

@@ -6,6 +6,8 @@ const Header = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-left: ${(p) => p.theme.spacing.m};
+  min-height: 40px;
+  padding-inline: 8px;
 `;
 
 const CheckWrapper = styled.div`

package/src/modules/FileDrive/BulkGridHeader/index.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import { IBulkAction } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IBulkAction } from "@ax/types";
 
 import GridHeader from "./GridHeader";
 
 import * as S from "./style";
 
 const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions } = props;
+	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, selectedItems } = props;
 
 	return showBulk ? (
 		<S.BulkWrapper>
@@ -16,6 +16,7 @@ const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
 				actions={bulkActions}
 				selectItems={selectItems}
 				totalItems={totalItems}
+				selectedItems={selectedItems}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -30,6 +31,7 @@ export interface IBulkHeaderProps {
 	selectAllItems: () => void;
 	totalItems: number;
 	bulkActions: IBulkAction[];
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkGridHeader;

package/src/modules/FileDrive/BulkGridHeader/style.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
 import { BulkSelectionOptions } from "@ax/components";
 
+import styled from "styled-components";
+
 const BulkWrapper = styled.div`
   width: 100%;
   span {
@@ -10,8 +10,10 @@ const BulkWrapper = styled.div`
 `;
 
 const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
-  padding: ${(p) => `0 0 0 ${p.theme.spacing.xs}`};
-  height: ${(p) => p.theme.spacing.s};
+  padding:0;
+  margin-left: 16px;
+  padding-right: 24px;
+  min-height: 40px;
 `;
 
 export { BulkWrapper, StyledBulkSelectionOptions };

package/src/modules/FileDrive/BulkListHeader/TableHeader/style.tsx

@@ -1,13 +1,15 @@
-import styled from "styled-components";
-
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding-bottom: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
+  padding-right: ${(p) => p.theme.spacing.s};
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/FileDrive/BulkListHeader/index.tsx

@@ -1,13 +1,22 @@
-import React from "react";
-import { IBulkAction } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IBulkAction } from "@ax/types";
 
 import TableHeader from "./TableHeader";
 
 import * as S from "./style";
 
 const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
-	const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions, isSearching, setHoverCheck } =
-		props;
+	const {
+		showBulk,
+		checkState,
+		selectItems,
+		selectAllItems,
+		totalItems,
+		bulkActions,
+		isSearching,
+		setHoverCheck,
+		selectedItems,
+	} = props;
 
 	return showBulk ? (
 		<S.BulkWrapper>
@@ -17,6 +26,7 @@ const BulkListHeader = (props: IBulkHeaderProps): JSX.Element => {
 				actions={bulkActions}
 				selectItems={selectItems}
 				totalItems={totalItems}
+				selectedItems={selectedItems}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -40,6 +50,7 @@ export interface IBulkHeaderProps {
 	bulkActions: IBulkAction[];
 	isSearching: boolean;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkListHeader;