@lub-crm/forms 1.0.0

package/src/utils/countries.ts

@@ -0,0 +1,163 @@
+// Country data for country/state fields
+
+export interface Country {
+  code: string;
+  name: string;
+}
+
+export interface State {
+  code: string;
+  name: string;
+  countryCode: string;
+}
+
+// ISO 3166-1 alpha-2 country codes - most common countries
+export const countries: Country[] = [
+  { code: "US", name: "United States" },
+  { code: "CA", name: "Canada" },
+  { code: "GB", name: "United Kingdom" },
+  { code: "AU", name: "Australia" },
+  { code: "DE", name: "Germany" },
+  { code: "FR", name: "France" },
+  { code: "ES", name: "Spain" },
+  { code: "IT", name: "Italy" },
+  { code: "NL", name: "Netherlands" },
+  { code: "BE", name: "Belgium" },
+  { code: "AT", name: "Austria" },
+  { code: "CH", name: "Switzerland" },
+  { code: "SE", name: "Sweden" },
+  { code: "NO", name: "Norway" },
+  { code: "DK", name: "Denmark" },
+  { code: "FI", name: "Finland" },
+  { code: "IE", name: "Ireland" },
+  { code: "PT", name: "Portugal" },
+  { code: "PL", name: "Poland" },
+  { code: "CZ", name: "Czech Republic" },
+  { code: "JP", name: "Japan" },
+  { code: "KR", name: "South Korea" },
+  { code: "CN", name: "China" },
+  { code: "IN", name: "India" },
+  { code: "BR", name: "Brazil" },
+  { code: "MX", name: "Mexico" },
+  { code: "AR", name: "Argentina" },
+  { code: "CL", name: "Chile" },
+  { code: "CO", name: "Colombia" },
+  { code: "PE", name: "Peru" },
+  { code: "NZ", name: "New Zealand" },
+  { code: "SG", name: "Singapore" },
+  { code: "HK", name: "Hong Kong" },
+  { code: "TW", name: "Taiwan" },
+  { code: "MY", name: "Malaysia" },
+  { code: "TH", name: "Thailand" },
+  { code: "PH", name: "Philippines" },
+  { code: "ID", name: "Indonesia" },
+  { code: "VN", name: "Vietnam" },
+  { code: "ZA", name: "South Africa" },
+  { code: "AE", name: "United Arab Emirates" },
+  { code: "SA", name: "Saudi Arabia" },
+  { code: "IL", name: "Israel" },
+  { code: "TR", name: "Turkey" },
+  { code: "RU", name: "Russia" },
+  { code: "UA", name: "Ukraine" },
+  { code: "GR", name: "Greece" },
+  { code: "HU", name: "Hungary" },
+  { code: "RO", name: "Romania" },
+];
+
+// US States
+export const usStates: State[] = [
+  { code: "AL", name: "Alabama", countryCode: "US" },
+  { code: "AK", name: "Alaska", countryCode: "US" },
+  { code: "AZ", name: "Arizona", countryCode: "US" },
+  { code: "AR", name: "Arkansas", countryCode: "US" },
+  { code: "CA", name: "California", countryCode: "US" },
+  { code: "CO", name: "Colorado", countryCode: "US" },
+  { code: "CT", name: "Connecticut", countryCode: "US" },
+  { code: "DE", name: "Delaware", countryCode: "US" },
+  { code: "FL", name: "Florida", countryCode: "US" },
+  { code: "GA", name: "Georgia", countryCode: "US" },
+  { code: "HI", name: "Hawaii", countryCode: "US" },
+  { code: "ID", name: "Idaho", countryCode: "US" },
+  { code: "IL", name: "Illinois", countryCode: "US" },
+  { code: "IN", name: "Indiana", countryCode: "US" },
+  { code: "IA", name: "Iowa", countryCode: "US" },
+  { code: "KS", name: "Kansas", countryCode: "US" },
+  { code: "KY", name: "Kentucky", countryCode: "US" },
+  { code: "LA", name: "Louisiana", countryCode: "US" },
+  { code: "ME", name: "Maine", countryCode: "US" },
+  { code: "MD", name: "Maryland", countryCode: "US" },
+  { code: "MA", name: "Massachusetts", countryCode: "US" },
+  { code: "MI", name: "Michigan", countryCode: "US" },
+  { code: "MN", name: "Minnesota", countryCode: "US" },
+  { code: "MS", name: "Mississippi", countryCode: "US" },
+  { code: "MO", name: "Missouri", countryCode: "US" },
+  { code: "MT", name: "Montana", countryCode: "US" },
+  { code: "NE", name: "Nebraska", countryCode: "US" },
+  { code: "NV", name: "Nevada", countryCode: "US" },
+  { code: "NH", name: "New Hampshire", countryCode: "US" },
+  { code: "NJ", name: "New Jersey", countryCode: "US" },
+  { code: "NM", name: "New Mexico", countryCode: "US" },
+  { code: "NY", name: "New York", countryCode: "US" },
+  { code: "NC", name: "North Carolina", countryCode: "US" },
+  { code: "ND", name: "North Dakota", countryCode: "US" },
+  { code: "OH", name: "Ohio", countryCode: "US" },
+  { code: "OK", name: "Oklahoma", countryCode: "US" },
+  { code: "OR", name: "Oregon", countryCode: "US" },
+  { code: "PA", name: "Pennsylvania", countryCode: "US" },
+  { code: "RI", name: "Rhode Island", countryCode: "US" },
+  { code: "SC", name: "South Carolina", countryCode: "US" },
+  { code: "SD", name: "South Dakota", countryCode: "US" },
+  { code: "TN", name: "Tennessee", countryCode: "US" },
+  { code: "TX", name: "Texas", countryCode: "US" },
+  { code: "UT", name: "Utah", countryCode: "US" },
+  { code: "VT", name: "Vermont", countryCode: "US" },
+  { code: "VA", name: "Virginia", countryCode: "US" },
+  { code: "WA", name: "Washington", countryCode: "US" },
+  { code: "WV", name: "West Virginia", countryCode: "US" },
+  { code: "WI", name: "Wisconsin", countryCode: "US" },
+  { code: "WY", name: "Wyoming", countryCode: "US" },
+  { code: "DC", name: "District of Columbia", countryCode: "US" },
+];
+
+// Canadian Provinces
+export const caProvinces: State[] = [
+  { code: "AB", name: "Alberta", countryCode: "CA" },
+  { code: "BC", name: "British Columbia", countryCode: "CA" },
+  { code: "MB", name: "Manitoba", countryCode: "CA" },
+  { code: "NB", name: "New Brunswick", countryCode: "CA" },
+  { code: "NL", name: "Newfoundland and Labrador", countryCode: "CA" },
+  { code: "NS", name: "Nova Scotia", countryCode: "CA" },
+  { code: "ON", name: "Ontario", countryCode: "CA" },
+  { code: "PE", name: "Prince Edward Island", countryCode: "CA" },
+  { code: "QC", name: "Quebec", countryCode: "CA" },
+  { code: "SK", name: "Saskatchewan", countryCode: "CA" },
+  { code: "NT", name: "Northwest Territories", countryCode: "CA" },
+  { code: "NU", name: "Nunavut", countryCode: "CA" },
+  { code: "YT", name: "Yukon", countryCode: "CA" },
+];
+
+// Get states for a country
+export function getStatesForCountry(countryCode: string): State[] {
+  switch (countryCode) {
+    case "US":
+      return usStates;
+    case "CA":
+      return caProvinces;
+    default:
+      return [];
+  }
+}
+
+// Get country by code
+export function getCountryByCode(code: string): Country | undefined {
+  return countries.find((c) => c.code === code);
+}
+
+// Get state by code
+export function getStateByCode(
+  stateCode: string,
+  countryCode: string,
+): State | undefined {
+  const states = getStatesForCountry(countryCode);
+  return states.find((s) => s.code === stateCode);
+}

package/src/utils/css-variables.ts

@@ -0,0 +1,63 @@
+import type { FormDesign } from "@/api/types";
+
+/**
+ * Convert FormDesign to CSS custom properties
+ */
+export function formDesignToCssVariables(
+  design: FormDesign,
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+
+  // Colors
+  if (design.background_color) {
+    vars["--lub-bg-color"] = design.background_color;
+  }
+  if (design.text_color) {
+    vars["--lub-text-color"] = design.text_color;
+  }
+  if (design.primary_color) {
+    vars["--lub-primary-color"] = design.primary_color;
+  }
+  if (design.border_color) {
+    vars["--lub-border-color"] = design.border_color;
+  }
+
+  // Typography
+  if (design.font_family) {
+    vars["--lub-font-family"] = design.font_family;
+  }
+  if (design.font_size) {
+    vars["--lub-font-size"] = design.font_size;
+  }
+
+  // Spacing
+  if (design.padding) {
+    vars["--lub-padding"] = design.padding;
+  }
+  if (design.field_spacing) {
+    vars["--lub-field-spacing"] = design.field_spacing;
+  }
+
+  // Button styling
+  if (design.button_style) {
+    if (design.button_style.background_color) {
+      vars["--lub-btn-bg"] = design.button_style.background_color;
+    }
+    if (design.button_style.text_color) {
+      vars["--lub-btn-text"] = design.button_style.text_color;
+    }
+    if (design.button_style.border_radius) {
+      vars["--lub-btn-radius"] = design.button_style.border_radius;
+    }
+  }
+
+  return vars;
+}
+
+/**
+ * Apply CSS variables to an element's style
+ */
+export function applyCssVariables(design: FormDesign): React.CSSProperties {
+  const vars = formDesignToCssVariables(design);
+  return vars as React.CSSProperties;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./cn";
+export * from "./css-variables";
+export * from "./countries";

package/src/validation/conditional.ts

@@ -0,0 +1,170 @@
+import type { Condition, FormField, Operator } from "@/api/types";
+
+/**
+ * Evaluate if a field should be visible based on its conditional logic
+ */
+export function evaluateFieldVisibility(
+  field: FormField,
+  formValues: Record<string, unknown>,
+): boolean {
+  const logic = field.conditional_logic;
+  if (!logic) return true;
+
+  // Check show_if condition
+  if (logic.show_if) {
+    return evaluateCondition(logic.show_if, formValues);
+  }
+
+  // Check hide_if condition
+  if (logic.hide_if) {
+    return !evaluateCondition(logic.hide_if, formValues);
+  }
+
+  return true;
+}
+
+/**
+ * Evaluate if a field should be required based on its conditional logic
+ */
+export function evaluateFieldRequired(
+  field: FormField,
+  formValues: Record<string, unknown>,
+): boolean {
+  const logic = field.conditional_logic;
+
+  // Start with base required state
+  let isRequired = field.required;
+
+  // Check required_if condition
+  if (logic?.required_if) {
+    const conditionMet = evaluateCondition(logic.required_if, formValues);
+    isRequired = isRequired || conditionMet;
+  }
+
+  return isRequired;
+}
+
+/**
+ * Evaluate a condition against form values
+ */
+export function evaluateCondition(
+  condition: Condition,
+  formValues: Record<string, unknown>,
+): boolean {
+  const fieldValue = formValues[condition.field_name];
+  let result = compareValues(fieldValue, condition.operator, condition.value);
+
+  // Evaluate AND conditions
+  if (condition.and && condition.and.length > 0) {
+    for (const andCond of condition.and) {
+      if (!evaluateCondition(andCond, formValues)) {
+        return false;
+      }
+    }
+  }
+
+  // Evaluate OR conditions - at least one must be true
+  if (condition.or && condition.or.length > 0) {
+    let orResult = false;
+    for (const orCond of condition.or) {
+      if (evaluateCondition(orCond, formValues)) {
+        orResult = true;
+        break;
+      }
+    }
+    // For OR conditions to pass, main condition AND at least one OR must be true
+    result = result && orResult;
+  }
+
+  return result;
+}
+
+/**
+ * Compare field value against condition value using the specified operator
+ */
+function compareValues(
+  fieldValue: unknown,
+  operator: Operator,
+  compareValue: unknown,
+): boolean {
+  switch (operator) {
+    case "equals":
+      return normalizeValue(fieldValue) === normalizeValue(compareValue);
+
+    case "not_equals":
+      return normalizeValue(fieldValue) !== normalizeValue(compareValue);
+
+    case "contains":
+      return String(fieldValue ?? "")
+        .toLowerCase()
+        .includes(String(compareValue).toLowerCase());
+
+    case "not_contains":
+      return !String(fieldValue ?? "")
+        .toLowerCase()
+        .includes(String(compareValue).toLowerCase());
+
+    case "greater_than":
+      return Number(fieldValue) > Number(compareValue);
+
+    case "less_than":
+      return Number(fieldValue) < Number(compareValue);
+
+    case "is_empty":
+      return isEmpty(fieldValue);
+
+    case "is_not_empty":
+      return !isEmpty(fieldValue);
+
+    default:
+      return true;
+  }
+}
+
+/**
+ * Normalize value for comparison
+ */
+function normalizeValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (Array.isArray(value)) return value.sort().join(",");
+  return String(value).toLowerCase().trim();
+}
+
+/**
+ * Check if value is empty
+ */
+function isEmpty(value: unknown): boolean {
+  if (value === null || value === undefined) return true;
+  if (typeof value === "string") return value.trim() === "";
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "object") return Object.keys(value).length === 0;
+  return false;
+}
+
+/**
+ * Get all fields that should be visible based on conditional logic
+ */
+export function getVisibleFields(
+  fields: FormField[],
+  formValues: Record<string, unknown>,
+): FormField[] {
+  return fields.filter((field) => evaluateFieldVisibility(field, formValues));
+}
+
+/**
+ * Get required field names based on conditional logic
+ */
+export function getRequiredFieldNames(
+  fields: FormField[],
+  formValues: Record<string, unknown>,
+): Set<string> {
+  const required = new Set<string>();
+
+  for (const field of fields) {
+    if (evaluateFieldRequired(field, formValues)) {
+      required.add(field.name);
+    }
+  }
+
+  return required;
+}

package/src/validation/index.ts

@@ -0,0 +1,2 @@
+export * from "./schema-builder";
+export * from "./conditional";