feat: implement read only mode user setting

apps/cms/.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=

libs/ui-components/src/Button.tsx

@@ -1,24 +1,54 @@
-import React, {useState} from "react";
+import clsx from "clsx";
+import React, {useEffect, useState} from "react";
 
 interface ButtonProps {
   title: string;
-  onClick: () => Promise<void> | void;
-  style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
+  onClick?: () => Promise<void> | void;
+  style?: "normal" | "plain-text" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
+  type?: "button" | "reset" | "submit";
+  className?: string[];
+  loading?: boolean;
+  disabled?: boolean;
   children?: React.ReactNode;
 }
 
-export function Button({title, onClick, style = "rounded", color = "primary", children}: ButtonProps) {
-  const [isLoading, setIsLoading] = useState(false);
+export function Button(props: ButtonProps) {
+  const {
+    title,
+    onClick,
+    style = "rounded",
+    color = "primary",
+    children,
+    loading = false,
+    disabled = false,
+    type,
+    className = [],
+  } = props;
 
-  const handleClick = async () => {
-    setIsLoading(true);
-    try {
-      await onClick();
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const [isLoading, setIsLoading] = useState(loading);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+
+  useEffect(() => {
+    return () => pruneState();
+  }, []);
+
+  useEffect(() => {
+    setIsLoading(loading);
+
+    return () => pruneState();
+  }, [loading]);
+
+  useEffect(() => {
+    setIsDisabled(disabled);
+
+    return () => pruneState();
+  }, [disabled]);
+
+  function pruneState() {
+    setIsLoading(false);
+    setIsDisabled(false);
+  }
 
   let styles = [
     "inline-flex",
@@ -29,7 +59,7 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
     "text-center",
     "font-medium",
     "hover:bg-opacity-90",
-    isLoading ? "opacity-50 cursor-not-allowed" : "",
+    isLoading || isDisabled ? "disabled:opacity-50 opacity-50 cursor-not-allowed" : "",
   ];
 
   switch (color) {
@@ -49,6 +79,10 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
   switch (style) {
     case "normal":
       break;
+    case "plain-text":
+      styles = styles.filter((style) => style !== "text-white");
+      styles.push("!bg-transparent", `hover:text-${color}`);
+      break;
     case "rounded":
       styles.push("rounded-md");
       break;
@@ -69,10 +103,39 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
       break;
   }
 
+  styles = styles.concat(styles, ...className);
+
   return (
-    <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading}>
-      {children}
-      {style !== "icon" && style !== "icon-rounded" && <span>{title}</span>}
+    <button onClick={onClick} className={styles.join(" ")} disabled={isLoading || isDisabled} type={type}>
+      {isLoading && (
+        <>
+          <svg
+            className={clsx(
+              "animate-spin -ml-1 mr-3 h-5 w-5",
+              style === "outline" || style === "outline-rounded" ? `text-${color}` : "text-white",
+            )}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+
+          <span>Processing...</span>
+        </>
+      )}
+
+      {!isLoading && (
+        <>
+          {children}
+          {style !== "icon" && style !== "icon-rounded" && <span>{title}</span>}
+        </>
+      )}
     </button>
   );
 }