fix: Added visibility option

Author: iduspara

src/components/form-builder/canvas/sortable-row.tsx

@@ -82,6 +82,13 @@ export const RowColumn = ({
     [component]
   );
 
+  const visibilityClasses = useMemo(
+    () => generateTWClassesForAllViewports(component, "visible"),
+    [component]
+  );
+
+  const isHidden = component.getField("properties.style.visible", viewport) === "no";
+
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       if (mode === "editor" && !columnIsDragging) {
@@ -123,12 +130,14 @@ export const RowColumn = ({
     <div
       ref={setNodeRef}
       className={cn(
-        "relative group ",
+        "relative group",
         colSpanClasses,
         colStartClasses,
+        mode === "preview" && visibilityClasses,
         mode === "editor" && "group/component hover:outline-1 hover:outline-offset-6 hover:outline-primary cursor-pointer",
         columnIsDragging && "cursor-grabbing",
         selectedComponent && "opacity-30",
+        isHidden && "opacity-50",
         selectedComponent?.id === component.id &&
           "outline-1 outline-offset-6 outline-primary z-20 opacity-100",
       )}

src/components/form-builder/form-components/form-checkbox-group.tsx

@@ -69,7 +69,7 @@ export const CheckboxGroupDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
   html: <HtmlGroup />,
-  label: <LabelGroup whitelist={["label", "label_description"]} />,
+  label: <LabelGroup whitelist={["label"]} />,
   input: <InputGroup whitelist={["description", "asCard"]} />,
   options: <OptionsGroup />,
   button: null,

src/components/form-builder/form-components/form-datepicker.tsx

@@ -96,7 +96,7 @@ export const DatePickerDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
   html: <HtmlGroup />,
-  label: <LabelGroup />,
+  label: <LabelGroup whitelist={["label", "labelPosition", "labelAlign", "showLabel"]} />,
   input: <InputGroup whitelist={["placeholder", "description"]} />,
   options: null,
   button: null,

src/components/form-builder/form-components/form-input.tsx

@@ -51,7 +51,7 @@ export const InputDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
   html: <HtmlGroup />,
-  label: <LabelGroup />,
+  label: <LabelGroup whitelist={["label", "labelPosition", "labelAlign", "showLabel"]} />,
   input: <InputGroup />,
   options: null,
   button: null,

src/components/form-builder/form-components/form-radio.tsx

@@ -69,7 +69,7 @@ export const RadioDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
   html: <HtmlGroup />,
-  label: <LabelGroup />,
+  label: <LabelGroup whitelist={["label", "labelPosition", "labelAlign", "showLabel"]} />,
   input: <InputGroup whitelist={["placeholder", "description", "value"]} />,
   options: <OptionsGroup />,
   button: null,

src/components/form-builder/form-components/form-select.tsx

@@ -74,7 +74,7 @@ export const SelectDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
   html: <HtmlGroup />,
-  label: <LabelGroup />,
+  label: <LabelGroup whitelist={["label", "labelPosition", "labelAlign", "showLabel"]} />,
   input: <InputGroup whitelist={["placeholder", "description", "value"]} />,
   options: <OptionsGroup />,
   button: null,

src/components/form-builder/form-components/form-text.tsx

@@ -19,9 +19,7 @@ export function Text(component: FormComponentModel) {
       key={component.id}
       className={cn(
         colSpanClasses,
-        colStartClasses,
-        component.getTWClasses("textAlign")
-      )}
+        colStartClasses      )}
       dangerouslySetInnerHTML={{ __html: component.content || "" }}
     />
   );
@@ -37,7 +35,8 @@ export function getReactCode(component: FormComponentModel): ReactCode {
     code: `
     <div
       key="${component.id}"
-      className="${escapeHtml(component.getTWClasses("textAlign"))}">
+      id="${component.getField("attributes.id")}"
+      className="${component.getField("attributes.class")}">
       ${component.content || ""}
     </div>
     `,
@@ -50,7 +49,7 @@ export function getReactCode(component: FormComponentModel): ReactCode {
 export const TextDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
-  html: <HtmlGroup />,
+  html: <HtmlGroup whitelist={["id", "class"]} />,
   label: null,
   input: null,
   options: null,

src/components/form-builder/form-components/form-textarea.tsx

@@ -50,7 +50,7 @@ export const TextareaDesignProperties: DesignPropertiesViews = {
   base: null,
   grid: <GridGroup />,
   html: <HtmlGroup />,
-  label: <LabelGroup />,
+  label: <LabelGroup whitelist={["label", "labelPosition", "labelAlign", "showLabel"]} />,
   input: <InputGroup />,
   options: null,
   button: null,

src/components/form-builder/helpers/render-editor-component.tsx

@@ -44,6 +44,8 @@ export function RenderEditorComponent({ form, component }: FormComponentProps) {
               >
                 {component.getField("properties.style.showLabel", viewport) ===
                   "yes" && component.getField("label", viewport)}
+                {component.getField("properties.style.visible", viewport) ===
+                  "no" && <span className="text-xs text-muted-foreground">Hidden</span>}
               </FormLabel>
             </div>
             <FormControl>{componentViews?.render}</FormControl>

src/components/form-builder/sidebar/groups/grid-group.tsx

@@ -49,7 +49,7 @@ export function GridGroup() {
 
   return (
     <>
-      {/* <div className="grid grid-cols-2 gap-2 items-center">
+      <div className="grid grid-cols-2 gap-2 items-center">
         <Label className="text-xs text-gray-400 flex-1 inline-block">
           Visible
         </Label>
@@ -70,7 +70,7 @@ export function GridGroup() {
             field="properties.style.visible"
           />
         </div>
-      </div> */}
+      </div>
       <div className="grid grid-cols-2 gap-2 items-center">
         <Label className="text-xs text-gray-400 flex-1 inline-block">
           Column Span