@firecms/ui 3.0.0-beta.4.pre.2 → 3.0.0-beta.6

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/Icon.tsx

@@ -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> = {
@@ -21,43 +21,46 @@ const colorClassesMapping: Record<IconColor, string> = {
     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={
+                cn("material-icons",
+                    color ? colorClassesMapping[color] : "",
+                    "select-none",
+                    className)}
+            onClick={onClick}>{iconKey}</span>
+    });
+
+Icon.displayName = "Icon";

package/src/index.ts

@@ -2,3 +2,4 @@ export * from "./components";
 export * from "./styles";
 export * from "./util";
 export * from "./icons";
+export * from "./hooks";

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
-export const fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-90";
+export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-100 ease-in-out";
+export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-100 ease-in-out";
+export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
+export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
 export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-90 border-gray-100";
-export const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1 border border-transparent";
+export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
+export const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-100 ease-in-out m-1 -p-1";
 export const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";

package/src/util/index.ts

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

package/tailwind.config.js

@@ -0,0 +1,70 @@
+export default {
+    darkMode: ["selector", "[data-theme=\"dark\"]"],
+    mode: "jit",
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
+    ],
+    plugins: [
+        require("@tailwindcss/typography")
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: [
+                    "Rubik",
+                    "Roboto",
+                    "Helvetica",
+                    "Arial",
+                    "sans-serif"
+                ],
+                headers: [
+                    "Rubik",
+                    "Roboto",
+                    "Helvetica",
+                    "Arial",
+                    "sans-serif"
+                ],
+                mono: [
+                    "JetBrains Mono",
+                    "Space Mono",
+                    "Lucida Console",
+                    "monospace"
+                ]
+            },
+            colors: {
+                primary: "var(--fcms-primary)",
+                "primary-dark": "var(--fcms-primary-dark)",
+                "primary-bg": "var(--fcms-primary-bg)",
+                secondary: "var(--fcms-secondary)",
+                field: {
+                    disabled: "rgb(224 224 226)",
+                    "disabled-dark": "rgb(35 35 37)"
+                },
+                text: {
+                    primary: "rgba(0, 0, 0, 0.87)",
+                    "primary-dark": "#ffffff",
+                    secondary: "rgba(0, 0, 0, 0.6)",
+                    "secondary-dark": "rgba(255, 255, 255, 0.7)",
+                    disabled: "rgba(0, 0, 0, 0.38)",
+                    "disabled-dark": "rgba(255, 255, 255, 0.5)",
+                    label: "rgb(131, 131, 131)"
+                },
+                gray: {
+                    50: "#f8f8fc",
+                    100: "#E7E7EB",
+                    200: "#CFCFD6",
+                    300: "#B7B7BF",
+                    400: "#A0A0A9",
+                    500: "#87878F",
+                    600: "#6C6C75",
+                    700: "#505058",
+                    800: "#35353A",
+                    900: "#18181C",
+                    950: "#101013"
+                }
+            }
+        }
+    }
+};