@wq/material-native 3.0.0-alpha.1 → 3.0.0-alpha.2

package/babel.config.cjs

@@ -1,10 +1,6 @@
-module.exports = {
-    env: {
-        test: {
-            plugins: [
-                ["@babel/plugin-transform-private-methods", { loose: true }],
-            ],
-            presets: ["module:metro-react-native-babel-preset"],
-        },
-    },
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ["babel-preset-expo"],
+    };
 };

package/jest.config.js

@@ -1,6 +1,9 @@
 export default {
     preset: "jest-expo",
     testMatch: ["**/__tests__/**/*.js?(x)"],
+    transform: {
+        "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+    },
     transformIgnorePatterns: [],
     moduleNameMapper: {
         "@wq/material-native": "<rootDir>/src/index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wq/material-native",
-    "version": "3.0.0-alpha.1",
+    "version": "3.0.0-alpha.2",
     "description": "React Native and Expo bindings for @wq/material",
     "type": "module",
     "main": "src/index.js",
@@ -28,13 +28,16 @@
     },
     "homepage": "https://material.wq.io/@wq/material-native",
     "dependencies": {
-        "@wq/react": "^3.0.0-alpha.0"
+        "@wq/react": "^3.0.0-beta.1"
     },
     "peerDependencies": {
         "react-native-paper": "*"
     },
     "devDependencies": {
-        "jest-expo": "^52.0.6",
-        "react-native-paper": "^5.14.5"
+        "@react-native/assets-registry": "^0.87.1",
+        "babel-preset-expo": "^57.0.13",
+        "expo": "^57.0.25",
+        "jest-expo": "^57.0.5",
+        "react-native-paper": "^5.15.3"
     }
 }

package/src/Root.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { withWQ } from "@wq/react";
 import {
     MD2LightTheme,

package/src/components/Accordion.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";

package/src/components/Button.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useIcon, withWQ } from "@wq/react";
 import { Button as PaperButton, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";

package/src/components/ButtonLink.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useComponents, withWQ } from "@wq/react";
 import { useNav } from "./Link.js";
 import Button from "./Button.js";

package/src/components/CheckboxButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Checkbox, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";
@@ -18,7 +17,7 @@ function CheckboxButton({ checked, color, ...props }) {
     } else if (color === "secondary") {
         color = theme.colors.accent;
     }
-    return <Checkbox status={status} {...props} />;
+    return <Checkbox status={status} color={color} {...props} />;
 }
 
 CheckboxButton.propTypes = {

package/src/components/Chip.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useIcon, withWQ } from "@wq/react";
 import { Chip as PaperChip, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";

package/src/components/ExpandableListItem.js

@@ -12,15 +12,16 @@ function ExpandableListItem({
     ...rest
 }) {
     const Icon = useIcon(icon),
+        // eslint-disable-next-line @eslint-react/no-children-to-array
         [summary, ...details] = React.Children.toArray(children),
-        [internalOpen, setOpen] = useState(false);
+        [internalOpen, setInternalOpen] = useState(false);
 
     let toggleOpen;
     if (open === false || open || onToggle) {
         toggleOpen = () => onToggle(!open);
     } else {
         open = internalOpen;
-        toggleOpen = () => setOpen(!open);
+        toggleOpen = () => setInternalOpen(!open);
     }
 
     return (

package/src/components/Fab.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { FAB } from "react-native-paper";
 import { useComponents, useIcon, withWQ } from "@wq/react";
 import { useNav } from "./Link.js";

package/src/components/FormatJson.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Text, ScrollView } from "react-native";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";

package/src/components/Header.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Appbar } from "react-native-paper";
 import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
 import { useNav } from "./Link.js";

package/src/components/HorizontalView.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";

package/src/components/IconButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useIcon, withWQ } from "@wq/react";
 import { IconButton as PaperIconButton, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";

package/src/components/Img.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Image, TouchableOpacity, Dimensions } from "react-native";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";
@@ -10,6 +10,7 @@ function Img({ src, onPress, onClick, style, ...props }) {
             return;
         }
         if (typeof src !== "string") {
+            // eslint-disable-next-line @eslint-react/set-state-in-effect
             setSource(src);
             return;
         }

package/src/components/Link.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
 import { Button } from "react-native";
 import PropTypes from "prop-types";

package/src/components/ListItem.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useIcon, withWQ } from "@wq/react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";

package/src/components/ListItemLink.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { useComponents, withWQ } from "@wq/react";
 import { useNav } from "./Link.js";
 import ListItem from "./ListItem.js";

package/src/components/Popup.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Modal, Portal } from "react-native-paper";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";

package/src/components/RadioButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { RadioButton as PaperRadioButton, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";
@@ -18,7 +17,7 @@ function RadioButton({ checked, color, ...rest }) {
     } else if (color === "secondary") {
         color = theme.colors.accent;
     }
-    return <PaperRadioButton status={status} {...rest} />;
+    return <PaperRadioButton status={status} color={color} {...rest} />;
 }
 
 RadioButton.propTypes = {

package/src/components/ScrollView.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { ScrollView as PaperScrollView } from "react-native";
 import { useTheme } from "react-native-paper";
 import PropTypes from "prop-types";

package/src/components/SidePanel.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useComponents, withWQ } from "@wq/react";
 import { View } from "react-native";
 import { useTheme } from "react-native-paper";

package/src/components/Switch.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { Switch as PaperSwitch, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
 import { withWQ } from "@wq/react";
@@ -10,7 +9,7 @@ function Switch({ checked: value, color, ...rest }) {
     } else if (color === "secondary") {
         color = theme.colors.accent;
     }
-    return <PaperSwitch value={value} {...rest} />;
+    return <PaperSwitch value={value} color={color} {...rest} />;
 }
 
 Switch.propTypes = {

package/src/components/TabGroup.js

@@ -5,6 +5,7 @@ import { SegmentedButtons } from "react-native-paper";
 import PropTypes from "prop-types";
 
 function TabGroup({ children, style, ...rest }) {
+    // eslint-disable-next-line @eslint-react/no-children-to-array
     const tabs = React.Children.toArray(children),
         [value, setValue] = useState(tabs[0].props.value),
         activeTab = tabs.find((tab) => tab.props.value === value),

package/src/components/TableCell.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { View } from "react-native";
 import { DataTable } from "react-native-paper";
 import PropTypes from "prop-types";

package/src/components/Typography.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {
     Text,
     Subheading,