@firecms/ui 3.0.0-beta.1 → 3.0.0-beta.10

package/src/components/Typography.tsx

@@ -1,8 +1,8 @@
 import React, { ReactEventHandler } from "react";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
-export type TextProps<C extends React.ElementType> = {
+export type TypographyVariant = keyof typeof typographyVariants;
+export type TypographyProps<C extends React.ElementType = "span"> = {
     align?: "center" | "inherit" | "justify" | "left" | "right";
     children?: React.ReactNode;
     className?: string;
@@ -10,14 +10,14 @@ export type TextProps<C extends React.ElementType> = {
     gutterBottom?: boolean;
     noWrap?: boolean;
     paragraph?: boolean;
-    variant?: keyof typeof defaultVariantMapping;
+    variant?: TypographyVariant;
     variantMapping?: { [key: string]: string };
     color?: "inherit" | "initial" | "primary" | "secondary" | "disabled" | "error";
     onClick?: ReactEventHandler<HTMLElement>;
     style?: React.CSSProperties;
 } & React.ComponentPropsWithoutRef<C>;
 
-const defaultVariantMapping = {
+const typographyVariants = {
     h1: "h1",
     h2: "h2",
     h3: "h3",
@@ -43,24 +43,41 @@ const colorToClasses = {
     error: "text-red-600 dark:text-red-500"
 };
 
+const gutterBottomClasses = {
+    h1: "mb-5",
+    h2: "mb-4",
+    h3: "mb-4",
+    h4: "mb-4",
+    h5: "mb-3",
+    h6: "mb-3",
+    subtitle1: "mb-3",
+    subtitle2: "mb-3",
+    body1: "mb-3",
+    body2: "mb-3",
+    inherit: "mb-3",
+    caption: "mb-2",
+    button: "mb-2",
+    label: "mb-2"
+};
+
 const variantToClasses = {
-    h1: "text-6xl font-headers font-light",
-    h2: "text-5xl font-headers font-light",
-    h3: "text-4xl font-headers font-normal",
-    h4: "text-3xl font-headers font-normal",
-    h5: "text-2xl font-headers font-normal",
-    h6: "text-xl font-headers font-medium",
-    subtitle1: "text-lg font-headers font-medium",
-    subtitle2: "text-base font-headers font-medium",
-    body1: "text-base",
-    body2: "text-sm",
-    label: "text-sm font-medium text-slate-500",
-    inherit: "text-inherit",
-    caption: "text-xs",
-    button: "text-sm font-medium"
+    h1: "typography-h1",
+    h2: "typography-h2",
+    h3: "typography-h3",
+    h4: "typography-h4",
+    h5: "typography-h5",
+    h6: "typography-h6",
+    subtitle1: "typography-subtitle1",
+    subtitle2: "typography-subtitle2",
+    body1: "typography-body1",
+    body2: "typography-body2",
+    label: "typography-label",
+    inherit: "typography-inherit",
+    caption: "typography-caption",
+    button: "typography-button"
 };
 
-export function Typography<C extends React.ElementType>(
+export function Typography<C extends React.ElementType = "span">(
     {
         align = "inherit",
         color = "primary",
@@ -71,25 +88,24 @@ export function Typography<C extends React.ElementType>(
         noWrap = false,
         paragraph = false,
         variant = "body1",
-        variantMapping = defaultVariantMapping,
+        variantMapping = typographyVariants,
         style,
         onClick,
         ...other
-    }: TextProps<C>
+    }: TypographyProps<C>
 ) {
     const Component =
         component ||
-        (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) ||
+        (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) ||
         "span";
 
-    const classes = cn(
-        focusedMixin,
+    const classes = cls(
         variantToClasses[variant],
         color ? colorToClasses[color] : "",
         align !== "inherit" && `text-${align}`,
-        gutterBottom && "mb-[0.35em]",
+        gutterBottom && gutterBottomClasses[variant],
         noWrap && "truncate",
-        paragraph && "mb-4",
+        paragraph && "mb-3",
         className
     );
 

package/src/components/_MultiSelect.tsx

@@ -0,0 +1,222 @@
+// import * as React from "react";
+// import { useEffect } from "react";
+// import * as Dialog from "@radix-ui/react-dialog";
+//
+// import { Command as CommandPrimitive } from "cmdk";
+//
+// import { ExpandMoreIcon } from "../icons";
+// import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedDisabled } from "../styles";
+// import { cls } from "../util";
+// import { SelectInputLabel } from "./common/SelectInputLabel";
+// import { useOutsideAlerter } from "../hooks";
+//
+// export type MultiSelectProps = {
+//     open?: boolean,
+//     name?: string,
+//     id?: string,
+//     onOpenChange?: (open: boolean) => void,
+//     value?: string[],
+//     containerClassName?: string,
+//     className?: string,
+//     inputClassName?: string,
+//     onMultiValueChange?: (updatedValue: string[]) => void,
+//     placeholder?: React.ReactNode,
+//     renderValue?: (values: string, index:number) => React.ReactNode,
+//     renderValues?: (values: string[]) => React.ReactNode,
+//     size?: "small" | "medium",
+//     label?: React.ReactNode,
+//     disabled?: boolean,
+//     error?: boolean,
+//     position?: "item-aligned" | "popper",
+//     inputRef?: React.RefObject<HTMLButtonElement>,
+//     children?: React.ReactNode,
+// };
+//
+// interface MultiSelectContextProps {
+//     fieldValue?: string[];
+//     setInputValue: (v: string) => void;
+//     onValueChangeInternal: (v: string) => void;
+// }
+//
+// export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
+//
+// export function MultiSelect({
+//                                 value,
+//                                 open,
+//                                 onMultiValueChange,
+//                                 size = "medium",
+//                                 label,
+//                                 disabled,
+//                                 renderValue,
+//                                 renderValues,
+//                                 containerClassName,
+//                                 className,
+//                                 children,
+//                                 error
+//                             }: MultiSelectProps) {
+//
+//     const containerRef = React.useRef<HTMLInputElement>(null);
+//     const inputRef = React.useRef<HTMLInputElement>(null);
+//     const listRef = React.useRef<HTMLDivElement>(null);
+//     useOutsideAlerter(listRef, () => setOpenInternal(false));
+//
+//     const [openInternal, setOpenInternal] = React.useState(false);
+//     useEffect(() => {
+//         setOpenInternal(open ?? false);
+//     }, [open]);
+//
+//     const onValueChangeInternal = React.useCallback((newValue: string) => {
+//         if (Array.isArray(value) && value.includes(newValue)) {
+//             onMultiValueChange?.(value.filter(v => v !== newValue));
+//         } else {
+//             onMultiValueChange?.([...(value ?? []), newValue]);
+//         }
+//     }, [value, onMultiValueChange]);
+//
+//     const [inputValue, setInputValue] = React.useState("");
+//     const [boundingRect, setBoundingRect] = React.useState<DOMRect | null>(null);
+//
+//     const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+//         const input = inputRef.current
+//         if (input) {
+//             if (e.key === "Delete" || e.key === "Backspace") {
+//                 if (input.value === "") {
+//                     const newSelected = [...(value ?? [])];
+//                     newSelected.pop();
+//                     onMultiValueChange?.(newSelected);
+//                 }
+//             }
+//             // This is not a default behaviour of the <input /> field
+//             if (e.key === "Escape") {
+//                 input.blur();
+//                 setOpenInternal(false);
+//                 e.stopPropagation();
+//             }
+//         }
+//     }, [onMultiValueChange, value]);
+//
+//     const openDialog = React.useCallback(() => {
+//         setBoundingRect(containerRef.current?.getBoundingClientRect() ?? null);
+//         setOpenInternal(true);
+//     }, []);
+//
+//     const usedBoundingRect = boundingRect ?? containerRef.current?.getBoundingClientRect();
+//     const maxHeight = window.innerHeight - (usedBoundingRect?.top ?? 0) - (usedBoundingRect?.height ?? 0) - 16;
+//
+//     return (<>
+//
+//             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
+//
+//             <CommandPrimitive onKeyDown={handleKeyDown}
+//                               onClick={() => {
+//                                   inputRef.current?.focus();
+//                                   openDialog()
+//                               }}
+//                               className={cls("relative overflow-visible bg-transparent", containerClassName)}>
+//                 <div
+//                     ref={containerRef}
+//                     className={cls(
+//                         "flex flex-row",
+//                         size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+//                         "select-none rounded-md text-sm",
+//                         fieldBackgroundMixin,
+//                         disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+//                         "relative flex items-center",
+//                         "p-4",
+//                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
+//                         error ? "border border-red-500 dark:border-red-600" : "",
+//                         className)}
+//                 >
+//                     <div className={cls("flex-grow flex gap-1.5 flex-wrap items-center")}>
+//                         {renderValue && (value ?? []).map((v, i) => renderValue(v, i))}
+//                         {renderValues && renderValues(value ?? [])}
+//                         <CommandPrimitive.Input
+//                             ref={inputRef}
+//                             value={inputValue}
+//                             onValueChange={setInputValue}
+//                             // onBlur={() => setOpenInternal(false)}
+//                             onFocus={openDialog}
+//                             className={cls("ml-2 bg-transparent outline-none flex-1 h-full w-full ", focusedDisabled)}
+//                         />
+//                     </div>
+//                     <div className={"px-2 h-full flex items-center"}>
+//                         <ExpandMoreIcon size={"small"}
+//                                         className={cls("transition ", openInternal ? "rotate-180" : "")}/>
+//                     </div>
+//
+//                 </div>
+//
+//                 <Dialog.Root open={openInternal}
+//                              modal={true}
+//                              onOpenChange={setOpenInternal}>
+//                     <Dialog.Portal>
+//                         <MultiSelectContext.Provider
+//                             value={{
+//                                 fieldValue: value,
+//                                 setInputValue,
+//                                 onValueChangeInternal
+//                             }}>
+//                             <div
+//                                 ref={listRef}
+//                                 className={"z-50 absolute overflow-auto outline-none"}
+//                                 style={{
+//                                     pointerEvents: openInternal ? "auto" : "none",
+//                                     top: (usedBoundingRect?.top ?? 0) + (usedBoundingRect?.height ?? 0),
+//                                     left: usedBoundingRect?.left,
+//                                     width: usedBoundingRect?.width,
+//                                     maxHeight: maxHeight,
+//
+//                                 }}>
+//
+//                                 <CommandPrimitive.Group
+//                                     className="mt-2 text-slate-900 dark:text-white animate-in z-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full"
+//                                 >
+//
+//                                     {children}
+//                                 </CommandPrimitive.Group>
+//
+//                             </div>
+//                         </MultiSelectContext.Provider>
+//                     </Dialog.Portal>
+//                 </Dialog.Root>
+//             </CommandPrimitive>
+//
+//         </>
+//     )
+// }
+//
+// export interface MultiSelectItemProps {
+//     value: string;
+//     children?: React.ReactNode,
+//     className?: string;
+// }
+//
+// export function MultiSelectItem({ children, value, className }: MultiSelectItemProps) {
+//
+//     const context = React.useContext(MultiSelectContext);
+//     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
+//     const { fieldValue, setInputValue, onValueChangeInternal } = context;
+//
+//     return <CommandPrimitive.Item
+//         onMouseDown={(e) => {
+//             e.preventDefault();
+//             e.stopPropagation();
+//         }}
+//         onSelect={(_) => {
+//             setInputValue("");
+//             onValueChangeInternal(value);
+//         }}
+//         className={cls(
+//             (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
+//             "cursor-pointer",
+//             "m-1",
+//             "ring-offset-transparent",
+//             "p-2 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+//             "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+//             "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+//             className
+//         )}
+//     >
+//         {children}
+//     </CommandPrimitive.Item>;
+// }

package/src/components/common/SelectInputLabel.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { cn } from "../../util";
+import { cls } from "../../util";
 
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
-    return <div className={cn("text-sm  font-medium ml-3.5 mb-1",
+    return <div className={cls("text-sm  font-medium ml-3.5 mb-1",
         error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300",)}>
         {children}
     </div>;

package/src/components/index.tsx

@@ -15,20 +15,25 @@ export * from "./DateTimeField";
 export * from "./Dialog";
 export * from "./DialogActions";
 export * from "./DialogContent";
+export * from "./DialogTitle";
 export * from "./ExpandablePanel";
 export * from "./FileUpload";
 export * from "./IconButton";
 export * from "./InputLabel";
 export * from "./InfoLabel";
+export * from "./Label";
 export * from "./LoadingButton";
 export * from "./Markdown";
 export * from "./Menu";
+export * from "./Menubar";
 export * from "./MultiSelect";
 export * from "./Paper";
-export * from "./Select";
+export * from "./RadioGroup";
 export * from "./SearchBar";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Slider";
 export * from "./Sheet";
-export * from "./Spinner";
 export * from "./TextareaAutosize";
 export * from "./TextField";
 export * from "./Tooltip";

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./useLocaleConfig";
+export * from "./useInjectStyles";
+export * from "./useOutsideAlerter";
+export * from "./useDebounceValue";

package/src/{util → hooks}/useInjectStyles.tsx

@@ -16,6 +16,6 @@ export function useInjectStyles(key: string, styles: string) {
             style.innerHTML = styles;
             document.head.appendChild(style);
         }
-    }, [key, styles]);
+    }, []);
 
 }

package/src/hooks/useLocaleConfig.tsx

@@ -0,0 +1,18 @@
+import * as locales from "date-fns/locale";
+// @ts-ignore
+import { registerLocale, setDefaultLocale } from "react-datepicker";
+import { useEffect } from "react";
+
+export function useLocaleConfig(locale?: string) {
+    useEffect(() => {
+        if (!locale) {
+            return;
+        }
+        // @ts-ignore
+        const dateFnsLocale = locales[locale];
+        if (dateFnsLocale) {
+            registerLocale(locale, dateFnsLocale);
+            setDefaultLocale(locale);
+        }
+    }, [locale])
+}

package/src/icons/GitHubIcon.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { IconProps } from "./Icon";
+
 export function GitHubIcon(props: IconProps) {
     return <svg xmlns="http://www.w3.org/2000/svg"
                 className={props.className}

package/src/icons/HandleIcon.tsx

@@ -0,0 +1,10 @@
+export function HandleIcon() {
+    return <svg width="24" height="24" viewBox="0 0 100 100" fill="none">
+        <circle cx="28" cy="50" r="9" fill={"currentColor"}/>
+        <circle cx="28" cy="21" r="9" fill={"currentColor"}/>
+        <circle cx="71" cy="21" r="9" fill={"currentColor"}/>
+        <circle cx="71" cy="50" r="9" fill={"currentColor"}/>
+        <circle cx="71" cy="78" r="9" fill={"currentColor"}/>
+        <circle cx="28" cy="78" r="9" fill={"currentColor"}/>
+    </svg>;
+}

package/src/icons/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import "@material-design-icons/font/filled.css";
-import { cn } from "../util";
+import { cls } from "../util";
+import 'material-icons/iconfont/filled.css';
 
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
@@ -8,7 +8,7 @@ export type IconProps = {
     color?: IconColor,
     className?: string,
     onClick?: (e: React.SyntheticEvent) => void,
-    style?: React.CSSProperties
+    style?: React.CSSProperties,
 }
 
 const colorClassesMapping: Record<IconColor, string> = {
@@ -17,47 +17,50 @@ const colorClassesMapping: Record<IconColor, string> = {
     success: "text-green-500",
     warning: "text-yellow-500",
     secondary: "text-secondary",
-    disabled: "text-disabled dark:text-disabled-dark",
+    disabled: "text-text-disabled dark:text-text-disabled-dark",
     error: "text-red-500"
 }
 
-export function Icon({
-                         iconKey,
-                         size = "medium",
-                         color,
-                         className,
-                         onClick,
-                         style
-                     }: IconProps & { iconKey: string }) {
-    let sizeInPx: number;
-    switch (size) {
-        case "smallest":
-            sizeInPx = 16;
-            break;
-        case "small":
-            sizeInPx = 20;
-            break;
-        case "medium":
-            sizeInPx = 24;
-            break;
-        case "large":
-            sizeInPx = 28;
-            break
-        default:
-            sizeInPx = size;
-    }
-    if (!sizeInPx) sizeInPx = 24;
+export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: string }>(
+    ({
+         iconKey,
+         size = "medium",
+         color,
+         className,
+         onClick,
+         style
+     }, ref) => {
+        let sizeInPx: number;
+        switch (size) {
+            case "smallest":
+                sizeInPx = 16;
+                break;
+            case "small":
+                sizeInPx = 20;
+                break;
+            case "medium":
+                sizeInPx = 24;
+                break;
+            case "large":
+                sizeInPx = 28;
+                break
+            default:
+                sizeInPx = typeof size === "number" ? size : 24;
+        }
 
-    return <span
-        style={{
-            fontSize: `${sizeInPx}px`,
-            display: "block",
-            ...style
-        }}
-        className={
-            cn("material-icons",
-                color ? colorClassesMapping[color] : "",
-                "select-none",
-                className)}
-        onClick={onClick}>{iconKey}</span>
-}
+        return <span
+            ref={ref} // Attach the ref to the span
+            style={{
+                fontSize: `${sizeInPx}px`,
+                display: "block",
+                ...style
+            }}
+            className={
+                cls("material-icons",
+                    color ? colorClassesMapping[color] : "",
+                    "select-none",
+                    className)}
+            onClick={onClick}>{iconKey}</span>
+    });
+
+Icon.displayName = "Icon";