@blastlabs/utils 1.22.0 → 2.1.0

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

@@ -1,15 +1,15 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useCopyToClipboard } from '../../../hooks';
-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 { getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, tabContainerStyle, getTabStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
 /**
  * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
  * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
  *
  * @example
  * ```tsx
- * // Vite 프로젝트 - 간단한 사용법
  * import { useForm } from 'react-hook-form';
- * import { FormDevTools } from '@blastlabs/utils/components/dev';
+ * import { useRegisterForm } from '@blastlabs/utils/components/dev';
+ * import FormDevTools from '@blastlabs/utils/components/dev';
  *
  * function MyForm() {
  *   const form = useForm({
@@ -20,88 +20,24 @@ import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, he
  *     }
  *   });
  *
- *   return (
- *     <form onSubmit={form.handleSubmit(onSubmit)}>
- *       <input {...form.register('username')} />
- *       <input {...form.register('email')} />
- *       <button type="submit">Submit</button>
- *
- *       {import.meta.env.DEV && <FormDevTools form={form} />}
- *     </form>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Mock 데이터 생성 기능 포함
- * function MyForm() {
- *   const form = useForm({
- *     defaultValues: {
- *       username: '',
- *       email: '',
- *       age: 0,
- *     }
- *   });
+ *   // 페이지에서 form 주입
+ *   useRegisterForm(form);
  *
  *   return (
  *     <form onSubmit={form.handleSubmit(onSubmit)}>
  *       <input {...form.register('username')} />
  *       <input {...form.register('email')} />
  *       <button type="submit">Submit</button>
- *
- *       {import.meta.env.DEV && (
- *         <FormDevTools
- *           form={form}
- *           generateMock={async ({ values, originalValues }) => {
- *             // Mock 데이터 생성 로직
- *             return {
- *               username: 'test_user',
- *               email: 'test@example.com',
- *               age: 25,
- *             };
- *           }}
- *         />
- *       )}
- *     </form>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // 수정 폼 예시
- * function EditForm({ userData }) {
- *   const form = useForm();
- *
- *   useEffect(() => {
- *     form.reset(userData);
- *   }, [userData]);
- *
- *   return (
- *     <form onSubmit={form.handleSubmit(onSubmit)}>
- *       <input {...form.register('username')} />
- *       <input {...form.register('email')} />
- *       <button type="submit">Update</button>
- *
- *       {process.env.NODE_ENV === 'development' && (
- *         <FormDevTools
- *           form={form}
- *           position="top-right"
- *           title="Edit Form Debug"
- *         />
- *       )}
  *     </form>
  *   );
  * }
  * ```
  */
-export default function FormDevTools({ form, validationSchema, generateMock, position = 'bottom-left', title = 'Form DevTools' }) {
+export default function FormDevTools({ form, validationSchema, generateMock, title = 'Form DevTools' }) {
     // form 객체에서 필요한 값들 추출
     const { formState, watch, setValue, trigger } = form;
-    const values = watch(); // 모든 값을 watch
-    const originalValues = formState.defaultValues; // defaultValues를 원본 값으로 사용
-    const [isOpen, setIsOpen] = useState(false);
+    const values = watch();
+    const originalValues = formState.defaultValues;
     const [activeTab, setActiveTab] = useState('all');
     const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
     const [panelSize, setPanelSize] = useState({ width: 500, height: 400 });
@@ -179,7 +115,7 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
             if (isResizing) {
                 const deltaX = e.clientX - resizeStart.x;
                 const deltaY = e.clientY - resizeStart.y;
-                const maxHeight = window.innerHeight * 0.85; // 화면 높이의 85%를 최대값으로
+                const maxHeight = window.innerHeight * 0.85;
                 setPanelSize({
                     width: Math.max(300, resizeStart.width + deltaX),
                     height: Math.min(maxHeight, Math.max(200, resizeStart.height + deltaY)),
@@ -240,33 +176,26 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
         setIsGenerating(true);
         setGenerateError(null);
         try {
-            // 사용자가 제공한 generateMock 함수 사용
             const mockData = await generateMock({
                 values,
                 originalValues,
             });
-            // setValue를 사용하여 각 필드를 설정
-            // reset을 사용하면 defaultValues가 업데이트되어 changedFields 계산이 부정확해짐
-            // setValue만 사용하면 originalValues와의 비교가 정확하게 유지됨
             const setNestedValue = (data, prefix = '') => {
                 Object.keys(data).forEach((key) => {
                     const fullPath = prefix ? `${prefix}.${key}` : key;
                     const value = data[key];
                     if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
-                        // 중첩된 객체인 경우 재귀적으로 처리
                         setNestedValue(value, fullPath);
                     }
                     else {
-                        // 최종 필드인 경우 setValue 호출
                         setValue(fullPath, value, {
-                            shouldDirty: true, // dirty를 true로 설정 (changedFields에 반영됨)
-                            shouldValidate: true, // validation 실행
+                            shouldDirty: true,
+                            shouldValidate: true,
                         });
                     }
                 });
             };
             setNestedValue(mockData);
-            // 전체 validation 실행
             if (trigger) {
                 await trigger();
             }
@@ -278,165 +207,163 @@ export default function FormDevTools({ form, validationSchema, generateMock, pos
             setIsGenerating(false);
         }
     };
-    return (React.createElement("div", { style: getContainerStyle(position) },
-        React.createElement("button", { type: "button", onClick: () => setIsOpen(!isOpen), style: getToggleButtonStyle(formState.isValid), 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: getPanelStyle(position, panelPosition, panelSize, isDragging) },
-            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: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
-                React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
-                    generateMock && (React.createElement("button", { type: "button", onClick: handleGenerateMock, disabled: isGenerating, style: {
-                            ...getCopyButtonStyle(false),
-                            backgroundColor: isGenerating ? '#9ca3af' : '#10b981',
-                            opacity: isGenerating ? 0.6 : 1,
-                            cursor: isGenerating ? 'not-allowed' : 'pointer',
-                        }, onMouseEnter: (e) => {
-                            if (!isGenerating)
-                                e.currentTarget.style.backgroundColor = '#059669';
-                        }, onMouseLeave: (e) => {
-                            if (!isGenerating)
-                                e.currentTarget.style.backgroundColor = '#10b981';
-                        } }, isGenerating ? '⏳ Generating...' : '🤖 Generate Mock')),
-                    React.createElement("button", { type: "button", onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
-                            if (!isCopied)
-                                e.currentTarget.style.backgroundColor = '#2563eb';
-                        }, onMouseLeave: (e) => {
-                            if (!isCopied)
-                                e.currentTarget.style.backgroundColor = '#3b82f6';
-                        } }, isCopied ? '✓ Copied' : 'Copy All'))),
-            generateError && (React.createElement("div", { style: {
-                    padding: '8px 16px',
-                    backgroundColor: '#fef2f2',
-                    borderBottom: '1px solid #fecaca',
-                    fontSize: '12px',
-                    color: '#991b1b',
-                } }, generateError)),
-            React.createElement("div", { style: tabContainerStyle },
-                React.createElement("button", { type: "button", onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all'), onMouseEnter: (e) => {
-                        if (activeTab !== 'all')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'all')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } }, "All"),
-                React.createElement("button", { type: "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", { type: "button", onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
-                        if (activeTab !== 'errors')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+    return (React.createElement("div", { ref: panelRef, style: getPanelStyle('bottom-right', panelPosition, panelSize, isDragging) },
+        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: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
+            React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+                generateMock && (React.createElement("button", { type: "button", onClick: handleGenerateMock, disabled: isGenerating, style: {
+                        ...getCopyButtonStyle(false),
+                        backgroundColor: isGenerating ? '#9ca3af' : '#10b981',
+                        opacity: isGenerating ? 0.6 : 1,
+                        cursor: isGenerating ? 'not-allowed' : 'pointer',
+                    }, onMouseEnter: (e) => {
+                        if (!isGenerating)
+                            e.currentTarget.style.backgroundColor = '#059669';
                     }, onMouseLeave: (e) => {
-                        if (activeTab !== 'errors')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } },
-                    "Errors ",
-                    errorCount > 0 && `(${errorCount})`),
-                React.createElement("button", { type: "button", onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed'), onMouseEnter: (e) => {
-                        if (activeTab !== 'changed')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
-                    }, onMouseLeave: (e) => {
-                        if (activeTab !== 'changed')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } },
-                    "Changed ",
-                    changedFieldsCount > 0 && `(${changedFieldsCount})`),
-                React.createElement("button", { type: "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"),
-                validationSchema && (React.createElement("button", { type: "button", onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation'), onMouseEnter: (e) => {
-                        if (activeTab !== 'validation')
-                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                        if (!isGenerating)
+                            e.currentTarget.style.backgroundColor = '#10b981';
+                    } }, isGenerating ? '⏳ Generating...' : '🤖 Generate Mock')),
+                React.createElement("button", { type: "button", onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
+                        if (!isCopied)
+                            e.currentTarget.style.backgroundColor = '#2563eb';
                     }, onMouseLeave: (e) => {
-                        if (activeTab !== 'validation')
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                    } }, "Validation"))),
-            React.createElement("div", { style: contentStyle },
-                activeTab === 'all' && (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 }, "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())),
-                    changedFieldsCount > 0 && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { style: sectionTitleStyle },
-                            "Changed Fields (",
-                            changedFieldsCount,
-                            ")"),
-                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))),
-                    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)))),
-                    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)))))),
-                activeTab === 'values' && (React.createElement(React.Fragment, null, values && Object.keys(values).length > 0 ? (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
-                    React.createElement("div", { style: { marginBottom: '8px' } }, "No form values"),
-                    React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Form values will appear here"))))),
-                activeTab === 'errors' && (React.createElement(React.Fragment, null,
+                        if (!isCopied)
+                            e.currentTarget.style.backgroundColor = '#3b82f6';
+                    } }, isCopied ? '✓ Copied' : 'Copy All'))),
+        generateError && (React.createElement("div", { style: {
+                padding: '8px 16px',
+                backgroundColor: '#fef2f2',
+                borderBottom: '1px solid #fecaca',
+                fontSize: '12px',
+                color: '#991b1b',
+            } }, generateError)),
+        React.createElement("div", { style: tabContainerStyle },
+            React.createElement("button", { type: "button", onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all'), onMouseEnter: (e) => {
+                    if (activeTab !== 'all')
+                        e.currentTarget.style.backgroundColor = '#f3f4f6';
+                }, onMouseLeave: (e) => {
+                    if (activeTab !== 'all')
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                } }, "All"),
+            React.createElement("button", { type: "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", { type: "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 > 0 && `(${errorCount})`),
+            React.createElement("button", { type: "button", onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed'), onMouseEnter: (e) => {
+                    if (activeTab !== 'changed')
+                        e.currentTarget.style.backgroundColor = '#f3f4f6';
+                }, onMouseLeave: (e) => {
+                    if (activeTab !== 'changed')
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                } },
+                "Changed ",
+                changedFieldsCount > 0 && `(${changedFieldsCount})`),
+            React.createElement("button", { type: "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"),
+            validationSchema && (React.createElement("button", { type: "button", onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation'), onMouseEnter: (e) => {
+                    if (activeTab !== 'validation')
+                        e.currentTarget.style.backgroundColor = '#f3f4f6';
+                }, onMouseLeave: (e) => {
+                    if (activeTab !== 'validation')
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                } }, "Validation"))),
+        React.createElement("div", { style: contentStyle },
+            activeTab === 'all' && (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 }, "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 > 0 && `(${errorCount})`),
-                    errorCount > 0 ? renderErrors() : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors")))),
-                activeTab === 'changed' && (React.createElement(React.Fragment, null, changedFieldsCount > 0 ? (React.createElement(React.Fragment, null,
+                        "Validation Errors (",
+                        errorCount,
+                        ")"),
+                    renderErrors())),
+                changedFieldsCount > 0 && (React.createElement(React.Fragment, null,
                     React.createElement("div", { style: sectionTitleStyle },
                         "Changed Fields (",
                         changedFieldsCount,
                         ")"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
-                    React.createElement("div", { style: { marginBottom: '8px' } }, "No changed fields"),
-                    React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Fields will appear here when you modify form values"))))),
-                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)))),
-                    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)))))),
-                activeTab === 'validation' && validationSchema && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { style: sectionTitleStyle }, "Validation Schema"),
-                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(validationSchema, null, 2))))),
-            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleStyle }),
-            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleIndicatorStyle })))));
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))),
+                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)))),
+                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)))))),
+            activeTab === 'values' && (values && Object.keys(values).length > 0 ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
+                React.createElement("div", { style: { marginBottom: '8px' } }, "No form values"),
+                React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Form values will appear here")))),
+            activeTab === 'errors' && (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: sectionTitleStyle },
+                    "Validation Errors ",
+                    errorCount > 0 && `(${errorCount})`),
+                errorCount > 0 ? renderErrors() : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors")))),
+            activeTab === 'changed' && (changedFieldsCount > 0 ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: sectionTitleStyle },
+                    "Changed Fields (",
+                    changedFieldsCount,
+                    ")"),
+                React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
+                React.createElement("div", { style: { marginBottom: '8px' } }, "No changed fields"),
+                React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Fields will appear here when you modify form values")))),
+            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)))),
+                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)))))),
+            activeTab === 'validation' && validationSchema && (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: sectionTitleStyle }, "Validation Schema"),
+                React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(validationSchema, null, 2))))),
+        React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleStyle }),
+        React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleIndicatorStyle })));
 }

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

@@ -0,0 +1,27 @@
+import React from 'react';
+type FormType = {
+    formState: {
+        errors?: Record<string, any>;
+        dirtyFields?: Record<string, any>;
+        touchedFields?: Record<string, any>;
+        isValid?: boolean;
+        isSubmitting?: boolean;
+        submitCount?: number;
+        defaultValues?: Record<string, any>;
+    };
+    watch: () => any;
+    setValue: (name: any, value: any, options?: any) => void;
+    trigger?: () => Promise<boolean>;
+};
+type Props = {
+    form: FormType;
+    generateMock?: (params: {
+        values?: Record<string, any>;
+        originalValues?: Record<string, any>;
+    }) => Promise<Record<string, any>> | Record<string, any>;
+    validationSchema?: Record<string, any>;
+    title?: string;
+};
+export default function FormDevToolsContent({ form, validationSchema, generateMock, title }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=FormDevToolsContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormDevToolsContent.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevToolsContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAwB3D,KAAK,QAAQ,GAAG;IACd,SAAS,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACrC,CAAC;IACF,KAAK,EAAE,MAAM,GAAG,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAyUnH"}