move @src/atoms/* to standardize imports

src/App.tsx

@@ -10,8 +10,7 @@ import NotFound from "@src/pages/NotFound";
 import RequireAuth from "@src/layouts/RequireAuth";
 import Navigation from "@src/layouts/Navigation";
 
-import { globalScope } from "@src/atoms/globalScope";
-import { currentUserAtom } from "@src/atoms/auth";
+import { globalScope, currentUserAtom } from "@src/atoms/globalScope";
 import { ROUTES } from "@src/constants/routes";
 
 import JotaiTestPage from "@src/pages/JotaiTest";

src/analytics.ts

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
+import { getAnalytics, logEvent } from "firebase/analytics";
 
 const firebaseConfig = {
   apiKey: "AIzaSyArABiYGK7dZgwSk0pw_6vKbOt6U1ZRPpc",
@@ -13,3 +13,4 @@ const firebaseConfig = {
 
 const rowyServiceApp = initializeApp(firebaseConfig, "rowy-service");
 export const analytics = getAnalytics(rowyServiceApp);
+export { logEvent };

src/atoms/globalScope/project.ts

@@ -1,9 +1,9 @@
-import { atom, PrimitiveAtom } from "jotai";
+import { atom } from "jotai";
 import { sortBy } from "lodash-es";
 import { ThemeOptions } from "@mui/material";
 
 import { userRolesAtom } from "./auth";
-import { UpdateDocFunction, UpdateCollectionFunction } from "./types";
+import { UpdateDocFunction, UpdateCollectionFunction } from "@src/atoms/types";
 import { UserSettings } from "./user";
 
 export const projectIdAtom = atom<string>("");

src/atoms/globalScope/ui.ts

@@ -0,0 +1,126 @@
+import { atom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+import { DialogProps, ButtonProps } from "@mui/material";
+import { TableSettings } from "./project";
+
+/** Nav open state stored in local storage. */
+export const navOpenAtom = atomWithStorage("__ROWY__NAV_OPEN", false);
+/** Nav pinned state stored in local storage. */
+export const navPinnedAtom = atomWithStorage("__ROWY__NAV_PINNED", false);
+
+/** View for tables page */
+export const tablesViewAtom = atomWithStorage<"grid" | "list">(
+  "__ROWY__HOME_VIEW",
+  "grid"
+);
+
+export type ConfirmDialogProps = {
+  open: boolean;
+
+  title?: string;
+  /** Pass a string to display basic styled text */
+  body?: React.ReactNode;
+
+  /** Callback called when user clicks confirm */
+  handleConfirm?: () => void;
+  /** Optionally override confirm button text */
+  confirm?: string | JSX.Element;
+  /** Optionally require user to type this string to enable the confirm button */
+  confirmationCommand?: string;
+  /** Optionally set confirm button color */
+  confirmColor?: ButtonProps["color"];
+
+  /** Callback called when user clicks cancel */
+  handleCancel?: () => void;
+  /** Optionally override cancel button text */
+  cancel?: string;
+  /** Optionally hide cancel button */
+  hideCancel?: boolean;
+
+  /** Optionally set dialog max width */
+  maxWidth?: DialogProps["maxWidth"];
+};
+/**
+ * Open a confirm dialog
+ *
+ * @example Basic usage:
+ * ```
+ * const confirm = useSetAtom(confirmDialogAtom, globalScope);
+ * confirm({ handleConfirm: () => ... });
+ * ```
+ */
+export const confirmDialogAtom = atom(
+  { open: false } as ConfirmDialogProps,
+  (get, set, update: Partial<ConfirmDialogProps>) => {
+    set(confirmDialogAtom, {
+      ...get(confirmDialogAtom),
+      open: true, // Don’t require this to be set explicitly
+      ...update,
+    });
+  }
+);
+
+export type RowyRunModalState = {
+  open: boolean;
+  feature: string;
+  version: string;
+};
+/**
+ * Open global Rowy Run modal if feature not available.
+ * Calling the set function resets props.
+ *
+ * @example Basic usage:
+ * ```
+ * const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope);
+ * openRowyRunModal({ feature: ... , version: ... });
+ * ```
+ *
+ * @example Close dialog:
+ * ```
+ * openRowyRunModal({ open: false })
+ * ```
+ */
+export const rowyRunModalAtom = atom(
+  { open: false, feature: "", version: "" } as RowyRunModalState,
+  (_, set, update?: Partial<RowyRunModalState>) => {
+    set(rowyRunModalAtom, {
+      open: true,
+      feature: "",
+      version: "",
+      ...update,
+    });
+  }
+);
+
+export type TableSettingsDialogState = {
+  open: boolean;
+  mode: "create" | "update";
+  data: TableSettings | null;
+};
+/**
+ * Open table settings dialog.
+ * Calling the set function resets props.
+ *
+ * @example Basic usage:
+ * ```
+ * const openTableSettingsDialog = useSetAtom(tableSettingsDialogAtom, globalScope);
+ * openTableSettingsDialog({ data: ... });
+ * ```
+ *
+ * @example Clear dialog:
+ * ```
+ * openTableSettingsDialog({ open: false })
+ * ```
+ */
+export const tableSettingsDialogAtom = atom(
+  { open: false, mode: "create", data: null } as TableSettingsDialogState,
+  (_, set, update?: Partial<TableSettingsDialogState>) => {
+    set(tableSettingsDialogAtom, {
+      open: true,
+      mode: "create",
+      data: null,
+      ...update,
+    });
+  }
+);

src/atoms/globalScope/user.ts

@@ -5,8 +5,8 @@ import { ThemeOptions } from "@mui/material";
 
 import themes from "@src/theme";
 import { publicSettingsAtom } from "./project";
-import { TableFilter } from "./table";
-import { UpdateDocFunction } from "./types";
+import { TableFilter } from "@src/atoms/tableScope/table";
+import { UpdateDocFunction } from "@src/atoms/types";
 
 /** User info and settings */
 export type UserSettings = Partial<{

src/atoms/tableScope/index.ts

@@ -0,0 +1,4 @@
+/** Scope for atoms stored at the table level */
+export const tableScope = Symbol("tableScope");
+
+export * from "./table";

src/atoms/ui.ts

@@ -1,77 +0,0 @@
-import { atom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
-
-import { DialogProps, ButtonProps } from "@mui/material";
-
-/** Nav open state stored in local storage. */
-export const navOpenAtom = atomWithStorage("__ROWY__NAV_OPEN", false);
-/** Nav pinned state stored in local storage. */
-export const navPinnedAtom = atomWithStorage("__ROWY__NAV_PINNED", false);
-
-export type ConfirmDialogProps = {
-  open: boolean;
-
-  title?: string;
-  /** Pass a string to display basic styled text */
-  body?: React.ReactNode;
-
-  /** Callback called when user clicks confirm */
-  handleConfirm?: () => void;
-  /** Optionally override confirm button text */
-  confirm?: string | JSX.Element;
-  /** Optionally require user to type this string to enable the confirm button */
-  confirmationCommand?: string;
-  /** Optionally set confirm button color */
-  confirmColor?: ButtonProps["color"];
-
-  /** Callback called when user clicks cancel */
-  handleCancel?: () => void;
-  /** Optionally override cancel button text */
-  cancel?: string;
-  /** Optionally hide cancel button */
-  hideCancel?: boolean;
-
-  /** Optionally set dialog max width */
-  maxWidth?: DialogProps["maxWidth"];
-};
-/**
- * Open a confirm dialog
- *
- * @example Basic usage:
- * ```
- * const confirm = useSetAtom(confirmDialogAtom, globalScope);
- * confirm({
- *   open: true,
- *   handleConfirm: () => ...
- * });
- * ```
- */
-export const confirmDialogAtom = atom<ConfirmDialogProps>({ open: false });
-
-/**
- * Open global Rowy Run modal if feature not available
- * {@link openRowyRunModalAtom | Use `openRowyRunModalAtom` to open}
- */
-export const rowyRunModalAtom = atom({ open: false, feature: "", version: "" });
-/**
- * Helper atom to open Rowy Run Modal
- *
- * @example Basic usage:
- * ```
- * const openRowyRun = useSetAtom(openRowyRunModalAtom, globalScope);
- * openRowyRun({
- *   feature: ...
- *   version: ...
- * });
- * ```
- */
-export const openRowyRunModalAtom = atom(
-  null,
-  (_, set, update?: Partial<Record<"feature" | "version", string>>) => {
-    set(rowyRunModalAtom, {
-      open: true,
-      feature: update?.feature || "",
-      version: update?.version || "",
-    });
-  }
-);

src/components/FirebaseUi.tsx

@@ -9,9 +9,8 @@ import { makeStyles } from "tss-react/mui";
 import { Typography } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 
-import { globalScope } from "@src/atoms/globalScope";
+import { globalScope, publicSettingsAtom } from "@src/atoms/globalScope";
 import { firebaseAuthAtom } from "@src/sources/ProjectSourceFirebase";
-import { publicSettingsAtom } from "@src/atoms/project";
 import { defaultUiConfig, getSignInOptions } from "@src/config/firebaseui";
 
 const ELEMENT_ID = "firebaseui_container";

src/components/RowyRunModal.tsx

@@ -34,7 +34,7 @@ export default function RowyRunModal() {
     globalScope
   );
 
-  const handleClose = () => setRowyRunModal((s) => ({ ...s, open: false }));
+  const handleClose = () => setRowyRunModal({ ...rowyRunModal, open: false });
 
   const showUpdateModal = rowyRunModal.version && projectSettings?.rowyRunUrl;
 

src/components/Settings/UserManagement/InviteUser.tsx

@@ -20,16 +20,16 @@ import {
   rolesAtom,
   projectSettingsAtom,
   rowyRunAtom,
-  openRowyRunModalAtom,
+  rowyRunModalAtom,
 } from "@src/atoms/globalScope";
-import routes from "@src/constants/routes";
+import { ROUTES } from "@src/constants/routes";
 import { runRoutes } from "@src/constants/runRoutes";
 
 export default function InviteUser() {
   const [projectRoles] = useAtom(rolesAtom, globalScope);
   const [projectSettings] = useAtom(projectSettingsAtom, globalScope);
   const [rowyRun] = useAtom(rowyRunAtom, globalScope);
-  const openRowyRunModal = useSetAtom(openRowyRunModalAtom, globalScope);
+  const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope);
   const { enqueueSnackbar } = useSnackbar();
 
   const [open, setOpen] = useState(false);
@@ -86,7 +86,7 @@ export default function InviteUser() {
                 They can sign up with any of the sign-in options{" "}
                 <MuiLink
                   component={Link}
-                  to={routes.projectSettings + "#authentication"}
+                  to={ROUTES.projectSettings + "#authentication"}
                 >
                   you have enabled
                 </MuiLink>

src/components/Settings/UserManagement/UserItem.tsx

@@ -21,7 +21,7 @@ import {
   rolesAtom,
   projectSettingsAtom,
   rowyRunAtom,
-  openRowyRunModalAtom,
+  rowyRunModalAtom,
   UserSettings,
   updateUserAtom,
   confirmDialogAtom,
@@ -36,7 +36,7 @@ export default function UserItem({
 }: UserSettings) {
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const confirm = useSetAtom(confirmDialogAtom, globalScope);
-  const openRowyRunModal = useSetAtom(openRowyRunModalAtom, globalScope);
+  const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope);
 
   const [projectRoles] = useAtom(rolesAtom, globalScope);
   const [projectSettings] = useAtom(projectSettingsAtom, globalScope);

src/components/Settings/UserSettings/Account.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 import { Grid, Avatar, Typography, Button } from "@mui/material";
 
-import ROUTES from "@src/constants/routes";
+import { ROUTES } from "@src/constants/routes";
 
 export default function Account({ settings }: IUserSettingsChildProps) {
   return (

src/components/Setup/SetupLayout.tsx

@@ -1,7 +1,6 @@
 import React, { useState, createElement } from "react";
 import { use100vh } from "react-div-100vh";
 import { SwitchTransition } from "react-transition-group";
-import { logEvent } from "firebase/analytics";
 import type { ISetupStep } from "./SetupStep";
 
 import {
@@ -26,7 +25,7 @@ import Logo from "@src/assets/Logo";
 import ScrollableDialogContent from "@src/components/Modal/ScrollableDialogContent";
 import { SlideTransition } from "@src/components/Modal/SlideTransition";
 
-import { analytics } from "@src/analytics";
+import { analytics, logEvent } from "@src/analytics";
 
 const BASE_WIDTH = 1024;
 

src/components/Setup/Steps/StepFinish.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { useAtom } from "jotai";
 import { useSnackbar } from "notistack";
 import { Link } from "react-router-dom";
-import { logEvent } from "firebase/analytics";
 import { doc, updateDoc } from "firebase/firestore";
 import type { ISetupStep } from "@src/components/Setup/SetupStep";
 
@@ -19,7 +18,7 @@ import ThumbUpOffIcon from "@mui/icons-material/ThumbUpOffAlt";
 import ThumbDownIcon from "@mui/icons-material/ThumbDownAlt";
 import ThumbDownOffIcon from "@mui/icons-material/ThumbDownOffAlt";
 
-import { analytics } from "@src/analytics";
+import { analytics, logEvent } from "@src/analytics";
 import { globalScope } from "@src/atoms/globalScope";
 import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
 import { ROUTES } from "@src/constants/routes";

src/components/Setup/Steps/StepRules.tsx

@@ -19,8 +19,7 @@ import DoneIcon from "@mui/icons-material/Done";
 
 import SetupItem from "@src/components/Setup/SetupItem";
 
-import { globalScope } from "@src/atoms/globalScope";
-import { projectIdAtom } from "@src/atoms/project";
+import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
 import { CONFIG } from "@src/config/dbPaths";
 import {
   RULES_START,

src/components/Setup/Steps/StepStorageRules.tsx

@@ -12,8 +12,7 @@ import DoneIcon from "@mui/icons-material/Done";
 
 import SetupItem from "@src/components/Setup/SetupItem";
 
-import { globalScope } from "@src/atoms/globalScope";
-import { projectIdAtom } from "@src/atoms/project";
+import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
 import {
   RULES_START,
   RULES_END,

src/components/Setup/Steps/StepWelcome.tsx

@@ -13,8 +13,7 @@ import {
 } from "@mui/material";
 
 import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
-import { globalScope } from "@src/atoms/globalScope";
-import { projectIdAtom } from "@src/atoms/project";
+import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
 
 export default {
   id: "welcome",

src/constants/routes.tsx

@@ -25,7 +25,6 @@ export enum ROUTES {
   userManagement = "/settings/userManagement",
   rowyRunTest = "/rrTest",
 }
-export default ROUTES;
 
 export const ROUTE_TITLES = {
   [ROUTES.home]: {

src/layouts/AuthLayout.tsx

@@ -13,8 +13,7 @@ import BrandedBackground, { Wrapper } from "@src/assets/BrandedBackground";
 import Logo from "@src/assets/Logo";
 
 import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
-import { globalScope } from "@src/atoms/globalScope";
-import { projectIdAtom } from "@src/atoms/project";
+import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
 
 export interface IAuthLayoutProps {
   hideLogo?: boolean;

src/layouts/Navigation/UserMenu.tsx

@@ -26,7 +26,7 @@ import {
   themeAtom,
   themeOverriddenAtom,
 } from "@src/atoms/globalScope";
-import ROUTES from "@src/constants/routes";
+import { ROUTES } from "@src/constants/routes";
 
 export default function UserMenu(props: IconButtonProps) {
   const anchorEl = useRef<HTMLButtonElement>(null);

src/layouts/RequireAuth.tsx

@@ -3,8 +3,7 @@ import { useLocation, Navigate } from "react-router-dom";
 
 import Loading from "@src/components/Loading";
 
-import { globalScope } from "@src/atoms/globalScope";
-import { currentUserAtom } from "@src/atoms/auth";
+import { globalScope, currentUserAtom } from "@src/atoms/globalScope";
 import { ROUTES } from "@src/constants/routes";
 
 export interface IRequireAuthProps {

src/test/testUtils.tsx

@@ -13,7 +13,7 @@ import {
   envConfig,
   firebaseAuthAtom,
 } from "@src/sources/ProjectSourceFirebase";
-import { currentUserAtom } from "@src/atoms/auth";
+import { currentUserAtom } from "@src/atoms/globalScope";
 
 /**
  * Render with Jotai `globalScope` providers

src/theme/RowyThemeProvider.tsx

@@ -5,12 +5,12 @@ import { Helmet } from "react-helmet-async";
 import { useMediaQuery, ThemeProvider, CssBaseline } from "@mui/material";
 import Favicon from "@src/assets/Favicon";
 
-import { globalScope } from "@src/atoms/globalScope";
 import {
+  globalScope,
   themeAtom,
   themeOverriddenAtom,
   customizedThemesAtom,
-} from "@src/atoms/user";
+} from "@src/atoms/globalScope";
 
 /**
  * Injects the MUI theme with customizations from project and user settings.