feat: add Popover docs
This commit is contained in:
parent
a51d7eead1
commit
fdb4d0d70f
117
packages/react/src/docs/components/Popover.mdx
Normal file
117
packages/react/src/docs/components/Popover.mdx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
|
||||||
|
import { Story } from "@/components/Story";
|
||||||
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
||||||
|
import { PopoverDemo } from "./PopoverBlocks/Preview";
|
||||||
|
import Examples from "./PopoverBlocks/Examples";
|
||||||
|
|
||||||
|
# Popover
|
||||||
|
Displays rich content in a portal, triggered by a button.
|
||||||
|
|
||||||
|
<TabProvider defaultName="preview">
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name="preview">Preview</TabTrigger>
|
||||||
|
<TabTrigger name="code">Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name="preview">
|
||||||
|
<Story layout="centered">
|
||||||
|
<PopoverDemo />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name="code">
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Preview.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
1. Create a new file `Popover.tsx` in your component folder.
|
||||||
|
2. Copy and paste the following code into the file.
|
||||||
|
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/components/Popover.tsx`} />
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Popover, PopoverTrigger, PopoverContent } from "@components/popover"
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button />
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent>
|
||||||
|
{/* content of popover */}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover
|
||||||
|
```
|
||||||
|
|
||||||
|
> Note:
|
||||||
|
>
|
||||||
|
> PopoverTrigger will merge its onClick event handler to its children.
|
||||||
|
> Also, there is no default element for those.
|
||||||
|
> So you always have to provide the clickable children for PopoverTrigger.
|
||||||
|
>
|
||||||
|
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
### Popover
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:------------------------------------------------------------------|
|
||||||
|
| `opened` | `boolean` | `false` | Initial open state |
|
||||||
|
| `asChild` | `boolean` | `false` | Whether the root of popover is rendered as a child of a component |
|
||||||
|
|
||||||
|
### PopoverContent
|
||||||
|
|
||||||
|
#### Variants
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:---------|:-------------------------------------------------------------------------|:-----------------|:--------------------------------|
|
||||||
|
| `anchor` | `` `${"top" \| "middle" \| "bottom"}${"Left" \| "Center" \| "Right"}` `` | `"bottomCenter"` | Position of Popover content |
|
||||||
|
| `offset` | `"sm" \| "md" \| "lg"` | `"md"` | Gap between trigger and popover |
|
||||||
|
|
||||||
|
#### Special
|
||||||
|
|
||||||
|
| Prop | Type | Default | Description |
|
||||||
|
|:----------|:----------|:--------|:--------------------------------------------------------------------------------|
|
||||||
|
| `asChild` | `boolean` | `false` | `Whether the container of popover content is rendered as a child of a component |
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Theme Selector
|
||||||
|
|
||||||
|
<TabProvider defaultName={"preview"}>
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name={"preview"}>
|
||||||
|
<Story layout={"centered"}>
|
||||||
|
<Examples.ThemeSelector />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name={"code"}>
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
|
|
||||||
|
### User Control
|
||||||
|
|
||||||
|
<TabProvider defaultName={"preview"}>
|
||||||
|
<TabList>
|
||||||
|
<TabTrigger name={"preview"}>Preview</TabTrigger>
|
||||||
|
<TabTrigger name={"code"}>Code</TabTrigger>
|
||||||
|
</TabList>
|
||||||
|
<TabContent name={"preview"}>
|
||||||
|
<Story layout={"centered"}>
|
||||||
|
<Examples.UserControl />
|
||||||
|
</Story>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent name={"code"}>
|
||||||
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx`} />
|
||||||
|
</TabContent>
|
||||||
|
</TabProvider>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import { Popover, PopoverTrigger, PopoverContent } from "@components/Popover.tsx";
|
||||||
|
import { Button } from "@components/Button.tsx";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const DarkIcon = () => {
|
||||||
|
// ic:baseline-dark-mode
|
||||||
|
return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1"/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
const LightIcon = () => {
|
||||||
|
// ic:baseline-light-mode
|
||||||
|
return <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z"/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ThemeSelector = () => {
|
||||||
|
const [theme, setTheme] = useState<"light" | "dark">("dark");
|
||||||
|
|
||||||
|
return <Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button preset={"default"} size={"icon"}>
|
||||||
|
{
|
||||||
|
theme === "light" ? <LightIcon /> : <DarkIcon />
|
||||||
|
}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent anchor={"bottomCenter"}>
|
||||||
|
<Button onClick={() => setTheme("dark")} preset={"ghost"} className={"gap-2"}>
|
||||||
|
<DarkIcon />
|
||||||
|
<span className={"whitespace-nowrap"}>Dark Mode</span>
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setTheme("light")} preset={"ghost"} className={"gap-2"}>
|
||||||
|
<LightIcon />
|
||||||
|
<span className={"whitespace-nowrap"}>Light Mode</span>
|
||||||
|
</Button>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
}
|
||||||
@ -0,0 +1,151 @@
|
|||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverTrigger,
|
||||||
|
PopoverContent,
|
||||||
|
} from "@components/Popover.tsx";
|
||||||
|
import { Button } from "@components/Button.tsx";
|
||||||
|
import { useToast } from "@components/Toast.tsx";
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
Dispatch,
|
||||||
|
SetStateAction,
|
||||||
|
SVGProps,
|
||||||
|
useContext,
|
||||||
|
useState,
|
||||||
|
useTransition,
|
||||||
|
} from "react";
|
||||||
|
import { Label } from "@components/Label.tsx";
|
||||||
|
import { Input } from "@components/Input.tsx";
|
||||||
|
|
||||||
|
interface UserControlState {
|
||||||
|
signIn: boolean;
|
||||||
|
}
|
||||||
|
const initialState: UserControlState = {
|
||||||
|
signIn: false,
|
||||||
|
};
|
||||||
|
const UserControlContext = createContext<
|
||||||
|
[UserControlState, Dispatch<SetStateAction<UserControlState>>]
|
||||||
|
>([initialState, () => {}]);
|
||||||
|
|
||||||
|
const logInServerAction = async () => {
|
||||||
|
return new Promise((r) => setTimeout(r, 2000));
|
||||||
|
};
|
||||||
|
|
||||||
|
const logOutServerAction = async () => {
|
||||||
|
return new Promise((r) => setTimeout(r, 1000));
|
||||||
|
};
|
||||||
|
|
||||||
|
function MdiLoading(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const SignInForm = () => {
|
||||||
|
const [isSigningIn, setIsSigningIn] = useState(false);
|
||||||
|
const transition = useTransition();
|
||||||
|
const [_, setState] = useContext(UserControlContext);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
function startSignIn() {
|
||||||
|
transition[1](() => {
|
||||||
|
setIsSigningIn(true);
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Logging In...",
|
||||||
|
description: "Please wait until server responses",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
logInServerAction().then(() => {
|
||||||
|
toasted.update({
|
||||||
|
title: "Log In Success",
|
||||||
|
description: "Successfully logged in!",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
setIsSigningIn(false);
|
||||||
|
setState((prev) => ({ ...prev, signIn: true }));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PopoverContent anchor={"bottomLeft"} className={"p-4 space-y-3"}>
|
||||||
|
<Label>
|
||||||
|
<span>Username</span>
|
||||||
|
<Input type={"text"} />
|
||||||
|
</Label>
|
||||||
|
<Label>
|
||||||
|
<span>Password</span>
|
||||||
|
<Input type={"password"} />
|
||||||
|
</Label>
|
||||||
|
<div className={"flex flex-row justify-end"}>
|
||||||
|
<Button preset={"success"} onClick={startSignIn}>
|
||||||
|
{isSigningIn ? <MdiLoading className={"animate-spin"} /> : "Sign In"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</PopoverContent>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const UserControlContent = () => {
|
||||||
|
const [isSigningOut, setIsSigningOut] = useState(false);
|
||||||
|
const transition = useTransition();
|
||||||
|
const [_, setState] = useContext(UserControlContext);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
function startSignOut() {
|
||||||
|
transition[1](() => {
|
||||||
|
setIsSigningOut(true);
|
||||||
|
const toasted = toast({
|
||||||
|
title: "Logging Out",
|
||||||
|
description: "Please wait until server responses",
|
||||||
|
status: "loading",
|
||||||
|
});
|
||||||
|
logOutServerAction().then(() => {
|
||||||
|
toasted.update({
|
||||||
|
title: "Log Out Success",
|
||||||
|
description: "Successfully logged out!",
|
||||||
|
status: "success",
|
||||||
|
});
|
||||||
|
setIsSigningOut(false);
|
||||||
|
setState((prev) => ({ ...prev, signIn: false }));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PopoverContent anchor={"bottomLeft"}>
|
||||||
|
<Button preset={"ghost"}>Dashboard</Button>
|
||||||
|
<Button preset={"ghost"} onClick={startSignOut}>
|
||||||
|
{isSigningOut ? <MdiLoading className={"animate-spin"} /> : "Sign Out"}
|
||||||
|
</Button>
|
||||||
|
</PopoverContent>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const UserControl = () => {
|
||||||
|
const [state, setState] = useState<UserControlState>({
|
||||||
|
signIn: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button>{state.signIn ? "Log Out" : "Log In"}</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<UserControlContext.Provider value={[state, setState]}>
|
||||||
|
{state.signIn ? <UserControlContent /> : <SignInForm />}
|
||||||
|
</UserControlContext.Provider>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { ThemeSelector } from "./ThemeSelector";
|
||||||
|
import { UserControl } from "./UserControl";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
ThemeSelector,
|
||||||
|
UserControl,
|
||||||
|
}
|
||||||
54
packages/react/src/docs/components/PopoverBlocks/Preview.tsx
Normal file
54
packages/react/src/docs/components/PopoverBlocks/Preview.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { Button } from "@components/Button";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
|
||||||
|
|
||||||
|
export function PopoverDemo() {
|
||||||
|
return (
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Button size="icon">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent>
|
||||||
|
<Button preset="ghost" className="gap-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="flex-grow text-left">Dashboard</span>
|
||||||
|
</Button>
|
||||||
|
<Button preset="ghost" className="gap-2">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="1.2em"
|
||||||
|
height="1.2em"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="flex-grow text-left">Log out</span>
|
||||||
|
</Button>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user