Skip to content

feat: dynamic preview per component type; cleanup field configs#26

Open
lakshitha25 wants to merge 3 commits intoDevelopmentfrom
document
Open

feat: dynamic preview per component type; cleanup field configs#26
lakshitha25 wants to merge 3 commits intoDevelopmentfrom
document

Conversation

@lakshitha25
Copy link
Copy Markdown
Collaborator

The preview panel is now dynamic per component type, ensuring that when a new component is selected from the dropdown, its configuration and preview are reset properly without carrying over previous props.

pnpm-lock.yaml Outdated
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please Remove this file

setConfig((prev) => ({ ...prev, muiProps: newMuiProps }));
};

const validateInput = (value: string) => {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need extra methods to validate the preview use
FFB for the preview. Remove all the extra items.

boxSizing: "border-box",
};

interface MUIPropsComponentProps {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Include this in the "types" folder under "json-generator"

let textProps: string[] = [];
let showInputProps: string[] = [];

if (componentType === "multiline") {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use a switch case here

let showInputProps: string[] = [];

if (componentType === "multiline") {
booleanProps = ["disabled", "error", "fullWidth", "autoFocus"];
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for all these
["disabled", "error", "fullWidth", "autoFocus"];
Maintain a constant and list them all, and render in a switch case

</div>
<div style={{ flex: 1, paddingLeft: 16 }}>
<h3>Live Preview</h3>
{renderPreview()}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use FFB (FormRenderer) component to preview here

export const variantOptions = ["outlined", "filled", "standard"];
export const colorOptions = ["primary", "secondary", "success", "error", "info", "warning"];

export const colorMap: Record<string, string> = {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this to constants

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants