@promakeai/inspector 1.0.0 → 1.0.3

package/src/components/StyleEditor/TextSection.tsx

@@ -1,381 +0,0 @@
-/**
- * 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

@@ -1,133 +0,0 @@
-.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);
-  }
-}