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

refactor(components): make shared version and update import in components

Browse Source
This commit is contained in:
p-sw 2024-06-11 12:56:55 +09:00
parent b962b02690
commit 4421adfe7d
12 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/components/Button.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { vcn, VariantProps, Slot, AsChild } from "../shared";
import { vcn, VariantProps, Slot, AsChild } from "../lib/shared@1.0.0";
const colors = {
outline: {
@ -118,7 +118,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
};
return <Comp ref={ref} {...compProps} />;
}
},
);
export { Button };

4
packages/react/components/Checkbox.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { VariantProps, vcn } from "../shared";
import { VariantProps, vcn } from "../lib/shared@1.0.0";
const checkboxColors = {
background: {
@ -107,7 +107,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
</label>
</>
);
}
},
);
export { Checkbox };

16
packages/react/components/Dialog.tsx
View File

@ -1,5 +1,5 @@
import React, { Dispatch, SetStateAction, useState } from "react";
import { Slot, VariantProps, vcn } from "../shared";
import { Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
import ReactDOM from "react-dom";
/**
@ -20,7 +20,7 @@ const DialogContext = React.createContext<
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using DialogContext outside of a provider."
"It seems like you're using DialogContext outside of a provider.",
);
}
},
@ -135,11 +135,11 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
>
{children}
</div>,
document.body
document.body,
)}
</>
);
}
},
);
/**
@ -210,7 +210,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContent>(
{children}
</div>
);
}
},
);
/**
@ -273,7 +273,7 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
{children}
</header>
);
}
},
);
/**
@ -348,7 +348,7 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
{children}
</h1>
);
}
},
);
const DialogSubtitle = React.forwardRef<
@ -407,7 +407,7 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
{children}
</div>
);
}
},
);
export {

25
packages/react/components/Drawer.tsx
View File

@ -7,7 +7,7 @@ import React, {
useRef,
useState,
} from "react";
import { AsChild, Slot, VariantProps, vcn } from "../shared";
import { AsChild, Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
import { createPortal } from "react-dom";
interface IDrawerContext {
@ -31,7 +31,7 @@ const DrawerContext = React.createContext<
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using DrawerContext outside of a provider."
"It seems like you're using DrawerContext outside of a provider.",
);
}
},
@ -114,8 +114,8 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
state.isDragging
? state.movePercentage + DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
: state.opened
? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
: 1
? DRAWER_OVERLAY_BACKDROP_FILTER_BRIGHTNESS
: 1
})`;
return createPortal(
@ -133,9 +133,9 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
}}
ref={ref}
/>,
document.body
document.body,
);
}
},
);
const drawerContentColors = {
@ -250,8 +250,8 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
? e.movementY
: e.touches[0].pageY - prev.prevTouch.y
: "movementX" in e
? e.movementX
: e.touches[0].pageX - prev.prevTouch.x;
? e.movementX
: e.touches[0].pageX - prev.prevTouch.x;
if (
(["top", "left"].includes(position) &&
dragState.delta >= 0 &&
@ -261,7 +261,8 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
movement < 0)
) {
movement =
movement / Math.abs(dragState.delta === 0 ? 1 : dragState.delta);
movement /
Math.abs(dragState.delta === 0 ? 1 : dragState.delta);
}
return {
...prev,
@ -370,7 +371,7 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
/>
</div>
);
}
},
);
const DrawerClose = forwardRef<
@ -410,7 +411,7 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
ref={ref}
/>
);
}
},
);
const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
@ -460,7 +461,7 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
ref={ref}
/>
);
}
},
);
export {

4
packages/react/components/Input.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { VariantProps, vcn } from "../shared";
import { VariantProps, vcn } from "../lib/shared@1.0.0";
const inputColors = {
background: {
@ -61,7 +61,7 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
{children}
</label>
);
}
},
);
interface InputProps

2
packages/react/components/Label.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { VariantProps, vcn } from "../shared";
import { VariantProps, vcn } from "../lib/shared@1.0.0";
const [labelVariant, resolveLabelVariantProps] = vcn({
base: "has-[input[disabled]]:brightness-75 has-[input[disabled]]:cursor-not-allowed has-[input:invalid]:text-red-500",

6
packages/react/components/Popover.tsx
View File

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useRef } from "react";
import { AsChild, Slot, VariantProps, vcn } from "../shared";
import { AsChild, Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
interface IPopoverContext {
opened: boolean;
@ -14,7 +14,7 @@ const PopoverContext = React.createContext<
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using PopoverContext outside of a provider."
"It seems like you're using PopoverContext outside of a provider.",
);
}
},
@ -133,7 +133,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
{children}
</div>
);
}
},
);
export { Popover, PopoverTrigger, PopoverContent };

2
packages/react/components/Switch.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { VariantProps, vcn } from "../shared";
import { VariantProps, vcn } from "../lib/shared@1.0.0";
const switchColors = {
background: {

8
packages/react/components/Tabs.tsx
View File

@ -1,4 +1,4 @@
import { AsChild, Slot, VariantProps, vcn } from "../shared";
import { AsChild, Slot, VariantProps, vcn } from "../lib/shared@1.0.0";
import React from "react";
interface Tab {
@ -20,7 +20,7 @@ const TabContext = React.createContext<
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using TabContext outside of provider."
"It seems like you're using TabContext outside of provider.",
);
}
},
@ -60,7 +60,7 @@ const useTabState = () => {
console.error(
`Invalid index passed to setActiveTab: ${param}, valid indices are 0 to ${
state.tabs.length - 1
}`
}`,
);
}
return;
@ -79,7 +79,7 @@ const useTabState = () => {
console.error(
`Invalid name passed to setActiveTab: ${param}, valid names are ${state.tabs
.map((tab) => tab.name)
.join(", ")}`
.join(", ")}`,
);
}
return;

14
packages/react/components/Toast.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useId, useRef } from "react";
import ReactDOM from "react-dom";
import { VariantProps, vcn } from "../shared";
import { VariantProps, vcn } from "../lib/shared@1.0.0";
interface ToastOption {
closeButton: boolean;
@ -79,7 +79,7 @@ function subscribeSingle(id: `${number}`) {
toasts[id].subscribers.push(callback);
return () => {
toasts[id].subscribers = toasts[id].subscribers.filter(
(subscriber) => subscriber !== callback
(subscriber) => subscriber !== callback,
);
};
};
@ -111,7 +111,7 @@ function close(id: `${number}`) {
function update(
id: `${number}`,
toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>
toast: Partial<Omit<ToastBody, "life"> & Partial<ToastOption>>,
) {
toasts[id] = {
...toasts[id],
@ -153,7 +153,7 @@ const ToastTemplate = ({
globalOption: ToastOption;
}) => {
const [toast, setToast] = React.useState<(typeof toasts)[`${number}`]>(
toasts[id]
toasts[id],
);
const ref = React.useRef<HTMLDivElement | null>(null);
@ -199,7 +199,7 @@ const ToastTemplate = ({
.get("transition-duration") as { value: number; unit: string };
} else {
const style = /(\d+(\.\d+)?)(.+)/.exec(
window.getComputedStyle(ref.current).transitionDuration
window.getComputedStyle(ref.current).transitionDuration,
);
transitionDuration = style
? {
@ -297,7 +297,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
if (toasterInstance && id !== toasterInstance.id) {
if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
console.warn(
`Multiple Toaster instances detected. Only one Toaster is allowed.`
`Multiple Toaster instances detected. Only one Toaster is allowed.`,
);
}
return null;
@ -328,7 +328,7 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
/>
))}
</div>,
document.body
document.body,
)}
</>
);

6
packages/react/components/Tooltip.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { VariantProps, vcn } from "../shared";
import { VariantProps, vcn } from "../lib/shared@1.0.0";
interface TooltipContextBody {
position: "top" | "bottom" | "left" | "right";
@ -15,7 +15,7 @@ const TooltipContext = React.createContext<
() => {
if (process.env.NODE_ENV && process.env.NODE_ENV === "development") {
console.warn(
"It seems like you're using TooltipContext outside of a provider."
"It seems like you're using TooltipContext outside of a provider.",
);
}
},
@ -101,7 +101,7 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
{...rest}
/>
);
}
},
);
export { Tooltip, TooltipContent };

0
packages/react/shared.tsx → packages/react/lib/shared@1.0.0.tsx
View File