@firecms/core 3.0.0 → 3.1.0-canary.02232f4

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface RenameGroupDialogProps {
     open: boolean;
@@ -18,7 +19,8 @@ export function RenameGroupDialog({
                                   }: RenameGroupDialogProps) {
     const [name, setName] = useState(initialName);
     const [error, setError] = useState<string | null>(null);
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (open) {
@@ -38,9 +40,9 @@ export function RenameGroupDialog({
         const newName = event.target.value;
         setName(newName);
         if (!newName.trim()) {
-            setError("Group name cannot be empty.");
+            setError(t("group_name_empty_error"));
         } else if (existingGroupNames.includes(newName.trim())) {
-            setError("This group name already exists.");
+            setError(t("group_name_exists_error"));
         } else {
             setError(null);
         }
@@ -49,11 +51,11 @@ export function RenameGroupDialog({
     const handleSave = () => {
         const trimmedName = name.trim();
         if (!trimmedName) {
-            setError("Group name cannot be empty.");
+            setError(t("group_name_empty_error"));
             return;
         }
         if (existingGroupNames.includes(trimmedName)) {
-            setError("This group name already exists.");
+            setError(t("group_name_exists_error"));
             return;
         }
         if (!error) {
@@ -70,9 +72,9 @@ export function RenameGroupDialog({
             // because the error state might not have updated if the user types and immediately hits enter.
             let currentError = null;
             if (!trimmedName) {
-                currentError = "Group name cannot be empty.";
+                currentError = t("group_name_empty_error");
             } else if (existingGroupNames.includes(trimmedName)) {
-                currentError = "This group name already exists.";
+                currentError = t("group_name_exists_error");
             }
 
             if (!currentError && trimmedName) {
@@ -93,14 +95,14 @@ export function RenameGroupDialog({
 
     return (
         <Dialog open={open}>
-            <DialogTitle>Rename Group</DialogTitle>
+            <DialogTitle>{t("rename_group")}</DialogTitle>
             <DialogContent>
                 <TextField
-                    inputRef={inputRef} // Pass the ref to the TextField
-                    label="Group Name"
+                    inputRef={inputRef}
+                    label={t("group_name_label")}
                     value={name}
                     onChange={handleNameChange}
-                    onKeyDown={handleKeyDown} // Added onKeyDown handler
+                    onKeyDown={handleKeyDown}
                     error={!!error}
                     aria-describedby={error ? "group-name-error" : undefined}
                 />
@@ -108,14 +110,12 @@ export function RenameGroupDialog({
             </DialogContent>
             <DialogActions>
                 <Button onClick={onClose}
-                        color={"primary"}
                         variant="text">
-                    Cancel
+                    {t("cancel")}
                 </Button>
                 <Button onClick={handleSave}
-                        color={"primary"}
                         disabled={!!error || !name.trim()}>
-                    Save
+                    {t("save")}
                 </Button>
             </DialogActions>
         </Dialog>

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -9,10 +9,10 @@ export type SmallNavigationCardProps = {
 };
 
 export function SmallNavigationCard({
-                                 name,
-                                 url,
-                                 icon,
-                             }: SmallNavigationCardProps) {
+    name,
+    url,
+    icon,
+}: SmallNavigationCardProps) {
 
     return (
         <>
@@ -28,17 +28,18 @@ export function SmallNavigationCard({
                 <div className="flex flex-row items-center flex-grow gap-2 ">
                     {icon}
 
-                    <Typography gutterBottom variant="h5"
-                                component="h2"
-                                className="mb-0 ml-4">
+                    <Typography gutterBottom variant="subtitle1"
+                        component="h2"
+                        className="mb-0 ml-3 font-medium">
                         {name}
                     </Typography>
                 </div>
 
-                <div className={"p-4"}>
-                    <ArrowForwardIcon color="primary"/>
+                <div className={"p-2"}>
+                    <ArrowForwardIcon color="primary" size={"small"} />
                 </div>
             </Link>
 
         </>);
 }
+

package/src/components/LanguageToggle.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { CheckIcon, IconButton, Menu, MenuItem, TranslateIcon, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks";
+
+export function LanguageToggle() {
+    const { i18n } = useTranslation();
+
+    return (
+        <Menu
+            trigger={<IconButton
+                color="inherit"
+                aria-label="Change language">
+                <TranslateIcon size="small" />
+            </IconButton>}>
+            <MenuItem onClick={() => i18n.changeLanguage("en")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "en" ? "font-bold" : ""}>English</Typography>
+                    {i18n.language === "en" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("es")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "es" ? "font-bold" : ""}>Español</Typography>
+                    {i18n.language === "es" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("de")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "de" ? "font-bold" : ""}>Deutsch</Typography>
+                    {i18n.language === "de" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("fr")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "fr" ? "font-bold" : ""}>Français</Typography>
+                    {i18n.language === "fr" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("it")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "it" ? "font-bold" : ""}>Italiano</Typography>
+                    {i18n.language === "it" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("hi")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "hi" ? "font-bold" : ""}>हिन्दी</Typography>
+                    {i18n.language === "hi" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+            <MenuItem onClick={() => i18n.changeLanguage("pt")}>
+                <div className="flex w-full items-center justify-between gap-4">
+                    {/* eslint-disable-next-line i18next/no-literal-string */}
+                    <Typography variant="body2" className={i18n.language === "pt" ? "font-bold" : ""}>Português</Typography>
+                    {i18n.language === "pt" && <CheckIcon size="small" />}
+                </div>
+            </MenuItem>
+        </Menu>
+    );
+}

package/src/components/NotFoundPage.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
+import { useTranslation } from "../hooks/useTranslation";
 
 export function NotFoundPage() {
+    const { t } = useTranslation();
 
     return (
         <div className="flex w-full h-full">
@@ -10,15 +12,15 @@ export function NotFoundPage() {
             >
                 <Typography variant={"h4"} align={"center"}
                             gutterBottom={true}>
-                    Page not found
+                    {t("page_not_found")}
                 </Typography>
                 <Typography align={"center"} gutterBottom={true}>
-                    This page does not exist or you may not have access to it
+                    {t("page_not_found_body")}
                 </Typography>
                 <Button
                     variant={"text"}
                     component={Link}
-                    to={"/"}>Back to home</Button>
+                    to={"/"}>{t("back_to_home")}</Button>
             </div>
         </div>
     );

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -12,7 +12,8 @@ import {
     useDataSource,
     useLargeLayout,
     useNavigationController,
-    useSideEntityController
+    useSideEntityController,
+    useTranslation
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
@@ -101,6 +102,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         maxSelection,
     }: ReferenceSelectionInnerProps<M>) {
 
+    const { t } = useTranslation();
     const authController = useAuthController();
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
@@ -302,8 +304,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                                 collectionOrView={collection}
                                 className={"text-surface-300 dark:text-surface-600"}/>
                             {collection.singularName
-                                ? `Select ${collection.singularName}`
-                                : `Select from ${collection.name}`}
+                                ? t("select_specific", { name: collection.singularName })
+                                : t("select_from", { name: collection.name })}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}
@@ -326,9 +328,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                     </Typography>}
                 <Button
                     onClick={onDone}
-                    color="primary"
                     variant="filled">
-                    Done
+                    {t("done")}
                 </Button>
             </DialogActions>
         </div>
@@ -348,7 +349,7 @@ function ReferenceDialogActions({
     onClear: () => void,
     onNewClick: () => void
 }) {
-
+    const { t } = useTranslation();
     const authController = useAuthController();
 
     const largeLayout = useLargeLayout();
@@ -363,25 +364,19 @@ function ReferenceDialogActions({
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}
-                startIcon={<AddIcon/>}
-                variant="outlined"
-                color="primary">
-                Add {collection.singularName ?? collection.name}
+                startIcon={<AddIcon/>}>
+                {t("add_specific", { name: collection.singularName ?? collection.name })}
             </Button>
             : <Button
-                onClick={onClick}
-                variant="outlined"
-                color="primary"
-            >
+                onClick={onClick}>
                 <AddIcon/>
             </Button>);
 
     return (
         <>
             <Button onClick={onClear}
-                    variant={"text"}
-                    color="primary">
-                Clear
+                    variant={"text"}>
+                {t("clear")}
             </Button>
             {addButton}
         </>

package/src/components/ReferenceWidget.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FilterValues } from "../types";
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
-import { useNavigationController, useReferenceDialog } from "../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../hooks";
 import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
@@ -50,6 +50,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
+    const { t } = useTranslation();
     const navigationController = useNavigationController();
 
     const collection: EntityCollection | undefined = useMemo(() => {
@@ -136,18 +137,16 @@ export function ReferenceWidget<M extends Record<string, any>>({
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
-        "text-opacity-50 dark:text-white dark:text-opacity-50",
+        "text-opacity-50 text-text-primary/50 dark:text-white dark:text-opacity-50 dark:text-white/50",
         className
     )}
     >
 
         {child}
         {!value && <div className="justify-center text-left">
-            <Button variant="outlined"
-                    color="primary"
-                    disabled={disabled}
+            <Button disabled={disabled}
                     onClick={onEntryClick}>
-                Edit {name}
+                {t("edit_name", { name: name ?? "" })}
             </Button>
         </div>}
 

package/src/components/SearchIconsView.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
 import { iconSynonyms, iconsSearch } from "../util";
+import { useTranslation } from "../hooks/useTranslation";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
@@ -22,6 +23,7 @@ export function SearchIconsView({
                                 selectedIcon = "",
                                 onIconSelected
                             }: SearchIconsProps) {
+    const { t } = useTranslation();
     const [keys, setKeys] = React.useState<string[] | null>(null);
     const [query, setQuery] = React.useState<string>("");
 
@@ -53,7 +55,7 @@ export function SearchIconsView({
                 autoFocus={false}
                 innerClassName={"w-full sticky top-0 z-10"}
                 onTextSearch={(value?: string) => setQuery(value ?? "")}
-                placeholder="Search for more icons…"
+                placeholder={t("search_for_more_icons")}
             />
 
             <div className={"flex max-w-full flex-wrap mt-4"}>

package/src/components/SelectableTable/SelectableTable.tsx

@@ -93,6 +93,11 @@ export type SelectableTableProps<M extends Record<string, any>> = {
     endAdornment?: React.ReactNode;
 
     AddColumnComponent?: React.ComponentType;
+
+    /**
+     * Callback when columns are reordered via drag-and-drop
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
 }
 
 /**
@@ -120,41 +125,42 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  * @group Components
  */
 export const SelectableTable = function SelectableTable<M extends Record<string, any>>
-({
-     onValueChange,
-     cellRenderer,
-     onEntityClick,
-     onColumnResize,
-     hoverRow = true,
-     size = "m",
-     inlineEditing = false,
-     tableController:
-         {
-             data,
-             dataLoading,
-             noMoreToLoad,
-             dataLoadingError,
-             filterValues,
-             setFilterValues,
-             sortBy,
-             setSortBy,
-             itemCount,
-             setItemCount,
-             pageSize = 50,
-             paginationEnabled,
-             checkFilterCombination,
-             setPopupCell
-         },
-     filterable = true,
-     onScroll,
-     initialScroll,
-     emptyComponent,
-     columns,
-     forceFilter,
-     highlightedRow,
-     endAdornment,
-     AddColumnComponent
- }: SelectableTableProps<M>) {
+    ({
+        onValueChange,
+        cellRenderer,
+        onEntityClick,
+        onColumnResize,
+        hoverRow = true,
+        size = "m",
+        inlineEditing = false,
+        tableController:
+        {
+            data,
+            dataLoading,
+            noMoreToLoad,
+            dataLoadingError,
+            filterValues,
+            setFilterValues,
+            sortBy,
+            setSortBy,
+            itemCount,
+            setItemCount,
+            pageSize = 50,
+            paginationEnabled,
+            checkFilterCombination,
+            setPopupCell
+        },
+        filterable = true,
+        onScroll,
+        initialScroll,
+        emptyComponent,
+        columns,
+        forceFilter,
+        highlightedRow,
+        endAdornment,
+        AddColumnComponent,
+     onColumnsOrderChange
+    }: SelectableTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
@@ -224,7 +230,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         <SelectableTableContext.Provider
             value={contextValue}>
             <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
-                 ref={ref}>
+                ref={ref}>
 
                 <VirtualTable
                     data={data}
@@ -247,12 +253,13 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 bg-surface-100/75 dark:bg-surface-800 dark:bg-opacity-75 dark:bg-surface-800/75" : "";
                     }, [highlightedRow])}
                     className="flex-grow"
                     emptyComponent={emptyComponent}
                     endAdornment={endAdornment}
                     AddColumnComponent={AddColumnComponent}
+                    onColumnsOrderChange={onColumnsOrderChange}
                 />
 
             </div>
@@ -262,13 +269,13 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
 };
 
 function createFilterField({
-                               id,
-                               filterValue,
-                               setFilterValue,
-                               column,
-                               hidden,
-                               setHidden
-                           }: FilterFormFieldProps<{
+    id,
+    filterValue,
+    setFilterValue,
+    column,
+    hidden,
+    setHidden
+}: FilterFormFieldProps<{
     resolvedProperty: ResolvedProperty,
     disabled: boolean,
 }>): React.ReactNode {
@@ -286,40 +293,41 @@ function createFilterField({
     }
     if (baseProperty.dataType === "reference") {
         return <ReferenceFilterField value={filterValue}
-                                     setValue={setFilterValue}
-                                     name={id as string}
-                                     isArray={isArray}
-                                     path={baseProperty.path}
-                                     title={resolvedProperty?.name}
-                                     includeId={baseProperty.includeId}
-                                     previewProperties={baseProperty?.previewProperties}
-                                     hidden={hidden}
-                                     setHidden={setHidden}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            isArray={isArray}
+            path={baseProperty.path}
+            title={resolvedProperty?.name}
+            includeId={baseProperty.includeId}
+            previewProperties={baseProperty?.previewProperties}
+            hidden={hidden}
+            setHidden={setHidden} />;
     } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
         const name = baseProperty.name;
         const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;
         return <StringNumberFilterField value={filterValue}
-                                        setValue={setFilterValue}
-                                        name={id as string}
-                                        dataType={baseProperty.dataType}
-                                        isArray={isArray}
-                                        enumValues={enumValues}
-                                        title={name}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            dataType={baseProperty.dataType}
+            isArray={isArray}
+            enumValues={enumValues}
+            title={name} />;
     } else if (baseProperty.dataType === "boolean") {
         const name = baseProperty.name;
         return <BooleanFilterField value={filterValue}
-                                   setValue={setFilterValue}
-                                   name={id as string}
-                                   title={name}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            title={name} />;
 
     } else if (baseProperty.dataType === "date") {
         const title = baseProperty.name;
         return <DateTimeFilterField value={filterValue}
-                                    setValue={setFilterValue}
-                                    name={id as string}
-                                    mode={baseProperty.mode}
-                                    isArray={isArray}
-                                    title={title}/>;
+            setValue={setFilterValue}
+            name={id as string}
+            mode={baseProperty.mode}
+            isArray={isArray}
+            timezone={baseProperty.timezone}
+            title={title} />;
     }
 
     return (

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -10,11 +10,11 @@ interface BooleanFieldProps {
 }
 
 export function BooleanFilterField({
-                                       name,
-                                       title,
-                                       value,
-                                       setValue
-                                   }: BooleanFieldProps) {
+    name,
+    title,
+    value,
+    setValue
+}: BooleanFieldProps) {
 
     function updateFilter(val?: boolean) {
         if (val !== undefined) {
@@ -32,8 +32,9 @@ export function BooleanFilterField({
     const valueSet = !!value;
 
     return (
-        <div className="w-[300px]">
+        <div className="w-full">
             <BooleanSwitchWithLabel
+                size={"medium"}
                 value={valueSetToTrue}
                 allowIndeterminate={true}
                 onValueChange={(v: boolean | null) => updateFilter(v === null ? undefined : v)}