Live Playground

import React, { useState } from 'react';
import { DynamicForm } from '@benyue1978/next-dynamic-forms/core';
import { uiComponents } from './ui-components';
import { formConfig } from './form-config';
import { i18nAdapter } from './i18n';
import './global.css';

export default function App() {
  const [formData, setFormData] = useState({});
  const [currentStep, setCurrentStep] = useState(0);

  const nextStep = () => setCurrentStep(s => Math.min(s + 1, formConfig.steps.length - 1));
  const prevStep = () => setCurrentStep(s => Math.max(s - 1, 0));

  const handleSubmit = () => {
    console.log('Form submitted:', formData);
    alert('Form submitted successfully!');
  };

  return React.createElement('div', { className: 'form-container' },
    React.createElement('div', { className: 'form-card' },
      React.createElement('h1', { 
        style: { fontSize: '32px', fontWeight: 'bold', marginBottom: '24px', textAlign: 'center' }
      }, 'Multi-Step Registration Form'),
      
      
      React.createElement('div', { className: 'progress-container' },
        React.createElement('div', { className: 'progress-text' },
          `Step ${currentStep + 1} of ${formConfig.steps.length}`
        ),
        React.createElement('div', { className: 'progress-bar' },
          React.createElement('div', { 
            className: 'progress-fill',
            style: { width: `${((currentStep + 1) / formConfig.steps.length) * 100}%` }
          })
        )
      ),

      React.createElement(DynamicForm, {
        config: formConfig,
        currentStepIndex: currentStep,
        formData: formData,
        onDataChange: setFormData,
        onNext: currentStep === formConfig.steps.length - 1 ? handleSubmit : nextStep,
        onPrevious: prevStep,
        isFirstStep: currentStep === 0,
        isLastStep: currentStep === formConfig.steps.length - 1,
        uiComponents: uiComponents,
        i18n: i18nAdapter
      })
    )
  );
}