@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.71

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -0,0 +1,130 @@
+import { EnumValueConfig } from "../../../types";
+import { ArrayEnumPreview, EnumValuesChip } from "../../../preview";
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
+
+export function VirtualTableSelect(props: {
+    name: string;
+    enumValues: EnumValueConfig[];
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | number | string[] | number[] | undefined;
+    valueType: "string" | "number";
+    updateValue: (newValue: (string | number | string[] | number[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        name,
+        enumValues,
+        error,
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple,
+        valueType
+    } = props;
+
+    const validValue = (Array.isArray(internalValue) && multiple) ||
+        (!Array.isArray(internalValue) && !multiple);
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        if (valueType === "number") {
+            if (multiple) {
+                const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
+                updateValue(newValue);
+            } else {
+                updateValue(parseFloat(updatedValue as string));
+            }
+        } else if (valueType === "string") {
+            if (!updatedValue)
+                updateValue(null)
+            else
+                updateValue(updatedValue);
+        } else {
+            throw Error("Missing mapping in TableSelect");
+        }
+    }, [multiple, updateValue, valueType]);
+
+    const renderValue = (enumKey: string | number, index: number) => {
+        if (multiple && Array.isArray(enumKey)) {
+            return <ArrayEnumPreview
+                key={`${enumKey}-${index}`}
+                value={enumKey}
+                name={name}
+                enumValues={enumValues}
+                size={small ? "small" : "medium"}/>;
+        } else {
+            return <EnumValuesChip
+                key={`${enumKey}-${index}`}
+                enumKey={enumKey}
+                enumValues={enumValues}
+                size={small ? "small" : "medium"}/>;
+        }
+    };
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                containerClassName="w-full h-full"
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                includeFocusOutline={false}
+                value={validValue
+                    ? ((internalValue as any[]).map(v => v.toString()))
+                    : ([])}
+                onMultiValueChange={onChange}
+                renderValue={renderValue}>
+                {enumValues?.map((enumConfig) => (
+                    <MultiSelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"}/>
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+            : <Select
+                inputRef={ref}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                multiple={multiple}
+                padding={false}
+                includeFocusOutline={false}
+                value={validValue
+                    ? (multiple ? (internalValue as any[]).map(v => v.toString()) : internalValue?.toString())
+                    : (multiple ? [] : "")}
+                onValueChange={onChange}
+                onMultiValueChange={onChange}
+                renderValue={renderValue}>
+                {enumValues?.map((enumConfig) => (
+                    <SelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"}/>
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableSwitch.d.ts

@@ -0,0 +1,7 @@
+export declare function VirtualTableSwitch(props: {
+    error: Error | undefined;
+    internalValue?: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (boolean | null)) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/src/components/VirtualTable/fields/VirtualTableSwitch.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import { BooleanSwitch } from "@firecms/ui";
+
+export function VirtualTableSwitch(props: {
+    error: Error | undefined;
+    internalValue?: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (boolean | null)) => void;
+}) {
+    const {
+        internalValue,
+        updateValue,
+        focused
+    } = props;
+    const ref = React.useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    return (
+        <BooleanSwitch
+            ref={ref}
+            size={"small"}
+            value={Boolean(internalValue)}
+            onValueChange={updateValue}
+        />
+    );
+}

package/src/components/VirtualTable/index.d.ts

@@ -0,0 +1,2 @@
+export { VirtualTable } from "./VirtualTable";
+export * from "./VirtualTableProps";

package/src/components/VirtualTable/index.tsx

@@ -0,0 +1,2 @@
+export { VirtualTable } from "./VirtualTable";
+export * from "./VirtualTableProps";

package/src/components/VirtualTable/types.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableSize, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { FilterFormFieldProps } from "./VirtualTableHeader";
+export type VirtualTableRowProps<T> = {
+    style: any;
+    size: VirtualTableSize;
+    rowData: T;
+    rowIndex: number;
+    onRowClick?: (props: OnRowClickParams<any>) => void;
+    children: React.ReactNode[];
+    columns: VirtualTableColumn[];
+    hoverRow?: boolean;
+    rowClassName?: (rowData: T) => string | undefined;
+};
+export type VirtualTableContextProps<T extends any> = {
+    data?: T[];
+    size?: VirtualTableSize;
+    columns: VirtualTableColumn[];
+    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+    currentSort: "asc" | "desc" | undefined;
+    filter?: VirtualTableFilterValues<any>;
+    onRowClick?: (props: OnRowClickParams<any>) => void;
+    onColumnSort: (key: string) => any;
+    onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
+    onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    sortByProperty?: string;
+    customView?: React.ReactNode;
+    hoverRow: boolean;
+    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    rowClassName?: (rowData: T) => string | undefined;
+    endAdornment?: React.ReactNode;
+    AddColumnComponent?: React.ComponentType;
+};

package/src/components/VirtualTable/types.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+    CellRendererParams,
+    OnRowClickParams,
+    OnVirtualTableColumnResizeParams,
+    VirtualTableColumn,
+    VirtualTableFilterValues,
+    VirtualTableSize,
+    VirtualTableWhereFilterOp
+} from "./VirtualTableProps";
+import { FilterFormFieldProps } from "./VirtualTableHeader";
+
+export type VirtualTableRowProps<T> = {
+    style: any,
+    size: VirtualTableSize,
+    rowData: T;
+    rowIndex: number;
+    onRowClick?: (props: OnRowClickParams<any>) => void;
+    children: React.ReactNode[];
+    columns: VirtualTableColumn[];
+    hoverRow?: boolean;
+    rowClassName?: (rowData: T) => string | undefined;
+};
+
+export type VirtualTableContextProps<T extends any> = {
+    data?: T[];
+    size?: VirtualTableSize,
+    columns: VirtualTableColumn[];
+    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+    currentSort: "asc" | "desc" | undefined;
+    filter?: VirtualTableFilterValues<any>;
+    onRowClick?: (props: OnRowClickParams<any>) => void;
+    onColumnSort: (key: string) => any;
+    onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
+    onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    sortByProperty?: string;
+    customView?: React.ReactNode,
+    hoverRow: boolean;
+    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    rowClassName?: (rowData: T) => string | undefined;
+    endAdornment?: React.ReactNode;
+    AddColumnComponent?: React.ComponentType;
+};

package/src/components/index.d.ts

@@ -0,0 +1,20 @@
+export type { ErrorViewProps } from "./ErrorView";
+export { ErrorView } from "./ErrorView";
+export type { EntityPreviewProps } from "./EntityPreview";
+export { EntityPreview } from "./EntityPreview";
+export type { ReferenceSelectionInnerProps } from "./ReferenceSelectionInner";
+export { ReferenceSelectionInner } from "./ReferenceSelectionInner";
+export { CircularProgressCenter } from "./CircularProgressCenter";
+export * from "./HomePage";
+export * from "./EntityCollectionView/EntityCollectionView";
+export * from "./FieldConfigBadge";
+export * from "./EntityCollectionTable";
+export * from "./NotFoundPage";
+export * from "./VirtualTable";
+export * from "./ErrorBoundary";
+export * from "./DeleteConfirmationDialog";
+export * from "./FireCMSLogo";
+export * from "./FireCMSAppBar";
+export * from "./ArrayContainer";
+export * from "./ReferenceWidget";
+export * from "./LabelWithIcon";

package/src/components/index.tsx

@@ -0,0 +1,30 @@
+export type { ErrorViewProps } from "./ErrorView";
+export { ErrorView } from "./ErrorView";
+
+export type { EntityPreviewProps } from "./EntityPreview";
+export { EntityPreview } from "./EntityPreview";
+
+export type { ReferenceSelectionInnerProps } from "./ReferenceSelectionInner";
+export { ReferenceSelectionInner } from "./ReferenceSelectionInner";
+
+export { CircularProgressCenter } from "./CircularProgressCenter";
+
+export * from "./HomePage";
+export * from "./EntityCollectionView/EntityCollectionView";
+
+export * from "./FieldConfigBadge";
+
+export * from "./EntityCollectionTable";
+export * from "./NotFoundPage";
+
+export * from "./VirtualTable";
+export * from "./ErrorBoundary";
+export * from "./DeleteConfirmationDialog";
+
+export * from "./FireCMSLogo";
+
+export * from "./FireCMSAppBar";
+
+export * from "./ArrayContainer";
+export * from "./ReferenceWidget";
+export * from "./LabelWithIcon";

package/src/contexts/AuthControllerContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AuthController } from "../types";
+export declare const AuthControllerContext: React.Context<AuthController>;

package/src/contexts/AuthControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { AuthController } from "../types";
+
+export const AuthControllerContext = React.createContext<AuthController>({} as AuthController);

package/src/contexts/DataSourceContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DataSource } from "../types";
+export declare const DataSourceContext: React.Context<DataSource>;

package/src/contexts/DataSourceContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { DataSource } from "../types";
+
+export const DataSourceContext = React.createContext<DataSource>({} as DataSource);

package/src/contexts/DialogsProvider.d.ts

@@ -0,0 +1,4 @@
+import React, { PropsWithChildren } from "react";
+import { DialogsController } from "../types/dialogs_controller";
+export declare const DialogsControllerContext: React.Context<DialogsController>;
+export declare const DialogsProvider: React.FC<PropsWithChildren<{}>>;

package/src/contexts/DialogsProvider.tsx

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren, useCallback, useRef, useState } from "react";
+import { DialogControllerEntryProps, DialogsController } from "../types/dialogs_controller";
+
+export const DialogsControllerContext = React.createContext<DialogsController>({} as DialogsController);
+
+export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+
+    const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
+    const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
+
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+        dialogEntriesRef.current = newPanels;
+        setDialogEntries(newPanels);
+    };
+
+    const close = useCallback(() => {
+
+        if (dialogEntries.length === 0)
+            return;
+
+        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        updateDialogEntries(updatedPanels);
+
+    }, [dialogEntries]);
+
+    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+
+        const updatedPanels = [...dialogEntries, dialogEntry];
+        updateDialogEntries(updatedPanels);
+
+        return {
+            closeDialog: () => {
+                const updatedPanels = dialogEntriesRef.current.filter(e => e.key !== dialogEntry.key);
+                updateDialogEntries(updatedPanels);
+            }
+        }
+    }, [dialogEntries]);
+
+    return (
+        <DialogsControllerContext.Provider value={{
+            open,
+            close
+        }}>
+            {children}
+            {dialogEntries.map((entry, i) => <entry.Component
+                key={`dialog_${i}`}
+                open={true}
+                closeDialog={close}
+            />)}
+        </DialogsControllerContext.Provider>
+    );
+};

package/src/contexts/ModeController.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ModeController } from "../hooks";
+export declare const ModeControllerContext: React.Context<ModeController>;
+export declare const ModeControllerProvider: React.Provider<ModeController>;

package/src/contexts/ModeController.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ModeController } from "../hooks";
+
+const DEFAULT_MODE_STATE: ModeController = {
+    mode: "light",
+    setMode: (mode: "light" | "dark") => {
+    },
+    toggleMode: () => {
+    }
+};
+export const ModeControllerContext = React.createContext<ModeController>(DEFAULT_MODE_STATE);
+
+export const ModeControllerProvider = ModeControllerContext.Provider;

package/src/contexts/NavigationContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NavigationController } from "../types";
+export declare const NavigationContext: React.Context<NavigationController>;

package/src/contexts/NavigationContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { NavigationController } from "../types";
+
+export const NavigationContext = React.createContext<NavigationController>({} as NavigationController);

package/src/contexts/SideDialogsControllerContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SideDialogsController } from "../types";
+export declare const SideDialogsControllerContext: React.Context<SideDialogsController>;

package/src/contexts/SideDialogsControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { SideDialogsController } from "../types";
+
+export const SideDialogsControllerContext = React.createContext<SideDialogsController>({} as SideDialogsController);

package/src/contexts/SideEntityControllerContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SideEntityController } from "../types";
+export declare const SideEntityControllerContext: React.Context<SideEntityController>;

package/src/contexts/SideEntityControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { SideEntityController } from "../types";
+
+export const SideEntityControllerContext = React.createContext<SideEntityController>({} as SideEntityController);

package/src/contexts/SnackbarProvider.d.ts

@@ -0,0 +1,2 @@
+import React, { PropsWithChildren } from "react";
+export declare const SnackbarProvider: React.FC<PropsWithChildren<{}>>;

package/src/contexts/SnackbarProvider.tsx

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from "react";
+import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
+
+export const SnackbarProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+
+    return (
+        <NotistackSnackbarProvider maxSnack={3}
+                                   autoHideDuration={3500}>
+            {children}
+        </NotistackSnackbarProvider>
+    );
+};

package/src/contexts/StorageSourceContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { StorageSource } from "../types";
+export declare const StorageSourceContext: React.Context<StorageSource>;

package/src/contexts/StorageSourceContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { StorageSource } from "../types";
+
+export const StorageSourceContext = React.createContext<StorageSource>({} as StorageSource);

package/src/contexts/UserConfigurationPersistenceContext.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { UserConfigurationPersistence } from "../types";
+export declare const UserConfigurationPersistenceContext: React.Context<UserConfigurationPersistence | undefined>;

package/src/contexts/UserConfigurationPersistenceContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { UserConfigurationPersistence } from "../types";
+
+export const UserConfigurationPersistenceContext = React.createContext<UserConfigurationPersistence | undefined>(undefined);

package/src/contexts/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SnackbarProvider";
+export * from "./ModeController";
+export * from "./AuthControllerContext";

package/src/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from "./SnackbarProvider";
+export * from "./ModeController";
+export * from "./AuthControllerContext";

package/src/core/Drawer.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+/**
+ * Props used in case you need to override the default drawer
+ * @group Core
+ */
+export type DrawerProps<T = {}> = T & {
+    hovered: boolean;
+    drawerOpen: boolean;
+    closeDrawer: () => any;
+};
+/**
+ * Default drawer used in the CMS
+ * @group Core
+ */
+export declare function Drawer({ hovered, drawerOpen, closeDrawer }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DrawerNavigationItem({ name, icon, drawerOpen, tooltipsOpen, url, onClick }: {
+    icon: React.ReactElement;
+    name: string;
+    tooltipsOpen: boolean;
+    drawerOpen: boolean;
+    url: string;
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;