@codefluss/base-types 0.0.1-alpha.1

package/src/dependencies.ts

@@ -0,0 +1,606 @@
+/**
+ * Dependency Injection Types
+ *
+ * These types define the external dependencies that the plugin requires
+ * from the host application. All dependencies must be injected via props.
+ *
+ * @package @codefluss/base-types
+ * @version 1.0.0
+ */
+
+import type { ComponentType } from 'react';
+
+/**
+ * Responsive font size values for different breakpoints
+ */
+export interface ResponsiveFontSizes {
+  mobile: string;
+  tablet: string;
+  desktop: string;
+}
+
+/**
+ * Responsive line height values for different breakpoints
+ */
+export interface ResponsiveLineHeights {
+  mobile: number;
+  tablet: number;
+  desktop: number;
+}
+
+/**
+ * Design System Font Configuration
+ */
+export interface DesignSystemFont {
+  family: string;
+  size: string;
+  weight: string;
+  lineHeight: string;
+  element?: string; // HTML element (h1, h2, p, etc.)
+  responsive?: ResponsiveFontSizes; // Optional responsive font sizes
+  responsiveLineHeight?: ResponsiveLineHeights; // Optional responsive line heights
+}
+
+/**
+ * Design System Color Configuration
+ */
+export interface DesignSystemColor {
+  value: string;
+  label: string;
+}
+
+/**
+ * Box Model Value - Single side values
+ */
+export interface BoxModelValue {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+/**
+ * Grid Preset Values (Container-specific)
+ * Clean camelCase naming
+ */
+export interface GridPresetValues {
+  columns: number;
+  rows: number;
+  columnGap: number;
+  rowGap: number;
+  maxWidth: number;
+  margin: number | string;
+  alignmentHorizontal: string;
+  alignmentVertical: string;
+  alignmentContent: string;
+}
+
+/**
+ * Responsive spacing values for different breakpoints
+ * Only 3 viewports: mobile, tablet, desktop
+ */
+export interface ResponsiveBoxValues {
+  mobile: BoxModelValue;
+  tablet: BoxModelValue;
+  desktop: BoxModelValue;
+}
+
+/**
+ * Spacing Preset - Combined margin + padding with responsive values
+ */
+export interface SpacingPreset {
+  presetId: string;
+  name: string;
+  margin: ResponsiveBoxValues;
+  padding: ResponsiveBoxValues;
+}
+
+/**
+ * Responsive spacing scale entry
+ */
+export interface ResponsiveSpacingScale {
+  mobile: number;
+  tablet: number;
+  desktop: number;
+  unit: string;
+}
+
+/**
+ * Design System Spacing Configuration
+ * Clean, type-safe API
+ */
+export interface DesignSystemSpacing {
+  /** Spacing scale values */
+  scale: number[];
+  
+  /** Responsive spacing scales by token */
+  scaleResponsive: Map<string, ResponsiveSpacingScale>;
+  
+  /**
+   * Get a spacing preset by ID
+   * @param presetId - The preset identifier
+   * @returns The spacing preset (guaranteed to exist, falls back to 'default')
+   */
+  getPreset(presetId: string): SpacingPreset;
+}
+
+/**
+ * Design System Grid Configuration
+ * Clean, type-safe API
+ */
+export interface DesignSystemGrid {
+  /**
+   * Get a grid preset by ID
+   * @param presetId - The preset identifier
+   * @returns The grid preset values (guaranteed to exist, falls back to 'default')
+   */
+  getPreset(presetId: string): GridPresetValues;
+}
+
+/**
+ * Breakpoint configuration for responsive design
+ */
+export interface BreakpointConfig {
+  minWidth: number;
+  name: string;
+}
+
+/**
+ * Design System Breakpoints
+ */
+export interface DesignSystemBreakpoints {
+  mobile: BreakpointConfig;
+  tablet: BreakpointConfig;
+  desktop: BreakpointConfig;
+}
+
+/**
+ * Design System Layout Configuration
+ */
+export interface DesignSystemLayout {
+  maxWidth?: string;
+  gap?: string;
+  padding?: string;
+  margin?: string;
+}
+
+/**
+ * Button Style Preset Configuration (Unified)
+ * 
+ * Complete button style preset that replaces the separate
+ * ButtonSizePreset and ButtonVariantPreset interfaces.
+ * Matches design_system_button_styles table structure.
+ */
+export interface ButtonStylePreset {
+  // Identifiers
+  id: string;
+  presetId: string;
+  name: string;
+  size: string;
+  
+  // Typography
+  fontSizePresetId?: string;
+  fontWeight?: string;
+  
+  // Spacing (reference to spacing preset)
+  spacingPresetId?: string;
+  
+  // Border
+  borderRadiusPresetId?: string;
+  
+  // Effect Presets
+  shadowPresetId?: string;
+  focusRingPresetId?: string;
+  
+  // Animation Presets
+  animationPresetId?: string;
+  hoverEffectPresetId?: string;
+  
+  // Colors - Default State
+  backgroundColorPresetId?: string;
+  textColorPresetId?: string;
+  borderColorPresetId?: string;
+  
+  // Colors - Hover State
+  hoverBackgroundColorPresetId?: string;
+  hoverTextColorPresetId?: string;
+  hoverBorderColorPresetId?: string;
+  
+  // Colors - Active/Pressed State
+  activeBackgroundColorPresetId?: string;
+  activeTextColorPresetId?: string;
+  activeBorderColorPresetId?: string;
+  
+  // Transition Durations (in milliseconds)
+  defaultTransitionDuration: number;
+  hoverTransitionDuration: number;
+  activeTransitionDuration: number;
+  
+  // Disabled State
+  disabledOpacity: number;
+  
+  // Text Decoration per state
+  defaultTextDecoration?: string;
+  hoverTextDecoration?: string;
+  activeTextDecoration?: string;
+  
+  // Text Transform per state
+  defaultTextTransform?: string;
+  hoverTextTransform?: string;
+  activeTextTransform?: string;
+  
+  // Metadata
+  usageDescription?: string;
+  isDefault: boolean;
+}
+
+/**
+ * @deprecated Use ButtonStylePreset instead
+ * Legacy Button Size Preset Configuration
+ */
+export interface ButtonSizePreset {
+  button_id: string;
+  name: string;
+  padding: string;
+  fontSize: string;
+  iconSize: string;
+  minHeight: string;
+  borderRadius?: string;
+  fontWeight?: string;
+  usage_description?: string;
+}
+
+/**
+ * @deprecated Use ButtonStylePreset instead
+ * Legacy Button Variant Preset Configuration
+ */
+export interface ButtonVariantPreset {
+  background: string;
+  hoverBackground: string;
+  textColor: string;
+  borderColor: string;
+}
+
+/**
+ * Shadow Configuration
+ */
+export interface ShadowConfig {
+  value: string;
+  dark?: string;
+}
+
+/**
+ * Accordion Style Preset Configuration
+ * 
+ * Complete accordion style preset for collapsible components.
+ * Matches design_system_accordion_presets table structure.
+ */
+export interface AccordionStylePreset {
+  // Identifiers
+  id: string;
+  presetId: string;
+  name: string;
+  
+  // Header Settings
+  headerHeight?: string;
+  headerFontSizePresetId?: string;
+  headerFontWeight?: string;
+  headerPaddingPresetId?: string;
+  headerBackgroundColorPresetId?: string;
+  headerHoverBackgroundColorPresetId?: string;
+  headerTextColorPresetId?: string;
+  headerBorderColorPresetId?: string;
+  
+  // Body Settings
+  bodyMinHeight?: string;
+  bodyPaddingPresetId?: string;
+  bodyBackgroundColorPresetId?: string;
+  bodyBorderColorPresetId?: string;
+  
+  // General
+  borderRadiusPresetId?: string;
+  shadowPresetId?: string;
+  spacingPresetId?: string;
+  
+  // Animation
+  transitionDuration: number;
+  transitionEasing?: string;
+  
+  // State Colors
+  expandedBackgroundColorPresetId?: string;
+  expandedTextColorPresetId?: string;
+  
+  // Metadata
+  usageDescription?: string;
+  isDefault: boolean;
+}
+
+/**
+ * Form Style Preset Configuration (Unified)
+ * 
+ * Complete form style preset that contains all styling for form elements.
+ * Matches design_system_form_styles table structure.
+ */
+export interface FormStylePreset {
+  // Identifiers
+  id: string;
+  presetId: string;
+  name: string;
+  variant: string;
+  size: string;
+  
+  // Typography
+  fontSizePresetId?: string;
+  
+  // Spacing
+  paddingX: number;
+  paddingY: number;
+  borderWidth: number;
+  borderRadiusPresetId?: string;
+  
+  // Effect Presets
+  shadowPresetId?: string;
+  focusRingPresetId?: string;
+  
+  // Animation Presets
+  animationPresetId?: string;
+  hoverEffectPresetId?: string;
+  
+  // Colors - Default State
+  backgroundColorPresetId?: string;
+  textColorPresetId?: string;
+  borderColorPresetId?: string;
+  placeholderColorPresetId?: string;
+  focusRingColorPresetId?: string;
+  
+  // Colors - Hover State
+  hoverBackgroundColorPresetId?: string;
+  hoverBorderColorPresetId?: string;
+  
+  // Disabled State
+  disabledOpacity: number;
+  
+  // Error State
+  errorBorderColorPresetId?: string;
+  errorTextColorPresetId?: string;
+  
+  // Submit Button Reference
+  submitButtonPresetId?: string;
+  
+  // Container Styling
+  containerBackgroundColorPresetId?: string;
+  containerSpacingPresetId?: string;
+  
+  // Label Styling
+  labelFontPresetId?: string;
+  labelColorPresetId?: string;
+  
+  // Description/Help Text Styling
+  descriptionFontPresetId?: string;
+  descriptionColorPresetId?: string;
+  
+  // Field Spacing
+  fieldGap?: number;
+  
+  // Metadata
+  usageDescription?: string;
+  isDefault: boolean;
+}
+
+/**
+ * Design System API
+ *
+ * Interface for accessing global design system values.
+ * The host application must provide an implementation.
+ */
+export interface PluginDesignSystem {
+  fonts: {
+    getPreset: (presetId: string) => DesignSystemFont | undefined;
+  };
+  colors: {
+    getPreset: (presetId: string) => DesignSystemColor | undefined;
+  };
+  spacing: DesignSystemSpacing;
+  grid?: DesignSystemGrid; // Container-specific, optional
+  layout: {
+    getPreset: (presetId: string) => DesignSystemLayout | undefined;
+  };
+  breakpoints: {
+    getConfig: () => DesignSystemBreakpoints;
+  };
+  /**
+   * Button System (optional)
+   * Provides unified button style presets from design system database
+   * Each preset contains colors, typography, spacing, and effects
+   */
+  buttons?: {
+    /**
+     * Get button style preset by ID
+     * @param presetId - Button preset identifier (e.g., 'primary', 'secondary', 'custom-1')
+     * @returns Button style preset or undefined if not found
+     */
+    getPreset: (presetId: string) => ButtonStylePreset | undefined;
+    /**
+     * List all available button style presets
+     * @returns Array of button style presets sorted by sort_order
+     */
+    listPresets?: () => ButtonStylePreset[];
+  };
+  /**
+   * Form System (optional)
+   * Provides unified form style presets from design system database
+   * Each preset contains colors, typography, spacing, and effects for form elements
+   */
+  forms?: {
+    /**
+     * Get form style preset by ID
+     * @param presetId - Form preset identifier (e.g., 'default', 'outlined', 'custom-1')
+     * @returns Form style preset or undefined if not found
+     */
+    getPreset: (presetId: string) => FormStylePreset | undefined;
+    /**
+     * List all available form style presets
+     * @returns Array of form style presets sorted by sort_order
+     */
+    listPresets?: () => FormStylePreset[];
+  };
+  /**
+   * Accordion System (optional)
+   * Provides unified accordion style presets from design system database
+   * Each preset contains colors, typography, spacing, and effects for accordion components
+   */
+  accordions?: {
+    /**
+     * Get accordion style preset by ID
+     * @param presetId - Accordion preset identifier (e.g., 'default', 'sm', 'lg', 'custom-1')
+     * @returns Accordion style preset or undefined if not found
+     */
+    getPreset: (presetId: string) => AccordionStylePreset | undefined;
+    /**
+     * List all available accordion style presets
+     * @returns Array of accordion style presets sorted by sort_order
+     */
+    listPresets?: () => AccordionStylePreset[];
+  };
+  /**
+   * Shadow System (optional)
+   * Provides shadow presets with light and dark mode variants
+   */
+  shadows?: {
+    getPreset: (presetId: string) => ShadowConfig;
+  };
+}
+
+/**
+ * Utility Functions API
+ *
+ * Interface for utility functions required by the plugin.
+ * The host application must provide implementations.
+ */
+export interface PluginUtils {
+  /**
+   * Class name utility (e.g., clsx, classnames, tailwind-merge)
+   * Combines multiple class names intelligently
+   */
+  cn: (...inputs: any[]) => string;
+}
+
+/**
+ * Plugin Renderer Props
+ *
+ * Props interface for the PluginRenderer component.
+ * This is injected by the host application to render child plugins.
+ */
+export interface PluginRendererProps {
+  /**
+   * Plugin ID to render (e.g., 'base-text', 'base-image')
+   */
+  pluginId: string;
+
+  /**
+   * Element ID for tracking
+   */
+  elementId: string;
+
+  /**
+   * Plugin data/configuration
+   */
+  data: Record<string, unknown>;
+
+  /**
+   * Current language code
+   */
+  language: string;
+
+  /**
+   * Is in editor mode?
+   */
+  isEditorMode?: boolean;
+
+  /**
+   * Is element selected?
+   */
+  isSelected?: boolean;
+
+  /**
+   * Click handler
+   */
+  onClick?: (id: string) => void;
+}
+
+/**
+ * Plugin Callbacks
+ *
+ * Event callbacks that plugins can use to communicate with the host application.
+ */
+export interface PluginCallbacks {
+  /**
+   * Called when content changes (for text, rich-text components)
+   * @param elementId - ID of the element
+   * @param language - Language code
+   * @param content - New content value
+   */
+  onContentChange?: (
+    elementId: string,
+    language: string,
+    content: string
+  ) => void;
+
+  /**
+   * Called when child element is dropped into container
+   * @param containerId - ID of the container element
+   * @param droppedElementId - ID of the dropped element
+   * @param index - Optional insertion index
+   */
+  onChildAdded?: (
+    containerId: string,
+    droppedElementId: string,
+    index?: number
+  ) => void;
+
+  /**
+   * Called when child element is removed from container
+   * @param containerId - ID of the container element
+   * @param removedElementId - ID of the removed element
+   */
+  onChildRemoved?: (containerId: string, removedElementId: string) => void;
+
+  /**
+   * Called when container layout is changed
+   * @param containerId - ID of the container element
+   * @param layoutMode - New layout mode
+   */
+  onLayoutChange?: (
+    containerId: string,
+    layoutMode: 'flexbox' | 'grid'
+  ) => void;
+}
+
+/**
+ * Complete Plugin Dependencies
+ *
+ * All external dependencies that must be injected into the plugin.
+ * PLUGIN-DRIVEN ARCHITECTURE: Plugins receive dependencies from the host app.
+ */
+export interface PluginDependencies {
+  /**
+   * Design System API for accessing global design tokens
+   */
+  designSystem: PluginDesignSystem;
+
+  /**
+   * Utility functions (e.g., cn for classnames)
+   */
+  utils: PluginUtils;
+
+  /**
+   * PluginRenderer component for rendering child plugins
+   * CRITICAL: Container plugins need this to render their NESTED children
+   */
+  PluginRenderer: ComponentType<PluginRendererProps>;
+
+  /**
+   * Optional callbacks for communication with host app
+   */
+  callbacks?: PluginCallbacks;
+}

package/src/index.ts

@@ -0,0 +1,68 @@
+/**
+ * @codefluss/base-types
+ *
+ * Shared type definitions for the Codefluss Page Builder plugin system.
+ * This package provides the single source of truth for all plugin-related types.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+// Export common types (single source of truth)
+export * from './common-types';
+
+// Export all types from plugin-system
+export type {
+	PropertyControlType,
+	PropertyType,
+	PropertyCategory,
+	PropertyPriority,
+	SliderConfig,
+	NumberConfig,
+	NumberWithUnitConfig,
+	SelectConfig,
+	InputConfig,
+	ColorPickerConfig,
+	TextareaConfig,
+	BoxModelConfig,
+	SpacingConfig,
+	TypographyToolbarConfig,
+	GradientEditorConfig,
+	BorderEditorConfig,
+	AlignmentToggleConfig,
+	DisplayConfig,
+	PropertyUIConfig,
+	PropertyValidation,
+	PropertyDefinition,
+	PluginMeta,
+	PluginCapabilities,
+	PluginConfig,
+	// Dual-Component Architecture Props
+	PluginDependencies,
+	BasePluginProps,
+	EditorModeProps,
+	RendererProps,
+	ContainerProps,
+} from "./plugin-system";
+
+// Export all types from dependencies
+export type {
+	ResponsiveFontSizes,
+	DesignSystemFont,
+	DesignSystemColor,
+	BreakpointConfig,
+	DesignSystemBreakpoints,
+	BoxModelValue,
+	ResponsiveBoxValues,
+	SpacingPreset,
+	ResponsiveSpacingScale,
+	GridPresetValues,
+	DesignSystemSpacing,
+	DesignSystemGrid,
+	DesignSystemLayout,
+	PluginDesignSystem,
+	PluginUtils,
+	PluginRendererProps,
+	PluginCallbacks,
+} from "./dependencies";
+