@etsoo/toolpad 1.0.0

package/build/src/AppProvider/AppProvider.d.ts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { Theme } from "@mui/material/styles";
+export interface NavigateOptions {
+    history?: "auto" | "push" | "replace";
+}
+export interface Navigate {
+    (url: string | URL, options?: NavigateOptions): void;
+}
+/**
+ * Abstract router used by Toolpad components.
+ */
+export interface Router {
+    pathname: string;
+    searchParams: URLSearchParams;
+    navigate: Navigate;
+}
+export interface Branding {
+    title?: string;
+    logo?: React.ReactNode;
+}
+export interface NavigationPageItem {
+    kind?: "page";
+    segment?: string;
+    title?: string;
+    icon?: React.ReactNode;
+    pattern?: string;
+    action?: React.ReactNode;
+    children?: Navigation;
+}
+export interface NavigationSubheaderItem {
+    kind: "header";
+    title: string;
+}
+export interface NavigationDividerItem {
+    kind: "divider";
+}
+export type NavigationItem = NavigationPageItem | NavigationSubheaderItem | NavigationDividerItem;
+export type Navigation = NavigationItem[];
+export interface Session {
+    user?: {
+        id?: string | null;
+        name?: string | null;
+        image?: string | null;
+        email?: string | null;
+    };
+}
+export interface Authentication {
+    signIn: () => void;
+    signOut: () => void;
+}
+export declare const AuthenticationContext: React.Context<Authentication | null>;
+export declare const SessionContext: React.Context<Session | null>;
+export type AppTheme = Theme | {
+    light: Theme;
+    dark: Theme;
+};
+export interface AppProviderProps {
+    /**
+     * The content of the app provider.
+     */
+    children: React.ReactNode;
+    /**
+     * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/customization/css-theme-variables/overview/) is recommended.
+     * @default createTheme()
+     */
+    theme?: AppTheme;
+    /**
+     * Branding options for the app.
+     * @default null
+     */
+    branding?: Branding | null;
+    /**
+     * Navigation definition for the app.
+     * @default []
+     */
+    navigation?: Navigation;
+    /**
+     * Router implementation used inside Toolpad components.
+     * @default null
+     */
+    router?: Router;
+    /**
+     * Session info about the current user.
+     * @default null
+     */
+    session?: Session | null;
+    /**
+     * Authentication methods.
+     * @default null
+     */
+    authentication?: Authentication | null;
+    /**
+     * The window where the application is rendered.
+     * This is needed when rendering the app inside an iframe, for example.
+     * @default window
+     */
+    window?: Window;
+}

package/build/src/AppProvider/AppProvider.js

@@ -0,0 +1,4 @@
+"use client";
+import * as React from "react";
+export const AuthenticationContext = React.createContext(null);
+export const SessionContext = React.createContext(null);

package/build/src/AppProvider/AppProvider.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @vitest-environment jsdom
+ */
+export {};

package/build/src/AppProvider/AppProvider.test.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, test, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { createTheme } from "@mui/material/styles";
+import { AppProvider } from "./AppProviderComponent";
+describe("AppProvider", () => {
+    test("renders content correctly", async () => {
+        render(_jsx(AppProvider, { children: "Hello world" }));
+        expect(screen.getByText("Hello world")).toBeTruthy();
+    });
+    test("renders content correctly when using legacy theme", async () => {
+        const legacyTheme = createTheme();
+        render(_jsx(AppProvider, { theme: legacyTheme, children: "Hello world" }));
+        expect(screen.getByText("Hello world")).toBeTruthy();
+    });
+});

package/build/src/AppProvider/AppProviderComponent.d.ts

@@ -0,0 +1,17 @@
+import { AppProviderProps } from "./AppProvider";
+/**
+ *
+ * Demos:
+ *
+ * - [App Provider](https://mui.com/toolpad/core/react-app-provider/)
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ *
+ * API:
+ *
+ * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider)
+ */
+declare function AppProvider(props: AppProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace AppProvider {
+    var propTypes: any;
+}
+export { AppProvider };

package/build/src/AppProvider/AppProviderComponent.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { BrandingContext, NavigationContext, RouterContext, WindowContext } from "../shared/context";
+import { AppThemeProvider } from "./AppThemeProvider";
+import { createTheme as createMuiTheme } from "@mui/material/styles";
+import { AuthenticationContext, SessionContext } from "./AppProvider";
+function createTheme() {
+    return createMuiTheme({
+        cssVariables: {
+            colorSchemeSelector: "data-toolpad-color-scheme"
+        },
+        colorSchemes: { dark: true }
+    });
+}
+/**
+ *
+ * Demos:
+ *
+ * - [App Provider](https://mui.com/toolpad/core/react-app-provider/)
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ *
+ * API:
+ *
+ * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider)
+ */
+function AppProvider(props) {
+    const { children, theme = createTheme(), branding = null, navigation = [], router = null, authentication = null, session = null, window: appWindow } = props;
+    return (_jsx(WindowContext.Provider, { value: appWindow, children: _jsx(AuthenticationContext.Provider, { value: authentication, children: _jsx(SessionContext.Provider, { value: session, children: _jsx(RouterContext.Provider, { value: router, children: _jsx(AppThemeProvider, { theme: theme, window: appWindow, children: _jsx(BrandingContext.Provider, { value: branding, children: _jsx(NavigationContext.Provider, { value: navigation, children: children }) }) }) }) }) }) }));
+}
+AppProvider.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * Authentication methods.
+     * @default null
+     */
+    authentication: PropTypes.shape({
+        signIn: PropTypes.func.isRequired,
+        signOut: PropTypes.func.isRequired
+    }),
+    /**
+     * Branding options for the app.
+     * @default null
+     */
+    branding: PropTypes.shape({
+        logo: PropTypes.node,
+        title: PropTypes.string
+    }),
+    /**
+     * The content of the app provider.
+     */
+    children: PropTypes.node,
+    /**
+     * Navigation definition for the app.
+     * @default []
+     */
+    navigation: PropTypes.arrayOf(PropTypes.oneOfType([
+        PropTypes.shape({
+            action: PropTypes.node,
+            children: PropTypes.arrayOf(PropTypes.oneOfType([
+                PropTypes.object,
+                PropTypes.shape({
+                    kind: PropTypes.oneOf(["header"]).isRequired,
+                    title: PropTypes.string.isRequired
+                }),
+                PropTypes.shape({
+                    kind: PropTypes.oneOf(["divider"]).isRequired
+                })
+            ]).isRequired),
+            icon: PropTypes.node,
+            kind: PropTypes.oneOf(["page"]),
+            pattern: PropTypes.string,
+            segment: PropTypes.string,
+            title: PropTypes.string
+        }),
+        PropTypes.shape({
+            kind: PropTypes.oneOf(["header"]).isRequired,
+            title: PropTypes.string.isRequired
+        }),
+        PropTypes.shape({
+            kind: PropTypes.oneOf(["divider"]).isRequired
+        })
+    ]).isRequired),
+    /**
+     * Router implementation used inside Toolpad components.
+     * @default null
+     */
+    router: PropTypes.shape({
+        navigate: PropTypes.func.isRequired,
+        pathname: PropTypes.string.isRequired,
+        searchParams: PropTypes.instanceOf(URLSearchParams).isRequired
+    }),
+    /**
+     * Session info about the current user.
+     * @default null
+     */
+    session: PropTypes.shape({
+        user: PropTypes.shape({
+            email: PropTypes.string,
+            id: PropTypes.string,
+            image: PropTypes.string,
+            name: PropTypes.string
+        })
+    }),
+    /**
+     * [Theme or themes](https://mui.com/toolpad/core/react-app-provider/#theming) to be used by the app in light/dark mode. A [CSS variables theme](https://mui.com/material-ui/customization/css-theme-variables/overview/) is recommended.
+     * @default createTheme()
+     */
+    theme: PropTypes.object,
+    /**
+     * The window where the application is rendered.
+     * This is needed when rendering the app inside an iframe, for example.
+     * @default window
+     */
+    window: PropTypes.object
+};
+export { AppProvider };

package/build/src/AppProvider/AppThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { AppTheme } from "./AppProvider";
+interface AppThemeProviderProps {
+    children: React.ReactNode;
+    theme: AppTheme;
+    window?: Window;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function AppThemeProvider(props: AppThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export { AppThemeProvider };

package/build/src/AppProvider/AppThemeProvider.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useMediaQuery } from "@mui/material";
+import { ThemeProvider, useColorScheme } from "@mui/material/styles";
+import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
+import CssBaseline from "@mui/material/CssBaseline";
+import invariant from "invariant";
+import { useLocalStorageState } from "../useLocalStorageState";
+import { PaletteModeContext } from "../shared/context";
+const COLOR_SCHEME_ATTRIBUTE = "data-toolpad-color-scheme";
+const COLOR_SCHEME_STORAGE_KEY = "toolpad-color-scheme";
+const MODE_STORAGE_KEY = "toolpad-mode";
+function usePreferredMode(window) {
+    const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)", window && {
+        matchMedia: window.matchMedia
+    });
+    return prefersDarkMode ? "dark" : "light";
+}
+function isCssVarsTheme(theme) {
+    return "vars" in theme;
+}
+/**
+ * Compatibility layer for classic v5 themes. It will handle state management for the theme switcher.
+ * In the v6 theme, this state management is handled by `useColorScheme`. But this hook will crash if
+ * not run under context with a css vars theme.
+ */
+function LegacyThemeProvider(props) {
+    const { children, theme, window: appWindow } = props;
+    invariant(!isCssVarsTheme(theme), "This provider only accepts legacy themes.");
+    const isDualTheme = "light" in theme || "dark" in theme;
+    const preferredMode = usePreferredMode(appWindow);
+    const [userMode, setUserMode] = useLocalStorageState(MODE_STORAGE_KEY, "system");
+    const paletteMode = !userMode || userMode === "system" ? preferredMode : userMode;
+    const dualAwareTheme = React.useMemo(() => isDualTheme
+        ? theme[paletteMode === "dark" ? "dark" : "light"] ??
+            theme[paletteMode === "dark" ? "light" : "dark"]
+        : theme, [isDualTheme, paletteMode, theme]);
+    // The v5 shim, based on local state
+    const paletteModeContextValue = React.useMemo(() => ({
+        paletteMode,
+        setPaletteMode: setUserMode,
+        isDualTheme
+    }), [isDualTheme, paletteMode, setUserMode]);
+    return (_jsx(ThemeProvider, { theme: dualAwareTheme, children: _jsxs(PaletteModeContext.Provider, { value: paletteModeContextValue, children: [_jsx(CssBaseline, { enableColorScheme: true }), children] }) }));
+}
+function CssVarsPaletteModeProvider(props) {
+    const { children, window: appWindow } = props;
+    const preferredMode = usePreferredMode(appWindow);
+    const { mode, setMode, allColorSchemes } = useColorScheme();
+    // The v6 API, based on `useColorScheme`
+    const paletteModeContextValue = React.useMemo(() => {
+        return {
+            paletteMode: !mode || mode === "system" ? preferredMode : mode,
+            setPaletteMode: setMode,
+            isDualTheme: allColorSchemes.length > 1
+        };
+    }, [allColorSchemes, mode, preferredMode, setMode]);
+    return (_jsx(PaletteModeContext.Provider, { value: paletteModeContextValue, children: children }));
+}
+function CssVarsThemeProvider(props) {
+    const { children, theme, window: appWindow } = props;
+    invariant(isCssVarsTheme(theme), "This provider only accepts CSS vars themes.");
+    return (_jsxs(ThemeProvider, { theme: theme, documentNode: appWindow?.document, colorSchemeNode: appWindow?.document.documentElement, disableNestedContext: true, colorSchemeStorageKey: COLOR_SCHEME_STORAGE_KEY, modeStorageKey: MODE_STORAGE_KEY, children: [_jsx(InitColorSchemeScript, { attribute: COLOR_SCHEME_ATTRIBUTE, colorSchemeStorageKey: COLOR_SCHEME_STORAGE_KEY, modeStorageKey: MODE_STORAGE_KEY }), _jsxs(CssVarsPaletteModeProvider, { window: appWindow, children: [_jsx(CssBaseline, { enableColorScheme: true }), children] })] }));
+}
+/**
+ * @ignore - internal component.
+ */
+function AppThemeProvider(props) {
+    const { children, theme, ...rest } = props;
+    const useCssVarsProvider = isCssVarsTheme(theme);
+    return useCssVarsProvider ? (_jsx(CssVarsThemeProvider, { theme: theme, ...rest, children: children })) : (_jsx(LegacyThemeProvider, { theme: theme, ...rest, children: children }));
+}
+export { AppThemeProvider };

package/build/src/AppProvider/index.d.ts

@@ -0,0 +1 @@
+export * from "./AppProvider";

package/build/src/AppProvider/index.js

@@ -0,0 +1 @@
+export * from "./AppProvider";

package/build/src/DashboardLayout/DashboardLayout.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { type Theme, SxProps } from "@mui/material";
+import { type AccountProps } from "../Account";
+export interface SidebarFooterProps {
+    mini: boolean;
+}
+export interface DashboardLayoutSlotProps {
+    toolbarActions?: {};
+    toolbarAccount?: AccountProps;
+    sidebarFooter?: SidebarFooterProps;
+}
+export interface DashboardLayoutSlots {
+    /**
+     * The toolbar actions component used in the layout header.
+     * @default ToolbarActions
+     */
+    toolbarActions?: React.JSXElementConstructor<{}>;
+    /**
+     * The toolbar account component used in the layout header.
+     * @default Account
+     */
+    toolbarAccount?: React.JSXElementConstructor<AccountProps>;
+    /**
+     * Optional footer component used in the layout sidebar.
+     * @default null
+     */
+    sidebarFooter?: React.JSXElementConstructor<SidebarFooterProps>;
+}
+export interface DashboardLayoutProps {
+    /**
+     * The content of the dashboard.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
+     * @default false
+     */
+    disableCollapsibleSidebar?: boolean;
+    /**
+     * Whether the sidebar should start collapsed in desktop size screens.
+     * @default false
+     */
+    defaultSidebarCollapsed?: boolean;
+    /**
+     * Whether the navigation bar and menu icon should be hidden
+     * @default false
+     */
+    hideNavigation?: boolean;
+    /**
+     * Width of the sidebar when expanded.
+     * @default 320
+     */
+    sidebarExpandedWidth?: number | string;
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots?: DashboardLayoutSlots;
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: DashboardLayoutSlotProps;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ *
+ * API:
+ *
+ * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
+ */
+declare function DashboardLayout(props: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DashboardLayout {
+    var propTypes: any;
+}
+export { DashboardLayout };