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

docs: add Tooltip docs

Browse Source
This commit is contained in:
p-sw 2024-06-03 21:36:01 +09:00
parent 9b8a0f5145
commit b55a0ea01c
9 changed files with 222 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/react/src/App.tsx
View File

@ -39,6 +39,9 @@ import ComponentsTabs, {
import ComponentsToast, {
tableOfContents as componentsToastToc,
} from "./docs/components/Toast.mdx";
import ComponentsTooltip, {
tableOfContents as componentsTooltipToc,
} from "./docs/components/Tooltip.mdx";
import { ForwardedRef, forwardRef, useContext, useEffect, useRef } from "react";
import { HeadingContext } from "./HeadingContext";
@ -204,6 +207,14 @@ const router = createBrowserRouter(
</DynamicLayout>
}
/>
<Route
path="tooltip"
element={
<DynamicLayout toc={componentsTooltipToc}>
<ComponentsTooltip components={overrideComponents} />
</DynamicLayout>
}
/>
</Route>
</Route>
</Route>

5
packages/react/src/RouteObject.ts
View File

@ -64,6 +64,11 @@ export default {
path: "/docs/components/toast",
name: "Toast",
eq: (pathname: string) => pathname === "/docs/components/toast"
},
{
path: "/docs/components/tooltip",
name: "Tooltip",
eq: (pathname: string) => pathname === "/docs/components/tooltip"
}
]
}

134
packages/react/src/docs/components/Tooltip.mdx Normal file
View File

@ -0,0 +1,134 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { TooltipDemo } from "./TooltipBlocks/Preview";
import Examples from "./TooltipBlocks/Examples";
# Tooltip
A brief helper for providing contextual information or guiding user interactions.
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<TooltipDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/TooltipBlocks/Preview.tsx`} />
</TabContent>
</TabProvider>
## Installation
1. Create a new file `Tooltip.tsx` in your component folder.
2. Copy and paste the following code into the file.
<LoadedCode from={`${GITHUB}/packages/react/components/Tooltip.tsx`} />
## Usage
```tsx
import { Tooltip, TooltipContent } from "@components/Tooltip";
```
```html
<Tooltip>
<TooltipContent>
{/* Tooltip Content */}
</TooltipContent>
{/* Tooltip Trigger */}
</Tooltip>
```
## Props
### Tooltip
#### Variants
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `position` | `"bottom" \| "left" \| "right" \| "top"` | `"top"` | The position of the tooltip. |
### TooltipContent
#### Variants
| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `offset` | `"sm" \| "md" \| "lg"` | `"md"` | Gap between the tooltip and the trigger. |
## Examples
### 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/TooltipBlocks/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/TooltipBlocks/Examples/Bottom.tsx`} />
</TabContent>
</TabProvider>
### 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/TooltipBlocks/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/TooltipBlocks/Examples/Right.tsx`} />
</TabContent>
</TabProvider>

13
packages/react/src/docs/components/TooltipBlocks/Examples/Bottom.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function Bottom() {
return (
<Tooltip position="bottom">
<TooltipContent>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

13
packages/react/src/docs/components/TooltipBlocks/Examples/Left.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function Left() {
return (
<Tooltip position="left">
<TooltipContent>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

13
packages/react/src/docs/components/TooltipBlocks/Examples/Right.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function Right() {
return (
<Tooltip position="right">
<TooltipContent>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

13
packages/react/src/docs/components/TooltipBlocks/Examples/Top.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function Top() {
return (
<Tooltip position="top">
<TooltipContent>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}

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

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

13
packages/react/src/docs/components/TooltipBlocks/Preview.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Button } from "@components/Button";
import { Tooltip, TooltipContent } from "@components/Tooltip";
export function TooltipDemo() {
return (
<Tooltip>
<TooltipContent>
<p>Tooltip!</p>
</TooltipContent>
<Button>Hover me</Button>
</Tooltip>
);
}