@firecms/core 3.0.0-alpha.16 → 3.0.0-alpha.18

package/src/components/DebouncedTextField.tsx

@@ -0,0 +1,31 @@
+import React, { ChangeEvent, useCallback, useDeferredValue, useEffect } from "react";
+import { TextField, TextFieldProps } from "./index";
+
+export function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>) {
+
+    const previousEventRef = React.useRef<ChangeEvent<any>>();
+    const [internalValue, setInternalValue] = React.useState(props.value);
+
+    const deferredValue = useDeferredValue(internalValue);
+
+    useEffect(() => {
+        setInternalValue(props.value);
+    }, [props.value]);
+
+    useEffect(() => {
+        const emptyInitialValue = !props.value;
+        if (emptyInitialValue && !deferredValue)
+            return;
+        if (deferredValue !== props.value && previousEventRef.current && props.onChange)
+            props.onChange(previousEventRef.current);
+    }, [deferredValue, props.value, props.onChange]);
+
+    const internalOnChange = useCallback((event: ChangeEvent<any>) => {
+        previousEventRef.current = event;
+        setInternalValue(event.target.value);
+    }, []);
+
+    return <TextField {...props}
+                      onChange={internalOnChange}
+                      value={internalValue}/>
+}

package/src/components/Dialog.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { paperMixin } from "../styles";
+import { cn } from "./util/cn";
+
+export type DialogProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fullScreen?: boolean;
+    scrollable?: boolean;
+    maxWidth?: keyof typeof widthClasses;
+};
+
+const widthClasses = {
+    xs: "max-w-xs min-w-xs w-xs",
+    sm: "max-w-sm min-w-sm w-sm",
+    md: "max-w-md min-w-md w-md",
+    lg: "max-w-lg min-w-lg w-lg",
+    xl: "max-w-xl min-w-xl w-xl",
+    "2xl": "max-w-2xl min-w-2xl w-2xl",
+    "3xl": "max-w-3xl min-w-3xl w-3xl",
+    "4xl": "max-w-4xl min-w-4xl w-4xl",
+    "5xl": "max-w-5xl min-w-5xl w-5xl",
+    "6xl": "max-w-6xl min-w-6xl w-6xl",
+    "7xl": "max-w-7xl min-w-7xl w-7xl",
+    full: "max-w-full min-w-full w-full"
+};
+
+export const Dialog = ({
+                           open,
+                           onOpenChange,
+                           children,
+                           className,
+                           fullWidth = true,
+                           fullHeight,
+                           fullScreen,
+                           scrollable = true,
+                           maxWidth = "lg"
+                       }: DialogProps) => {
+    const [displayed, setDisplayed] = useState(false);
+
+    useEffect(() => {
+        if (!open) {
+            const timeout = setTimeout(() => {
+                setDisplayed(false);
+            }, 250);
+            return () => clearTimeout(timeout);
+        } else {
+            setDisplayed(true);
+            return () => {
+            };
+        }
+    }, [open]);
+
+    return (
+        <DialogPrimitive.Root open={displayed || open}
+                              onOpenChange={onOpenChange}>
+            <DialogPrimitive.Portal>
+
+                <div className={"fixed inset-0 z-40"}>
+
+                    <DialogPrimitive.Overlay
+                        className={cn("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
+                            displayed && open ? "opacity-100" : "opacity-0",
+                            "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
+                        )}
+                        style={{
+                            pointerEvents: displayed ? "auto" : "none"
+                        }}
+                    />
+
+                    <DialogPrimitive.Content
+                        className={cn("h-full outline-none flex justify-center items-center z-50 opacity-100 transition-all duration-200 ease-in-out")}
+                    >
+                        <div
+                            className={cn(paperMixin,
+                                "z-30",
+                                "relative",
+                                "outline-none focus:outline-none",
+                                fullWidth && !fullScreen ? "w-11/12" : undefined,
+                                fullHeight && !fullScreen ? "h-full" : undefined,
+                                "text-gray-900 dark:text-white",
+                                "justify-center items-center",
+                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
+                                "ease-in-out duration-200",
+                                scrollable && "overflow-y-auto",
+                                displayed && open ? "opacity-100" : "opacity-0",
+                                maxWidth && !fullScreen ? widthClasses[maxWidth] : undefined,
+                                className
+                            )}>
+                            {children}
+                        </div>
+
+                    </DialogPrimitive.Content>
+                </div>
+
+            </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+    );
+};
+

package/src/components/DialogActions.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { defaultBorderMixin } from "../styles";
+import { cn } from "./util/cn";
+
+export function DialogActions({
+                                  children,
+                                  position = "sticky",
+                                  translucent = true,
+                                  className
+                              }: {
+    children: React.ReactNode,
+    position?: "sticky" | "absolute",
+    translucent?: boolean,
+    className?: string
+}) {
+
+    return <div
+        className={cn(
+            defaultBorderMixin,
+            "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
+            position,
+            "bg-white bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-60",
+            translucent ? "backdrop-blur-sm" : "",
+            className)}>
+        {children}
+    </div>;
+}

package/src/components/DialogContent.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "./util/cn";
+
+export function DialogContent({
+                                  children,
+                                  className,
+                                  fullHeight
+                              }: {
+    children: React.ReactNode,
+    fullHeight?: boolean,
+    className?: string
+}) {
+
+    if (fullHeight)
+        return <div className={"flex-grow flex flex-col h-full relative"}>
+            {children}
+        </div>;
+
+    return <div
+        className={cn("py-6 px-6 h-full flex-grow", className)}>
+        {children}
+    </div>;
+}

package/src/components/ExpandablePanel.tsx

@@ -0,0 +1,108 @@
+import React, { PropsWithChildren, useEffect, useState } from "react";
+
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { defaultBorderMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
+import { useInjectStyles } from "./util/useInjectStyles";
+import { ExpandMoreIcon } from "../icons";
+import { cn } from "./util/cn";
+
+export function ExpandablePanel({
+                                    title,
+                                    children,
+                                    invisible = false,
+                                    initiallyExpanded: initiallyOpen = true,
+                                    onExpandedChange,
+                                    titleClassName,
+                                    asField,
+                                    className
+                                }: PropsWithChildren<{
+    title: React.ReactNode,
+    invisible?: boolean,
+    initiallyExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void,
+    titleClassName?: string,
+    asField?: boolean,
+    className?: string
+}>) {
+
+    useInjectStyles("ExpandablePanel", `
+.CollapsibleContent {
+  overflow: hidden;
+}
+.CollapsibleContent[data-state='open'] {
+  animation: slideDown 220ms ease-out
+}
+.CollapsibleContent[data-state='closed'] {
+  animation: slideUp 220ms ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}`);
+
+    const [open, setOpen] = useState(initiallyOpen);
+    const [allowOverflow, setAllowOverflow] = useState(open);
+
+    useEffect(() => {
+        if (open) {
+            setTimeout(() => {
+                setAllowOverflow(true);
+            }, 220);
+        } else {
+            setAllowOverflow(false);
+        }
+    }, [open]);
+
+    return (<>
+            <Collapsible.Root
+                className={cn(
+                    !invisible && defaultBorderMixin + " border",
+                    "rounded-md"
+                )}
+                open={open}
+                onOpenChange={(updatedOpen: boolean) => {
+                    onExpandedChange?.(updatedOpen);
+                    setOpen(updatedOpen);
+                }}>
+
+                <Collapsible.Trigger
+                    className={cn(focusedMixin,
+                        "rounded flex items-center justify-between w-full min-h-[52px]",
+                        invisible ? "border-b px-2" : "p-4",
+                        invisible && defaultBorderMixin,
+                        asField && fieldBackgroundMixin,
+                        titleClassName
+                    )}
+                >
+                    {title}
+                    <ExpandMoreIcon className={cn("transition", open ? "rotate-180" : "")}/>
+                </Collapsible.Trigger>
+
+                <Collapsible.Content
+                    className={cn("CollapsibleContent")}
+                    style={{
+                        overflow: allowOverflow ? "visible" : "hidden"
+                    }}
+                >
+                    <div className={className}>
+                        {children}
+                    </div>
+                </Collapsible.Content>
+            </Collapsible.Root>
+        </>
+    )
+}

package/src/components/FileUpload.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { useDropzone } from "react-dropzone";
+import { fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
+import { cn } from "./util/cn";
+import { Typography } from "./Typography";
+
+export interface FileUploadError {
+    message: string;
+    code: string;
+}
+
+export type OnFileUploadRejected = (fileRejections: {
+    file: File;
+    errors: FileUploadError[];
+}[], event: object) => void;
+
+export type OnFilesUploadAdded = (files: File[]) => void;
+
+export type FileUploadProps = {
+    // e.g. accept={{ "*/image": [] }}
+    accept: Record<string, string[]>,
+    onFilesAdded: OnFilesUploadAdded,
+    onFilesRejected?: OnFileUploadRejected,
+    maxSize?: number,
+    disabled?: boolean;
+    maxFiles?: number;
+    title?: React.ReactNode;
+    uploadDescription?: React.ReactNode;
+    preventDropOnDocument?: boolean;
+    size?: "small" | "medium";
+};
+
+export function FileUpload({
+                               accept,
+                               onFilesAdded,
+                               onFilesRejected,
+                               maxSize,
+                               disabled,
+                               maxFiles,
+                               title,
+                               uploadDescription = "Drag and drop a file here or click",
+                               children,
+                               preventDropOnDocument = true,
+                               size
+                           }: React.PropsWithChildren<FileUploadProps>) {
+
+    const {
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject
+    } = useDropzone({
+            accept,
+            noDragEventsBubbling: true,
+            maxSize,
+            onDrop: onFilesAdded,
+            onDropRejected: onFilesRejected,
+            disabled,
+            maxFiles,
+            preventDropOnDocument
+        }
+    );
+    return <div
+        {...getRootProps()}
+        className={cn(
+            fieldBackgroundMixin,
+            fieldBackgroundHoverMixin,
+            focusedMixin,
+            "flex gap-2",
+            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
+            {
+                "h-44": size === "medium",
+                "h-28": size === "small",
+                "cursor-pointer": !disabled,
+                "hover:bg-field-hover dark:hover:bg-field-hover-dark": !isDragActive,
+                "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
+                "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept,
+            })}
+    >
+
+        <Typography variant={"caption"} color={"secondary"} className={"absolute top-2 left-3.5 cursor-inherit"}>
+            {title}
+        </Typography>
+
+        <input
+            {...getInputProps()} />
+
+        {children}
+
+        <div
+            className="flex-grow h-28 box-border flex flex-col items-center justify-center text-center">
+            <Typography align={"center"}
+                        variant={"label"}>
+                {uploadDescription}
+            </Typography>
+        </div>
+
+    </div>
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { focusedMixin } from "../styles";
+import { cn } from "./util/cn";
+
+export type IconButtonProps<C extends React.ElementType> =
+    Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
+    & {
+    size?: "medium" | "small" | "large";
+    variant?: "ghost" | "filled",
+    shape?: "circular" | "square",
+    disabled?: boolean;
+    toggled?: boolean;
+    component?: C;
+    onClick?: React.MouseEventHandler<any>
+}
+
+const buttonClasses =
+    "hover:bg-gray-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75";
+const baseClasses =
+    "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
+const colorClasses = "dark:text-gray-100 text-gray-700 visited:text-gray-700 dark:visited:text-gray-100";
+const sizeClasses = {
+    medium: "w-10 !h-10 min-w-10 min-h-10",
+    small: "w-8 !h-8 min-w-8 min-h-8",
+    large: "w-12 !h-12 min-w-12 min-h-12"
+}
+const shapeClasses = {
+    circular: "rounded-full",
+    square: "rounded-md"
+}
+
+const IconButtonInner = <C extends React.ElementType = "button">({
+                                                                     children,
+                                                                     className,
+                                                                     size = "medium",
+                                                                     variant = "ghost",
+                                                                     shape = "circular",
+                                                                     disabled,
+                                                                     toggled,
+                                                                     component,
+                                                                     ...props
+                                                                 }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
+
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-gray-50 dark:bg-gray-950";
+    const Component: React.ElementType<any> = component || "button";
+    return (
+        <Component
+            type="button"
+            ref={ref}
+            {...props}
+            className={cn(
+                focusedMixin,
+                disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
+                toggled ? "outline outline-2 outline-primary" : "",
+                colorClasses,
+                bgClasses,
+                baseClasses,
+                buttonClasses,
+                shapeClasses[shape],
+                sizeClasses[size],
+                className
+            )}>
+            {children}
+        </Component>
+    );
+};
+// React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<C>>
+
+export const IconButton = React.forwardRef(IconButtonInner as React.ForwardRefRenderFunction<HTMLButtonElement, IconButtonProps<any>>) as React.ComponentType<IconButtonProps<any>>;

package/src/components/InfoLabel.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "./util/cn";
+
+const colorClasses = {
+    info: "bg-sky-200 dark:bg-teal-900",
+    warn: "bg-orange-200 dark:bg-yellow-950"
+}
+
+export function InfoLabel({
+                              children,
+                              mode = "info"
+                          }: {
+    children: React.ReactNode,
+    mode?: "info" | "warn"
+}) {
+
+    return (
+        <div
+            className={cn("my-3 py-2 px-4 rounded", colorClasses[mode])}>
+            {children}
+        </div>
+    )
+}

package/src/components/InputLabel.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cn } from "./util/cn";
+
+export type InputLabelProps = {
+    children?: React.ReactNode;
+    className?: string;
+    shrink?: boolean;
+} & React.LabelHTMLAttributes<HTMLLabelElement>;
+
+export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(function InputLabel(inProps, ref) {
+    const {
+        shrink,
+        className,
+        ...other
+    } = inProps;
+
+    const defaultClasses = {
+        root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
+        shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
+        expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
+    };
+
+    const computedClassName = cn(defaultClasses.root,
+        {
+            [defaultClasses.shrink]: shrink,
+            [defaultClasses.expanded]: !shrink
+        }, className);
+
+    return (
+        <label
+            data-shrink={shrink}
+            ref={ref}
+            className={computedClassName}
+            {...other}
+        />
+    );
+});

package/src/components/LoadingButton.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button, ButtonProps } from "./Button";
+import { CircularProgress } from "./CircularProgress";
+
+export type LoadingButtonProps<P extends React.ElementType> = ButtonProps<P> & {
+    startIcon?: React.ReactNode;
+    loading?: boolean;
+}
+
+export function LoadingButton<P extends React.ElementType = "button">({
+                                                                          children,
+                                                                          loading,
+                                                                          disabled,
+                                                                          onClick,
+                                                                          startIcon,
+                                                                          ...props
+                                                                      }: LoadingButtonProps<P>) {
+    return (
+        <Button
+            disabled={loading || disabled}
+            onClick={onClick}
+            component={props.component as any}
+            {...props}
+        >
+            {loading && (
+                <CircularProgress size={"small"}/>
+            )}
+            {!loading && startIcon}
+            {children}
+        </Button>
+    );
+};

package/src/components/Markdown.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from "react";
+import equal from "react-fast-compare"
+
+// @ts-ignore
+import MarkdownIt from "markdown-it";
+
+export interface MarkdownProps {
+    source: string,
+    className?: string
+}
+
+const md = new MarkdownIt({ html: true, });
+/**
+ * @category Preview components
+ */
+export const Markdown = React.memo<MarkdownProps>(function Markdown({
+                                                                        source,
+                                                                        className
+                                                                    }: MarkdownProps) {
+        const html = useMemo(() => {
+            return md.render(typeof source === "string" ? source : "");
+        }, [source]);
+
+        return <div
+            className={className}
+            dangerouslySetInnerHTML={{ __html: html }}
+        />;
+    }
+    , equal) as React.FunctionComponent<MarkdownProps>;

package/src/components/Menu.tsx

@@ -0,0 +1,58 @@
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { focusedMixin, paperMixin } from "../styles";
+import { cn } from "./util/cn";
+
+export type MenuProps = {
+    children: React.ReactNode;
+    trigger: React.ReactNode;
+
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+}
+
+export function Menu({
+                         children,
+                         trigger,
+                         open,
+                         defaultOpen,
+                         onOpenChange
+                     }: MenuProps) {
+    return (
+        <DropdownMenu.Root
+            open={open}
+            defaultOpen={defaultOpen}
+            onOpenChange={onOpenChange}>
+            <DropdownMenu.Trigger asChild>
+                {trigger}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+                <DropdownMenu.Content className={cn(paperMixin, "shadow py-2 z-30")}>
+                    {children}
+                </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+    );
+}
+
+export type MenuItemProps = {
+    children: React.ReactNode;
+    dense?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+}
+
+export function MenuItem({
+                             children,
+                             dense,
+                             onClick
+                         }: MenuItemProps) {
+    return (
+        <DropdownMenu.Item
+            className={cn(focusedMixin,
+                onClick && "cursor-pointer",
+                "rounded-md px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-900 flex items-center gap-4")}
+            onClick={onClick}>
+            {children}
+        </DropdownMenu.Item>
+    );
+}