@promakeai/inspector 1.0.0 → 1.0.3

package/src/components/StyleEditor/index.tsx

@@ -1,612 +0,0 @@
-/**
- * StyleEditor - Main style editing component with accordion sections
- */
-
-import { useState, useEffect } from "react";
-import {
-  getElementOwnStyles,
-  convertToInlineStyle,
-} from "../../utils/styleUtils";
-import { useStylePreview } from "../../hooks/useStylePreview";
-import { useMessageBridge } from "../../hooks/useMessageBridge";
-import { mapStylesToTailwindClasses } from "../../utils/tailwindMapper";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import type {
-  StyleChanges,
-  SelectedElementData,
-} from "@promakeai/inspector-types";
-import {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "../ui/CustomCollapsible";
-import { Button } from "../ui/button";
-import { ChevronDown, Circle, Check } from "lucide-react";
-import { LayoutSection } from "./LayoutSection";
-import { DisplaySection } from "./DisplaySection";
-import { ImageSection } from "./ImageSection";
-import { TextSection } from "./TextSection";
-import { BorderSection } from "./BorderSection";
-import { SpacingSection } from "./SpacingSection";
-import { shouldShowSection } from "../../utils/elementUtils";
-import cssStyles from "./index.module.css";
-import clsx from "clsx";
-
-interface StyleEditorProps {
-  element: HTMLElement;
-  elementData: SelectedElementData;
-  onHasChangesChange?: (hasChanges: boolean) => void;
-}
-
-export function StyleEditor({
-  element,
-  elementData,
-  onHasChangesChange,
-}: StyleEditorProps) {
-  const { theme, labels } = useInspectorStore();
-  const [styles, setStyles] = useState<StyleChanges>(() =>
-    getElementOwnStyles(element)
-  );
-  const [hasChanges, setHasChanges] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-
-  // Collapsible states for each section
-  const [layoutOpen, setLayoutOpen] = useState(false);
-  const [displayOpen, setDisplayOpen] = useState(false);
-  const [imageOpen, setImageOpen] = useState(false);
-  const [textOpen, setTextOpen] = useState(false);
-  const [borderOpen, setBorderOpen] = useState(false);
-  const [spacingOpen, setSpacingOpen] = useState(false);
-
-  const { previewStyle, resetStyles, resetSingleProperty } =
-    useStylePreview(element);
-  const { sendToParent } = useMessageBridge();
-
-  // Store original styles for reset functionality
-  const originalStylesRef = useState(() => getElementOwnStyles(element))[0];
-
-  // Reset collapsible states when element changes
-  useEffect(() => {
-    setLayoutOpen(false);
-    setDisplayOpen(false);
-    setImageOpen(false);
-    setTextOpen(false);
-    setBorderOpen(false);
-    setSpacingOpen(false);
-    return () => {
-      setLayoutOpen(false);
-      setDisplayOpen(false);
-      setImageOpen(false);
-      setTextOpen(false);
-      setBorderOpen(false);
-      setSpacingOpen(false);
-    };
-  }, []);
-
-  // Notify parent when hasChanges state changes
-  useEffect(() => {
-    onHasChangesChange?.(hasChanges);
-  }, [hasChanges, onHasChangesChange]);
-
-  const handleStyleChange = (property: keyof StyleChanges, value: string) => {
-    const newStyles = { ...styles, [property]: value };
-    setStyles(newStyles);
-
-    // Real-time preview on DOM - apply only this property
-    previewStyle(property, value);
-
-    // Mark as having unsaved changes
-    setHasChanges(true);
-  };
-
-  const handleApply = async () => {
-    setIsSaving(true);
-
-    try {
-      // Get only changed styles by comparing with original
-      const changedStyles: Partial<StyleChanges> = {};
-      (Object.keys(styles) as Array<keyof StyleChanges>).forEach((key) => {
-        if (styles[key] !== originalStylesRef[key]) {
-          changedStyles[key] = styles[key];
-        }
-      });
-
-      // Convert only changed styles to inline style object
-      const inlineStyles = convertToInlineStyle(changedStyles as StyleChanges);
-
-      // Map only changed styles to Tailwind classes
-      const tailwindClasses = mapStylesToTailwindClasses(
-        changedStyles as StyleChanges
-      );
-
-      // Create detailed breakdown of applied styles (only changed ones)
-      const appliedStyles: Record<
-        string,
-        Record<string, string | undefined>
-      > = {
-        layout: {},
-        text: {},
-        border: {},
-        spacing: {},
-        display: {},
-        image: {},
-      };
-
-      // Categorize changed styles
-      if (changedStyles.backgroundColor !== undefined)
-        appliedStyles.layout.backgroundColor = changedStyles.backgroundColor;
-      if (changedStyles.height !== undefined)
-        appliedStyles.layout.height = changedStyles.height;
-      if (changedStyles.width !== undefined)
-        appliedStyles.layout.width = changedStyles.width;
-
-      if (changedStyles.color !== undefined)
-        appliedStyles.text.color = changedStyles.color;
-      if (changedStyles.fontSize !== undefined)
-        appliedStyles.text.fontSize = changedStyles.fontSize;
-      if (changedStyles.fontWeight !== undefined)
-        appliedStyles.text.fontWeight = changedStyles.fontWeight;
-      if (changedStyles.fontFamily !== undefined)
-        appliedStyles.text.fontFamily = changedStyles.fontFamily;
-      if (changedStyles.textAlign !== undefined)
-        appliedStyles.text.textAlign = changedStyles.textAlign;
-      if (changedStyles.textDecoration !== undefined)
-        appliedStyles.text.textDecoration = changedStyles.textDecoration;
-
-      if (changedStyles.borderRadius !== undefined)
-        appliedStyles.border.borderRadius = changedStyles.borderRadius;
-      if (changedStyles.borderWidth !== undefined)
-        appliedStyles.border.borderWidth = changedStyles.borderWidth;
-      if (changedStyles.borderColor !== undefined)
-        appliedStyles.border.borderColor = changedStyles.borderColor;
-      if (changedStyles.borderStyle !== undefined)
-        appliedStyles.border.borderStyle = changedStyles.borderStyle;
-
-      if (changedStyles.paddingVertical !== undefined)
-        appliedStyles.spacing.paddingVertical = changedStyles.paddingVertical;
-      if (changedStyles.paddingHorizontal !== undefined)
-        appliedStyles.spacing.paddingHorizontal =
-          changedStyles.paddingHorizontal;
-      if (changedStyles.paddingTop !== undefined)
-        appliedStyles.spacing.paddingTop = changedStyles.paddingTop;
-      if (changedStyles.paddingRight !== undefined)
-        appliedStyles.spacing.paddingRight = changedStyles.paddingRight;
-      if (changedStyles.paddingBottom !== undefined)
-        appliedStyles.spacing.paddingBottom = changedStyles.paddingBottom;
-      if (changedStyles.paddingLeft !== undefined)
-        appliedStyles.spacing.paddingLeft = changedStyles.paddingLeft;
-      if (changedStyles.marginVertical !== undefined)
-        appliedStyles.spacing.marginVertical = changedStyles.marginVertical;
-      if (changedStyles.marginHorizontal !== undefined)
-        appliedStyles.spacing.marginHorizontal = changedStyles.marginHorizontal;
-      if (changedStyles.marginTop !== undefined)
-        appliedStyles.spacing.marginTop = changedStyles.marginTop;
-      if (changedStyles.marginRight !== undefined)
-        appliedStyles.spacing.marginRight = changedStyles.marginRight;
-      if (changedStyles.marginBottom !== undefined)
-        appliedStyles.spacing.marginBottom = changedStyles.marginBottom;
-      if (changedStyles.marginLeft !== undefined)
-        appliedStyles.spacing.marginLeft = changedStyles.marginLeft;
-
-      if (changedStyles.display !== undefined)
-        appliedStyles.display.display = changedStyles.display;
-      if (changedStyles.opacity !== undefined)
-        appliedStyles.display.opacity = changedStyles.opacity;
-      if (changedStyles.flex !== undefined)
-        appliedStyles.display.flex = changedStyles.flex;
-      if (changedStyles.flexDirection !== undefined)
-        appliedStyles.display.flexDirection = changedStyles.flexDirection;
-      if (changedStyles.justifyContent !== undefined)
-        appliedStyles.display.justifyContent = changedStyles.justifyContent;
-      if (changedStyles.alignItems !== undefined)
-        appliedStyles.display.alignItems = changedStyles.alignItems;
-
-      if (changedStyles.objectFit !== undefined)
-        appliedStyles.image.objectFit = changedStyles.objectFit;
-
-      // Remove empty categories
-      Object.keys(appliedStyles).forEach((key) => {
-        if (Object.keys(appliedStyles[key]).length === 0) {
-          delete appliedStyles[key];
-        }
-      });
-
-      // Send only changed style data to parent for source code update
-      sendToParent("INSPECTOR_STYLE_UPDATED", {
-        element: elementData,
-        styles: changedStyles,
-        inlineStyles,
-        tailwindClasses,
-        appliedStyles,
-      });
-
-      // Mark as saved
-      setHasChanges(false);
-
-      return true; // Success
-    } catch (error) {
-      console.error("Failed to save styles:", error);
-      return false; // Failure
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  // Expose handleApply to parent via window for close confirmation
-  useEffect(() => {
-    (window as any).__styleEditorSave = hasChanges ? handleApply : null;
-    return () => {
-      (window as any).__styleEditorSave = null;
-    };
-  }, [hasChanges, styles, elementData]);
-
-  const handleReset = () => {
-    // Reset to original styles
-    setStyles(originalStylesRef);
-    resetStyles();
-    setHasChanges(false);
-  };
-
-  const handleResetProperty = (property: keyof StyleChanges) => {
-    // Reset single property to original value
-    const originalValue = originalStylesRef[property];
-    setStyles((prev) => ({ ...prev, [property]: originalValue }));
-    resetSingleProperty(property);
-
-    // Check if there are any remaining changes
-    const updatedStyles = { ...styles, [property]: originalValue };
-    const hasRemainingChanges = Object.keys(updatedStyles).some(
-      (key) =>
-        updatedStyles[key as keyof StyleChanges] !==
-        originalStylesRef[key as keyof StyleChanges]
-    );
-    setHasChanges(hasRemainingChanges);
-  };
-
-  return (
-    <div className={cssStyles.container}>
-      {/* Collapsible sections - scrollable */}
-      <div
-        className={cssStyles.scrollArea}
-        style={{
-          scrollbarWidth: "thin",
-          scrollbarColor: `${theme.borderColor} transparent`,
-        }}
-      >
-        {/* Layout Section - Always show */}
-        {shouldShowSection(element, "layout") && (
-          <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
-            <CollapsibleTrigger asChild>
-              <div
-                className={cssStyles.collapsibleTrigger}
-                style={{
-                  backgroundColor: theme.inputBackgroundColor,
-                  border: `1px solid ${theme.inputBorderColor}`,
-                  color: theme.textColor,
-                }}
-                onMouseEnter={(e) => {
-                  if (!layoutOpen) {
-                    e.currentTarget.style.backgroundColor =
-                      theme.secondaryButtonHoverColor ||
-                      theme.inputBackgroundColor;
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!layoutOpen) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }
-                }}
-              >
-                <span>{labels.layoutSectionTitle || "Layout"}</span>
-                <ChevronDown
-                  className={clsx(
-                    cssStyles.chevron,
-                    layoutOpen && cssStyles.chevronOpen
-                  )}
-                />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={cssStyles.collapsibleContent}>
-              <LayoutSection
-                styles={styles}
-                onChange={handleStyleChange}
-                originalStyles={originalStylesRef}
-                onResetProperty={handleResetProperty}
-              />
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
-        {/* Display Section - Always show */}
-        {shouldShowSection(element, "display") && (
-          <Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
-            <CollapsibleTrigger asChild>
-              <div
-                className={cssStyles.collapsibleTrigger}
-                style={{
-                  backgroundColor: theme.inputBackgroundColor,
-                  color: theme.textColor,
-                  border: `1px solid ${theme.inputBorderColor}`,
-                }}
-                onMouseEnter={(e) => {
-                  if (!displayOpen) {
-                    e.currentTarget.style.backgroundColor =
-                      theme.secondaryButtonHoverColor ||
-                      theme.inputBackgroundColor;
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!displayOpen) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }
-                }}
-              >
-                <span>{labels.displaySectionTitle || "Display"}</span>
-                <ChevronDown
-                  className={clsx(
-                    cssStyles.chevron,
-                    displayOpen && cssStyles.chevronOpen
-                  )}
-                />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={cssStyles.collapsibleContent}>
-              <DisplaySection
-                styles={styles}
-                onChange={handleStyleChange}
-                originalStyles={originalStylesRef}
-                onResetProperty={handleResetProperty}
-              />
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
-        {/* Image Section - Only for img elements */}
-        {shouldShowSection(element, "image") && (
-          <Collapsible open={imageOpen} onOpenChange={setImageOpen}>
-            <CollapsibleTrigger asChild>
-              <div
-                className={cssStyles.collapsibleTrigger}
-                style={{
-                  backgroundColor: theme.inputBackgroundColor,
-                  color: theme.textColor,
-                  border: `1px solid ${theme.inputBorderColor}`,
-                }}
-                onMouseEnter={(e) => {
-                  if (!imageOpen) {
-                    e.currentTarget.style.backgroundColor =
-                      theme.secondaryButtonHoverColor ||
-                      theme.inputBackgroundColor;
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!imageOpen) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }
-                }}
-              >
-                <span>{labels.imageSectionTitle || "Image"}</span>
-                <ChevronDown
-                  className={clsx(
-                    cssStyles.chevron,
-                    imageOpen && cssStyles.chevronOpen
-                  )}
-                />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={cssStyles.collapsibleContent}>
-              <ImageSection
-                styles={styles}
-                onChange={handleStyleChange}
-                originalStyles={originalStylesRef}
-                onResetProperty={handleResetProperty}
-              />
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
-        {/* Text Section - Conditional */}
-        {shouldShowSection(element, "text") && (
-          <Collapsible open={textOpen} onOpenChange={setTextOpen}>
-            <CollapsibleTrigger asChild>
-              <div
-                className={cssStyles.collapsibleTrigger}
-                style={{
-                  backgroundColor: theme.inputBackgroundColor,
-                  color: theme.textColor,
-                  border: `1px solid ${theme.inputBorderColor}`,
-                }}
-                onMouseEnter={(e) => {
-                  if (!textOpen) {
-                    e.currentTarget.style.backgroundColor =
-                      theme.secondaryButtonHoverColor ||
-                      theme.inputBackgroundColor;
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!textOpen) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }
-                }}
-              >
-                <span>{labels.textSectionTitle || "Text"}</span>
-                <ChevronDown
-                  className={clsx(
-                    cssStyles.chevron,
-                    textOpen && cssStyles.chevronOpen
-                  )}
-                />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={cssStyles.collapsibleContent}>
-              <TextSection
-                styles={styles}
-                onChange={handleStyleChange}
-                originalStyles={originalStylesRef}
-                onResetProperty={handleResetProperty}
-              />
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
-        {/* Border Section - Always show */}
-        {shouldShowSection(element, "border") && (
-          <Collapsible open={borderOpen} onOpenChange={setBorderOpen}>
-            <CollapsibleTrigger asChild>
-              <div
-                className={cssStyles.collapsibleTrigger}
-                style={{
-                  backgroundColor: theme.inputBackgroundColor,
-                  color: theme.textColor,
-                  border: `1px solid ${theme.inputBorderColor}`,
-                }}
-                onMouseEnter={(e) => {
-                  if (!borderOpen) {
-                    e.currentTarget.style.backgroundColor =
-                      theme.secondaryButtonHoverColor ||
-                      theme.inputBackgroundColor;
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!borderOpen) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }
-                }}
-              >
-                <span>{labels.borderSectionTitle || "Border"}</span>
-                <ChevronDown
-                  className={clsx(
-                    cssStyles.chevron,
-                    borderOpen && cssStyles.chevronOpen
-                  )}
-                />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={cssStyles.collapsibleContent}>
-              <BorderSection
-                styles={styles}
-                onChange={handleStyleChange}
-                originalStyles={originalStylesRef}
-                onResetProperty={handleResetProperty}
-              />
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-
-        {/* Spacing Section - Always show */}
-        {shouldShowSection(element, "spacing") && (
-          <Collapsible open={spacingOpen} onOpenChange={setSpacingOpen}>
-            <CollapsibleTrigger asChild>
-              <div
-                className={cssStyles.collapsibleTrigger}
-                style={{
-                  backgroundColor: theme.inputBackgroundColor,
-                  color: theme.textColor,
-                  border: `1px solid ${theme.inputBorderColor}`,
-                }}
-                onMouseEnter={(e) => {
-                  if (!spacingOpen) {
-                    e.currentTarget.style.backgroundColor =
-                      theme.secondaryButtonHoverColor ||
-                      theme.inputBackgroundColor;
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!spacingOpen) {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }
-                }}
-              >
-                <span>{labels.spacingSectionTitle || "Spacing"}</span>
-                <ChevronDown
-                  className={clsx(
-                    cssStyles.chevron,
-                    spacingOpen && cssStyles.chevronOpen
-                  )}
-                />
-              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className={cssStyles.collapsibleContent}>
-              <SpacingSection
-                styles={styles}
-                onChange={handleStyleChange}
-                originalStyles={originalStylesRef}
-                onResetProperty={handleResetProperty}
-              />
-            </CollapsibleContent>
-          </Collapsible>
-        )}
-      </div>
-
-      {/* Action buttons - fixed at bottom */}
-      <div
-        className={cssStyles.actionsContainer}
-        style={{ borderColor: theme.borderColor }}
-      >
-        {/* Status indicator */}
-        {hasChanges && (
-          <div
-            className={cssStyles.statusIndicator}
-            style={{ color: theme.warningColor }}
-          >
-            <Circle className={cssStyles.statusIcon} />
-            <span style={{ fontFamily: "Satoshi", fontSize: "var(--text-xs)" }}>
-              {labels.unsavedChangesText || "Unsaved"}
-            </span>
-          </div>
-        )}
-
-        {/* Button group */}
-        <div className={cssStyles.buttonGroup}>
-          {/* Reset button */}
-          {hasChanges && (
-            <Button
-              variant="secondary"
-              onClick={handleReset}
-              disabled={isSaving}
-              className={cssStyles.resetButton}
-              style={{
-                backgroundColor: theme.secondaryButtonColor,
-                color: theme.secondaryButtonTextColor,
-              }}
-            >
-              {labels.resetButton || "Reset"}
-            </Button>
-          )}
-
-          {/* Save button */}
-          <Button
-            variant="default"
-            onClick={handleApply}
-            disabled={!hasChanges || isSaving}
-            className={cssStyles.applyButton}
-            style={{
-              backgroundColor:
-                hasChanges && !isSaving
-                  ? theme.buttonColor
-                  : theme.secondaryButtonColor,
-              color:
-                hasChanges && !isSaving
-                  ? theme.buttonTextColor
-                  : theme.secondaryButtonTextColor,
-            }}
-          >
-            {isSaving ? (
-              <span className={cssStyles.buttonContent}>
-                <span className={cssStyles.savingSpinner} />
-                {labels.savingText || "Saving..."}
-              </span>
-            ) : hasChanges ? (
-              labels.saveButton || "Save"
-            ) : (
-              <span className={cssStyles.buttonContent}>
-                <Check className={cssStyles.buttonIcon} />
-                Saved
-              </span>
-            )}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}