chore: update linters

package.json

@@ -26,7 +26,7 @@
     "clean-lib": "rimraf lib",
     "cspell": "cspell lint \"**/*.tsx\"",
     "dev": "vite --host localhost --port 3000 --open",
-    "eslint": "eslint . --cache --max-warnings=97",
+    "eslint": "eslint . --cache --max-warnings=126",
     "eslint-fix": "node --run eslint -- --fix",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
     "knip": "knip",
@@ -143,11 +143,11 @@
     "@vitest/coverage-v8": "^4.1.7",
     "@zakodium/tsconfig": "^1.0.5",
     "cross-env": "^10.1.0",
-    "cspell": "^10.0.0",
+    "cspell": "^10.0.1",
     "eslint": "^9.39.2",
-    "eslint-config-cheminfo-react": "^20.0.1",
-    "eslint-config-cheminfo-typescript": "^22.0.0",
-    "knip": "^6.14.2",
+    "eslint-config-cheminfo-react": "^20.1.0",
+    "eslint-config-cheminfo-typescript": "^22.1.0",
+    "knip": "^6.16.1",
     "modern-normalize": "^3.0.1",
     "postcss": "^8.5.15",
     "postcss-styled-syntax": "^0.7.1",
@@ -158,7 +158,7 @@
     "react-router-dom": "^7.15.1",
     "rimraf": "^6.1.3",
     "serve": "^14.2.6",
-    "stylelint": "^17.12.0",
+    "stylelint": "^17.13.0",
     "stylelint-config-standard": "^40.0.0",
     "typescript": "~6.0.3",
     "vite": "^8.0.14",

src/component/1d-2d/components/SpectrumInfoBlock.tsx

@@ -75,11 +75,9 @@ function SpectrumInfoBlock() {
   const infoFields = fields.filter((field) => field.visible);
   const totalSpace =
     verticalSpace *
-    ((infoFields?.length < 2
+    ((infoFields?.length < 2 || infoFields?.length - (infoFields?.length % 2)
       ? 2
-      : infoFields?.length - (infoFields?.length % 2)
-        ? 2
-        : 1) || 0);
+      : 1) || 0);
 
   const [
     ref,

src/component/elements/Button.tsx

@@ -203,7 +203,7 @@ const styles: Style = {
 type TooltipOrientation = 'vertical' | 'horizontal';
 
 //based on the tooltip from react-science
-const toolTipStyle = (orientation: TooltipOrientation) => {
+const tooltipStyle = (orientation: TooltipOrientation) => {
   const common: CSSObject = {
     display: 'none',
     position: 'absolute',
@@ -306,7 +306,7 @@ function Button<E extends ElementType = 'button'>(props: ButtonProps<E>) {
         <span style={{ flex: 1, pointerEvents: 'none' }}>{props.children}</span>
       </Wrapper>
       {toolTip && (
-        <div className="content" css={toolTipStyle(tooltipOrientation)}>
+        <div className="content" css={tooltipStyle(tooltipOrientation)}>
           <span
             style={{
               display: 'flex',

src/component/elements/CloseButton.tsx

@@ -1,13 +1,13 @@
 import { FaTimes } from 'react-icons/fa';
 import type { ToolbarItemProps } from 'react-science/ui';
 
-import { ToolBarButton } from './ToolBarButton.js';
+import { ToolbarButton } from './toolbar_button.tsx';
 
 export function CloseButton(
   props: Pick<ToolbarItemProps, 'onClick' | 'tooltip'>,
 ) {
   return (
-    <ToolBarButton
+    <ToolbarButton
       id="close-button"
       {...props}
       intent="danger"

src/component/elements/SaveButton.tsx

@@ -1,13 +1,13 @@
 import { FaCheck } from 'react-icons/fa';
 import type { ToolbarItemProps } from 'react-science/ui';
 
-import { ToolBarButton } from './ToolBarButton.js';
+import { ToolbarButton } from './toolbar_button.tsx';
 
 export function SaveButton(
   props: Pick<ToolbarItemProps, 'onClick' | 'tooltip'>,
 ) {
   return (
-    <ToolBarButton
+    <ToolbarButton
       id="save-button"
       {...props}
       intent="success"

src/component/elements/Sections.tsx

@@ -114,7 +114,7 @@ const SectionWrapper = styled.div<
   ({ isOpen, isOverflow, matchContentHeight }) => `
   display: flex;
   flex:none;
-  flex: ${isOpen && !matchContentHeight ? (isOverflow ? '1' : isOverflow ? '1' : '1 1 1px') : 'none'};
+  flex: ${isOpen && !matchContentHeight ? (isOverflow ? '1' : '1 1 1px') : 'none'};
   flex-direction: column;
 `,
 );

src/component/elements/export/ExportManager.tsx

@@ -11,7 +11,7 @@ import {
 import { useChartData } from '../../context/ChartContext.js';
 import { usePreferences } from '../../context/PreferencesContext.js';
 import { useToaster } from '../../context/ToasterContext.js';
-import { useExportViewPort } from '../../hooks/useExport.js';
+import { useExportViewport } from '../../hooks/useExport.js';
 import { useWorkspaceExportSettings } from '../../hooks/useWorkspaceExportSettings.js';
 
 import { ExportContent } from './ExportContent.js';
@@ -89,7 +89,7 @@ export function ExportManagerController(props: ExportManagerControllerProps) {
   );
 
   const { saveAsPNGHandler, saveAsSVGHandler, copyPNGToClipboardHandler } =
-    useExportViewPort();
+    useExportViewport();
 
   function handleCloseExportOptionsDialog() {
     triggerExport(null);

src/component/elements/export/utilities/exportOptionValidationSchema.ts

@@ -63,10 +63,8 @@ const advanceExportOptionValidationSchema = Yup.object().shape({
     .test(
       'width-test',
       `Width should be less or equal to ${MAX_PIXEL}`,
-      // eslint-disable-next-line func-names
-      function (value) {
-        // eslint-disable-next-line no-invalid-this
-        const { unit, dpi } = this.parent;
+      (value, context) => {
+        const { unit, dpi } = context.parent;
         return testSize(value, unit, dpi);
       },
     ),
@@ -76,10 +74,8 @@ const advanceExportOptionValidationSchema = Yup.object().shape({
     .test(
       'height-test',
       `Height should be less or equal to ${MAX_PIXEL}`,
-      // eslint-disable-next-line func-names
-      function (value) {
-        // eslint-disable-next-line no-invalid-this
-        const { unit, dpi } = this.parent;
+      (value, context) => {
+        const { unit, dpi } = context.parent;
         return testSize(value, unit, dpi);
       },
     ),

src/component/elements/ToolBarButton.tsx → src/component/elements/toolbar_button.tsx

@@ -1,7 +1,7 @@
 import type { ToolbarItemProps } from 'react-science/ui';
 import { Toolbar } from 'react-science/ui';
 
-export function ToolBarButton(props: ToolbarItemProps) {
+export function ToolbarButton(props: ToolbarItemProps) {
   return (
     <Toolbar>
       <Toolbar.Item {...props} />

src/component/hooks/useExport.tsx

@@ -80,7 +80,7 @@ export function useExport() {
   };
 }
 
-export function useExportViewPort() {
+export function useExportViewport() {
   const toaster = useToaster();
   const state = useChartData();
 

src/component/hooks/useWorkspaceAction.ts

@@ -33,11 +33,11 @@ export function useWorkspaceAction() {
     workspaceName: string,
     data?: Omit<Workspace, 'version' | 'label'>,
   ) {
-    const workSpaceData = data ?? current;
-    const newWorkSpace = lodashMerge(
+    const workspaceData = data ?? current;
+    const newWorkspace = lodashMerge(
       {},
       workspaceDefaultProperties,
-      workSpaceData,
+      workspaceData,
       {
         version: 1,
         label: workspaceName,
@@ -49,15 +49,15 @@ export function useWorkspaceAction() {
     const settings = {
       ...localData,
       currentWorkspace: workspaceKey,
-      workspaces: { ...localData?.workspaces, [workspaceKey]: newWorkSpace },
+      workspaces: { ...localData?.workspaces, [workspaceKey]: newWorkspace },
     };
     updateSettings(settings as Settings);
 
     dispatch({
       type: 'ADD_WORKSPACE',
       payload: {
         workspaceKey,
-        data: newWorkSpace,
+        data: newWorkspace,
       },
     });
   }

src/component/main/InnerNMRiumContents.tsx

@@ -14,7 +14,7 @@ import { PrintContent } from '../elements/print/PrintContent.js';
 import { Header } from '../header/Header.js';
 import DropZone from '../loader/DropZone.js';
 import { PanelsBar } from '../panels/PanelsBar.js';
-import ToolBar from '../toolbar/ToolBar.js';
+import NMRToolbar from '../toolbar/nmr_toolbar.tsx';
 
 import { useNMRiumRefAPI } from './NMRiumRefAPI.js';
 import { NMRiumViewer } from './NMRiumViewer.js';
@@ -144,7 +144,7 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
               >
                 <KeysListenerTracker mainDivRef={mainDivRef} />
 
-                <ToolBar />
+                <NMRToolbar />
                 <NMRiumViewerWrapper
                   viewerRef={viewerRef}
                   emptyText={emptyText}

src/component/main/NMRiumViewer.tsx

@@ -31,7 +31,7 @@ interface ViewerProps {
 
 export function NMRiumViewer(props: NMRiumViewerProps) {
   const { emptyText, viewerRef, onRender, style = {} } = props;
-  const viewPort = useViewportSize();
+  const viewportSize = useViewportSize();
   const { displayerMode } = useChartData();
   const exportSettings = useExportSettings();
   const printSettings = usePrintPage();
@@ -82,7 +82,7 @@ export function NMRiumViewer(props: NMRiumViewerProps) {
     <div
       id="nmrium-viewer"
       data-testid="viewer"
-      ref={!viewPort ? viewerRef : null}
+      ref={!viewportSize ? viewerRef : null}
       style={{
         width: '100%',
         height: '100%',

src/component/modal/AboutPredictionModal.tsx

@@ -59,7 +59,7 @@ function AboutPredictionModal() {
             <li>
               Damiano Banfi and Luc Patiny{' '}
               <a
-                href="http://dx.doi.org/10.2533/chimia.2008.280"
+                href="https://dx.doi.org/10.2533/chimia.2008.280"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -70,7 +70,7 @@ function AboutPredictionModal() {
             <li>
               Andrés M. Castillo, Luc Patiny and Julien Wist{' '}
               <a
-                href="http://dx.doi.org/10.1016/j.jmr.2010.12.008"
+                href="https://dx.doi.org/10.1016/j.jmr.2010.12.008"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -89,7 +89,7 @@ function AboutPredictionModal() {
             <li>
               Yuri Binev, Maria M. B. Marques and João Aires-de-Sousa{' '}
               <a
-                href="http://dx.doi.org/10.1021/ci700172n"
+                href="https://dx.doi.org/10.1021/ci700172n"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -101,7 +101,7 @@ function AboutPredictionModal() {
             <li>
               João Aires-de-Sousa, Markus C. Hemmer and Johann Gasteiger{' '}
               <a
-                href="http://dx.doi.org/10.1021/ac010737m"
+                href="https://dx.doi.org/10.1021/ac010737m"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -118,7 +118,7 @@ function AboutPredictionModal() {
             <li>
               Steinbeck, Christoph, Stefan Krause, and Stefan Kuhn{' '}
               <a
-                href="http://dx.doi.org/10.1021/ci0341363"
+                href="https://dx.doi.org/10.1021/ci0341363"
                 target="_blank"
                 rel="noreferrer"
               >

src/component/modal/AboutSpectrumSimulationModal.tsx

@@ -63,7 +63,7 @@ function AboutSpectrumSimulationModal() {
             <li>
               Andrés M. Castillo, Luc Patiny and Julien Wist{' '}
               <a
-                href="http://dx.doi.org/10.1016/j.jmr.2010.12.008"
+                href="https://dx.doi.org/10.1016/j.jmr.2010.12.008"
                 target="_blank"
                 rel="noreferrer"
               >

src/component/modal/LoadJCAMPModal.tsx

@@ -23,7 +23,7 @@ const loadFormValidation = Yup.object({
       (url) => {
         try {
           const fileURL = new URL(url);
-          const extension = fileURL.pathname.split('.')?.[1] || '';
+          const extension = fileURL.pathname.split('.', 2)[1] || '';
           if (allowedExtensions.has(extension)) {
             return true;
           }

src/component/modal/editRange/forms/components/NewSignalTab.tsx

@@ -123,9 +123,8 @@ export function NewSignalTab(props: NewSignalTabProps) {
 function getSignalValidationSchema(range: Range) {
   return Yup.object().shape({
     delta: Yup.number()
-      .test(`test-range`, '', function testNewSignalDelta(value) {
-        // eslint-disable-next-line no-invalid-this
-        const { path, createError } = this;
+      .test(`test-range`, '', function testNewSignalDelta(value, context) {
+        const { path, createError } = context;
         if (value && value >= range.from && value <= range.to) {
           return true;
         }

src/component/modal/editRange/forms/validation/EditRangeValidation.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-invalid-this */
 import * as Yup from 'yup';
 
 import { hasCouplingConstant } from '../../../../panels/extra/utilities/MultiplicityUtilities.js';
@@ -14,10 +13,10 @@ const editRangeFormValidation = Yup.object().shape({
             coupling: Yup.mixed().test(
               'checkValue',
               '',
-              function testCoupling(value) {
-                const { path, createError } = this;
+              function testCoupling(value, context) {
+                const { path, createError } = context;
                 const hasCoupling = hasCouplingConstant(
-                  this.parent.multiplicity,
+                  context.parent.multiplicity,
                 );
 
                 if ((!hasCoupling && !value) || (hasCoupling && value)) {
@@ -36,18 +35,18 @@ const editRangeFormValidation = Yup.object().shape({
         .test(
           'checkMultiplicity',
           'Massive multiplicity requires exactly one coupling',
-          function test(js) {
+          function test(js, context) {
             const multiplicity: string =
               js?.map((j) => j.multiplicity).join('') || '';
 
             if (multiplicity.includes('m') && js && js?.length > 1) {
-              return this.createError({
+              return context.createError({
                 message: 'Massive multiplicity requires exactly one coupling',
               });
             }
 
             if (multiplicity.includes('s') && js && js?.length > 1) {
-              return this.createError({
+              return context.createError({
                 message: 'Singlet multiplicity requires exactly one coupling',
               });
             }

src/component/modal/metaImportation/MetaImportationModal.tsx

@@ -160,7 +160,7 @@ function InnerMetaImportationModal({
 
   const errors = mapErrors(parseResult?.errors || []);
 
-  const metaData: ParseResult<any>['data'] = parseResult?.data || [];
+  const metadata: ParseResult<any>['data'] = parseResult?.data || [];
 
   const columns = useMemo(() => {
     const fields = parseResult?.meta.fields || [];
@@ -305,7 +305,7 @@ function InnerMetaImportationModal({
               <div style={{ height: 'calc(100% - 160px)' }}>
                 <ReactTable
                   columns={columns}
-                  data={metaData}
+                  data={metadata}
                   approxItemHeight={25}
                   approxColumnWidth={100}
                   enableVirtualScroll

src/component/modal/setting/WorkspaceItem.tsx

@@ -86,7 +86,7 @@ function WorkspaceItem({ item, onSave, onDelete }: WorkspaceItemProps) {
         </div>
       ) : (
         <div style={styles.container}>
-          <WorkSpaceIndicator source={item.source} />
+          <WorkspaceIndicator source={item.source} />
           <span style={styles.workspaceName}>{item.label}</span>
           {item.source !== 'user' && (
             <span style={styles.readOnly}>Read Only</span>
@@ -115,7 +115,7 @@ const style = {
   alignItems: 'center',
 };
 
-const WorkSpaceIndicator = (props: { source: WorkSpaceSource }) => {
+const WorkspaceIndicator = (props: { source: WorkSpaceSource }) => {
   let letter = '';
   let backgroundColor = 'red';