add error handling, fix styling

wandb · Nov 20, 2024 · 44b6b9e · 44b6b9e
1 parent 717ffcf
commit 44b6b9e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 52 deletions.
diff --git a/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/weave-js/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import React from 'react';
+import {twMerge} from 'tailwind-merge';
 
-import {Icon, IconName} from '../Icon';
 import {Button} from '../Button';
+import {IconName} from '../Icon';
 import {Tailwind} from '../Tailwind';
 import {ToggleButtonGroupSize} from './types';
 
@@ -12,57 +12,58 @@ export type ToggleButtonGroupProps = {
   value: string;
   size: ToggleButtonGroupSize;
   isDisabled?: boolean;
-  icons?: (IconName | undefined)[];
+  icons?: Array<IconName | undefined>;
   onValueChange: (value: string) => void;
 };
 
-export const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProps>(
-  ({ options, value, size, isDisabled, icons, onValueChange }, ref) => {
-    const handleValueChange = (newValue: string) => {
-        if (newValue !== value) {
-          onValueChange(newValue);
-        }
-      };
-    return (
-      <Tailwind>
-        <ToggleGroup.Root
-          type="single"
-          value={value}
-          onValueChange={handleValueChange}
-          className="flex gap-[1px] my-16"
-          ref={ref}
-        >
-          {options.map((option, index) => (
-            <ToggleGroup.Item
-              key={option}
-              value={option}
-              active={value === option}
-              disabled={isDisabled}
-            >
-              <Button
-                icon={icons?.[index]}
-                className={twMerge(
-                "flex justify-center items-center",
-                  size === 'small' && 'px-6 py-3 text-sm leading-[18px]',
-                  size === 'medium' && 'px-10 py-4 text-base leading-normal',
-                  size === 'large' && 'px-12 py-8 text-base leading-normal',
-                  isDisabled && 'pointer-events-none opacity-35',
-                  value === option 
-                    ? 'bg-teal-300/[0.48] text-teal-600 hover:bg-teal-300/[0.48]' 
-                    : 'bg-oblivion/5 text-[#565c66] hover:text-[#0d0f12] hover:bg-moonbeam/[0.05]',
-                  'first:rounded-l-sm', // First button rounded left
-                  'last:rounded-r-sm', // Last button rounded right
-                  'gap-3'
-                )}
-              >
-                {option}
-              </Button>
-            </ToggleGroup.Item>
-          ))}
-        </ToggleGroup.Root>
-      </Tailwind>
-    );
+export const ToggleButtonGroup = React.forwardRef<
+  HTMLDivElement,
+  ToggleButtonGroupProps
+>(({options, value, size, isDisabled = false, icons, onValueChange}, ref) => {
+  if (options.length < 2) {
+    console.error('ToggleButtonGroup requires at least two options.');
   }
-);
+
+  const handleValueChange = (newValue: string) => {
+    if (newValue !== value) {
+      onValueChange(newValue);
+    }
+  };
+  return (
+    <Tailwind>
+      <ToggleGroup.Root
+        type="single"
+        value={value}
+        onValueChange={handleValueChange}
+        className="flex gap-px"
+        ref={ref}>
+        {options.map((option, index) => (
+          <ToggleGroup.Item
+            key={option}
+            value={option}
+            active={value === option}
+            disabled={isDisabled}>
+            <Button
+              icon={icons?.[index]}
+              size={size}
+              className={twMerge(
+                size === 'small' && 'gap-2 px-6 py-3 text-sm',
+                size === 'medium' && 'gap-3 px-10 py-4 text-base',
+                size === 'large' && 'gap-2 px-12 py-8 text-base',
+                isDisabled && 'pointer-events-none opacity-35',
+                value === option
+                  ? 'bg-teal-300/[0.48] text-teal-600 hover:bg-teal-300/[0.48]'
+                  : 'hover:bg-oblivion/7 bg-oblivion/5 text-moon-600 hover:text-moon-800',
+                'first:rounded-l-sm', // First button rounded left
+                'last:rounded-r-sm' // Last button rounded right
+              )}>
+              {option}
+            </Button>
+          </ToggleGroup.Item>
+        ))}
+      </ToggleGroup.Root>
+    </Tailwind>
+  );
+});
 
 ToggleButtonGroup.displayName = 'ToggleButtonGroup';
diff --git a/weave-js/src/components/ToggleButtonGroup/types.tsx b/weave-js/src/components/ToggleButtonGroup/types.tsx
@@ -3,4 +3,5 @@ export const ToggleButtonGroupSizes = {
   Medium: 'medium',
   Large: 'large',
 } as const;
-export type ToggleButtonGroupSize = (typeof ToggleButtonGroupSizes)[keyof typeof ToggleButtonGroupSizes];
+export type ToggleButtonGroupSize =
+  (typeof ToggleButtonGroupSizes)[keyof typeof ToggleButtonGroupSizes];