goodchuck-utils 1.5.0 → 1.7.0

package/dist/components/dev/DevPanel.js

@@ -0,0 +1,196 @@
+import React, { useState, useRef } from 'react';
+import { useWindowSize } from '../../hooks/useWindowSize';
+/**
+ * 개발자 도구 패널
+ * 여러 개발용 도구를 하나의 패널에서 관리할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트
+ * import { DevPanel } from 'goodchuck-utils/components/dev';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       {import.meta.env.DEV && <DevPanel />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && <DevPanel position="top-left" />}
+ * ```
+ */
+export default function DevPanel({ position = 'bottom-right' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showWindowSize, setShowWindowSize] = useState(false);
+    const [showRenderCount, setShowRenderCount] = useState(false);
+    const renderCount = useRef(0);
+    const { width, height } = useWindowSize();
+    // 렌더 카운트 증가
+    renderCount.current += 1;
+    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: '#3b82f6',
+        color: 'white',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '20px',
+        fontWeight: 'bold',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.2s',
+    };
+    const panelStyle = {
+        position: 'absolute',
+        bottom: position.includes('bottom') ? '60px' : undefined,
+        top: position.includes('top') ? '60px' : undefined,
+        right: position.includes('right') ? '0' : undefined,
+        left: position.includes('left') ? '0' : undefined,
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        minWidth: '280px',
+        overflow: 'hidden',
+        color: '#111827',
+    };
+    const headerStyle = {
+        padding: '12px 16px',
+        borderBottom: '1px solid #e5e7eb',
+        fontWeight: 'bold',
+        fontSize: '14px',
+        color: '#111827',
+        backgroundColor: '#f9fafb',
+    };
+    const contentStyle = {
+        padding: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+    };
+    const toggleItemStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 12px',
+        borderRadius: '6px',
+        fontSize: '13px',
+        cursor: 'pointer',
+        transition: 'background-color 0.15s',
+        backgroundColor: 'transparent',
+    };
+    const getSwitchStyle = (isOn) => ({
+        width: '36px',
+        height: '20px',
+        backgroundColor: isOn ? '#3b82f6' : '#d1d5db',
+        borderRadius: '10px',
+        position: 'relative',
+        transition: 'background-color 0.2s',
+        cursor: 'pointer',
+    });
+    const getSwitchKnobStyle = (isOn) => ({
+        width: '16px',
+        height: '16px',
+        backgroundColor: 'white',
+        borderRadius: '50%',
+        position: 'absolute',
+        top: '2px',
+        left: isOn ? '18px' : '2px',
+        transition: 'left 0.2s',
+    });
+    const overlayStyle = {
+        position: 'fixed',
+        padding: '8px 12px',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        fontSize: '14px',
+        fontFamily: 'monospace',
+        borderRadius: '8px',
+        zIndex: 99998,
+    };
+    const handleClearLocalStorage = () => {
+        if (confirm('LocalStorage를 모두 삭제하시겠습니까?')) {
+            localStorage.clear();
+            alert('LocalStorage가 삭제되었습니다.');
+        }
+    };
+    const handleClearSessionStorage = () => {
+        if (confirm('SessionStorage를 모두 삭제하시겠습니까?')) {
+            sessionStorage.clear();
+            alert('SessionStorage가 삭제되었습니다.');
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: containerStyle },
+            React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: toggleButtonStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#2563eb'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = '#3b82f6') }, isOpen ? '✕' : '🛠'),
+            isOpen && (React.createElement("div", { style: panelStyle },
+                React.createElement("div", { style: headerStyle }, "\u2699\uFE0F \uAC1C\uBC1C\uC790 \uB3C4\uAD6C"),
+                React.createElement("div", { style: contentStyle },
+                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => setShowWindowSize(!showWindowSize) },
+                        React.createElement("span", null, "\uC708\uB3C4\uC6B0 \uD06C\uAE30 \uD45C\uC2DC"),
+                        React.createElement("div", { style: getSwitchStyle(showWindowSize) },
+                            React.createElement("div", { style: getSwitchKnobStyle(showWindowSize) }))),
+                    React.createElement("div", { style: toggleItemStyle, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#f3f4f6'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'transparent'), onClick: () => setShowRenderCount(!showRenderCount) },
+                        React.createElement("span", null, "\uB80C\uB354 \uCE74\uC6B4\uD2B8 \uD45C\uC2DC"),
+                        React.createElement("div", { style: getSwitchStyle(showRenderCount) },
+                            React.createElement("div", { style: getSwitchKnobStyle(showRenderCount) }))),
+                    React.createElement("div", { style: { height: '1px', backgroundColor: '#e5e7eb', margin: '8px 0' } }),
+                    React.createElement("button", { onClick: handleClearLocalStorage, style: {
+                            ...toggleItemStyle,
+                            border: '1px solid #e5e7eb',
+                            backgroundColor: 'white',
+                            color: '#dc2626',
+                            fontWeight: 500,
+                        }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#fef2f2'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'white') }, "\uD83D\uDDD1\uFE0F LocalStorage \uC0AD\uC81C"),
+                    React.createElement("button", { onClick: handleClearSessionStorage, style: {
+                            ...toggleItemStyle,
+                            border: '1px solid #e5e7eb',
+                            backgroundColor: 'white',
+                            color: '#dc2626',
+                            fontWeight: 500,
+                        }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = '#fef2f2'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = 'white') }, "\uD83D\uDDD1\uFE0F SessionStorage \uC0AD\uC81C"))))),
+        showWindowSize && (React.createElement("div", { style: {
+                ...overlayStyle,
+                top: 16,
+                left: 16,
+            } },
+            React.createElement("span", { style: { color: '#60a5fa' } }, "W:"),
+            ' ',
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                width,
+                "px"),
+            React.createElement("span", { style: { color: '#9ca3af', margin: '0 4px' } }, "\u00D7"),
+            React.createElement("span", { style: { color: '#4ade80' } }, "H:"),
+            ' ',
+            React.createElement("span", { style: { fontWeight: 'bold' } },
+                height,
+                "px"))),
+        showRenderCount && (React.createElement("div", { style: {
+                ...overlayStyle,
+                top: 16,
+                right: 16,
+            } },
+            React.createElement("span", { style: { color: '#fbbf24' } }, "Renders:"),
+            ' ',
+            React.createElement("span", { style: { fontWeight: 'bold' } }, renderCount.current)))));
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+export type FormState = {
+    values?: Record<string, any>;
+    errors?: Record<string, any>;
+    dirtyFields?: Record<string, any>;
+    touchedFields?: Record<string, any>;
+    isValid?: boolean;
+    isSubmitting?: boolean;
+    submitCount?: number;
+};
+export 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;
+//# sourceMappingURL=FormDevTools.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,196 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+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 등을 한눈에 확인할 수 있습니다.
+ *
+ * @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 [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
+    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 });
+    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 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;
+                const maxHeight = window.innerHeight * 0.85; // 화면 높이의 85%를 최대값으로
+                setPanelSize({
+                    width: Math.max(300, resizeStart.width + deltaX),
+                    height: Math.min(maxHeight, 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: getContainerStyle(position) },
+        React.createElement("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("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')),
+            React.createElement("div", { style: contentStyle },
+                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())),
+                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))))),
+            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleStyle }),
+            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleIndicatorStyle })))));
+}

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

@@ -0,0 +1,3 @@
+export { default } from './FormDevTools';
+export type { Props as FormDevToolsProps, FormState } from './FormDevTools';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1 @@
+export { default } from './FormDevTools';

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

@@ -0,0 +1,43 @@
+import { CSSProperties } from 'react';
+export type StyleProps = {
+    isValid?: boolean;
+    isCopied: boolean;
+    isActive: boolean;
+    isDragging: boolean;
+    position: string;
+    panelPosition: {
+        x: number;
+        y: number;
+    };
+    panelSize: {
+        width: number;
+        height: number;
+    };
+};
+export declare const getPositionStyles: () => Record<string, CSSProperties>;
+export declare const getContainerStyle: (position: string) => CSSProperties;
+export declare const getToggleButtonStyle: (isValid: boolean | undefined) => CSSProperties;
+export declare const getPanelStyle: (position: string, panelPosition: {
+    x: number;
+    y: number;
+}, panelSize: {
+    width: number;
+    height: number;
+}, isDragging: boolean) => CSSProperties;
+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 contentStyle: CSSProperties;
+export declare const sectionTitleStyle: CSSProperties;
+export declare const codeBlockStyle: CSSProperties;
+export declare const errorItemStyle: CSSProperties;
+export declare const errorLabelStyle: CSSProperties;
+export declare const errorMessageStyle: CSSProperties;
+export declare const statsContainerStyle: CSSProperties;
+export declare const statCardStyle: CSSProperties;
+export declare const statLabelStyle: CSSProperties;
+export declare const statValueStyle: CSSProperties;
+export declare const resizeHandleStyle: CSSProperties;
+export declare const resizeHandleIndicatorStyle: CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +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,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"}