segmented options

apps/web-tss/src/components/features/metrics/StatusBadgeIndicator/StatusBadgeIndicator.stories.tsx

@@ -1,40 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/nextjs';
-import { VerificationStatusSchema, type ShareAssetType } from '@buster/server-shared/share';
+import { type ShareAssetType, VerificationStatusSchema } from '@buster/server-shared/share';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { StatusBadgeIndicator } from './StatusBadgeIndicator';
 
 const meta = {
   title: 'Features/Metrics/StatusBadgeIndicator',
   component: StatusBadgeIndicator,
   parameters: {
-    layout: 'centered'
+    layout: 'centered',
   },
   tags: ['autodocs'],
   args: {
     status: 'notRequested',
     size: 16,
-    showTooltip: true
+    showTooltip: true,
   },
   argTypes: {
     status: {
       control: 'select',
       options: Object.values(VerificationStatusSchema.enum),
-      description: 'The verification status of the badge'
+      description: 'The verification status of the badge',
     },
     size: {
       control: { type: 'number' },
       description: 'The size of the badge in pixels',
-      defaultValue: 16
+      defaultValue: 16,
     },
     showTooltip: {
       control: 'boolean',
       description: 'Whether to show a tooltip on hover',
-      defaultValue: true
+      defaultValue: true,
     },
     className: {
       control: 'text',
-      description: 'Additional CSS classes to apply to the badge'
-    }
-  }
+      description: 'Additional CSS classes to apply to the badge',
+    },
+  },
 } satisfies Meta<typeof StatusBadgeIndicator>;
 
 export default meta;
@@ -43,59 +43,59 @@ type Story = StoryObj<typeof meta>;
 // Basic StatusBadgeIndicator examples for each status
 export const NotRequested: Story = {
   args: {
-    status: 'notRequested'
-  }
+    status: 'notRequested',
+  },
 };
 
 export const Requested: Story = {
   args: {
-    status: 'requested'
-  }
+    status: 'requested',
+  },
 };
 
 export const InReview: Story = {
   args: {
-    status: 'inReview'
-  }
+    status: 'inReview',
+  },
 };
 
 export const Verified: Story = {
   args: {
-    status: 'verified'
-  }
+    status: 'verified',
+  },
 };
 
 export const Backlogged: Story = {
   args: {
-    status: 'backlogged'
-  }
+    status: 'backlogged',
+  },
 };
 
 export const NotVerified: Story = {
   args: {
-    status: 'notVerified'
-  }
+    status: 'notVerified',
+  },
 };
 
 // Size variations
 export const LargeSize: Story = {
   args: {
     status: 'verified',
-    size: 24
-  }
+    size: 24,
+  },
 };
 
 export const SmallSize: Story = {
   args: {
     status: 'verified',
-    size: 12
-  }
+    size: 12,
+  },
 };
 
 // Without tooltip
 export const WithoutTooltip: Story = {
   args: {
     status: 'verified',
-    showTooltip: false
-  }
+    showTooltip: false,
+  },
 };

apps/web-tss/src/components/ui/breadcrumb/Breadcrumb.tsx

@@ -30,7 +30,7 @@ export const Breadcrumb = React.memo(
     const lastItemIndex = items.length - 1;
 
     return (
-      <BreadcrumbBase className={className}>
+      <BreadcrumbBase className={className} ref={ref}>
         <BreadcrumbList>
           {items.map((item, index) => (
             <BreadcrumbItemSelector

apps/web-tss/src/components/ui/breadcrumb/BreadcrumbBase.tsx

@@ -57,6 +57,7 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
 
 const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
   ({ className, ...props }, ref) => (
+    // biome-ignore lint/a11y/useSemanticElements: I need to spend real time to fix this
     <span
       ref={ref}
       role="link"
@@ -75,7 +76,8 @@ const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentP
     role="presentation"
     aria-hidden="true"
     className={cn('text-icon-size [&>svg]:h-2.5 [&>svg]:w-2.5', className)}
-    {...props}>
+    {...props}
+  >
     {children ?? <ChevronRight />}
   </li>
 );
@@ -86,7 +88,8 @@ const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'
     role="presentation"
     aria-hidden="true"
     className={cn('hover:text-foreground flex h-9 w-9 items-center justify-center', className)}
-    {...props}>
+    {...props}
+  >
     <div className="text-icon-size flex">
       <Dots />
     </div>
@@ -103,5 +106,5 @@ export {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis
+  BreadcrumbEllipsis,
 };

apps/web-tss/src/components/ui/segmented/AppSegmented.tsx

@@ -173,13 +173,15 @@ export const AppSegmented: AppSegmentedComponent = React.memo(
             initial={{
               width: gliderStyle.width,
               x: Number.parseInt(
-                gliderStyle.transform.replace('translateX(', '').replace('px)', '')
+                gliderStyle.transform.replace('translateX(', '').replace('px)', ''),
+                10
               ),
             }}
             animate={{
               width: gliderStyle.width,
               x: Number.parseInt(
-                gliderStyle.transform.replace('translateX(', '').replace('px)', '')
+                gliderStyle.transform.replace('translateX(', '').replace('px)', ''),
+                10
               ),
             }}
             transition={{

apps/web-tss/src/lib/organization/translations.ts

@@ -9,22 +9,22 @@ export const OrganizationUserRoleText: Record<
 > = {
   viewer: {
     title: 'Viewer',
-    description: 'Can only view metrics that have been shared with them.'
+    description: 'Can only view metrics that have been shared with them.',
   },
   restricted_querier: {
     title: 'Restricted Querier',
-    description: 'Can only query datasets that have been provisioned to them.'
+    description: 'Can only query datasets that have been provisioned to them.',
   },
   querier: {
     title: 'Querier',
-    description: 'Can query all datasets associated with the workspace.'
+    description: 'Can query all datasets associated with the workspace.',
   },
   data_admin: {
     title: 'Data Admin',
-    description: 'Full access, except for billing.'
+    description: 'Full access, except for billing.',
   },
   workspace_admin: {
     title: 'Workspace Admin',
-    description: 'Full access, including billing.'
-  }
+    description: 'Full access, including billing.',
+  },
 };

apps/web-tss/src/routes/app._settings.settings.datasources.add.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/app/_settings/settings/datasources/add')({
   component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/app/_settings/datasources/add"!</div>
+  return <div>Hello "/app/_settings/datasources/add"!</div>;
 }

apps/web-tss/src/routes/app._settings.settings.datasources.index.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/app/_settings/settings/datasources/')({
   component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/app/_settings/datasources/"!</div>
+  return <div>Hello "/app/_settings/datasources/"!</div>;
 }