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

feat(pswui): update component and library to latest

Browse Source
This commit is contained in:
p-sw 2024-07-12 02:04:54 +09:00
parent b76014db0b
commit f92be39455
14 changed files with 210 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pswui/components/Button.tsx
View File

@ -111,21 +111,20 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] = resolveVariants(props);
const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
const { asChild, type, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "button";
const compProps = {
...otherPropsExtracted,
className: buttonVariants(variantProps),
};
return (
<Comp
ref={ref}
{...compProps}
type={type ?? "button"}
className={buttonVariants(variantProps)}
{...otherPropsExtracted}
/>
);
},
);
Button.displayName = "Button";
export { Button };

1
src/pswui/components/Checkbox.tsx
View File

@ -110,5 +110,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
);
},
);
Checkbox.displayName = "Checkbox";
export { Checkbox };

49
src/pswui/components/Dialog/Component.tsx
View File

@ -1,5 +1,10 @@
import { Slot, type VariantProps, vcn } from "@pswui-lib";
import React, { useState } from "react";
import {
ServerSideDocumentFallback,
Slot,
type VariantProps,
vcn,
} from "@pswui-lib";
import React, { type ReactNode, useState } from "react";
import ReactDOM from "react-dom";
import {
@ -100,8 +105,9 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
});
const { children, closeOnClick, onClick, ...otherPropsExtracted } =
otherPropsCompressed;
return (
<>
<ServerSideDocumentFallback>
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
@ -125,10 +131,11 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
</div>,
document.body,
)}
</>
</ServerSideDocumentFallback>
);
},
);
DialogOverlay.displayName = "DialogOverlay";
/**
* =========================
@ -204,6 +211,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
);
},
);
DialogContent.displayName = "DialogContent";
/**
* =========================
@ -268,6 +276,8 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
},
);
DialogHeader.displayName = "DialogHeader";
/**
* =========================
* DialogTitle / DialogSubtitle
@ -342,6 +352,7 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
);
},
);
DialogTitle.displayName = "DialogTitle";
const DialogSubtitle = React.forwardRef<
HTMLHeadingElement,
@ -360,6 +371,7 @@ const DialogSubtitle = React.forwardRef<
</h2>
);
});
DialogSubtitle.displayName = "DialogSubtitle";
/**
* =========================
@ -401,6 +413,34 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
);
},
);
DialogFooter.displayName = "DialogFooter";
interface DialogControllers {
context: IDialogContext;
setContext: React.Dispatch<React.SetStateAction<IDialogContext>>;
close: () => void;
}
interface DialogControllerProps {
children: (controllers: DialogControllers) => ReactNode;
}
const DialogController = (props: DialogControllerProps) => {
return (
<DialogContext.Consumer>
{([context, setContext]) =>
props.children({
context,
setContext,
close() {
setContext((p) => ({ ...p, opened: false }));
},
})
}
</DialogContext.Consumer>
);
};
export {
DialogRoot,
@ -412,4 +452,5 @@ export {
DialogTitle,
DialogSubtitle,
DialogFooter,
DialogController,
};

52
src/pswui/components/Drawer.tsx
View File

@ -1,4 +1,10 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import {
type AsChild,
ServerSideDocumentFallback,
Slot,
type VariantProps,
vcn,
} from "@pswui-lib";
import React, {
type ComponentPropsWithoutRef,
type TouchEvent as ReactTouchEvent,
@ -119,25 +125,30 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
: 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,
return (
<ServerSideDocumentFallback>
{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,
)}
</ServerSideDocumentFallback>
);
},
);
DrawerOverlay.displayName = "DrawerOverlay";
const drawerContentColors = {
background: "bg-white dark:bg-black",
@ -309,7 +320,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
...variantProps,
opened: true,
className: dragState.isDragging
? "transition-[width_0ms]"
? "transition-[width] duration-0"
: variantProps.className,
})}
style={
@ -374,6 +385,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
);
},
);
DrawerContent.displayName = "DrawerContent";
const DrawerClose = forwardRef<
HTMLButtonElement,
@ -388,6 +400,7 @@ const DrawerClose = forwardRef<
/>
);
});
DrawerClose.displayName = "DrawerClose";
const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
base: "flex flex-col gap-2",
@ -417,6 +430,7 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
);
},
);
DrawerHeader.displayName = "DrawerHeader";
const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
base: "flex-grow",
@ -444,6 +458,7 @@ const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
/>
);
});
DrawerBody.displayName = "DrawerBody";
const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
base: "flex flex-row justify-end gap-2",
@ -473,6 +488,7 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
);
},
);
DrawerFooter.displayName = "DrawerFooter";
export {
DrawerRoot,

0
src/pswui/components/Form.tsx Normal file
View File

15
src/pswui/components/Input.tsx
View File

@ -1,4 +1,4 @@
import { type VariantProps, vcn } from "@pswui-lib";
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import React from "react";
const inputColors = {
@ -42,7 +42,8 @@ const [inputVariant, resolveInputVariantProps] = vcn({
interface InputFrameProps
extends VariantProps<typeof inputVariant>,
React.ComponentPropsWithoutRef<"label"> {
React.ComponentPropsWithoutRef<"label">,
AsChild {
children?: React.ReactNode;
}
@ -50,19 +51,22 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveInputVariantProps(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed;
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "label";
return (
<label
<Comp
ref={ref}
className={`group/input-frame ${inputVariant(variantProps)}`}
{...otherPropsExtracted}
>
{children}
</label>
</Comp>
);
},
);
InputFrame.displayName = "InputFrame";
interface InputProps
extends VariantProps<typeof inputVariant>,
@ -113,5 +117,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
/>
);
});
Input.displayName = "Input";
export { InputFrame, Input };

1
src/pswui/components/Label.tsx
View File

@ -29,5 +29,6 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
/>
);
});
Label.displayName = "Label";
export { Label };

13
src/pswui/components/Popover.tsx
View File

@ -65,7 +65,7 @@ const popoverColors = {
};
const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full z-10 ${popoverColors.background} ${popoverColors.border}`,
base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full ${popoverColors.background} ${popoverColors.border}`,
variants: {
direction: {
row: "",
@ -200,7 +200,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolvePopoverContentVariantProps(props);
const { children, ...otherPropsExtracted } = otherPropsCompressed;
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
const [state, setState] = useContext(PopoverContext);
const internalRef = useRef<HTMLDivElement | null>(null);
@ -221,14 +221,16 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
};
}, [state.controlled, setState]);
const Comp = asChild ? Slot : "div";
return (
<div
<Comp
{...otherPropsExtracted}
className={popoverContentVariant({
...variantProps,
opened: state.opened,
})}
ref={(el) => {
ref={(el: HTMLDivElement) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
@ -238,9 +240,10 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
}}
>
{children}
</div>
</Comp>
);
},
);
PopoverContent.displayName = "PopoverContent";
export { Popover, PopoverTrigger, PopoverContent };

1
src/pswui/components/Switch.tsx
View File

@ -80,5 +80,6 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
</label>
);
});
Switch.displayName = "Switch";
export { Switch };

119
src/pswui/components/Toast/Component.tsx
View File

@ -1,4 +1,4 @@
import { type VariantProps, vcn } from "@pswui-lib";
import { type VariantProps, vcn, withServerSideDocument } from "@pswui-lib";
import React, { useEffect, useId, useRef } from "react";
import ReactDOM from "react-dom";
@ -145,68 +145,71 @@ interface ToasterProps
muteDuplicationWarning?: boolean;
}
const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
const id = useId();
const [variantProps, otherPropsCompressed] =
resolveToasterVariantProps(props);
const { defaultOption, muteDuplicationWarning, ...otherPropsExtracted } =
otherPropsCompressed;
const Toaster = withServerSideDocument(
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);
const [toastList, setToastList] = React.useState<typeof toasts>(toasts);
const internalRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
return subscribe(() => {
setToastList(getSnapshot());
});
}, []);
useEffect(() => {
return subscribe(() => {
setToastList(getSnapshot());
});
}, []);
const option = React.useMemo(() => {
return {
...defaultToastOption,
...defaultOption,
};
}, [defaultOption]);
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.",
);
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 null;
}
return (
<>
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
data-toaster-root={true}
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,
)}
</>
);
});
return (
<>
{ReactDOM.createPortal(
<div
{...otherPropsExtracted}
data-toaster-root={true}
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,
)}
</>
);
}),
);
Toaster.displayName = "Toaster";
export { Toaster };

10
src/pswui/components/Tooltip.tsx
View File

@ -71,6 +71,7 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
</TooltipContext.Provider>
);
});
Tooltip.displayName = "Tooltip";
const tooltipContentColors = {
variants: {
@ -83,10 +84,10 @@ const tooltipContentColors = {
};
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
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: {
@ -144,5 +145,6 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
);
},
);
TooltipContent.displayName = "TooltipContent";
export { Tooltip, TooltipContent };

2
src/pswui/lib/index.ts
View File

@ -1,2 +1,4 @@
export * from "./vcn";
export * from "./Slot";
export * from "./ssrFallback";
export * from "./withSSD";

20
src/pswui/lib/ssrFallback.tsx Normal file
View File

@ -0,0 +1,20 @@
import { type ReactNode, useEffect, useState } from "react";
/**
* This component allows components to use `document` as like they're always in the client side.
* Return null if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
*/
function ServerSideDocumentFallback({ children }: { children: ReactNode }) {
const [initialRender, setInitialRender] = useState<boolean>(true);
useEffect(() => {
setInitialRender(false);
}, []);
if (typeof document === "undefined" /* server side */ || initialRender)
return null;
return children;
}
export { ServerSideDocumentFallback };

16
src/pswui/lib/withSSD.tsx Normal file
View File

@ -0,0 +1,16 @@
import type { ComponentType } from "react";
import { ServerSideDocumentFallback } from "./ssrFallback";
function withServerSideDocument<P extends {}>(
Component: ComponentType<P>,
): ComponentType<P> {
return (props) => {
return (
<ServerSideDocumentFallback>
<Component {...props} />
</ServerSideDocumentFallback>
);
};
}
export { withServerSideDocument };