@promakeai/inspector 0.2.1 → 1.0.0

package/src/components/StyleEditor/index.tsx

@@ -0,0 +1,612 @@
+/**
+ * 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>
+  );
+}