Feature/scroll area (#10)

* chore: adding radix-ui-scroll-area * feat: scrollArea * feat: adding more story * feat: avatar * refactor: avatar struct * refactor: change sample name * feat: text-area * feat: add more props * fix: correct spelling * Feature/switch (#3) * feat: switch component * feat: switch component * fix: pnpm lock --------- Co-authored-by: boomchanotai <[email protected]> * Feature/check box (#4) * chore: radix-checkbox added * feat: added label * Feature/switch (#3) * feat: switch component * feat: switch component * fix: pnpm lock --------- Co-authored-by: boomchanotai <[email protected]> --------- Co-authored-by: boomchanotai <[email protected]> Co-authored-by: Chatdanai Porncharoensub <[email protected]> * fix: dep * Feature/progress (#5) * feat: progress component * chore: change value control --------- Co-authored-by: boomchanotai <[email protected]> * feat: collapsible component (#6) * feat: collapsible component * fix: lock * build: upgrade storybook --------- Co-authored-by: boomchanotai <[email protected]> * Feature/radio-group (#7) * feat: radio-group component * feat: update neutral color in tailwind * style: update color in radio components * style: update radio group storybook --------- Co-authored-by: boomchanotai <[email protected]> * Feature/tooltip (#8) * feat: tooltip component * fix: lock --------- Co-authored-by: boomchanotai <[email protected]> * Feature/separator (#9) * chore: add radix-ui/Separator * feat: separator --------- Co-authored-by: boomchanotai <[email protected]> * fix: lock --------- Co-authored-by: Chatdanai Porncharoensub <[email protected]> Co-authored-by: boomchanotai <[email protected]> Co-authored-by: phongit.kha <[email protected]>
esc-chula · Oct 2, 2024 · f53e678 · f53e678
1 parent 8fcb0f4
commit f53e678
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/lib/components/Scroll-area/index.stories.tsx b/lib/components/Scroll-area/index.stories.tsx
@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import * as React from 'react'
+
+import { ScrollArea } from '.'
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+)
+
+const ExampleData = () => {
+  return (
+    <>
+      {tags.map((tag) => (
+        <React.Fragment>
+          <div key={tag} className='text-sm'>
+            {tag}
+          </div>
+          <hr className='my-2' />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+export const VerticalDemo: Story = {
+  args: {},
+  render: (args) => (
+    <ScrollArea className='h-72 w-48 rounded-md border' {...args}>
+      <div className='p-4'>
+        <h4 className='mb-4 text-sm font-medium leading-none'>Tags</h4>
+        <ExampleData />
+      </div>
+    </ScrollArea>
+  ),
+}
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+const Works: Artwork[] = [
+  {
+    artist: 'Ornella Binni',
+    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Tom Byrom',
+    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Vladimir Malyavko',
+    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+  },
+]
+
+const ExampleWorks = () => {
+  return (
+    <>
+      {Works.map((artwork) => (
+        <React.Fragment>
+          <figure key={artwork.artist} className='shrink-0'>
+            <div className='overflow-hidden rounded-md'>
+              <img
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className='aspect-[3/4] size-fit object-cover'
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className='pt-2 text-xs text-muted-foreground'>
+              Photo by{' '}
+              <span className='font-semibold text-foreground'>
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+export const HorizontalDemo: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <ScrollArea className='w-96 whitespace-nowrap rounded-md border' {...args}>
+      <div className='flex w-max space-x-4 p-4'>
+        <ExampleWorks />
+      </div>
+    </ScrollArea>
+  ),
+}
+
+export const MixedDemo: Story = {
+  args: {},
+  render: () => (
+    <div>
+      <ScrollArea
+        className='h-72 w-full rounded-md border'
+        orientation='vertical'
+      >
+        <div className='p-4'>
+          <h4 className='mb-4 text-sm font-medium leading-none'>Tags</h4>
+          <ExampleData />
+        </div>
+      </ScrollArea>
+      <ScrollArea
+        className='w-96 whitespace-nowrap rounded-md border'
+        orientation='horizontal'
+      >
+        <div className='flex w-max space-x-4 p-4'>
+          <ExampleWorks />
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+}
diff --git a/lib/components/Scroll-area/index.tsx b/lib/components/Scroll-area/index.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  ref?: React.Ref<HTMLDivElement>
+  orientation?: 'vertical' | 'horizontal'
+}
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(({ className, children, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className='size-full rounded-[inherit]'>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar orientation={orientation} />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.0",