Feature/Popover (#18)

* feat: popover components * Feature/Slider (#13) * feat: add slider component * feat: add args in slider storybook * Feature/alert-dialog (#14) * feat: add AlertDialog component * feat: upgrade storybook --------- Co-authored-by: boomchanotai <[email protected]> * feat: hover card component & storybook (#15) * Feature/accordion (#16) * feat: accordion component * fix: accordion storybook * Feature/Slider (#13) * feat: add slider component * feat: add args in slider storybook * Feature/alert-dialog (#14) * feat: add AlertDialog component * feat: upgrade storybook --------- Co-authored-by: boomchanotai <[email protected]> * feat: hover card component & storybook (#15) * fix: lock file --------- Co-authored-by: phongit.kha <[email protected]> Co-authored-by: boomchanotai <[email protected]> * Feature/dialog (#17) * feat: dialog components * refactor: delete X comment from components * build: lock file --------- Co-authored-by: boomchanotai <[email protected]> * build: lock file --------- Co-authored-by: phongit.kha <[email protected]> Co-authored-by: boomchanotai <[email protected]> Co-authored-by: Chatdanai Porncharoensub <[email protected]>
esc-chula · Oct 28, 2024 · c78dc64 · c78dc64
1 parent 1d2c359
commit c78dc64
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 0 deletions.
diff --git a/lib/components/Popover/index.stories.tsx b/lib/components/Popover/index.stories.tsx
@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Popover, PopoverContent, PopoverTrigger } from '.'
+import { Button } from '..'
+import { Input } from '..'
+import { Label } from '..'
+
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <Popover {...args}>
+      <PopoverTrigger asChild>
+        <Button variant='outline'>Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-80'>
+        <div className='grid gap-4'>
+          <div className='space-y-2'>
+            <h4 className='font-medium leading-none'>Dimensions</h4>
+            <p className='text-sm'>Set the dimensions for the layer.</p>
+          </div>
+          <div className='grid gap-2'>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='width'>Width</Label>
+              <Input
+                id='width'
+                defaultValue='100%'
+                className='col-span-2 h-8'
+              />
+            </div>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='maxWidth'>Max. width</Label>
+              <Input
+                id='maxWidth'
+                defaultValue='300px'
+                className='col-span-2 h-8'
+              />
+            </div>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='height'>Height</Label>
+              <Input
+                id='height'
+                defaultValue='25px'
+                className='col-span-2 h-8'
+              />
+            </div>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='maxHeight'>Max. height</Label>
+              <Input
+                id='maxHeight'
+                defaultValue='none'
+                className='col-span-2 h-8'
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+}
diff --git a/lib/components/Popover/index.tsx b/lib/components/Popover/index.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'text-popover-black data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border bg-white p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml