From f53e6783da5aa2fbe2b6d8dc3f789ada96b4ce4a Mon Sep 17 00:00:00 2001 From: CSAP <113345557+ChanatpakornS@users.noreply.github.com> Date: Wed, 2 Oct 2024 17:22:42 +0700 Subject: [PATCH] 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 * 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 --------- Co-authored-by: boomchanotai Co-authored-by: Chatdanai Porncharoensub <116288526+PhorDotC@users.noreply.github.com> * fix: dep * Feature/progress (#5) * feat: progress component * chore: change value control --------- Co-authored-by: boomchanotai * feat: collapsible component (#6) * feat: collapsible component * fix: lock * build: upgrade storybook --------- Co-authored-by: boomchanotai * 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 * Feature/tooltip (#8) * feat: tooltip component * fix: lock --------- Co-authored-by: boomchanotai * Feature/separator (#9) * chore: add radix-ui/Separator * feat: separator --------- Co-authored-by: boomchanotai * fix: lock --------- Co-authored-by: Chatdanai Porncharoensub <116288526+PhorDotC@users.noreply.github.com> Co-authored-by: boomchanotai Co-authored-by: phongit.kha <153442976+Phongit-Khanthawisood@users.noreply.github.com> --- lib/components/Scroll-area/index.stories.tsx | 132 +++++++++++++++++++ lib/components/Scroll-area/index.tsx | 54 ++++++++ package.json | 1 + 3 files changed, 187 insertions(+) create mode 100644 lib/components/Scroll-area/index.stories.tsx create mode 100644 lib/components/Scroll-area/index.tsx diff --git a/lib/components/Scroll-area/index.stories.tsx b/lib/components/Scroll-area/index.stories.tsx new file mode 100644 index 0000000..9ecb623 --- /dev/null +++ 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 = { + title: 'Components/ScrollArea', + component: ScrollArea, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta +type Story = StoryObj + +const tags = Array.from({ length: 50 }).map( + (_, i, a) => `v1.2.0-beta.${a.length - i}` +) + +const ExampleData = () => { + return ( + <> + {tags.map((tag) => ( + +
+ {tag} +
+
+ + ))} + + ) +} + +export const VerticalDemo: Story = { + args: {}, + render: (args) => ( + +
+

Tags

+ +
+ + ), +} + +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) => ( + +
+
+ {`Photo +
+
+ Photo by{' '} + + {artwork.artist} + +
+
+ + ))} + + ) +} +export const HorizontalDemo: Story = { + args: { + orientation: 'horizontal', + }, + render: (args) => ( + +
+ +
+ + ), +} + +export const MixedDemo: Story = { + args: {}, + render: () => ( +
+ +
+

Tags

+ +
+ + +
+ +
+ +
+ ), +} diff --git a/lib/components/Scroll-area/index.tsx b/lib/components/Scroll-area/index.tsx new file mode 100644 index 0000000..9603601 --- /dev/null +++ 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 { + ref?: React.Ref + orientation?: 'vertical' | 'horizontal' +} + +const ScrollArea = React.forwardRef< + React.ElementRef, + ScrollAreaProps +>(({ className, children, orientation = 'vertical', ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'vertical', ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/package.json b/package.json index c0e8fbe..8d98fdd 100644 --- 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",