Feature Requests: Enhanced Grouping, Custom Submit Events, Grid Layout, and More for Better Flexibility

[manaver]

I built a similar thing in one of my projects—these are the issues that I encountered:

• Sometimes I want to group the form elements, like:

  • Details Section
  • Pricing Section
  • SEO Section
    But all these in the same form.

• Instead of making it a form that works with button type="submit", I prefer a click event (via ref or anything), because in some scenarios the form can be inside some other form (e.g., if you want to add a category within the same form—i.e., you import it in a sheet or popup, etc.—then one submit triggers multiple forms).

• I prefer the form to use a grid layout, i.e., how much input takes how much space. Suppose on the left side 3 inputs in 3 rows, and on the right 1 description which is taking 3 rows.

• Also, it would be great if we get a submit ref outside so we can pass it somewhere else in the page or layout (via Zustand, etc.) so we can trigger the event anywhere.

• Also, it'd be great if we get a "has unsaved changes" option, for each input has its own submit button, etc.

• Pass object in params (which contain element, type, its custom CSS classes if needed, placing, etc.).

Currently, I think these are the major issues which make FormCN's use case limited in my website, because currently I am looking to use this in my website.

If these changes are there, it'll be my only form that I'll use.

I am open to discuss how these changes can be implemented. Also, I'd love to contribute if you have any of these changes based on priority in this FormCN.

Let me know @Ali-Hussein-dev!

[Ali-Hussein-dev]

I think you put so many feature requests in one post, which makes it hard to discuss in one thread.
the goal is to provider standard implementation for a form, sure there are use cases that require specific implementation, but then it is better to be handled by the developer who needs it, instead generating code for other who don't need it.

• you have headers, paragraph and separators to group forms as you want, what kind of grouping are asking for?
• using on click event to submit form is to simple to do, when you need it, if you prefer it that way. also the grid layout.
• this "has unsaved changes" is nice to have but later. Currently working other stuff and waiting for more feedback.
• the last request need more clarification, what params are you talking about and why you need the object?

@manaver

[manaver]

• Point 1: you have headers, paragraph and separators to group forms as you want, what kind of grouping are asking for?

In the above image i've added example of grid structure and inputs with headers

• Point 2: using on click event to submit form is to simple to do, when you need it, if you prefer it that way. also the grid layout.
  Click event is simple but i am considering it as feature so in future it will not conflict nested forms

• Point 3: this "has unsaved changes" is nice to have but later. Currently working other stuff and waiting for more feedback.
  Thanks!

• Point 4: the last request need more clarification, what params are you talking about and why you need the object?
  I'll show you by example of what i've done:

const formSections: FormSectionConfig[] = [
	{
		title: data ? "Edit Category" : "Add Category",
		fields: [
			{
				name: "name",
				label: "Category Name",
				type: "text",
				placeholder: "Enter category name",
				defaultValue: data?.name || "",
				className: "col-span-12",
				rules: [{ required: true, message: "Category name is required" }],
			},
			{
				name: "code",
				label: "Category Code",
				type: "alphanumeric",
				ref: "name",
				className: "col-span-12",
				placeholder: "Enter site code",
				defaultValue: data?.code || "",
				rules: [{ required: true, message: "Site code is required" }, {
					pattern: /^[A-Z0-9]+$/,
					message: "Site code must contain only letters and numbers"
				}],
			},
			{
				name: "slug",
				label: "Slug",
				type: "text",
				autogenerate: true,
				autogenerateRef: "name",
				placeholder: "Enter slug",
				className: "col-span-12",
				defaultValue: data?.slug || "",
				rules: [{ required: true, message: "Slug is required" }],
			},
			{
				name: "status",
				label: "Status",
				type: "select",
				className: "col-span-12 max-w-[200px]",
				defaultValue: data?.status || "",
				options: [
					{ label: "Active", value: "active" },
					{ label: "Inactive", value: "inactive" },
				],
				placeholder: "Select Status",
				rules: [{ required: true, message: "Status is required" }],
			},
		],
	},
];

// and i am using it like this:
{formSections.map((section) => (
	<FormSection
		key={section.title}
		config={section}
		updateUrl={
			data
				? `/api/.../{id}`
				: `/api/...`
		}
		method={data ? "PUT" : "POST"}
		slugBaseUrl={`${process.env.NEXT_PUBLIC_BASE_URL || ""}/categories`}
	/>
))}

Your approach is pretty solid -- to show two items in a single row
but it depends on form complexity, i.e. adding left side 1 element and right side 3

[
...,
 [
        {
            "id": "signup-name",
            "name": "Name",
            "fieldType": "Input",
            "type": "text",
            "label": "Name",
            "placeholder": "Enter your Name",
            "required": true
        },
        {
            "id": "30e5a133-9a4c-4087-9af0-07b80efcddaf",
            "label": "Pick a date",
            "placeholder": "Select a date",
            "fieldType": "DatePicker",
            "name": "DatePicker-8"
        }
    ],
...
]

@Ali-Hussein-dev please let me know if there's any suggestion and feedback to my request!