Untitled

import * as React from "react";
import { addPropertyControls, ControlType } from "framer";

const FormFieldTypes = {
  Checkbox: "checkbox",
  Email: "email",
  Password: "password",
  Select: "select",
  Phone: "tel",
  Radio: "radio",
};

const Form = ({ fields, labelsStyle, fieldsStyle }) => {
  const renderField = (field, index) => {
    const { type, label, options, style, labelStyle } = field;
    switch (type) {
      case FormFieldTypes.Select:
        return (
          <label key={index} style={{ ...labelsStyle, ...labelStyle }}>
            {label}
            <select style={{ ...fieldsStyle, ...style }}>
              {options.map((option, optionIndex) => (
                <option key={optionIndex} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </label>
        );
      case FormFieldTypes.Radio:
        return options.map((option, optionIndex) => (
          <label key={`${index}-${optionIndex}`} style={{ ...labelsStyle, ...labelStyle }}>
            <input type={type} name={label} value={option.value} style={{ ...fieldsStyle, ...style }} />
            {option.label}
          </label>
        ));
      default:
        return (
          <label key={index} style={{ ...labelsStyle, ...labelStyle }}>
            {label}
            <input type={type} style={{ ...fieldsStyle, ...style }} />
          </label>
        );
    }
  };

  return <form>{fields.map(renderField)}</form>;
};

Form.defaultProps = {
  fields: [],
  labelsStyle: {},
  fieldsStyle: {},
};

addPropertyControls(Form, {
  fields: {
    type: ControlType.Array,
    control: {
      type: ControlType.Object,
      controls: {
        type: {
          type: ControlType.Enum,
          options: Object.values(FormFieldTypes),
          optionTitles: Object.keys(FormFieldTypes),
        },
        label: {
          type: ControlType.String,
        },
        options: {
          type: ControlType.Array,
          control: {
            type: ControlType.Object,
            controls: {
              label: { type: ControlType.String },
              value: { type: ControlType.String },
            },
          },
          hidden: ({ type }) => type !== FormFieldTypes.Select && type !== FormFieldTypes.Radio,
        },
        style: {
          type: ControlType.Object,
          controls: {
            background: { type: ControlType.Color },
            border: { type: ControlType.String },
            borderColor: { type: ControlType.Color },
          },
        },
        labelStyle: {
          type: ControlType.Object,
          controls: {
            color: { type: ControlType.Color },
            fontSize: { type: ControlType.Number },
            fontWeight: { type: ControlType.Enum, options: ["normal", "bold"], optionTitles: ["Normal", "Bold"] },
          },
        },
      },
    },
    defaultValue: [],
  },
  labelsStyle: {
    type: ControlType.Object,
    controls: {
      color: { type: ControlType.Color, defaultValue: "#000" },
      fontSize: { type: ControlType.Number, defaultValue: 14 },
      fontWeight: { type: ControlType.Enum, options: ["normal", "bold"], optionTitles: ["Normal", "Bold"], defaultValue: "normal" },
    },
  },
  fieldsStyle: {
    type: ControlType.Object,
    controls: {
      background: { type: ControlType.Color, defaultValue: "#fff" },
      border: { type: ControlType.String, defaultValue: "1px solid #000" },
      borderColor: { type: ControlType.Color, defaultValue: "#000" },
    },
  },
});

export default Form;