feat(design-system): feat add slider (#1571)

Because

- Add slider 

This commit

- (write the summary of all commits in this PR in a list)

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/design-system",
-  "version": "0.82.1",
+  "version": "0.82.1-rc.2",
   "description": "Instill AI's design system",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",
@@ -125,6 +125,7 @@
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",

packages/design-system/src/new-ui/Slider/Slider.stories.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+
+import { cn } from "../../utils";
+import { Slider } from "./Slider";
+
+const meta: Meta<typeof Slider.Root> = {
+  title: "Components/NewUi/Slider",
+  component: Slider.Root,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider.Root>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<number>(50);
+
+    const handleValueChange = (newValue: number[]) => {
+      setValue(newValue[0]!);
+    };
+
+    return (
+      <div className="w-full max-w-md p-4">
+        <Slider.Root
+          value={[value]}
+          onValueChange={handleValueChange}
+          min={0}
+          max={100}
+          step={1}
+          className={cn("relative flex w-full touch-none select-none")}
+        >
+          <Slider.Track className="relative h-2 w-full rounded-full bg-semantic-bg-line">
+            <Slider.Range className="absolute h-full rounded-full bg-semantic-accent-default" />
+          </Slider.Track>
+          <Slider.Thumb className="absolute top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-semantic-accent-default bg-semantic-bg-base-bg" />
+        </Slider.Root>
+        <div className="mt-4 text-center">Value: {value}</div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<number>(30);
+
+    const handleValueChange = (newValue: number[]) => {
+      setValue(newValue[0]!);
+    };
+
+    return (
+      <div className="w-full max-w-md p-4">
+        <Slider.Root
+          value={[value]}
+          onValueChange={handleValueChange}
+          min={0}
+          max={100}
+          step={1}
+          disabled
+          className={cn(
+            "relative flex w-full touch-none select-none cursor-not-allowed opacity-50",
+          )}
+        >
+          <Slider.Track className="relative h-2 w-full rounded-full bg-semantic-bg-line">
+            <Slider.Range className="absolute h-full rounded-full bg-semantic-bg-secondary" />
+          </Slider.Track>
+          <Slider.Thumb className="absolute top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-semantic-bg-secondary bg-semantic-bg-base-bg" />
+        </Slider.Root>
+        <div className="mt-4 text-center">Value: {value}</div>
+      </div>
+    );
+  },
+};
+
+export const CustomStyling: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<number>(75);
+
+    const handleValueChange = (newValue: number[]) => {
+      setValue(newValue[0]!);
+    };
+
+    return (
+      <div className="w-full max-w-md p-4">
+        <Slider.Root
+          value={[value]}
+          onValueChange={handleValueChange}
+          min={0}
+          max={100}
+          step={5}
+          className={cn("relative flex w-full touch-none select-none")}
+        >
+          <Slider.Track className="relative h-4 w-full rounded-full bg-gradient-to-r from-semantic-success-default via-semantic-warning-default to-semantic-error-default">
+            <Slider.Range className="absolute h-full rounded-full bg-semantic-bg-base-bg opacity-50" />
+          </Slider.Track>
+          <Slider.Thumb className="absolute top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-semantic-bg-primary bg-semantic-fg-primary" />
+        </Slider.Root>
+        <div className="mt-4 text-center">Value: {value}</div>
+      </div>
+    );
+  },
+};

packages/design-system/src/new-ui/Slider/Slider.tsx

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

packages/design-system/src/new-ui/Slider/index.ts

@@ -0,0 +1 @@
+export * from "./Slider";

packages/design-system/src/new-ui/index.ts

@@ -26,6 +26,7 @@ export * from "./ScrollArea";
 export * from "./Select";
 export * from "./Skeleton";
 export * from "./Separator";
+export * from "./Slider";
 export * from "./Switch";
 export * from "./tab-menu";
 export * from "./Table";