@rationalbloks/frontblok-components 0.1.1 → 0.2.1

package/dist/index.d.ts

@@ -6,6 +6,19 @@ import { JSXElementConstructor } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
+import { Theme } from '@mui/material';
+import { ThemeOptions } from '@mui/material/styles';
+
+export declare interface AppThemeOptions {
+    /** Override default palette colors */
+    paletteOverrides?: Record<string, unknown>;
+    /** Override default typography settings */
+    typographyOverrides?: Record<string, unknown>;
+    /** Override default component styles */
+    componentsOverrides?: ThemeOptions['components'];
+    /** Border radius for shapes. Default: 12 */
+    borderRadius?: number;
+}
 
 /**
  * Auth API interface - matches frontblok-auth's authApi.
@@ -124,8 +137,97 @@ export declare type ConfirmationModalSeverity = 'info' | 'warning' | 'error' | '
 
 declare type ConfirmationModalSeverity_2 = 'info' | 'warning' | 'error' | 'success';
 
+/**
+ * Creates a MUI theme with RationalBloks defaults.
+ *
+ * All defaults can be overridden per-app via the options parameter.
+ * The defaults include:
+ * - Warm beige background
+ * - Professional blue primary palette
+ * - System font typography with tight letter-spacing
+ * - Polished component overrides (no uppercase buttons, rounded cards, etc.)
+ *
+ * @param options - Customization options
+ * @returns A MUI Theme object
+ *
+ * @example
+ * ```typescript
+ * // Use defaults
+ * const theme = createAppTheme();
+ *
+ * // Override primary color
+ * const theme = createAppTheme({
+ *   paletteOverrides: { primary: { main: '#e91e63' } },
+ * });
+ * ```
+ */
+export declare function createAppTheme(options?: AppThemeOptions): Theme;
+
 export declare function createNavbar(config: NavbarConfig): () => JSX.Element;
 
+export declare const defaultComponents: ThemeOptions['components'];
+
+export declare const defaultNavbarGradient: {
+    start: string;
+    end: string;
+};
+
+export declare const defaultPalette: {
+    primary: {
+        main: string;
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+        900: string;
+    };
+    secondary: {
+        main: string;
+    };
+    success: {
+        main: string;
+    };
+    warning: {
+        main: string;
+    };
+    error: {
+        main: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+    };
+};
+
+export declare const defaultTypography: {
+    fontFamily: string;
+    h1: {
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    h2: {
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    h3: {
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    h4: {
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    h5: {
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    h6: {
+        fontWeight: number;
+        letterSpacing: string;
+    };
+};
+
 export declare class ErrorBoundary extends Component<Props, State> {
     constructor(props: Props);
     static getDerivedStateFromError(error: Error): Partial<State>;
@@ -214,6 +316,35 @@ export declare interface ResetPasswordViewProps {
     authRoute?: string;
 }
 
+export declare const SettingsView: default_2.FC<SettingsViewProps>;
+
+export declare interface SettingsViewAuthApi {
+    deleteAccount: (password: string, confirmText: string) => Promise<{
+        message: string;
+        note: string;
+    }>;
+}
+
+export declare interface SettingsViewProps {
+    /** The auth API instance (must have deleteAccount method) */
+    authApi: SettingsViewAuthApi;
+    /** The useAuth hook from your app */
+    useAuth: () => {
+        user: SettingsViewUser | null;
+        logout: () => void;
+    };
+    /** Route to navigate to after logout/delete. Default: '/' */
+    homeRoute?: string;
+    /** Optional additional content to render between profile and danger zone */
+    children?: default_2.ReactNode;
+}
+
+export declare interface SettingsViewUser {
+    first_name?: string;
+    last_name?: string;
+    email?: string;
+}
+
 declare interface State {
     hasError: boolean;
     error: Error | null;

package/dist/index.js

@@ -7,7 +7,7 @@ import React__default, { Component, useState, useEffect } from "react";
 import { Container, Box, Paper, Typography, Button, Dialog, DialogTitle, alpha as alpha$1, DialogContent, Alert, Divider, DialogActions, CircularProgress, AppBar, Toolbar, IconButton, Avatar, Menu, Chip, MenuItem, useTheme, Card, CardContent, Stack, TextField, InputAdornment, Link as Link$1 } from "@mui/material";
 import emStyled from "@emotion/styled";
 import "@emotion/react";
-import { CheckCircle, Error as Error$1, Warning, Info, Settings, ExitToApp, Person, Business, Email, VisibilityOff, Visibility, Lock, Security, ArrowBack, Send } from "@mui/icons-material";
+import { CheckCircle, Error as Error$1, Warning, Info, Settings, ExitToApp, Person, Business, Email, VisibilityOff, Visibility, Lock, Security, ArrowBack, Send, DeleteForever } from "@mui/icons-material";
 import { useNavigate, useLocation, Link, useSearchParams } from "react-router-dom";
 import { GoogleLogin } from "@react-oauth/google";
 function getDefaultExportFromCjs(x) {
@@ -6511,6 +6511,302 @@ const SupportView = () => {
     ] })
   ] });
 };
+const SettingsView = ({
+  authApi,
+  useAuth,
+  homeRoute = "/",
+  children
+}) => {
+  var _a;
+  const navigate = useNavigate();
+  const { user, logout } = useAuth();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteConfirmation, setDeleteConfirmation] = useState("");
+  const [deletePassword, setDeletePassword] = useState("");
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = 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__ */ jsxs(Container, { maxWidth: "md", sx: { py: 4 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", fontWeight: 700, gutterBottom: true, children: "Settings" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", paragraph: true, children: "Manage your account settings and preferences." }),
+    /* @__PURE__ */ jsxs(Paper, { sx: { p: 3, mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, gutterBottom: true, children: "Profile Information" }),
+      /* @__PURE__ */ jsx(Divider, { sx: { mb: 3 } }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(Person, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "h5", fontWeight: 600, children: [
+            user == null ? void 0 : user.first_name,
+            " ",
+            user == null ? void 0 : user.last_name
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: user == null ? void 0 : user.email })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Paper, { sx: { p: 3, mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, gutterBottom: true, children: "Account Actions" }),
+      /* @__PURE__ */ jsx(Divider, { sx: { mb: 3 } }),
+      /* @__PURE__ */ jsx(Stack, { spacing: 2, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { fontWeight: 500, children: "Sign Out" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Sign out of your account on this device." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            startIcon: /* @__PURE__ */ jsx(ExitToApp, {}),
+            onClick: handleLogout,
+            children: "Sign Out"
+          }
+        )
+      ] }) })
+    ] }),
+    children,
+    /* @__PURE__ */ jsxs(Paper, { sx: { p: 3, border: "1px solid", borderColor: "error.main" }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: 600, color: "error", gutterBottom: true, children: "Danger Zone" }),
+      /* @__PURE__ */ jsx(Divider, { sx: { mb: 3 } }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { fontWeight: 500, children: "Delete Account" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Permanently delete your account and all associated data." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            color: "error",
+            startIcon: /* @__PURE__ */ jsx(DeleteForever, {}),
+            onClick: () => setDeleteDialogOpen(true),
+            children: "Delete Account"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: deleteDialogOpen, onClose: () => setDeleteDialogOpen(false), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Delete Account" }),
+      /* @__PURE__ */ jsxs(DialogContent, { children: [
+        /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mb: 2 }, children: "This action cannot be undone. All your data will be permanently deleted." }),
+        /* @__PURE__ */ jsxs(Typography, { paragraph: true, children: [
+          "Enter your password and type ",
+          /* @__PURE__ */ jsx("strong", { children: "DELETE" }),
+          " to confirm:"
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            type: "password",
+            value: deletePassword,
+            onChange: (e) => setDeletePassword(e.target.value),
+            placeholder: "Enter your password",
+            sx: { mb: 2 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            value: deleteConfirmation,
+            onChange: (e) => setDeleteConfirmation(e.target.value),
+            placeholder: "Type DELETE to confirm"
+          }
+        ),
+        error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mt: 2 }, children: error })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { onClick: () => setDeleteDialogOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          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
+    }
+  });
+}
 export {
   AuthView,
   ConfirmationModal,
@@ -6518,8 +6814,14 @@ export {
   ErrorFallback,
   ForgotPasswordView,
   ResetPasswordView,
+  SettingsView,
   SupportView,
   VerifyEmailView,
-  createNavbar
+  createAppTheme,
+  createNavbar,
+  defaultComponents,
+  defaultNavbarGradient,
+  defaultPalette,
+  defaultTypography
 };
 //# sourceMappingURL=index.js.map