Add sheet component and change pnpm version

.changeset/chilly-spiders-flash.md

@@ -0,0 +1,5 @@
+---
+"@itsrakesh/ui": minor
+---
+
+Added sheet component

.github/workflows/release.yml

@@ -15,10 +15,10 @@ jobs:
  - name: Checkout
  uses: actions/checkout@v3
 
- - name: Setup pnpm 7
+ - name: Setup pnpm
  uses: pnpm/action-setup@v2
  with:
- version: 7
+ version: 8
 
  - name: Setup Node.js 18.x
  uses: actions/setup-node@v3

packages/ui/.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
-import { join, dirname } from "path";
+import { dirname, join } from "path";
 
 /**
  * This function is used to resolve the absolute path of a package.

packages/ui/.storybook/preview.ts

@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/react";
 import { withThemeByClassName } from "@storybook/addon-styling";
+import type { Preview } from "@storybook/react";
 
 import "../src/globals.css";
 

packages/ui/README.md

@@ -19,9 +19,9 @@ pnpm add @itsrakesh/ui
 - Update your `tailwind.config.ts` with these.
 
 ```json
-...
+//...
  content: [
- ...,
+ //...,
  "./node_modules/@itsrakesh/ui/dist/**/*.{mjs,mts,jsx,tsx}",
  ]
  theme: {
@@ -102,7 +102,7 @@ pnpm add @itsrakesh/ui
  },
  },
  plugins: [require("tailwindcss-animate")],
-...
+//...
 ```
 
 - Copy this to your project css (e.g. `globals.css`) file.
@@ -183,6 +183,15 @@ pnpm add @itsrakesh/ui
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
 
+ --success: 116, 46%, 49%;
+ --success-foreground: 210 40% 98%;
+
+ --warning: 33, 100%, 56%;
+ --warning-foreground: 210 40% 98%;
+
+ --info: 216, 100%, 40%;
+ --info-foreground: 210 40% 98%;
+
  --ring: 216 34% 17%;
 
  --radius: 0.5rem;

packages/ui/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { cn } from "@itsrakesh/utils";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = ({
+ className,
+ ...props
+}: SheetPrimitive.DialogPortalProps) => (
+ <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-background/80 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",
+ className
+ )}
+ {...props}
+ ref={ref}
+ />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+ "fixed z-50 gap-4 bg-background 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",
+ {
+ 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-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+ <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-foreground", 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-muted-foreground", className)}
+ {...props}
+ />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetOverlay,
+ SheetPortal,
+ SheetTitle,
+ SheetTrigger,
+};

packages/ui/src/components/Sheet/index.ts

@@ -0,0 +1,12 @@
+export {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetOverlay,
+ SheetPortal,
+ SheetTitle,
+ SheetTrigger,
+} from "./Sheet";

packages/ui/src/components/index.ts

@@ -10,6 +10,7 @@ export * from "./Command";
 export * from "./Dialog";
 export * from "./DropdownMenu";
 export * from "./Form";
+export * from "./HoverCard";
 export * from "./Input";
 export * from "./Label";
 export * from "./Menubar";
@@ -18,11 +19,11 @@ export * from "./RadioGroup";
 export * from "./ScrollArea";
 export * from "./Select";
 export * from "./Separator";
+export * from "./Sheet";
 export * from "./Skeleton";
 export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Textarea";
 export * from "./Toast";
 export * from "./Tooltip";
-export * from "./HoverCard";

packages/ui/src/globals.css

@@ -73,6 +73,15 @@
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
 
+ --success: 116, 46%, 49%;
+ --success-foreground: 210 40% 98%;
+
+ --warning: 33, 100%, 56%;
+ --warning-foreground: 210 40% 98%;
+
+ --info: 216, 100%, 40%;
+ --info-foreground: 210 40% 98%;
+
  --ring: 216 34% 17%;
 
  --radius: 0.5rem;

packages/ui/src/stories/Sheet.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+ Button,
+ Input,
+ Label,
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "../";
+
+const meta: Meta<typeof Sheet> = {
+ component: Sheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+ render: () => (
+ <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 className="grid gap-4 py-4">
+ <div className="grid grid-cols-4 items-center gap-4">
+ <Label htmlFor="name" className="text-right">
+ Name
+ </Label>
+ <Input id="name" value="Pedro Duarte" className="col-span-3" />
+ </div>
+ <div className="grid grid-cols-4 items-center gap-4">
+ <Label htmlFor="username" className="text-right">
+ Username
+ </Label>
+ <Input id="username" value="@peduarte" className="col-span-3" />
+ </div>
+ </div>
+ <SheetFooter>
+ <SheetClose asChild>
+ <Button type="submit">Save changes</Button>
+ </SheetClose>
+ </SheetFooter>
+ </SheetContent>
+ </Sheet>
+ ),
+};