Drop v2: Slider component

packages/web/app/src/components/ui/slider.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+    React.ElementRef<typeof SliderPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <SliderPrimitive.Root
+        ref={ref}
+        className={cn(
+            "relative flex w-full touch-none select-none items-center disabled:cursor-not-allowed",
+            className
+        )}
+        {...props}
+    >
+        <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-black dark:bg-white disabled:pointer-events-none">
+            <SliderPrimitive.Range className="absolute h-full bg-black dark:bg-white disabled:pointer-events-none" />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-black dark:border-white bg-black dark:bg-white ring-offset-orange-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed" />
+    </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

packages/web/app/src/pages/organization-subscription-manage.tsx

@@ -15,13 +15,13 @@ import { Subtitle, Title } from '@/components/ui/page';
 import { QueryError } from '@/components/ui/query-error';
 import { Card } from '@/components/v2/card';
 import { Input } from '@/components/v2/input';
-import { Slider } from '@/components/v2/slider';
 import Stat from '@/components/v2/stat';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { BillingPlanType } from '@/gql/graphql';
 import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/organization';
 import { CardElement, useElements, useStripe } from '@stripe/react-stripe-js';
 import { Link } from '@tanstack/react-router';
+import { Slider } from '@/components/ui/slider';
 
 const ManageSubscriptionInner_OrganizationFragment = graphql(`
   fragment ManageSubscriptionInner_OrganizationFragment on Organization {

packages/web/app/src/stories/slider.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect } from 'react';
+import { Slider } from '../components/ui/slider';
+
+
+const meta: Meta<typeof Template> = {
+    title: 'Components/Slider',
+    component: Template,
+    argTypes: {
+        min: {
+            control: 'number',
+            defaultValue: 0,
+        },
+        max: {
+            control: 'number',
+            defaultValue: 100,
+        },
+        step: {
+            control: 'number',
+            defaultValue: 1,
+        },
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+        },
+    },
+    args: {
+        min: 0,
+        max: 100,
+        step: 1,
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Template>
+
+function Template({ min, max, step, disabled }: { min: number, max: number, step: number, disabled: boolean }) {
+    useEffect(() => {
+        console.log('min, max, or step changed');
+    }, [min, max, step, disabled]);
+
+    return (
+        <div className='w-1/2 mx-auto'>
+            <Slider
+                min={min}
+                max={max}
+                step={step}
+                disabled={disabled}
+            />
+        </div>
+    );
+}
+
+export const Default: Story = {
+    args: {
+        min: 1,
+        step: 10,
+        max: 100,
+        disabled: true,
+    }
+};