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

refactor(docs/Dialog): update prop section following latest version

Browse Source
This commit is contained in:
p-sw 2024-07-12 18:49:53 +09:00
parent bc6533bf01
commit 24260fe375
1 changed files with 133 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/docs/components/Dialog.mdx
View File

@ -1,73 +1,80 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode"; import {
LoadedCode,
GITHUB_DIR_COMP,
GITHUB_COMP_PREVIEW,
GITHUB_STORY,
} from "@/components/LoadedCode";
import { DialogDemo } from "./DialogBlocks/Preview"; import { DialogDemo } from "./DialogBlocks/Preview";
import Examples from "./DialogBlocks/Examples"; import Examples from "./DialogBlocks/Examples";
# Dialog # Dialog
A modal window that prompts the user to take an action or provides critical information. A modal window that prompts the user to take an action or provides critical information.
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<DialogDemo /> <DialogDemo />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} /> <LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
## Installation ## Installation
1. Create a new directory named `Dialog` in your component folder. 1. Create a new directory named `Dialog` in your component folder.
2. Create following files in the folder, and paste the code into the file. 2. Create following files in the folder, and paste the code into the file.
* `index.ts`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} /> - `index.ts`
* `Context.ts` <LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} /> - `Context.ts`
* `Component.tsx` <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} /> - `Component.tsx`
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
## Usage ## Usage
```tsx ```tsx
import { import {
DialogRoot, DialogRoot,
DialogTrigger, DialogTrigger,
DialogOverlay, DialogOverlay,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogSubtitle, DialogSubtitle,
DialogFooter, DialogFooter,
DialogClose, DialogClose,
} from "@components/Dialog"; } from "@components/Dialog";
``` ```
```html ```html
<DialogRoot> <DialogRoot>
<DialogTrigger> <DialogTrigger>
<Button>Open Dialog</Button> <button>Open Dialog</button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Dialog Title</DialogTitle> <DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle> <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader> </DialogHeader>
{/* Main Contents */} {/* Main Contents */}
<DialogFooter> <DialogFooter>
<DialogClose> <DialogClose>
<Button>Close</Button> <button>Close</button>
</DialogClose> </DialogClose>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</DialogOverlay> </DialogOverlay>
</DialogRoot> </DialogRoot>
``` ```
@ -83,99 +90,44 @@ import {
### DialogOverlay ### DialogOverlay
#### Variants
| Prop | Type | Default | Description |
|:----------|:-----------------------|:--------|:---------------------------------------------|
| `blur` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is blurred |
| `darken` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is darkened |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Minimum margin of the dialog |
#### Special #### Special
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|:---------------|:----------|:--------|:-----------------------------------------------| | :------------- | :-------- | :------ | :--------------------------------------------- |
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked | | `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
### DialogContent
#### Variants
| Prop | Type | Default | Description |
|:----------|:---------------------------------------------------------------------|:--------|:-----------------------------------------------|
| `size` | `"fit" \| "fullSm" \| "fullMd" \| "fullLg" \| "fullXl" \| "full2xl"` | `fit` | Size of the dialog - width and max width |
| `rounded` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Roundness of the dialog |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Padding of the dialog |
| `gap` | `"sm" \| "md" \| "lg"` | `md` | Works like flex's gap - space between children |
### DialogHeader
#### Variants
| Prop | Type | Default | Description |
|:------|:-----------------------|:--------|:----------------------------------------------|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children - title and subtitle |
### DialogTitle
#### Variants
| Prop | Type | Default | Description |
|:---------|:-----------------------|:--------|:--------------------|
| `size` | `"sm" \| "md" \| "lg"` | `md` | Size of the title |
| `weight` | `"sm" \| "md" \| "lg"` | `lg` | Weight of the title |
### DialogSubtitle
#### Variants
| Prop | Type | Default | Description |
|:----------|:-----------------------|:--------|:------------------------|
| `size` | `"sm" \| "md" \| "lg"` | `sm` | Size of the subtitle |
| `weight` | `"sm" \| "md" \| "lg"` | `md` | Weight of the subtitle |
| `opacity` | `"sm" \| "md" \| "lg"` | `sm` | Opacity of the subtitle |
### DialogFooter
#### Variants
| Prop | Type | Default | Description |
|:------|:-----------------------|:--------|:-------------------------|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children |
## Examples ## Examples
### Basic Informational Dialog ### Basic Informational Dialog
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.BasicInformationalDialog /> <Examples.BasicInformationalDialog />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} /> <LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Deleting Item ### Deleting Item
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.DeletingItem /> <Examples.DeletingItem />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} /> <LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>