@bigbinary/neeto-image-uploader-frontend 2.3.19 → 2.3.20

package/dist/index.js

@@ -1,28 +1,35 @@
 export { default as BasicImageUploader } from './BasicImageUploader.js';
-export { default as ImageUploader } from './ImageUploader.js';
-export { M as AssetLibrary } from './index-BSGhIrC8.js';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useField, useFormikContext, getIn } from 'formik';
+import { isEmpty, isNil } from 'ramda';
+import { useTranslation } from 'react-i18next';
+import { hyphenate, noop } from '@bigbinary/neeto-cist';
+import Input from '@bigbinary/neetoui/formik/Input';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import Button from '@bigbinary/neetoui/Button';
+import Typography from '@bigbinary/neetoui/Typography';
+import { t } from 'i18next';
+import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
+import CenterAlign from '@bigbinary/neeto-icons/CenterAlign';
+import RightAlign from '@bigbinary/neeto-icons/RightAlign';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import classnames from 'classnames';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import ImageUploader from './ImageUploader.js';
+import Slider from '@bigbinary/neetoui/Slider';
+export { M as AssetLibrary } from './index-DQC5j8GS.js';
 export { u as useImageUpload, a as useProfileImageUpload } from './useProfileImageUpload-BDGk2PWz.js';
 export { u as useImageUploader } from './useImageUploader-BfrsCPBL.js';
 export { refetchImageLibraryAssetList } from './utils.js';
-import '@babel/runtime/helpers/defineProperty';
 import '@babel/runtime/helpers/objectWithoutProperties';
-import 'classnames';
-import '@bigbinary/neeto-cist';
 import '@bigbinary/neeto-icons/Delete';
-import '@bigbinary/neetoui/Button';
 import './utils-Bb1hqKhN.js';
-import '@bigbinary/neetoui/Typography';
 import '@bigbinary/neetoui/ProgressBar';
-import 'ramda';
-import 'react-i18next';
 import '@bigbinary/neeto-commons-frontend/initializers';
-import '@babel/runtime/helpers/slicedToArray';
-import 'react';
 import 'react-dropzone';
-import 'i18next';
 import '@bigbinary/neetoui/Toastr';
 import './index-B1JijZPf.js';
-import 'react/jsx-runtime';
 import './ImageWithFallback-Csv6Oivd.js';
 import '@babel/runtime/helpers/asyncToGenerator';
 import '@babel/runtime/regenerator';
@@ -30,7 +37,6 @@ import '@bigbinary/neeto-icons/MenuHorizontal';
 import '@bigbinary/neetoui/Dropdown';
 import '@bigbinary/neetoui/Modal';
 import '@bigbinary/neetoui/Tab';
-import '@bigbinary/neetoui/Spinner';
 import '@bigbinary/neeto-icons/LeftArrow';
 import '@tanstack/react-query';
 import 'axios';
@@ -43,4 +49,239 @@ import './query-DMtOS6FM.js';
 import '@bigbinary/neeto-team-members-frontend/constants';
 import '@bigbinary/neetoui/Alert';
 import '@rails/activestorage';
+
+var ALIGNMENTS = [{
+  label: t("neetoImageUploader.labels.leftAlign"),
+  value: "left",
+  icon: LeftAlign,
+  dataCy: "left-alignment"
+}, {
+  label: t("neetoImageUploader.labels.centerAlign"),
+  value: "center",
+  icon: CenterAlign,
+  dataCy: "center-alignment"
+}, {
+  label: t("neetoImageUploader.labels.rightAlign"),
+  value: "right",
+  icon: RightAlign,
+  dataCy: "right-alignment"
+}];
+var MINIMUM_LOGO_HEIGHT = 64;
+var MAXIMUM_LOGO_HEIGHT = 100;
+var DEFAULT_LOGO_HEIGHT = 64;
+var DEFAULT_LOGO_POSITION = "left";
+var ONE_MEGABYTE = 1;
+
+var AlignmentBlock = function AlignmentBlock(_ref) {
+  var name = _ref.name,
+    title = _ref.title,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    var _useField2$1$value = _useField2[1].value,
+    alignment = _useField2$1$value === void 0 ? DEFAULT_LOGO_POSITION : _useField2$1$value,
+    setValue = _useField2[2].setValue;
+  var handleChange = function handleChange(newAlignment) {
+    if (alignment === newAlignment) return;
+    setValue(newAlignment, false);
+    onChange(name, newAlignment);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    dataCy: "".concat(hyphenate(title), "-block"),
+    children: [/*#__PURE__*/jsx(Typography, {
+      lineHeight: "normal",
+      style: "body2",
+      weight: "medium",
+      children: title
+    }), /*#__PURE__*/jsx("div", {
+      className: "mt-2 flex items-center gap-3",
+      children: ALIGNMENTS.map(function (_ref2) {
+        var label = _ref2.label,
+          value = _ref2.value,
+          icon = _ref2.icon,
+          dataCy = _ref2.dataCy;
+        return /*#__PURE__*/createElement(Button, {
+          icon: icon,
+          "data-cy": dataCy,
+          key: value,
+          size: "large",
+          style: alignment === value ? "primary" : "text",
+          tooltipProps: {
+            content: label,
+            position: "bottom"
+          },
+          onClick: function onClick() {
+            return handleChange(value);
+          }
+        });
+      })
+    })]
+  });
+};
+
+var Block = function Block(_ref) {
+  var title = _ref.title,
+    children = _ref.children,
+    dataCy = _ref.dataCy,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$childrenClassNam = _ref.childrenClassName,
+    childrenClassName = _ref$childrenClassNam === void 0 ? "" : _ref$childrenClassNam,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("space-y-4", className),
+    "data-cy": dataCy,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between",
+      "data-cy": "properties-header",
+      children: [/*#__PURE__*/jsx(Typography, {
+        lineHeight: "normal",
+        style: "body1",
+        weight: "semibold",
+        children: title
+      }), isLoading && /*#__PURE__*/jsx(Spinner, {})]
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames("space-y-4", childrenClassName),
+      children: children
+    })]
+  });
+};
+
+var ImageUpload = function ImageUpload(_ref) {
+  var name = _ref.name,
+    handleUpdate = _ref.handleUpdate,
+    _ref$maxSize = _ref.maxSize,
+    maxSize = _ref$maxSize === void 0 ? ONE_MEGABYTE : _ref$maxSize;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    var image = _useField2[1].value,
+    setValue = _useField2[2].setValue;
+  var handleImageChange = function handleImageChange(changedImage) {
+    if (isEmpty(changedImage === null || changedImage === void 0 ? void 0 : changedImage.url)) {
+      setValue(null, false);
+      handleUpdate(null);
+      return;
+    }
+    setValue(changedImage, false);
+    handleUpdate(changedImage);
+  };
+  return /*#__PURE__*/jsx(Block, {
+    dataCy: "add-image-card",
+    title: t("neetoImageUploader.labels.addImage"),
+    children: /*#__PURE__*/jsx(ImageUploader, {
+      className: "w-full",
+      src: image === null || image === void 0 ? void 0 : image.url,
+      uploadConfig: {
+        maxImageSize: maxSize
+      },
+      onUploadComplete: handleImageChange
+    }, image === null || image === void 0 ? void 0 : image.url)
+  });
+};
+
+var SliderBlock = function SliderBlock(_ref) {
+  var title = _ref.title,
+    name = _ref.name,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+    defaultValue = _ref.defaultValue,
+    min = _ref.min,
+    max = _ref.max;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    var value = _useField2[1].value,
+    setValue = _useField2[2].setValue;
+  var handleChange = function handleChange(newValue) {
+    if (value === newValue) return;
+    setValue(newValue, false);
+    onChange(newValue);
+  };
+  return /*#__PURE__*/jsx("div", {
+    "data-cy": "".concat(hyphenate(title), "-slider-block"),
+    children: /*#__PURE__*/jsx(Slider, {
+      defaultValue: defaultValue,
+      max: max,
+      min: min,
+      value: value,
+      label: title,
+      onChange: handleChange
+    })
+  });
+};
+
+var root = document.querySelector(":root");
+var setLogoHeight = function setLogoHeight(value, variableName) {
+  return root.style.setProperty(variableName, "".concat(Number(value) || DEFAULT_LOGO_HEIGHT, "px"));
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ImageForm = function ImageForm(_ref) {
+  var _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+    _ref$imageUploaderPro = _ref.imageUploaderProps,
+    imageUploaderProps = _ref$imageUploaderPro === void 0 ? {} : _ref$imageUploaderPro,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$names = _ref.names,
+    names = _ref$names === void 0 ? {} : _ref$names,
+    _ref$logoHeight = _ref.logoHeight,
+    logoHeight = _ref$logoHeight === void 0 ? {
+      "default": DEFAULT_LOGO_HEIGHT,
+      min: MINIMUM_LOGO_HEIGHT,
+      max: MAXIMUM_LOGO_HEIGHT
+    } : _ref$logoHeight,
+    logoSizeVariableName = _ref.logoSizeVariableName;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var imageValue = getIn(values, names.image);
+  var handleImageChange = function handleImageChange(image) {
+    if (isNil(image)) {
+      setLogoHeight(logoHeight["default"], logoSizeVariableName);
+      setFieldValue(names.height, logoHeight["default"]);
+    }
+    onChange === null || onChange === void 0 || onChange(names.image, image);
+  };
+  var handleSliderChange = function handleSliderChange(value) {
+    setLogoHeight(value, logoSizeVariableName);
+    onChange === null || onChange === void 0 || onChange(names.height, value);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-4 ".concat(className),
+    children: [/*#__PURE__*/jsx(ImageUpload, _objectSpread({
+      handleUpdate: handleImageChange,
+      name: names.image
+    }, imageUploaderProps)), imageValue && /*#__PURE__*/jsxs("div", {
+      className: "space-y-4 px-2",
+      children: [/*#__PURE__*/jsx(SliderBlock, {
+        defaultValue: logoHeight["default"],
+        max: logoHeight.max,
+        min: logoHeight.min,
+        name: names.height,
+        title: t("neetoImageUploader.labels.logoSize"),
+        onChange: handleSliderChange
+      }), /*#__PURE__*/jsx(AlignmentBlock, {
+        name: names.alignment,
+        title: t("neetoImageUploader.labels.alignment"),
+        onChange: onChange
+      }), /*#__PURE__*/jsx(Input, {
+        name: "altText",
+        helpText: t("neetoImageUploader.tooltips.logoAltText"),
+        placeholder: t("neetoImageUploader.labels.logoAltText")
+      })]
+    })]
+  });
+};
+
+export { ImageForm, ImageUploader };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../app/javascript/src/components/ImageForm/constants.js","../app/javascript/src/components/ImageForm/AlignmentBlock.jsx","../app/javascript/src/components/ImageForm/Block.jsx","../app/javascript/src/components/ImageForm/ImageUpload.jsx","../app/javascript/src/components/ImageForm/SliderBlock.jsx","../app/javascript/src/components/ImageForm/utils.js","../app/javascript/src/components/ImageForm/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\nimport { LeftAlign, CenterAlign, RightAlign } from \"neetoicons\";\n\nexport const ALIGNMENTS = [\n  {\n    label: t(\"neetoImageUploader.labels.leftAlign\"),\n    value: \"left\",\n    icon: LeftAlign,\n    dataCy: \"left-alignment\",\n  },\n  {\n    label: t(\"neetoImageUploader.labels.centerAlign\"),\n    value: \"center\",\n    icon: CenterAlign,\n    dataCy: \"center-alignment\",\n  },\n  {\n    label: t(\"neetoImageUploader.labels.rightAlign\"),\n    value: \"right\",\n    icon: RightAlign,\n    dataCy: \"right-alignment\",\n  },\n];\n\nexport const MINIMUM_LOGO_HEIGHT = 64;\nexport const MAXIMUM_LOGO_HEIGHT = 100;\nexport const DEFAULT_LOGO_HEIGHT = 64;\nexport const DEFAULT_LOGO_POSITION = \"left\";\nexport const ONE_MEGABYTE = 1;\n","import { useField } from \"formik\";\nimport { hyphenate, noop } from \"neetocist\";\nimport { Button, Typography } from \"neetoui\";\n\nimport { ALIGNMENTS, DEFAULT_LOGO_POSITION } from \"./constants\";\n\nconst AlignmentBlock = ({ name, title, onChange = noop }) => {\n  const [_, { value: alignment = DEFAULT_LOGO_POSITION }, { setValue }] =\n    useField(name);\n\n  const handleChange = newAlignment => {\n    if (alignment === newAlignment) return;\n\n    setValue(newAlignment, false);\n    onChange(name, newAlignment);\n  };\n\n  return (\n    <div dataCy={`${hyphenate(title)}-block`}>\n      <Typography lineHeight=\"normal\" style=\"body2\" weight=\"medium\">\n        {title}\n      </Typography>\n      <div className=\"mt-2 flex items-center gap-3\">\n        {ALIGNMENTS.map(({ label, value, icon, dataCy }) => (\n          <Button\n            {...{ icon }}\n            data-cy={dataCy}\n            key={value}\n            size=\"large\"\n            style={alignment === value ? \"primary\" : \"text\"}\n            tooltipProps={{ content: label, position: \"bottom\" }}\n            onClick={() => handleChange(value)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default AlignmentBlock;\n","import classnames from \"classnames\";\nimport { Spinner, Typography } from \"neetoui\";\n\nconst Block = ({\n  title,\n  children,\n  dataCy,\n  className = \"\",\n  childrenClassName = \"\",\n  isLoading = false,\n}) => (\n  <div className={classnames(\"space-y-4\", className)} data-cy={dataCy}>\n    <div\n      className=\"flex items-center justify-between\"\n      data-cy=\"properties-header\"\n    >\n      <Typography lineHeight=\"normal\" style=\"body1\" weight=\"semibold\">\n        {title}\n      </Typography>\n      {isLoading && <Spinner />}\n    </div>\n    <div className={classnames(\"space-y-4\", childrenClassName)}>{children}</div>\n  </div>\n);\n\nexport default Block;\n","import { useField } from \"formik\";\nimport { isEmpty } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport Block from \"./Block\";\nimport { ONE_MEGABYTE } from \"./constants\";\n\nimport ImageUploader from \"../ImageUploader\";\n\nconst ImageUpload = ({ name, handleUpdate, maxSize = ONE_MEGABYTE }) => {\n  const { t } = useTranslation();\n  const [_, { value: image }, { setValue }] = useField(name);\n\n  const handleImageChange = changedImage => {\n    if (isEmpty(changedImage?.url)) {\n      setValue(null, false);\n      handleUpdate(null);\n\n      return;\n    }\n    setValue(changedImage, false);\n    handleUpdate(changedImage);\n  };\n\n  return (\n    <Block\n      dataCy=\"add-image-card\"\n      title={t(\"neetoImageUploader.labels.addImage\")}\n    >\n      <ImageUploader\n        className=\"w-full\"\n        key={image?.url}\n        src={image?.url}\n        uploadConfig={{ maxImageSize: maxSize }}\n        onUploadComplete={handleImageChange}\n      />\n    </Block>\n  );\n};\n\nexport default ImageUpload;\n","import { useField } from \"formik\";\nimport { hyphenate, noop } from \"neetocist\";\nimport { Slider } from \"neetoui\";\n\nconst SliderBlock = ({\n  title,\n  name,\n  onChange = noop,\n  defaultValue,\n  min,\n  max,\n}) => {\n  const [_, { value }, { setValue }] = useField(name);\n\n  const handleChange = newValue => {\n    if (value === newValue) return;\n\n    setValue(newValue, false);\n    onChange(newValue);\n  };\n\n  return (\n    <div data-cy={`${hyphenate(title)}-slider-block`}>\n      <Slider\n        {...{ defaultValue, max, min, value }}\n        label={title}\n        onChange={handleChange}\n      />\n    </div>\n  );\n};\n\nexport default SliderBlock;\n","import { DEFAULT_LOGO_HEIGHT } from \"./constants\";\n\nconst root = document.querySelector(\":root\");\n\nexport const setLogoHeight = (value, variableName) =>\n  root.style.setProperty(\n    variableName,\n    `${Number(value) || DEFAULT_LOGO_HEIGHT}px`\n  );\n","import { useFormikContext, getIn } from \"formik\";\nimport { isNil } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\nimport { noop } from \"neetocist\";\nimport { Input } from \"neetoui/formik\";\n\nimport AlignmentBlock from \"./AlignmentBlock\";\nimport {\n  DEFAULT_LOGO_HEIGHT,\n  MAXIMUM_LOGO_HEIGHT,\n  MINIMUM_LOGO_HEIGHT,\n} from \"./constants\";\nimport ImageUpload from \"./ImageUpload\";\nimport SliderBlock from \"./SliderBlock\";\nimport { setLogoHeight } from \"./utils\";\n\nconst ImageForm = ({\n  onChange = noop,\n  imageUploaderProps = {},\n  className = \"\",\n  names = {},\n  logoHeight = {\n    default: DEFAULT_LOGO_HEIGHT,\n    min: MINIMUM_LOGO_HEIGHT,\n    max: MAXIMUM_LOGO_HEIGHT,\n  },\n  logoSizeVariableName,\n}) => {\n  const { values, setFieldValue } = useFormikContext();\n\n  const { t } = useTranslation();\n\n  const imageValue = getIn(values, names.image);\n\n  const handleImageChange = image => {\n    if (isNil(image)) {\n      setLogoHeight(logoHeight.default, logoSizeVariableName);\n      setFieldValue(names.height, logoHeight.default);\n    }\n\n    onChange?.(names.image, image);\n  };\n\n  const handleSliderChange = value => {\n    setLogoHeight(value, logoSizeVariableName);\n    onChange?.(names.height, value);\n  };\n\n  return (\n    <div className={`space-y-4 ${className}`}>\n      <ImageUpload\n        handleUpdate={handleImageChange}\n        name={names.image}\n        {...imageUploaderProps}\n      />\n      {imageValue && (\n        <div className=\"space-y-4 px-2\">\n          <SliderBlock\n            defaultValue={logoHeight.default}\n            max={logoHeight.max}\n            min={logoHeight.min}\n            name={names.height}\n            title={t(\"neetoImageUploader.labels.logoSize\")}\n            onChange={handleSliderChange}\n          />\n          <AlignmentBlock\n            name={names.alignment}\n            title={t(\"neetoImageUploader.labels.alignment\")}\n            {...{ onChange }}\n          />\n          <Input\n            name=\"altText\"\n            helpText={t(\"neetoImageUploader.tooltips.logoAltText\")}\n            placeholder={t(\"neetoImageUploader.labels.logoAltText\")}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ImageForm;\n"],"names":["ALIGNMENTS","label","t","value","icon","LeftAlign","dataCy","CenterAlign","RightAlign","MINIMUM_LOGO_HEIGHT","MAXIMUM_LOGO_HEIGHT","DEFAULT_LOGO_HEIGHT","DEFAULT_LOGO_POSITION","ONE_MEGABYTE","AlignmentBlock","_ref","name","title","_ref$onChange","onChange","noop","_useField","useField","_useField2","_slicedToArray","_","_useField2$1$value","alignment","setValue","handleChange","newAlignment","_jsxs","concat","hyphenate","children","_jsx","Typography","lineHeight","style","weight","className","map","_ref2","_createElement","Button","key","size","tooltipProps","content","position","onClick","Block","_ref$className","_ref$childrenClassNam","childrenClassName","_ref$isLoading","isLoading","classnames","Spinner","ImageUpload","handleUpdate","_ref$maxSize","maxSize","_useTranslation","useTranslation","image","handleImageChange","changedImage","isEmpty","url","ImageUploader","src","uploadConfig","maxImageSize","onUploadComplete","SliderBlock","defaultValue","min","max","newValue","Slider","root","document","querySelector","setLogoHeight","variableName","setProperty","Number","ImageForm","_ref$imageUploaderPro","imageUploaderProps","_ref$names","names","_ref$logoHeight","logoHeight","logoSizeVariableName","_useFormikContext","useFormikContext","values","setFieldValue","imageValue","getIn","isNil","height","handleSliderChange","_objectSpread","Input","helpText","placeholder"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-image-uploader-frontend",
-  "version": "2.3.19",
+  "version": "2.3.20",
   "license": "UNLICENSED",
   "bugs": {
     "url": "https://github.com/bigbinary/neeto-image-uploader-nano/issues"
@@ -66,15 +66,15 @@
     "@babel/preset-typescript": "7.26.0",
     "@babel/runtime": "7.26.10",
     "@bigbinary/babel-preset-neeto": "^1.0.3",
-    "@bigbinary/eslint-plugin-neeto": "1.6.3",
+    "@bigbinary/eslint-plugin-neeto": "1.6.4",
     "@bigbinary/neeto-cist": "1.0.17",
-    "@bigbinary/neeto-commons-frontend": "4.13.43",
-    "@bigbinary/neeto-editor": "1.47.16",
-    "@bigbinary/neeto-filters-frontend": "4.3.21",
-    "@bigbinary/neeto-icons": "1.20.49",
-    "@bigbinary/neeto-molecules": "3.16.63",
-    "@bigbinary/neeto-team-members-frontend": "4.5.11",
-    "@bigbinary/neetoui": "8.3.9",
+    "@bigbinary/neeto-commons-frontend": "4.13.45",
+    "@bigbinary/neeto-editor": "1.47.20",
+    "@bigbinary/neeto-filters-frontend": "4.3.22",
+    "@bigbinary/neeto-icons": "1.20.53",
+    "@bigbinary/neeto-molecules": "3.16.77",
+    "@bigbinary/neeto-team-members-frontend": "4.5.20",
+    "@bigbinary/neetoui": "8.3.12",
     "@emotion/is-prop-valid": "1.2.0",
     "@faker-js/faker": "8.2.0",
     "@honeybadger-io/js": "6.10.1",
@@ -187,13 +187,13 @@
   "peerDependencies": {
     "@babel/runtime": "7.26.10",
     "@bigbinary/neeto-cist": "1.0.17",
-    "@bigbinary/neeto-commons-frontend": "4.13.43",
-    "@bigbinary/neeto-editor": "1.47.16",
-    "@bigbinary/neeto-filters-frontend": "4.3.21",
-    "@bigbinary/neeto-icons": "1.20.49",
-    "@bigbinary/neeto-molecules": "3.16.63",
-    "@bigbinary/neeto-team-members-frontend": "4.5.11",
-    "@bigbinary/neetoui": "8.3.9",
+    "@bigbinary/neeto-commons-frontend": "4.13.45",
+    "@bigbinary/neeto-editor": "1.47.20",
+    "@bigbinary/neeto-filters-frontend": "4.3.22",
+    "@bigbinary/neeto-icons": "1.20.53",
+    "@bigbinary/neeto-molecules": "3.16.77",
+    "@bigbinary/neeto-team-members-frontend": "4.5.20",
+    "@bigbinary/neetoui": "8.3.12",
     "@honeybadger-io/js": "6.10.1",
     "@honeybadger-io/react": "6.1.25",
     "@rails/activestorage": "7.0.8-3",

package/types.d.ts

@@ -1,4 +1,6 @@
+import React from "react";
 import { QueryClient } from "react-query";
+
 interface AssetLibraryProps {
   isOpen?: boolean;
   onClose?: () => void;
@@ -40,6 +42,56 @@ interface BasicImageUploaderProps {
   };
 }
 
+interface ImageFormProps {
+  onChange?: (name: string, value: any) => void;
+  imageUploaderProps?: {
+    maxSize?: number;
+    [key: string]: any;
+  };
+  className?: string;
+  names?: {
+    image?: string;
+    height?: string;
+    alignment?: string;
+  };
+  logoHeight?: {
+    default: number;
+    min: number;
+    max: number;
+  };
+  logoSizeVariableName: string;
+}
+
+interface ImageUploadProps {
+  name: string;
+  handleUpdate: (image: any) => void;
+  maxSize?: number;
+}
+
+interface SliderBlockProps {
+  title: string;
+  name: string;
+  onChange?: (value: number) => void;
+  defaultValue: number;
+  min: number;
+  max: number;
+}
+
+interface AlignmentBlockProps {
+  name: string;
+  title: string;
+  onChange?: (name: string, value: string) => void;
+}
+
+interface BlockProps {
+  title: string;
+  children: React.ReactNode;
+  dataCy?: string;
+  className?: string;
+  childrenClassName?: string;
+  isLoading?: boolean;
+}
+
 export function useImageUpload(): {
   uploadImage: (file: File, onUploadComplete: (url: string) => void) => void;
   uploadProgress: number;
@@ -68,4 +120,6 @@ export function ImageUploader(props: ImageUploaderProps): JSX.Element;
 
 export function AssetLibrary(props: AssetLibraryProps): JSX.Element;
 
+export function ImageForm(props: ImageFormProps): JSX.Element;
+
 export function refetchImageLibraryAssetList(queryClient: QueryClient): void;