diff --git a/packages/react/src/docs/components/Popover.mdx b/packages/react/src/docs/components/Popover.mdx new file mode 100644 index 0000000..ef3c6be --- /dev/null +++ b/packages/react/src/docs/components/Popover.mdx @@ -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. + + + + Preview + Code + + + + + + + + + + + +## Installation + +1. Create a new file `Popover.tsx` in your component folder. +2. Copy and paste the following code into the file. + + + +## Usage + +```tsx +import { Popover, PopoverTrigger, PopoverContent } from "@components/popover" +``` + +```html + + + + + + + + + +} \ No newline at end of file diff --git a/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx b/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx new file mode 100644 index 0000000..5ccd52d --- /dev/null +++ b/packages/react/src/docs/components/PopoverBlocks/Examples/UserControl.tsx @@ -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>] +>([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) { + return ( + + + + ); +} + +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 ( + + + +
+ +
+ + ); +}; + +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 ( + + + + + ); +}; + +export const UserControl = () => { + const [state, setState] = useState({ + signIn: false, + }); + + return ( + + + + + + {state.signIn ? : } + + + ); +}; diff --git a/packages/react/src/docs/components/PopoverBlocks/Examples/index.ts b/packages/react/src/docs/components/PopoverBlocks/Examples/index.ts new file mode 100644 index 0000000..ad9badf --- /dev/null +++ b/packages/react/src/docs/components/PopoverBlocks/Examples/index.ts @@ -0,0 +1,7 @@ +import { ThemeSelector } from "./ThemeSelector"; +import { UserControl } from "./UserControl"; + +export default { + ThemeSelector, + UserControl, +} \ No newline at end of file diff --git a/packages/react/src/docs/components/PopoverBlocks/Preview.tsx b/packages/react/src/docs/components/PopoverBlocks/Preview.tsx new file mode 100644 index 0000000..7a1f0ca --- /dev/null +++ b/packages/react/src/docs/components/PopoverBlocks/Preview.tsx @@ -0,0 +1,54 @@ +import { Button } from "@components/Button"; +import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover"; + +export function PopoverDemo() { + return ( + + + + + + + + + + ); +}