@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/llms/components/overlays/Sheet.md

@@ -0,0 +1,433 @@
+# Sheet
+
+Story: @alexgorbatchev/shadcn/components/overlays/Sheet
+Source: src/components/stories/overlays/Sheet.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/overlays/Sheet.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, DirectionProvider, Field, FieldGroup, FieldLabel, Input, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps } from "react";
+import { useId, useState } from "react";
+```
+
+## Default component
+
+```tsx
+SheetContent
+```
+
+## Story controls
+
+```tsx
+{
+    side: { control: "select", options: ["top", "right", "bottom", "left"] },
+    density: { control: "select", options: ["compact", "comfortable"] },
+}
+```
+
+## Default args
+
+```tsx
+{ side: "right" }
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>)
+}
+```
+
+### Open
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>)
+}
+```
+
+### Left
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { side: "left" }
+}
+```
+
+### Top
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { side: "top" }
+}
+```
+
+### Bottom
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { side: "bottom" }
+}
+```
+
+### Compact
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { density: "compact", showCloseButton: false }
+}
+```
+
+### StateCallbacks
+
+```tsx
+{
+    args: { className: fn(() => "gap-8"), titleClassName: fn(() => "mb-2"), descriptionClassName: fn(() => "mt-2") },
+    render: ({ titleClassName, descriptionClassName, ...args }) => (<Sheet>
+      <SheetTrigger render={<Button />}>Open callback preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle className={titleClassName}>Callback preferences</SheetTitle>
+          <SheetDescription className={descriptionClassName}>Native sheet state and layout.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ],
+    args: { side: "left" }
+}
+```
+
+### Payload
+
+```tsx
+{
+    render: () => (<Sheet<string>>
+      {({ payload }) => (<>
+          <SheetTrigger<string> payload="Alpha" render={<Button />}>
+            Edit Alpha
+          </SheetTrigger>
+          <SheetTrigger<string> payload="Beta" render={<Button />}>
+            Edit Beta
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Edit {payload?.toUpperCase()}</SheetTitle>
+            </SheetHeader>
+            <SheetFooter>
+              <SheetClose render={<Button />}>Done</SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </>)}
+    </Sheet>)
+}
+```
+
+### NoCloseButton
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { showCloseButton: false }
+}
+```
+
+### RightToLeftNoCloseButton
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { showCloseButton: false },
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftRight
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftTop
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { side: "top" },
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftBottom
+
+```tsx
+{
+    render: (args) => (<Sheet>
+      <SheetTrigger render={<Button variant="outline"/>}>Open preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetHeader>
+          <SheetTitle>Preferences</SheetTitle>
+          <SheetDescription>Adjust your workspace preferences.</SheetDescription>
+        </SheetHeader>
+        <SheetFooter>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>),
+    args: { side: "bottom" },
+    decorators: RightToLeft.decorators
+}
+```
+
+### ProfileForm
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId();
+        const [isOpen, setIsOpen] = useState(false), [saved, setSaved] = useState("No changes saved");
+        return (<div className="flex flex-col items-start gap-4">
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger render={<Button variant="outline"/>}>Edit profile</SheetTrigger>
+          <SheetContent {...args}>
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>Save your workspace profile.</SheetDescription>
+            </SheetHeader>
+            <form className="flex min-h-0 flex-1 flex-col" onSubmit={(event) => {
+                event.preventDefault();
+                setSaved("Saved " + new FormData(event.currentTarget).get("name"));
+                setIsOpen(false);
+            }}>
+              <FieldGroup className="px-panel">
+                <Field>
+                  <FieldLabel htmlFor={id}>Display name</FieldLabel>
+                  <Input id={id} name="name" required/>
+                </Field>
+              </FieldGroup>
+              <SheetFooter>
+                <Button type="submit">Save profile</Button>
+                <SheetClose render={<Button variant="outline"/>}>Cancel</SheetClose>
+              </SheetFooter>
+            </form>
+          </SheetContent>
+        </Sheet>
+        <output aria-label="Saved profile">{saved}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftProfileForm
+
+```tsx
+{
+    render: function Render(args) {
+        const id = useId();
+        const [isOpen, setIsOpen] = useState(false), [saved, setSaved] = useState("No changes saved");
+        return (<div className="flex flex-col items-start gap-4">
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger render={<Button variant="outline"/>}>Edit profile</SheetTrigger>
+          <SheetContent {...args}>
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>Save your workspace profile.</SheetDescription>
+            </SheetHeader>
+            <form className="flex min-h-0 flex-1 flex-col" onSubmit={(event) => {
+                event.preventDefault();
+                setSaved("Saved " + new FormData(event.currentTarget).get("name"));
+                setIsOpen(false);
+            }}>
+              <FieldGroup className="px-panel">
+                <Field>
+                  <FieldLabel htmlFor={id}>Display name</FieldLabel>
+                  <Input id={id} name="name" required/>
+                </Field>
+              </FieldGroup>
+              <SheetFooter>
+                <Button type="submit">Save profile</Button>
+                <SheetClose render={<Button variant="outline"/>}>Cancel</SheetClose>
+              </SheetFooter>
+            </form>
+          </SheetContent>
+        </Sheet>
+        <output aria-label="Saved profile">{saved}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators,
+    args: { side: "left" }
+}
+```
+
+### CancelledOpening
+
+```tsx
+{
+    render: (args) => (<Sheet onOpenChange={(isOpen, details) => {
+            if (isOpen)
+                details.cancel();
+        }}>
+      <SheetTrigger render={<Button />}>Restricted preferences</SheetTrigger>
+      <SheetContent {...args}>
+        <SheetTitle>Restricted preferences</SheetTitle>
+      </SheetContent>
+    </Sheet>)
+}
+```