update deps; support context-only Root

sheppard · sheppard · commit 7a9517502c38 · 2025-03-29T01:37:33.000Z
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/material-native/src/Root.js b/packages/material-native/src/Root.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useConfig, withWQ } from "@wq/react";
+import { withWQ } from "@wq/react";
 import {
     MD2LightTheme,
     MD3LightTheme,
@@ -18,37 +18,45 @@ const THEMES = {
     "dark-3": MD3DarkTheme,
 };
 
-const defaultConfig = {
-    material: {
-        theme: {
-            primary: "#7500ae",
-            secondary: "#0088bd",
-        },
-    },
+const defaultTheme = {
+    type: "light",
+    version: 3,
+    primary: "#7500ae",
+    secondary: "#0088bd",
 };
 
-function Root({ children }) {
-    const { material: { theme: configTheme } = {} } = useConfig(),
-        theme = useMemo(() => createTheme(configTheme), [configTheme]);
-    return <PaperProvider theme={theme}>{children}</PaperProvider>;
+function Root({ children, theme }) {
+    if (theme) {
+        return <ThemeRoot theme={theme}>{children}</ThemeRoot>;
+    } else {
+        return children || null;
+    }
+}
+
+function ThemeRoot({ children, theme }) {
+    const paperTheme = useMemo(() => createTheme(theme), [theme]);
+    return <PaperProvider theme={paperTheme}>{children}</PaperProvider>;
 }
 
 export default withWQ(Root, {
     defaults: {
-        config: defaultConfig,
         components: { ...components, useMinWidth },
-        icons: { ...icons, List: icons.ListIcon },
+        icons: { ...icons, List: icons.ListIcon, Menu: icons.MenuIcon },
     },
 });
 
-function createTheme({
-    type = "light",
-    version = 3,
-    primary,
-    secondary,
-    background,
-}) {
-    const colors = {},
+function createTheme(theme) {
+    if (theme === true) {
+        theme = defaultTheme;
+    }
+    const {
+            type = "light",
+            version = 3,
+            primary,
+            secondary,
+            background,
+        } = theme || {},
+        colors = {},
         base = THEMES[`${type}-${version}`];
     if (!base) {
         console.warn(`Unknown base theme type=${type} version=${version}`);
diff --git a/packages/material-native/src/components/Badge.js b/packages/material-native/src/components/Badge.js
@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}
diff --git a/packages/material-native/src/components/Grid.js b/packages/material-native/src/components/Grid.js
@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}
diff --git a/packages/material-native/src/components/Menu.js b/packages/material-native/src/components/Menu.js
@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}
diff --git a/packages/material-native/src/components/MenuItem.js b/packages/material-native/src/components/MenuItem.js
@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}
diff --git a/packages/material-native/src/components/index.js b/packages/material-native/src/components/index.js
@@ -50,6 +50,11 @@ import SidePanel from "./SidePanel.js";
 import Breadcrumbs from "./Breadcrumbs.js";
 import Pagination from "./Pagination.js";
 
+import Badge from "./Badge.js";
+import Grid from "./Grid.js";
+import Menu from "./Menu.js";
+import MenuItem from "./MenuItem.js";
+
 export {
     Container,
     Header,
@@ -106,3 +111,5 @@ export {
 };
 
 export { Popup, SidePanel, Breadcrumbs, Pagination };
+
+export { Badge, Grid, Menu, MenuItem };
diff --git a/packages/material-native/src/icons.js b/packages/material-native/src/icons.js
@@ -18,7 +18,7 @@ export const Add = "plus",
     Map = "map",
     Home = "home",
     BreadcrumbSeparator = "chevron-right",
-    Menu = "menu",
+    MenuIcon = "menu",
     Login = "login",
     Logout = "logout",
     Config = "cog",
diff --git a/packages/material-web/package.json b/packages/material-web/package.json
@@ -29,14 +29,22 @@
     },
     "homepage": "https://wq.io/@wq/material",
     "dependencies": {
-        "@emotion/react": "^11.11.1",
-        "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.11.16",
-        "@mui/material": "^5.13.5",
-        "@wq/react": "file:../react"
+        "@wq/react": "^3.0.0-a1-dev4.g2569553"
+    },
+    "peerDependencies": {
+        "@emotion/react": "*",
+        "@emotion/styled": "*",
+        "@mui/icons-material": "*",
+        "@mui/material": "*",
+        "react": "*",
+        "react-dom": "*"
     },
     "devDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^6.4.7",
+        "@mui/material": "^6.4.7",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     }
 }
diff --git a/packages/material-web/src/Root.js b/packages/material-web/src/Root.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useConfig, withWQ } from "@wq/react";
+import { withWQ } from "@wq/react";
 import {
     createTheme as createMuiTheme,
     ThemeProvider,
@@ -9,20 +9,21 @@ import * as components from "./components/index.js";
 import { useMinWidth } from "./hooks.js";
 import * as icons from "./icons.js";
 
-const defaultConfig = {
-    material: {
-        theme: {
-            primary: "#7500ae",
-            secondary: "#0088bd",
-        },
-    },
+const defaultTheme = {
+    primary: "#7500ae",
+    secondary: "#0088bd",
 };
 
-function Root({ children }) {
-    const {
-            material: { theme },
-        } = useConfig(),
-        muiTheme = useMemo(() => createTheme(theme), [theme]);
+function Root({ children, theme }) {
+    if (theme) {
+        return <ThemeRoot theme={theme}>{children}</ThemeRoot>;
+    } else {
+        return children || null;
+    }
+}
+
+function ThemeRoot({ children, theme }) {
+    const muiTheme = useMemo(() => createTheme(theme), [theme]);
     return (
         <ThemeProvider theme={muiTheme}>
             <CssBaseline />
@@ -33,16 +34,19 @@ function Root({ children }) {
 
 export default withWQ(Root, {
     defaults: {
-        config: defaultConfig,
         components: { ...components, useMinWidth },
         icons: {
             ...icons,
             List: icons.ListIcon,
+            Menu: icons.MenuIcon,
         },
     },
 });
 
 function createTheme(theme) {
+    if (theme === true) {
+        theme = defaultTheme;
+    }
     const { type, primary, secondary, background } = theme;
     const palette = theme.palette || {};
     if (type) {
diff --git a/packages/material-web/src/components/Badge.js b/packages/material-web/src/components/Badge.js
@@ -0,0 +1,4 @@
+import { Badge } from "@mui/material";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Badge);
diff --git a/packages/material-web/src/components/Breadcrumbs.js b/packages/material-web/src/components/Breadcrumbs.js
@@ -24,7 +24,7 @@ function Breadcrumbs({ links }) {
         reverse = useReverse(),
         Separator = useIcon("breadcrumb-separator");
 
-    if (!links) {
+    if (!links || links.length === 0) {
         links = [{ url: reverse("index"), label: "Home", active: true }];
     }
 
diff --git a/packages/material-web/src/components/Grid.js b/packages/material-web/src/components/Grid.js
@@ -0,0 +1,4 @@
+import { Grid } from "@mui/material";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Grid);
diff --git a/packages/material-web/src/components/ListItem.js b/packages/material-web/src/components/ListItem.js
@@ -1,37 +1,34 @@
 import React from "react";
 import {
     ListItem as MuiListItem,
+    ListItemButton,
     ListItemText,
     ListItemIcon,
-    ListItemSecondaryAction,
 } from "@mui/material";
 import PropTypes from "prop-types";
 import { useIcon, withWQ } from "@wq/react";
 
-function ListItem({ children, description, icon, secondaryAction, ...rest }) {
-    const Icon = useIcon(icon);
+function ListItem({ children, description, icon, button, ...rest }) {
+    const Icon = useIcon(icon),
+        ListItem = button ? ListItemButton : MuiListItem;
+
     return (
-        <MuiListItem {...rest}>
+        <ListItem {...rest}>
             {Icon && (
                 <ListItemIcon>
                     <Icon />
                 </ListItemIcon>
             )}
             <ListItemText primary={children} secondary={description} />
-            {secondaryAction && (
-                <ListItemSecondaryAction>
-                    {secondaryAction}
-                </ListItemSecondaryAction>
-            )}
-        </MuiListItem>
+        </ListItem>
     );
 }
 
 ListItem.propTypes = {
     children: PropTypes.node,
     description: PropTypes.node,
     icon: PropTypes.string,
-    secondaryAction: PropTypes.node,
+    button: PropTypes.bool,
 };
 
 export default withWQ(ListItem);
diff --git a/packages/material-web/src/components/Menu.js b/packages/material-web/src/components/Menu.js
@@ -0,0 +1,4 @@
+import { Menu } from "@mui/material";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Menu);
diff --git a/packages/material-web/src/components/MenuItem.js b/packages/material-web/src/components/MenuItem.js
@@ -0,0 +1,4 @@
+import { MenuItem } from "@mui/material";
+import { withWQ } from "@wq/react";
+
+export default withWQ(MenuItem);
diff --git a/packages/material-web/src/components/NavMenuPopup.js b/packages/material-web/src/components/NavMenuPopup.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Drawer, AppBar, Toolbar, Typography } from "@mui/material";
 import { useComponents, useConfig, withWQ } from "@wq/react";
 import { NavMenu } from "./NavMenuFixed.js";
-import { Logo } from "./Logo.js";
+import Logo from "./Logo.js";
 
 export function useSiteTitle() {
     return useConfig().site_title;
diff --git a/packages/material-web/src/components/index.js b/packages/material-web/src/components/index.js
@@ -9,6 +9,7 @@ import View from "./View.js";
 import ScrollView from "./ScrollView.js";
 import HorizontalView from "./HorizontalView.js";
 import Text from "./Text.js";
+import Img from "./Img.js";
 import Typography from "./Typography.js";
 import FormatJson from "./FormatJson.js";
 
@@ -49,6 +50,11 @@ import SidePanel from "./SidePanel.js";
 import Breadcrumbs from "./Breadcrumbs.js";
 import Pagination from "./Pagination.js";
 
+import Badge from "./Badge.js";
+import Grid from "./Grid.js";
+import Menu from "./Menu.js";
+import MenuItem from "./MenuItem.js";
+
 export {
     Container,
     Header,
@@ -61,6 +67,7 @@ export {
     ScrollView,
     HorizontalView,
     Text,
+    Img,
     Typography,
     FormatJson,
 };
@@ -104,3 +111,5 @@ export {
 };
 
 export { Popup, SidePanel, Breadcrumbs, Pagination };
+
+export { Badge, Grid, Menu, MenuItem };
diff --git a/packages/material-web/src/icons.js b/packages/material-web/src/icons.js
@@ -19,7 +19,7 @@ import {
     Map,
     Home,
     NavigateNext as BreadcrumbSeparator,
-    Menu,
+    Menu as MenuIcon,
     Login,
     Logout,
     Settings as Config,
@@ -47,7 +47,7 @@ export {
     Map,
     Home,
     BreadcrumbSeparator,
-    Menu,
+    MenuIcon,
     Login,
     Logout,
     Config,
diff --git a/packages/react/src/hooks.js b/packages/react/src/hooks.js
@@ -173,8 +173,9 @@ export function createFallbackComponent(
     expectedComponent = "Root"
 ) {
     function Fallback() {
+        const formatName = name.startsWith("use") ? `${name}()` : `<${name}/>`;
         console.warn(
-            `Missing <${name}/>!  Try rendering within <${expectedComponent}/> from ${expectedModule}.`
+            `Missing ${formatName}!  Try rendering within <${expectedComponent}/> from ${expectedModule}.`
         );
         return null;
     }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function NotImplemented() {`
	`2`	`+ return null; // FIXME`
	`3`	`+}`