feat: use separated file for examples
This commit is contained in:
parent
2ea648da48
commit
bdc4ce707c
@ -1,7 +1,7 @@
|
|||||||
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
import { Button } from "@components/Button";
|
import { Button } from "@components/Button";
|
||||||
import { Story } from "@/components/Story";
|
import { Story } from "@/components/Story";
|
||||||
import { LoadedCode } from "@/components/LoadedCode";
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
import {
|
import {
|
||||||
DialogClose,
|
DialogClose,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@ -19,7 +19,8 @@ import {
|
|||||||
import {
|
import {
|
||||||
useToast,
|
useToast,
|
||||||
} from "@components/Toast";
|
} from "@components/Toast";
|
||||||
|
import { DialogDemo } from "./DialogBlocks/Preview";
|
||||||
|
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.
|
||||||
@ -31,74 +32,11 @@ A modal window that prompts the user to take an action or provides critical info
|
|||||||
</TabList>
|
</TabList>
|
||||||
<TabContent name="preview">
|
<TabContent name="preview">
|
||||||
<Story layout="centered">
|
<Story layout="centered">
|
||||||
<DialogRoot>
|
<DialogDemo />
|
||||||
<DialogTrigger>
|
|
||||||
<Button preset="default">Open Dialog</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogOverlay>
|
|
||||||
<DialogContent size={"fullMd"}>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Dialog Title</DialogTitle>
|
|
||||||
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
|
||||||
</DialogHeader>
|
|
||||||
Laborum non adipisicing enim enim culpa esse anim esse consequat Lorem incididunt.
|
|
||||||
Enim mollit laborum sunt cillum voluptate est officia nostrud non consequat adipisicing
|
|
||||||
cupidatat aliquip magna. Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat
|
|
||||||
labore pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
|
|
||||||
<DialogFooter>
|
|
||||||
<DialogClose>
|
|
||||||
<Button preset="default">Close</Button>
|
|
||||||
</DialogClose>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogOverlay>
|
|
||||||
</DialogRoot>
|
|
||||||
</Story>
|
</Story>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
<TabContent name="code">
|
<TabContent name="code">
|
||||||
```tsx
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Preview.tsx`} />
|
||||||
import {
|
|
||||||
DialogRoot,
|
|
||||||
DialogTrigger,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogSubtitle,
|
|
||||||
DialogFooter,
|
|
||||||
DialogClose,
|
|
||||||
} from "@components/Dialog";
|
|
||||||
import { Button } from "@components/Button";
|
|
||||||
|
|
||||||
export function DialogDemo() {
|
|
||||||
return (
|
|
||||||
<DialogRoot>
|
|
||||||
<DialogTrigger>
|
|
||||||
<Button preset="default">Open Dialog</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogOverlay>
|
|
||||||
<DialogContent size={"fullMd"}>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Dialog Title</DialogTitle>
|
|
||||||
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<p>
|
|
||||||
Laborum non adipisicing enim enim culpa esse anim esse consequat Lorem incididunt.
|
|
||||||
Enim mollit laborum sunt cillum voluptate est officia nostrud non consequat adipisicing
|
|
||||||
cupidatat aliquip magna. Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat
|
|
||||||
labore pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
|
|
||||||
</p>
|
|
||||||
<DialogFooter>
|
|
||||||
<DialogClose>
|
|
||||||
<Button preset="default">Close</Button>
|
|
||||||
</DialogClose>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogOverlay>
|
|
||||||
</DialogRoot>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
</TabContent>
|
</TabContent>
|
||||||
</TabProvider>
|
</TabProvider>
|
||||||
|
|
||||||
@ -107,7 +45,7 @@ A modal window that prompts the user to take an action or provides critical info
|
|||||||
1. Create a new file `Dialog.tsx` in your component folder.
|
1. Create a new file `Dialog.tsx` in your component folder.
|
||||||
2. Copy and paste the following code into the file.
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Dialog.tsx" />
|
<LoadedCode from={`${GITHUB}/packages/react/src/components/Dialog.tsx`} />
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@ -230,67 +168,11 @@ import {
|
|||||||
</TabList>
|
</TabList>
|
||||||
<TabContent name="preview">
|
<TabContent name="preview">
|
||||||
<Story layout="centered">
|
<Story layout="centered">
|
||||||
<DialogRoot>
|
<Examples.BasicInformationalDialog />
|
||||||
<DialogTrigger>
|
|
||||||
<Button preset="default">What is this?</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogOverlay>
|
|
||||||
<DialogContent size={"fullMd"}>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Dialog Title</DialogTitle>
|
|
||||||
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
|
||||||
</DialogHeader>
|
|
||||||
This is a dialog. You can put the information you want to show.
|
|
||||||
<DialogFooter>
|
|
||||||
<DialogClose>
|
|
||||||
<Button preset="default">Ok!</Button>
|
|
||||||
</DialogClose>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogOverlay>
|
|
||||||
</DialogRoot>
|
|
||||||
</Story>
|
</Story>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
<TabContent name="code">
|
<TabContent name="code">
|
||||||
```tsx
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx`} />
|
||||||
import {
|
|
||||||
DialogRoot,
|
|
||||||
DialogTrigger,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogSubtitle,
|
|
||||||
DialogFooter,
|
|
||||||
DialogClose,
|
|
||||||
} from "@components/Dialog";
|
|
||||||
|
|
||||||
export function DialogDemo() {
|
|
||||||
return (
|
|
||||||
<DialogRoot>
|
|
||||||
<DialogTrigger>
|
|
||||||
<Button preset="default">What is this?</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogOverlay>
|
|
||||||
<DialogContent size={"fullMd"}>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Dialog Title</DialogTitle>
|
|
||||||
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<p>
|
|
||||||
This is a dialog. You can put the information you want to show.
|
|
||||||
</p>
|
|
||||||
<DialogFooter>
|
|
||||||
<DialogClose>
|
|
||||||
<Button preset="default">Ok!</Button>
|
|
||||||
</DialogClose>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogOverlay>
|
|
||||||
</DialogRoot>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
</TabContent>
|
</TabContent>
|
||||||
</TabProvider>
|
</TabProvider>
|
||||||
|
|
||||||
@ -303,152 +185,11 @@ import {
|
|||||||
</TabList>
|
</TabList>
|
||||||
<TabContent name="preview">
|
<TabContent name="preview">
|
||||||
<Story layout="centered">
|
<Story layout="centered">
|
||||||
<DialogRoot>
|
<Examples.DeletingItem />
|
||||||
<DialogTrigger>
|
|
||||||
<Button preset="danger">Delete Item</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogOverlay>
|
|
||||||
<DialogContent size={"fullMd"}>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Delete Item</DialogTitle>
|
|
||||||
<DialogSubtitle>Are you sure you want to delete this item?</DialogSubtitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<ul className="list-disc list-inside">
|
|
||||||
<li>This action will delete the item, and related data</li>
|
|
||||||
<li>This action cannot be undone</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
|
||||||
{(() => {
|
|
||||||
const {toast} = useToast();
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<DialogClose>
|
|
||||||
<Button
|
|
||||||
preset="danger"
|
|
||||||
onClick={async () => {
|
|
||||||
const toasted = toast({
|
|
||||||
title: "Deleting Item",
|
|
||||||
description: "Item deletion is requested",
|
|
||||||
status: "loading",
|
|
||||||
})
|
|
||||||
|
|
||||||
await new Promise((r) => setTimeout(r, 1000));
|
|
||||||
|
|
||||||
toasted.update({
|
|
||||||
title: "Item Deleted",
|
|
||||||
description: "The item has been deleted",
|
|
||||||
status: "success",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</DialogClose>
|
|
||||||
<DialogClose>
|
|
||||||
<Button
|
|
||||||
preset="default"
|
|
||||||
onClick={() => {
|
|
||||||
toast({
|
|
||||||
title: "Action Canceled",
|
|
||||||
description: "The delete action has been canceled",
|
|
||||||
status: "error",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</DialogClose>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
})()}
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogOverlay>
|
|
||||||
</DialogRoot>
|
|
||||||
</Story>
|
</Story>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
<TabContent name="code">
|
<TabContent name="code">
|
||||||
```tsx
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/DialogBlocks/Examples/DeletingItem.tsx`} />
|
||||||
import {
|
|
||||||
DialogRoot,
|
|
||||||
DialogTrigger,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogSubtitle,
|
|
||||||
DialogFooter,
|
|
||||||
DialogClose,
|
|
||||||
} from "@components/Dialog";
|
|
||||||
import { Button } from "@components/Button";
|
|
||||||
import { useToast } from "@components/Toast";
|
|
||||||
|
|
||||||
function DialogDemo() {
|
|
||||||
const { toast } = useToast();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DialogRoot>
|
|
||||||
<DialogTrigger>
|
|
||||||
<Button preset="danger">Delete Item</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogOverlay>
|
|
||||||
<DialogContent size={"fullMd"}>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Delete Item</DialogTitle>
|
|
||||||
<DialogSubtitle>Are you sure you want to delete this item?</DialogSubtitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<ul className="list-disc list-inside">
|
|
||||||
<li>This action will delete the item, and related data</li>
|
|
||||||
<li>This action cannot be undone</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<DialogFooter>
|
|
||||||
<DialogClose>
|
|
||||||
<Button
|
|
||||||
preset="danger"
|
|
||||||
onClick={async () => {
|
|
||||||
const toasted = toast({
|
|
||||||
title: "Deleting Item",
|
|
||||||
description: "Item deletion is requested",
|
|
||||||
status: "loading",
|
|
||||||
})
|
|
||||||
|
|
||||||
await new Promise((r) => setTimeout(r, 1000));
|
|
||||||
|
|
||||||
toasted.update({
|
|
||||||
title: "Item Deleted",
|
|
||||||
description: "The item has been deleted",
|
|
||||||
status: "success",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</DialogClose>
|
|
||||||
<DialogClose>
|
|
||||||
<Button
|
|
||||||
preset="default"
|
|
||||||
onClick={() => {
|
|
||||||
toast({
|
|
||||||
title: "Action Canceled",
|
|
||||||
description: "The delete action has been canceled",
|
|
||||||
status: "error",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</DialogClose>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</DialogOverlay>
|
|
||||||
</DialogRoot>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
</TabContent>
|
</TabContent>
|
||||||
</TabProvider>
|
</TabProvider>
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
|
||||||
|
export function BasicInformationalDialog() {
|
||||||
|
return (
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button preset="default">What is this?</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent size={"fullMd"}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Dialog Title</DialogTitle>
|
||||||
|
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<p>This is a dialog. You can put the information you want to show.</p>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button preset="default">Ok!</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
export function DeletingItem() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button preset="danger">Delete Item</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent size={"fullMd"}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Delete Item</DialogTitle>
|
||||||
|
<DialogSubtitle>
|
||||||
|
Are you sure you want to delete this item?
|
||||||
|
</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<ul className="list-disc list-inside">
|
||||||
|
<li>This action will delete the item, and related data</li>
|
||||||
|
<li>This action cannot be undone</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button
|
||||||
|
preset="danger"
|
||||||
|
onClick={async () => {
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Deleting Item",
|
||||||
|
description: "Item deletion is requested",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 1000));
|
||||||
|
|
||||||
|
toasted.update({
|
||||||
|
title: "Item Deleted",
|
||||||
|
description: "The item has been deleted",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
<DialogClose>
|
||||||
|
<Button
|
||||||
|
preset="default"
|
||||||
|
onClick={() => {
|
||||||
|
toast({
|
||||||
|
title: "Action Canceled",
|
||||||
|
description: "The delete action has been canceled",
|
||||||
|
status: "error",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { BasicInformationalDialog } from "./BasicInformationalDialog";
|
||||||
|
import { DeletingItem } from "./DeletingItem";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
BasicInformationalDialog,
|
||||||
|
DeletingItem,
|
||||||
|
}
|
||||||
|
|
||||||
42
packages/react/src/docs/components/DialogBlocks/Preview.tsx
Normal file
42
packages/react/src/docs/components/DialogBlocks/Preview.tsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import {
|
||||||
|
DialogRoot,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogSubtitle,
|
||||||
|
DialogFooter,
|
||||||
|
DialogClose,
|
||||||
|
} from "@components/Dialog";
|
||||||
|
import { Button } from "@components/Button";
|
||||||
|
|
||||||
|
export function DialogDemo() {
|
||||||
|
return (
|
||||||
|
<DialogRoot>
|
||||||
|
<DialogTrigger>
|
||||||
|
<Button preset="default">Open Dialog</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogContent size={"fullMd"}>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Dialog Title</DialogTitle>
|
||||||
|
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<p>
|
||||||
|
Laborum non adipisicing enim enim culpa esse anim esse consequat
|
||||||
|
Lorem incididunt. Enim mollit laborum sunt cillum voluptate est
|
||||||
|
officia nostrud non consequat adipisicing cupidatat aliquip magna.
|
||||||
|
Voluptate nisi cupidatat qui nisi in pariatur. Sint consequat labore
|
||||||
|
pariatur mollit sint nostrud tempor commodo pariatur ea laboris.
|
||||||
|
</p>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose>
|
||||||
|
<Button preset="default">Close</Button>
|
||||||
|
</DialogClose>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogRoot>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user