StatsHouse UI: update zustand + eslint rules

Author: vauweb

statshouse-ui/eslint.config.js

@@ -28,24 +28,21 @@ export default tseslint.config({
     ...react.configs.recommended.rules,
     ...react.configs['jsx-runtime'].rules,
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    // 'react-hooks/rules-of-hooks': 'warn',
     'react-hooks/exhaustive-deps': [
       'error',
       {
         enableDangerousAutofixThisMayCauseInfiniteLoops: true,
       },
     ],
-    // indent: 'off',
     'prettier/prettier': 'warn',
     'arrow-body-style': ['warn', 'as-needed'],
-    //       'prefer-arrow-callback': 'off',
     'react/no-unescaped-entities': 'off',
     'no-console': 'warn',
     'no-empty': ['error', { allowEmptyCatch: true }],
     '@typescript-eslint/no-unused-vars': [
       'error',
       {
-        args: 'after-used',
+        args: 'all',
         argsIgnorePattern: '^_',
         caughtErrors: 'all',
         caughtErrorsIgnorePattern: '^_',

statshouse-ui/package-lock.json

@@ -58,7 +58,7 @@
     "vite": "^6.0.7",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "zustand": "^4.5.6"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -78,7 +78,8 @@
     "test:watch": "jest --watch",
     "genPromQlGrammar": "cd src/lib/lezer && bash build.sh",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "tsc": "tsc"
   },
   "browserslist": {
     "production": [

statshouse-ui/package.json

@@ -7,20 +7,20 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStatsHouse } from '@/store2';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { selectApiDashboardList, useApiDashboardList } from '../../api/dashboardsList';
-import { apiDashboardSave, DashboardInfo, useApiDashboard } from '../../api/dashboard';
+import { selectApiDashboardList, useApiDashboardList } from '@/api/dashboardsList';
+import { apiDashboardSave, DashboardInfo, useApiDashboard } from '@/api/dashboard';
 import cn from 'classnames';
-import { useIntersectionObserver } from '../../hooks';
-import { isObject, SearchFabric, toNumber } from '../../common/helpers';
-import { isUrlSearchArray } from '../../store2/urlStore/normalizeDashboard';
-import { arrToObj, getDefaultParams, toTreeObj, treeParamsObjectValueSymbol } from '../../url2';
-import { GET_PARAMS } from '../../api/enum';
-import { loadDashboard } from '../../store2/urlStore/loadDashboard';
+import { useIntersectionObserver } from '@/hooks';
+import { isObject, SearchFabric, toNumber } from '@/common/helpers';
+import { isUrlSearchArray } from '@/store2/urlStore/normalizeDashboard';
+import { arrToObj, toTreeObj, treeParamsObjectValueSymbol } from '@/url2';
+import { GET_PARAMS } from '@/api/enum';
+import { loadDashboard } from '@/store2/urlStore/loadDashboard';
 import { Link, useSearchParams } from 'react-router-dom';
-import { Button } from '../../components/UI';
+import { Button } from '@/components/UI';
 import { ReactComponent as SVGFloppy } from 'bootstrap-icons/icons/floppy.svg';
 import { produce } from 'immer';
-import { fmtInputDateTime } from '../../view/utils2';
+import { fmtInputDateTime } from '@/view/utils2';
 
 const versionsList = [0, 1, 2, 3];
 const actualVersion = 3;
@@ -31,7 +31,6 @@ function useUpdateDashboard() {
     retry: false,
     mutationFn: async (id: number) => {
       const { params: saveParams, error: errorLoad } = await loadDashboard(
-        { ...getDefaultParams() },
         toTreeObj({ [GET_PARAMS.dashboardID]: [id.toString()] })
       );
       if (errorLoad) {

statshouse-ui/src/admin/AdminDashControl/AdminDashControl.tsx

@@ -18,7 +18,7 @@ export function stackData(data: uPlot.AlignedData): { data: uPlot.AlignedData; b
   }
   for (let i = 1; i < data.length; i++) {
     bands.push({
-      series: [data.findIndex((s, j) => j > i), i],
+      series: [data.findIndex((_s, j) => j > i), i],
     });
   }
   bands = bands.filter((b) => b.series[0] > -1);

statshouse-ui/src/common/stackData.ts

@@ -5,10 +5,10 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import React, { useCallback } from 'react';
-import { MetricMetaValue } from '../../api/metric';
-import { toTagKey } from '../../url/queryParams';
-import { TAG_KEY, TagKey } from '../../api/enum';
-import { getTagDescription, isTagEnabled } from '../../view/utils2';
+import { MetricMetaValue } from '@/api/metric';
+import { toTagKey } from '@/url/queryParams';
+import { TAG_KEY, TagKey } from '@/api/enum';
+import { getTagDescription, isTagEnabled } from '@/view/utils2';
 
 export type VariablePlotLinkSelectProps = {
   indexPlot: number;
@@ -27,7 +27,7 @@ export function VariablePlotLinkSelect({ indexPlot, selectTag, metricMeta, onCha
   return (
     <select className="form-select form-select-sm" value={selectTag?.toString() ?? 'null'} onChange={changeTag}>
       <option value="null">-</option>
-      {metricMeta?.tags?.map((tag, indexTag) => {
+      {metricMeta?.tags?.map((_tag, indexTag) => {
         const keyTag = toTagKey(indexTag);
         return (
           keyTag != null &&

statshouse-ui/src/components/DashboardSettings/VariablePlotLinkSelect.tsx

@@ -3,21 +3,21 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
-import { FilterTag, toTagKey, type VariableParamsSource } from '../../url/queryParams';
+import { FilterTag, toTagKey, type VariableParamsSource } from '@/url/queryParams';
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { SelectMetric } from '../SelectMertic';
-import { isTagKey, TAG_KEY, TagKey } from '../../api/enum';
+import { isTagKey, TAG_KEY, TagKey } from '@/api/enum';
 import { Button, ToggleButton } from '../UI';
-import { setUpdatedSource, useStore, useVariableListStore, VariableItem } from '../../store';
+import { setUpdatedSource, useStore, useVariableListStore, VariableItem } from '@/store';
 import { ReactComponent as SVGTrash } from 'bootstrap-icons/icons/trash.svg';
 import { ReactComponent as SVGPencil } from 'bootstrap-icons/icons/pencil.svg';
 import { VariableControl } from '../VariableControl';
 import cn from 'classnames';
 import { produce } from 'immer';
 import { TagBadges } from './TagBadges';
 import { dequal } from 'dequal/lite';
-import { mergeLeft } from '../../common/helpers';
-import { getTagDescription, isTagEnabled } from '../../view/utils2';
+import { mergeLeft } from '@/common/helpers';
+import { getTagDescription, isTagEnabled } from '@/view/utils2';
 
 export type VariableSourceProps = {
   value?: VariableParamsSource;
@@ -220,7 +220,7 @@ export function VariableSource({ value, indexValue = 0, onChange }: VariableSour
             <SelectMetric value={localMetric} onChange={onChangeMetric} placeholder={placeholder} />
           </div>
           <div>
-            {(meta?.tags || []).map((t, indexTag) => {
+            {(meta?.tags || []).map((_t, indexTag) => {
               const tagKey = toTagKey(indexTag, TAG_KEY._0);
               return !tagKey || !isTagEnabled(meta, tagKey) ? null : (
                 <div key={indexTag} className="form-check">

statshouse-ui/src/components/DashboardSettings/VariableSource.tsx

@@ -142,7 +142,7 @@ function UPlotWrapperNoMemo<LV = Record<string, unknown>>({
   onSetSelect,
   children,
 }: UPlotWrapperProps<LV>) {
-  const uRef = useRef<uPlot>();
+  const uRef = useRef<uPlot>(undefined);
   const uRefDiv = useRef<HTMLDivElement>(null);
   const { width, height } = useResizeObserver(uRefDiv);
   const hooksEvent = useRef<UPlotWrapperPropsHooks>({});

statshouse-ui/src/components/UPlotWrapper/UPlotWrapper.tsx

@@ -38,23 +38,26 @@ export const Dashboard = memo(function Dashboard({ className }: DashboardProps)
     isDashboard,
     saveDashboard,
   } = useStatsHouseShallow(
-    ({
-      params: { tabNum, dashboardName, orderPlot, orderVariables, dashboardId },
-      isEmbed,
-      dashboardLayoutEdit,
-      setDashboardLayoutEdit,
-      saveDashboard,
-    }) => ({
-      tabNum,
-      isEmbed,
-      dashboardName,
-      plotsLength: orderPlot.length,
-      variablesLength: orderVariables.length,
-      dashboardLayoutEdit,
-      setDashboardLayoutEdit,
-      isDashboard: dashboardId != null,
-      saveDashboard,
-    })
+    useCallback(
+      ({
+        params: { tabNum, dashboardName, orderPlot, orderVariables, dashboardId },
+        isEmbed,
+        dashboardLayoutEdit,
+        setDashboardLayoutEdit,
+        saveDashboard,
+      }) => ({
+        tabNum,
+        isEmbed,
+        dashboardName,
+        plotsLength: orderPlot.length,
+        variablesLength: orderVariables.length,
+        dashboardLayoutEdit,
+        setDashboardLayoutEdit,
+        isDashboard: dashboardId != null,
+        saveDashboard,
+      }),
+      []
+    )
   );
 
   const onSaveDashboard = useCallback(() => {

statshouse-ui/src/components2/Dashboard/Dashboard.tsx

@@ -37,26 +37,29 @@ export const DashboardGroup = memo(function DashboardGroup({ children, groupKey,
     removeDashboardGroup,
     moveDashboardGroup,
   } = useStatsHouseShallow(
-    ({
-      params: { groups, orderGroup },
-      dashboardLayoutEdit,
-      isEmbed,
-      setDashboardGroup,
-      addDashboardGroup,
-      removeDashboardGroup,
-      moveDashboardGroup,
-    }) => ({
-      groups,
-      isSingle: orderGroup.length === 1,
-      isFirst: groupKey === orderGroup[0],
-      isLast: groupKey === orderGroup[orderGroup.length - 1],
-      dashboardLayoutEdit,
-      isEmbed,
-      setDashboardGroup,
-      addDashboardGroup,
-      removeDashboardGroup,
-      moveDashboardGroup,
-    })
+    useCallback(
+      ({
+        params: { groups, orderGroup },
+        dashboardLayoutEdit,
+        isEmbed,
+        setDashboardGroup,
+        addDashboardGroup,
+        removeDashboardGroup,
+        moveDashboardGroup,
+      }) => ({
+        groups,
+        isSingle: orderGroup.length === 1,
+        isFirst: groupKey === orderGroup[0],
+        isLast: groupKey === orderGroup[orderGroup.length - 1],
+        dashboardLayoutEdit,
+        isEmbed,
+        setDashboardGroup,
+        addDashboardGroup,
+        removeDashboardGroup,
+        moveDashboardGroup,
+      }),
+      [groupKey]
+    )
   );
   const onEditGroupName = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {