goodchuck-utils 1.6.0 → 1.7.1

package/dist/components/dev/FormDevTools/FormDevTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA0B3D,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBA0OnH"}
+{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBA2MnH"}

package/dist/components/dev/FormDevTools/FormDevTools.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
-import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, tabContainerStyle, getTabStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
+import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
 /**
  * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
  * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
@@ -56,9 +56,8 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
  */
 export default function FormDevTools({ formState, values, position = 'bottom-left', title = 'Form DevTools' }) {
     const [isOpen, setIsOpen] = useState(false);
-    const [activeTab, setActiveTab] = useState('values');
     const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
-    const [panelSize, setPanelSize] = useState({ width: 500, height: 600 });
+    const [panelSize, setPanelSize] = useState({ width: 500, height: 400 });
     const [isDragging, setIsDragging] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
     const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
@@ -96,9 +95,10 @@ export default function FormDevTools({ formState, values, position = 'bottom-lef
             if (isResizing) {
                 const deltaX = e.clientX - resizeStart.x;
                 const deltaY = e.clientY - resizeStart.y;
+                const maxHeight = window.innerHeight * 0.85; // 화면 높이의 85%를 최대값으로
                 setPanelSize({
                     width: Math.max(300, resizeStart.width + deltaX),
-                    height: Math.max(200, resizeStart.height + deltaY),
+                    height: Math.min(maxHeight, Math.max(200, resizeStart.height + deltaY)),
                 });
             }
         };
@@ -163,54 +163,32 @@ export default function FormDevTools({ formState, values, position = 'bottom-lef
                         if (!isCopied)
                             e.currentTarget.style.backgroundColor = '#3b82f6';
                     } }, isCopied ? '✓ Copied' : 'Copy All')),
-            React.createElement("div", { style: tabContainerStyle },
-                React.createElement("button", { onClick: () => setActiveTab('values'), style: getTabStyle(activeTab === 'values'), onMouseEnter: (e) => {
-                        if (activeTab !== 'values')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'values')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } }, "Values"),
-                React.createElement("button", { onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
-                        if (activeTab !== 'errors')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'errors')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } },
-                    "Errors (",
-                    errorCount,
-                    ")"),
-                React.createElement("button", { onClick: () => setActiveTab('state'), style: getTabStyle(activeTab === 'state'), onMouseEnter: (e) => {
-                        if (activeTab !== 'state')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'state')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } }, "State")),
             React.createElement("div", { style: contentStyle },
-                activeTab === 'values' && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values || {}, null, 2)))),
-                activeTab === 'errors' && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: sectionTitleStyle }, "Validation Errors"),
+                React.createElement("div", { style: statsContainerStyle },
+                    React.createElement("div", { style: statCardStyle },
+                        React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
+                        React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
+                    React.createElement("div", { style: statCardStyle },
+                        React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
+                        React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
+                    React.createElement("div", { style: statCardStyle },
+                        React.createElement("div", { style: statLabelStyle }, "Submit Count"),
+                        React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
+                    React.createElement("div", { style: statCardStyle },
+                        React.createElement("div", { style: statLabelStyle }, "Submitting"),
+                        React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
+                React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values || {}, null, 2)),
+                errorCount > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle },
+                        "Validation Errors (",
+                        errorCount,
+                        ")"),
                     renderErrors())),
-                activeTab === 'state' && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: statsContainerStyle },
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
-                            React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
-                            React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Submit Count"),
-                            React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Submitting"),
-                            React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
+                dirtyFieldsCount > 0 && (React.createElement(React.Fragment, null,
                     React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)))),
+                touchedFieldsCount > 0 && (React.createElement(React.Fragment, null,
                     React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
                     React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2))))),
             React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleStyle }),

package/dist/components/dev/FormDevTools/styles.d.ts

@@ -28,8 +28,6 @@ export declare const headerStyle: CSSProperties;
 export declare const headerTitleStyle: CSSProperties;
 export declare const getStatusBadgeStyle: (isValid: boolean | undefined) => CSSProperties;
 export declare const getCopyButtonStyle: (isCopied: boolean) => CSSProperties;
-export declare const tabContainerStyle: CSSProperties;
-export declare const getTabStyle: (isActive: boolean) => CSSProperties;
 export declare const contentStyle: CSSProperties;
 export declare const sectionTitleStyle: CSSProperties;
 export declare const codeBlockStyle: CSSProperties;

package/dist/components/dev/FormDevTools/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,MAAM,CAAC,MAAM,EAAE,aAAa,CAK/D,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,aAQpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAclE,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,UAAU,MAAM,EAChB,eAAe;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACvC,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC5C,YAAY,OAAO,KAClB,aAgBD,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE,aASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,aAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAUjE,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,UAAU,OAAO,KAAG,aAUrD,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,aAI/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,OAAO,KAAG,aAW9C,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,aAI1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAO/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAG/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAS/B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAUxC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,MAAM,CAAC,MAAM,EAAE,aAAa,CAK/D,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,aAQpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAclE,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,UAAU,MAAM,EAChB,eAAe;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACvC,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC5C,YAAY,OAAO,KAClB,aAoBF,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,aAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAUjE,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,UAAU,OAAO,KAAG,aAUrD,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,aAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAO/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAU5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAG/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAS/B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAUxC,CAAC"}

package/dist/components/dev/FormDevTools/styles.js

@@ -28,23 +28,27 @@ export const getToggleButtonStyle = (isValid) => ({
     justifyContent: 'center',
     transition: 'background-color 0.2s',
 });
-export const getPanelStyle = (position, panelPosition, panelSize, isDragging) => ({
-    position: 'fixed',
-    top: panelPosition.y || (position.includes('top') ? 60 : undefined),
-    bottom: !panelPosition.y && position.includes('bottom') ? 60 : undefined,
-    left: panelPosition.x || (position.includes('left') ? 0 : undefined),
-    right: !panelPosition.x && position.includes('right') ? 0 : undefined,
-    backgroundColor: 'white',
-    borderRadius: '12px',
-    boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
-    border: '1px solid #e5e7eb',
-    width: `${panelSize.width}px`,
-    height: `${panelSize.height}px`,
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'column',
-    cursor: isDragging ? 'grabbing' : 'default',
-});
+export const getPanelStyle = (position, panelPosition, panelSize, isDragging) => {
+    const maxHeight = typeof window !== 'undefined' ? window.innerHeight * 0.85 : 600;
+    return {
+        position: 'fixed',
+        top: panelPosition.y || (position.includes('top') ? 60 : undefined),
+        bottom: !panelPosition.y && position.includes('bottom') ? 60 : undefined,
+        left: panelPosition.x || (position.includes('left') ? 0 : undefined),
+        right: !panelPosition.x && position.includes('right') ? 0 : undefined,
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        width: `${panelSize.width}px`,
+        height: `${Math.min(panelSize.height, maxHeight)}px`,
+        maxHeight: `${maxHeight}px`,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        cursor: isDragging ? 'grabbing' : 'default',
+    };
+};
 export const headerStyle = {
     padding: '12px 16px',
     borderBottom: '1px solid #e5e7eb',
@@ -82,26 +86,11 @@ export const getCopyButtonStyle = (isCopied) => ({
     fontWeight: 600,
     transition: 'background-color 0.2s',
 });
-export const tabContainerStyle = {
-    display: 'flex',
-    borderBottom: '1px solid #e5e7eb',
-    backgroundColor: '#f9fafb',
-};
-export const getTabStyle = (isActive) => ({
-    flex: 1,
-    padding: '10px 16px',
-    border: 'none',
-    backgroundColor: isActive ? 'white' : 'transparent',
-    color: isActive ? '#8b5cf6' : '#6b7280',
-    cursor: 'pointer',
-    fontSize: '13px',
-    fontWeight: isActive ? 600 : 400,
-    borderBottom: isActive ? '2px solid #8b5cf6' : '2px solid transparent',
-    transition: 'all 0.15s',
-});
 export const contentStyle = {
     flex: 1,
+    minHeight: 0, // flexbox에서 스크롤이 제대로 작동하도록 필수
     overflowY: 'auto',
+    overflowX: 'hidden',
     padding: '16px',
 };
 export const sectionTitleStyle = {
@@ -119,7 +108,7 @@ export const codeBlockStyle = {
     fontSize: '12px',
     fontFamily: 'monospace',
     overflow: 'auto',
-    maxHeight: '400px',
+    maxHeight: '300px',
     marginBottom: '16px',
     color: '#111827', // 검은색 텍스트
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goodchuck-utils",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,10 @@
   ],
   "scripts": {
     "prepare": "npm run build:tsc",
-    "prepublishOnly": "npm run test:run && npm run build:tsc",
+    "prepublishOnly": "npm run test:run && npm run clean && npm run build:tsc",
     "build": "npm run build",
     "build:tsc": "tsc",
+    "clean": "rm -rf dist",
     "dev": "tsc --watch",
     "test": "vitest",
     "test:ui": "vitest --ui",

package/dist/components/dev/FormDevTools.d.ts

@@ -1,76 +0,0 @@
-import React from 'react';
-type FormState = {
-    values?: Record<string, any>;
-    errors?: Record<string, any>;
-    dirtyFields?: Record<string, any>;
-    touchedFields?: Record<string, any>;
-    isValid?: boolean;
-    isSubmitting?: boolean;
-    submitCount?: number;
-};
-type Props = {
-    /** react-hook-form의 formState */
-    formState: FormState;
-    /** 현재 폼 values (watch() 결과) */
-    values?: Record<string, any>;
-    /** 표시 위치 (기본값: 'bottom-left') */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /** 패널 제목 (기본값: 'Form DevTools') */
-    title?: string;
-};
-/**
- * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
- * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
- *
- * @example
- * ```tsx
- * // Vite 프로젝트
- * import { useForm } from 'react-hook-form';
- * import { FormDevTools } from 'goodchuck-utils/components/dev';
- *
- * function MyForm() {
- *   const { register, handleSubmit, formState, watch } = useForm({
- *     defaultValues: {
- *       username: '',
- *       email: '',
- *       age: 0,
- *     }
- *   });
- *
- *   const values = watch(); // 모든 값 watch
- *
- *   const onSubmit = (data) => {
- *     console.log(data);
- *   };
- *
- *   return (
- *     <form onSubmit={handleSubmit(onSubmit)}>
- *       <input {...register('username', { required: 'Username is required' })} />
- *       <input {...register('email', { required: 'Email is required' })} />
- *       <input type="number" {...register('age', { min: 18 })} />
- *       <button type="submit">Submit</button>
- *
- *       {import.meta.env.DEV && (
- *         <FormDevTools formState={formState} values={values} />
- *       )}
- *     </form>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Create React App 프로젝트
- * {process.env.NODE_ENV === 'development' && (
- *   <FormDevTools
- *     formState={formState}
- *     values={values}
- *     position="top-right"
- *     title="User Form Debug"
- *   />
- * )}
- * ```
- */
-export default function FormDevTools({ formState, values, position, title }: Props): React.JSX.Element;
-export {};
-//# sourceMappingURL=FormDevTools.d.ts.map

package/dist/components/dev/FormDevTools.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../src/components/dev/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAocnH"}

package/dist/components/dev/FormDevTools.js

@@ -1,399 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
-/**
- * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
- * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
- *
- * @example
- * ```tsx
- * // Vite 프로젝트
- * import { useForm } from 'react-hook-form';
- * import { FormDevTools } from 'goodchuck-utils/components/dev';
- *
- * function MyForm() {
- *   const { register, handleSubmit, formState, watch } = useForm({
- *     defaultValues: {
- *       username: '',
- *       email: '',
- *       age: 0,
- *     }
- *   });
- *
- *   const values = watch(); // 모든 값 watch
- *
- *   const onSubmit = (data) => {
- *     console.log(data);
- *   };
- *
- *   return (
- *     <form onSubmit={handleSubmit(onSubmit)}>
- *       <input {...register('username', { required: 'Username is required' })} />
- *       <input {...register('email', { required: 'Email is required' })} />
- *       <input type="number" {...register('age', { min: 18 })} />
- *       <button type="submit">Submit</button>
- *
- *       {import.meta.env.DEV && (
- *         <FormDevTools formState={formState} values={values} />
- *       )}
- *     </form>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Create React App 프로젝트
- * {process.env.NODE_ENV === 'development' && (
- *   <FormDevTools
- *     formState={formState}
- *     values={values}
- *     position="top-right"
- *     title="User Form Debug"
- *   />
- * )}
- * ```
- */
-export default function FormDevTools({ formState, values, position = 'bottom-left', title = 'Form DevTools' }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [activeTab, setActiveTab] = useState('values');
-    const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
-    const [panelSize, setPanelSize] = useState({ width: 500, height: 600 });
-    const [isDragging, setIsDragging] = useState(false);
-    const [isResizing, setIsResizing] = useState(false);
-    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-    const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
-    const panelRef = useRef(null);
-    const { copy, copiedText } = useCopyToClipboard();
-    const handleCopy = () => {
-        const data = {
-            values,
-            errors: formState.errors,
-            dirtyFields: formState.dirtyFields,
-            touchedFields: formState.touchedFields,
-            isValid: formState.isValid,
-            isSubmitting: formState.isSubmitting,
-            submitCount: formState.submitCount,
-        };
-        copy(JSON.stringify(data, null, 2));
-    };
-    const isCopied = copiedText !== null;
-    const positionStyles = {
-        'top-left': { top: 16, left: 16 },
-        'top-right': { top: 16, right: 16 },
-        'bottom-left': { bottom: 16, left: 16 },
-        'bottom-right': { bottom: 16, right: 16 },
-    };
-    const containerStyle = {
-        position: 'fixed',
-        ...positionStyles[position],
-        zIndex: 99999,
-        fontFamily: 'system-ui, -apple-system, sans-serif',
-    };
-    const toggleButtonStyle = {
-        width: '48px',
-        height: '48px',
-        borderRadius: '50%',
-        backgroundColor: formState.isValid === false ? '#ef4444' : '#8b5cf6',
-        color: 'white',
-        border: 'none',
-        cursor: 'pointer',
-        fontSize: '20px',
-        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'background-color 0.2s',
-    };
-    const panelStyle = {
-        position: 'fixed',
-        top: panelPosition.y || (position.includes('top') ? 60 : undefined),
-        bottom: !panelPosition.y && position.includes('bottom') ? 60 : undefined,
-        left: panelPosition.x || (position.includes('left') ? 0 : undefined),
-        right: !panelPosition.x && position.includes('right') ? 0 : undefined,
-        backgroundColor: 'white',
-        borderRadius: '12px',
-        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
-        border: '1px solid #e5e7eb',
-        width: `${panelSize.width}px`,
-        height: `${panelSize.height}px`,
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        cursor: isDragging ? 'grabbing' : 'default',
-    };
-    const headerStyle = {
-        padding: '12px 16px',
-        borderBottom: '1px solid #e5e7eb',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#f9fafb',
-        cursor: 'grab',
-        userSelect: 'none',
-    };
-    const headerTitleStyle = {
-        fontWeight: 'bold',
-        fontSize: '14px',
-        color: '#111827',
-    };
-    const statusBadgeStyle = {
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '4px',
-        padding: '4px 8px',
-        backgroundColor: formState.isValid ? '#dcfce7' : '#fee2e2',
-        color: formState.isValid ? '#166534' : '#991b1b',
-        borderRadius: '6px',
-        fontSize: '11px',
-        fontWeight: 600,
-    };
-    const copyButtonStyle = {
-        padding: '4px 12px',
-        backgroundColor: isCopied ? '#10b981' : '#3b82f6',
-        color: 'white',
-        border: 'none',
-        borderRadius: '6px',
-        cursor: 'pointer',
-        fontSize: '11px',
-        fontWeight: 600,
-        transition: 'background-color 0.2s',
-    };
-    const tabContainerStyle = {
-        display: 'flex',
-        borderBottom: '1px solid #e5e7eb',
-        backgroundColor: '#f9fafb',
-    };
-    const tabStyle = (isActive) => ({
-        flex: 1,
-        padding: '10px 16px',
-        border: 'none',
-        backgroundColor: isActive ? 'white' : 'transparent',
-        color: isActive ? '#8b5cf6' : '#6b7280',
-        cursor: 'pointer',
-        fontSize: '13px',
-        fontWeight: isActive ? 600 : 400,
-        borderBottom: isActive ? '2px solid #8b5cf6' : '2px solid transparent',
-        transition: 'all 0.15s',
-    });
-    const contentStyle = {
-        flex: 1,
-        overflowY: 'auto',
-        padding: '16px',
-    };
-    const sectionTitleStyle = {
-        fontSize: '12px',
-        fontWeight: 'bold',
-        color: '#6b7280',
-        marginBottom: '8px',
-        textTransform: 'uppercase',
-        letterSpacing: '0.5px',
-    };
-    const codeBlockStyle = {
-        backgroundColor: '#f3f4f6',
-        borderRadius: '6px',
-        padding: '12px',
-        fontSize: '12px',
-        fontFamily: 'monospace',
-        overflow: 'auto',
-        maxHeight: '400px',
-        marginBottom: '16px',
-        color: '#111827', // 검은색 텍스트
-    };
-    const errorItemStyle = {
-        padding: '8px 12px',
-        backgroundColor: '#fef2f2',
-        border: '1px solid #fecaca',
-        borderRadius: '6px',
-        marginBottom: '8px',
-    };
-    const errorLabelStyle = {
-        fontSize: '12px',
-        fontWeight: 600,
-        color: '#991b1b',
-        marginBottom: '4px',
-    };
-    const errorMessageStyle = {
-        fontSize: '11px',
-        color: '#7f1d1d',
-    };
-    const statsContainerStyle = {
-        display: 'grid',
-        gridTemplateColumns: '1fr 1fr',
-        gap: '12px',
-        marginBottom: '16px',
-    };
-    const statCardStyle = {
-        padding: '12px',
-        backgroundColor: '#f9fafb',
-        borderRadius: '8px',
-        border: '1px solid #e5e7eb',
-    };
-    const statLabelStyle = {
-        fontSize: '11px',
-        color: '#6b7280',
-        marginBottom: '4px',
-        textTransform: 'uppercase',
-        letterSpacing: '0.5px',
-    };
-    const statValueStyle = {
-        fontSize: '18px',
-        fontWeight: 'bold',
-        color: '#111827',
-    };
-    const errorCount = Object.keys(formState.errors || {}).length;
-    const dirtyFieldsCount = Object.keys(formState.dirtyFields || {}).length;
-    const touchedFieldsCount = Object.keys(formState.touchedFields || {}).length;
-    // 드래그 핸들러
-    useEffect(() => {
-        const handleMouseMove = (e) => {
-            if (isDragging) {
-                const deltaX = e.clientX - dragStart.x;
-                const deltaY = e.clientY - dragStart.y;
-                setPanelPosition((prev) => ({
-                    x: prev.x + deltaX,
-                    y: prev.y + deltaY,
-                }));
-                setDragStart({ x: e.clientX, y: e.clientY });
-            }
-            if (isResizing) {
-                const deltaX = e.clientX - resizeStart.x;
-                const deltaY = e.clientY - resizeStart.y;
-                setPanelSize({
-                    width: Math.max(300, resizeStart.width + deltaX),
-                    height: Math.max(200, resizeStart.height + deltaY),
-                });
-            }
-        };
-        const handleMouseUp = () => {
-            setIsDragging(false);
-            setIsResizing(false);
-        };
-        if (isDragging || isResizing) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-            return () => {
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-    }, [isDragging, isResizing, dragStart, resizeStart]);
-    const handleHeaderMouseDown = (e) => {
-        if (panelRef.current) {
-            const rect = panelRef.current.getBoundingClientRect();
-            setIsDragging(true);
-            setDragStart({
-                x: e.clientX,
-                y: e.clientY,
-            });
-            setPanelPosition({
-                x: rect.left,
-                y: rect.top,
-            });
-        }
-    };
-    const handleResizeMouseDown = (e) => {
-        e.stopPropagation();
-        setIsResizing(true);
-        setResizeStart({
-            x: e.clientX,
-            y: e.clientY,
-            width: panelSize.width,
-            height: panelSize.height,
-        });
-    };
-    const renderErrors = () => {
-        if (!formState.errors || Object.keys(formState.errors).length === 0) {
-            return (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors"));
-        }
-        return Object.entries(formState.errors).map(([field, error]) => (React.createElement("div", { key: field, style: errorItemStyle },
-            React.createElement("div", { style: errorLabelStyle }, field),
-            React.createElement("div", { style: errorMessageStyle }, error?.message || 'Invalid value'))));
-    };
-    return (React.createElement("div", { style: containerStyle },
-        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: toggleButtonStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#dc2626' : '#7c3aed'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#ef4444' : '#8b5cf6') }, isOpen ? '✕' : '📝'),
-        isOpen && (React.createElement("div", { ref: panelRef, style: panelStyle },
-            React.createElement("div", { style: headerStyle, onMouseDown: handleHeaderMouseDown },
-                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-                    React.createElement("div", { style: headerTitleStyle },
-                        "\uD83D\uDCDD ",
-                        title),
-                    React.createElement("div", { style: statusBadgeStyle }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
-                React.createElement("button", { onClick: handleCopy, style: copyButtonStyle, onMouseEnter: (e) => {
-                        if (!isCopied)
-                            e.currentTarget.style.backgroundColor = '#2563eb';
-                    }, onMouseLeave: (e) => {
-                        if (!isCopied)
-                            e.currentTarget.style.backgroundColor = '#3b82f6';
-                    } }, isCopied ? '✓ Copied' : 'Copy All')),
-            React.createElement("div", { style: tabContainerStyle },
-                React.createElement("button", { onClick: () => setActiveTab('values'), style: tabStyle(activeTab === 'values'), onMouseEnter: (e) => {
-                        if (activeTab !== 'values')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'values')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } }, "Values"),
-                React.createElement("button", { onClick: () => setActiveTab('errors'), style: tabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
-                        if (activeTab !== 'errors')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'errors')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } },
-                    "Errors (",
-                    errorCount,
-                    ")"),
-                React.createElement("button", { onClick: () => setActiveTab('state'), style: tabStyle(activeTab === 'state'), onMouseEnter: (e) => {
-                        if (activeTab !== 'state')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'state')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } }, "State")),
-            React.createElement("div", { style: contentStyle },
-                activeTab === 'values' && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values || {}, null, 2)))),
-                activeTab === 'errors' && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: sectionTitleStyle }, "Validation Errors"),
-                    renderErrors())),
-                activeTab === 'state' && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: statsContainerStyle },
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
-                            React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
-                            React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Submit Count"),
-                            React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
-                        React.createElement("div", { style: statCardStyle },
-                            React.createElement("div", { style: statLabelStyle }, "Submitting"),
-                            React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
-                    React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)),
-                    React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2))))),
-            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: {
-                    position: 'absolute',
-                    bottom: 0,
-                    right: 0,
-                    width: '20px',
-                    height: '20px',
-                    cursor: 'nwse-resize',
-                    backgroundColor: 'transparent',
-                    zIndex: 1,
-                } }),
-            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: {
-                    position: 'absolute',
-                    bottom: 0,
-                    right: 0,
-                    width: '12px',
-                    height: '12px',
-                    cursor: 'nwse-resize',
-                    borderRight: '3px solid #9ca3af',
-                    borderBottom: '3px solid #9ca3af',
-                    borderRadius: '0 0 12px 0',
-                } })))));
-}