@promakeai/inspector 0.2.1 → 1.0.0

package/src/components/ui/button.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./button.module.css";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
+  asChild?: boolean;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  style,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+  const { theme } = useInspectorStore();
+
+  // Map size prop to CSS module class name
+  const sizeClassName = size === "icon" ? "sizeIcon" 
+    : size === "icon-sm" ? "sizeIconSm"
+    : size === "icon-lg" ? "sizeIconLg"
+    : `size${size.charAt(0).toUpperCase()}${size.slice(1)}`;
+
+  // Theme-based styles applied via inline styles
+  const variantStyles: Record<string, React.CSSProperties> = {
+    default: {
+      background: theme.buttonColor,
+      color: theme.buttonTextColor,
+    },
+    destructive: {
+      background: theme.dangerButtonColor || theme.errorColor,
+      color: "#ffffff",
+    },
+    outline: {
+      background: theme.backgroundColor,
+      color: theme.textColor,
+      borderColor: theme.borderColor,
+    },
+    secondary: {
+      background: theme.secondaryButtonColor || theme.inputBackgroundColor,
+      color: theme.secondaryButtonTextColor || theme.textColor,
+    },
+    ghost: {
+      background: "transparent",
+      color: theme.textColor,
+    },
+    link: {
+      background: "transparent",
+      color: theme.buttonColor,
+    },
+  };
+
+  return (
+    <Comp
+      data-slot="button"
+      className={clsx(
+        styles[variant],
+        styles[sizeClassName],
+        className
+      )}
+      style={{ ...variantStyles[variant], ...style }}
+      {...props}
+    />
+  );
+}
+
+export { Button };

package/src/components/ui/color-picker.module.css

@@ -0,0 +1,112 @@
+.defaultTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  height: fit-content;
+  width: fit-content;
+  aspect-ratio: 1;
+  padding: 0.2rem;
+}
+
+.defaultTriggerInner {
+  height: 2rem;
+  aspect-ratio: 1;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.defaultTriggerIcon {
+  color: var(--color-white);
+  width: 1rem;
+  aspect-ratio: 1;
+}
+
+.pickerContent {
+  width: 18rem;
+  height: 25rem;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  font-family: 'Satoshi', var(--font-family-sans);
+  font-weight: var(--font-medium);
+  font-size: var(--text-xl);
+}
+
+.colorPicker {
+  width: 100% !important;
+  aspect-ratio: 1;
+}
+
+.controls {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.hexRow {
+  width: 100%;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hexLabel {
+  font-family: 'Satoshi', var(--font-family-sans);
+  margin-right: 0.5rem;
+}
+
+.hexInput {
+  width: 100%;
+}
+
+.alphaInput {
+  width: 5rem;
+}
+
+@media (min-width: 768px) {
+  .defaultTrigger {
+    padding: 0.2vw;
+  }
+
+  .defaultTriggerInner {
+    height: 2vw;
+  }
+
+  .defaultTriggerIcon {
+    width: 1vw;
+  }
+
+  .controls {
+    gap: 1.5vw;
+    margin-top: 0.5vw;
+  }
+
+  .hexRow {
+    height: 2.5vw;
+  }
+
+  .hexLabel {
+    margin-right: 0.5vw;
+  }
+
+  .alphaInput {
+    width: 5vw;
+  }
+}
+

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,146 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback, useMemo } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Pipette } from "lucide-react";
+import { RgbaColorPicker } from "react-colorful";
+import { debounce } from "lodash";
+import { Input } from "./input";
+import styles from "./color-picker.module.css";
+
+const DEFAULT_CHILDREN = (
+  <div
+    className={styles.defaultTrigger}
+    style={{
+      background: "linear-gradient(to bottom right, rgba(249, 168, 212, 0.2), rgba(196, 180, 255, 0.2), rgba(164, 179, 255, 0.2))",
+    }}
+  >
+    <div
+      className={styles.defaultTriggerInner}
+      style={{
+        background: "linear-gradient(to bottom right, #f9a8d4, #c4b4ff, #a4b3ff)",
+      }}
+    >
+      <Pipette className={styles.defaultTriggerIcon} />
+    </div>
+  </div>
+);
+
+type TColorPicker = {
+  value: string;
+  onChange: (value: string) => void;
+  handleAdd?: (value: string) => void;
+  children?: React.ReactNode;
+};
+
+const ColorPicker: React.FC<TColorPicker> = ({
+  value,
+  onChange,
+  handleAdd,
+  children = DEFAULT_CHILDREN,
+}) => {
+  const color = useMemo(() => {
+    const rgba = hexToRgba(value);
+    return { hex: value, alpha: rgba ? rgba.a : 1 };
+  }, [value]);
+
+  const debouncedOnChange = useMemo(
+    () => debounce((newValue: string) => onChange(newValue), 50),
+    [onChange]
+  );
+
+  const handleChangeAlpha = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newAlpha = parseFloat(e.target.value);
+    const rgba = hexToRgba(color.hex);
+    if (rgba) {
+      const newHex = rgbaToHex(rgba.r, rgba.g, rgba.b, newAlpha);
+      onChange(newHex);
+    }
+  };
+
+  const handleChangeColor = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor: any = e.target.value;
+    onChange(newColor);
+  };
+
+  function rgbaToHex(r: number, g: number, b: number, a: number = 1) {
+    const toHex = (n: number) => {
+      let hex = n.toString(16);
+      return hex.length === 1 ? "0" + hex : hex;
+    };
+
+    const alpha = isNaN(a) ? 255 : Math.round(a * 255);
+
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}${
+      alpha === 255 ? "" : toHex(alpha)
+    }`;
+  }
+
+  function hexToRgba(hex: string) {
+    if (!hex) return null;
+    hex = hex.replace(/^#/, "");
+
+    if (hex.length === 3) {
+      hex = hex
+        .split("")
+        .map((char) => char + char)
+        .join("");
+    }
+
+    if (hex.length !== 6 && hex.length !== 8) return null;
+
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;
+
+    return { r, g, b, a };
+  }
+
+  const handleColorChange = useCallback(
+    (newColor: { r: number; g: number; b: number; a: number }) => {
+      const { r, g, b, a } = newColor;
+      const newHex = rgbaToHex(r, g, b, a);
+      debouncedOnChange(newHex);
+    },
+    [debouncedOnChange]
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger>{children}</PopoverTrigger>
+      <PopoverContent align="center" side="top" className={styles.pickerContent}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>Colour Picker</h1>
+          <RgbaColorPicker
+            color={hexToRgba(color.hex) as any}
+            onChange={handleColorChange}
+            className={styles.colorPicker}
+          />
+          <div className={styles.controls}>
+            <div className={styles.hexRow}>
+              <label className={styles.hexLabel}>HEX</label>
+              <Input
+                className={styles.hexInput}
+                style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0, letterSpacing: "0.1em" }}
+                value={color.hex}
+                onChange={handleChangeColor}
+              />
+              <Input
+                type="text"
+                min="0"
+                max="1"
+                step="0.01"
+                value={color.alpha.toFixed(2)}
+                onChange={handleChangeAlpha}
+                className={styles.alphaInput}
+                style={{ paddingRight: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, letterSpacing: "0.1em" }}
+              />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default ColorPicker;

package/src/components/ui/input.module.css

@@ -0,0 +1,49 @@
+.input {
+  height: var(--spacing-9);
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--radius-md);
+  border: 1px solid;
+  background: transparent;
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-base);
+  box-shadow: none;
+  transition: all var(--transition-fast);
+  outline: none;
+}
+
+.input:focus {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.5);
+}
+
+.input:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input::placeholder {
+  opacity: 0.6;
+}
+
+.input::selection {
+  background-color: var(--color-blue-500);
+  color: var(--color-white);
+}
+
+.input::file-selector-button {
+  display: inline-flex;
+  height: var(--spacing-7);
+  border: 0;
+  background: transparent;
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+@media (min-width: 768px) {
+  .input {
+    font-size: var(--text-sm);
+  }
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import clsx from "clsx";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./input.module.css";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, style, ...props }, ref) => {
+    const { theme } = useInspectorStore();
+
+    const inputStyles: React.CSSProperties = {
+      borderColor: theme.borderColor,
+      color: theme.textColor,
+      ...style,
+    };
+
+    return (
+      <input
+        type={type}
+        data-slot="input"
+        className={clsx(styles.input, className)}
+        style={inputStyles}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export { Input };

package/src/components/ui/popover.module.css

@@ -0,0 +1,42 @@
+.content {
+  z-index: var(--z-inspector-popover);
+  border-radius: var(--radius-md);
+  border: 1px solid;
+  box-shadow: var(--shadow-lg);
+  outline: none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: auto;
+  position: relative;
+}
+
+.content[data-state="open"] {
+  animation-name: fadeIn;
+}
+
+.content[data-state="closed"] {
+  animation-name: fadeOut;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}

package/src/components/ui/popover.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import clsx from "clsx";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./popover.module.css";
+
+// Get inspector root container for portal
+const getInspectorRoot = () => {
+  return document.getElementById('inspector-canvas-root') || document.body;
+};
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  style,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  const { theme } = useInspectorStore();
+
+  return (
+    <PopoverPrimitive.Portal container={getInspectorRoot()}>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        data-inspector-ignore
+        align={align}
+        sideOffset={sideOffset}
+        className={clsx(styles.content, className)}
+        style={{
+          backgroundColor: theme.backgroundColor,
+          color: theme.textColor,
+          borderColor: theme.borderColor,
+          ...style,
+        }}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/components/ui/select.module.css

@@ -0,0 +1,160 @@
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-sm);
+  text-align: left;
+  white-space: nowrap;
+  box-shadow: var(--shadow-xs);
+  transition: var(--transition-fast);
+  outline: none;
+  cursor: pointer;
+}
+
+.trigger:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.trigger[data-size="default"] {
+  height: var(--spacing-9);
+}
+
+.trigger[data-size="sm"] {
+  height: var(--spacing-8);
+}
+
+.trigger svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.content {
+  position: relative;
+  z-index: var(--z-inspector-popover);
+  max-height: var(--radix-select-content-available-height);
+  min-width: 8rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid;
+  box-shadow: var(--shadow-lg);
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: auto;
+}
+
+.content[data-state="open"] {
+  animation-name: slideIn;
+}
+
+.content[data-state="closed"] {
+  animation-name: slideOut;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.viewport {
+  padding: var(--spacing-1);
+}
+
+.viewportPopper {
+  composes: viewport;
+  height: var(--radix-select-trigger-height);
+  width: 100%;
+  min-width: var(--radix-select-trigger-width);
+  scroll-margin-block: var(--spacing-1);
+}
+
+.scrollButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--spacing-6);
+  cursor: default;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-2);
+  width: 100%;
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-1-5) var(--spacing-2);
+  padding-left: var(--spacing-8);
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-sm);
+  text-align: left;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  transition: var(--transition-fast);
+}
+
+.item:hover:not([data-disabled]) {
+  opacity: 0.8;
+}
+
+.item:focus {
+  opacity: 0.9;
+}
+
+.item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.itemIndicator {
+  position: absolute;
+  left: var(--spacing-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-3-5);
+  height: var(--spacing-3-5);
+}
+
+.separator {
+  height: 1px;
+  margin: var(--spacing-1) calc(var(--spacing-1) * -1);
+}
+
+.label {
+  padding: var(--spacing-1-5) var(--spacing-2);
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  text-align: left;
+}