feat: update Blueprint

.ncurc.yml

@@ -5,3 +5,7 @@ reject:
   - react-dom
   - '@types/react'
   - '@types/react-dom'
+  # Blueprint is a peerDependency. Updating it is usually breaking change.
+  - '@blueprintjs/core'
+  - '@blueprintjs/icons'
+  - '@blueprintjs/select'

package.json

@@ -48,9 +48,9 @@
   },
   "homepage": "https://github.com/zakodium-oss/react-science#readme",
   "peerDependencies": {
-    "@blueprintjs/core": "^5.16.0",
-    "@blueprintjs/icons": "^5.15.0",
-    "@blueprintjs/select": "^5.3.5",
+    "@blueprintjs/core": "^5.17.0",
+    "@blueprintjs/icons": "^5.19.0",
+    "@blueprintjs/select": "^5.3.12",
     "fifo-logger": "^1.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
@@ -69,18 +69,18 @@
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^5.16.6",
-    "@blueprintjs/icons": "^5.18.1",
-    "@blueprintjs/select": "^5.3.11",
+    "@blueprintjs/core": "5.17.0",
+    "@blueprintjs/icons": "5.19.0",
+    "@blueprintjs/select": "5.3.12",
     "@floating-ui/react": "^0.27.4",
     "@playwright/experimental-ct-react": "^1.50.1",
     "@playwright/test": "^1.50.1",
-    "@storybook/addon-actions": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-storysource": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-vite": "^8.5.8",
+    "@storybook/addon-actions": "^8.6.2",
+    "@storybook/addon-essentials": "^8.6.2",
+    "@storybook/addon-storysource": "^8.6.2",
+    "@storybook/blocks": "^8.6.2",
+    "@storybook/react": "^8.6.2",
+    "@storybook/react-vite": "^8.6.2",
     "@tanstack/react-query": "^5.66.9",
     "@types/babel__core": "^7.20.5",
     "@types/d3-scale-chromatic": "^3.1.0",
@@ -98,13 +98,13 @@
     "eslint-config-zakodium": "^14.0.0",
     "eslint-plugin-storybook": "^0.11.3",
     "fifo-logger": "^1.0.0",
-    "filelist-utils": "^1.11.2",
+    "filelist-utils": "^1.11.3",
     "immer": "^10.1.1",
     "jcampconverter": "^11.0.1",
     "ml-gsd": "^12.1.8",
     "ml-peak-shape-generator": "^4.1.4",
     "ml-signal-processing": "^1.2.0",
-    "ml-spectra-processing": "^14.9.2",
+    "ml-spectra-processing": "^14.10.0",
     "ms-spectrum": "^3.7.6",
     "netcdfjs": "^3.0.0",
     "postcss-styled-syntax": "^0.7.1",
@@ -118,7 +118,7 @@
     "react-plot": "^3.0.0",
     "rimraf": "^6.0.1",
     "spc-parser": "^1.0.0",
-    "storybook": "^8.5.8",
+    "storybook": "^8.6.2",
     "stylelint": "^16.14.1",
     "stylelint-config-standard": "^37.0.0",
     "typescript": "^5.7.3",

src/app/panels/measurements/MeasurementVisibilityToggle.tsx

@@ -22,13 +22,17 @@ export function MeasurementVisibilityToggle(
   }
 
   return isVisible ? (
-    <Button icon="eye-on" onClick={() => setVisibility(false)} minimal />
+    <Button
+      icon="eye-on"
+      onClick={() => setVisibility(false)}
+      variant="minimal"
+    />
   ) : (
     <Button
       icon="eye-off"
       onClick={() => setVisibility(true)}
       style={{ opacity: 0.6 }}
-      minimal
+      variant="minimal"
     />
   );
 }
@@ -48,13 +52,17 @@ export function MeasurementSelectedVisibilityChange(props: {
   }
 
   return isVisible ? (
-    <Button icon="eye-on" onClick={() => setVisibility(true)} minimal />
+    <Button
+      icon="eye-on"
+      onClick={() => setVisibility(true)}
+      variant="minimal"
+    />
   ) : (
     <Button
       icon="eye-off"
       onClick={() => setVisibility(false)}
       style={{ opacity: 0.6 }}
-      minimal
+      variant="minimal"
     />
   );
 }

src/app/panels/measurements/MeasurementsTable.tsx

@@ -53,7 +53,7 @@ const MeasurementsTableRoot = styled.table`
 const MeasurementsTableHeaderStyled = styled.tr`
   border-bottom-width: 1px;
   font-weight: 500;
-  text-align: left;
+  text-align: start;
   padding-bottom: 10px;
   padding-top: 10px;
   padding-left: 2rem;
@@ -124,7 +124,7 @@ export function MeasurementsTable(props: MeasurementsTableProps) {
       <MeasurementsHeaderColumn>
         <MeasurementsHeaderGroup>
           <Button
-            minimal
+            variant="minimal"
             icon="trash"
             intent="danger"
             style={{ opacity: hasSelectedMeasurements ? 1 : 0.6 }}
@@ -317,12 +317,12 @@ function MeasurementsTableRow(props: MeasurementsTableRowProps) {
       <MeasurementsIconsContainer>
         <Popover content={content} position="bottom-left">
           <Button
-            minimal
+            variant="minimal"
             icon="more"
             style={{
               transform: 'rotate(90deg)',
             }}
-            small
+            size="small"
           />
         </Popover>
         <MeasurementCheckbox

src/components/activity_bar/activity_bar.tsx

@@ -32,7 +32,7 @@ export function ActivityBar(props: ActivityBarProps) {
   const { children } = props;
 
   return (
-    <ActivityButtonGroup vertical large minimal>
+    <ActivityButtonGroup vertical size="large" variant="minimal">
       {children}
     </ActivityButtonGroup>
   );

src/components/activity_panel/activity_panel.tsx

@@ -64,7 +64,7 @@ export function ActivityPanelItem(props: ActivityPanelItemProps) {
     <PanelItemContainer>
       <PanelItemHeader>
         <PanelItemTitle>{title}</PanelItemTitle>
-        <Button minimal icon="cross" onClick={onClose} />
+        <Button variant="minimal" icon="cross" onClick={onClose} />
       </PanelItemHeader>
 
       <PanelItemContent>{children}</PanelItemContent>

src/components/drop-zone/DropZone.tsx

@@ -109,7 +109,7 @@ function DropZoneContent(
             action={
               <Button
                 className="dropzone-button"
-                outlined
+                variant="outlined"
                 text={emptyButtonText}
                 icon={emptyButtonIcon}
                 intent="primary"

src/components/forms/radio-button-group/RadioButton.tsx

@@ -30,15 +30,15 @@ const HiddenInput = styled.input`
   }
 `;
 
-const RadioContent = styled.div<{ large?: boolean }>`
+const RadioContent = styled.div<{ size?: RadioProps['size'] }>`
   place-content: center;
-  padding: ${(props) => (props.large ? '0px 15px' : '0px 7px')};
+  padding: ${(props) => (props.size === 'large' ? '0px 15px' : '0px 7px')};
   line-height: 0;
 `;
 
-const Label = styled.label<{ large?: boolean; disabled?: boolean }>`
+const Label = styled.label<{ size?: RadioProps['size']; disabled?: boolean }>`
   display: flex;
-  height: ${(props) => (props.large ? '40px' : '30px')};
+  height: ${(props) => (props.size === 'large' ? '40px' : '30px')};
   opacity: ${(props) => (props.disabled ? 0.25 : 1)};
   border-width: 1px 0 1px 1px;
   border-color: rgba(0, 0, 0, ${(props) => (props.disabled ? 1 : 0.25)});
@@ -52,7 +52,7 @@ const Label = styled.label<{ large?: boolean; disabled?: boolean }>`
 `;
 
 export function RadioButton(props: RadioProps) {
-  const { large, disabled, label, name, value, id, checked, onChange } = props;
+  const { size, disabled, label, name, value, id, checked, onChange } = props;
   const uniqId = useInputId(id, name);
   return (
     <>
@@ -65,8 +65,8 @@ export function RadioButton(props: RadioProps) {
         disabled={disabled}
         onChange={onChange}
       />
-      <Label large={large} disabled={disabled} htmlFor={uniqId}>
-        <RadioContent large={large}>{label}</RadioContent>
+      <Label size={size} disabled={disabled} htmlFor={uniqId}>
+        <RadioContent size={size}>{label}</RadioContent>
       </Label>
     </>
   );

src/components/forms/radio-button-group/RadioButtonGroup.tsx

@@ -1,26 +1,30 @@
-import type { RadioGroupProps } from '@blueprintjs/core';
+import type { RadioGroupProps, RadioProps } from '@blueprintjs/core';
 import { RadioGroup } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { Children, cloneElement } from 'react';
 
 import { RadioButton } from './RadioButton.js';
 
 export interface RadioButtonGroupProps extends RadioGroupProps {
-  large?: boolean;
+  size?: RadioProps['size'];
 }
 
-const RadioButtonContainer = styled.div<{ large?: boolean }>`
+const RadioButtonContainer = styled.div<{ size?: RadioProps['size'] }>`
   display: flex;
 
   & label:first-of-type {
-    border-bottom-left-radius: ${(props) => (props.large ? '6px' : '4px')};
-    border-top-left-radius: ${(props) => (props.large ? '6px' : '4px')};
+    border-bottom-left-radius: ${(props) =>
+      props.size === 'large' ? '6px' : '4px'};
+    border-top-left-radius: ${(props) =>
+      props.size === 'large' ? '6px' : '4px'};
   }
 
   & label:last-of-type {
     border-right-width: 1px;
-    border-bottom-right-radius: ${(props) => (props.large ? '6px' : '4px')};
-    border-top-right-radius: ${(props) => (props.large ? '6px' : '4px')};
+    border-bottom-right-radius: ${(props) =>
+      props.size === 'large' ? '6px' : '4px'};
+    border-top-right-radius: ${(props) =>
+      props.size === 'large' ? '6px' : '4px'};
   }
 `;
 
@@ -29,7 +33,7 @@ export function RadioButtonGroup(props: RadioButtonGroupProps) {
     disabled: groupDisabled = false,
     options = [],
     name,
-    large,
+    size,
     selectedValue,
     onChange,
     children,
@@ -43,15 +47,15 @@ export function RadioButtonGroup(props: RadioButtonGroupProps) {
       onChange={onChange}
       {...restProps}
     >
-      <RadioButtonContainer large={large}>
+      <RadioButtonContainer size={size}>
         {options?.map(({ value, label, disabled }, index) => {
           return (
             <RadioButton
               // eslint-disable-next-line react/no-array-index-key
               key={index}
               value={value}
               label={label}
-              large={large}
+              size={size}
               name={name}
               onChange={onChange}
               checked={value === selectedValue}
@@ -66,7 +70,7 @@ export function RadioButtonGroup(props: RadioButtonGroupProps) {
           if (child.type === RadioButton) {
             return cloneElement(child, {
               ...child.props,
-              large,
+              size,
               name,
               onChange,
               checked: child.props.value === selectedValue,

src/components/forms/styles.ts

@@ -1,4 +1,2 @@
-export type InputVariant = 'default' | 'small';
-
 export const enabledColor = '#1677ff';
 export const disabledColor = '#b8b8b8';

src/components/header/PanelHeader.tsx

@@ -38,7 +38,12 @@ export function PanelHeader(props: PanelHeaderProps) {
       <HeaderLeftContainer>{children}</HeaderLeftContainer>
       <SelectedTotal count={current} total={total} />
       {onClickSettings && (
-        <Button color="black" minimal onClick={onClickSettings} icon="cog" />
+        <Button
+          color="black"
+          variant="minimal"
+          onClick={onClickSettings}
+          icon="cog"
+        />
       )}
     </HeaderContainer>
   );

src/components/info-panel/InfoPanel.tsx

@@ -211,15 +211,15 @@ const InfoPanelContent = memo((props: InfoPanelContentProps) => {
           <div key={description}>
             <AccordionButton
               open={open}
-              minimal
+              variant="minimal"
               onClick={() =>
                 setIsOpen((pred) =>
                   open
                     ? pred.filter((o) => o !== description)
                     : [...pred, description],
                 )
               }
-              alignText="left"
+              alignText="start"
               icon="chevron-right"
             >
               {description}

src/components/logger/FifoLoggerDialog.tsx

@@ -114,14 +114,14 @@ export function FifoLoggerDialog(props: FifoLoggerDialogProps) {
         actions={
           <ActionsFooter>
             <Button
-              outlined
+              variant="outlined"
               intent="danger"
               icon="trash"
               text="Clear logs"
               onClick={() => logger.clear()}
             />
             <Button
-              outlined
+              variant="outlined"
               intent="none"
               text="Close"
               onClick={props.onClose}

src/components/toolbar/Toolbar.tsx

@@ -126,7 +126,7 @@ export function Toolbar(props: ToolbarProps) {
         // TODO: remove once the workaround is no longer needed
         key={String(vertical)}
         vertical={vertical}
-        minimal
+        variant="minimal"
         style={{
           flexWrap: 'wrap',
           borderRight: vertical ? border : undefined,
@@ -174,7 +174,7 @@ function ToolbarItemInternal(props: ToolbarItemInternalProps) {
 
   return (
     <ToolbarButton
-      alignText={isPopover ? 'left' : undefined}
+      alignText={isPopover ? 'start' : undefined}
       disabled={disabled}
       intent={intent}
       type="button"

src/components/toolbar/TooltipHelpContent.tsx

@@ -18,12 +18,12 @@ const Title = styled.span<TitleProps>`
   font-size: ${({ size }) => size};
   flex: 1;
   padding: 5px 0;
-  text-align: left;
+  text-align: start;
 `;
 const Description = styled.p`
   padding-top: 1rem;
   font-size: 0.7rem;
-  text-align: left;
+  text-align: start;
 `;
 
 const ShortcutItem = styled.div`