Skip to content

feat: auto-generate React forms from tx3 files #12

@rodrigomd94

Description

@rodrigomd94

Feature Request: Auto-generate React Forms from TX3 DSL Files

Summary

Add functionality to automatically generate React form components from TX3 DSL specification files, enabling developers to quickly create forms for transaction handling in NextJS and React projects.

Problem Statement

Currently, developers using our TX3 DSL need to manually create React forms that correspond to their transaction specifications. This leads to:

  • Duplicated effort in defining transaction structure in TX3 files and then recreating equivalent forms
  • Potential inconsistencies between DSL definitions and form implementations
  • Slower development cycles when transaction specifications change

Proposed Solution

Implement a form generation utility that:

  • Parses TX3 files and extracts transaction field definitions
  • Generates corresponding React form components with appropriate input types
  • Provides TypeScript interfaces for type safety
  • Supports common form libraries (React Hook Form, Formik, or native React state)

This could be a standalone tool or part of the next-tx3 plugin (or both)

Acceptance Criteria

  • Parse TX3 files and identify form-relevant fields and their types
  • Generate React components with appropriate input elements (text, number, select, etc.)
  • Include form validation based on TX3 field constraints
  • Provide TypeScript definitions for generated forms
  • Support both NextJS and standard React projects?
  • Include CLI tool for generating forms from TX3 files
  • Provide configuration options for form styling and behavior
  • Generate forms compatible with popular form libraries

Technical Considerations

  • Input: TX3 DSL files
  • Output: React component files (.tsx) and TypeScript type definitions
  • Dependencies: Should work with existing TX3 parser
  • Framework compatibility: NextJS, Create React App, Vite, etc.

Example Usage

# CLI usage example
tx3-forms generate --input ./transactions/payment.tx3 --output ./components/PaymentForm.tsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions