Skip to content

Commit

Permalink
docs: write doc for scroll-area and sheet component (#410)
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastián García authored Oct 14, 2024
1 parent 29d4908 commit eaee7b1
Show file tree
Hide file tree
Showing 4 changed files with 340 additions and 58 deletions.
124 changes: 68 additions & 56 deletions docs/content/docs/components/dialog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,106 +19,104 @@ description: A dialog is a type of modal window that appears in front of app con
## Usage

<Dialog>
<div className='flex justify-center'>
<div className="flex justify-center">
<DialogTrigger asChild>
<Button outline="default" >Edit Profile</Button>
<Button outline="default">Edit Profile</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
<DialogDescription className="font-light">
say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
say somethingsay somethingsay somethingsay somethingsay somethingsay
somethingsay somethingsay something
</DialogDescription>
</DialogHeader>
<div className='flex flex-col gap-1'>
<Label htmlFor="name">
Name
</Label>
<Input
id="name"
defaultValue="Sebastian Garcias"
className="col-span-3"
/>
</div>
<div className='flex flex-col gap-1'>
<Label htmlFor="username">
Username
</Label>
<Input
id="username"
defaultValue="@Sebasjs"
className="col-span-3"
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="name">Name</Label>
<Input
id="name"
defaultValue="Sebastian Garcias"
className="col-span-3"
/>
</div>
<div className="flex flex-col gap-1">
<Label htmlFor="username">Username</Label>
<Input id="username" defaultValue="@Sebasjs" className="col-span-3" />
</div>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>

```jsx
import { Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui'
import {
Dialog,
DialogOverlay,
DialogPortal,
DialogClose,
DialogDescription,
DialogTitle,
DialogTrigger,
DialogHeader,
DialogContent,
DialogFooter,
} from "@openlite/ui";

function App() {
return(
return (
<Dialog>
<DialogTrigger asChild>
<Button outline="default" >Edit Profile</Button>
<Button outline="default">Edit Profile</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
<DialogDescription className="font-light">
say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
say somethingsay somethingsay somethingsay somethingsay somethingsay
somethingsay somethingsay something
</DialogDescription>
</DialogHeader>
<div className='flex flex-col gap-1'>
<Label htmlFor="name">
Name
</Label>
<div className="flex flex-col gap-1">
<Label htmlFor="name">Name</Label>
<Input
id="name"
defaultValue="Sebastian Garcias"
className="col-span-3"
/>
</div>
<div className='flex flex-col gap-1'>
<Label htmlFor="username">
Username
</Label>
<Input
id="username"
defaultValue="@Sebasjs"
className="col-span-3"
/>
<div className="flex flex-col gap-1">
<Label htmlFor="username">Username</Label>
<Input id="username" defaultValue="@Sebasjs" className="col-span-3" />
</div>
<DialogFooter>
<Button type="submit">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
);
}
```

## Examples

<Dialog>
<div className='flex justify-center'>
<div className="flex justify-center">
<DialogTrigger asChild>
<Button outline="default" >Delete</Button>
<Button outline="default">Delete</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-[425px] p-0">
<DialogHeader className="border-b px-4 py-3">
<DialogTitle className="font-bold text-xl">Delete folder?</DialogTitle>
</DialogHeader>
<div className='flex flex-col gap-1 p-4'>
<DialogDescription>
This action cannot be undone. This will permanently delete the folder and all its contents.
</DialogDescription>
</div>
<div className="flex flex-col gap-1 p-4">
<DialogDescription>
This action cannot be undone. This will permanently delete the folder
and all its contents.
</DialogDescription>
</div>
<DialogFooter className="border-t px-4 py-3">
<Button outline="default">Cancel</Button>
<Button type="submit">Delete</Button>
Expand All @@ -127,21 +125,35 @@ function App() {
</Dialog>

```jsx
import { Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui'
import {
Dialog,
DialogOverlay,
DialogPortal,
DialogClose,
DialogDescription,
DialogTitle,
DialogTrigger,
DialogHeader,
DialogContent,
DialogFooter,
} from "@openlite/ui";

function App() {
return(
return (
<Dialog>
<DialogTrigger asChild>
<Button outline="default" >Delete</Button>
<Button outline="default">Delete</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] p-0">
<DialogHeader className="border-b px-4 py-3">
<DialogTitle className="font-bold text-xl">Delete folder?</DialogTitle>
<DialogTitle className="font-bold text-xl">
Delete folder?
</DialogTitle>
</DialogHeader>
<div className='flex flex-col gap-1 p-4'>
<div className="flex flex-col gap-1 p-4">
<DialogDescription>
This action cannot be undone. This will permanently delete the folder and all its contents.
This action cannot be undone. This will permanently delete the
folder and all its contents.
</DialogDescription>
</div>
<DialogFooter className="border-t px-4 py-3">
Expand All @@ -150,6 +162,6 @@ function App() {
</DialogFooter>
</DialogContent>
</Dialog>
)
);
}
```
```
154 changes: 153 additions & 1 deletion docs/content/docs/components/scroll-area.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,156 @@
---
title: Scroll Area
description: A scroll area is a container that allows scrolling of content.
---
---

## Import

- **ScrollArea**: The main component to display an scroll.

## Usage

<ScrollArea className="h-[200px] w-[350px] rounded-md border px-4">
<h2>The title </h2>
<span>
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup, even
in the royal toilet. The king was furious, but he couldn't seem to stop
Jokester. And then, one day, the people of the kingdom discovered that the
jokes left by Jokester were so funny that they couldn't help but laugh. And
once they started laughing, they couldn't stop.
</span>
</ScrollArea>

```tsx
import { ScrollArea } from "@openlite/ui";

export default function Demo() {
return (
<ScrollArea className="h-[200px] w-[350px] rounded-md border px-4">
<h2>The title </h2>
<span>
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup,
even in the royal toilet. The king was furious, but he couldn't seem to
stop Jokester. And then, one day, the people of the kingdom discovered
that the jokes left by Jokester were so funny that they couldn't help
but laugh. And once they started laughing, they couldn't stop.
</span>
</ScrollArea>
);
}
```

## Examples

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
<div className="flex w-max space-x-4 p-4">
<figure className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
alt={`Photo by demo`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo by <span className="font-semibold text-foreground">demo</span>
</figcaption>
</figure>
<figure className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
alt={`Photo by demo`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo by <span className="font-semibold text-foreground">demo</span>
</figcaption>
</figure>
<figure className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
alt={`Photo by demo`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo by <span className="font-semibold text-foreground">demo</span>
</figcaption>
</figure>
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>

```tsx
import { ScrollArea, ScrollBar } from "@openlite/ui";

export default function Demo() {
return (
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
<div className="flex w-max space-x-4 p-4">
<figure className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
alt={`Photo by demo`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo by <span className="font-semibold text-foreground">demo</span>
</figcaption>
</figure>
<figure className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
alt={`Photo by demo`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo by <span className="font-semibold text-foreground">demo</span>
</figcaption>
</figure>
<figure className="shrink-0">
<div className="overflow-hidden rounded-md">
<img
src="https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
alt={`Photo by demo`}
className="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo by <span className="font-semibold text-foreground">demo</span>
</figcaption>
</figure>
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
);
}
```

## API

### ScrollBar Props

| Props | Type | Description |
| ----- | ---- | ----------- |
| orientation | `'vertical' \| 'horizontal'` | The orientation of the scroll. |
Loading

0 comments on commit eaee7b1

Please sign in to comment.