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

package/src/components/HomePage/NavigationCollectionCard.tsx

@@ -0,0 +1,145 @@
+import { useNavigate } from "react-router-dom";
+
+import { useFireCMSContext } from "../../hooks";
+import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
+import { getIconForView } from "../../util";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { ArrowForwardIcon, Card, cn, IconButton, Markdown, StarBorderIcon, StarIcon, Typography } from "@firecms/ui";
+
+/**
+ * This is the component used in the home page to render a card for each
+ * collection.
+ * @group Components
+ * @param view
+ * @param path
+ * @param collection
+ * @param url
+ * @param name
+ * @param description
+ * @param onClick
+ * @constructor
+ */
+export function NavigationCollectionCard({
+                                             view,
+                                             path,
+                                             collection,
+                                             url,
+                                             name,
+                                             description,
+                                             onClick
+                                         }: TopNavigationEntry & {
+    onClick?: () => void
+}) {
+
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    const collectionIcon = getIconForView(collection ?? view);
+
+    const navigate = useNavigate();
+    const context = useFireCMSContext();
+
+    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
+
+    let actions: React.ReactNode | undefined;
+    if (context.plugins && collection) {
+        const actionProps: PluginHomePageActionsProps = {
+            path,
+            collection,
+            context
+        };
+        actions = <>
+            {context.plugins.map((plugin, i) => (
+                plugin.homePage?.CollectionActions
+                    ? <plugin.homePage.CollectionActions
+                        key={`actions_${i}`}
+                        {...actionProps}
+                        extraProps={plugin.homePage.extraProps}
+                    />
+                    : null
+            ))}
+        </>
+        ;
+    }
+
+    return (
+        <Card
+            className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+            onClick={() => {
+                onClick?.();
+                navigate(url);
+                if (userConfigurationPersistence) {
+                    userConfigurationPersistence.setRecentlyVisitedPaths(
+                        [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
+                    );
+                }
+            }}>
+
+            <div className="flex flex-col items-start h-full">
+                <div
+                    className="flex-grow w-full">
+
+                    <div
+                        className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+
+                        {collectionIcon}
+
+                        <div
+                            className="flex items-center gap-1"
+                            onClick={(event: React.MouseEvent) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }}>
+
+                            {actions}
+
+                            {userConfigurationPersistence &&
+                                <IconButton
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        if (favourite) {
+                                            userConfigurationPersistence.setFavouritePaths(
+                                                userConfigurationPersistence.favouritePaths.filter(p => p !== path)
+                                            );
+                                        } else {
+                                            userConfigurationPersistence.setFavouritePaths(
+                                                [...userConfigurationPersistence.favouritePaths, path]
+                                            );
+                                        }
+                                    }}>
+                                    {
+                                        favourite
+                                            ? <StarIcon
+                                                size={18}
+                                                className={"text-secondary"}/>
+                                            : <StarBorderIcon
+                                                size={18}
+                                                className={"text-gray-400 dark:text-gray-500"}/>}
+                                </IconButton>}
+
+                        </div>
+
+                    </div>
+
+                    <Typography gutterBottom variant="h5"
+                                component="h2">
+                        {name}
+                    </Typography>
+
+                    {description && <Typography variant="body2"
+                                                color="secondary"
+                                                component="div">
+                        <Markdown source={description}/>
+                    </Typography>}
+                </div>
+
+                <div style={{ alignSelf: "flex-end" }}>
+
+                    <div className={"p-4"}>
+                        <ArrowForwardIcon className="text-primary"/>
+                    </div>
+                </div>
+
+            </div>
+
+        </Card>);
+}

package/src/components/HomePage/NavigationGroup.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+export declare function NavigationGroup({ children, group }: PropsWithChildren<{
+    group: string | undefined;
+}>): import("react/jsx-runtime").JSX.Element;

package/src/components/HomePage/NavigationGroup.tsx

@@ -0,0 +1,39 @@
+import { PropsWithChildren } from "react";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { ExpandablePanel, Typography } from "@firecms/ui";
+
+export function NavigationGroup({
+                                    children,
+                                    group
+                                }: PropsWithChildren<{
+    group: string | undefined
+}>) {
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    return (
+        <ExpandablePanel
+            invisible={true}
+            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
+            className={"py-4"}
+            initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
+            onExpandedChange={expanded => {
+                if (userConfigurationPersistence) {
+
+                    if (!expanded) {
+                        const paths = (userConfigurationPersistence.collapsedGroups ?? []).concat(group ?? "ungrouped");
+                        userConfigurationPersistence.setCollapsedGroups(paths);
+                    } else {
+                        userConfigurationPersistence.setCollapsedGroups((userConfigurationPersistence.collapsedGroups ?? []).filter(g => g !== (group ?? "ungrouped")));
+                    }
+                }
+            }}
+            title={<Typography color={"secondary"}
+                               className="font-medium ml-1">
+                {group?.toUpperCase() ?? "Views".toUpperCase()}
+            </Typography>}>
+
+            <div className="mb-8">
+                {children}
+            </div>
+        </ExpandablePanel>
+    );
+}

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

@@ -0,0 +1,3 @@
+export * from "./DefaultHomePage";
+export * from "./NavigationCollectionCard";
+export * from "./NavigationGroup";

package/src/components/HomePage/index.tsx

@@ -0,0 +1,3 @@
+export * from "./DefaultHomePage";
+export * from "./NavigationCollectionCard";
+export * from "./NavigationGroup";

package/src/components/LabelWithIcon.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+interface LabelWithIconProps {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+}
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export declare function LabelWithIcon({ icon, title, small, className, required }: LabelWithIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/LabelWithIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface LabelWithIconProps {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIcon({
+                                  icon,
+                                  title,
+                                  small,
+                                  className,
+                                  required
+                              }: LabelWithIconProps) {
+    return (
+        <span
+            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
+
+            {icon}
+
+            <span
+                className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
+
+        </span>
+    );
+}

package/src/components/NotFoundPage.d.ts

@@ -0,0 +1 @@
+export declare function NotFoundPage(): import("react/jsx-runtime").JSX.Element;

package/src/components/NotFoundPage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link as ReactLink } from "react-router-dom";
+import { Button, Typography } from "@firecms/ui";
+
+export function NotFoundPage() {
+
+    return (
+        <div className="flex w-full h-full">
+            <div className="m-auto flex items-center flex-col"
+            >
+                <Typography variant={"h4"} align={"center"}
+                            gutterBottom={true}>
+                    Page not found
+                </Typography>
+                <Typography align={"center"} gutterBottom={true}>
+                    This page does not exist or you may not have access to it
+                </Typography>
+                <Button
+                    variant={"text"}
+                    component={ReactLink}
+                    to={"/"}>Back to home</Button>
+            </div>
+        </div>
+    );
+}

package/src/components/ReferenceSelectionInner.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { Entity, EntityCollection, FilterValues } from "../types";
+/**
+ * @group Components
+ */
+export interface ReferenceSelectionInnerProps<M extends Record<string, any>> {
+    /**
+     * Allow multiple selection of values
+     */
+    multiselect?: boolean;
+    /**
+     * Entity collection config
+     */
+    collection?: EntityCollection<M>;
+    /**
+     * Absolute path of the collection.
+     * May be not set if this hook is being used in a component and the path is
+     * dynamic. If not set, the dialog won't open.
+     */
+    path: string;
+    /**
+     * If you are opening the dialog for the first time, you can select some
+     * entity ids to be displayed first.
+     */
+    selectedEntityIds?: string[];
+    /**
+     * If `multiselect` is set to `false`, you will get the selected entity
+     * in this callback.
+     * @param entity
+     * @callback
+     */
+    onSingleEntitySelected?(entity: Entity<any> | null): void;
+    /**
+     * If `multiselect` is set to `true`, you will get the selected entities
+     * in this callback.
+     * @param entities
+     * @callback
+     */
+    onMultipleEntitiesSelected?(entities: Entity<any>[]): void;
+    /**
+     * Allow selection of entities that pass the given filter only.
+     */
+    forceFilter?: FilterValues<string>;
+    /**
+     * Use this description to indicate the user what to do in this dialog.
+     */
+    description?: React.ReactNode;
+    /**
+     * Maximum number of entities that can be selected.
+     */
+    maxSelection?: number;
+}
+/**
+ * This component allows to select entities from a given collection.
+ * You probably want to open this dialog as a side view using {@link useReferenceDialog}
+ * @group Components
+ */
+export declare function ReferenceSelectionInner<M extends Record<string, any>>({ onSingleEntitySelected, onMultipleEntitiesSelected, multiselect, collection, path: pathInput, selectedEntityIds: selectedEntityIdsProp, description, forceFilter, maxSelection }: ReferenceSelectionInnerProps<M>): import("react/jsx-runtime").JSX.Element;