feat: add dialog
This commit is contained in:
parent
08b111ab4f
commit
56ae87cd81
415
packages/react/components/Dialog.tsx
Normal file
415
packages/react/components/Dialog.tsx
Normal file
@ -0,0 +1,415 @@
|
||||
import React, {
|
||||
Dispatch,
|
||||
MouseEventHandler,
|
||||
SetStateAction,
|
||||
useState,
|
||||
} from "react";
|
||||
import { VariantProps, vcn } from "..//shared";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogContext
|
||||
* =========================
|
||||
*/
|
||||
|
||||
interface DialogContext {
|
||||
opened: boolean;
|
||||
}
|
||||
|
||||
const initialDialogContext: DialogContext = { opened: false };
|
||||
const DialogContext = React.createContext<
|
||||
[DialogContext, Dispatch<SetStateAction<DialogContext>>]
|
||||
>([initialDialogContext, () => {}]);
|
||||
|
||||
const useDialogContext = () => React.useContext(DialogContext);
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogRoot
|
||||
* =========================
|
||||
*/
|
||||
|
||||
interface DialogRootProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const DialogRoot = ({ children }: DialogRootProps) => {
|
||||
const state = useState<DialogContext>(initialDialogContext);
|
||||
return (
|
||||
<DialogContext.Provider value={state}>{children}</DialogContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogTrigger
|
||||
* =========================
|
||||
*/
|
||||
|
||||
interface DialogTriggerProps<T extends React.ReactNode> {
|
||||
children: T extends any[] ? never : T;
|
||||
}
|
||||
|
||||
const DialogTrigger = <T extends React.ReactNode>({
|
||||
children,
|
||||
}: DialogTriggerProps<T>) => {
|
||||
const [_, setState] = useDialogContext();
|
||||
// const onClick = () => setState((p) => ({ ...p, opened: true }));
|
||||
|
||||
const child = React.Children.only(children) as React.ReactElement;
|
||||
const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
child.props.onClick?.(e);
|
||||
setState((p) => ({ ...p, opened: true }));
|
||||
};
|
||||
return <>{React.cloneElement(child, { onClick })}</>;
|
||||
};
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogOverlay
|
||||
* =========================
|
||||
*/
|
||||
|
||||
const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({
|
||||
base: "fixed inset-0 z-50 w-full h-full max-w-screen transition-all duration-300 flex flex-col justify-center items-center",
|
||||
variants: {
|
||||
opened: {
|
||||
true: "pointer-events-auto opacity-100",
|
||||
false: "pointer-events-none opacity-0",
|
||||
},
|
||||
blur: {
|
||||
sm: "backdrop-blur-sm",
|
||||
md: "backdrop-blur-md",
|
||||
lg: "backdrop-blur-lg",
|
||||
},
|
||||
darken: {
|
||||
sm: "backdrop-brightness-90",
|
||||
md: "backdrop-brightness-75",
|
||||
lg: "backdrop-brightness-50",
|
||||
},
|
||||
padding: {
|
||||
sm: "p-4",
|
||||
md: "p-6",
|
||||
lg: "p-8",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
opened: false,
|
||||
blur: "md",
|
||||
darken: "md",
|
||||
padding: "md",
|
||||
},
|
||||
});
|
||||
|
||||
interface DialogOverlay
|
||||
extends React.ComponentPropsWithoutRef<"div">,
|
||||
Omit<VariantProps<typeof dialogOverlayVariant>, "opened"> {
|
||||
closeOnClick?: boolean;
|
||||
}
|
||||
|
||||
const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
|
||||
(props, ref) => {
|
||||
const [{ opened }, setContext] = useDialogContext();
|
||||
const [variantProps, { children, closeOnClick, onClick, ...otherProps }] =
|
||||
resolveDialogOverlayVariant({ ...props, opened });
|
||||
return (
|
||||
<>
|
||||
{ReactDOM.createPortal(
|
||||
<div
|
||||
{...otherProps}
|
||||
ref={ref}
|
||||
className={dialogOverlayVariant(variantProps)}
|
||||
onClick={(e) => {
|
||||
if (closeOnClick) {
|
||||
setContext((p) => ({ ...p, opened: false }));
|
||||
}
|
||||
onClick?.(e);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogContent
|
||||
* =========================
|
||||
*/
|
||||
|
||||
const [dialogContentVariant, resolveDialogContentVariant] = vcn({
|
||||
base: "transition-transform duration-300 bg-white dark:bg-black border border-black/10 dark:border-white/10",
|
||||
variants: {
|
||||
opened: {
|
||||
true: "scale-100",
|
||||
false: "scale-50",
|
||||
},
|
||||
size: {
|
||||
fit: "w-fit",
|
||||
fullSm: "w-full max-w-sm",
|
||||
fullMd: "w-full max-w-md",
|
||||
fullLg: "w-full max-w-lg",
|
||||
fullXl: "w-full max-w-xl",
|
||||
full2xl: "w-full max-w-2xl",
|
||||
},
|
||||
rounded: {
|
||||
sm: "rounded-sm",
|
||||
md: "rounded-md",
|
||||
lg: "rounded-lg",
|
||||
xl: "rounded-xl",
|
||||
},
|
||||
padding: {
|
||||
sm: "p-4",
|
||||
md: "p-6",
|
||||
lg: "p-8",
|
||||
},
|
||||
gap: {
|
||||
sm: "space-y-4",
|
||||
md: "space-y-6",
|
||||
lg: "space-y-8",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
opened: false,
|
||||
size: "fit",
|
||||
rounded: "md",
|
||||
padding: "md",
|
||||
gap: "md",
|
||||
},
|
||||
});
|
||||
|
||||
interface DialogContent
|
||||
extends React.ComponentPropsWithoutRef<"div">,
|
||||
Omit<VariantProps<typeof dialogContentVariant>, "opened"> {}
|
||||
|
||||
const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
|
||||
(props, ref) => {
|
||||
const [{ opened }] = useDialogContext();
|
||||
const [variantProps, { children, ...otherProps }] =
|
||||
resolveDialogContentVariant({ ...props, opened });
|
||||
return (
|
||||
<div
|
||||
{...otherProps}
|
||||
ref={ref}
|
||||
className={dialogContentVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogClose
|
||||
* =========================
|
||||
*/
|
||||
|
||||
interface DialogCloseProps<T extends React.ReactNode> {
|
||||
children: T extends any[] ? never : T;
|
||||
}
|
||||
|
||||
const DialogClose = <T extends React.ReactNode>({
|
||||
children,
|
||||
}: DialogCloseProps<T>) => {
|
||||
const [_, setState] = useDialogContext();
|
||||
// const onClick = () => setState((p) => ({ ...p, opened: false }));
|
||||
|
||||
const child = React.Children.only(children) as React.ReactElement;
|
||||
|
||||
const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
|
||||
child.props.onClick?.(e);
|
||||
setState((p) => ({ ...p, opened: false }));
|
||||
};
|
||||
|
||||
return <>{React.cloneElement(child, { onClick })}</>;
|
||||
};
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogHeader
|
||||
* =========================
|
||||
*/
|
||||
|
||||
const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({
|
||||
base: "flex flex-col",
|
||||
variants: {
|
||||
gap: {
|
||||
sm: "gap-2",
|
||||
md: "gap-4",
|
||||
lg: "gap-6",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
gap: "sm",
|
||||
},
|
||||
});
|
||||
|
||||
interface DialogHeaderProps
|
||||
extends React.ComponentPropsWithoutRef<"header">,
|
||||
VariantProps<typeof dialogHeaderVariant> {}
|
||||
|
||||
const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, { children, ...otherProps }] =
|
||||
resolveDialogHeaderVariant(props);
|
||||
return (
|
||||
<header
|
||||
{...otherProps}
|
||||
ref={ref}
|
||||
className={dialogHeaderVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogTitle / DialogSubtitle
|
||||
* =========================
|
||||
*/
|
||||
|
||||
const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({
|
||||
variants: {
|
||||
size: {
|
||||
sm: "text-lg",
|
||||
md: "text-xl",
|
||||
lg: "text-2xl",
|
||||
},
|
||||
weight: {
|
||||
sm: "font-medium",
|
||||
md: "font-semibold",
|
||||
lg: "font-bold",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
size: "md",
|
||||
weight: "lg",
|
||||
},
|
||||
});
|
||||
|
||||
interface DialogTitleProps
|
||||
extends React.ComponentPropsWithoutRef<"h1">,
|
||||
VariantProps<typeof dialogTitleVariant> {}
|
||||
|
||||
const [dialogSubtitleVariant, resolveDialogSubtitleVariant] = vcn({
|
||||
variants: {
|
||||
size: {
|
||||
sm: "text-sm",
|
||||
md: "text-base",
|
||||
lg: "text-lg",
|
||||
},
|
||||
opacity: {
|
||||
sm: "opacity-60",
|
||||
md: "opacity-70",
|
||||
lg: "opacity-80",
|
||||
},
|
||||
weight: {
|
||||
sm: "font-light",
|
||||
md: "font-normal",
|
||||
lg: "font-medium",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
size: "sm",
|
||||
opacity: "sm",
|
||||
weight: "md",
|
||||
},
|
||||
});
|
||||
|
||||
interface DialogSubtitleProps
|
||||
extends React.ComponentPropsWithoutRef<"h2">,
|
||||
VariantProps<typeof dialogSubtitleVariant> {}
|
||||
|
||||
const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, { children, ...otherProps }] =
|
||||
resolveDialogTitleVariant(props);
|
||||
return (
|
||||
<h1
|
||||
{...otherProps}
|
||||
ref={ref}
|
||||
className={dialogTitleVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const DialogSubtitle = React.forwardRef<
|
||||
HTMLHeadingElement,
|
||||
DialogSubtitleProps
|
||||
>((props, ref) => {
|
||||
const [variantProps, { children, ...otherProps }] =
|
||||
resolveDialogSubtitleVariant(props);
|
||||
return (
|
||||
<h2
|
||||
{...otherProps}
|
||||
ref={ref}
|
||||
className={dialogSubtitleVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogFooter
|
||||
* =========================
|
||||
*/
|
||||
|
||||
const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({
|
||||
base: "flex flex-col-reverse sm:flex-row sm:justify-end",
|
||||
variants: {
|
||||
gap: {
|
||||
sm: "gap-2",
|
||||
md: "gap-4",
|
||||
lg: "gap-6",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
gap: "md",
|
||||
},
|
||||
});
|
||||
|
||||
interface DialogFooterProps
|
||||
extends React.ComponentPropsWithoutRef<"footer">,
|
||||
VariantProps<typeof dialogFooterVariant> {}
|
||||
|
||||
const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, { children, ...otherProps }] =
|
||||
resolveDialogFooterVariant(props);
|
||||
return (
|
||||
<div
|
||||
{...otherProps}
|
||||
ref={ref}
|
||||
className={dialogFooterVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export {
|
||||
useDialogContext,
|
||||
DialogRoot,
|
||||
DialogTrigger,
|
||||
DialogOverlay,
|
||||
DialogContent,
|
||||
DialogClose,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogSubtitle,
|
||||
DialogFooter,
|
||||
};
|
||||
101
packages/react/stories/Dialog.stories.tsx
Normal file
101
packages/react/stories/Dialog.stories.tsx
Normal file
@ -0,0 +1,101 @@
|
||||
import { Button } from "../components/Button";
|
||||
import {
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogRoot,
|
||||
DialogSubtitle,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "../components/Dialog";
|
||||
|
||||
export default {
|
||||
title: "React/Dialog",
|
||||
};
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<DialogRoot>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
console.log(`Opened dialog: `, e.currentTarget);
|
||||
}}
|
||||
>
|
||||
Open Dialog
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay>
|
||||
<DialogContent size={"fullMd"}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Lorem Ipsum</DialogTitle>
|
||||
<DialogSubtitle>This is a test dialog</DialogSubtitle>
|
||||
</DialogHeader>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
<DialogFooter>
|
||||
<DialogClose>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
console.log(`Closed dialog: `, e.currentTarget);
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
</DialogRoot>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithCloseOnClick = () => {
|
||||
return (
|
||||
<DialogRoot>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
console.log(`Opened dialog: `, e.currentTarget);
|
||||
}}
|
||||
>
|
||||
Open Dialog
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogOverlay
|
||||
closeOnClick
|
||||
onClick={(e) => {
|
||||
console.log(`Closed dialog on overlay click: `, e.currentTarget);
|
||||
}}
|
||||
>
|
||||
<DialogContent size={"fullMd"}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Lorem Ipsum</DialogTitle>
|
||||
<DialogSubtitle>This is a test dialog</DialogSubtitle>
|
||||
</DialogHeader>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat.
|
||||
</p>
|
||||
<DialogClose>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
console.log(`Closed dialog: `, e.currentTarget);
|
||||
}}
|
||||
>
|
||||
Close Dialog
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</DialogOverlay>
|
||||
</DialogRoot>
|
||||
);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user