refactor: use more of emotion/styled

cheminfo · Feb 19, 2025 · af9dfac · af9dfac
1 parent 2dcc98e
commit af9dfac
Show file tree

Hide file tree

Showing 45 changed files with 74 additions and 206 deletions.
diff --git a/src/component/1d-2d/components/SpectrumInfoBlock.tsx b/src/component/1d-2d/components/SpectrumInfoBlock.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import lodashGet from 'lodash/get.js';
 import type { Spectrum } from 'nmr-load-save';
 import type { CSSProperties } from 'react';

diff --git a/src/component/2d/zones/Signal.tsx b/src/component/2d/zones/Signal.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-
 import type { Signal2D } from 'nmr-processing';
 import { useCallback, useEffect, useState } from 'react';
 

diff --git a/src/component/2d/zones/SignalCrosshair.tsx b/src/component/2d/zones/SignalCrosshair.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-
 import type { Signal2D } from 'nmr-processing';
 import { useMemo } from 'react';
 

diff --git a/src/component/elements/DraggableDialog.tsx b/src/component/elements/DraggableDialog.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-
 import type {
   DialogProps,
   HTMLDivProps,

diff --git a/src/component/elements/NumberInput2.tsx b/src/component/elements/NumberInput2.tsx
@@ -1,16 +1,15 @@
-/** @jsxImportSource @emotion/react */
 import type { HTMLInputProps, NumericInputProps } from '@blueprintjs/core';
 import { Classes, NumericInput } from '@blueprintjs/core';
 import debounce from 'lodash/debounce.js';
+import type { ForwardedRef } from 'react';
 import {
+  forwardRef,
+  isValidElement,
   useEffect,
   useMemo,
-  useState,
-  isValidElement,
-  forwardRef,
   useRef,
+  useState,
 } from 'react';
-import type { ForwardedRef } from 'react';
 
 import useCombinedRefs from '../hooks/useCombinedRefs.js';
 

diff --git a/src/component/elements/ReactTable/ReactTableFlexLayout.tsx b/src/component/elements/ReactTable/ReactTableFlexLayout.tsx
@@ -1,7 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
 import type { CSSProperties } from 'react';
-import { useTable, useSortBy, useFlexLayout } from 'react-table';
+import { useFlexLayout, useSortBy, useTable } from 'react-table';
 
 import { BaseReactTable } from './BaseReactTable.js';
 

diff --git a/src/component/elements/ReadOnly.tsx b/src/component/elements/ReadOnly.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';

diff --git a/src/component/elements/Sections.tsx b/src/component/elements/Sections.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Icon, Tag } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type {

diff --git a/src/component/elements/TabTitle.tsx b/src/component/elements/TabTitle.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import type { ButtonProps } from '@blueprintjs/core';
 import { Button, Popover } from '@blueprintjs/core';
 import styled from '@emotion/styled';

diff --git a/src/component/elements/export/ExportContent.tsx b/src/component/elements/export/ExportContent.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import type { ExportSettings } from 'nmr-load-save';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';

diff --git a/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx b/src/component/header/SimplePhaseCorrectionTwoDimensionsPanel.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Select } from '@blueprintjs/select';
 import { FaRulerHorizontal, FaRulerVertical } from 'react-icons/fa';
 import { MdLooksTwo } from 'react-icons/md';

diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
-
-import { css, Global } from '@emotion/react';
+import { Global, css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { PrintPageOptions } from 'nmr-load-save';
 import type { ForwardedRef, MouseEvent, ReactNode, RefObject } from 'react';
 import { useCallback } from 'react';
@@ -25,7 +24,7 @@ import { StateError } from './StateError.js';
 
 import type { NMRiumProps, NMRiumRefAPI } from './index.js';
 
-const containerStyles = css`
+const NMRiumContainer = styled.div`
   background-color: white;
   width: 100%;
   display: block;
@@ -117,10 +116,9 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
           }
         `}
       />
-      <div
+      <NMRiumContainer
         className="nmrium-container"
         ref={rootRef}
-        css={containerStyles}
         onContextMenu={preventContextMenuHandler}
         style={{ height: '100%', width: '100%' }}
       >
@@ -177,7 +175,7 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
             <NMRiumViewer emptyText={emptyText} viewerRef={viewerRef} />
           </ExportManagerController>
         </FilterSyncOptionsProvider>
-      </div>
+      </NMRiumContainer>
     </>
   );
 }

diff --git a/src/component/modal/editRange/EditRangeModal.tsx b/src/component/modal/editRange/EditRangeModal.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Button, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';

diff --git a/src/component/modal/editRange/forms/components/SignalsContent.tsx b/src/component/modal/editRange/forms/components/SignalsContent.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Tab, Tabs } from '@blueprintjs/core';
 import type { Range } from 'nmr-processing';
 import {

diff --git a/src/component/modal/editZone/SignalsForm.tsx b/src/component/modal/editZone/SignalsForm.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Tab, Tabs } from '@blueprintjs/core';
 import { useFormContext, useWatch } from 'react-hook-form';
 

diff --git a/src/component/modal/metaImportation/MetaImportationModal.tsx b/src/component/modal/metaImportation/MetaImportationModal.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { ParseResult } from 'papaparse';

diff --git a/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx b/src/component/panels/AutomaticAssignment/AutomaticAssignment.tsx
@@ -1,10 +1,9 @@
-/** @jsxImportSource @emotion/react */
 import { SvgNmrAssignment2 } from 'cheminfo-font';
 import { FaBolt } from 'react-icons/fa';
 
-import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/isSpectrum1D.js';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D/index.js';
 import { useChartData } from '../../context/ChartContext.js';
-import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import { TablePanel } from '../extra/BasicPanelStyle.js';
 import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
 import { SpectraAutomaticPickingButton } from '../header/SpectraAutomaticPickingButton.js';
 
@@ -26,7 +25,7 @@ function AutomaticAssignment() {
   const enabled = useCheckEnableAutomaticAssignments();
 
   return (
-    <div css={tablePanelStyle}>
+    <TablePanel>
       <DefaultPanelHeader
         leftButtons={[
           {
@@ -49,7 +48,7 @@ function AutomaticAssignment() {
       <div className="inner-container">
         <AutomaticAssignmentTable data={assignments} />
       </div>
-    </div>
+    </TablePanel>
   );
 }
 

diff --git a/src/component/panels/IntegralsPanel/IntegralPanel.tsx b/src/component/panels/IntegralsPanel/IntegralPanel.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import { SvgNmrIntegrate } from 'cheminfo-font';
 import lodashGet from 'lodash/get.js';
 import type { Spectrum1D } from 'nmr-load-save';
@@ -14,7 +12,7 @@ import { useActiveSpectrumIntegralsViewState } from '../../hooks/useActiveSpectr
 import useSpectrum from '../../hooks/useSpectrum.js';
 import ChangeSumModal from '../../modal/changeSum/ChangeSumModal.js';
 import { booleanToString } from '../../utility/booleanToString.js';
-import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import { TablePanel } from '../extra/BasicPanelStyle.js';
 import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
 import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
 import PreferencesHeader from '../header/PreferencesHeader.js';
@@ -125,17 +123,7 @@ function IntegralPanelInner({
   const total = integrals?.values?.length || 0;
 
   return (
-    <div
-      css={[
-        tablePanelStyle,
-        isFlipped &&
-          css`
-            th {
-              position: relative;
-            }
-          `,
-      ]}
-    >
+    <TablePanel isFlipped={isFlipped}>
       {!isFlipped && (
         <DefaultPanelHeader
           total={total}
@@ -190,7 +178,7 @@ function IntegralPanelInner({
           <IntegralsPreferences ref={settingRef} />
         )}
       </div>
-    </div>
+    </TablePanel>
   );
 }
 

diff --git a/src/component/panels/MatrixGenerationPanel/ExclusionsZonesTable.tsx b/src/component/panels/MatrixGenerationPanel/ExclusionsZonesTable.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Button, Classes } from '@blueprintjs/core';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { FaRegTrashAlt } from 'react-icons/fa';

diff --git a/src/component/panels/MatrixGenerationPanel/FiltersOptions.tsx b/src/component/panels/MatrixGenerationPanel/FiltersOptions.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { Button, Classes } from '@blueprintjs/core';
 import type { ReactNode } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';

diff --git a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanel.tsx
@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { SvgNmrMultipleAnalysis } from 'cheminfo-font';
@@ -24,7 +23,7 @@ import useSpectraByActiveNucleus from '../../hooks/useSpectraPerNucleus.js';
 import useToolsFunctions from '../../hooks/useToolsFunctions.js';
 import { getMatrixGenerationDefaultOptions } from '../../reducer/preferences/panelsPreferencesDefaultValues.js';
 import { options } from '../../toolbar/ToolTypes.js';
-import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import { TablePanel } from '../extra/BasicPanelStyle.js';
 import { PreferencesContainer } from '../extra/preferences/PreferencesContainer.js';
 
 import { ExclusionsZonesTable } from './ExclusionsZonesTable.js';
@@ -193,7 +192,7 @@ function InnerMatrixGenerationPanel() {
   }, [nucleusMatrixOptions.matrixOptions, originDomain.xDomain, reset]);
 
   return (
-    <div css={tablePanelStyle}>
+    <TablePanel>
       <MatrixGenerationPanelHeader
         showStocsy={showStocsy}
         showBoxPlot={showBoxPlot}
@@ -280,7 +279,7 @@ function InnerMatrixGenerationPanel() {
           </PreferencesContainer>
         </div>
       </FormProvider>
-    </div>
+    </TablePanel>
   );
 }
 

diff --git a/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanelHeader.tsx b/src/component/panels/MatrixGenerationPanel/MatrixGenerationPanelHeader.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-
 import { SvgNmrExportAsMatrix } from 'cheminfo-font';
 import { IoAnalytics } from 'react-icons/io5';
 import { TbBrandGoogleAnalytics } from 'react-icons/tb';

diff --git a/src/component/panels/PeaksPanel/PeaksPanel.tsx b/src/component/panels/PeaksPanel/PeaksPanel.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import { SvgNmrFt, SvgNmrPeaks, SvgNmrPeaksTopLabels } from 'cheminfo-font';
 import type { PeaksViewState, Spectrum1D } from 'nmr-load-save';
 import type { Info1D, Peak1D, Peaks } from 'nmr-processing';
@@ -18,7 +16,7 @@ import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus.j
 import useSpectrum from '../../hooks/useSpectrum.js';
 import { booleanToString } from '../../utility/booleanToString.js';
 import type { FilterType } from '../../utility/filterType.js';
-import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import { TablePanel } from '../extra/BasicPanelStyle.js';
 import type { SettingsRef } from '../extra/utilities/settingImperativeHandle.js';
 import type { ToolbarItemProps } from '../header/DefaultPanelHeader.js';
 import DefaultPanelHeader from '../header/DefaultPanelHeader.js';
@@ -182,20 +180,7 @@ function PeaksPanelInner({
     );
   }
   return (
-    <div
-      css={[
-        tablePanelStyle,
-        isFlipped &&
-          css`
-            .table-container {
-              table,
-              th {
-                position: relative !important;
-              }
-            }
-          `,
-      ]}
-    >
+    <TablePanel isFlipped={isFlipped}>
       {!isFlipped && (
         <DefaultPanelHeader
           total={total}
@@ -223,7 +208,7 @@ function PeaksPanelInner({
           <PeaksPreferences ref={settingRef} />
         )}
       </div>
-    </div>
+    </TablePanel>
   );
 }
 

diff --git a/src/component/panels/RangesPanel/RangesPanel.tsx b/src/component/panels/RangesPanel/RangesPanel.tsx
@@ -1,5 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import type { NmrData1D } from 'cheminfo-types';
 import { xGetFromToIndex } from 'ml-spectra-processing';
 import type { Spectrum1D, WorkSpacePanelPreferences } from 'nmr-load-save';
@@ -17,7 +15,7 @@ import { useToaster } from '../../context/ToasterContext.js';
 import type { BaseContextMenuProps } from '../../elements/ContextMenuBluePrint.js';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences.js';
 import useSpectrum from '../../hooks/useSpectrum.js';
-import { tablePanelStyle } from '../extra/BasicPanelStyle.js';
+import { TablePanel } from '../extra/BasicPanelStyle.js';
 import PreferencesHeader from '../header/PreferencesHeader.js';
 
 import RangesHeader from './RangesHeader.js';
@@ -153,17 +151,7 @@ function RangesTablePanelInner({
   }, []);
 
   return (
-    <div
-      css={[
-        tablePanelStyle,
-        isFlipped &&
-          css`
-            th {
-              position: relative;
-            }
-          `,
-      ]}
-    >
+    <TablePanel isFlipped={isFlipped}>
       {!isFlipped && (
         <RangesHeader
           {...{
@@ -209,7 +197,7 @@ function RangesTablePanelInner({
         text={text}
         label="Range"
       />
-    </div>
+    </TablePanel>
   );
 }
 

diff --git a/src/component/panels/RangesPanel/RangesTable.tsx b/src/component/panels/RangesPanel/RangesTable.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { WorkSpacePanelPreferences } from 'nmr-load-save';
 import type { Info1D } from 'nmr-processing';
 import { FaLink } from 'react-icons/fa';
@@ -14,7 +13,7 @@ import { NoDataForFid } from '../extra/placeholder/NoDataForFid.js';
 import RangesTableRow from './RangesTableRow.js';
 import useMapRanges from './hooks/useMapRanges.js';
 
-const tableStyle = css`
+const Table = styled.table`
   border-spacing: 0;
   border: 1px solid #dedede;
   width: 100%;
@@ -97,7 +96,7 @@ function RangesTable({
   return (
     <>
       <EditRangeDialog />
-      <table css={tableStyle}>
+      <Table>
         <thead>
           <tr>
             {preferences.showSerialNumber && <th>#</th>}
@@ -160,7 +159,7 @@ function RangesTable({
             );
           })}
         </tbody>
-      </table>
+      </Table>
     </>
   );
 }