@promakeai/inspector 0.2.1 → 1.0.0

package/src/components/StyleEditor/DisplaySection.tsx

@@ -0,0 +1,349 @@
+/**
+ * DisplaySection - Display mode and Opacity
+ */
+
+import type { StyleChanges } from "@promakeai/inspector-types";
+import { NumberInput } from "./NumberInput";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { RotateCcw } from "lucide-react";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./shared.module.css";
+
+interface DisplaySectionProps {
+  styles: StyleChanges;
+  onChange: (property: keyof StyleChanges, value: string) => void;
+  originalStyles: StyleChanges;
+  onResetProperty: (property: keyof StyleChanges) => void;
+}
+
+export function DisplaySection({
+  styles: styleValues,
+  onChange,
+  originalStyles,
+  onResetProperty,
+}: DisplaySectionProps) {
+  const { labels, theme } = useInspectorStore();
+
+  const DISPLAY_MODES = [
+    { label: labels.displayBlock || "Block", value: "block" },
+    { label: labels.displayInline || "Inline", value: "inline" },
+    { label: labels.displayInlineBlock || "Inline Block", value: "inline-block" },
+    { label: labels.displayFlex || "Flex", value: "flex" },
+    { label: labels.displayGrid || "Grid", value: "grid" },
+    { label: labels.displayNone || "None", value: "none" },
+  ];
+
+  const JUSTIFY_CONTENT_OPTIONS = [
+    { label: labels.justifyContentFlexStart || "Flex Start", value: "flex-start" },
+    { label: labels.justifyContentCenter || "Center", value: "center" },
+    { label: labels.justifyContentFlexEnd || "Flex End", value: "flex-end" },
+    { label: labels.justifyContentSpaceBetween || "Space Between", value: "space-between" },
+    { label: labels.justifyContentSpaceAround || "Space Around", value: "space-around" },
+    { label: labels.justifyContentSpaceEvenly || "Space Evenly", value: "space-evenly" },
+  ];
+
+  const ALIGN_ITEMS_OPTIONS = [
+    { label: labels.alignItemsFlexStart || "Flex Start", value: "flex-start" },
+    { label: labels.alignItemsCenter || "Center", value: "center" },
+    { label: labels.alignItemsFlexEnd || "Flex End", value: "flex-end" },
+    { label: labels.alignItemsStretch || "Stretch", value: "stretch" },
+    { label: labels.alignItemsBaseline || "Baseline", value: "baseline" },
+  ];
+
+  const FLEX_DIRECTION_OPTIONS = [
+    { label: labels.flexDirectionRow || "Row", value: "row" },
+    { label: labels.flexDirectionRowReverse || "Row Reverse", value: "row-reverse" },
+    { label: labels.flexDirectionColumn || "Column", value: "column" },
+    { label: labels.flexDirectionColumnReverse || "Column Reverse", value: "column-reverse" },
+  ];
+
+  return (
+    <div className={styles.section}>
+      {/* Display Mode and Opacity - Side by side */}
+      <div className={styles.grid2}>
+        {/* Display Mode */}
+        <div>
+        <div className={styles.labelContainer}>
+          <label className={styles.label} style={{ color: theme.textColor }}>
+            {labels.displayLabel || "Display"}
+          </label>
+          {styleValues.display !== originalStyles.display && (
+            <button
+              type="button"
+              onClick={() => onResetProperty("display")}
+              className={styles.resetIcon}
+              style={{ color: theme.secondaryTextColor }}
+              title="Reset to original"
+            >
+              <RotateCcw size={12} />
+            </button>
+          )}
+        </div>
+        <div
+          className={styles.inputContainer}
+          style={{
+            backgroundColor: theme.inputBackgroundColor,
+            borderColor: theme.inputBorderColor,
+          }}
+        >
+          <Select
+            value={styleValues.display || "block"}
+            onValueChange={(value) => onChange("display", value)}
+          >
+            <SelectTrigger
+              className={styles.input}
+              style={{
+                backgroundColor: "transparent",
+                color: theme.inputTextColor,
+              }}
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              style={{
+                backgroundColor: theme.backgroundColor,
+                borderColor: theme.borderColor,
+              }}
+            >
+              {DISPLAY_MODES.map((mode) => (
+                <SelectItem
+                  key={mode.value}
+                  value={mode.value}
+                  style={{
+                    color: theme.textColor,
+                  }}
+                >
+                  {mode.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        </div>
+
+        {/* Opacity */}
+        <NumberInput
+          label={labels.opacityLabel || "Opacity"}
+          value={styleValues.opacity}
+          onChange={(value) => onChange("opacity", value)}
+          min={0}
+          max={1}
+          step={0.1}
+          unit=""
+          originalValue={originalStyles.opacity}
+          onReset={() => onResetProperty("opacity")}
+        />
+      </div>
+
+      {/* Flex and Flex Direction - Side by side */}
+      <div className={styles.grid2}>
+        {/* Flex */}
+        <NumberInput
+          label={labels.flexLabel || "Flex"}
+          value={styleValues.flex}
+          onChange={(value) => onChange("flex", value)}
+          min={0}
+          max={100}
+          step={1}
+          unit=""
+          originalValue={originalStyles.flex}
+          onReset={() => onResetProperty("flex")}
+        />
+
+        {/* Flex Direction */}
+        <div>
+          <div className={styles.labelContainer}>
+            <label className={styles.label} style={{ color: theme.textColor }}>
+              {labels.flexDirectionLabel || "Flex Direction"}
+            </label>
+            {styleValues.flexDirection !== originalStyles.flexDirection && (
+              <button
+                type="button"
+                onClick={() => onResetProperty("flexDirection")}
+                className={styles.resetIcon}
+                style={{ color: theme.secondaryTextColor }}
+                title="Reset to original"
+              >
+                <RotateCcw size={12} />
+              </button>
+            )}
+          </div>
+          <div
+            className={styles.inputContainer}
+            style={{
+              backgroundColor: theme.inputBackgroundColor,
+              borderColor: theme.inputBorderColor,
+            }}
+          >
+            <Select
+              value={styleValues.flexDirection || "row"}
+              onValueChange={(value) => onChange("flexDirection", value)}
+            >
+              <SelectTrigger
+                className={styles.input}
+                style={{
+                  backgroundColor: "transparent",
+                  color: theme.inputTextColor,
+                }}
+                size="sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent
+                style={{
+                  backgroundColor: theme.backgroundColor,
+                  borderColor: theme.borderColor,
+                }}
+              >
+                {FLEX_DIRECTION_OPTIONS.map((option) => (
+                  <SelectItem
+                    key={option.value}
+                    value={option.value}
+                    style={{
+                      color: theme.textColor,
+                    }}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Justify Content and Align Items - Side by side */}
+      <div className={styles.grid2}>
+        {/* Justify Content */}
+        <div>
+          <div className={styles.labelContainer}>
+            <label className={styles.label} style={{ color: theme.textColor }}>
+              {labels.justifyContentLabel || "Justify Content"}
+            </label>
+            {styleValues.justifyContent !== originalStyles.justifyContent && (
+              <button
+                type="button"
+                onClick={() => onResetProperty("justifyContent")}
+                className={styles.resetIcon}
+                style={{ color: theme.secondaryTextColor }}
+                title="Reset to original"
+              >
+                <RotateCcw size={12} />
+              </button>
+            )}
+          </div>
+          <div
+            className={styles.inputContainer}
+            style={{
+              backgroundColor: theme.inputBackgroundColor,
+              borderColor: theme.inputBorderColor,
+            }}
+          >
+            <Select
+              value={styleValues.justifyContent || "flex-start"}
+              onValueChange={(value) => onChange("justifyContent", value)}
+            >
+              <SelectTrigger
+                className={styles.input}
+                style={{
+                  backgroundColor: "transparent",
+                  color: theme.inputTextColor,
+                }}
+                size="sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent
+                style={{
+                  backgroundColor: theme.backgroundColor,
+                  borderColor: theme.borderColor,
+                }}
+              >
+                {JUSTIFY_CONTENT_OPTIONS.map((option) => (
+                  <SelectItem
+                    key={option.value}
+                    value={option.value}
+                    style={{
+                      color: theme.textColor,
+                    }}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Align Items */}
+        <div>
+          <div className={styles.labelContainer}>
+            <label className={styles.label} style={{ color: theme.textColor }}>
+              {labels.alignItemsLabel || "Align Items"}
+            </label>
+            {styleValues.alignItems !== originalStyles.alignItems && (
+              <button
+                type="button"
+                onClick={() => onResetProperty("alignItems")}
+                className={styles.resetIcon}
+                style={{ color: theme.secondaryTextColor }}
+                title="Reset to original"
+              >
+                <RotateCcw size={12} />
+              </button>
+            )}
+          </div>
+          <div
+            className={styles.inputContainer}
+            style={{
+              backgroundColor: theme.inputBackgroundColor,
+              borderColor: theme.inputBorderColor,
+            }}
+          >
+            <Select
+              value={styleValues.alignItems || "stretch"}
+              onValueChange={(value) => onChange("alignItems", value)}
+            >
+              <SelectTrigger
+                className={styles.input}
+                style={{
+                  backgroundColor: "transparent",
+                  color: theme.inputTextColor,
+                }}
+                size="sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent
+                style={{
+                  backgroundColor: theme.backgroundColor,
+                  borderColor: theme.borderColor,
+                }}
+              >
+                {ALIGN_ITEMS_OPTIONS.map((option) => (
+                  <SelectItem
+                    key={option.value}
+                    value={option.value}
+                    style={{
+                      color: theme.textColor,
+                    }}
+                  >
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/StyleEditor/ImageSection.tsx

@@ -0,0 +1,105 @@
+/**
+ * ImageSection - Object Fit for image elements
+ */
+
+import type { StyleChanges } from "@promakeai/inspector-types";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { RotateCcw } from "lucide-react";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./shared.module.css";
+
+interface ImageSectionProps {
+  styles: StyleChanges;
+  onChange: (property: keyof StyleChanges, value: string) => void;
+  originalStyles: StyleChanges;
+  onResetProperty: (property: keyof StyleChanges) => void;
+}
+
+export function ImageSection({
+  styles: styleValues,
+  onChange,
+  originalStyles,
+  onResetProperty,
+}: ImageSectionProps) {
+  const { labels, theme } = useInspectorStore();
+
+  const OBJECT_FIT_OPTIONS = [
+    { label: labels.objectFitFill || "Fill", value: "fill" },
+    { label: labels.objectFitContain || "Contain", value: "contain" },
+    { label: labels.objectFitCover || "Cover", value: "cover" },
+    { label: labels.objectFitNone || "None", value: "none" },
+    { label: labels.objectFitScaleDown || "Scale Down", value: "scale-down" },
+  ];
+
+  return (
+    <div className={styles.section}>
+      {/* Object Fit */}
+      <div>
+        <div className={styles.labelContainer}>
+          <label className={styles.label} style={{ color: theme.textColor }}>
+            {labels.objectFitLabel || "Object Fit"}
+          </label>
+          {styleValues.objectFit !== originalStyles.objectFit && (
+            <button
+              type="button"
+              onClick={() => onResetProperty("objectFit")}
+              className={styles.resetIcon}
+              style={{ color: theme.secondaryTextColor }}
+              title="Reset to original"
+            >
+              <RotateCcw size={12} />
+            </button>
+          )}
+        </div>
+        <div
+          className={styles.inputContainer}
+          style={{
+            backgroundColor: theme.inputBackgroundColor,
+            borderColor: theme.inputBorderColor,
+          }}
+        >
+          <Select
+            value={styleValues.objectFit || "fill"}
+            onValueChange={(value) => onChange("objectFit", value)}
+          >
+            <SelectTrigger
+              className={styles.input}
+              style={{
+                backgroundColor: "transparent",
+                color: theme.inputTextColor,
+              }}
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              style={{
+                backgroundColor: theme.backgroundColor,
+                borderColor: theme.borderColor,
+              }}
+            >
+              {OBJECT_FIT_OPTIONS.map((option) => (
+                <SelectItem
+                  key={option.value}
+                  value={option.value}
+                  style={{
+                    color: theme.textColor,
+                  }}
+                >
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/StyleEditor/LayoutSection.tsx

@@ -0,0 +1,63 @@
+/**
+ * LayoutSection - Background Color, Height, Width
+ */
+
+import type { StyleChanges } from "@promakeai/inspector-types";
+import { ColorPicker } from "./ColorPicker";
+import { NumberInput } from "./NumberInput";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./shared.module.css";
+
+interface LayoutSectionProps {
+  styles: StyleChanges;
+  onChange: (property: keyof StyleChanges, value: string) => void;
+  originalStyles: StyleChanges;
+  onResetProperty: (property: keyof StyleChanges) => void;
+}
+
+export function LayoutSection({ 
+  styles: styleValues, 
+  onChange, 
+  originalStyles,
+  onResetProperty 
+}: LayoutSectionProps) {
+  const { labels } = useInspectorStore();
+
+  return (
+    <div className={styles.section}>
+      <ColorPicker
+        label={labels.backgroundColorLabel || "Background Color"}
+        value={styleValues.backgroundColor || "#ffffff"}
+        onChange={(value) => onChange("backgroundColor", value)}
+        originalValue={originalStyles.backgroundColor}
+        onReset={() => onResetProperty("backgroundColor")}
+      />
+
+      <div className={styles.grid2}>
+        <NumberInput
+          label={labels.heightLabel || "Height"}
+          value={styleValues.height}
+          onChange={(value) => onChange("height", value)}
+          min={0}
+          max={2000}
+          step={1}
+          unit="px"
+          originalValue={originalStyles.height}
+          onReset={() => onResetProperty("height")}
+        />
+
+        <NumberInput
+          label={labels.widthLabel || "Width"}
+          value={styleValues.width}
+          onChange={(value) => onChange("width", value)}
+          min={0}
+          max={2000}
+          step={1}
+          unit="px"
+          originalValue={originalStyles.width}
+          onReset={() => onResetProperty("width")}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/StyleEditor/NumberInput.tsx

@@ -0,0 +1,138 @@
+/**
+ * NumberInput - Input with drag-to-adjust handle (Figma-style)
+ */
+
+import { useState, useRef, useEffect } from "react";
+import { Input } from "../ui/input";
+import { GripVertical, RotateCcw } from "lucide-react";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./shared.module.css";
+
+interface NumberInputProps {
+  label: string;
+  value: string | undefined;
+  onChange: (value: string) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  originalValue?: string;
+  onReset?: () => void;
+}
+
+export function NumberInput({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 1000,
+  step = 1,
+  unit = "px",
+  originalValue,
+  onReset,
+}: NumberInputProps) {
+  const { labels, theme } = useInspectorStore();
+  const hasChanged = originalValue !== undefined && value !== originalValue;
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef(0);
+  const dragStartValue = useRef(0);
+  const dragHandleRef = useRef<HTMLDivElement>(null);
+
+  const parseValue = (val: string | undefined): number => {
+    if (!val) return 0;
+    const parsed = parseFloat(val.replace(/[^\d.-]/g, ""));
+    return isNaN(parsed) ? 0 : parsed;
+  };
+
+  const currentValue = parseValue(value);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaX = e.clientX - dragStartX.current;
+      const deltaValue = Math.round(deltaX / 2) * step; // 2px movement = 1 step
+      let newValue = dragStartValue.current + deltaValue;
+
+      // Clamp value
+      newValue = Math.max(min, Math.min(max, newValue));
+
+      onChange(`${newValue}${unit}`);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.cursor = "";
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, step, min, max, unit, onChange]);
+
+  const handleDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    dragStartX.current = e.clientX;
+    dragStartValue.current = currentValue;
+    document.body.style.cursor = "ew-resize";
+  };
+
+  return (
+    <div className={styles.inputField}>
+      <div className={styles.labelContainer}>
+        <label className={styles.label} style={{ color: theme.textColor }}>
+          {label}
+        </label>
+        {hasChanged && onReset && (
+          <button
+            type="button"
+            onClick={onReset}
+            className={styles.resetIcon}
+            style={{ color: theme.secondaryTextColor }}
+            title="Reset to original"
+          >
+            <RotateCcw size={12} />
+          </button>
+        )}
+      </div>
+      <div
+        className={styles.inputContainer}
+        style={{
+          backgroundColor: theme.inputBackgroundColor,
+          borderColor: theme.inputBorderColor,
+        }}
+      >
+        <Input
+          type="text"
+          value={value || ""}
+          onChange={handleInputChange}
+          className={styles.input}
+          style={{
+            backgroundColor: "transparent",
+            color: theme.inputTextColor,
+          }}
+        />
+        <div
+          ref={dragHandleRef}
+          onMouseDown={handleDragStart}
+          className={styles.dragHandle}
+          style={{
+            color: theme.secondaryTextColor || theme.textColor,
+            opacity: isDragging ? 1 : 0.6,
+          }}
+        >
+          <GripVertical className={styles.dragHandleIcon} />
+        </div>
+      </div>
+    </div>
+  );
+}