Components style changing Issues

[linesh98]

We upgraded FormBuilder from version 7.9 to 10.1 and made the required code changes based on the new version. However, after the upgrade, the designer styles of our existing/custom components have changed, even though the component configurations and styling were previously working as expected in 7.9.

We can provide our 7.9 and 10.1 component code, CSS, and screenshots of the before/after appearance if needed. Could you please advise what changes are required to preserve our existing component designer styling after the upgrade?

old dependicies
"@react-form-builder/components-fast-qr": "^7.9.0",
"@react-form-builder/components-google-map": "^7.9.0",
"@react-form-builder/components-rich-text": "^7.9.0",
"@react-form-builder/components-rsuite": "^7.9.0",
"@react-form-builder/components-rsuite-table": "^7.9.0",
"@react-form-builder/components-signature": "^7.9.0",

and old code like 

// src/pages/private/form-builder/Designer.tsx

import { useCallback, useEffect, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";

import {
components as rsuiteComponents,
formEngineRsuiteCssLoader,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";

import {
rSuiteTableComponents,
rSuiteTableComponentsDescriptions,
} from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");
if (newMode === "viewer") {
  leftPanel?.classList.add("hidden-panel");
  rightPanel?.classList.add("hidden-panel");
} else {
  leftPanel?.classList.remove("hidden-panel");
  rightPanel?.classList.remove("hidden-panel");
}

window.dispatchEvent(new Event("resize"));

}, [builder]);

return {label};
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem",
}}
>


</>
),
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
...rSuiteTableComponents.map((c) => c.build()),
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
richTextComponent.build(),
textEditor.build(),
],
[],
);
useEffect(() => {
if (globalThis.crypto && typeof globalThis.crypto.subtle === "undefined") {
Object.defineProperty(globalThis.crypto, "subtle", {
value: {
verify: async () => true,
importKey: async () => ({}),
},
configurable: true,
});
}
}, []);

/* ------------------------- Create Builder View --------------------------- */

const view = useMemo(() => {
return (
new CoreBuilderView(allComponents)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
.withCssLoader("common", formEngineRsuiteCssLoader)

    // Register library descriptions (LEFT PANEL)
    .withComponentLibraryDescription(fastQrComponentsDescriptions)
    .withComponentLibraryDescription(googleMapComponentsDescriptions)
    .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
    .withComponentLibraryDescription(signatureComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteComponentsDescriptions)
);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};

now its throwing error like Module '"@react-form-builder/components-rsuite"' has no exported member 'formEngineRsuiteCssLoader'.

and after upgarding new version , the dependencies are

"@react-form-builder/components-fast-qr": "^10.1.0",
"@react-form-builder/components-google-map": "^10.1.0",
"@react-form-builder/components-rich-text": "^10.1.0",
"@react-form-builder/components-rsuite": "^10.1.0",
"@react-form-builder/components-rsuite-table": "^10.1.0",
"@react-form-builder/components-signature": "^10.1.0",
"@react-form-builder/core": "^10.1.0",
"@react-form-builder/designer": "^10.1.0",
"@react-google-maps/api": "^2.19.3",

and the new code are 

// src/pages/private/form-builder/Designer.tsx

import { useCallback, useEffect, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";
import "@react-form-builder/core/assets/styles.css";
import "@react-form-builder/designer/assets/designer.ltr.min.css";

import {
components as rsuiteComponents,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";

import {
rSuiteTableComponents,
rSuiteTableComponentsDescriptions,
} from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

// import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";

builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel") as HTMLElement | null;

const rightPanel = document.querySelector(".FE_RightPanel") as HTMLElement | null;

if (newMode === "viewer") {
  leftPanel?.style.setProperty("display", "none", "important");

  rightPanel?.style.setProperty("display", "none", "important");
} else {
  leftPanel?.style.removeProperty("display");
  rightPanel?.style.removeProperty("display");
}

// Force FormEngine/browser layout recalculation.
requestAnimationFrame(() => {
  window.dispatchEvent(new Event("resize"));

  requestAnimationFrame(() => {
    window.dispatchEvent(new Event("resize"));
  });
});

}, [builder]);

return (

{builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode"}

);
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
// ------------------------------------------------------------
// Keep the main FormEngine header.
// Only customize individual controls.
// ------------------------------------------------------------

ToggleModeButton: {
customRenderer: () => ,
},

// ------------------------------------------------------------
// Keep Undo / Redo / Theme / Localization / other
// default toolbar buttons.
// ------------------------------------------------------------

Header_Toolbar: {
className: "my-form-builder-toolbar",
},

// ------------------------------------------------------------
// Header itself - only style it.
// DO NOT replace it with customRenderer.
// ------------------------------------------------------------

Header: {
className: "my-form-builder-header",
},

// ------------------------------------------------------------
// Things you don't want.
// ------------------------------------------------------------

JsonViewButton: {
hidden: true,
},

ResolutionSelect: {
hidden: true,
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
...rSuiteTableComponents.map((c) => c.build()),
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
textEditor.build(),
],
[],
);
useEffect(() => {
if (globalThis.crypto && typeof globalThis.crypto.subtle === "undefined") {
Object.defineProperty(globalThis.crypto, "subtle", {
value: {
verify: async () => true,
importKey: async () => ({}),
},
configurable: true,
});
}
}, []);

const view = useMemo(() => {
return new CoreBuilderView(allComponents)

  .withViewerWrapper(RsLocalizationWrapper)
  .withCssLoader(BiDi.LTR, ltrCssLoader)
  .withCssLoader(BiDi.RTL, rtlCssLoader)
  .withComponentLibraryDescription(fastQrComponentsDescriptions)
  .withComponentLibraryDescription(googleMapComponentsDescriptions)
  .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
  .withComponentLibraryDescription(signatureComponentsDescriptions)
  .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
  .withComponentLibraryDescription(rSuiteComponentsDescriptions);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};

also belwo are the screenshot of old and new codes

be;low for old code

and belwo are the new code Ui

Kindly help for the issue, i need to retain the exact styling for the old code and design for components

[cherepanov]

@linesh98

Hi! Your example looks incomplete. I can't reproduce your issue. At first glance, you are mixing CSS configurations. Instead of:

.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)

you should use:

import '@react-form-builder/components-rsuite/assets/styles.ltr.css

But it should work both ways. Here is a sample app with most of the code you provided. Can you pinpoint the issue in this app?

https://stackblitz.com/edit/stackblitz-starters-uwdqu27c?file=README.md