feat: create base of the new general settings form (#3957)

Author: Sebastien-Ahkrin

package-lock.json

@@ -113,7 +113,7 @@
     "react-ocl-nmr": "^4.1.1",
     "react-plot": "^3.1.2",
     "react-rnd": "^10.5.2",
-    "react-science": "^19.7.1",
+    "react-science": "^19.8.0",
     "react-table": "^7.8.0",
     "smart-array-filter": "^5.0.0",
     "yup": "^1.7.1",

package.json

@@ -18,9 +18,9 @@ import { ActionsButtonsPopover } from '../../../elements/ActionsButtonsPopover.j
 import { useSVGUnitConverter } from '../../../hooks/useSVGUnitConverter.js';
 import { useCheckExportStatus } from '../../../hooks/useViewportSize.js';
 import { useMoleculeEditor } from '../../../modal/MoleculeStructureEditorModal.js';
-import { MoleculeStructure } from '../../../panels/MoleculesPanel/MoleculeStructure.tsx';
-import { useMoleculeAnnotationCore } from '../../../panels/hooks/useMoleculeAnnotationCore.ts';
-import { booleanToString } from '../../../utility/booleanToString.ts';
+import { MoleculeStructure } from '../../../panels/MoleculesPanel/MoleculeStructure.js';
+import { useMoleculeAnnotationCore } from '../../../panels/hooks/useMoleculeAnnotationCore.js';
+import { booleanToString } from '../../../utility/booleanToString.js';
 
 interface DraggableStructureProps {
   moleculeView: MoleculeView;

src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx

@@ -6,7 +6,7 @@ import { useResizeObserver } from 'react-d3-utils';
 import { BsArrowsMove } from 'react-icons/bs';
 import { FaTimes } from 'react-icons/fa';
 
-import { useIsInset } from '../../1d/inset/InsetProvider.tsx';
+import { useIsInset } from '../../1d/inset/InsetProvider.js';
 import { useChartData } from '../../context/ChartContext.js';
 import { useGlobal } from '../../context/GlobalContext.js';
 import { usePreferences } from '../../context/PreferencesContext.js';

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

@@ -6,17 +6,17 @@ import { FaTimes } from 'react-icons/fa';
 import { Rnd } from 'react-rnd';
 import { SVGStyledText } from 'react-science/ui';
 
-import { isSpectrum1D } from '../../data/data1d/Spectrum1D/index.ts';
+import { isSpectrum1D } from '../../data/data1d/Spectrum1D/index.js';
 import { useChartData } from '../context/ChartContext.js';
 import { useDispatch } from '../context/DispatchContext.js';
 import { useGlobal } from '../context/GlobalContext.js';
 import type { ActionsButtonsPopoverProps } from '../elements/ActionsButtonsPopover.js';
 import { ActionsButtonsPopover } from '../elements/ActionsButtonsPopover.js';
 import { useSVGUnitConverter } from '../hooks/useSVGUnitConverter.js';
-import { useTextMetrics } from '../hooks/useTextMetrics.ts';
+import { useTextMetrics } from '../hooks/useTextMetrics.js';
 import { useCheckExportStatus } from '../hooks/useViewportSize.js';
-import { useACSSettings } from '../hooks/use_acs_settings.ts';
-import { usePublicationStrings } from '../hooks/use_publication_strings.ts';
+import { useACSSettings } from '../hooks/use_acs_settings.js';
+import { usePublicationStrings } from '../hooks/use_publication_strings.js';
 
 const ReactRnd = styled(Rnd)`
   border: 1px solid transparent;

src/component/1d/FloatPublicationString.tsx

@@ -16,7 +16,7 @@ import { useDispatch } from '../context/DispatchContext.js';
 import { useGlobal } from '../context/GlobalContext.js';
 import type { ActionsButtonsPopoverProps } from '../elements/ActionsButtonsPopover.js';
 import { ActionsButtonsPopover } from '../elements/ActionsButtonsPopover.js';
-import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.ts';
+import { useActiveNucleusTab } from '../hooks/useActiveNucleusTab.js';
 import { usePanelPreferences } from '../hooks/usePanelPreferences.js';
 import { useSVGUnitConverter } from '../hooks/useSVGUnitConverter.js';
 import useSpectraByActiveNucleus from '../hooks/useSpectraPerNucleus.js';

src/component/1d/FloatingRanges.tsx

@@ -1,6 +1,6 @@
 import { ClipPathContainer } from '../1d-2d/components/ClipPathContainer.js';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock.js';
-import { ShareDataProvider } from '../context/ShareDataContext.tsx';
+import { ShareDataProvider } from '../context/ShareDataContext.js';
 
 import { ApodizationLine } from './ApodizationLine.js';
 import ExclusionZonesAnnotations from './ExclusionZonesAnnotations.js';

src/component/1d/SVGContent1D.tsx

@@ -15,14 +15,14 @@ import { FaSitemap, FaTimes } from 'react-icons/fa';
 import { LuMessageSquareText } from 'react-icons/lu';
 import { Rnd } from 'react-rnd';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/isSpectrum1D.ts';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/isSpectrum1D.js';
 import { SVGRootContainer } from '../../1d-2d/components/SVGRootContainer.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { useGlobal } from '../../context/GlobalContext.js';
 import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js';
 import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js';
 import { useSVGUnitConverter } from '../../hooks/useSVGUnitConverter.js';
-import useSpectrum from '../../hooks/useSpectrum.ts';
+import useSpectrum from '../../hooks/useSpectrum.js';
 import { useCheckExportStatus } from '../../hooks/useViewportSize.js';
 import { booleanToString } from '../../utility/booleanToString.js';
 import type { FilterType } from '../../utility/filterType.js';

src/component/1d/inset/DraggableInset.tsx

@@ -5,7 +5,7 @@ import { useChartData } from '../../context/ChartContext.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
 import { ResizerWithScale } from '../../elements/ResizerWithScale.js';
-import type { Position } from '../../elements/resizer/SVGResizer.tsx';
+import type { Position } from '../../elements/resizer/SVGResizer.js';
 import { useHighlight } from '../../highlight/index.js';
 import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 import useSpectrum from '../../hooks/useSpectrum.js';

src/component/1d/integral/IntegralResizable.tsx

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 
 import { useChartData } from '../../context/ChartContext.js';
 import { useScaleChecked } from '../../context/ScaleContext.js';
-import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.ts';
+import { useActiveNucleusTab } from '../../hooks/useActiveNucleusTab.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import { PathBuilder } from '../../utility/PathBuilder.js';
 import { getYScaleWithRation } from '../utilities/scale.js';