refactor: use styled emotion

cheminfo · Jan 14, 2025 · fb89d97 · fb89d97
1 parent edbd91e
commit fb89d97
Show file tree

Hide file tree

Showing 40 changed files with 289 additions and 399 deletions.
diff --git a/src/component/1d-2d/FieldEdition.tsx b/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 { Popover as BasePopover } from '@blueprintjs/core';
+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 Popover = styled(BasePopover)`
+  .field-edition-popover {
+    border-radius: 5px;
+  }
+`;
+
 type InputType = 'number' | 'text';
 
 interface FieldProps {
@@ -52,11 +57,6 @@ export function FieldEdition(props: FieldEditionsProps) {
 
   return (
     <Popover
-      css={css`
-        .field-edition-popover {
-          border-radius: 5px;
-        }
-      `}
       popoverClassName="field-edition-popover"
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}

diff --git a/src/component/1d/ExclusionZoneAnnotation.tsx b/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"

diff --git a/src/component/1d/FooterBanner.tsx b/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';
@@ -15,7 +14,7 @@ import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
 import { useFormatNumberByNucleus } from '../hooks/useFormatNumberByNucleus.js';
 import useSpectrum from '../hooks/useSpectrum.js';
 
-const styles = css`
+const Container = styled.div`
   display: flex;
   align-items: center;
   user-select: none;
@@ -112,7 +111,7 @@ function FooterBannerInner({
     position.x > width - margin.right ||
     position.y > height - margin.bottom
   ) {
-    return <div css={styles} />;
+    return <Container />;
   }
 
   function getXIndex(xPosition) {
@@ -135,7 +134,7 @@ function FooterBannerInner({
   const isBrushing = step === 'brushing' && mouseButton === 'main';
 
   return (
-    <div css={styles}>
+    <Container>
       <BsCursor />
       <div>
         <span className="label"> 𝛅: </span>
@@ -210,7 +209,7 @@ function FooterBannerInner({
           </div>
         </div>
       )}
-    </div>
+    </Container>
   );
 }
 

diff --git a/src/component/1d/LinesSeries.tsx b/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`}

diff --git a/src/component/1d/XAxis.tsx b/src/component/1d/XAxis.tsx
@@ -1,12 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useScale } from '../context/ScaleContext.js';
 
-const axisStyles = css`
+const AxisGroup = styled.g`
   user-select: none;
 
   path,
@@ -19,7 +18,7 @@ const axisStyles = css`
   }
 `;
 
-const gridStyles = css`
+const GridGroup = styled.g`
   user-select: none;
 
   line {
@@ -81,21 +80,19 @@ function XAxis(props: XAxisProps) {
   return (
     <>
       {show && (
-        <g
+        <AxisGroup
           className="x"
-          css={axisStyles}
           transform={`translate(0,${height - margin.bottom})`}
           ref={refAxis}
         >
           <text fill="#000" x={width - 10} y="30" dy="0.70em" textAnchor="end">
             {label}
           </text>
-        </g>
+        </AxisGroup>
       )}
       {showGrid && (
-        <g
+        <GridGroup
           data-no-export="true"
-          css={gridStyles}
           className="grid"
           ref={refGrid}
           transform={`translate(0,${height - margin.bottom})`}

diff --git a/src/component/1d/YAxis.tsx b/src/component/1d/YAxis.tsx
@@ -1,12 +1,11 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import * as d3 from 'd3';
 import { useEffect, useRef } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 import { useScale } from '../context/ScaleContext.js';
 
-const axisStyles = css`
+const AxisGroup = styled.g`
   user-select: none;
 
   path,
@@ -47,9 +46,8 @@ function YAxis(props: YAxisProps) {
   return (
     <>
       {show && (
-        <g
+        <AxisGroup
           className="y"
-          css={axisStyles}
           transform={`translate(${width - 50})`}
           ref={refAxis}
         >
@@ -63,7 +61,7 @@ function YAxis(props: YAxisProps) {
           >
             {label}
           </text>
-        </g>
+        </AxisGroup>
       )}
     </>
   );

diff --git a/src/component/1d/integral/IntegralResizable.tsx b/src/component/1d/integral/IntegralResizable.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Integral } from 'nmr-processing';
 
 import { useChartData } from '../../context/ChartContext.js';
@@ -11,21 +10,13 @@ import { useResizerStatus } from '../../hooks/useResizerStatus.js';
 
 import { IntegralIndicator } from './IntegralIndicator.js';
 
-const stylesOnHover = css`
-  .highlight {
-    fill: transparent;
+const Group = styled.g<{ isActive: boolean }>`
+  rect {
+    fill: ${(props) => (props.isActive ? '#ff6f0057' : 'transparent')};
   }
 
   .target {
-    visibility: hidden;
-  }
-`;
-
-const stylesHighlighted = css`
-  fill: #ff6f0057;
-
-  .target {
-    visibility: visible;
+    visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
   }
 `;
 
@@ -79,25 +70,14 @@ function IntegralResizable({
           const width = x2 - x1;
 
           return (
-            <g
-              css={
-                highlight.isActive || isActive
-                  ? stylesHighlighted
-                  : stylesOnHover
-              }
-            >
-              <rect
-                width={width}
-                height={bottom}
-                className="highlight"
-                data-no-export="true"
-              />
+            <Group isActive={highlight.isActive || isActive}>
+              <rect width={width} height={bottom} data-no-export="true" />
               <IntegralIndicator
                 value={integral}
                 format={integralFormat}
                 width={width}
               />
-            </g>
+            </Group>
           );
         }}
       </ResizerWithScale>

diff --git a/src/component/elements/ActionsButtonsPopover.tsx b/src/component/elements/ActionsButtonsPopover.tsx
@@ -1,12 +1,26 @@
-/** @jsxImportSource @emotion/react */
 import type { PopoverProps } from '@blueprintjs/core';
 import { Popover } from '@blueprintjs/core';
 import type { Interpolation, Theme } from '@emotion/react';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties } from 'react';
 import type { ButtonProps } from 'react-science/ui';
 import { Button } from 'react-science/ui';
 
+const Container = styled.div<Pick<CSSProperties, 'flexDirection' | 'gap'>>`
+  display: flex;
+  flex-direction: ${(props) => props.flexDirection};
+  gap: ${(props) => props.gap};
+
+  button,
+  a[role='button'] {
+    border-radius: 50%;
+    min-width: 16px;
+    min-height: 16px;
+    font-size: 10px;
+    padding: 5px;
+  }
+`;
+
 export interface ActionsButtonsPopoverProps
   extends Omit<PopoverProps, 'interactionKind' | 'content'> {
   buttons: Array<
@@ -42,24 +56,7 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
       interactionKind="hover"
       enforceFocus={false}
       content={
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: direction,
-            gap: space,
-            ...contentStyle,
-          }}
-          css={css`
-            button,
-            a[role='button'] {
-              border-radius: 50%;
-              min-width: 16px;
-              min-height: 16px;
-              font-size: 10px;
-              padding: 5px;
-            }
-          `}
-        >
+        <Container style={contentStyle} flexDirection={direction} gap={space}>
           {buttons
             .filter((button) => button?.visible !== false)
             .map(({ title, visible, ...otherProps }, index) => (
@@ -69,7 +66,7 @@ export function ActionsButtonsPopover(props: ActionsButtonsPopoverProps) {
                 {...otherProps}
               />
             ))}
-        </div>
+        </Container>
       }
       {...otherProps}
     >

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

diff --git a/src/component/elements/DialogBody.tsx b/src/component/elements/DialogBody.tsx
@@ -0,0 +1,10 @@
+import { DialogBody as BaseDialogBody } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { CSSProperties } from 'react';
+
+export const DialogBody = styled(BaseDialogBody)<
+  Pick<CSSProperties, 'padding' | 'backgroundColor'>
+>`
+  padding: ${({ padding = '15px' }) => padding};
+  background-color: ${({ backgroundColor = 'white' }) => backgroundColor};
+`;
diff --git a/src/component/elements/Label.tsx b/src/component/elements/Label.tsx
@@ -1,9 +1,12 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { CSSProperties, LabelHTMLAttributes, ReactNode } from 'react';
 
 import Button from './Button.js';
 
+const ShortTitle = styled.span`
+  display: none;
+`;
+
 export interface LabelStyle {
   label?: CSSProperties;
   wrapper?: CSSProperties;
@@ -53,9 +56,7 @@ export default function Label(props: LabelProps) {
           <span className={shortTitle ? 'large-label' : ''}>{title}</span>
         )}
         {shortTitle && (
-          <span className="small-label" css={css({ display: 'none' })}>
-            {shortTitle}
-          </span>
+          <ShortTitle className="small-label">{shortTitle}</ShortTitle>
         )}
         {description && (
           <Button.Info