Adds Sheet

Author: CGoodwin90

dist/components/Sheet/Sheet.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { Sheet } from '../ui/sheet';
+type SheetProps = React.ComponentProps<typeof Sheet> & {
+    sheetTitle?: string;
+    sheetTrigger?: string;
+    sheetDescription?: string;
+    sheetFooterButton?: string;
+    buttonAction?: React.MouseEventHandler<HTMLButtonElement>;
+    sheetFields: {
+        id: string;
+        label: string;
+        inputDefault: string;
+    }[];
+};
+export default function UISheet({ sheetTrigger, sheetTitle, sheetDescription, sheetFooterButton, buttonAction, sheetFields, ...rest }: SheetProps): import("react/jsx-dev-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Sheet.d.ts.map

dist/components/Sheet/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Sheet } from './Sheet';
+export default Sheet;
+//# sourceMappingURL=index.d.ts.map

src/components/Sheet/Sheet.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Label } from '../ui/label';
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetTrigger,
+	SheetFooter,
+	SheetTitle,
+	SheetHeader,
+	SheetClose,
+} from '../ui/sheet';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+
+type SheetProps = React.ComponentProps<typeof Sheet> & {
+	sheetTitle?: string;
+	sheetTrigger?: string;
+	sheetDescription?: string;
+	sheetFooterButton?: string;
+	buttonAction?: React.MouseEventHandler<HTMLButtonElement>;
+	sheetFields: {
+		id: string;
+		label: string;
+		inputDefault: string;
+	}[];
+};
+
+export default function UISheet({
+	sheetTrigger = 'Open',
+	sheetTitle = 'Edit profile',
+	sheetDescription = "Make changes to your profile here. Click save when you're done.",
+	sheetFooterButton = 'Save changes',
+	buttonAction = () => {},
+	sheetFields,
+	...rest
+}: SheetProps) {
+	return (
+		<Sheet {...rest}>
+			<SheetTrigger asChild>
+				<Button variant="outline">{sheetTrigger}</Button>
+			</SheetTrigger>
+			<SheetContent>
+				<SheetHeader>
+					<SheetTitle>{sheetTitle}</SheetTitle>
+					<SheetDescription>{sheetDescription}</SheetDescription>
+				</SheetHeader>
+				{sheetFields.map((field) => (
+					<div className="grid auto-rows-min gap-6 px-4">
+						<div className="grid gap-3">
+							<Label htmlFor={field.id}>{field.label}</Label>
+							<Input id={field.id} defaultValue={field.inputDefault} />
+						</div>
+					</div>
+				))}
+				<SheetFooter>
+					<Button onClick={buttonAction} type="submit">
+						{sheetFooterButton}
+					</Button>
+					<SheetClose asChild>
+						<Button variant="outline">Close</Button>
+					</SheetClose>
+				</SheetFooter>
+			</SheetContent>
+		</Sheet>
+	);
+}

src/components/Sheet/index.tsx

@@ -0,0 +1,3 @@
+import { default as Sheet } from './Sheet';
+
+export default Sheet;

src/stories/Sheet.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Story } from '@storybook/addon-docs/blocks';
+import { default as Sheet } from '../components/Sheet';
+
+const meta: Meta<typeof Sheet> = {
+	component: Sheet,
+	title: 'Components/Sheet',
+	tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Default: Story = {
+	args: {
+		sheetFields: [
+			{
+				id: 'sheet-demo',
+				label: 'Name',
+				inputDefault: 'Placeholder',
+			},
+			{
+				id: 'sheet-demo-username',
+				label: 'Username',
+				inputDefault: 'Placeholder',
+			},
+		],
+	},
+};
+
+export const Custom: Story = {
+	args: {
+		sheetTitle: 'Edit',
+		sheetTrigger: 'Edit Profile',
+		sheetDescription: 'Test Description',
+		sheetFooterButton: 'Save!!',
+		sheetFields: [
+			{
+				id: 'sheet-demo',
+				label: 'Name',
+				inputDefault: 'Placeholder',
+			},
+			{
+				id: 'sheet-demo-username',
+				label: 'Username',
+				inputDefault: 'Placeholder',
+			},
+		],
+	},
+};
+export default meta;