Scroll area (#1360)

## Description

1. Add scroll area to the to ds
2. Add scroll area to add components panel

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

apps/builder/app/builder/features/sidebar-left/panels/components/components.tsx

@@ -13,6 +13,7 @@ import {
   ComponentCard,
   Tooltip,
   ArrowFocus,
+  ScrollArea,
 } from "@webstudio-is/design-system";
 import { PlusIcon } from "@webstudio-is/icons";
 import type { Publish } from "~/shared/pubsub";
@@ -78,12 +79,15 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
   });
 
   return (
-    <Flex css={{ height: "100%", flexDirection: "column" }}>
+    <Flex
+      css={{ height: "100%", flexDirection: "column" }}
+      ref={draggableContainerRef}
+    >
       <Header
         title="Add"
         suffix={<CloseButton onClick={() => onSetActiveTab("none")} />}
       />
-      <div ref={draggableContainerRef}>
+      <ScrollArea>
         {Array.from(componentCategories).map((category) => (
           <CollapsibleSection label={category} key={category} fullWidth>
             <ArrowFocus
@@ -119,7 +123,7 @@ export const TabContent = ({ publish, onSetActiveTab }: TabContentProps) => {
             />
           </CollapsibleSection>
         ))}
-      </div>
+      </ScrollArea>
     </Flex>
   );
 };

packages/design-system/package.json

@@ -55,6 +55,7 @@
     "@radix-ui/react-portal": "^1.0.0",
     "@radix-ui/react-progress": "^1.0.0",
     "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^1.0.0",
     "@radix-ui/react-separator": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",

packages/design-system/src/components/scroll-area.tsx

@@ -0,0 +1,77 @@
+import { styled } from "../stitches.config";
+import { Root, Viewport, Scrollbar, Thumb } from "@radix-ui/react-scroll-area";
+
+const SCROLLBAR_SIZE = 15;
+
+const ScrollAreaRoot = styled(Root, {
+  boxSizing: "border-box",
+  overflow: "hidden",
+});
+
+const ScrollAreaViewport = styled(Viewport, {
+  boxSizing: "border-box",
+  width: "100%",
+  height: "100%",
+  borderRadius: "inherit",
+});
+
+const ScrollAreaThumb = styled(Thumb, {
+  boxSizing: "border-box",
+  flex: 1,
+  background: "rgba(0, 0, 0, 0.5)",
+  borderRadius: 10,
+  // increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+  position: "relative",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "100%",
+    height: "100%",
+    minWidth: 44,
+    minHeight: 44,
+  },
+});
+
+const ScrollAreaScrollbar = styled(Scrollbar, {
+  boxSizing: "border-box",
+  display: "flex",
+  // ensures no selection
+  userSelect: "none",
+  // disable browser handling of all panning and zooming gestures on touch devices
+  touchAction: "none",
+  paddingRight: 2,
+  paddingLeft: 6,
+  background: "rgba(248, 248, 248, 0.76)",
+  transition: "all 160ms ease-out",
+  "&:hover": {
+    paddingRight: 2,
+    paddingLeft: 2,
+    borderLeft: `1px solid #e8e8e8`,
+  },
+  '&[data-orientation="vertical"]': {
+    width: SCROLLBAR_SIZE,
+  },
+  '&[data-orientation="horizontal"]': {
+    flexDirection: "column",
+    height: SCROLLBAR_SIZE,
+  },
+});
+
+type ScrollAreaProps = { children: JSX.Element | Array<JSX.Element> };
+
+export const ScrollArea = ({ children }: ScrollAreaProps) => {
+  return (
+    <ScrollAreaRoot>
+      <ScrollAreaViewport>{children}</ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation="vertical">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar orientation="horizontal">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+    </ScrollAreaRoot>
+  );
+};

packages/design-system/src/index.ts

@@ -32,6 +32,7 @@ export * from "./components/radio";
 export * from "./components/checkbox";
 export * from "./components/component-card";
 export * from "./components/primitives/arrow-focus";
+export * from "./components/scroll-area";
 
 // Not aligned
 

pnpm-lock.yaml

@@ -635,6 +635,9 @@ importers:
       '@radix-ui/react-radio-group':
         specifier: ^1.0.0
         version: 1.0.0(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.0.3
+        version: 1.0.3(react-dom@17.0.2)(react@17.0.2)
       '@radix-ui/react-select':
         specifier: ^1.0.0
         version: 1.0.0(@types/react@17.0.47)(react-dom@17.0.2)(react@17.0.2)
@@ -5619,6 +5622,18 @@ packages:
       react-dom: 17.0.2(react@17.0.2)
     dev: false
 
+  /@radix-ui/react-primitive@1.0.2(react-dom@17.0.2)(react@17.0.2):
+    resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.13
+      '@radix-ui/react-slot': 1.0.1(react@17.0.2)
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    dev: false
+
   /@radix-ui/react-progress@1.0.0(react-dom@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-j+JHtTuDpIhF0eOolNug+8hpZqNXcXp2GhTtwz+lnFzhY2a8+LXRSU79iy0r0WUs7UqCXCEeIJIrhg7NS/vPGA==}
     peerDependencies:
@@ -5694,6 +5709,26 @@ packages:
       react-dom: 17.0.2(react@17.0.2)
     dev: false
 
+  /@radix-ui/react-scroll-area@1.0.3(react-dom@17.0.2)(react@17.0.2):
+    resolution: {integrity: sha512-sBX9j8Q+0/jReNObEAveKIGXJtk3xUoSIx4cMKygGtO128QJyVDn01XNOFsyvihKDCTcu7SINzQ2jPAZEhIQtw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.20.13
+      '@radix-ui/number': 1.0.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@17.0.2)
+      '@radix-ui/react-context': 1.0.0(react@17.0.2)
+      '@radix-ui/react-direction': 1.0.0(react@17.0.2)
+      '@radix-ui/react-presence': 1.0.0(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-primitive': 1.0.2(react-dom@17.0.2)(react@17.0.2)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@17.0.2)
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@17.0.2)
+      react: 17.0.2
+      react-dom: 17.0.2(react@17.0.2)
+    dev: false
+
   /@radix-ui/react-select@1.0.0(@types/react@17.0.47)(react-dom@17.0.2)(react@17.0.2):
     resolution: {integrity: sha512-GfbVBxx7JPvytNT+0XYCFCOImEMmpl0Vg7hhifLaLV7p5zRottFMgQ7qrrxw8v6B8buKXz41kWYMrdRrWqsZaQ==}
     peerDependencies:
@@ -5967,7 +6002,7 @@ packages:
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
     dependencies:
-      '@babel/runtime': 7.19.4
+      '@babel/runtime': 7.20.13
       react: 17.0.2
     dev: false