@wq/material-native 2.0.0-alpha.0

package/README.md

@@ -0,0 +1,29 @@
+[![@wq/material][logo]][docs]
+
+**@wq/material-native** provides [React Native] and [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/
+[React Native]: https://reactnative.dev/
+[Expo]: https://expo.io/
+[React Native Paper]: https://callstack.github.io/react-native-paper/

package/babel.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+    env: {
+        test: {
+            plugins: [
+                ["@babel/plugin-proposal-private-methods", { loose: true }],
+            ],
+            presets: ["module:metro-react-native-babel-preset"],
+        },
+    },
+};

package/jest.config.js

@@ -0,0 +1,9 @@
+export default {
+    preset: "react-native",
+    setupFiles: [
+        "./node_modules/react-native-gesture-handler/jestSetup.js",
+        "./setup-jest.js",
+    ],
+    testMatch: ["**/__tests__/**/*.js?(x)"],
+    transformIgnorePatterns: [],
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@wq/material-native",
+    "version": "2.0.0-alpha.0",
+    "description": "React Native and Expo bindings for @wq/material",
+    "type": "module",
+    "main": "src/index.js",
+    "scripts": {
+        "test": "cd ../../ && npm run jest packages/material-native -- --config packages/material-native/jest.config.js --moduleDirectories node_modules/ packages/material-native/node_modules/",
+        "build": "npm run prettier",
+        "prettier": "cd ../../ && npm run prettier -- --write packages/material-native/",
+        "lint": "cd ../../ && npm run eslint packages/material-native/{,src/,src/*/,src/*/*/}*.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/wq/wq.app.git",
+        "directory": "packages/material-native"
+    },
+    "keywords": [
+        "wq",
+        "react",
+        "material",
+        "material-ui"
+    ],
+    "author": "S. Andrew Sheppard",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/wq/wq.app/issues"
+    },
+    "homepage": "https://wq.io/@wq/material",
+    "dependencies": {
+        "@wq/react": "^2.0.0-alpha.0",
+        "date-fns": "^2.29.3"
+    },
+    "peerDependencies": {
+        "@react-native-async-storage/async-storage": "*",
+        "@react-native-community/datetimepicker": "*",
+        "@react-native-community/masked-view": "*",
+        "@react-native-community/netinfo": "*",
+        "@react-navigation/native": "*",
+        "@react-navigation/stack": "*",
+        "react-native-modal-datetime-picker": "*",
+        "react-native-paper": "*",
+        "react-native-picker-select": "*"
+    },
+    "devDependencies": {
+        "@react-native-async-storage/async-storage": "^1.17.11",
+        "@react-native-community/datetimepicker": "^6.7.1",
+        "@react-native-community/masked-view": "^0.1.11",
+        "@react-native-community/netinfo": "^9.3.7",
+        "@react-navigation/native": "^6.1.2",
+        "@react-navigation/stack": "^6.3.11",
+        "@wq/model": "^2.0.0-alpha.0",
+        "@wq/store": "^2.0.0-alpha.0",
+        "react-native-modal-datetime-picker": "^14.0.1",
+        "react-native-paper": "^5.1.3",
+        "react-native-picker-select": "^8.0.4"
+    }
+}

package/setup-jest.js

@@ -0,0 +1,5 @@
+import { NativeModules } from "react-native";
+
+if (!NativeModules.PlatformLocalStorage) {
+    NativeModules.PlatformLocalStorage = {};
+}

package/src/App.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from "react";
+import { App as DefaultApp, usePlugin } from "@wq/react";
+import {
+    DefaultTheme,
+    DarkTheme,
+    Provider as PaperProvider,
+} from "react-native-paper";
+
+export default function App() {
+    const { theme: configTheme } = usePlugin("material").config,
+        theme = useMemo(() => createTheme(configTheme), [configTheme]),
+        options = useMemo(
+            () => ({
+                navigator: { theme },
+                screen: {
+                    cardStyle: { backgroundColor: theme.colors.background },
+                },
+            }),
+            [theme]
+        );
+
+    return (
+        <PaperProvider theme={theme}>
+            <DefaultApp options={options} />
+        </PaperProvider>
+    );
+}
+
+function createTheme({ type, primary, secondary, background }) {
+    const colors = {},
+        base = type === "dark" ? DarkTheme : DefaultTheme;
+    if (primary) {
+        colors.primary = primary;
+    }
+    if (secondary) {
+        colors.accent = secondary;
+    }
+    if (background) {
+        colors.background = background;
+    }
+    return {
+        ...base,
+        colors: {
+            ...base.colors,
+            ...colors,
+        },
+    };
+}

package/src/components/Breadcrumbs.js

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

package/src/components/Button.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { useIcon } 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
+}) {
+    const Icon = useIcon(icon),
+        theme = useTheme();
+    if (!onPress) {
+        onPress = onClick;
+    }
+    if (!mode) {
+        mode = variant;
+    }
+    if (color === "primary") {
+        color = theme.colors.primary;
+    } else if (color === "secondary") {
+        color = theme.colors.accent;
+    }
+    return (
+        <PaperButton
+            onPress={onPress}
+            mode={mode}
+            icon={Icon}
+            color={color}
+            {...rest}
+        />
+    );
+}
+
+Button.propTypes = {
+    onClick: PropTypes.func,
+    onPress: PropTypes.func,
+    variant: PropTypes.string,
+    mode: PropTypes.string,
+    icon: PropTypes.string,
+    color: PropTypes.string,
+};

package/src/components/ButtonLink.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Button } from "react-native-paper";
+import { useNav } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function ButtonLink({ to, children }) {
+    const onPress = useNav(to);
+    return <Button onPress={onPress}>{children}</Button>;
+}
+
+ButtonLink.propTypes = {
+    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.node,
+};

package/src/components/CancelButton.js

@@ -0,0 +1,3 @@
+import ButtonLink from "./ButtonLink.js";
+
+export default ButtonLink;

package/src/components/CheckboxButton.js

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

package/src/components/Chip.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { useIcon } from "@wq/react";
+import { Chip as PaperChip, useTheme } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function Chip({
+    label,
+    icon,
+    color,
+    onClick,
+    onPress,
+    onDelete,
+    onClose,
+    ...rest
+}) {
+    const theme = useTheme(),
+        Icon = useIcon(icon);
+
+    if (color === "primary") {
+        color = theme.colors.primary;
+    } else if (color === "secondary") {
+        color = theme.colors.accent;
+    }
+
+    let style, chipTheme;
+    if (color) {
+        style = {
+            backgroundColor: color,
+        };
+        chipTheme = {
+            colors: {
+                text: "#ffffff",
+            },
+        };
+    }
+
+    if (!onPress) {
+        onPress = onClick;
+    }
+
+    if (!onClose) {
+        onClose = onDelete;
+    }
+
+    return (
+        <PaperChip
+            icon={Icon}
+            style={style}
+            theme={chipTheme}
+            onPress={onPress}
+            onClose={onClose}
+            {...rest}
+        >
+            {label}
+        </PaperChip>
+    );
+}
+
+Chip.propTypes = {
+    label: PropTypes.node,
+    icon: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func,
+    onPress: PropTypes.func,
+    onDelete: PropTypes.func,
+    onClose: PropTypes.func,
+};

package/src/components/Container.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/DeleteForm.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Alert from "react-native";
+import { useComponents, useMessages } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function DeleteForm({ action }) {
+    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+        {
+            CONFIRM_DELETE,
+            CONFIRM_DELETE_TITLE,
+            CONFIRM_DELETE_OK,
+            CONFIRM_DELETE_CANCEL,
+        } = useMessages();
+
+    async function confirmSubmit() {
+        return new Promise((resolve) => {
+            Alert.alert(
+                CONFIRM_DELETE_TITLE,
+                CONFIRM_DELETE,
+                [
+                    {
+                        text: CONFIRM_DELETE_CANCEL,
+                        onPress() {
+                            resolve(false);
+                        },
+                        style: "cancel",
+                    },
+                    {
+                        text: CONFIRM_DELETE_OK,
+                        onPress() {
+                            resolve(true);
+                        },
+                        style: "destructive",
+                    },
+                ],
+                {
+                    onDismiss() {
+                        resolve(false);
+                    },
+                }
+            );
+        });
+    }
+
+    return (
+        <Form
+            action={action}
+            method="DELETE"
+            backgroundSync={false}
+            onSubmit={confirmSubmit}
+        >
+            <HorizontalView>
+                <View />
+                <SubmitButton icon="delete" variant="text" color="secondary">
+                    Delete
+                </SubmitButton>
+            </HorizontalView>
+        </Form>
+    );
+}
+
+DeleteForm.propTypes = {
+    action: PropTypes.string,
+};

package/src/components/Divider.js

@@ -0,0 +1,3 @@
+import { Divider } from "react-native-paper";
+
+export default Divider;

package/src/components/ExpandableListItem.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { useIcon } from "@wq/react";
+import { List } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function ExpandableListItem({
+    children,
+    description,
+    icon,
+    open,
+    onToggle,
+    ...rest
+}) {
+    const Icon = useIcon(icon),
+        [summary, ...details] = React.Children.toArray(children),
+        [internalOpen, setOpen] = useState(false);
+
+    let toggleOpen;
+    if (open === false || open || onToggle) {
+        toggleOpen = () => onToggle(!open);
+    } else {
+        open = internalOpen;
+        toggleOpen = () => setOpen(!open);
+    }
+
+    return (
+        <List.Accordion
+            title={summary}
+            description={description}
+            left={Icon ? (props) => <List.Icon icon={Icon} {...props} /> : null}
+            expanded={open}
+            onPress={toggleOpen}
+            {...rest}
+        >
+            {details}
+        </List.Accordion>
+    );
+}
+
+ExpandableListItem.propTypes = {
+    children: PropTypes.node,
+    description: PropTypes.node,
+    icon: PropTypes.string,
+    open: PropTypes.bool,
+    onToggle: PropTypes.func,
+};

package/src/components/ExpansionPanel.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { List } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function ExpansionPanel({ summary, children, open, onToggle }) {
+    let handleToggle;
+    if (onToggle) {
+        handleToggle = () => onToggle(!open);
+    }
+    return (
+        <List.Accordion title={summary} expanded={open} onPress={handleToggle}>
+            {children}
+        </List.Accordion>
+    );
+}
+
+ExpansionPanel.propTypes = {
+    summary: PropTypes.node,
+    children: PropTypes.node,
+    open: PropTypes.bool,
+    onToggle: PropTypes.func,
+};

package/src/components/Fab.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { FAB } from "react-native-paper";
+import { useNav, useIcon } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function Fab({ icon, to, ...rest }) {
+    const onPress = useNav(to),
+        Icon = useIcon(icon);
+
+    return (
+        <FAB
+            onPress={onPress}
+            icon={Icon}
+            color="white"
+            style={{
+                position: "absolute",
+                margin: 16,
+                right: 0,
+                bottom: 0,
+            }}
+            {...rest}
+        />
+    );
+}
+
+Fab.propTypes = {
+    icon: PropTypes.string,
+    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+};

package/src/components/Fieldset.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/FieldsetArray.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { useComponents } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function FieldsetArray({ label, children, addRow }) {
+    const { View, Button } = useComponents();
+    return (
+        <View>
+            {children}
+            {addRow && (
+                <Button onClick={() => addRow()}>{`Add ${label}`}</Button>
+            )}
+        </View>
+    );
+}
+
+FieldsetArray.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+    addRow: PropTypes.func,
+};

package/src/components/FileArray.js

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

package/src/components/FlatFieldset.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/Footer.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/FooterContent.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/FormError.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { useField } from "formik";
+import { HelperText } from "react-native-paper";
+
+export default function FormError(props) {
+    const [, { error }] = useField("__other__");
+    if (!error) {
+        return null;
+    }
+    return (
+        <HelperText type="error" {...props}>
+            {error}
+        </HelperText>
+    );
+}

package/src/components/FormRoot.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/FormatJson.js

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

package/src/components/Header.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Appbar } from "react-native-paper";
+import { useBreadcrumbs, useNav } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function Header({ options, route }) {
+    const title = options.title || route.name,
+        breadcrumbs = useBreadcrumbs() || [],
+        previous = breadcrumbs[breadcrumbs.length - 2],
+        nav = useNav(previous?.url);
+    return (
+        <Appbar.Header>
+            {previous && <Appbar.BackAction onPress={nav} />}
+            <Appbar.Content title={title} />
+        </Appbar.Header>
+    );
+}
+
+Header.propTypes = {
+    options: PropTypes.object,
+    route: PropTypes.object,
+};

package/src/components/HomeLink.js

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

package/src/components/HorizontalView.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { View } from "react-native";
+import PropTypes from "prop-types";
+
+export default function HorizontalView({ style, ...rest }) {
+    return (
+        <View
+            style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: 8,
+                ...style,
+            }}
+            {...rest}
+        />
+    );
+}
+
+HorizontalView.propTypes = {
+    style: PropTypes.object,
+};

package/src/components/IconButton.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { useIcon } 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),
+        theme = useTheme();
+    if (!onPress) {
+        onPress = onClick;
+    }
+    if (color === "primary") {
+        color = theme.colors.primary;
+    } else if (color === "secondary") {
+        color = theme.colors.accent;
+    }
+    return (
+        <PaperIconButton
+            icon={Icon}
+            onPress={onPress}
+            color={color}
+            {...rest}
+        />
+    );
+}
+
+IconButton.propTypes = {
+    icon: PropTypes.string,
+    onClick: PropTypes.func,
+    onPress: PropTypes.func,
+    color: PropTypes.string,
+};

package/src/components/IconSubmitButton.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { useComponents } from "@wq/react";
+import { useFormikContext } from "formik";
+
+export default function IconSubmitButton(props) {
+    const { IconButton } = useComponents(),
+        { isSubmitting, submitForm } = useFormikContext();
+
+    return (
+        <IconButton disabled={isSubmitting} onPress={submitForm} {...props} />
+    );
+}