feat: add toast documentation
This commit is contained in:
parent
38782bda7e
commit
1fc23f9fb4
@ -33,6 +33,9 @@ import ComponentsDrawer, {
|
|||||||
import ComponentsTabs, {
|
import ComponentsTabs, {
|
||||||
tableOfContents as componentsTabsToc,
|
tableOfContents as componentsTabsToc,
|
||||||
} from "./docs/components/Tabs.mdx";
|
} from "./docs/components/Tabs.mdx";
|
||||||
|
import ComponentsToast, {
|
||||||
|
tableOfContents as componentsToastToc,
|
||||||
|
} from "./docs/components/Toast.mdx";
|
||||||
|
|
||||||
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
|
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
|
||||||
import { HeadingContext } from "./HeadingContext";
|
import { HeadingContext } from "./HeadingContext";
|
||||||
@ -182,6 +185,14 @@ const router = createBrowserRouter(
|
|||||||
</DynamicLayout>
|
</DynamicLayout>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="toast"
|
||||||
|
element={
|
||||||
|
<DynamicLayout toc={componentsToastToc}>
|
||||||
|
<ComponentsToast components={overrideComponents} />
|
||||||
|
</DynamicLayout>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
|
|||||||
@ -54,6 +54,11 @@ export default {
|
|||||||
path: "/docs/components/tabs",
|
path: "/docs/components/tabs",
|
||||||
name: "Tabs",
|
name: "Tabs",
|
||||||
eq: (pathname: string) => pathname === "/docs/components/tabs"
|
eq: (pathname: string) => pathname === "/docs/components/tabs"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/docs/components/toast",
|
||||||
|
name: "Toast",
|
||||||
|
eq: (pathname: string) => pathname === "/docs/components/toast"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
182
packages/react/src/docs/components/Toast.mdx
Normal file
182
packages/react/src/docs/components/Toast.mdx
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { ToastDemo } from "./ToastBlocks/Preview";
|
||||||
|
import Examples from "./ToastBlocks/Examples";
|
||||||
|
|
||||||
|
# Toast
|
||||||
|
A brief message alert to inform users about events or actions.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<ToastDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Toast.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Toast.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Toaster } from "@components/Toast";
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Toaster />
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> You can put Toaster in anywhere. It will automatically go to document.body through portal.
|
||||||
|
> But, it is recommended to place it at the root of the application, just once.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
return <button onClick={() => toast("Hello, world!")}>Toast</button>;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Toaster
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
| :--- | :--- | :------ | :---------- |
|
||||||
|
| `defaultOption` | `Partial<ToastOption>` | `defaultToastOption` | Global options for toast. |
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface ToastOption {
|
||||||
|
closeButton: boolean;
|
||||||
|
closeTimeout: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultToastOption: ToastOption = {
|
||||||
|
closeButton: true,
|
||||||
|
closeTimeout: 3000,
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Normal
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Normal />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Success
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Success />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Error
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Error />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Warning
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.Warning />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Pending - Fail
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.PendingFail />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### Pending - Success
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<Examples.PendingSuccess />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "error",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Error() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "default",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Normal() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Waiting...",
|
||||||
|
description: "Waiting for result...",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
await new Promise((r) => setTimeout(r, 1000));
|
||||||
|
toasted.update({
|
||||||
|
title: "Promise Failed",
|
||||||
|
description: "Something went wrong!",
|
||||||
|
status: "error",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PendingFail() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Waiting...",
|
||||||
|
description: "Waiting for result...",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
|
||||||
|
await new Promise((r) => setTimeout(r, 1000));
|
||||||
|
|
||||||
|
toasted.update({
|
||||||
|
title: "Promise Success",
|
||||||
|
description: "Promise resolved!",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PendingSuccess() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "success",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Success() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({
|
||||||
|
title: "Toast Title",
|
||||||
|
description: "Toast Description",
|
||||||
|
status: "warning",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Warning() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { Error } from "./Error";
|
||||||
|
import { Normal } from "./Normal";
|
||||||
|
import { PendingFail } from "./PendingFail";
|
||||||
|
import { PendingSuccess } from "./PendingSuccess";
|
||||||
|
import { Success } from "./Success";
|
||||||
|
import { Warning } from "./Warning";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
Error,
|
||||||
|
Normal,
|
||||||
|
PendingFail,
|
||||||
|
PendingSuccess,
|
||||||
|
Success,
|
||||||
|
Warning,
|
||||||
|
};
|
||||||
|
|
||||||
25
packages/react/src/docs/components/ToastBlocks/Preview.tsx
Normal file
25
packages/react/src/docs/components/ToastBlocks/Preview.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Toaster, useToast } from "@components/Toast";
|
||||||
|
|
||||||
|
function Children() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
toast({ title: "Toast Title", description: "Toast Description" })
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Toast
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ToastDemo() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toaster />
|
||||||
|
<Children />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user