Filter Editor

A powerful Monaco-based DSL editor for creating filter expressions with automatic SQL and Supabase query generation.

Features

• 🎯 Monaco Editor Integration: Full-featured code editor with syntax highlighting
• 🔍 Intelligent Autocomplete: Context-aware suggestions for identifiers, operators, and values
• 🎨 Customizable Themes: Configurable syntax highlighting colors
• 📝 Real-time Parsing: Live validation and error reporting
• 🗄️ SQL Generation: Automatic conversion to SQL WHERE clauses
• ⚡ Supabase Integration: Generate Supabase query chains
• 🔧 TypeScript Support: Full type safety and IntelliSense

Installation

npm install @xerian/filter-editor

Quick Start

import React, { useState, useMemo } from "react";
import {
  FilterEditor,
  DSLParser,
  Identifier,
} from "@xerian/filter-editor";

const identifiers: Identifier[] = [
  { name: "name", type: "string" },
  { name: "age", type: "number" },
  { name: "active", type: "boolean" },
  { name: "status", type: ["active", "inactive", "pending"] },
];

function MyApp() {
  const [dslContent, setDslContent] = useState('name eq "John", age gt 25');
  const parser = useMemo(() => new DSLParser(identifiers), []);
  const parseResult = useMemo(
    () => parser.parse(dslContent),
    [parser, dslContent],
  );

  return (
    <FilterEditor
      value={dslContent}
      onChange={setDslContent}
      identifiers={identifiers}
      parseResult={parseResult}
    />
  );
}

API Reference

FilterEditor Props

| Prop | Type | Description | | -------------- | ------------------------- | -------------------------------------- | | value | string | Current DSL content | | onChange | (value: string) => void | Callback when content changes | | identifiers | Identifier[] | Available identifiers for autocomplete | | parseResult | ParseResult | Parsing results for error highlighting | | themeColors? | ThemeColors | Optional theme customization |

Identifier Types

interface Identifier {
  name: string; // Display name in editor
  columnName?: string; // Database column name (defaults to name)
  type: IdentifierType; // Data type
  enumValues?: string[]; // For enum types
}

type IdentifierType = "string" | "number" | "boolean" | "date" | string[];

Supported Operators

• eq - equals
• neq - not equals
• gt - greater than
• gte - greater than or equal
• lt - less than
• lte - less than or equal
• like - SQL LIKE pattern matching
• ilike - case-insensitive LIKE

Theme Customization

const customTheme = {
  operator: "#FF6B6B",
  identifier: "#4ECDC4",
  string: "#45B7D1",
  number: "#96CEB4",
  boolean: "#FFEAA7",
  foreground: "#2D3436",
  background: "#FFFFFF",
};

<FilterEditor themeColors={customTheme} {...otherProps} />;

DSL Syntax

The DSL uses a simple syntax: identifier operator value

Examples

name eq "John Doe"
age gt 25, active eq true
email like "@company.com"
status eq "active", salary gte 50000

Multiple Expressions

Use commas to separate multiple filter expressions:

name eq "John", age gt 25, status neq "inactive"

SQL Generation

const sqlResult = parser.parseToSQL(dslContent, "users");
console.log(sqlResult.sql);
// Output: SELECT * FROM users WHERE full_name = 'John' AND age > 25

Supabase Integration

const supabaseResult = parser.parseToSupabase(dslContent, "users");
console.log(supabaseResult.query);
// Output: supabase.from('users').select('*').eq('full_name', 'John').gt('age', 25)

License

This software requires attribution for use. See LICENSE for details.

Author

Andrew Clark - TDB

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.