p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Drawer documentation

Browse Source
This commit is contained in:
p-sw 2024-06-03 16:04:45 +09:00
parent 46fda16de8
commit 94ca2a93fb
7 changed files with 411 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
packages/react/src/docs/components/Drawer.mdx Normal file
View File

@ -0,0 +1,204 @@
import { Button } from "@components/Button";
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from '@/components/LoadedCode';
import { DrawerDemo } from "./DrawerBlocks/Preview";
import Examples from "./DrawerBlocks/Examples";
# Drawer
Displays a panel that slides out from the edge of the screen, typically used for navigation or additional content.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<DrawerDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Drawer.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Drawer.tsx`} />
## Usage
```tsx
import {
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerClose,
DrawerHeader,
DrawerBody,
DrawerFooter,
} from "@components/Drawer";
```
```html
<DrawerRoot>
<DrawerTrigger>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay>
<DrawerContent>
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>
<DrawerBody>
{/* Main Contents */}
</DrawerBody>
<DrawerFooter>
<DrawerClose>
<Button>Close Drawer</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
```
> Note:
>
> DrawerTrigger and DrawerClose will merge its onClick event handler to its children.
> Also, there is no default element for those.
> So you always have to provide the clickable children for DialogTrigger and DialogClose.
>
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
## Props
### DrawerRoot
#### Special
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `closeThreshold` | `number` | `0.3` | The threshold for the drawer to close with swipe or drag. |
| `opened` | `boolean` | - (Controlled) | Whether the drawer is opened. |
### DrawerOverlay
#### Special
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
### DrawerContent
#### Variants
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"left"` | The position of the drawer |
#### Special
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
### DrawerHeader
#### Special
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
### DrawerBody
#### Special
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
### DrawerFooter
#### Special
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `asChild` | `boolean` | `false` | Whether the component is rendered as a child of a component |
## Examples
### Left
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Left />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx`} />
</TabContent>
</TabProvider>
### Right
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Right />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx`} />
</TabContent>
</TabProvider>
### Top
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Top />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx`} />
</TabContent>
</TabProvider>
### Bottom
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<Examples.Bottom />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx`} />
</TabContent>
</TabProvider>

40
packages/react/src/docs/components/DrawerBlocks/Examples/Bottom.tsx Normal file
View File

@ -0,0 +1,40 @@
import {
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@components/Drawer";
import { Button } from "@components/Button";
export const Bottom = () => {
return (
<DrawerRoot>
<DrawerTrigger>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent position="bottom">
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>
<DrawerBody>
<p>
Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional
content.
</p>
</DrawerBody>
<DrawerFooter>
<DrawerClose>
<Button>Done</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
);
};

40
packages/react/src/docs/components/DrawerBlocks/Examples/Left.tsx Normal file
View File

@ -0,0 +1,40 @@
import {
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@components/Drawer";
import { Button } from "@components/Button";
export const Left = () => {
return (
<DrawerRoot>
<DrawerTrigger>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent position="left" className="max-w-[320px]">
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>
<DrawerBody>
<p>
Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional
content.
</p>
</DrawerBody>
<DrawerFooter>
<DrawerClose>
<Button>Done</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
);
};

40
packages/react/src/docs/components/DrawerBlocks/Examples/Right.tsx Normal file
View File

@ -0,0 +1,40 @@
import {
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@components/Drawer";
import { Button } from "@components/Button";
export const Right = () => {
return (
<DrawerRoot>
<DrawerTrigger>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent position="right" className="max-w-[320px]">
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>
<DrawerBody>
<p>
Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional
content.
</p>
</DrawerBody>
<DrawerFooter>
<DrawerClose>
<Button>Done</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
);
};

40
packages/react/src/docs/components/DrawerBlocks/Examples/Top.tsx Normal file
View File

@ -0,0 +1,40 @@
import {
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerBody,
DrawerFooter,
DrawerClose,
} from "@components/Drawer";
import { Button } from "@components/Button";
export const Top = () => {
return (
<DrawerRoot>
<DrawerTrigger>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent position="top">
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>
<DrawerBody>
<p>
Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional
content.
</p>
</DrawerBody>
<DrawerFooter>
<DrawerClose>
<Button>Done</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
);
};

7
packages/react/src/docs/components/DrawerBlocks/Examples/index.ts Normal file
View File

@ -0,0 +1,7 @@
import { Left } from "./Left";
import { Right } from "./Right";
import { Top } from "./Top";
import { Bottom } from "./Bottom";
export default { Left, Right, Top, Bottom };

40
packages/react/src/docs/components/DrawerBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,40 @@
import { Button } from "@components/Button";
import {
DrawerRoot,
DrawerTrigger,
DrawerOverlay,
DrawerContent,
DrawerClose,
DrawerHeader,
DrawerBody,
DrawerFooter,
} from "@components/Drawer";
export const DrawerDemo = () => {
return (
<DrawerRoot>
<DrawerTrigger>
<Button>Open Drawer</Button>
</DrawerTrigger>
<DrawerOverlay className="z-[99]">
<DrawerContent className="max-w-[320px]">
<DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader>
<DrawerBody>
<p>
Drawers are a type of overlay that slides in from the edge of the
screen. They are typically used for navigation or additional
content.
</p>
</DrawerBody>
<DrawerFooter>
<DrawerClose>
<Button>Close</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</DrawerOverlay>
</DrawerRoot>
);
};