feat: add components from pswui
This commit is contained in:
Shinwoo PARK
parent
92c4d35ad3
commit
0caf5f4a65
124
src/pswui/components/Button.tsx
Normal file
124
src/pswui/components/Button.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
import React from "react";
|
||||
import { vcn, VariantProps, Slot, AsChild } from "@pswui-lib";
|
||||
|
||||
const colors = {
|
||||
outline: {
|
||||
focus: "dark:focus-visible:outline-white/20 focus-visible:outline-black/10",
|
||||
},
|
||||
border: {
|
||||
default: "border-neutral-300 dark:border-neutral-700",
|
||||
success: "border-green-400 dark:border-green-600",
|
||||
warning: "border-yellow-400 dark:border-yellow-600",
|
||||
danger: "border-red-400 dark:border-red-600",
|
||||
},
|
||||
background: {
|
||||
default:
|
||||
"bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800",
|
||||
ghost:
|
||||
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
|
||||
success:
|
||||
"bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800",
|
||||
warning:
|
||||
"bg-yellow-100 dark:bg-yellow-900 hover:bg-yellow-200 dark:hover:bg-yellow-800",
|
||||
danger: "bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800",
|
||||
},
|
||||
underline: "decoration-current",
|
||||
};
|
||||
|
||||
const [buttonVariants, resolveVariants] = vcn({
|
||||
base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outline.focus} transition-all`,
|
||||
variants: {
|
||||
size: {
|
||||
link: "p-0 text-base",
|
||||
sm: "px-2 py-1 text-sm",
|
||||
md: "px-4 py-2 text-base",
|
||||
lg: "px-5 py-3 text-lg",
|
||||
icon: "p-2 text-base",
|
||||
},
|
||||
border: {
|
||||
none: "border-0",
|
||||
solid: `border ${colors.border.default}`,
|
||||
success: `border ${colors.border.success}`,
|
||||
warning: `border ${colors.border.warning}`,
|
||||
danger: `border ${colors.border.danger}`,
|
||||
},
|
||||
background: {
|
||||
default: colors.background.default,
|
||||
ghost: colors.background.ghost,
|
||||
success: colors.background.success,
|
||||
warning: colors.background.warning,
|
||||
danger: colors.background.danger,
|
||||
transparent: "bg-transparent hover:bg-transparent",
|
||||
},
|
||||
decoration: {
|
||||
none: "no-underline",
|
||||
link: `underline decoration-1 underline-offset-2 hover:underline-offset-4 ${colors.underline}`,
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
size: "md",
|
||||
border: "solid",
|
||||
background: "default",
|
||||
decoration: "none",
|
||||
},
|
||||
presets: {
|
||||
default: {
|
||||
border: "solid",
|
||||
background: "default",
|
||||
decoration: "none",
|
||||
size: "md",
|
||||
},
|
||||
ghost: {
|
||||
border: "none",
|
||||
background: "ghost",
|
||||
decoration: "none",
|
||||
size: "md",
|
||||
},
|
||||
link: {
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
decoration: "link",
|
||||
size: "link",
|
||||
},
|
||||
success: {
|
||||
border: "success",
|
||||
background: "success",
|
||||
decoration: "none",
|
||||
size: "md",
|
||||
},
|
||||
warning: {
|
||||
border: "warning",
|
||||
background: "warning",
|
||||
decoration: "none",
|
||||
size: "md",
|
||||
},
|
||||
danger: {
|
||||
border: "danger",
|
||||
background: "danger",
|
||||
decoration: "none",
|
||||
size: "md",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export interface ButtonProps
|
||||
extends Omit<React.ComponentPropsWithoutRef<"button">, "className">,
|
||||
VariantProps<typeof buttonVariants>,
|
||||
AsChild {}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] = resolveVariants(props);
|
||||
const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
|
||||
const Comp = asChild ? Slot : "button";
|
||||
const compProps = {
|
||||
...otherPropsExtracted,
|
||||
className: buttonVariants(variantProps),
|
||||
};
|
||||
|
||||
return <Comp ref={ref} {...compProps} />;
|
||||
},
|
||||
);
|
||||
|
||||
export { Button };
|
||||
113
src/pswui/components/Checkbox.tsx
Normal file
113
src/pswui/components/Checkbox.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import React from "react";
|
||||
import { VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
const checkboxColors = {
|
||||
background: {
|
||||
default: "bg-neutral-200 dark:bg-neutral-700",
|
||||
hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600",
|
||||
checked:
|
||||
"has-[input[type=checkbox]:checked]:bg-neutral-300 dark:has-[input[type=checkbox]:checked]:bg-neutral-400",
|
||||
checkedHover:
|
||||
"has-[input[type=checkbox]:checked]:hover:bg-neutral-400 dark:has-[input[type=checkbox]:checked]:hover:bg-neutral-300",
|
||||
disabled:
|
||||
'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800',
|
||||
disabledHover:
|
||||
"has-[input[type='checkbox']:disabled]:hover:bg-neutral-100 dark:has-[input[type='checkbox']:disabled]:hover:bg-neutral-800",
|
||||
disabledChecked:
|
||||
"has-[input[type='checkbox']:disabled:checked]:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:bg-neutral-700",
|
||||
disabledCheckedHover:
|
||||
"has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700",
|
||||
},
|
||||
checkmark:
|
||||
"text-black dark:text-white has-[input[type=checkbox]:disabled]:text-neutral-400 dark:has-[input[type=checkbox]:disabled]:text-neutral-500",
|
||||
};
|
||||
|
||||
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
|
||||
base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
|
||||
variants: {
|
||||
size: {
|
||||
base: "size-[1em] p-0 [&>svg]:size-[1em]",
|
||||
md: "size-[1.5em] p-0.5 [&>svg]:size-[1.25em]",
|
||||
lg: "size-[1.75em] p-1 [&>svg]:size-[1.25em]",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
size: "md",
|
||||
},
|
||||
});
|
||||
|
||||
interface CheckboxProps
|
||||
extends VariantProps<typeof checkboxVariant>,
|
||||
Omit<
|
||||
React.ComponentPropsWithoutRef<"input">,
|
||||
"type" | "className" | "size"
|
||||
> {}
|
||||
|
||||
const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] =
|
||||
resolveCheckboxVariantProps(props);
|
||||
const {
|
||||
defaultChecked,
|
||||
checked: propChecked,
|
||||
onChange,
|
||||
...otherPropsExtracted
|
||||
} = otherPropsCompressed;
|
||||
|
||||
// internally handles checked, so we can use checked value without prop
|
||||
const [checked, setChecked] = React.useState(defaultChecked ?? false);
|
||||
React.useEffect(() => {
|
||||
if (typeof propChecked === "boolean") {
|
||||
setChecked(propChecked);
|
||||
}
|
||||
}, [propChecked]);
|
||||
|
||||
const internalRef = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className={checkboxVariant(variantProps)}>
|
||||
<input
|
||||
{...otherPropsExtracted}
|
||||
defaultChecked={defaultChecked}
|
||||
checked={
|
||||
typeof defaultChecked === "boolean"
|
||||
? undefined
|
||||
: checked /* should be either uncontrolled (defaultChecked set) or controlled (checked set) */
|
||||
}
|
||||
onChange={(e) => {
|
||||
setChecked(e.currentTarget.checked);
|
||||
if (onChange) {
|
||||
onChange(e);
|
||||
}
|
||||
}}
|
||||
type="checkbox"
|
||||
className="hidden"
|
||||
ref={(el) => {
|
||||
internalRef.current = el;
|
||||
if (typeof ref === "function") {
|
||||
ref(el);
|
||||
} else if (ref) {
|
||||
ref.current = el;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
|
||||
></path>
|
||||
</svg>
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export { Checkbox };
|
||||
424
src/pswui/components/Dialog.tsx
Normal file
424
src/pswui/components/Dialog.tsx
Normal file
@ -0,0 +1,424 @@
|
||||
import React, { Dispatch, SetStateAction, useState } from "react";
|
||||
import { Slot, VariantProps, vcn } from "@pswui-lib";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogContext
|
||||
* =========================
|
||||
*/
|
||||
|
||||
interface DialogContext {
|
||||
opened: boolean;
|
||||
}
|
||||
|
||||
const initialDialogContext: DialogContext = { opened: false };
|
||||
const DialogContext = React.createContext<
|
||||
[DialogContext, Dispatch<SetStateAction<DialogContext>>]
|
||||
>([
|
||||
initialDialogContext,
|
||||
() => {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.warn(
|
||||
"It seems like you're using DialogContext outside of a provider.",
|
||||
);
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
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 {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const DialogTrigger = ({ children }: DialogTriggerProps) => {
|
||||
const [_, setState] = useDialogContext();
|
||||
const onClick = () => setState((p) => ({ ...p, opened: true }));
|
||||
|
||||
const slotProps = {
|
||||
onClick,
|
||||
children,
|
||||
};
|
||||
|
||||
return <Slot {...slotProps} />;
|
||||
};
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* 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, otherPropsCompressed] = resolveDialogOverlayVariant({
|
||||
...props,
|
||||
opened,
|
||||
});
|
||||
const { children, closeOnClick, onClick, ...otherPropsExtracted } =
|
||||
otherPropsCompressed;
|
||||
return (
|
||||
<>
|
||||
{ReactDOM.createPortal(
|
||||
<div
|
||||
{...otherPropsExtracted}
|
||||
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-neutral-200 dark:border-neutral-800",
|
||||
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, otherPropsCompressed] = resolveDialogContentVariant({
|
||||
...props,
|
||||
opened,
|
||||
});
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
return (
|
||||
<div
|
||||
{...otherPropsExtracted}
|
||||
ref={ref}
|
||||
className={dialogContentVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogClose
|
||||
* =========================
|
||||
*/
|
||||
|
||||
interface DialogCloseProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const DialogClose = ({ children }: DialogCloseProps) => {
|
||||
const [_, setState] = useDialogContext();
|
||||
const onClick = () => setState((p) => ({ ...p, opened: false }));
|
||||
|
||||
const slotProps = {
|
||||
onClick,
|
||||
children,
|
||||
};
|
||||
|
||||
return <Slot {...slotProps} />;
|
||||
};
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* 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, otherPropsCompressed] =
|
||||
resolveDialogHeaderVariant(props);
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
return (
|
||||
<header
|
||||
{...otherPropsExtracted}
|
||||
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, otherPropsCompressed] =
|
||||
resolveDialogTitleVariant(props);
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
return (
|
||||
<h1
|
||||
{...otherPropsExtracted}
|
||||
ref={ref}
|
||||
className={dialogTitleVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const DialogSubtitle = React.forwardRef<
|
||||
HTMLHeadingElement,
|
||||
DialogSubtitleProps
|
||||
>((props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] =
|
||||
resolveDialogSubtitleVariant(props);
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
return (
|
||||
<h2
|
||||
{...otherPropsExtracted}
|
||||
ref={ref}
|
||||
className={dialogSubtitleVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* =========================
|
||||
* DialogFooter
|
||||
* =========================
|
||||
*/
|
||||
|
||||
const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({
|
||||
base: "flex flex-col items-end sm:flex-row sm:items-center 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, otherPropsCompressed] =
|
||||
resolveDialogFooterVariant(props);
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
return (
|
||||
<div
|
||||
{...otherPropsExtracted}
|
||||
ref={ref}
|
||||
className={dialogFooterVariant(variantProps)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export {
|
||||
useDialogContext,
|
||||
DialogRoot,
|
||||
DialogTrigger,
|
||||
DialogOverlay,
|
||||
DialogContent,
|
||||
DialogClose,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogSubtitle,
|
||||
DialogFooter,
|
||||
};
|
||||
476
src/pswui/components/Drawer.tsx
Normal file
476
src/pswui/components/Drawer.tsx
Normal file
@ -0,0 +1,476 @@
|
||||
import React, {
|
||||
ComponentPropsWithoutRef,
|
||||
TouchEvent as ReactTouchEvent,
|
||||
forwardRef,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
interface IDrawerContext {
|
||||
opened: boolean;
|
||||
closeThreshold: number;
|
||||
movePercentage: number;
|
||||
isDragging: boolean;
|
||||
leaveWhileDragging: boolean;
|
||||
}
|
||||
const DrawerContextInitial: IDrawerContext = {
|
||||
opened: false,
|
||||
closeThreshold: 0.3,
|
||||
movePercentage: 0,
|
||||
isDragging: false,
|
||||
leaveWhileDragging: false,
|
||||
};
|
||||
const DrawerContext = React.createContext<
|
||||
[IDrawerContext, React.Dispatch<React.SetStateAction<IDrawerContext>>]
|
||||
>([
|
||||
DrawerContextInitial,
|
||||
() => {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.warn(
|
||||
"It seems like you're using DrawerContext outside of a provider.",
|
||||
);
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
interface DrawerRootProps {
|
||||
children: React.ReactNode;
|
||||
closeThreshold?: number;
|
||||
opened?: boolean;
|
||||
}
|
||||
|
||||
const DrawerRoot = ({ children, closeThreshold, opened }: DrawerRootProps) => {
|
||||
const state = useState<IDrawerContext>({
|
||||
...DrawerContextInitial,
|
||||
opened: opened ?? DrawerContextInitial.opened,
|
||||
closeThreshold: closeThreshold ?? DrawerContextInitial.closeThreshold,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
state[1]((prev) => ({
|
||||
...prev,
|
||||
opened: opened ?? prev.opened,
|
||||
closeThreshold: closeThreshold ?? prev.closeThreshold,
|
||||
}));
|
||||
}, [closeThreshold, opened]);
|
||||
|
||||
return (
|
||||
<DrawerContext.Provider value={state}>{children}</DrawerContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const DrawerTrigger = ({ children }: { children: React.ReactNode }) => {
|
||||
const [_, setState] = useContext(DrawerContext);
|
||||
|
||||
function onClick() {
|
||||
setState((prev) => ({ ...prev, opened: true }));
|
||||
}
|
||||
|
||||
return <Slot onClick={onClick}>{children}</Slot>;
|
||||
};
|
||||
|
||||
const [drawerOverlayVariant, resolveDrawerOverlayVariantProps] = vcn({
|
||||
base: "fixed inset-0 transition-[backdrop-filter] duration-75",
|
||||
variants: {
|
||||
opened: {
|
||||
true: "pointer-events-auto select-auto",
|
||||
false: "pointer-events-none select-none",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
opened: false,
|
||||
},
|
||||
});
|
||||
|
||||
const DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS = 0.3;
|
||||
|
||||
interface DrawerOverlayProps
|
||||
extends Omit<VariantProps<typeof drawerOverlayVariant>, "opened">,
|
||||
AsChild,
|
||||
ComponentPropsWithoutRef<"div"> {}
|
||||
|
||||
const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
|
||||
(props, ref) => {
|
||||
const [state, setState] = useContext(DrawerContext);
|
||||
|
||||
const [variantProps, restPropsCompressed] =
|
||||
resolveDrawerOverlayVariantProps(props);
|
||||
const { asChild, ...restPropsExtracted } = restPropsCompressed;
|
||||
|
||||
function onOutsideClick() {
|
||||
if (state.leaveWhileDragging) {
|
||||
setState((prev) => ({ ...prev, leaveWhileDragging: false }));
|
||||
return;
|
||||
}
|
||||
setState((prev) => ({ ...prev, opened: false }));
|
||||
}
|
||||
|
||||
const Comp = asChild ? Slot : "div";
|
||||
const backdropFilter = `brightness(${
|
||||
state.isDragging
|
||||
? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
|
||||
: state.opened
|
||||
? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
|
||||
: 1
|
||||
})`;
|
||||
|
||||
return createPortal(
|
||||
<Comp
|
||||
{...restPropsExtracted}
|
||||
className={drawerOverlayVariant({
|
||||
...variantProps,
|
||||
opened: state.isDragging ? true : state.opened,
|
||||
})}
|
||||
onClick={onOutsideClick}
|
||||
style={{
|
||||
backdropFilter,
|
||||
WebkitBackdropFilter: backdropFilter,
|
||||
transitionDuration: state.isDragging ? "0s" : undefined,
|
||||
}}
|
||||
ref={ref}
|
||||
/>,
|
||||
document.body,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const drawerContentColors = {
|
||||
background: "bg-white dark:bg-black",
|
||||
border: "border-neutral-200 dark:border-neutral-800",
|
||||
};
|
||||
|
||||
const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
|
||||
base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8`,
|
||||
variants: {
|
||||
position: {
|
||||
top: "top-0 inset-x-0 w-full max-w-screen rounded-t-lg border-b-2",
|
||||
bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2",
|
||||
left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2",
|
||||
right: "right-0 inset-y-0 h-screen rounded-r-lg border-l-2",
|
||||
},
|
||||
opened: {
|
||||
true: "touch-none",
|
||||
false:
|
||||
"[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
position: "left",
|
||||
opened: false,
|
||||
},
|
||||
});
|
||||
|
||||
interface DrawerContentProps
|
||||
extends Omit<VariantProps<typeof drawerContentVariant>, "opened">,
|
||||
AsChild,
|
||||
ComponentPropsWithoutRef<"div"> {}
|
||||
|
||||
const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
|
||||
(props, ref) => {
|
||||
const [state, setState] = useContext(DrawerContext);
|
||||
const [dragState, setDragState] = useState({
|
||||
isDragging: false,
|
||||
prevTouch: { x: 0, y: 0 },
|
||||
delta: 0,
|
||||
});
|
||||
|
||||
const [variantProps, restPropsCompressed] =
|
||||
resolveDrawerContentVariantProps(props);
|
||||
const { position = "left" } = variantProps;
|
||||
const { asChild, onClick, ...restPropsExtracted } = restPropsCompressed;
|
||||
|
||||
const Comp = asChild ? Slot : "div";
|
||||
|
||||
const internalRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
function onMouseDown() {
|
||||
setState((prev) => ({ ...prev, isDragging: true }));
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
delta: 0,
|
||||
prevTouch: { x: 0, y: 0 },
|
||||
});
|
||||
}
|
||||
|
||||
function onTouchStart(e: ReactTouchEvent<HTMLDivElement>) {
|
||||
setState((prev) => ({ ...prev, isDragging: true }));
|
||||
setDragState({
|
||||
isDragging: true,
|
||||
delta: 0,
|
||||
prevTouch: { x: e.touches[0].pageX, y: e.touches[0].pageY },
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function onMouseUp(e: TouchEvent): void;
|
||||
function onMouseUp(e: MouseEvent): void;
|
||||
function onMouseUp(e: TouchEvent | MouseEvent) {
|
||||
if (
|
||||
e.target instanceof Element &&
|
||||
internalRef.current &&
|
||||
internalRef.current.contains(e.target)
|
||||
) {
|
||||
const size = ["top", "bottom"].includes(position)
|
||||
? e.target.getBoundingClientRect().height
|
||||
: e.target.getBoundingClientRect().width;
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isDragging: false,
|
||||
opened:
|
||||
Math.abs(dragState.delta) > state.closeThreshold * size
|
||||
? false
|
||||
: prev.opened,
|
||||
movePercentage: 0,
|
||||
}));
|
||||
} else {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isDragging: false,
|
||||
movePercentage: 0,
|
||||
}));
|
||||
}
|
||||
setDragState({
|
||||
isDragging: false,
|
||||
delta: 0,
|
||||
prevTouch: { x: 0, y: 0 },
|
||||
});
|
||||
}
|
||||
|
||||
function onMouseMove(e: TouchEvent): void;
|
||||
function onMouseMove(e: MouseEvent): void;
|
||||
function onMouseMove(e: MouseEvent | TouchEvent) {
|
||||
if (dragState.isDragging) {
|
||||
setDragState((prev) => {
|
||||
let movement = ["top", "bottom"].includes(position)
|
||||
? "movementY" in e
|
||||
? e.movementY
|
||||
: e.touches[0].pageY - prev.prevTouch.y
|
||||
: "movementX" in e
|
||||
? e.movementX
|
||||
: e.touches[0].pageX - prev.prevTouch.x;
|
||||
if (
|
||||
(["top", "left"].includes(position) &&
|
||||
dragState.delta >= 0 &&
|
||||
movement > 0) ||
|
||||
(["bottom", "right"].includes(position) &&
|
||||
dragState.delta <= 0 &&
|
||||
movement < 0)
|
||||
) {
|
||||
movement =
|
||||
movement /
|
||||
Math.abs(dragState.delta === 0 ? 1 : dragState.delta);
|
||||
}
|
||||
return {
|
||||
...prev,
|
||||
delta: prev.delta + movement,
|
||||
...("touches" in e
|
||||
? {
|
||||
prevTouch: { x: e.touches[0].pageX, y: e.touches[0].pageY },
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
});
|
||||
|
||||
if (internalRef.current) {
|
||||
const size = ["top", "bottom"].includes(position)
|
||||
? internalRef.current.getBoundingClientRect().height
|
||||
: internalRef.current.getBoundingClientRect().width;
|
||||
const movePercentage = dragState.delta / size;
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
movePercentage: ["top", "left"].includes(position)
|
||||
? -movePercentage
|
||||
: movePercentage,
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("mousemove", onMouseMove);
|
||||
window.addEventListener("mouseup", onMouseUp);
|
||||
window.addEventListener("touchmove", onMouseMove);
|
||||
window.addEventListener("touchend", onMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", onMouseMove);
|
||||
window.removeEventListener("mouseup", onMouseUp);
|
||||
window.removeEventListener("touchmove", onMouseMove);
|
||||
window.removeEventListener("touchend", onMouseUp);
|
||||
};
|
||||
}, [state, dragState]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={drawerContentVariant({
|
||||
...variantProps,
|
||||
opened: true,
|
||||
className: dragState.isDragging
|
||||
? "transition-[width_0ms]"
|
||||
: variantProps.className,
|
||||
})}
|
||||
style={
|
||||
state.opened
|
||||
? ["top", "bottom"].includes(position)
|
||||
? {
|
||||
height:
|
||||
(internalRef.current?.getBoundingClientRect?.()?.height ??
|
||||
0) +
|
||||
(position === "top" ? dragState.delta : -dragState.delta),
|
||||
padding: 0,
|
||||
}
|
||||
: {
|
||||
width:
|
||||
(internalRef.current?.getBoundingClientRect?.()?.width ??
|
||||
0) +
|
||||
(position === "left" ? dragState.delta : -dragState.delta),
|
||||
padding: 0,
|
||||
}
|
||||
: { width: 0, height: 0, padding: 0 }
|
||||
}
|
||||
>
|
||||
<Comp
|
||||
{...restPropsExtracted}
|
||||
className={drawerContentVariant({
|
||||
...variantProps,
|
||||
opened: state.opened,
|
||||
})}
|
||||
style={{
|
||||
transform: dragState.isDragging
|
||||
? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
|
||||
dragState.delta
|
||||
}px)`
|
||||
: undefined,
|
||||
transitionDuration: dragState.isDragging ? "0s" : undefined,
|
||||
userSelect: dragState.isDragging ? "none" : undefined,
|
||||
}}
|
||||
ref={(el) => {
|
||||
internalRef.current = el;
|
||||
if (typeof ref === "function") {
|
||||
ref(el);
|
||||
} else if (ref) {
|
||||
ref.current = el;
|
||||
}
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClick?.(e);
|
||||
}}
|
||||
onMouseDown={onMouseDown}
|
||||
onMouseLeave={() =>
|
||||
dragState.isDragging &&
|
||||
setState((prev) => ({ ...prev, leaveWhileDragging: true }))
|
||||
}
|
||||
onMouseEnter={() =>
|
||||
dragState.isDragging &&
|
||||
setState((prev) => ({ ...prev, leaveWhileDragging: false }))
|
||||
}
|
||||
onTouchStart={onTouchStart}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const DrawerClose = forwardRef<
|
||||
HTMLButtonElement,
|
||||
ComponentPropsWithoutRef<"button">
|
||||
>((props, ref) => {
|
||||
const [_, setState] = useContext(DrawerContext);
|
||||
return (
|
||||
<Slot
|
||||
ref={ref}
|
||||
{...props}
|
||||
onClick={() => setState((prev) => ({ ...prev, opened: false }))}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
|
||||
base: "flex flex-col gap-2",
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface DrawerHeaderProps
|
||||
extends ComponentPropsWithoutRef<"div">,
|
||||
VariantProps<typeof drawerHeaderVariant>,
|
||||
AsChild {}
|
||||
|
||||
const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, restPropsCompressed] =
|
||||
resolveDrawerHeaderVariantProps(props);
|
||||
const { asChild, ...restPropsExtracted } = restPropsCompressed;
|
||||
return (
|
||||
<div
|
||||
{...restPropsExtracted}
|
||||
className={drawerHeaderVariant(variantProps)}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
|
||||
base: "flex-grow",
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface DrawerBodyProps
|
||||
extends ComponentPropsWithoutRef<"div">,
|
||||
VariantProps<typeof drawerBodyVariant>,
|
||||
AsChild {}
|
||||
|
||||
const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
|
||||
const [variantProps, restPropsCompressed] =
|
||||
resolveDrawerBodyVariantProps(props);
|
||||
const { asChild, ...restPropsExtracted } = restPropsCompressed;
|
||||
return (
|
||||
<div
|
||||
{...restPropsExtracted}
|
||||
className={drawerBodyVariant(variantProps)}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
|
||||
base: "flex flex-row justify-end gap-2",
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface DrawerFooterProps
|
||||
extends ComponentPropsWithoutRef<"div">,
|
||||
VariantProps<typeof drawerFooterVariant>,
|
||||
AsChild {}
|
||||
|
||||
const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, restPropsCompressed] =
|
||||
resolveDrawerFooterVariantProps(props);
|
||||
const { asChild, ...restPropsExtracted } = restPropsCompressed;
|
||||
return (
|
||||
<div
|
||||
{...restPropsExtracted}
|
||||
className={drawerFooterVariant(variantProps)}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export {
|
||||
DrawerRoot,
|
||||
DrawerTrigger,
|
||||
DrawerOverlay,
|
||||
DrawerContent,
|
||||
DrawerClose,
|
||||
DrawerHeader,
|
||||
DrawerBody,
|
||||
DrawerFooter,
|
||||
};
|
||||
117
src/pswui/components/Input.tsx
Normal file
117
src/pswui/components/Input.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import React from "react";
|
||||
import { VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
const inputColors = {
|
||||
background: {
|
||||
default: "bg-neutral-50 dark:bg-neutral-900",
|
||||
hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
|
||||
invalid:
|
||||
"invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
|
||||
invalidHover:
|
||||
"hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
|
||||
},
|
||||
border: {
|
||||
default: "border-neutral-400 dark:border-neutral-600",
|
||||
invalid:
|
||||
"invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
|
||||
},
|
||||
ring: {
|
||||
default: "ring-transparent focus-within:ring-current",
|
||||
invalid:
|
||||
"invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
|
||||
},
|
||||
};
|
||||
|
||||
const [inputVariant, resolveInputVariantProps] = vcn({
|
||||
base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex [&:has(input)]:w-fit`,
|
||||
variants: {
|
||||
unstyled: {
|
||||
true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
|
||||
false: "",
|
||||
},
|
||||
full: {
|
||||
true: "w-full",
|
||||
false: "w-fit",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
unstyled: false,
|
||||
full: false,
|
||||
},
|
||||
});
|
||||
|
||||
interface InputFrameProps
|
||||
extends VariantProps<typeof inputVariant>,
|
||||
React.ComponentPropsWithoutRef<"label"> {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] =
|
||||
resolveInputVariantProps(props);
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
|
||||
return (
|
||||
<label
|
||||
ref={ref}
|
||||
className={`group/input-frame ${inputVariant(variantProps)}`}
|
||||
{...otherPropsExtracted}
|
||||
>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
interface InputProps
|
||||
extends VariantProps<typeof inputVariant>,
|
||||
React.ComponentPropsWithoutRef<"input"> {
|
||||
type: Exclude<
|
||||
React.InputHTMLAttributes<HTMLInputElement>["type"],
|
||||
| "button"
|
||||
| "checkbox"
|
||||
| "color"
|
||||
| "date"
|
||||
| "datetime-local"
|
||||
| "file"
|
||||
| "radio"
|
||||
| "range"
|
||||
| "reset"
|
||||
| "image"
|
||||
| "submit"
|
||||
| "time"
|
||||
>;
|
||||
invalid?: string;
|
||||
}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] = resolveInputVariantProps(props);
|
||||
const { type, invalid, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
|
||||
const innerRef = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (innerRef && innerRef.current) {
|
||||
innerRef.current.setCustomValidity(invalid ?? "");
|
||||
}
|
||||
}, [invalid]);
|
||||
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
ref={(el) => {
|
||||
innerRef.current = el;
|
||||
if (typeof ref === "function") {
|
||||
ref(el);
|
||||
} else if (ref) {
|
||||
ref.current = el;
|
||||
}
|
||||
}}
|
||||
className={inputVariant(variantProps)}
|
||||
{...otherPropsExtracted}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export { InputFrame, Input };
|
||||
33
src/pswui/components/Label.tsx
Normal file
33
src/pswui/components/Label.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import { VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
const [labelVariant, resolveLabelVariantProps] = vcn({
|
||||
base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500",
|
||||
variants: {
|
||||
direction: {
|
||||
vertical: "flex flex-col gap-2 justify-center items-start",
|
||||
horizontal: "flex flex-row gap-2 justify-start items-center",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
direction: "vertical",
|
||||
},
|
||||
});
|
||||
|
||||
interface LabelProps
|
||||
extends VariantProps<typeof labelVariant>,
|
||||
React.ComponentPropsWithoutRef<"label"> {}
|
||||
|
||||
const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] = resolveLabelVariantProps(props);
|
||||
|
||||
return (
|
||||
<label
|
||||
ref={ref}
|
||||
{...otherPropsCompressed}
|
||||
className={labelVariant(variantProps)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export { Label };
|
||||
139
src/pswui/components/Popover.tsx
Normal file
139
src/pswui/components/Popover.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import React, { useContext, useEffect, useRef } from "react";
|
||||
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
interface IPopoverContext {
|
||||
opened: boolean;
|
||||
}
|
||||
|
||||
const PopoverContext = React.createContext<
|
||||
[IPopoverContext, React.Dispatch<React.SetStateAction<IPopoverContext>>]
|
||||
>([
|
||||
{
|
||||
opened: false,
|
||||
},
|
||||
() => {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.warn(
|
||||
"It seems like you're using PopoverContext outside of a provider.",
|
||||
);
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
interface PopoverProps extends AsChild {
|
||||
children: React.ReactNode;
|
||||
opened?: boolean;
|
||||
}
|
||||
|
||||
const Popover = ({ children, opened, asChild }: PopoverProps) => {
|
||||
const state = React.useState<IPopoverContext>({
|
||||
opened: opened ?? false,
|
||||
});
|
||||
|
||||
const Comp = asChild ? Slot : "div";
|
||||
|
||||
return (
|
||||
<PopoverContext.Provider value={state}>
|
||||
<Comp className="relative">{children}</Comp>
|
||||
</PopoverContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const PopoverTrigger = ({ children }: { children: React.ReactNode }) => {
|
||||
const [_, setState] = React.useContext(PopoverContext);
|
||||
function setOpen() {
|
||||
setState((prev) => ({ ...prev, opened: true }));
|
||||
}
|
||||
|
||||
return <Slot onClick={setOpen}>{children}</Slot>;
|
||||
};
|
||||
|
||||
const popoverColors = {
|
||||
background: "bg-white dark:bg-black",
|
||||
border: "border-neutral-200 dark:border-neutral-800",
|
||||
};
|
||||
|
||||
const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
|
||||
base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
|
||||
variants: {
|
||||
anchor: {
|
||||
topLeft:
|
||||
"bottom-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-bottom-right",
|
||||
topCenter:
|
||||
"bottom-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-bottom-center",
|
||||
topRight:
|
||||
"bottom-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-bottom-left",
|
||||
middleLeft: "top-1/2 translate-y-1/2 right-full origin-right",
|
||||
middleCenter:
|
||||
"top-1/2 translate-y-1/2 left-1/2 -translate-x-1/2 origin-center",
|
||||
middleRight:
|
||||
"top-1/2 translate-y-1/2 left-[calc(100%+var(--popover-offset))] origin-left",
|
||||
bottomLeft:
|
||||
"top-[calc(100%+var(--popover-offset))] right-[calc(100%+var(--popover-offset))] origin-top-right",
|
||||
bottomCenter:
|
||||
"top-[calc(100%+var(--popover-offset))] left-1/2 -translate-x-1/2 origin-top-center",
|
||||
bottomRight:
|
||||
"top-[calc(100%+var(--popover-offset))] left-[calc(100%+var(--popover-offset))] origin-top-left",
|
||||
},
|
||||
offset: {
|
||||
sm: "[--popover-offset:2px]",
|
||||
md: "[--popover-offset:4px]",
|
||||
lg: "[--popover-offset:8px]",
|
||||
},
|
||||
opened: {
|
||||
true: "opacity-1 scale-100",
|
||||
false: "opacity-0 scale-75",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
anchor: "bottomCenter",
|
||||
opened: false,
|
||||
offset: "md",
|
||||
},
|
||||
});
|
||||
|
||||
interface PopoverContentProps
|
||||
extends Omit<VariantProps<typeof popoverContentVariant>, "opened">,
|
||||
React.ComponentPropsWithoutRef<"div">,
|
||||
AsChild {}
|
||||
|
||||
const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] =
|
||||
resolvePopoverContentVariantProps(props);
|
||||
const { children, ...otherPropsExtracted } = otherPropsCompressed;
|
||||
const [state, setState] = useContext(PopoverContext);
|
||||
|
||||
const internalRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
function handleOutsideClick(e: any) {
|
||||
if (internalRef.current && !internalRef.current.contains(e.target)) {
|
||||
setState((prev) => ({ ...prev, opened: false }));
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleOutsideClick);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleOutsideClick);
|
||||
};
|
||||
}, [internalRef, setState]);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...otherPropsExtracted}
|
||||
className={popoverContentVariant({
|
||||
...variantProps,
|
||||
opened: state.opened,
|
||||
})}
|
||||
ref={(el) => {
|
||||
internalRef.current = el;
|
||||
typeof ref === "function" ? ref(el) : ref && (ref.current = el);
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent };
|
||||
84
src/pswui/components/Switch.tsx
Normal file
84
src/pswui/components/Switch.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import React from "react";
|
||||
import { VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
const switchColors = {
|
||||
background: {
|
||||
default: "bg-neutral-200 dark:bg-neutral-700",
|
||||
hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600",
|
||||
checked:
|
||||
"has-[input[type=checkbox]:checked]:bg-neutral-700 dark:has-[input[type=checkbox]:checked]:bg-neutral-300",
|
||||
checkedHover:
|
||||
"has-[input[type=checkbox]:checked]:hover:bg-black dark:has-[input[type=checkbox]:checked]:hover:bg-white",
|
||||
disabled:
|
||||
"has-[input[type=checkbox]:disabled]:bg-neutral-100 dark:has-[input[type=checkbox]:disabled]:bg-neutral-800",
|
||||
disabledHover:
|
||||
"has-[input[type=checkbox]:disabled]:hover:bg-neutral-100 dark:has-[input[type=checkbox]:disabled]:hover:bg-neutral-800",
|
||||
disabledChecked:
|
||||
"has-[input[type=checkbox]:disabled:checked]:bg-neutral-300 dark:has-[input[type=checkbox]:disabled:checked]:bg-neutral-700",
|
||||
disabledCheckedHover:
|
||||
"has-[input[type=checkbox]:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type=checkbox]:disabled:checked]:hover:bg-neutral-700",
|
||||
},
|
||||
button: {
|
||||
default: "bg-white dark:bg-black",
|
||||
},
|
||||
};
|
||||
|
||||
const [switchVariant, resolveSwitchVariantProps] = vcn({
|
||||
base: `relative inline-block group/switch rounded-full p-1 has-[input[type=checkbox]:not(:checked)]:pr-5 has-[input[type=checkbox]:checked]:pl-5 ${switchColors.background.default} ${switchColors.background.hover} ${switchColors.background.checked} ${switchColors.background.checkedHover} ${switchColors.background.disabled} ${switchColors.background.disabledHover} ${switchColors.background.disabledChecked} ${switchColors.background.disabledCheckedHover} has-[input[type=checkbox]:disabled]:cursor-not-allowed transition-all duration-200 ease-in-out`,
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface SwitchProps
|
||||
extends VariantProps<typeof switchVariant>,
|
||||
Omit<
|
||||
React.ComponentPropsWithoutRef<"input">,
|
||||
"type" | "className" | "size"
|
||||
> {}
|
||||
|
||||
const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
|
||||
const [variantProps, otherPropsCompressed] = resolveSwitchVariantProps(props);
|
||||
const {
|
||||
defaultChecked,
|
||||
checked: propChecked,
|
||||
onChange,
|
||||
...otherPropsExtracted
|
||||
} = otherPropsCompressed;
|
||||
|
||||
// internally handles checked, so we can use checked value without prop
|
||||
const [checked, setChecked] = React.useState(defaultChecked ?? false);
|
||||
React.useEffect(() => {
|
||||
if (typeof propChecked === "boolean") {
|
||||
setChecked(propChecked);
|
||||
}
|
||||
}, [propChecked]);
|
||||
|
||||
const internalRef = React.useRef<HTMLInputElement | null>(null);
|
||||
|
||||
return (
|
||||
<label className={switchVariant(variantProps)}>
|
||||
<input
|
||||
{...otherPropsExtracted}
|
||||
defaultChecked={defaultChecked}
|
||||
checked={typeof defaultChecked === "boolean" ? undefined : checked}
|
||||
type="checkbox"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
setChecked(e.currentTarget.checked);
|
||||
onChange?.(e);
|
||||
}}
|
||||
ref={(el) => {
|
||||
internalRef.current = el;
|
||||
if (typeof ref === "function") {
|
||||
ref(el);
|
||||
} else if (ref) {
|
||||
ref.current = el;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className={`w-4 h-4 rounded-full ${switchColors.button.default}`} />
|
||||
</label>
|
||||
);
|
||||
});
|
||||
|
||||
export { Switch };
|
||||
229
src/pswui/components/Tabs.tsx
Normal file
229
src/pswui/components/Tabs.tsx
Normal file
@ -0,0 +1,229 @@
|
||||
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
|
||||
import React from "react";
|
||||
|
||||
interface Tab {
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface TabContextBody {
|
||||
tabs: Tab[];
|
||||
active: [number, string] /* index, name */;
|
||||
}
|
||||
|
||||
const TabContext = React.createContext<
|
||||
[TabContextBody, React.Dispatch<React.SetStateAction<TabContextBody>>]
|
||||
>([
|
||||
{
|
||||
tabs: [],
|
||||
active: [0, ""],
|
||||
},
|
||||
() => {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.warn(
|
||||
"It seems like you're using TabContext outside of provider.",
|
||||
);
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
interface TabProviderProps {
|
||||
defaultName: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const TabProvider = ({ defaultName, children }: TabProviderProps) => {
|
||||
const state = React.useState<TabContextBody>({
|
||||
tabs: [],
|
||||
active: [0, defaultName],
|
||||
});
|
||||
|
||||
return <TabContext.Provider value={state}>{children}</TabContext.Provider>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides current state for tab, using context.
|
||||
* Also provides functions to control state.
|
||||
*/
|
||||
const useTabState = () => {
|
||||
const [state, setState] = React.useContext(TabContext);
|
||||
|
||||
function getActiveTab() {
|
||||
return state.active;
|
||||
}
|
||||
|
||||
function setActiveTab(name: string): void;
|
||||
function setActiveTab(index: number): void;
|
||||
function setActiveTab(param: string | number) {
|
||||
if (typeof param === "number") {
|
||||
if (param < 0 || param >= state.tabs.length) {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.error(
|
||||
`Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
|
||||
state.tabs.length - 1
|
||||
}`,
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setState((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
active: [param, prev.tabs[param].name],
|
||||
};
|
||||
});
|
||||
} else if (typeof param === "string") {
|
||||
const index = state.tabs.findIndex((tab) => tab.name === param);
|
||||
if (index === -1) {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.error(
|
||||
`Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
|
||||
.map((tab) => tab.name)
|
||||
.join(", ")}`,
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveTab(index);
|
||||
}
|
||||
}
|
||||
|
||||
function setPreviousActive() {
|
||||
if (state.active[0] === 0) {
|
||||
return;
|
||||
}
|
||||
setActiveTab(state.active[0] - 1);
|
||||
}
|
||||
|
||||
function setNextActive() {
|
||||
if (state.active[0] === state.tabs.length - 1) {
|
||||
return;
|
||||
}
|
||||
setActiveTab(state.active[0] + 1);
|
||||
}
|
||||
|
||||
return {
|
||||
getActiveTab,
|
||||
setActiveTab,
|
||||
setPreviousActive,
|
||||
setNextActive,
|
||||
};
|
||||
};
|
||||
|
||||
const [TabListVariant, resolveTabListVariantProps] = vcn({
|
||||
base: "flex flex-row bg-gray-100 dark:bg-neutral-800 rounded-lg p-1.5 gap-1",
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface TabListProps
|
||||
extends VariantProps<typeof TabListVariant>,
|
||||
React.HTMLAttributes<HTMLDivElement> {}
|
||||
|
||||
const TabList = (props: TabListProps) => {
|
||||
const [variantProps, restProps] = resolveTabListVariantProps(props);
|
||||
|
||||
return <div className={TabListVariant(variantProps)} {...restProps} />;
|
||||
};
|
||||
|
||||
const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({
|
||||
base: "py-1.5 rounded-md flex-grow transition-all text-sm",
|
||||
variants: {
|
||||
active: {
|
||||
true: "bg-white/100 dark:bg-black/100 text-black dark:text-white",
|
||||
false:
|
||||
"bg-white/0 dark:bg-black/0 text-black dark:text-white hover:bg-white/50 dark:hover:bg-black/50",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
active: false,
|
||||
},
|
||||
});
|
||||
|
||||
interface TabTriggerProps
|
||||
extends Omit<VariantProps<typeof TabTriggerVariant>, "active">,
|
||||
React.HTMLAttributes<HTMLButtonElement>,
|
||||
Tab,
|
||||
AsChild {}
|
||||
|
||||
const TabTrigger = (props: TabTriggerProps) => {
|
||||
const [variantProps, restPropsBeforeParse] =
|
||||
resolveTabTriggerVariantProps(props);
|
||||
const { name, ...restProps } = restPropsBeforeParse;
|
||||
const [context, setContext] = React.useContext(TabContext);
|
||||
|
||||
React.useEffect(() => {
|
||||
setContext((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
tabs: [...prev.tabs, { name }],
|
||||
};
|
||||
});
|
||||
|
||||
return () => {
|
||||
setContext((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
tabs: prev.tabs.filter((tab) => tab.name !== name),
|
||||
};
|
||||
});
|
||||
};
|
||||
}, [name]);
|
||||
|
||||
const Comp = props.asChild ? Slot : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
className={TabTriggerVariant({
|
||||
...variantProps,
|
||||
active: context.active[1] === name,
|
||||
})}
|
||||
onClick={() =>
|
||||
setContext((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
active: [prev.tabs.findIndex((tab) => tab.name === name), name],
|
||||
};
|
||||
})
|
||||
}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const [tabContentVariant, resolveTabContentVariantProps] = vcn({
|
||||
base: "",
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface TabContentProps extends VariantProps<typeof tabContentVariant> {
|
||||
name: string;
|
||||
children: Exclude<
|
||||
React.ReactNode,
|
||||
string | number | boolean | Iterable<React.ReactNode> | null | undefined
|
||||
>;
|
||||
}
|
||||
|
||||
const TabContent = (props: TabContentProps) => {
|
||||
const [variantProps, restPropsBeforeParse] =
|
||||
resolveTabContentVariantProps(props);
|
||||
const { name, ...restProps } = restPropsBeforeParse;
|
||||
const [context] = React.useContext(TabContext);
|
||||
|
||||
if (context.active[1] === name) {
|
||||
return (
|
||||
<Slot
|
||||
className={tabContentVariant({
|
||||
...variantProps,
|
||||
})}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export { TabProvider, useTabState, TabList, TabTrigger, TabContent };
|
||||
337
src/pswui/components/Toast.tsx
Normal file
337
src/pswui/components/Toast.tsx
Normal file
@ -0,0 +1,337 @@
|
||||
import React, { useEffect, useId, useRef } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
interface ToastOption {
|
||||
closeButton: boolean;
|
||||
closeTimeout: number | null;
|
||||
}
|
||||
|
||||
const defaultToastOption: ToastOption = {
|
||||
closeButton: true,
|
||||
closeTimeout: 3000,
|
||||
};
|
||||
|
||||
const toastColors = {
|
||||
background: "bg-white dark:bg-black",
|
||||
borders: {
|
||||
default: "border-black/10 dark:border-white/20",
|
||||
error: "border-red-500/80",
|
||||
success: "border-green-500/80",
|
||||
warning: "border-yellow-500/80",
|
||||
loading: "border-black/50 dark:border-white/50 animate-pulse",
|
||||
},
|
||||
};
|
||||
|
||||
const [toastVariant] = vcn({
|
||||
base: `flex flex-col gap-2 border p-4 rounded-lg pr-8 pointer-events-auto ${toastColors.background} relative transition-all duration-150`,
|
||||
variants: {
|
||||
status: {
|
||||
default: toastColors.borders.default,
|
||||
error: toastColors.borders.error,
|
||||
success: toastColors.borders.success,
|
||||
warning: toastColors.borders.warning,
|
||||
loading: toastColors.borders.loading,
|
||||
},
|
||||
life: {
|
||||
born: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(0,.6,.7,1)]",
|
||||
normal: "translate-y-0 scale-100 ease-[cubic-bezier(0,.6,.7,1)]",
|
||||
dead: "-translate-y-full md:translate-y-full scale-90 ease-[cubic-bezier(.6,0,1,.7)]",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
status: "default",
|
||||
life: "born",
|
||||
},
|
||||
});
|
||||
|
||||
interface ToastBody extends Omit<VariantProps<typeof toastVariant>, "preset"> {
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
let index = 0;
|
||||
let toasts: Record<
|
||||
`${number}`,
|
||||
ToastBody & Partial<ToastOption> & { subscribers: (() => void)[] }
|
||||
> = {};
|
||||
let subscribers: (() => void)[] = [];
|
||||
|
||||
/**
|
||||
* ====
|
||||
* Controls
|
||||
* ====
|
||||
*/
|
||||
|
||||
function subscribe(callback: () => void) {
|
||||
subscribers.push(callback);
|
||||
return () => {
|
||||
subscribers = subscribers.filter((subscriber) => subscriber !== callback);
|
||||
};
|
||||
}
|
||||
|
||||
function getSnapshot() {
|
||||
return { ...toasts };
|
||||
}
|
||||
|
||||
function subscribeSingle(id: `${number}`) {
|
||||
return (callback: () => void) => {
|
||||
toasts[id].subscribers.push(callback);
|
||||
return () => {
|
||||
toasts[id].subscribers = toasts[id].subscribers.filter(
|
||||
(subscriber) => subscriber !== callback,
|
||||
);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function getSingleSnapshot(id: `${number}`) {
|
||||
return () => {
|
||||
return {
|
||||
...toasts[id],
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function notify() {
|
||||
subscribers.forEach((subscriber) => subscriber());
|
||||
}
|
||||
|
||||
function notifySingle(id: `${number}`) {
|
||||
toasts[id].subscribers.forEach((subscriber) => subscriber());
|
||||
}
|
||||
|
||||
function close(id: `${number}`) {
|
||||
toasts[id] = {
|
||||
...toasts[id],
|
||||
life: "dead",
|
||||
};
|
||||
notifySingle(id);
|
||||
}
|
||||
|
||||
function update(
|
||||
id: `${number}`,
|
||||
toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
|
||||
) {
|
||||
toasts[id] = {
|
||||
...toasts[id],
|
||||
...toast,
|
||||
};
|
||||
notifySingle(id);
|
||||
}
|
||||
|
||||
function addToast(toast: Omit<ToastBody, "life"> & Partial<ToastOption>) {
|
||||
const id: `${number}` = `${index}`;
|
||||
toasts[id] = {
|
||||
...toast,
|
||||
subscribers: [],
|
||||
life: "born",
|
||||
};
|
||||
index += 1;
|
||||
notify();
|
||||
|
||||
return {
|
||||
update: (toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>) =>
|
||||
update(id, toast),
|
||||
close: () => close(id),
|
||||
};
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
return {
|
||||
toast: addToast,
|
||||
update,
|
||||
close,
|
||||
};
|
||||
}
|
||||
|
||||
const ToastTemplate = ({
|
||||
id,
|
||||
globalOption,
|
||||
}: {
|
||||
id: `${number}`;
|
||||
globalOption: ToastOption;
|
||||
}) => {
|
||||
const [toast, setToast] = React.useState<(typeof toasts)[`${number}`]>(
|
||||
toasts[id],
|
||||
);
|
||||
const ref = React.useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
subscribeSingle(id)(() => {
|
||||
setToast(getSingleSnapshot(id)());
|
||||
});
|
||||
}, []);
|
||||
|
||||
const toastData = {
|
||||
...globalOption,
|
||||
...toast,
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (toastData.life === "born") {
|
||||
requestAnimationFrame(() => {
|
||||
// To make sure that the toast is rendered as "born" state
|
||||
// and then change to "normal" state
|
||||
toasts[id] = {
|
||||
...toasts[id],
|
||||
life: "normal",
|
||||
};
|
||||
notifySingle(id);
|
||||
});
|
||||
}
|
||||
if (toastData.life === "normal" && toastData.closeTimeout !== null) {
|
||||
const timeout = setTimeout(() => {
|
||||
close(id);
|
||||
}, toastData.closeTimeout);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
if (toastData.life === "dead") {
|
||||
let transitionDuration: {
|
||||
value: number;
|
||||
unit: string;
|
||||
} | null;
|
||||
if (!ref.current) {
|
||||
transitionDuration = null;
|
||||
} else if (ref.current.computedStyleMap !== undefined) {
|
||||
transitionDuration = ref.current
|
||||
.computedStyleMap()
|
||||
.get("transition-duration") as { value: number; unit: string };
|
||||
} else {
|
||||
const style = /(\d+(\.\d+)?)(.+)/.exec(
|
||||
window.getComputedStyle(ref.current).transitionDuration,
|
||||
);
|
||||
transitionDuration = style
|
||||
? {
|
||||
value: parseFloat(style[1] ?? "0"),
|
||||
unit: style[3] ?? style[2] ?? "s",
|
||||
}
|
||||
: null;
|
||||
}
|
||||
if (!transitionDuration) {
|
||||
delete toasts[id];
|
||||
notify();
|
||||
return;
|
||||
}
|
||||
const calculatedTransitionDuration =
|
||||
transitionDuration.value *
|
||||
({
|
||||
s: 1000,
|
||||
ms: 1,
|
||||
}[transitionDuration.unit] ?? 1);
|
||||
const timeout = setTimeout(() => {
|
||||
delete toasts[id];
|
||||
notify();
|
||||
}, calculatedTransitionDuration);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [toastData.life, toastData.closeTimeout, toastData.closeButton]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={toastVariant({
|
||||
status: toastData.status,
|
||||
life: toastData.life,
|
||||
})}
|
||||
ref={ref}
|
||||
>
|
||||
{toastData.closeButton && (
|
||||
<button className="absolute top-2 right-2" onClick={() => close(id)}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.2rem"
|
||||
height="1.2rem"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<div className="text-sm font-bold">{toastData.title}</div>
|
||||
<div className="text-sm">{toastData.description}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const [toasterVariant, resolveToasterVariantProps] = vcn({
|
||||
base: "fixed p-4 flex flex-col gap-4 top-0 right-0 w-full md:max-w-md md:bottom-0 md:top-auto pointer-events-none z-40",
|
||||
variants: {},
|
||||
defaults: {},
|
||||
});
|
||||
|
||||
interface ToasterProps
|
||||
extends React.ComponentPropsWithoutRef<"div">,
|
||||
VariantProps<typeof toasterVariant> {
|
||||
defaultOption?: Partial<ToastOption>;
|
||||
muteDuplicationWarning?: boolean;
|
||||
}
|
||||
|
||||
const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
|
||||
const id = useId();
|
||||
const [variantProps, otherPropsCompressed] =
|
||||
resolveToasterVariantProps(props);
|
||||
const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
|
||||
otherPropsCompressed;
|
||||
|
||||
const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
|
||||
const internalRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe(() => {
|
||||
setToastList(getSnapshot());
|
||||
});
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
const option = React.useMemo(() => {
|
||||
return {
|
||||
...defaultToastOption,
|
||||
...defaultOption,
|
||||
};
|
||||
}, [defaultOption]);
|
||||
|
||||
const toasterInstance = document.querySelector("div[data-toaster-root]");
|
||||
if (toasterInstance && id !== toasterInstance.id) {
|
||||
if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
|
||||
console.warn(
|
||||
`Multiple Toaster instances detected. Only one Toaster is allowed.`,
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{ReactDOM.createPortal(
|
||||
<div
|
||||
{...otherPropsExtracted}
|
||||
data-toaster-root
|
||||
className={toasterVariant(variantProps)}
|
||||
ref={(el) => {
|
||||
internalRef.current = el;
|
||||
if (typeof ref === "function") {
|
||||
ref(el);
|
||||
} else if (ref) {
|
||||
ref.current = el;
|
||||
}
|
||||
}}
|
||||
id={id}
|
||||
>
|
||||
{Object.entries(toastList).map(([id]) => (
|
||||
<ToastTemplate
|
||||
key={id}
|
||||
id={id as `${number}`}
|
||||
globalOption={option}
|
||||
/>
|
||||
))}
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export { Toaster, useToast };
|
||||
148
src/pswui/components/Tooltip.tsx
Normal file
148
src/pswui/components/Tooltip.tsx
Normal file
@ -0,0 +1,148 @@
|
||||
import React, { useState } from "react";
|
||||
import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
|
||||
|
||||
interface TooltipContextBody {
|
||||
position: "top" | "bottom" | "left" | "right";
|
||||
}
|
||||
|
||||
const tooltipContextInitial: TooltipContextBody = {
|
||||
position: "top",
|
||||
};
|
||||
const TooltipContext = React.createContext<
|
||||
[TooltipContextBody, React.Dispatch<React.SetStateAction<TooltipContextBody>>]
|
||||
>([
|
||||
tooltipContextInitial,
|
||||
() => {
|
||||
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
|
||||
console.warn(
|
||||
"It seems like you're using TooltipContext outside of a provider.",
|
||||
);
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
||||
const [tooltipVariant, resolveTooltipVariantProps] = vcn({
|
||||
base: "w-fit h-fit relative group/tooltip",
|
||||
variants: {
|
||||
position: {
|
||||
top: "",
|
||||
bottom: "",
|
||||
left: "",
|
||||
right: "",
|
||||
},
|
||||
controlled: {
|
||||
true: "controlled",
|
||||
false: "",
|
||||
},
|
||||
opened: {
|
||||
true: "opened",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
position: "top",
|
||||
controlled: false,
|
||||
opened: false,
|
||||
},
|
||||
});
|
||||
|
||||
interface TooltipProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof tooltipVariant>,
|
||||
AsChild {}
|
||||
|
||||
const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
|
||||
const [variantProps, rest] = resolveTooltipVariantProps(props);
|
||||
const { asChild, ...extractedRest } = rest;
|
||||
const contextState = useState<TooltipContextBody>({
|
||||
...tooltipContextInitial,
|
||||
...variantProps,
|
||||
});
|
||||
|
||||
const Comp = asChild ? Slot : "div";
|
||||
|
||||
return (
|
||||
<TooltipContext.Provider value={contextState}>
|
||||
<Comp
|
||||
ref={ref}
|
||||
className={tooltipVariant(variantProps)}
|
||||
{...extractedRest}
|
||||
/>
|
||||
</TooltipContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
const tooltipContentColors = {
|
||||
variants: {
|
||||
default:
|
||||
"bg-white dark:bg-black border-neutral-200 dark:border-neutral-700",
|
||||
error: "bg-red-400 dark:bg-red-800 border-red-500 text-white",
|
||||
success: "bg-green-400 dark:bg-green-800 border-green-500 text-white",
|
||||
warning: "bg-yellow-400 dark:bg-yellow-800 border-yellow-500",
|
||||
},
|
||||
};
|
||||
|
||||
const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
|
||||
base: `absolute py-1 px-3 rounded-md border opacity-0 transition-all
|
||||
group-[:not(.controlled):hover]/tooltip:opacity-100 group-[.opened]/tooltip:opacity-100
|
||||
select-none pointer-events-none
|
||||
group-[:not(.controlled):hover]/tooltip:select-auto group-[.opened]/tooltip:select-auto group-[:not(.controlled):hover]/tooltip:pointer-events-auto group-[.opened]/tooltip:pointer-events-auto
|
||||
group-[:not(.controlled):hover]/tooltip:[transition:transform_150ms_ease-out_var(--delay),opacity_150ms_ease-out_var(--delay),background-color_150ms_ease-in-out,color_150ms_ease-in-out,border-color_150ms_ease-in-out]`,
|
||||
variants: {
|
||||
position: {
|
||||
top: "bottom-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-[:not(.controlled):hover]/tooltip:translate-y-0 group-[.opened]/tooltip:translate-y-0 translate-y-[10px]",
|
||||
bottom:
|
||||
"top-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-[:not(.controlled):hover]/tooltip:translate-y-0 group-[.opened]/tooltip:translate-y-0 translate-y-[-10px]",
|
||||
left: "right-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-[:not(.controlled):hover]/tooltip:translate-x-0 group-[.opened]/tooltip:translate-x-0 translate-x-[10px]",
|
||||
right:
|
||||
"left-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-[:not(.controlled):hover]/tooltip:translate-x-0 group-[.opened]/tooltip:translate-x-0 translate-x-[-10px]",
|
||||
},
|
||||
delay: {
|
||||
none: "[--delay:0ms]",
|
||||
early: "[--delay:150ms]",
|
||||
normal: "[--delay:500ms]",
|
||||
late: "[--delay:1000ms]",
|
||||
},
|
||||
offset: {
|
||||
sm: "[--tooltip-offset:2px]",
|
||||
md: "[--tooltip-offset:4px]",
|
||||
lg: "[--tooltip-offset:8px]",
|
||||
},
|
||||
status: {
|
||||
normal: tooltipContentColors.variants.default,
|
||||
error: tooltipContentColors.variants.error,
|
||||
success: tooltipContentColors.variants.success,
|
||||
warning: tooltipContentColors.variants.warning,
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
position: "top",
|
||||
offset: "md",
|
||||
delay: "normal",
|
||||
status: "normal",
|
||||
},
|
||||
});
|
||||
|
||||
interface TooltipContentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
Omit<VariantProps<typeof tooltipContentVariant>, "position"> {}
|
||||
|
||||
const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
|
||||
(props, ref) => {
|
||||
const [variantProps, rest] = resolveTooltipContentVariantProps(props);
|
||||
const [contextState] = React.useContext(TooltipContext);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={tooltipContentVariant({
|
||||
...variantProps,
|
||||
position: contextState.position,
|
||||
})}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export { Tooltip, TooltipContent };
|
||||
353
src/pswui/lib.tsx
Normal file
353
src/pswui/lib.tsx
Normal file
@ -0,0 +1,353 @@
|
||||
import React from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
/**
|
||||
* Takes a string, and returns boolean if it is "true" or "false".
|
||||
* Otherwise, returns the string.
|
||||
*
|
||||
* @example
|
||||
* ```
|
||||
* type BooleanString = BooleanString<"true" | "false" | "other">
|
||||
* // BooleanString = true | false | "other" = boolean | "other"
|
||||
* ```
|
||||
*/
|
||||
type BooleanString<T extends string> = T extends "true"
|
||||
? true
|
||||
: T extends "false"
|
||||
? false
|
||||
: T;
|
||||
|
||||
/**
|
||||
* A type that represents a variant object.
|
||||
*
|
||||
* @example
|
||||
* ```
|
||||
* const variant: VariantType = {
|
||||
* opened: {
|
||||
* true: "opacity-100",
|
||||
* false: "opacity-0",
|
||||
* }
|
||||
* size: {
|
||||
* sm: "small",
|
||||
* md: "medium",
|
||||
* lg: "large",
|
||||
* },
|
||||
* color: {
|
||||
* red: "#ff0000",
|
||||
* green: "#00ff00",
|
||||
* blue: "#0000ff",
|
||||
* },
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
type VariantType = Record<string, Record<string, string>>;
|
||||
|
||||
/**
|
||||
* Takes VariantType, and returns a type that represents the variant object.
|
||||
*
|
||||
* @example
|
||||
* ```
|
||||
* const kvs: VariantKV<VariantType> = {
|
||||
* opened: true // BooleanString<"true" | "false"> = boolean;
|
||||
* size: "sm" // BooleanString<"sm" | "md" | "lg"> = "sm" | "md" | "lg";
|
||||
* color: "red" // BooleanString<"red" | "green" | "blue"> = "red" | "green" | "blue";
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
type VariantKV<V extends VariantType> = {
|
||||
[VariantKey in keyof V]: BooleanString<keyof V[VariantKey] & string>;
|
||||
};
|
||||
|
||||
/**
|
||||
* Takes VariantType, and returns a type that represents the preset object.
|
||||
*
|
||||
* @example
|
||||
* ```
|
||||
* const presets: PresetType<VariantType> = {
|
||||
* preset1: {
|
||||
* opened: true,
|
||||
* size: "sm",
|
||||
* color: "red",
|
||||
* },
|
||||
* preset2: {
|
||||
* opened: false,
|
||||
* size: "md",
|
||||
* color: "green",
|
||||
* className: "transition-opacity",
|
||||
* },
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
type PresetType<V extends VariantType> = {
|
||||
[PresetName: string]: Partial<VariantKV<V>> & { className?: string };
|
||||
};
|
||||
|
||||
/**
|
||||
* A utility function to provide variants and presets to the component
|
||||
*
|
||||
* @param param - Variant Configuration
|
||||
* @returns function (variantProps) -> class name,
|
||||
* @returns function (anyProps) -> [variantProps, otherProps]
|
||||
*/
|
||||
export function vcn<V extends VariantType>(param: {
|
||||
/**
|
||||
* First definition: without presets
|
||||
*/
|
||||
base?: string | undefined;
|
||||
variants: V;
|
||||
defaults: VariantKV<V>;
|
||||
presets?: undefined;
|
||||
}): [
|
||||
/**
|
||||
* Variant Props -> Class Name
|
||||
*/
|
||||
(
|
||||
variantProps: Partial<VariantKV<V>> & {
|
||||
className?: string;
|
||||
},
|
||||
) => string,
|
||||
/**
|
||||
* Any Props -> Variant Props, Other Props
|
||||
*/
|
||||
<AnyPropBeforeResolve extends Record<string, any>>(
|
||||
anyProps: AnyPropBeforeResolve,
|
||||
) => [
|
||||
Partial<VariantKV<V>> & {
|
||||
className?: string;
|
||||
},
|
||||
Omit<AnyPropBeforeResolve, keyof Partial<VariantKV<V>> | "className">,
|
||||
],
|
||||
];
|
||||
export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
|
||||
/**
|
||||
* Second definition: with presets
|
||||
*/
|
||||
base?: string | undefined;
|
||||
variants: V /* VariantType */;
|
||||
defaults: VariantKV<V>;
|
||||
presets: P;
|
||||
}): [
|
||||
/**
|
||||
* Variant Props -> Class Name
|
||||
*/
|
||||
(
|
||||
variantProps: Partial<VariantKV<V>> & {
|
||||
className?: string;
|
||||
preset?: keyof P;
|
||||
},
|
||||
) => string,
|
||||
/**
|
||||
* Any Props -> Variant Props, Other Props
|
||||
*/
|
||||
<AnyPropBeforeResolve extends Record<string, any>>(
|
||||
anyProps: AnyPropBeforeResolve,
|
||||
) => [
|
||||
Partial<VariantKV<V>> & {
|
||||
className?: string;
|
||||
preset?: keyof P;
|
||||
},
|
||||
Omit<
|
||||
AnyPropBeforeResolve,
|
||||
keyof Partial<VariantKV<V>> | "preset" | "className"
|
||||
>,
|
||||
],
|
||||
];
|
||||
export function vcn<
|
||||
V extends VariantType,
|
||||
P extends PresetType<V> | undefined,
|
||||
>({
|
||||
base,
|
||||
variants,
|
||||
defaults,
|
||||
presets,
|
||||
}: {
|
||||
base?: string | undefined;
|
||||
variants: V;
|
||||
defaults: VariantKV<V>;
|
||||
presets?: P;
|
||||
}) {
|
||||
return [
|
||||
/**
|
||||
* Takes any props (including className), and returns the class name.
|
||||
* If there is no variant specified in props, then it will fallback to preset, and then default.
|
||||
*
|
||||
* @param variantProps - The variant props including className.
|
||||
* @returns The class name.
|
||||
*/
|
||||
(
|
||||
variantProps: { className?: string; preset?: keyof P } & Partial<
|
||||
VariantKV<V>
|
||||
>,
|
||||
) => {
|
||||
const { className, preset, ...otherVariantProps } = variantProps;
|
||||
|
||||
const currentPreset: P[keyof P] | null =
|
||||
presets && preset ? (presets as NonNullable<P>)[preset] ?? null : null;
|
||||
const presetVariantKeys: (keyof V)[] = Object.keys(currentPreset ?? {});
|
||||
return twMerge(
|
||||
base,
|
||||
...(
|
||||
Object.entries(defaults) as [keyof V, keyof V[keyof V] & string][]
|
||||
).map<string>(([variantKey, defaultValue]) => {
|
||||
// Omit<Partial<VariantKV<V>> & { className; preset; }, className | preset> = Partial<VariantKV<V>> (safe to cast)
|
||||
// Partial<VariantKV<V>>[keyof V] => { [k in keyof V]?: BooleanString<keyof V[keyof V] & string> } => BooleanString<keyof V[keyof V]>
|
||||
|
||||
const directVariantValue: (keyof V[keyof V] & string) | undefined = (
|
||||
otherVariantProps as unknown as Partial<VariantKV<V>>
|
||||
)[variantKey]?.toString?.(); // BooleanString<> -> string (safe to index V[keyof V])
|
||||
|
||||
const currentPresetVariantValue:
|
||||
| (keyof V[keyof V] & string)
|
||||
| undefined =
|
||||
!!currentPreset && presetVariantKeys.includes(variantKey)
|
||||
? (currentPreset as Partial<VariantKV<V>>)[
|
||||
variantKey
|
||||
]?.toString?.()
|
||||
: undefined;
|
||||
|
||||
const variantValue: keyof V[keyof V] & string =
|
||||
directVariantValue ?? currentPresetVariantValue ?? defaultValue;
|
||||
return variants[variantKey][variantValue];
|
||||
}),
|
||||
(
|
||||
currentPreset as Partial<VariantKV<V>> | null
|
||||
)?.className?.toString?.(), // preset's classname comes after user's variant props? huh..
|
||||
className,
|
||||
);
|
||||
},
|
||||
/**
|
||||
* Takes any props, parse variant props and other props.
|
||||
* If `options.excludeA` is true, then it will parse `A` as "other" props.
|
||||
* Otherwise, it will parse A as variant props.
|
||||
*
|
||||
* @param anyProps - Any props that have passed to the component.
|
||||
* @returns [variantProps, otherProps]
|
||||
*/
|
||||
<AnyPropBeforeResolve extends Record<string, any>>(
|
||||
anyProps: AnyPropBeforeResolve,
|
||||
) => {
|
||||
const variantKeys = Object.keys(variants) as (keyof V)[];
|
||||
|
||||
return Object.entries(anyProps).reduce(
|
||||
([variantProps, otherProps], [key, value]) => {
|
||||
if (
|
||||
variantKeys.includes(key) ||
|
||||
key === "className" ||
|
||||
key === "preset"
|
||||
) {
|
||||
return [{ ...variantProps, [key]: value }, otherProps];
|
||||
}
|
||||
return [variantProps, { ...otherProps, [key]: value }];
|
||||
},
|
||||
[{}, {}],
|
||||
) as [
|
||||
Partial<VariantKV<V>> & {
|
||||
className?: string;
|
||||
preset?: keyof P;
|
||||
},
|
||||
Omit<
|
||||
typeof anyProps,
|
||||
keyof Partial<VariantKV<V>> | "preset" | "className"
|
||||
>,
|
||||
];
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the props type from return value of `vcn` function.
|
||||
*
|
||||
* @example
|
||||
* ```
|
||||
* const [variantProps, otherProps] = vcn({ ... })
|
||||
* interface Props
|
||||
* extends VariantProps<typeof variantProps>, OtherProps { ... }
|
||||
*
|
||||
* function Component(props: Props) {
|
||||
* ...
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export type VariantProps<F extends (props: any) => string> = F extends (
|
||||
props: infer P,
|
||||
) => string
|
||||
? P
|
||||
: never;
|
||||
|
||||
/**
|
||||
* Merges the react props.
|
||||
* Basically childProps will override parentProps.
|
||||
* But if it is a event handler, style, or className, it will be merged.
|
||||
*
|
||||
* @param parentProps - The parent props.
|
||||
* @param childProps - The child props.
|
||||
* @returns The merged props.
|
||||
*/
|
||||
function mergeReactProps(
|
||||
parentProps: Record<string, any>,
|
||||
childProps: Record<string, any>,
|
||||
) {
|
||||
const overrideProps = { ...childProps };
|
||||
|
||||
for (const propName in childProps) {
|
||||
const parentPropValue = parentProps[propName];
|
||||
const childPropValue = childProps[propName];
|
||||
|
||||
const isHandler = /^on[A-Z]/.test(propName);
|
||||
if (isHandler) {
|
||||
if (childPropValue && parentPropValue) {
|
||||
overrideProps[propName] = (...args: unknown[]) => {
|
||||
childPropValue?.(...args);
|
||||
parentPropValue?.(...args);
|
||||
};
|
||||
} else if (parentPropValue) {
|
||||
overrideProps[propName] = parentPropValue;
|
||||
}
|
||||
} else if (propName === "style") {
|
||||
overrideProps[propName] = { ...parentPropValue, ...childPropValue };
|
||||
} else if (propName === "className") {
|
||||
overrideProps[propName] = twMerge(parentPropValue, childPropValue);
|
||||
}
|
||||
}
|
||||
|
||||
return { ...parentProps, ...overrideProps };
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes an array of refs, and returns a single ref.
|
||||
*
|
||||
* @param refs - The array of refs.
|
||||
* @returns The single ref.
|
||||
*/
|
||||
function combinedRef<I>(refs: React.Ref<I | null>[]) {
|
||||
return (instance: I | null) =>
|
||||
refs.forEach((ref) => {
|
||||
if (ref instanceof Function) {
|
||||
ref(instance);
|
||||
} else if (!!ref) {
|
||||
(ref as React.MutableRefObject<I | null>).current = instance;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
interface SlotProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
export const Slot = React.forwardRef<any, SlotProps & Record<string, any>>(
|
||||
(props, ref) => {
|
||||
const { children, ...slotProps } = props;
|
||||
const { asChild: _1, ...safeSlotProps } = slotProps;
|
||||
if (!React.isValidElement(children)) {
|
||||
console.warn(`given children "${children}" is not valid for asChild`);
|
||||
return null;
|
||||
}
|
||||
return React.cloneElement(children, {
|
||||
...mergeReactProps(safeSlotProps, children.props),
|
||||
ref: combinedRef([ref, (children as any).ref]),
|
||||
} as any);
|
||||
},
|
||||
);
|
||||
|
||||
export interface AsChild {
|
||||
asChild?: boolean;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user