Switch from radix to blueprint

package.json

@@ -58,9 +58,6 @@
     "@emotion/styled": "^11.13.0",
     "@lukeed/uuid": "^2.0.1",
     "@popperjs/core": "^2.11.8",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
     "@tanstack/react-query": "^5.59.13",
     "@tanstack/react-table": "^8.20.5",
     "biologic-converter": "^0.6.0",

src/components/forms/index.ts

@@ -1 +1 @@
-export * from './radio-group/index.js';
+export * from './radio-button-group/index.js';

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

@@ -0,0 +1,82 @@
+/** @jsxImportSource @emotion/react */
+import { Radio } from '@blueprintjs/core';
+import { css } from '@emotion/react';
+
+import { enabledColor, type InputVariant } from '../styles.js';
+
+import type { RadioButtonGroupProps, RadioOption } from './RadioGroup.js';
+
+const buttonStyles = {
+  radioGroup: css({
+    display: 'flex',
+    flexDirection: 'row',
+    width: 'fit-content',
+    ' & > *:first-of-type, & > *:first-of-type span': {
+      borderRadius: '6px 0 0 6px',
+    },
+    ' & > *:last-of-type, & > *:last-of-type span': {
+      borderRightWidth: 1,
+      borderRadius: '0 6px 6px 0',
+    },
+  }),
+  container: (disabled: boolean) =>
+    css({
+      border: '1px solid rgba(0, 0, 0, 0.25)',
+      borderRightWidth: 0,
+      position: 'relative',
+      paddingLeft: '0 !important',
+      '.bp5-control-indicator': {
+        display: 'none',
+      },
+      'input[type="radio"]:checked': {
+        '& ~ div': {
+          color: enabledColor,
+        },
+        '& ~ span': {
+          border: `1px solid ${enabledColor} !important`,
+          opacity: disabled ? 0.25 : 1,
+        },
+      },
+      span: {
+        position: 'absolute',
+        top: -1,
+        left: -1,
+        right: -1,
+        bottom: -1,
+        zIndex: 10,
+        borderWidth: '0 !important',
+      },
+    }),
+  item: (disabled: boolean, variant?: InputVariant) =>
+    css({
+      opacity: disabled ? 0.25 : 1,
+      padding: variant === 'default' ? '0px 15px' : '0px 7px',
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer',
+      ':hover': {
+        '& > label': {
+          color: disabled ? '' : enabledColor,
+        },
+      },
+      fontSize: variant === 'small' ? '1em' : '1.125em',
+      lineHeight: variant === 'default' ? '30px' : '22px',
+    }),
+};
+export function ButtonRadioItem(
+  prop: RadioOption & Pick<RadioButtonGroupProps, 'variant' | 'name'>,
+) {
+  const { value, label, disabled = false, variant, name } = prop;
+  return (
+    <Radio
+      name={name}
+      value={value}
+      disabled={disabled}
+      key={value}
+      css={buttonStyles.container(disabled)}
+    >
+      <div css={buttonStyles.item(disabled, variant)}>{label}</div>
+      <span />
+    </Radio>
+  );
+}

src/components/forms/radio-group/RadioGroup.tsx → src/components/forms/radio-button-group/RadioGroup.tsx

@@ -1,9 +1,9 @@
 /** @jsxImportSource @emotion/react */
+import { RadioGroup as BluePrintRadioGroup } from '@blueprintjs/core';
 import { css } from '@emotion/react';
-import * as RadioGroupRadix from '@radix-ui/react-radio-group';
 import type { ReactNode } from 'react';
 
-import type { InputVariant } from '../styles.js';
+import { type InputVariant } from '../styles.js';
 
 import { ButtonRadioItem } from './ButtonRadioItem.js';
 
@@ -12,7 +12,7 @@ export interface RadioOption {
   label: ReactNode;
   disabled?: boolean;
 }
-export interface RadioGroupProps {
+export interface RadioButtonGroupProps {
   selected?: RadioOption;
   options?: RadioOption[];
   onSelect?: (option: RadioOption) => void;
@@ -21,14 +21,13 @@ export interface RadioGroupProps {
   variant?: InputVariant;
   id?: string;
 }
+
 const rootStyles = {
-  basic: css({
-    display: 'flex',
-    flexDirection: 'row',
-    width: 'fit-content',
-  }),
   button: (variant: InputVariant) =>
     css({
+      display: 'flex',
+      flexDirection: 'row',
+      width: 'fit-content',
       ' & > *:first-of-type, & > *:first-of-type span': {
         borderRadius: variant === 'default' ? '6px 0 0 6px' : '4px 0 0 4px',
       },
@@ -38,38 +37,39 @@ const rootStyles = {
       },
     }),
 };
-export function RadioGroup(props: RadioGroupProps) {
+export function RadioButtonGroup(props: RadioButtonGroupProps) {
   const {
-    id,
     selected,
     disabled: groupDisabled = false,
     options = [],
     onSelect,
-    name = '',
+    name = 'radio-group',
     variant = 'default',
   } = props;
   return (
-    <RadioGroupRadix.Root
-      id={id}
-      css={[rootStyles.basic, rootStyles.button(variant)]}
-      style={{
-        gap: 0,
+    <BluePrintRadioGroup
+      onChange={(event) => {
+        const selected = options.find(
+          (o) => o.value === event.currentTarget.value,
+        );
+        if (selected) {
+          onSelect?.(selected);
+        }
       }}
-      value={selected?.value}
+      selectedValue={selected?.value}
       name={name}
-      disabled={groupDisabled}
+      css={rootStyles.button(variant)}
     >
       {options?.map(({ value, label, disabled }) => {
         const childProps = {
           value,
           label,
           disabled: groupDisabled || disabled,
-          onSelect,
           variant,
           name,
         };
         return <ButtonRadioItem key={value} {...childProps} />;
       })}
-    </RadioGroupRadix.Root>
+    </BluePrintRadioGroup>
   );
 }