refactor: use styled emotion

src/component/1d-2d/FieldEdition.tsx

@@ -1,7 +1,6 @@
-/** @jsxImportSource @emotion/react */
 import type { PopoverProps } from '@blueprintjs/core';
 import { Popover } from '@blueprintjs/core';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { yupResolver } from '@hookform/resolvers/yup';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
@@ -11,6 +10,12 @@ import * as Yup from 'yup';
 import { Input2Controller } from '../elements/Input2Controller.js';
 import { NumberInput2Controller } from '../elements/NumberInput2Controller.js';
 
+const StyledPopover = styled(Popover)`
+  .field-edition-popover {
+    border-radius: 5px;
+  }
+`;
+
 type InputType = 'number' | 'text';
 
 interface FieldProps {
@@ -51,12 +56,7 @@ export function FieldEdition(props: FieldEditionsProps) {
   }
 
   return (
-    <Popover
-      css={css`
-        .field-edition-popover {
-          border-radius: 5px;
-        }
-      `}
+    <StyledPopover
       popoverClassName="field-edition-popover"
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}
@@ -67,7 +67,7 @@ export function FieldEdition(props: FieldEditionsProps) {
       {...PopoverProps}
     >
       {children}
-    </Popover>
+    </StyledPopover>
   );
 }
 

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

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Ranges, Zones } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { ResponsiveChart } from 'react-d3-utils';
@@ -32,7 +31,7 @@ interface DraggableStructureProps {
 
 const AUTO_CROP_MARGIN = 30;
 
-const style = css`
+const ReactRnd = styled(Rnd)`
   border: 1px solid transparent;
 
   button {
@@ -100,7 +99,7 @@ export function DraggableStructure(props: DraggableStructureProps) {
   if (!viewerRef) return null;
 
   return (
-    <Rnd
+    <ReactRnd
       default={moleculeView.floating.bounding}
       minWidth={90 + AUTO_CROP_MARGIN * 2}
       minHeight={100 + AUTO_CROP_MARGIN * 2}
@@ -116,7 +115,6 @@ export function DraggableStructure(props: DraggableStructureProps) {
         dragFloatMoleculeHandler({ x, y });
       }}
       resizeHandleWrapperStyle={{ backgroundColor: 'white' }}
-      css={style}
     >
       <div
         className="content"
@@ -167,6 +165,6 @@ export function DraggableStructure(props: DraggableStructureProps) {
         </ResponsiveChart>
       </div>
       {modal}
-    </Rnd>
+    </ReactRnd>
   );
 }

src/component/1d/ExclusionZoneAnnotation.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Filters1D } from 'nmr-processing';
 import { memo } from 'react';
 
@@ -16,7 +15,7 @@ interface ExclusionZoneProps {
   filterId: string;
 }
 
-const style = css`
+const Rect = styled.rect`
   &:hover {
     fill: #ff6f0057 !important;
   }
@@ -43,9 +42,8 @@ function ExclusionZoneAnnotation({
 
   return (
     <g key={zone.id} transform={`translate(${scaleX()(zone.to)},0)`}>
-      <rect
+      <Rect
         x="0"
-        css={style}
         transform={`translate(0,${scaleY()(0) - (vAlign + 5)})`}
         width={`${scaleX()(zone.from) - scaleX()(zone.to)}`}
         height="10px"

src/component/1d/FooterBanner.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { xFindClosestIndex } from 'ml-spectra-processing';
 import type { ActiveSpectrum, Spectrum1D } from 'nmr-load-save';
 import { memo } from 'react';
@@ -11,70 +10,19 @@ import { useBrushTracker } from '../EventsTrackers/BrushTracker.js';
 import { useMouseTracker } from '../EventsTrackers/MouseTracker.js';
 import { useChartData } from '../context/ChartContext.js';
 import { useScaleChecked } from '../context/ScaleContext.js';
+import { FooterContainer, InfoItem } from '../elements/Footer.js';
 import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
-const styles = css`
-  display: flex;
+const FlexInfoItem = styled(InfoItem)`
   align-items: center;
-  user-select: none;
-  background-color: #f7f7f7;
-  height: 30px;
-  padding: 6px;
-  color: #8d0018;
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  container-type: inline-size;
-
-  @container (max-width:600px) {
-    .small-width-none {
-      display: none !important;
-    }
-  }
-
-  .flex-row {
-    display: flex;
-    align-items: center;
-  }
-
-  div {
-    margin: 0 10px;
-    display: inline-block;
-
-    .label {
-      font-size: 12px;
-      color: #4d4d4d;
-      font-weight: bold;
-    }
-
-    .value {
-      font-weight: bold;
-      font-size: 14px;
-      display: inline-block;
-    }
-
-    .unit {
-      font-weight: bold;
-      font-size: 10px;
-    }
-
-    .x-value {
-      min-width: 50px;
-    }
-
-    .y-value {
-      min-width: 80px;
-    }
-  }
-
-  .separator {
-    border-left: 2px solid gray;
-    margin: 0 20px;
-    width: 1px;
-    height: 100%;
-  }
+`;
+const Separator = styled.div`
+  border-left: 2px solid gray;
+  margin: 0 20px;
+  width: 1px;
+  height: 100%;
 `;
 
 interface FooterBannerInnerProps {
@@ -112,7 +60,7 @@ function FooterBannerInner({
     position.x > width - margin.right ||
     position.y > height - margin.bottom
   ) {
-    return <div css={styles} />;
+    return <FooterContainer />;
   }
 
   function getXIndex(xPosition) {
@@ -135,82 +83,82 @@ function FooterBannerInner({
   const isBrushing = step === 'brushing' && mouseButton === 'main';
 
   return (
-    <div css={styles}>
+    <FooterContainer>
       <BsCursor />
       <div>
-        <span className="label"> 𝛅: </span>
-        <span className="value">{format(scaleX().invert(position.x))}</span>
-        <span className="unit">ppm</span>
+        <InfoItem.Label> 𝛅: </InfoItem.Label>
+        <InfoItem.Value>{format(scaleX().invert(position.x))}</InfoItem.Value>
+        <InfoItem.Unit>ppm</InfoItem.Unit>
         {activeSpectrum && spectrum?.info?.originFrequency && (
           <>
-            <span className="value">
+            <InfoItem.Value>
               &nbsp;(
               {format(
                 scaleX().invert(position.x) * spectrum?.info?.originFrequency,
                 'hz',
               )}
-            </span>
-            <span className="unit">Hz</span>
-            <span className="value">) </span>
-            <span className="small-width-none">
+            </InfoItem.Value>
+            <InfoItem.Unit>Hz</InfoItem.Unit>
+            <InfoItem.Value>) </InfoItem.Value>
+            <InfoItem>
               <span>,</span>
-              <span className="label"> Index: </span>
-              <span className="value">{getXIndex(position.x)}</span>
-            </span>
+              <InfoItem.Label> Index: </InfoItem.Label>
+              <InfoItem.Value>{getXIndex(position.x)}</InfoItem.Value>
+            </InfoItem>
           </>
         )}
       </div>
 
       {isBrushing && (
-        <div className="flex-row small-width-none">
-          <span className="label"> Δppm: </span>
-          <span className="value">
+        <FlexInfoItem autoHide>
+          <InfoItem.Label> Δppm: </InfoItem.Label>
+          <InfoItem.Value>
             {(scaleX().invert(startX) - scaleX().invert(endX)).toPrecision(6)}
-          </span>
-        </div>
+          </InfoItem.Value>
+        </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <div className=" flex-row small-width-none">
+        <FlexInfoItem autoHide>
           {spectrum?.info?.originFrequency && isBrushing && (
             <div>
-              <span className="label"> ΔHz: </span>
-              <span className="value">
+              <InfoItem.Label> ΔHz: </InfoItem.Label>
+              <InfoItem.Value>
                 {(
                   (scaleX().invert(startX) - scaleX().invert(endX)) *
                   spectrum?.info?.originFrequency
                 ).toPrecision(5)}
-              </span>
+              </InfoItem.Value>
             </div>
           )}
           {isBrushing && (
             <div>
-              <span className="label"> ratio :</span>
-              <span className="value">
+              <InfoItem.Label> ratio :</InfoItem.Label>
+              <InfoItem.Value>
                 {(
                   (getYValue(startX) / (getYValue(endX) || Number.MIN_VALUE)) *
                   100
                 ).toFixed(2)}
                 %
-              </span>
+              </InfoItem.Value>
             </div>
           )}
-        </div>
+        </FlexInfoItem>
       )}
 
       {activeSpectrum && (
-        <div className="flex-row small-width-none">
-          <div className="separator" />
+        <FlexInfoItem>
+          <Separator />
           <IoPulseSharp />
           <div>
-            <span className="label">Intensity: </span>
-            <span className="value y-value">
+            <InfoItem.Label>Intensity: </InfoItem.Label>
+            <InfoItem.Value style={{ minWidth: 80 }}>
               {format(getYValue(position.x))}
-            </span>
+            </InfoItem.Value>
           </div>
-        </div>
+        </FlexInfoItem>
       )}
-    </div>
+    </FooterContainer>
   );
 }
 

src/component/1d/LinesSeries.tsx

@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Spectrum1D } from 'nmr-load-save';
 
 import { get1DDataXY } from '../../data/data1d/Spectrum1D/get1DDataXY.js';
@@ -16,7 +15,7 @@ import { SPECTRA_BOTTOM_MARGIN } from './utilities/scale.js';
 
 const BOX_SIZE = 10;
 
-const style = css`
+const Rect = styled.rect`
   fill: transparent;
 
   &:hover {
@@ -76,8 +75,7 @@ function HeadlightRectStackMode(props: HeadlightRectStackModeProps) {
   }
 
   return (
-    <rect
-      css={style}
+    <Rect
       y={innerHeight - shiftY * index - BOX_SIZE / 2}
       x={margin.left}
       width={`${innerWidth}px`}