lint

babel.config.cjs

@@ -1,5 +1,14 @@
+console.log(process.env.BABEL_ENV);
+console.log(process.env.NODE_ENV);
+
 module.exports = {
-    plugins: [["@babel/plugin-transform-react-jsx", { useSpread: true }]],
+    plugins: [
+        ["@babel/plugin-transform-react-jsx", { useSpread: true }],
+        process.env.NODE_ENV !== "test" && [
+            "transform-rename-import",
+            { original: "^(.+?)\\.jsx$", replacement: "$1.js" },
+        ],
+    ].filter(Boolean),
     env: {
         test: {
             presets: [["@babel/preset-env", { targets: { node: "current" } }]],

package.json

@@ -13,6 +13,7 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.23.0",
+        "@babel/eslint-parser": "^7.22.15",
         "@babel/plugin-transform-react-jsx": "^7.22.15",
         "@babel/preset-env": "^7.23.2",
         "@rollup/plugin-babel": "^6.0.4",
@@ -22,7 +23,11 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@wq/rollup-plugin": "^2.0.0-beta.1",
         "babel-plugin-direct-import": "^1.0.0",
+        "babel-plugin-transform-rename-import": "^2.3.0",
         "eslint": "^8.51.0",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jest": "^27.4.2",
+        "eslint-plugin-react": "^7.33.2",
         "jest": "^29.7.0",
         "jest-fetch-mock": "^3.0.3",
         "prettier": "^3.0.3",

packages/analyst/src/components/AnalystForm.jsx

@@ -3,6 +3,7 @@ import { Formik } from "formik";
 import { Grid } from "@mui/material";
 import { AutoInput } from "@wq/react";
 import { View } from "@wq/material";
+import PropTypes from "prop-types";
 
 export default function AnalystForm({ form, options, setOptions }) {
     return (
@@ -22,6 +23,12 @@ export default function AnalystForm({ form, options, setOptions }) {
     );
 }
 
+AnalystForm.propTypes = {
+    form: PropTypes.arrayOf(PropTypes.object),
+    options: PropTypes.object,
+    setOptions: PropTypes.func,
+};
+
 function GridInput(props) {
     if (props.type === "hidden") {
         return <AutoInput {...props} />;
@@ -39,3 +46,8 @@ function GridInput(props) {
         );
     }
 }
+
+GridInput.propTypes = {
+    type: PropTypes.string,
+    fullwidth: PropTypes.bool,
+};

packages/analyst/src/components/AnalystTable.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo, useCallback } from "react";
 import { Badge, Menu, MenuItem } from "@mui/material";
-import { useAnalystData } from "../hooks";
+import { useAnalystData } from "../hooks.js";
 import { useComponents, useNav, useApp } from "@wq/react";
 import PropTypes from "prop-types";
 

packages/analyst/src/components/Icon.jsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { useIcon } from "@wq/react";
+import PropTypes from "prop-types";
 
 export default function Icon({ icon }) {
     const Icon = useIcon(icon);
     return Icon ? <Icon /> : icon;
 }
 
+Icon.propTypes = { icon: PropTypes.string };
+
 export function labelWithIcon(label, iconName) {
     return (
         <>

packages/analyst/src/views/Analyst.jsx

@@ -1,16 +1,14 @@
-import React, { useState, useMemo, useEffect } from "react";
-import { Grid } from "@mui/material";
-import { useComponents, useIcon, AutoInput } from "@wq/react";
+import React from "react";
+import { useComponents } from "@wq/react";
 import { Series, Scatter, Boxplot } from "@wq/chart";
-import { useAnalyst } from "../hooks";
+import { useAnalyst } from "../hooks.js";
 
-export default function Analyst(props) {
+export default function Analyst() {
     const { View, Typography, AnalystDownload, AnalystTable, AnalystForm } =
             useComponents(),
         {
             url,
             data,
-            modes,
             error,
             title,
             formats,

packages/chart/src/charts/Boxplot.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { usePlotly, usePlotData, usePlotLayout } from "../hooks";
+import { usePlotly, usePlotData, usePlotLayout } from "../hooks.js";
+import PropTypes from "prop-types";
 
 export default function Boxplot({ datasets, x, y, group, layout, style }) {
     const Plot = usePlotly(),
@@ -14,3 +15,12 @@ export default function Boxplot({ datasets, x, y, group, layout, style }) {
         />
     );
 }
+
+Boxplot.propTypes = {
+    datasets: PropTypes.arrayOf(PropTypes.object),
+    x: PropTypes.string,
+    y: PropTypes.string,
+    group: PropTypes.string,
+    layout: PropTypes.object,
+    style: PropTypes.object,
+};

packages/chart/src/charts/Scatter.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { usePlotly, usePlotData, usePlotLayout } from "../hooks";
+import { usePlotly, usePlotData, usePlotLayout } from "../hooks.js";
+import PropTypes from "prop-types";
 
 export default function Scatter({ datasets, x, y, label, layout, style }) {
     const Plot = usePlotly(),
@@ -21,3 +22,12 @@ export default function Scatter({ datasets, x, y, label, layout, style }) {
         />
     );
 }
+
+Scatter.propTypes = {
+    datasets: PropTypes.arrayOf(PropTypes.object),
+    x: PropTypes.string,
+    y: PropTypes.string,
+    label: PropTypes.string,
+    layout: PropTypes.object,
+    style: PropTypes.object,
+};

packages/chart/src/charts/Series.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { usePlotly, usePlotData, usePlotLayout } from "../hooks";
+import { usePlotly, usePlotData, usePlotLayout } from "../hooks.js";
+import PropTypes from "prop-types";
 
 export default function Series({ datasets, x, y, layout, style }) {
     const Plot = usePlotly(),
@@ -20,3 +21,11 @@ export default function Series({ datasets, x, y, layout, style }) {
         />
     );
 }
+
+Series.propTypes = {
+    datasets: PropTypes.arrayOf(PropTypes.object),
+    x: PropTypes.string,
+    y: PropTypes.string,
+    layout: PropTypes.object,
+    style: PropTypes.object,
+};

packages/chart/src/hooks.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
-import config from "./config";
+import config from "./config.js";
 import createPlotlyComponent from "react-plotly.js/factory";
 
 const plotlyRef = {},

packages/chart/src/index.js

@@ -1,4 +1,4 @@
-import config from "./config";
+import config from "./config.js";
 
 const chart = {
     name: "chart",