From 4421adfe7d9025420a03ea46a755f876fd5706a1 Mon Sep 17 00:00:00 2001 From: p-sw Date: Tue, 11 Jun 2024 12:56:55 +0900 Subject: [PATCH] refactor(components): make shared version and update import in components --- packages/react/components/Button.tsx | 4 +-- packages/react/components/Checkbox.tsx | 4 +-- packages/react/components/Dialog.tsx | 16 ++++++------ packages/react/components/Drawer.tsx | 25 ++++++++++--------- packages/react/components/Input.tsx | 4 +-- packages/react/components/Label.tsx | 2 +- packages/react/components/Popover.tsx | 6 ++--- packages/react/components/Switch.tsx | 2 +- packages/react/components/Tabs.tsx | 8 +++--- packages/react/components/Toast.tsx | 14 +++++------ packages/react/components/Tooltip.tsx | 6 ++--- .../{shared.tsx => lib/shared@1.0.0.tsx} | 0 12 files changed, 46 insertions(+), 45 deletions(-) rename packages/react/{shared.tsx => lib/shared@1.0.0.tsx} (100%) diff --git a/packages/react/components/Button.tsx b/packages/react/components/Button.tsx index 86cbb9c..f30149a 100644 --- a/packages/react/components/Button.tsx +++ b/packages/react/components/Button.tsx @@ -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( }; return ; - } + }, ); export { Button }; diff --git a/packages/react/components/Checkbox.tsx b/packages/react/components/Checkbox.tsx index c9ae847..c334271 100644 --- a/packages/react/components/Checkbox.tsx +++ b/packages/react/components/Checkbox.tsx @@ -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( ); - } + }, ); export { Checkbox }; diff --git a/packages/react/components/Dialog.tsx b/packages/react/components/Dialog.tsx index 29ac1fb..9dab755 100644 --- a/packages/react/components/Dialog.tsx +++ b/packages/react/components/Dialog.tsx @@ -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( > {children} , - document.body + document.body, )} ); - } + }, ); /** @@ -210,7 +210,7 @@ const DialogContent = React.forwardRef( {children} ); - } + }, ); /** @@ -273,7 +273,7 @@ const DialogHeader = React.forwardRef( {children} ); - } + }, ); /** @@ -348,7 +348,7 @@ const DialogTitle = React.forwardRef( {children} ); - } + }, ); const DialogSubtitle = React.forwardRef< @@ -407,7 +407,7 @@ const DialogFooter = React.forwardRef( {children} ); - } + }, ); export { diff --git a/packages/react/components/Drawer.tsx b/packages/react/components/Drawer.tsx index cec3237..217927e 100644 --- a/packages/react/components/Drawer.tsx +++ b/packages/react/components/Drawer.tsx @@ -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( 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( }} ref={ref} />, - document.body + document.body, ); - } + }, ); const drawerContentColors = { @@ -250,8 +250,8 @@ const DrawerContent = forwardRef( ? 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( 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( /> ); - } + }, ); const DrawerClose = forwardRef< @@ -410,7 +411,7 @@ const DrawerHeader = forwardRef( ref={ref} /> ); - } + }, ); const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({ @@ -460,7 +461,7 @@ const DrawerFooter = forwardRef( ref={ref} /> ); - } + }, ); export { diff --git a/packages/react/components/Input.tsx b/packages/react/components/Input.tsx index 73a6a04..ac58a9e 100644 --- a/packages/react/components/Input.tsx +++ b/packages/react/components/Input.tsx @@ -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( {children} ); - } + }, ); interface InputProps diff --git a/packages/react/components/Label.tsx b/packages/react/components/Label.tsx index ab6ee42..da26e4c 100644 --- a/packages/react/components/Label.tsx +++ b/packages/react/components/Label.tsx @@ -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", diff --git a/packages/react/components/Popover.tsx b/packages/react/components/Popover.tsx index db42aab..5652a8d 100644 --- a/packages/react/components/Popover.tsx +++ b/packages/react/components/Popover.tsx @@ -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( {children} ); - } + }, ); export { Popover, PopoverTrigger, PopoverContent }; diff --git a/packages/react/components/Switch.tsx b/packages/react/components/Switch.tsx index a95a522..e4be78f 100644 --- a/packages/react/components/Switch.tsx +++ b/packages/react/components/Switch.tsx @@ -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: { diff --git a/packages/react/components/Tabs.tsx b/packages/react/components/Tabs.tsx index a54f2fd..cddf192 100644 --- a/packages/react/components/Tabs.tsx +++ b/packages/react/components/Tabs.tsx @@ -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; diff --git a/packages/react/components/Toast.tsx b/packages/react/components/Toast.tsx index 1659f4f..dd9a2b9 100644 --- a/packages/react/components/Toast.tsx +++ b/packages/react/components/Toast.tsx @@ -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 & Partial> + toast: Partial & Partial>, ) { 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(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((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((props, ref) => { /> ))} , - document.body + document.body, )} ); diff --git a/packages/react/components/Tooltip.tsx b/packages/react/components/Tooltip.tsx index ff6f4da..a50c773 100644 --- a/packages/react/components/Tooltip.tsx +++ b/packages/react/components/Tooltip.tsx @@ -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( {...rest} /> ); - } + }, ); export { Tooltip, TooltipContent }; diff --git a/packages/react/shared.tsx b/packages/react/lib/shared@1.0.0.tsx similarity index 100% rename from packages/react/shared.tsx rename to packages/react/lib/shared@1.0.0.tsx