@rationalbloks/frontblok-components 0.1.0 → 0.2.0

package/README.md

@@ -2,9 +2,9 @@
 
 Reusable React components for RationalBloks frontends.
 
-## Philosophy
+## Design Principles
 
-**THE ONE WAY: Props-based API**
+**Props-based API**
 
 - All customization via props (no hidden context)
 - Each component is self-contained
@@ -21,8 +21,8 @@ npm install @rationalbloks/frontblok-components
 
 ```json
 {
-  "@mui/material": "^5.0.0 || ^6.0.0",
-  "@mui/icons-material": "^5.0.0 || ^6.0.0",
+  "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0",
+  "@mui/icons-material": "^5.0.0 || ^6.0.0 || ^7.0.0",
   "@emotion/react": "^11.0.0",
   "@emotion/styled": "^11.0.0",
   "@react-oauth/google": "^0.12.0",
@@ -49,7 +49,7 @@ npm install @rationalbloks/frontblok-components
 | Component | Props | Description |
 |-----------|-------|-------------|
 | `ErrorBoundary` | `children`, `supportEmail?` | React error boundary |
-| `ErrorFallback` | `error`, `resetErrorBoundary`, ... | Error display component |
+| `ErrorFallback` | `error`, `errorInfo`, `resetError`, `supportEmail` | Error display component |
 | `ConfirmationModal` | `open`, `onClose`, `onConfirm`, `title`, `message`, ... | Confirmation dialog |
 | `createNavbar(config)` | Factory function | Creates configured navbar component |
 

package/dist/index.cjs

@@ -6529,13 +6529,315 @@ const SupportView = () => {
     ] })
   ] });
 };
+const SettingsView = ({
+  authApi,
+  useAuth,
+  homeRoute = "/",
+  children
+}) => {
+  var _a;
+  const navigate = reactRouterDom.useNavigate();
+  const { user, logout } = useAuth();
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  const [deleteConfirmation, setDeleteConfirmation] = React.useState("");
+  const [deletePassword, setDeletePassword] = React.useState("");
+  const [error, setError] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const handleLogout = () => {
+    logout();
+    navigate(homeRoute);
+  };
+  const handleDeleteAccount = async () => {
+    if (deleteConfirmation !== "DELETE") {
+      setError("Please type DELETE to confirm");
+      return;
+    }
+    if (!deletePassword) {
+      setError("Please enter your password");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      await authApi.deleteAccount(deletePassword, deleteConfirmation);
+      logout();
+      navigate(homeRoute);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete account");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Container, { maxWidth: "md", sx: { py: 4 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", fontWeight: 700, gutterBottom: true, children: "Settings" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", color: "text.secondary", paragraph: true, children: "Manage your account settings and preferences." }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: 3, mb: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", fontWeight: 600, gutterBottom: true, children: "Profile Information" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mb: 3 } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Avatar,
+          {
+            sx: {
+              width: 80,
+              height: 80,
+              bgcolor: "primary.main",
+              fontSize: "2rem"
+            },
+            children: ((_a = user == null ? void 0 : user.first_name) == null ? void 0 : _a.charAt(0).toUpperCase()) || /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Person, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "h5", fontWeight: 600, children: [
+            user == null ? void 0 : user.first_name,
+            " ",
+            user == null ? void 0 : user.last_name
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "text.secondary", children: user == null ? void 0 : user.email })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: 3, mb: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", fontWeight: 600, gutterBottom: true, children: "Account Actions" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mb: 3 } }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { spacing: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { fontWeight: 500, children: "Sign Out" }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Sign out of your account on this device." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExitToApp, {}),
+            onClick: handleLogout,
+            children: "Sign Out"
+          }
+        )
+      ] }) })
+    ] }),
+    children,
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Paper, { sx: { p: 3, border: "1px solid", borderColor: "error.main" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", fontWeight: 600, color: "error", gutterBottom: true, children: "Danger Zone" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mb: 3 } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { fontWeight: 500, children: "Delete Account" }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: "Permanently delete your account and all associated data." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            variant: "outlined",
+            color: "error",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.DeleteForever, {}),
+            onClick: () => setDeleteDialogOpen(true),
+            children: "Delete Account"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Dialog, { open: deleteDialogOpen, onClose: () => setDeleteDialogOpen(false), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { children: "Delete Account" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mb: 2 }, children: "This action cannot be undone. All your data will be permanently deleted." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { paragraph: true, children: [
+          "Enter your password and type ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "DELETE" }),
+          " to confirm:"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            type: "password",
+            value: deletePassword,
+            onChange: (e) => setDeletePassword(e.target.value),
+            placeholder: "Enter your password",
+            sx: { mb: 2 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          {
+            fullWidth: true,
+            value: deleteConfirmation,
+            onChange: (e) => setDeleteConfirmation(e.target.value),
+            placeholder: "Type DELETE to confirm"
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { severity: "error", sx: { mt: 2 }, children: error })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: () => setDeleteDialogOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            color: "error",
+            variant: "contained",
+            onClick: handleDeleteAccount,
+            disabled: loading,
+            children: loading ? "Deleting..." : "Delete My Account"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+const defaultPalette = {
+  primary: {
+    main: "#1e40af",
+    50: "#eff6ff",
+    100: "#dbeafe",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    900: "#1e3a8a"
+  },
+  secondary: {
+    main: "#6b7280"
+  },
+  success: {
+    main: "#10b981"
+  },
+  warning: {
+    main: "#f59e0b"
+  },
+  error: {
+    main: "#ef4444"
+  },
+  background: {
+    default: "hsl(33.3, 60%, 97.1%)",
+    // Beautiful warm beige
+    paper: "#FCFAF7"
+    // Warm white for cards
+  }
+};
+const defaultTypography = {
+  fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif',
+  h1: {
+    fontWeight: 700,
+    letterSpacing: "-0.5px"
+  },
+  h2: {
+    fontWeight: 700,
+    letterSpacing: "-0.4px"
+  },
+  h3: {
+    fontWeight: 600,
+    letterSpacing: "-0.3px"
+  },
+  h4: {
+    fontWeight: 700,
+    letterSpacing: "-0.2px"
+  },
+  h5: {
+    fontWeight: 600,
+    letterSpacing: "-0.1px"
+  },
+  h6: {
+    fontWeight: 600,
+    letterSpacing: "-0.08px"
+  }
+};
+const defaultComponents = {
+  MuiButton: {
+    styleOverrides: {
+      root: {
+        textTransform: "none",
+        fontWeight: 600,
+        borderRadius: "8px"
+      }
+    }
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: {
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.05)",
+        border: "1px solid #f3f4f6"
+      }
+    }
+  },
+  MuiChip: {
+    styleOverrides: {
+      root: {
+        fontWeight: 600
+      }
+    }
+  },
+  MuiSelect: {
+    styleOverrides: {
+      select: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif'
+      }
+    }
+  },
+  MuiTextField: {
+    styleOverrides: {
+      root: {
+        "& .MuiInputBase-input": {
+          fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif'
+        }
+      }
+    }
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif'
+      }
+    }
+  },
+  MuiMenuItem: {
+    styleOverrides: {
+      root: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif'
+      }
+    }
+  }
+};
+const defaultNavbarGradient = {
+  start: "#1800ad",
+  end: "#0d0067"
+};
+function createAppTheme(options = {}) {
+  const {
+    paletteOverrides = {},
+    typographyOverrides = {},
+    componentsOverrides = {},
+    borderRadius: borderRadius2 = 12
+  } = options;
+  return createTheme({
+    palette: {
+      ...defaultPalette,
+      ...paletteOverrides
+    },
+    typography: {
+      ...defaultTypography,
+      ...typographyOverrides
+    },
+    shape: {
+      borderRadius: borderRadius2
+    },
+    components: {
+      ...defaultComponents,
+      ...componentsOverrides
+    }
+  });
+}
 exports.AuthView = AuthView;
 exports.ConfirmationModal = ConfirmationModal;
 exports.ErrorBoundary = ErrorBoundary;
 exports.ErrorFallback = ErrorFallback;
 exports.ForgotPasswordView = ForgotPasswordView;
 exports.ResetPasswordView = ResetPasswordView;
+exports.SettingsView = SettingsView;
 exports.SupportView = SupportView;
 exports.VerifyEmailView = VerifyEmailView;
+exports.createAppTheme = createAppTheme;
 exports.createNavbar = createNavbar;
+exports.defaultComponents = defaultComponents;
+exports.defaultNavbarGradient = defaultNavbarGradient;
+exports.defaultPalette = defaultPalette;
+exports.defaultTypography = defaultTypography;
 //# sourceMappingURL=index.cjs.map