init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import type React from "react";
import { FieldRenderer } from "./field-renderer";
import { type ProviderConfig, getFieldsForRow } from "../types/provider";
import type { FieldDefinition, MessageDefinition } from "../types/common";
import type { FC } from "react";
 
interface ProviderFormProps {
  provider: ProviderConfig;
  formData: Record<string, any>;
  errors: Record<string, string>;
  onChange: (name: string, value: any) => void;
  onBlur?: (name: string, value: any) => void;
  isEditMode?: boolean;
  target?: "import" | "export";
}
 
export const ProviderForm: React.FC<ProviderFormProps> = ({
  provider,
  formData,
  errors,
  onChange,
  onBlur,
  isEditMode = false,
  target,
}) => {
  const getHiddenFields = (field: FieldDefinition | MessageDefinition) =>
    field.type === "hidden" && (!target || !field.target || field.target === target);
 
  return (
    <div className="space-y-6">
      {/* Render hidden fields first, outside of layout */}
      {provider.fields.filter(getHiddenFields).map((field) => (
        <FieldRenderer
          key={field.name}
          field={field as FieldDefinition}
          value={formData[field.name]}
          onChange={onChange}
          onBlur={onBlur}
          error={errors[field.name]}
          isEditMode={isEditMode}
          formData={formData}
        />
      ))}
 
      {/* Render visible fields in layout */}
      {provider.layout.map((row, rowIndex) => {
        const fields = getFieldsForRow(provider.fields, row.fields, target);
        return (
          fields.length > 0 && (
            <div
              key={rowIndex}
              className="grid gap-6"
              style={{
                gridTemplateColumns: `repeat(${row.fields.length}, 1fr)`,
              }}
            >
              {fields.map((field) => {
                // Skip hidden fields from layout - they'll be rendered separately
                if (field.type === "hidden") {
                  return null;
                }
                const Message =
                  field.type === "message"
                    ? field.content instanceof Function
                      ? field.content
                      : ((() => field.content) as FC)
                    : null;
 
                return (
                  <div
                    key={field.name}
                    style={{
                      gridColumn: field.gridCols ?? "initial",
                    }}
                  >
                    {Message ? (
                      <div>
                        <Message />
                      </div>
                    ) : (
                      <FieldRenderer
                        field={field as FieldDefinition}
                        value={formData[field.name]}
                        onChange={onChange}
                        onBlur={onBlur}
                        error={errors[field.name]}
                        isEditMode={isEditMode}
                        formData={formData}
                      />
                    )}
                  </div>
                );
              })}
            </div>
          )
        );
      })}
    </div>
  );
};