Formedible Form Builder

1"use client";
2import React from "react";
3import { Button } from "@/components/ui/button";
4import { Download, Upload } from "lucide-react";
5import { BuilderProvider, useBuilderContext } from "./BuilderContext";
6import { TabContainer } from "./TabContainer";
7import { defaultTabs } from "./default-tabs";
8import type { FormBuilderProps } from "@/lib/formedible/builder-types";
9 
10// Internal FormBuilder component that uses context
11const FormBuilderInternal: React.FC<{
12  tabs: FormBuilderProps["tabs"];
13  defaultTab?: string;
14  onTabChange?: FormBuilderProps["onTabChange"];
15  className?: string;
16}> = ({ 
17  tabs = defaultTabs, 
18  defaultTab = "builder",
19  onTabChange,
20  className
21}) => {
22  const { exportConfig, importConfig, submitConfig } = useBuilderContext();
23 
24  return (
25    <div className="w-full min-h-[800px] flex flex-col bg-background">
26      {/* Header */}
27      <div className="border-b bg-card">
28        <div className="flex h-16 items-center px-6">
29          <div className="flex items-center space-x-4">
30            <h1 className="text-2xl font-bold">Form Builder 2.0</h1>
31          </div>
32          <div className="ml-auto flex items-center space-x-4">
33            <Button variant="secondary" onClick={exportConfig}>
34              <Download className="h-4 w-4 mr-2" />
35              Export
36            </Button>
37            <Button variant="secondary" onClick={importConfig}>
38              <Upload className="h-4 w-4 mr-2" />
39              Import
40            </Button>
41          </div>
42        </div>
43      </div>
44 
45      <div className="flex-1 flex min-h-0">
46        <div className="flex-1 flex flex-col">
47          <TabContainer
48            tabs={tabs}
49            defaultTab={defaultTab}
50            onTabChange={onTabChange}
51            className={className}
52          />
53        </div>
54      </div>
55    </div>
56  );
57};
58 
59// Main FormBuilder component with provider
60export const FormBuilder: React.FC<FormBuilderProps> = ({
61  tabs = defaultTabs,
62  defaultTab = "builder",
63  enabledTabs,
64  onTabChange,
65  className,
66  initialData,
67  onSubmit,
68  isLoading,
69}) => {
70  // Filter tabs based on enabledTabs if provided
71  const finalTabs = enabledTabs 
72    ? tabs.filter(tab => enabledTabs.includes(tab.id))
73    : tabs;
74 
75  return (
76    <BuilderProvider 
77      initialData={initialData}
78      onSubmit={onSubmit}
79      isLoading={isLoading}
80    >
81      <FormBuilderInternal
82        tabs={finalTabs}
83        defaultTab={defaultTab}
84        onTabChange={onTabChange}
85// … truncated