feat: add toast documentation
This commit is contained in:
parent
38782bda7e
commit
1fc23f9fb4
@ -33,6 +33,9 @@ import ComponentsDrawer, {
|
||||
import ComponentsTabs, {
|
||||
tableOfContents as componentsTabsToc,
|
||||
} from "./docs/components/Tabs.mdx";
|
||||
import ComponentsToast, {
|
||||
tableOfContents as componentsToastToc,
|
||||
} from "./docs/components/Toast.mdx";
|
||||
|
||||
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
|
||||
import { HeadingContext } from "./HeadingContext";
|
||||
@ -182,6 +185,14 @@ const router = createBrowserRouter(
|
||||
</DynamicLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="toast"
|
||||
element={
|
||||
<DynamicLayout toc={componentsToastToc}>
|
||||
<ComponentsToast components={overrideComponents} />
|
||||
</DynamicLayout>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
@ -54,6 +54,11 @@ export default {
|
||||
path: "/docs/components/tabs",
|
||||
name: "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