feature: add alignment property to components

2026-05-24 01:18:23 +00:00 · 2025-03-21 04:22:45 +05:30 · 2025-03-21 04:22:45 +05:30 · 1497c22720
commit 1497c22720
parent d159e5a55c
17 changed files with 164 additions and 38 deletions
--- a/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/buttonGroup.js
@ -123,6 +123,14 @@ export const buttonGroupConfig = {
        defaultValue: '#007bff',
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    selected: [1],
@ -148,6 +156,7 @@ export const buttonGroupConfig = {
      disabledState: { value: '{{false}}' },
      selectedTextColor: { value: '#FFFFFF' },
      selectedBackgroundColor: { value: '#4368E3' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/link.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/link.js
@ -82,6 +82,14 @@ export const linkConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  actions: [
@ -106,6 +114,7 @@ export const linkConfig = {
      textSize: { value: '{{14}}' },
      underline: { value: 'on-hover' },
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/pagination.js
@ -50,6 +50,14 @@ export const paginationConfig = {
        defaultValue: false,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    totalPages: null,
@ -73,6 +81,7 @@ export const paginationConfig = {
    styles: {
      visibility: { value: '{{true}}' },
      disabledState: { value: '{{false}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/svgImage.js
@ -32,6 +32,14 @@ export const svgImageConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    value: {},
@ -50,6 +58,7 @@ export const svgImageConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/tags.js
@ -38,6 +38,14 @@ export const tagsConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  definition: {
@ -54,6 +62,7 @@ export const tagsConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@ -25,6 +25,7 @@ export const ButtonGroup = function Button({
    selectedBackgroundColor,
    selectedTextColor,
    boxShadow,
+    alignment,
  } = styles;

  const computedStyles = {
@ -87,38 +88,53 @@ export const ButtonGroup = function Button({
      fireEvent('onClick');
    }
  };
+
+  const mapAlignment = (alignment) => {
+    switch (alignment) {
+      case 'left':
+        return 'flex-start';
+      case 'right':
+        return 'flex-end';
+      case 'center':
+        return 'center';
+      default:
+        return 'flex-start'; // Default to left alignment if the value is unknown
+    }
+  };
  return (
-    <div className="widget-buttongroup" style={{ height }} data-cy={dataCy}>
-      {label && (
-        <p
-          style={{ display: computedStyles.display }}
-          className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
-        >
-          {label}
-        </p>
-      )}
+    <div className="widget-buttongroup" style={{ height, alignItems: mapAlignment(alignment) }} data-cy={dataCy}>
      <div>
-        {data?.map((item, index) => (
-          <button
-            style={{
-              ...computedStyles,
-              backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
-              color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
-              transition: 'all .1s ease',
-              boxShadow,
-              ...(disabledState && disabledStyles),
-            }}
-            key={index}
-            disabled={disabledState}
-            className={'group-button overflow-hidden'}
-            onClick={(event) => {
-              event.stopPropagation();
-              buttonClick(index);
-            }}
+        {label && (
+          <p
+            style={{ display: computedStyles.display }}
+            className={`widget-buttongroup-label ${darkMode && 'text-light'}`}
          >
-            {item}
-          </button>
-        ))}
+            {label}
+          </p>
+        )}
+        <div>
+          {data?.map((item, index) => (
+            <button
+              style={{
+                ...computedStyles,
+                backgroundColor: defaultActive?.includes(values[index]) ? selectedBackgroundColor : backgroundColor,
+                color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
+                transition: 'all .1s ease',
+                boxShadow,
+                ...(disabledState && disabledStyles),
+              }}
+              key={index}
+              disabled={disabledState}
+              className={'group-button overflow-hidden'}
+              onClick={(event) => {
+                event.stopPropagation();
+                buttonClick(index);
+              }}
+            >
+              {item}
+            </button>
+          ))}
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/Editor/Components/Image/Image.jsx
+++ b/frontend/src/Editor/Components/Image/Image.jsx
@ -23,8 +23,17 @@ export const Image = function Image({
 }) {
  const { imageFormat, source, jsSchema, alternativeText, zoomButtons, rotateButton, loadingState, disabledState } =
    properties;
-  const { imageFit, imageShape, backgroundColor, padding, customPadding, boxShadow, borderRadius, borderColor } =
-    styles;
+  const {
+    imageFit,
+    imageShape,
+    backgroundColor,
+    padding,
+    customPadding,
+    boxShadow,
+    borderRadius,
+    borderColor,
+    alignment,
+  } = styles;

  const isInitialRender = useRef(true);

--- a/frontend/src/Editor/Components/Link.jsx
+++ b/frontend/src/Editor/Components/Link.jsx
@ -3,13 +3,14 @@ import cx from 'classnames';

 export const Link = ({ height, properties, styles, fireEvent, setExposedVariable, dataCy }) => {
  const { linkTarget, linkText, targetType } = properties;
-  const { textColor, textSize, underline, visibility, boxShadow } = styles;
+  const { textColor, textSize, underline, visibility, boxShadow, alignment } = styles;
  const clickRef = useRef();

  const computedStyles = {
    fontSize: textSize,
    height,
    boxShadow,
+    justifyContent: alignment,
  };

  useEffect(() => {
--- a/frontend/src/Editor/Components/Pagination.jsx
+++ b/frontend/src/Editor/Components/Pagination.jsx
@ -12,7 +12,7 @@ export const Pagination = ({
  width,
 }) => {
  const isInitialRender = useRef(true);
-  const { visibility, disabledState, boxShadow } = styles;
+  const { visibility, disabledState, boxShadow, alignment } = styles;
  const [currentPage, setCurrentPage] = useState(() => properties?.defaultPageIndex ?? 1);

  const pageChanged = (number) => {
@ -65,7 +65,12 @@ export const Pagination = ({
  };

  return (
-    <div data-disabled={disabledState} className="d-flex align-items-center" data-cy={dataCy} style={{ boxShadow }}>
+    <div
+      data-disabled={disabledState}
+      className="d-flex align-items-center"
+      data-cy={dataCy}
+      style={{ boxShadow, justifyContent: alignment }}
+    >
      <ul className="pagination m-0" style={computedStyles}>
        <Pagination.Operator
          operator="<<"
--- a/frontend/src/Editor/Components/SvgImage.jsx
+++ b/frontend/src/Editor/Components/SvgImage.jsx
@ -2,11 +2,14 @@ import React from 'react';
 import DOMPurify from 'dompurify';

 export const SvgImage = function Timeline({ properties, styles, height, dataCy }) {
-  const { visibility, boxShadow } = styles;
+  const { visibility, boxShadow, alignment } = styles;
  const { data } = properties;
  return (
    <div style={{ display: visibility ? '' : 'none', overflow: 'hidden', height: height, boxShadow }} data-cy={dataCy}>
-      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}></div>
+      <div
+        style={{ display: 'flex', justifyContent: alignment }}
+        dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data) }}
+      ></div>
    </div>
  );
 };
--- a/frontend/src/Editor/Components/Tags.jsx
+++ b/frontend/src/Editor/Components/Tags.jsx
@ -2,14 +2,15 @@ import React from 'react';

 export const Tags = function Tags({ width, height, properties, styles, dataCy }) {
  const { data } = properties;
-  const { visibility, boxShadow } = styles;
+  const { visibility, boxShadow, alignment } = styles;

  const computedStyles = {
    width,
    height,
-    display: visibility ? '' : 'none',
+    display: visibility ? 'flex' : 'none',
    overflowY: 'auto',
    boxShadow,
+    justifyContent: alignment,
  };

  function renderTag(item, index) {
--- a/frontend/src/Editor/WidgetManager/configs/link.js
+++ b/frontend/src/Editor/WidgetManager/configs/link.js
@ -106,6 +106,7 @@ export const linkConfig = {
      textSize: { value: '{{14}}' },
      underline: { value: 'on-hover' },
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/buttonGroup.js
+++ b/server/src/modules/apps/services/widget-config/buttonGroup.js
@ -123,6 +123,14 @@ export const buttonGroupConfig = {
        defaultValue: '#007bff',
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    selected: [1],
@ -148,6 +156,7 @@ export const buttonGroupConfig = {
      disabledState: { value: '{{false}}' },
      selectedTextColor: { value: '#FFFFFF' },
      selectedBackgroundColor: { value: '#4368E3' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/link.js
+++ b/server/src/modules/apps/services/widget-config/link.js
@ -82,6 +82,14 @@ export const linkConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  actions: [
@ -106,6 +114,7 @@ export const linkConfig = {
      textSize: { value: '{{14}}' },
      underline: { value: 'on-hover' },
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/pagination.js
+++ b/server/src/modules/apps/services/widget-config/pagination.js
@ -50,6 +50,14 @@ export const paginationConfig = {
        defaultValue: false,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    totalPages: null,
@ -73,6 +81,7 @@ export const paginationConfig = {
    styles: {
      visibility: { value: '{{true}}' },
      disabledState: { value: '{{false}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/svgImage.js
+++ b/server/src/modules/apps/services/widget-config/svgImage.js
@ -32,6 +32,14 @@ export const svgImageConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {
    value: {},
@ -50,6 +58,7 @@ export const svgImageConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };
--- a/server/src/modules/apps/services/widget-config/tags.js
+++ b/server/src/modules/apps/services/widget-config/tags.js
@ -38,6 +38,14 @@ export const tagsConfig = {
        defaultValue: true,
      },
    },
+    alignment: {
+      type: 'alignButtons',
+      displayName: 'Alignment',
+      validation: {
+        schema: { type: 'string' },
+        defaultValue: 'left',
+      },
+    },
  },
  exposedVariables: {},
  definition: {
@ -54,6 +62,7 @@ export const tagsConfig = {
    events: [],
    styles: {
      visibility: { value: '{{true}}' },
+      alignment: { value: 'left' },
    },
  },
 };