[WEB-4729] dev: propel scrollarea

packages/propel/package.json

@@ -27,6 +27,7 @@
     "./icons": "./dist/icons/index.js",
     "./menu": "./dist/menu/index.js",
     "./popover": "./dist/popover/index.js",
+    "./scrollarea": "./dist/scrollarea/index.js",
     "./skeleton": "./dist/skeleton/index.js",
     "./styles/fonts": "./dist/styles/fonts/index.css",
     "./switch": "./dist/switch/index.js",

packages/propel/src/scrollarea/index.ts

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

packages/propel/src/scrollarea/scrollarea.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScrollArea } from "./scrollarea";
+
+const meta: Meta<typeof ScrollArea> = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A customizable scroll area component with multiple size variants, scroll behaviors, and orientations.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal"],
+      description: "Orientation of the scrollbar",
+      table: {
+        type: { summary: "ScrollAreaOrientation" },
+        defaultValue: { summary: "vertical" },
+      },
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size variant of the scrollbar",
+      table: {
+        type: { summary: "ScrollAreaSize" },
+        defaultValue: { summary: "md" },
+      },
+    },
+    scrollType: {
+      control: { type: "select" },
+      options: ["always", "scroll", "hover"],
+      description: "When to show the scrollbar",
+      table: {
+        type: { summary: "ScrollAreaScrollType" },
+        defaultValue: { summary: "always" },
+      },
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollArea>;
+
+// Sample content components for stories
+const LongTextContent = () => (
+  <div className="p-4 space-y-4">
+    <h3 className="text-lg font-semibold">Long Text Content</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </p>
+    <p>
+      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+      eos qui ratione voluptatem sequi nesciunt.
+    </p>
+    <p>
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+    </p>
+    <p>
+      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+      commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+      consequatur.
+    </p>
+  </div>
+);
+
+// Default story
+export const Default: Story = {
+  args: {
+    className: "h-64 w-80 border rounded-lg",
+    size: "md",
+    scrollType: "always",
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <ScrollArea {...args}>
+      <LongTextContent />
+    </ScrollArea>
+  ),
+};

packages/propel/src/scrollarea/scrollarea.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { ScrollArea as BaseScrollArea } from "@base-ui-components/react/scroll-area";
+
+import { cn } from "../utils/classname";
+
+type ScrollAreaOrientation = "horizontal" | "vertical";
+type ScrollAreaScrollType = "always" | "scroll" | "hover";
+type ScrollAreaSize = "sm" | "md" | "lg";
+
+interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Root> {
+  orientation?: ScrollAreaOrientation;
+  scrollType?: ScrollAreaScrollType;
+  size?: ScrollAreaSize;
+}
+
+function ScrollArea({ className, children, orientation, scrollType, size = "md", ...props }: ScrollAreaProps) {
+  return (
+    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+      <BaseScrollArea.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline"
+      >
+        {children}
+      </BaseScrollArea.Viewport>
+      <ScrollBar orientation={orientation} scrollType={scrollType} size={size} />
+      <BaseScrollArea.Corner />
+    </BaseScrollArea.Root>
+  );
+}
+
+const horizontalSizeStyles = {
+  sm: "p-[0.112rem] h-2.5",
+  md: "p-[0.112rem] h-3",
+  lg: "p-[0.112rem] h-4",
+} as const;
+
+const verticalSizeStyles = {
+  sm: "p-[0.112rem] w-2.5",
+  md: "p-[0.112rem] w-3",
+  lg: "p-[0.112rem] w-4",
+} as const;
+
+const thumbSizeStyles = {
+  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
+  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2",
+  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
+} as const;
+
+interface ScrollBarProps extends React.ComponentProps<typeof BaseScrollArea.Scrollbar> {
+  scrollType?: ScrollAreaScrollType;
+  size?: ScrollAreaSize;
+}
+
+const ScrollBar = React.memo(function ScrollBar({
+  className,
+  orientation = "vertical",
+  scrollType = "always",
+  size = "md",
+  ...props
+}: ScrollBarProps) {
+  return (
+    <BaseScrollArea.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "group/track mr-1 flex justify-center rounded bg-transparent opacity-0 transition-opacity delay-300 ",
+        orientation === "vertical" && verticalSizeStyles[size],
+        orientation === "horizontal" && horizontalSizeStyles[size],
+        scrollType === "always" && "opacity-100",
+        scrollType === "scroll" &&
+          "data-[scrolling]:opacity-100  data-[scrolling]:delay-0 data-[scrolling]:duration-75",
+        scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75",
+        className
+      )}
+      {...props}
+    >
+      <BaseScrollArea.Thumb
+        data-slot="scroll-area-thumb"
+        className={cn(
+          "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active data-[scrolling]:bg-custom-scrollbar-active",
+          thumbSizeStyles[size]
+        )}
+      />
+    </BaseScrollArea.Scrollbar>
+  );
+});
+
+export { ScrollArea };
+export type { ScrollAreaProps, ScrollAreaOrientation, ScrollAreaScrollType, ScrollAreaSize };

packages/propel/tsdown.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     "src/icons/index.ts",
     "src/menu/index.ts",
     "src/popover/index.ts",
+    "src/scrollarea/index.ts",
     "src/skeleton/index.ts",
     "src/switch/index.ts",
     "src/table/index.ts",