@etsoo/toolpad 1.0.0

package/build/src/utils/hooks/useSsr.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Returns true when serverside rendering, or when hydrating.
+ */
+export default function useSsr(): boolean;

package/build/src/utils/hooks/useSsr.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+function subscribe() {
+    return () => { };
+}
+function getSnapshot() {
+    return false;
+}
+function getServerSnapshot() {
+    return true;
+}
+/**
+ * Returns true when serverside rendering, or when hydrating.
+ */
+export default function useSsr() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/build/src/utils/hooks/useStorageState.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+type Initializer<T> = () => T;
+type UseStorageStateHookResult<T> = [
+    T,
+    React.Dispatch<React.SetStateAction<T>>
+];
+declare function useStorageStateServer(kind: "session" | "local", key: string, initializer: string | Initializer<string>): UseStorageStateHookResult<string>;
+declare function useStorageStateServer(kind: "session" | "local", key: string, initializer?: string | null | Initializer<string | null>): UseStorageStateHookResult<string | null>;
+declare const _default: typeof useStorageStateServer;
+export default _default;

package/build/src/utils/hooks/useStorageState.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Emitter } from "../events";
+// storage events only work across windows, we'll use an event emitter to announce within the window
+const emitter = new Emitter();
+function subscribe(area, key, cb) {
+    const storageHandler = (event) => {
+        if (event.storageArea === area && event.key === key) {
+            cb();
+        }
+    };
+    window.addEventListener("storage", storageHandler);
+    emitter.on(key, cb);
+    return () => {
+        window.removeEventListener("storage", storageHandler);
+        emitter.off(key, cb);
+    };
+}
+function getSnapshot(area, key) {
+    return area.getItem(key);
+}
+function setValue(area, key, value) {
+    if (typeof window !== "undefined") {
+        if (value === null) {
+            area.removeItem(key);
+        }
+        else {
+            area.setItem(key, String(value));
+        }
+        emitter.emit(key, null);
+    }
+}
+function useStorageStateServer(kind, key, initializer = null) {
+    const [initialValue] = React.useState(initializer);
+    return [initialValue, () => { }];
+}
+function useStorageStateBrowser(kind, key, initializer = null) {
+    const [initialValue] = React.useState(initializer);
+    const area = kind === "session" ? window.sessionStorage : window.localStorage;
+    const subscribeKey = React.useCallback((cb) => subscribe(area, key, cb), [area, key]);
+    const getKeySnapshot = React.useCallback(() => getSnapshot(area, key) ?? initialValue, [area, initialValue, key]);
+    const getKeyServerSnapshot = React.useCallback(() => initialValue, [initialValue]);
+    const storedValue = React.useSyncExternalStore(subscribeKey, getKeySnapshot, getKeyServerSnapshot);
+    const setStoredValue = React.useCallback((value) => {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setValue(area, key, valueToStore);
+    }, [area, key, storedValue]);
+    return [storedValue, setStoredValue];
+}
+export default typeof window === "undefined"
+    ? useStorageStateServer
+    : useStorageStateBrowser;

package/build/src/utils/warnOnce.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Warns only once for a specific message.
+ * @param msg The message to warn.
+ */
+export default function warnOnce(msg: string): void;

package/build/src/utils/warnOnce.js

@@ -0,0 +1,11 @@
+const history = new Set();
+/**
+ * Warns only once for a specific message.
+ * @param msg The message to warn.
+ */
+export default function warnOnce(msg) {
+    if (!history.has(msg)) {
+        history.add(msg);
+        console.warn(msg);
+    }
+}

package/build/vitest.setup.d.ts

@@ -0,0 +1 @@
+export {};

package/build/vitest.setup.js

@@ -0,0 +1,19 @@
+import { afterEach, vi } from "vitest";
+import { cleanup } from "@testing-library/react";
+afterEach(cleanup);
+// Mocks
+if (typeof window !== "undefined" && !window.matchMedia) {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: vi.fn().mockImplementation((query) => ({
+            matches: false,
+            media: query,
+            addListener: vi.fn(), // deprecated
+            removeListener: vi.fn(), // deprecated
+            onchange: null,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn()
+        }))
+    });
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@etsoo/toolpad",
+  "version": "1.0.0",
+  "author": "ETSOO",
+  "description": "Dashboard framework extention based on Toolpad Core",
+  "main": "build/index.js",
+  "type": "module",
+  "types": "build/index.d.ts",
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "mui",
+    "toolpad",
+    "dashboard",
+    "Etsoo"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ETSOO/toolpad.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ETSOO/toolpad/issues"
+  },
+  "homepage": "https://github.com/ETSOO/toolpad#readme",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest",
+    "testb": "vitest --browser.enabled"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.25.7",
+    "@emotion/css": "^11.13.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/lab": "6.0.0-beta.12",
+    "@mui/utils": "6.1.4",
+    "@vitejs/plugin-react": "4.3.3",
+    "invariant": "2.2.4",
+    "path-to-regexp": "6.3.0",
+    "prop-types": "15.8.1",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@mui/icons-material": "6.1.4",
+    "@mui/material": "6.1.4",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
+    "@types/invariant": "2.2.37",
+    "@types/prop-types": "15.7.13",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.1",
+    "@vitest/browser": "2.1.2",
+    "next": "^14.2.15",
+    "next-router-mock": "^0.9.13",
+    "playwright": "^1.47.2",
+    "react-router-dom": "6.26.2",
+    "vitest": "2.1.2"
+  }
+}

package/src/Account/Account.test.tsx

@@ -0,0 +1,56 @@
+import { describe, test, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Account } from "./Account";
+import describeConformance from "../utils/describeConformance";
+import { AppProvider } from "../AppProvider/AppProviderComponent";
+
+describe("AppProvider", () => {
+  describeConformance(<Account />, () => ({
+    skip: ["themeDefaultProps"]
+  }));
+
+  test("renders nothing in button when no authentication", async () => {
+    render(<Account />);
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("renders log in button when no session", async () => {
+    const auth = { signIn: vi.fn(), signOut: vi.fn() };
+    render(
+      <AppProvider authentication={auth}>
+        <Account />
+      </AppProvider>
+    );
+
+    const loginButton = screen.getByRole("button", { name: "Sign In" });
+
+    await userEvent.click(loginButton);
+
+    expect(auth.signIn).toHaveBeenCalled();
+  });
+
+  test("renders content correctly when there is a session", async () => {
+    const auth = { signIn: vi.fn(), signOut: vi.fn() };
+    const session = { user: { name: "John Doe", email: "john@example.com" } };
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <Account />
+      </AppProvider>
+    );
+
+    const userButton = screen.getByRole("button", { name: "Current User" });
+
+    await userEvent.click(userButton);
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("john@example.com")).toBeInTheDocument();
+
+    const signOutButton = screen.getByRole("button", { name: "Sign Out" });
+
+    await userEvent.click(signOutButton);
+
+    expect(auth.signOut).toHaveBeenCalled();
+  });
+});

package/src/Account/Account.tsx

@@ -0,0 +1,226 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import Button from "@mui/material/Button";
+import Popover from "@mui/material/Popover";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import { SignInButton } from "./SignInButton";
+import { SignOutButton } from "./SignOutButton";
+import { AccountPreview, AccountPreviewProps } from "./AccountPreview";
+import { AccountPopoverHeader } from "./AccountPopoverHeader";
+import { AccountPopoverFooter } from "./AccountPopoverFooter";
+import {
+  SessionContext,
+  AuthenticationContext
+} from "../AppProvider/AppProvider";
+import { LocaleProvider, useLocaleText } from "../shared/locales/LocaleContext";
+
+export interface AccountSlots {
+  /**
+   * The component used for the account preview
+   * @default AccountPreview
+   */
+  preview?: React.ElementType;
+  /**
+   * The component used for the account popover menu
+   * @default Popover
+   */
+  popover?: React.ElementType;
+  /**
+   * The component used for the content of account popover
+   * @default Stack
+   */
+  popoverContent?: React.ElementType;
+  /**
+   * The component used for the sign in button.
+   * @default Button
+   */
+  signInButton?: React.ElementType;
+  /**
+   * The component used for the sign out button.
+   * @default Button
+   */
+  signOutButton?: React.ElementType;
+}
+
+export interface AccountProps {
+  /**
+   * The components used for each slot inside.
+   */
+  slots?: AccountSlots;
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps?: {
+    preview?: AccountPreviewProps;
+    popover?: React.ComponentProps<typeof Popover>;
+    popoverContent?: React.ComponentProps<typeof Stack>;
+    signInButton?: React.ComponentProps<typeof SignInButton>;
+    signOutButton?: React.ComponentProps<typeof Button>;
+  };
+  /**
+   * The labels for the account component.
+   */
+  localeText?: Partial<ReturnType<typeof useLocaleText>>;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/)
+ *
+ * API:
+ *
+ * - [Account API](https://mui.com/toolpad/core/api/account)
+ */
+function Account(props: AccountProps) {
+  const { localeText } = props;
+  const { slots, slotProps } = props;
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+  const session = React.useContext(SessionContext);
+  const authentication = React.useContext(AuthenticationContext);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  if (!authentication) {
+    return null;
+  }
+
+  if (!session?.user) {
+    return (
+      <LocaleProvider localeText={localeText}>
+        {slots?.signInButton ? (
+          <slots.signInButton onClick={authentication.signIn} />
+        ) : (
+          <SignInButton {...slotProps?.signInButton} />
+        )}
+      </LocaleProvider>
+    );
+  }
+
+  return (
+    <LocaleProvider localeText={localeText}>
+      {slots?.preview ? (
+        <slots.preview handleClick={handleClick} open={open} />
+      ) : (
+        <AccountPreview
+          variant="condensed"
+          handleClick={handleClick}
+          open={open}
+          {...slotProps?.preview}
+        />
+      )}
+      {slots?.popover ? (
+        <slots.popover {...slotProps?.popover} />
+      ) : (
+        <Popover
+          anchorEl={anchorEl}
+          id="account-menu"
+          open={open}
+          onClose={handleClose}
+          onClick={handleClose}
+          transformOrigin={{ horizontal: "right", vertical: "top" }}
+          anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+          {...slotProps?.popover}
+          slotProps={{
+            paper: {
+              elevation: 0,
+              sx: {
+                overflow: "visible",
+                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                mt: 1,
+                "&::before": {
+                  content: '""',
+                  display: "block",
+                  position: "absolute",
+                  top: 0,
+                  right: 14,
+                  width: 10,
+                  height: 10,
+                  bgcolor: "background.paper",
+                  transform: "translateY(-50%) rotate(45deg)",
+                  zIndex: 0
+                }
+              }
+            },
+            ...slotProps?.popover?.slotProps
+          }}
+        >
+          {slots?.popoverContent ? (
+            <slots.popoverContent {...slotProps?.popoverContent} />
+          ) : (
+            <Stack direction="column" {...slotProps?.popoverContent}>
+              <AccountPopoverHeader>
+                <AccountPreview variant="expanded" />
+              </AccountPopoverHeader>
+              <Divider />
+              <AccountPopoverFooter>
+                <SignOutButton {...slotProps?.signOutButton} />
+              </AccountPopoverFooter>
+            </Stack>
+          )}
+        </Popover>
+      )}
+    </LocaleProvider>
+  );
+}
+
+Account.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The labels for the account component.
+   */
+  localeText: PropTypes.shape({
+    iconButtonAriaLabel: PropTypes.string,
+    signInLabel: PropTypes.string,
+    signOutLabel: PropTypes.string
+  }),
+  /**
+   * The props used for each slot inside.
+   */
+  slotProps: PropTypes.shape({
+    popover: PropTypes.object,
+    popoverContent: PropTypes.object,
+    preview: PropTypes.shape({
+      handleClick: PropTypes.func,
+      open: PropTypes.bool,
+      slotProps: PropTypes.shape({
+        avatar: PropTypes.object,
+        avatarIconButton: PropTypes.object,
+        moreIconButton: PropTypes.object
+      }),
+      slots: PropTypes.shape({
+        avatar: PropTypes.elementType,
+        avatarIconButton: PropTypes.elementType,
+        moreIconButton: PropTypes.elementType
+      }),
+      variant: PropTypes.oneOf(["condensed", "expanded"])
+    }),
+    signInButton: PropTypes.object,
+    signOutButton: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside.
+   */
+  slots: PropTypes.shape({
+    popover: PropTypes.elementType,
+    popoverContent: PropTypes.elementType,
+    preview: PropTypes.elementType,
+    signInButton: PropTypes.elementType,
+    signOutButton: PropTypes.elementType
+  })
+} as any;
+
+export { Account };

package/src/Account/AccountPopoverFooter.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Box, { BoxProps } from "@mui/material/Box";
+
+export interface AccountPopoverFooterProps extends BoxProps {
+  children?: React.ReactNode;
+}
+
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPopoverFooter API](https://mui.com/toolpad/core/api/account-popover-footer)
+ */ function AccountPopoverFooter(props: AccountPopoverFooterProps) {
+  const { children, ...rest } = props;
+  return (
+    <Box
+      {...rest}
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        p: 1,
+        justifyContent: "flex-end",
+        ...rest.sx
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

package/src/Account/AccountPopoverHeader.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Stack, { StackProps } from "@mui/material/Stack";
+
+export interface AccountPopoverHeaderProps extends StackProps {
+  children?: React.ReactNode;
+}
+
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPopoverHeader API](https://mui.com/toolpad/core/api/account-popover-header)
+ */ function AccountPopoverHeader(props: AccountPopoverHeaderProps) {
+  const { children, ...rest } = props;
+  return <Stack {...rest}>{children}</Stack>;
+}

package/src/Account/AccountPreview.test.tsx

@@ -0,0 +1,79 @@
+import { describe, test, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AccountPreview } from "./AccountPreview";
+import { AppProvider } from "../AppProvider/AppProviderComponent";
+
+describe("AccountPreview", () => {
+  const auth = { signIn: vi.fn(), signOut: vi.fn() };
+  const session = {
+    user: {
+      name: "John Doe",
+      email: "john@example.com",
+      image: "https://example.com/avatar.jpg"
+    }
+  };
+
+  test("renders nothing when no session is provided", () => {
+    render(
+      <AppProvider authentication={auth}>
+        <AccountPreview />
+      </AppProvider>
+    );
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("displays condensed variant by default", () => {
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview />
+      </AppProvider>
+    );
+
+    const avatar = screen.getByRole("img", { name: "John Doe" });
+    expect(avatar).toBeInTheDocument();
+    expect(screen.queryByText("John Doe")).not.toBeInTheDocument();
+    expect(avatar).toHaveAttribute("src", "https://example.com/avatar.jpg");
+  });
+
+  test("displays user name, email, and avatar in expanded variant", () => {
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview variant="expanded" />
+      </AppProvider>
+    );
+
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("john@example.com")).toBeInTheDocument();
+    expect(screen.getByRole("img", { name: "John Doe" })).toBeInTheDocument();
+  });
+
+  test("calls handleClick when more icon button is clicked in expanded variant", async () => {
+    const handleClick = vi.fn();
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview variant="expanded" handleClick={handleClick} />
+      </AppProvider>
+    );
+
+    const moreButton = screen.getByRole("button");
+    await userEvent.click(moreButton);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  test("calls handleClick when avatar is clicked in condensed variant", async () => {
+    const handleClick = vi.fn();
+    render(
+      <AppProvider authentication={auth} session={session}>
+        <AccountPreview handleClick={handleClick} />
+      </AppProvider>
+    );
+
+    const avatarButton = screen.getByRole("button", { name: "Current User" });
+    await userEvent.click(avatarButton);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+});