@wq/material-native 2.0.0-alpha.2 → 3.0.0-alpha.0

package/README.md

@@ -1,29 +1,13 @@
 [![@wq/material][logo]][docs]
 
-**@wq/material-native** provides [React Native] and [Expo] bindings for [@wq/material], via the [React Native Paper] library.
+**@wq/material-native** provides [React Native] / [Expo] bindings for [@wq/material], via the [React Native Paper] library.
 
 ### [Documentation][docs]
 
-[**Installation**][installation]
-•
-[**API**][api]
-•
-[**Components**][components]
-•
-[Icons][icons]
-•
-[Inputs][inputs]
-
 [logo]: https://wq.io/images/@wq/material.svg
-[docs]: https://wq.io/@wq/material
-[installation]: https://wq.io/@wq/material#installation
-[api]: https://wq.io/@wq/material#api
-[components]: https://wq.io/components/
-[icons]: https://wq.io/icons
-[inputs]: https://wq.io/inputs/
-
-[@wq/material]: https://wq.io/@wq/material
-[React]: https://reactjs.org/
+[docs]: https://material.wq.io/@wq/material-native
+[@wq/material]: https://material.wq.io/
+[React]: https://react.dev/
 [React Native]: https://reactnative.dev/
-[Expo]: https://expo.io/
-[React Native Paper]: https://callstack.github.io/react-native-paper/
+[Expo]: https://expo.dev/
+[React Native Paper]: https://reactnativepaper.com/

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wq/material-native",
-    "version": "2.0.0-alpha.2",
+    "version": "3.0.0-alpha.0",
     "description": "React Native and Expo bindings for @wq/material",
     "type": "module",
     "main": "src/index.js",
@@ -12,7 +12,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/wq/wq.app.git",
+        "url": "git+https://github.com/wq/material.git",
         "directory": "packages/material-native"
     },
     "keywords": [
@@ -24,34 +24,17 @@
     "author": "S. Andrew Sheppard",
     "license": "MIT",
     "bugs": {
-        "url": "https://github.com/wq/wq.app/issues"
+        "url": "https://github.com/wq/material/issues"
     },
-    "homepage": "https://wq.io/@wq/material",
+    "homepage": "https://material.wq.io/@wq/material-native",
     "dependencies": {
-        "@wq/react": "^2.0.0-alpha.2",
-        "date-fns": "^2.30.0"
+        "@wq/react": "^3.0.0-alpha.0"
     },
     "peerDependencies": {
-        "@react-native-async-storage/async-storage": "*",
-        "@react-native-community/netinfo": "*",
-        "@react-navigation/stack": "*",
-        "expo-application": "*",
-        "expo-document-picker": "*",
-        "expo-image-picker": "*",
-        "react-native-modal-datetime-picker": "*",
-        "react-native-paper": "*",
-        "react-native-picker-select": "*"
+        "react-native-paper": "*"
     },
     "devDependencies": {
-        "@react-native-async-storage/async-storage": "^1.19.1",
-        "@react-native-community/netinfo": "^9.4.1",
-        "@react-navigation/stack": "^6.3.17",
-        "expo-application": "^5.3.0",
-        "expo-document-picker": "^11.5.4",
-        "expo-image-picker": "^14.3.2",
-        "jest-expo": "^49.0.0",
-        "react-native-modal-datetime-picker": "^17.0.0",
-        "react-native-paper": "^5.10.1",
-        "react-native-picker-select": "github:Expensify/react-native-picker-select#eae0585"
+        "jest-expo": "^52.0.6",
+        "react-native-paper": "^5.14.5"
     }
 }

package/src/Root.js

@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { withWQ } from "@wq/react";
+import {
+    MD2LightTheme,
+    MD3LightTheme,
+    MD2DarkTheme,
+    MD3DarkTheme,
+    Provider as PaperProvider,
+} from "react-native-paper";
+import * as components from "./components/index.js";
+import { useMinWidth } from "./hooks.js";
+import * as icons from "./icons.js";
+
+const THEMES = {
+    "light-2": MD2LightTheme,
+    "light-3": MD3LightTheme,
+    "dark-2": MD2DarkTheme,
+    "dark-3": MD3DarkTheme,
+};
+
+const defaultTheme = {
+    type: "light",
+    version: 3,
+    primary: "#7500ae",
+    secondary: "#0088bd",
+};
+
+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: {
+        components: { ...components, useMinWidth },
+        icons: { ...icons, List: icons.ListIcon, Menu: icons.MenuIcon },
+    },
+});
+
+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}`);
+    }
+    if (primary) {
+        colors.primary = primary;
+    }
+    if (secondary) {
+        colors.accent = secondary;
+    }
+    if (background) {
+        colors.background = background;
+    }
+    return {
+        ...base,
+        colors: {
+            ...(base || {}).colors,
+            ...colors,
+        },
+    };
+}

package/src/components/Accordion.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function Accordion({ summary, children, open, onToggle }) {
+function Accordion({ summary, children, open, onToggle }) {
     let handleToggle;
     if (onToggle) {
         handleToggle = () => onToggle(!open);
@@ -20,3 +21,5 @@ Accordion.propTypes = {
     open: PropTypes.bool,
     onToggle: PropTypes.func,
 };
+
+export default withWQ(Accordion);

package/src/components/Badge.js

@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}

package/src/components/Button.js

@@ -1,17 +1,9 @@
 import React from "react";
-import { useIcon } from "@wq/react";
+import { useIcon, withWQ } from "@wq/react";
 import { Button as PaperButton, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function Button({
-    onClick,
-    onPress,
-    variant,
-    mode,
-    icon,
-    color,
-    ...rest
-}) {
+function Button({ onClick, onPress, variant, mode, icon, color, ...rest }) {
     const Icon = useIcon(icon),
         theme = useTheme();
     if (!onPress) {
@@ -44,3 +36,5 @@ Button.propTypes = {
     icon: PropTypes.string,
     color: PropTypes.string,
 };
+
+export default withWQ(Button);

package/src/components/ButtonLink.js

@@ -1,9 +1,18 @@
 import React from "react";
-import { Button } from "react-native-paper";
-import { useNav } from "@wq/react";
+import { useComponents, withWQ } from "@wq/react";
+import { useNav } from "./Link.js";
+import Button from "./Button.js";
 import PropTypes from "prop-types";
 
-export default function ButtonLink({ to, children }) {
+const ButtonLinkFallback = {
+    components: {
+        useNav,
+        Button,
+    },
+};
+
+function ButtonLink({ to, children }) {
+    const { useNav, Button } = useComponents();
     const onPress = useNav(to);
     return <Button onPress={onPress}>{children}</Button>;
 }
@@ -12,3 +21,5 @@ ButtonLink.propTypes = {
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     children: PropTypes.node,
 };
+
+export default withWQ(ButtonLink, { fallback: ButtonLinkFallback });

package/src/components/CheckboxButton.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { Checkbox as PaperCheckbox, useTheme } from "react-native-paper";
+import { Checkbox, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
 const STATUSES = {
     true: "checked",
@@ -9,7 +10,7 @@ const STATUSES = {
     null: "indeterminate",
 };
 
-export default function Checkbox({ checked, color, ...props }) {
+function CheckboxButton({ checked, color, ...props }) {
     const status = STATUSES[checked],
         theme = useTheme();
     if (color === "primary") {
@@ -17,10 +18,12 @@ export default function Checkbox({ checked, color, ...props }) {
     } else if (color === "secondary") {
         color = theme.colors.accent;
     }
-    return <PaperCheckbox status={status} {...props} />;
+    return <Checkbox status={status} {...props} />;
 }
 
-Checkbox.propTypes = {
+CheckboxButton.propTypes = {
     checked: PropTypes.bool,
     color: PropTypes.string,
 };
+
+export default withWQ(CheckboxButton);

package/src/components/Chip.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { useIcon } from "@wq/react";
+import { useIcon, withWQ } from "@wq/react";
 import { Chip as PaperChip, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function Chip({
+function Chip({
     label,
     icon,
     color,
@@ -65,3 +65,5 @@ Chip.propTypes = {
     onDelete: PropTypes.func,
     onClose: PropTypes.func,
 };
+
+export default withWQ(Chip);

package/src/components/Container.js

@@ -1,3 +1,4 @@
 import { Fragment } from "react";
+import { withWQ } from "@wq/react";
 
-export default Fragment;
+export default withWQ(Fragment, "Container");

package/src/components/Divider.js

@@ -1,3 +1,4 @@
 import { Divider } from "react-native-paper";
+import { withWQ } from "@wq/react";
 
-export default Divider;
+export default withWQ(Divider);

package/src/components/ExpandableListItem.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import { useIcon } from "@wq/react";
+import { useIcon, withWQ } from "@wq/react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function ExpandableListItem({
+function ExpandableListItem({
     children,
     description,
     icon,
@@ -44,3 +44,5 @@ ExpandableListItem.propTypes = {
     open: PropTypes.bool,
     onToggle: PropTypes.func,
 };
+
+export default withWQ(ExpandableListItem);

package/src/components/Fab.js

@@ -1,9 +1,17 @@
 import React from "react";
 import { FAB } from "react-native-paper";
-import { useNav, useIcon } from "@wq/react";
+import { useComponents, useIcon, withWQ } from "@wq/react";
+import { useNav } from "./Link.js";
 import PropTypes from "prop-types";
 
-export default function Fab({ icon, to, ...rest }) {
+const FabFallback = {
+    components: {
+        useNav,
+    },
+};
+
+function Fab({ icon, to, ...rest }) {
+    const { useNav } = useComponents();
     const onPress = useNav(to),
         Icon = useIcon(icon);
 
@@ -26,3 +34,5 @@ Fab.propTypes = {
     icon: PropTypes.string,
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
+
+export default withWQ(Fab, { fallback: FabFallback });

package/src/components/Footer.js

@@ -1,3 +1,4 @@
 import { Fragment } from "react";
+import { withWQ } from "@wq/react";
 
-export default Fragment;
+export default withWQ(Fragment, "Footer");

package/src/components/FooterContent.js

@@ -1,3 +1,4 @@
 import { Fragment } from "react";
+import { withWQ } from "@wq/react";
 
-export default Fragment;
+export default withWQ(Fragment, "FooterContent");

package/src/components/FormatJson.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { Text, ScrollView } from "react-native";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function FormatJson({ json }) {
+function FormatJson({ json }) {
     return (
         <ScrollView style={{ height: 128 }}>
             <Text>{JSON.stringify(json, null, 4)}</Text>
@@ -13,3 +14,5 @@ export default function FormatJson({ json }) {
 FormatJson.propTypes = {
     json: PropTypes.object,
 };
+
+export default withWQ(FormatJson);

package/src/components/Grid.js

@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}

package/src/components/Header.js

@@ -1,9 +1,18 @@
 import React from "react";
 import { Appbar } from "react-native-paper";
-import { useBreadcrumbs, useNav } from "@wq/react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import { useNav } from "./Link.js";
 import PropTypes from "prop-types";
 
-export default function Header({ options, route }) {
+const HeaderFallback = {
+    components: {
+        useNav,
+        useBreadcrumbs: createFallbackComponent("useBreadcrumbs", "@wq/router"),
+    },
+};
+
+function Header({ options, route }) {
+    const { useNav, useBreadcrumbs } = useComponents();
     const title = options.title || route.name,
         breadcrumbs = useBreadcrumbs() || [],
         previous = breadcrumbs[breadcrumbs.length - 2],
@@ -20,3 +29,5 @@ Header.propTypes = {
     options: PropTypes.object,
     route: PropTypes.object,
 };
+
+export default withWQ(Header, { fallback: HeaderFallback });

package/src/components/HorizontalView.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function HorizontalView({ style, ...rest }) {
+function HorizontalView({ style, ...rest }) {
     return (
         <View
             style={{
@@ -20,3 +21,5 @@ export default function HorizontalView({ style, ...rest }) {
 HorizontalView.propTypes = {
     style: PropTypes.object,
 };
+
+export default withWQ(HorizontalView);

package/src/components/IconButton.js

@@ -1,10 +1,10 @@
 import React from "react";
-import { useIcon } from "@wq/react";
+import { useIcon, withWQ } from "@wq/react";
 import { IconButton as PaperIconButton, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function IconButton({ icon, onClick, onPress, color, ...rest }) {
-    const Icon = useIcon(icon),
+function IconButton({ icon, onClick, onPress, color, ...rest }) {
+    const Icon = useIcon(icon) || "cancel",
         theme = useTheme();
     if (!onPress) {
         onPress = onClick;
@@ -18,7 +18,7 @@ export default function IconButton({ icon, onClick, onPress, color, ...rest }) {
         <PaperIconButton
             icon={Icon}
             onPress={onPress}
-            color={color}
+            iconColor={color}
             {...rest}
         />
     );
@@ -30,3 +30,5 @@ IconButton.propTypes = {
     onPress: PropTypes.func,
     color: PropTypes.string,
 };
+
+export default withWQ(IconButton);

package/src/components/Img.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { Image, TouchableOpacity, Dimensions } from "react-native";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function Img({ src, onPress, onClick, style, ...props }) {
+function Img({ src, onPress, onClick, style, ...props }) {
     const [source, setSource] = useState(src ? { uri: src } : null);
     useEffect(() => {
         if (!src) {
@@ -93,10 +94,12 @@ export default function Img({ src, onPress, onClick, style, ...props }) {
 }
 
 Img.propTypes = {
-    src: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     width: PropTypes.number,
     height: PropTypes.number,
     onPress: PropTypes.func,
     onClick: PropTypes.func,
     style: PropTypes.object,
 };
+
+export default withWQ(Img);

package/src/components/Link.js

@@ -1,9 +1,18 @@
 import React from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
 import { Button } from "react-native";
-import { useNav } from "@wq/react";
 import PropTypes from "prop-types";
 
-export default function Link({ to, children }) {
+export const useNav = createFallbackComponent("useNav", "@wq/router");
+
+const LinkFallback = {
+    components: {
+        useNav,
+    },
+};
+
+function Link({ to, children }) {
+    const { useNav } = useComponents();
     const onPress = useNav(to);
     // FIXME: Use styled text instead?
     return <Button title={children} onPress={onPress} />;
@@ -13,3 +22,5 @@ Link.propTypes = {
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     children: PropTypes.node,
 };
+
+export default withWQ(Link, { fallback: LinkFallback });

package/src/components/List.js

@@ -1,3 +1,4 @@
 import { Fragment } from "react";
+import { withWQ } from "@wq/react";
 
-export default Fragment;
+export default withWQ(Fragment, "List");

package/src/components/ListItem.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { useIcon } from "@wq/react";
+import { useIcon, withWQ } from "@wq/react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function ListItem({
+function ListItem({
     children,
     description,
     icon,
@@ -36,3 +36,5 @@ ListItem.propTypes = {
     style: PropTypes.object,
     onClick: PropTypes.func,
 };
+
+export default withWQ(ListItem);

package/src/components/ListItemLink.js

@@ -1,9 +1,18 @@
 import React from "react";
-import { useNav, useComponents } from "@wq/react";
+import { useComponents, withWQ } from "@wq/react";
+import { useNav } from "./Link.js";
+import ListItem from "./ListItem.js";
 import PropTypes from "prop-types";
 
-export default function ListItemLink({ to, ...rest }) {
-    const { ListItem } = useComponents(),
+const ListItemLinkFallback = {
+    components: {
+        useNav,
+        ListItem,
+    },
+};
+
+function ListItemLink({ to, ...rest }) {
+    const { useNav, ListItem } = useComponents(),
         onPress = useNav(to);
     return <ListItem onPress={onPress} {...rest} />;
 }
@@ -11,3 +20,5 @@ export default function ListItemLink({ to, ...rest }) {
 ListItemLink.propTypes = {
     to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };
+
+export default withWQ(ListItemLink, { fallback: ListItemLinkFallback });

package/src/components/ListSubheader.js

@@ -1,3 +1,4 @@
 import { List } from "react-native-paper";
+import { withWQ } from "@wq/react";
 
-export default List.Subheader;
+export default withWQ(List.Subheader);

package/src/components/Main.js

@@ -1,3 +1,4 @@
 import { Fragment } from "react";
+import { withWQ } from "@wq/react";
 
-export default Fragment;
+export default withWQ(Fragment, "Main");

package/src/components/Menu.js

@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}

package/src/components/MenuItem.js

@@ -0,0 +1,3 @@
+export default function NotImplemented() {
+    return null; // FIXME
+}

package/src/components/Popup.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { Modal, Portal } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function Popup({ open, onClose, children, ...rest }) {
+function Popup({ open, onClose, children, ...rest }) {
     return (
         <Portal>
             <Modal visible={open} onDismiss={onClose} {...rest}>
@@ -17,3 +18,5 @@ Popup.propTypes = {
     onClose: PropTypes.func,
     children: PropTypes.node,
 };
+
+export default withWQ(Popup);

package/src/components/RadioButton.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { RadioButton as PaperRadioButton, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
 const STATUSES = {
     true: "checked",
@@ -9,7 +10,7 @@ const STATUSES = {
     null: "unchecked",
 };
 
-export default function RadioButton({ checked, color, ...rest }) {
+function RadioButton({ checked, color, ...rest }) {
     const status = STATUSES[checked],
         theme = useTheme();
     if (color === "primary") {
@@ -24,3 +25,5 @@ RadioButton.propTypes = {
     checked: PropTypes.bool,
     color: PropTypes.string,
 };
+
+export default withWQ(RadioButton);

package/src/components/ScrollView.js

@@ -2,8 +2,9 @@ import React from "react";
 import { ScrollView as PaperScrollView } from "react-native";
 import { useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function ScrollView({ style, ...rest }) {
+function ScrollView({ style, ...rest }) {
     const theme = useTheme();
     return (
         <PaperScrollView
@@ -20,3 +21,5 @@ export default function ScrollView({ style, ...rest }) {
 ScrollView.propTypes = {
     style: PropTypes.object,
 };
+
+export default withWQ(ScrollView);