@firecms/ui 3.0.0-alpha.72 → 3.0.0-alpha.73

package/dist/util/chip_colors.d.ts

@@ -1,3 +1,4 @@
 import { ChipColorKey, ChipColorScheme } from "../components";
 export declare const CHIP_COLORS: Record<string, ChipColorScheme>;
 export declare function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme;
+export declare function getColorSchemeForSeed(seed: string): ChipColorScheme;

package/dist/util/hash.d.ts

@@ -0,0 +1 @@
+export declare function hashString(str: string): number;

package/dist/util/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./cn";
 export * from "./debounce";
 export * from "./chip_colors";
+export * from "./key_to_icon_component";
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";

package/dist/util/key_to_icon_component.d.ts

@@ -0,0 +1 @@
+export declare function keyToIconComponent(key: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-alpha.72",
+    "version": "3.0.0-alpha.73",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -101,7 +101,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e",
+    "gitHead": "df625cc7bd6af087b7012d1c9ae77d3a6c17a320",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Alert.tsx

@@ -4,13 +4,25 @@ import { cn } from "../util";
 export interface AlertProps {
     children: React.ReactNode;
     onDismiss?: () => void;
-    color?: "error" | "warning" | "info" | "success";
+    color?: "error" | "warning" | "info" | "success" | "base";
+    size?: "small" | "medium" | "large";
     action?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
 }
 
-const getClasses = (severity: string) => {
+const getSizeClasses = (size: "small" | "medium" | "large") => {
+    switch (size) {
+        case "small":
+            return "px-2 py-1";
+        case "large":
+            return "px-6 py-4";
+        case "medium":
+        default:
+            return "px-4 py-2";
+    }
+}
+const getColorClasses = (severity: string) => {
     switch (severity) {
         case "error":
             return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
@@ -20,8 +32,9 @@ const getClasses = (severity: string) => {
             return "bg-blue-50 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
         case "success":
             return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
+        case "base":
         default:
-            return "bg-blue-50 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+            return "bg-slate-50 dark:bg-slate-800 dark:text-slate-100 text-slate-900";
     }
 };
 
@@ -29,16 +42,17 @@ export const Alert: React.FC<AlertProps> = ({
                                                 children,
                                                 onDismiss,
                                                 color = "info",
+                                                size = "medium",
                                                 action,
                                                 className,
                                                 style
                                             }) => {
-    const classes = getClasses(color);
+    const classes = getColorClasses(color);
 
     return (
         <div
             style={style}
-            className={cn("px-4 py-2 rounded-md flex items-center gap-2", classes, className)}
+            className={cn(getSizeClasses(size), "rounded-md flex items-center gap-2", classes, className)}
         >
             <span className={"flex-grow"}>{children}</span>
             {onDismiss && (

package/src/components/Chip.tsx

@@ -42,8 +42,8 @@ export function Chip({
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
-            className={cn("rounded-lg w-fit h-fit font-regular inline-flex items-center gap-1",
-                "truncate",
+            className={cn("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+                "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-gray-300 hover:dark:bg-gray-700" : "",
                 sizeClassNames[size],
                 error || !usedColorScheme ? "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200" : "",
@@ -52,7 +52,11 @@ export function Chip({
             onClick={onClick}
             style={{
                 backgroundColor: error || !usedColorScheme ? undefined : usedColorScheme.color,
-                color: error || !usedColorScheme ? undefined : usedColorScheme.text
+                color: error || !usedColorScheme ? undefined : usedColorScheme.text,
+                overflow: "hidden",
+                // display: "-webkit-box",
+                // WebkitLineClamp: 1,
+                // WebkitBoxOrient: "vertical",
             }}
         >
             {children}

package/src/components/SearchBar.tsx

@@ -71,10 +71,11 @@ export function SearchBar({
                 {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-gray-500"}/>}
             </div>
             <input
-                value={searchText}
+                value={searchText ?? ""}
                 ref={inputRef}
                 onClick={onClick}
                 placeholder={placeholder}
+                readOnly={!onTextSearch}
                 onChange={onTextSearch
                     ? (event) => {
                         setSearchText(event.target.value);

package/src/scripts/saveIconFiles.ts

@@ -7,8 +7,10 @@ import fs from "fs";
 import path from "path";
 
 import { fileURLToPath } from "url";
+import { keyToIconComponent } from "../util/key_to_icon_component.ts";
 // import { iconKeys } from "../icons/icon_keys.ts";
 
+
 export function saveIconFiles(iconKeys: string[]) {
     const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -19,15 +21,7 @@ export function saveIconFiles(iconKeys: string[]) {
 
 // for each key, generate a file with an Icon ts component
     iconKeys.forEach((key: string) => {
-
-        const startsWithNumber = key.match(/^\d/);
-
-        // convert key to came case
-        const componentName = (startsWithNumber ? "_" : "") +
-            key.split("_").map((word: string) => {
-                return word.charAt(0).toUpperCase() + word.slice(1);
-            }).join("") +
-            "Icon";
+        const componentName = keyToIconComponent(key);
 
         const iconComponent = `import React from "react";
 import { Icon, IconProps } from "../Icon";

package/src/util/chip_colors.ts

@@ -1,4 +1,5 @@
 import { ChipColorKey, ChipColorScheme } from "../components";
+import { hashString } from "./hash";
 
 export const CHIP_COLORS: Record<string, ChipColorScheme> = {
     blueLighter: { color: "#cfdfff", text: "#102046" },
@@ -49,3 +50,10 @@ export const CHIP_COLORS: Record<string, ChipColorScheme> = {
 export function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme {
     return CHIP_COLORS[key];
 }
+
+export function getColorSchemeForSeed(seed: string): ChipColorScheme {
+    const hash: number = hashString(seed);
+    const colorKeys = Object.keys(CHIP_COLORS);
+    const index = hash % colorKeys.length;
+    return CHIP_COLORS[colorKeys[index]];
+}

package/src/util/hash.ts

@@ -0,0 +1,11 @@
+export function hashString(str: string): number {
+    let hash = 0;
+    let i;
+    let chr;
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Math.abs(hash);
+}

package/src/util/index.ts

@@ -1,5 +1,6 @@
 export * from "./cn";
 export * from "./debounce";
 export * from "./chip_colors";
+export * from "./key_to_icon_component";
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";

package/src/util/key_to_icon_component.ts

@@ -0,0 +1,11 @@
+export function keyToIconComponent(key: string) {
+    const startsWithNumber = key.match(/^\d/);
+
+    // convert key to came case
+    const componentName = (startsWithNumber ? "_" : "") +
+        key.split("_").map((word: string) => {
+            return word.charAt(0).toUpperCase() + word.slice(1);
+        }).join("") +
+        "Icon";
+    return componentName;
+}