-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
80ddadc
commit 9be9fe3
Showing
7 changed files
with
293 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@buho/components": minor | ||
--- | ||
|
||
add sheet |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@buho/components": patch | ||
--- | ||
|
||
merge conflict solved |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,149 @@ | ||
import * as React from "react"; | ||
import * as SheetPrimitive from "@radix-ui/react-dialog"; | ||
import { Cross2Icon } from "@radix-ui/react-icons"; | ||
import { cva, type VariantProps } from "class-variance-authority"; | ||
|
||
import { cn } from "@/lib/utils"; | ||
|
||
const Sheet = SheetPrimitive.Root; | ||
|
||
const SheetTrigger = SheetPrimitive.Trigger; | ||
|
||
const SheetClose = SheetPrimitive.Close; | ||
|
||
const SheetPortal = ({ | ||
className, | ||
...props | ||
}: SheetPrimitive.DialogPortalProps & { className?: string }) => ( | ||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
// @ts-ignore | ||
<SheetPrimitive.Portal className={cn(className)} {...props} /> | ||
); | ||
SheetPortal.displayName = SheetPrimitive.Portal.displayName; | ||
|
||
const SheetOverlay = React.forwardRef< | ||
React.ElementRef<typeof SheetPrimitive.Overlay>, | ||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | ||
>(({ className, ...props }, ref) => ( | ||
<SheetPrimitive.Overlay | ||
className={cn( | ||
"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80", | ||
className | ||
)} | ||
{...props} | ||
ref={ref} | ||
/> | ||
)); | ||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; | ||
|
||
const sheetVariants = cva( | ||
"fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-slate-950", | ||
{ | ||
variants: { | ||
side: { | ||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", | ||
bottom: | ||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", | ||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", | ||
right: | ||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", | ||
}, | ||
}, | ||
defaultVariants: { | ||
side: "right", | ||
}, | ||
} | ||
); | ||
|
||
interface SheetContentProps | ||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, | ||
VariantProps<typeof sheetVariants> {} | ||
|
||
const SheetContent = React.forwardRef< | ||
React.ElementRef<typeof SheetPrimitive.Content>, | ||
SheetContentProps | ||
>(({ side = "right", className, children, ...props }, ref) => ( | ||
<SheetPortal> | ||
<SheetOverlay /> | ||
<SheetPrimitive.Content | ||
ref={ref} | ||
className={cn(sheetVariants({ side }), className)} | ||
{...props} | ||
> | ||
{children} | ||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800"> | ||
<Cross2Icon className="h-4 w-4" /> | ||
<span className="sr-only">Close</span> | ||
</SheetPrimitive.Close> | ||
</SheetPrimitive.Content> | ||
</SheetPortal> | ||
)); | ||
SheetContent.displayName = SheetPrimitive.Content.displayName; | ||
|
||
const SheetHeader = ({ | ||
className, | ||
...props | ||
}: React.HTMLAttributes<HTMLDivElement>) => ( | ||
<div | ||
className={cn( | ||
"flex flex-col space-y-2 text-center sm:text-left", | ||
className | ||
)} | ||
{...props} | ||
/> | ||
); | ||
SheetHeader.displayName = "SheetHeader"; | ||
|
||
const SheetFooter = ({ | ||
className, | ||
...props | ||
}: React.HTMLAttributes<HTMLDivElement>) => ( | ||
<div | ||
className={cn( | ||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", | ||
className | ||
)} | ||
{...props} | ||
/> | ||
); | ||
SheetFooter.displayName = "SheetFooter"; | ||
|
||
const SheetTitle = React.forwardRef< | ||
React.ElementRef<typeof SheetPrimitive.Title>, | ||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | ||
>(({ className, ...props }, ref) => ( | ||
<SheetPrimitive.Title | ||
ref={ref} | ||
className={cn( | ||
"text-lg font-semibold text-slate-950 dark:text-slate-50", | ||
className | ||
)} | ||
{...props} | ||
/> | ||
)); | ||
SheetTitle.displayName = SheetPrimitive.Title.displayName; | ||
|
||
const SheetDescription = React.forwardRef< | ||
React.ElementRef<typeof SheetPrimitive.Description>, | ||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | ||
>(({ className, ...props }, ref) => ( | ||
<SheetPrimitive.Description | ||
ref={ref} | ||
className={cn("text-sm text-slate-500 dark:text-slate-400", className)} | ||
{...props} | ||
/> | ||
)); | ||
SheetDescription.displayName = SheetPrimitive.Description.displayName; | ||
|
||
export { | ||
Sheet, | ||
SheetPortal, | ||
SheetOverlay, | ||
SheetTrigger, | ||
SheetClose, | ||
SheetContent, | ||
SheetHeader, | ||
SheetFooter, | ||
SheetTitle, | ||
SheetDescription, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import { Button } from "@/components/ui/button"; | ||
import { | ||
Sheet, | ||
SheetClose, | ||
SheetContent, | ||
SheetDescription, | ||
SheetFooter, | ||
SheetHeader, | ||
SheetTitle, | ||
SheetTrigger, | ||
} from "@/components/ui/sheet"; | ||
import { type Meta, StoryObj } from "@storybook/react"; | ||
|
||
const meta: Meta<typeof Sheet> = { | ||
component: Sheet, | ||
}; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof Sheet>; | ||
|
||
export const Primary: Story = { | ||
render: () => ( | ||
<div className="w-full min-h-screen"> | ||
<Sheet> | ||
<SheetTrigger asChild> | ||
<Button variant="outline">Open</Button> | ||
</SheetTrigger> | ||
<SheetContent> | ||
<SheetHeader> | ||
<SheetTitle>Edit profile</SheetTitle> | ||
<SheetDescription> | ||
Make changes to your profile here. Click save when you're done. | ||
</SheetDescription> | ||
</SheetHeader> | ||
<div> | ||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque sint | ||
deserunt obcaecati pariatur sapiente, molestiae distinctio rem illum | ||
eum hic tempore doloremque dolorem quia eaque nihil reiciendis | ||
eveniet asperiores totam? | ||
</div> | ||
<SheetFooter> | ||
<SheetClose asChild> | ||
<Button type="submit">Save changes</Button> | ||
</SheetClose> | ||
</SheetFooter> | ||
</SheetContent> | ||
</Sheet> | ||
</div> | ||
), | ||
}; |