@promakeai/inspector 0.2.1 → 1.0.0

package/src/components/StyleEditor/TextSection.tsx

@@ -0,0 +1,381 @@
+/**
+ * TextSection - Color, Font Size, Font Weight, Font Family, Text Align
+ */
+
+import type { StyleChanges } from "@promakeai/inspector-types";
+import { ColorPicker } from "./ColorPicker";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Button } from "../ui/button";
+import { AlignLeft, AlignCenter, AlignRight, AlignJustify, RotateCcw } from "lucide-react";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import cssStyles from "./shared.module.css";
+import { cn } from "@/lib/utils";
+
+interface TextSectionProps {
+  styles: StyleChanges;
+  onChange: (property: keyof StyleChanges, value: string) => void;
+  originalStyles: StyleChanges;
+  onResetProperty: (property: keyof StyleChanges) => void;
+}
+
+const FONT_FAMILIES = [
+  { label: "Sans", value: "ui-sans-serif, system-ui, sans-serif" },
+  { label: "Serif", value: "ui-serif, Georgia, serif" },
+  { label: "Mono", value: "ui-monospace, monospace" },
+];
+
+const TEXT_ALIGNS = [
+  { label: "Left", value: "left", Icon: AlignLeft },
+  { label: "Center", value: "center", Icon: AlignCenter },
+  { label: "Right", value: "right", Icon: AlignRight },
+  { label: "Justify", value: "justify", Icon: AlignJustify },
+];
+
+export function TextSection({ styles, onChange, originalStyles, onResetProperty }: TextSectionProps) {
+  const { labels, theme } = useInspectorStore();
+
+  const FONT_SIZES = [
+    { label: labels.fontSizeXS || "XS", value: "0.75rem" },
+    { label: labels.fontSizeSM || "SM", value: "0.875rem" },
+    { label: labels.fontSizeBase || "Base", value: "1rem" },
+    { label: labels.fontSizeLG || "LG", value: "1.125rem" },
+    { label: labels.fontSizeXL || "XL", value: "1.25rem" },
+    { label: labels.fontSize2XL || "2XL", value: "1.5rem" },
+    { label: labels.fontSize3XL || "3XL", value: "1.875rem" },
+    { label: labels.fontSize4XL || "4XL", value: "2.25rem" },
+    { label: labels.fontSize5XL || "5XL", value: "3rem" },
+  ];
+
+  const FONT_WEIGHTS = [
+    { label: labels.fontWeightThin || "Thin", value: "100" },
+    { label: labels.fontWeightExtralight || "Extralight", value: "200" },
+    { label: labels.fontWeightNormal || "Normal", value: "400" },
+    { label: labels.fontWeightMedium || "Medium", value: "500" },
+    { label: labels.fontWeightSemibold || "Semibold", value: "600" },
+    { label: labels.fontWeightBold || "Bold", value: "700" },
+    { label: labels.fontWeightExtrabold || "Extrabold", value: "800" },
+    { label: labels.fontWeightBlack || "Black", value: "900" },
+  ];
+
+  const TEXT_DECORATIONS = [
+    { label: labels.textDecorationNone || "None", value: "none" },
+    { label: labels.textDecorationUnderline || "Underline", value: "underline" },
+    { label: labels.textDecorationLineThrough || "Line Through", value: "line-through" },
+    { label: labels.textDecorationOverline || "Overline", value: "overline" },
+  ];
+  return (
+    <div className={cssStyles.section}>
+      {/* Color and Font Size - Side by side */}
+      <div className={cssStyles.grid2}>
+        <ColorPicker
+          label={labels.colorLabel || "Color"}
+          value={styles.color || "#000000"}
+          onChange={(value) => onChange("color", value)}
+          originalValue={originalStyles.color}
+          onReset={() => onResetProperty("color")}
+        />
+
+        {/* Font Size */}
+        <div>
+        <div className={cssStyles.labelContainer}>
+          <label className={cssStyles.label} style={{ color: theme.textColor }}>
+            {labels.fontSizeLabel || "Font Size"}
+          </label>
+          {styles.fontSize !== originalStyles.fontSize && (
+            <button
+              type="button"
+              onClick={() => onResetProperty("fontSize")}
+              className={cssStyles.resetIcon}
+              style={{ color: theme.secondaryTextColor }}
+              title="Reset to original"
+            >
+              <RotateCcw size={12} />
+            </button>
+          )}
+        </div>
+        <div
+          className={cssStyles.inputContainer}
+          style={{
+            backgroundColor: theme.inputBackgroundColor,
+            borderColor: theme.inputBorderColor,
+          }}
+        >
+          <Select
+            value={styles.fontSize || "1rem"}
+            onValueChange={(value) => onChange("fontSize", value)}
+          >
+            <SelectTrigger
+              className={cssStyles.input}
+              style={{
+                backgroundColor: "transparent",
+                color: theme.inputTextColor,
+              }}
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              style={{
+                backgroundColor: theme.backgroundColor,
+                borderColor: theme.borderColor,
+              }}
+            >
+              {FONT_SIZES.map((size) => (
+                <SelectItem
+                  key={size.value}
+                  value={size.value}
+                  style={{
+                    color: theme.textColor,
+                  }}
+                >
+                  {size.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        </div>
+      </div>
+
+      {/* Font Weight and Text Decoration - Side by side */}
+      <div className={cssStyles.grid2}>
+        {/* Font Weight */}
+        <div>
+        <div className={cssStyles.labelContainer}>
+          <label className={cssStyles.label} style={{ color: theme.textColor }}>
+            {labels.fontWeightLabel || "Font Weight"}
+          </label>
+          {styles.fontWeight !== originalStyles.fontWeight && (
+            <button
+              type="button"
+              onClick={() => onResetProperty("fontWeight")}
+              className={cssStyles.resetIcon}
+              style={{ color: theme.secondaryTextColor }}
+              title="Reset to original"
+            >
+              <RotateCcw size={12} />
+            </button>
+          )}
+        </div>
+        <div
+          className={cssStyles.inputContainer}
+          style={{
+            backgroundColor: theme.inputBackgroundColor,
+            borderColor: theme.inputBorderColor,
+          }}
+        >
+          <Select
+            value={styles.fontWeight || "400"}
+            onValueChange={(value) => onChange("fontWeight", value)}
+          >
+            <SelectTrigger
+              className={cssStyles.input}
+              style={{
+                backgroundColor: "transparent",
+                color: theme.inputTextColor,
+              }}
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              style={{
+                backgroundColor: theme.backgroundColor,
+                borderColor: theme.borderColor,
+              }}
+            >
+              {FONT_WEIGHTS.map((weight) => (
+                <SelectItem
+                  key={weight.value}
+                  value={weight.value}
+                  style={{
+                    color: theme.textColor,
+                  }}
+                >
+                  {weight.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        </div>
+
+        {/* Text Decoration */}
+        <div>
+          <div className={cssStyles.labelContainer}>
+            <label className={cssStyles.label} style={{ color: theme.textColor }}>
+              {labels.textDecorationLabel || "Text Decoration"}
+            </label>
+            {styles.textDecoration !== originalStyles.textDecoration && (
+              <button
+                type="button"
+                onClick={() => onResetProperty("textDecoration")}
+                className={cssStyles.resetIcon}
+                style={{ color: theme.secondaryTextColor }}
+                title="Reset to original"
+              >
+                <RotateCcw size={12} />
+              </button>
+            )}
+          </div>
+          <div
+            className={cssStyles.inputContainer}
+            style={{
+              backgroundColor: theme.inputBackgroundColor,
+              borderColor: theme.inputBorderColor,
+            }}
+          >
+            <Select
+              value={styles.textDecoration || "none"}
+              onValueChange={(value) => onChange("textDecoration", value)}
+            >
+              <SelectTrigger
+                className={cssStyles.input}
+                style={{
+                  backgroundColor: "transparent",
+                  color: theme.inputTextColor,
+                }}
+                size="sm"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent
+                style={{
+                  backgroundColor: theme.backgroundColor,
+                  borderColor: theme.borderColor,
+                }}
+              >
+                {TEXT_DECORATIONS.map((decoration) => (
+                  <SelectItem
+                    key={decoration.value}
+                    value={decoration.value}
+                    style={{
+                      color: theme.textColor,
+                    }}
+                  >
+                    {decoration.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+
+      {/* Font Family */}
+      <div>
+        <div className={cssStyles.labelContainer}>
+          <label className={cssStyles.label} style={{ color: theme.textColor }}>
+            {labels.fontFamilyLabel || "Font Family"}
+          </label>
+          {styles.fontFamily !== originalStyles.fontFamily && (
+            <button
+              type="button"
+              onClick={() => onResetProperty("fontFamily")}
+              className={cssStyles.resetIcon}
+              style={{ color: theme.secondaryTextColor }}
+              title="Reset to original"
+            >
+              <RotateCcw size={12} />
+            </button>
+          )}
+        </div>
+        <div
+          className={cn(
+            cssStyles.inputContainer,
+            cssStyles.buttonGroupContainer
+          )}
+          style={{
+            backgroundColor: theme.inputBackgroundColor,
+            borderColor: theme.inputBorderColor,
+          }}
+        >
+          <div className={cn(cssStyles.flexRow, cssStyles.tabButtons)}>
+            {FONT_FAMILIES.map((family) => (
+              <Button
+                key={family.value}
+                variant={
+                  styles.fontFamily === family.value ? "default" : "ghost"
+                }
+                onClick={() => onChange("fontFamily", family.value)}
+                className={cssStyles.fontButton}
+                style={{
+                  backgroundColor:
+                    styles.fontFamily === family.value
+                      ? theme.buttonColor
+                      : "transparent",
+                  color:
+                    styles.fontFamily === family.value
+                      ? theme.buttonTextColor
+                      : theme.textColor,
+                }}
+              >
+                {family.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Text Align */}
+      <div>
+        <div className={cssStyles.labelContainer}>
+          <label className={cssStyles.label} style={{ color: theme.textColor }}>
+            {labels.textAlignLabel || "Text Align"}
+          </label>
+          {styles.textAlign !== originalStyles.textAlign && (
+            <button
+              type="button"
+              onClick={() => onResetProperty("textAlign")}
+              className={cssStyles.resetIcon}
+              style={{ color: theme.secondaryTextColor }}
+              title="Reset to original"
+            >
+              <RotateCcw size={12} />
+            </button>
+          )}
+        </div>
+        <div
+          className={cn(
+            cssStyles.inputContainer,
+            cssStyles.buttonGroupContainer
+          )}
+          style={{
+            backgroundColor: theme.inputBackgroundColor,
+            borderColor: theme.inputBorderColor,
+          }}
+        >
+          <div className={cssStyles.grid4}>
+            {TEXT_ALIGNS.map((align) => (
+              <Button
+                key={align.value}
+                variant={styles.textAlign === align.value ? "default" : "ghost"}
+                onClick={() => onChange("textAlign", align.value)}
+                title={align.label}
+                className={cssStyles.alignButton}
+                style={{
+                  backgroundColor:
+                    styles.textAlign === align.value
+                      ? theme.buttonColor
+                      : "transparent",
+                  color:
+                    styles.textAlign === align.value
+                      ? theme.buttonTextColor
+                      : theme.textColor,
+                }}
+              >
+                <align.Icon className={cssStyles.alignIcon} />
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StyleEditor/index.module.css

@@ -0,0 +1,133 @@
+.container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.scrollArea {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  max-height: 40vh !important;
+  gap: 0;
+}
+
+/* Custom scrollbar for style editor */
+.scrollArea::-webkit-scrollbar {
+  width: 3px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+.scrollArea::-webkit-scrollbar-thumb:hover {
+  background: var(--color-muted);
+}
+
+.collapsibleTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-3) var(--spacing-2);
+  font-family: "Satoshi", var(--font-family-sans);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.collapsibleTrigger:hover {
+  opacity: 0.95;
+}
+
+.collapsibleContent {
+  padding: var(--spacing-1) var(--spacing-1-5);
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-1);
+  border-bottom-left-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+}
+
+.chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.actionsContainer {
+  flex-shrink: 0;
+  padding-top: var(--spacing-1-5);
+}
+
+.statusIndicator {
+  font-size: var(--text-xs);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+  margin-bottom: var(--spacing-2);
+}
+
+.statusIcon {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  fill: currentColor;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.resetButton {
+  flex-shrink: 0;
+}
+
+.applyButton {
+  flex: 1;
+}
+
+.savingSpinner {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
+}
+
+.buttonContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1-5);
+}
+
+.buttonIcon {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}