@bigbinary/neeto-image-uploader-frontend 2.3.21 → 2.3.22

package/dist/AssetLibrary.js

@@ -10,8 +10,8 @@ import '@bigbinary/neetoui/Toastr';
 import '@bigbinary/neetoui/Typography';
 import 'ramda';
 import 'react-i18next';
-import './utils-Bb1hqKhN.js';
-export { M as default } from './index-DQC5j8GS.js';
+import './utils-RGGHgnQc.js';
+export { M as default } from './index-C7sAzF3s.js';
 import './useImageUploader-BfrsCPBL.js';
 import './index-B1JijZPf.js';
 import 'react/jsx-runtime';

package/dist/BasicImageUploader.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { noop } from '@bigbinary/neeto-cist';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Button from '@bigbinary/neetoui/Button';
-import { b as isNilOrEmpty, i as isNotNilOrEmpty, I as IMAGE_WRAPPER_CLASSNAME, a as ImageDirectUpload } from './utils-Bb1hqKhN.js';
+import { i as isNilOrEmpty, a as isNotNilOrEmpty, I as IMAGE_WRAPPER_CLASSNAME, b as ImageDirectUpload } from './utils-RGGHgnQc.js';
 import { I as ImageWithFallback } from './ImageWithFallback-Csv6Oivd.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@bigbinary/neetoui/Typography';

package/dist/ImageForm.js

@@ -0,0 +1,283 @@
+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';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@bigbinary/neeto-commons-frontend/initializers';
+import '@bigbinary/neeto-icons/MenuHorizontal';
+import '@bigbinary/neetoui/Dropdown';
+import './utils-RGGHgnQc.js';
+import '@bigbinary/neetoui/ProgressBar';
+import 'react-dropzone';
+import '@bigbinary/neetoui/Toastr';
+import './index-B1JijZPf.js';
+import './ImageWithFallback-Csv6Oivd.js';
+import './index-C7sAzF3s.js';
+import '@bigbinary/neetoui/Modal';
+import '@bigbinary/neetoui/Tab';
+import './useImageUploader-BfrsCPBL.js';
+import '@tanstack/react-query';
+import '@bigbinary/neeto-commons-frontend/react-utils';
+import './query-DMtOS6FM.js';
+import '@rails/activestorage';
+import 'axios';
+import '@bigbinary/neeto-icons/LeftArrow';
+import '@bigbinary/neeto-commons-frontend/utils';
+import '@bigbinary/neetoui/Input';
+import '@bigbinary/neetoui/Switch';
+import '@bigbinary/neetoui/Label';
+import '@bigbinary/neeto-team-members-frontend/constants';
+import '@bigbinary/neetoui/Alert';
+
+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 as default };
+//# sourceMappingURL=ImageForm.js.map

package/dist/ImageForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageForm.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/dist/ImageUploader.js

@@ -11,9 +11,9 @@ import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import { mergeRight } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { D as DEFAULT_UPLOAD_CONFIG, O as OPTION_KEYS, i as isNotNilOrEmpty, I as IMAGE_WRAPPER_CLASSNAME, a as ImageDirectUpload } from './utils-Bb1hqKhN.js';
+import { D as DEFAULT_UPLOAD_CONFIG, O as OPTION_KEYS, a as isNotNilOrEmpty, I as IMAGE_WRAPPER_CLASSNAME, b as ImageDirectUpload } from './utils-RGGHgnQc.js';
 import { I as ImageWithFallback } from './ImageWithFallback-Csv6Oivd.js';
-import { M as Modal, c as constructCloudflareImageURL } from './index-DQC5j8GS.js';
+import { M as Modal, c as constructCloudflareImageURL } from './index-C7sAzF3s.js';
 import { a as useCreateBlob, u as useImageUploader, g as generateASCIIFileName } from './useImageUploader-BfrsCPBL.js';
 import { C as CLOUD_FLARE, I as IS_DEVELOPMENT_OR_HEROKU_ENV } from './index-B1JijZPf.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/cjs/ImageForm.js

@@ -0,0 +1,285 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var formik = require('formik');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var Button = require('@bigbinary/neetoui/Button');
+var Typography = require('@bigbinary/neetoui/Typography');
+var i18next = require('i18next');
+var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
+var CenterAlign = require('@bigbinary/neeto-icons/CenterAlign');
+var RightAlign = require('@bigbinary/neeto-icons/RightAlign');
+var jsxRuntime = require('react/jsx-runtime');
+var g = require('react');
+var classnames = require('classnames');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var ImageUploader = require('./ImageUploader.js');
+var Slider = require('@bigbinary/neetoui/Slider');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
+require('@bigbinary/neeto-commons-frontend/initializers');
+require('@bigbinary/neeto-icons/MenuHorizontal');
+require('@bigbinary/neetoui/Dropdown');
+require('../utils-BoO2mwcq.js');
+require('@bigbinary/neetoui/ProgressBar');
+require('react-dropzone');
+require('@bigbinary/neetoui/Toastr');
+require('../index-CmR3zLng.js');
+require('../ImageWithFallback-DzT_N2Su.js');
+require('../index-DspO4oaA.js');
+require('@bigbinary/neetoui/Modal');
+require('@bigbinary/neetoui/Tab');
+require('../useImageUploader-YWyed_UV.js');
+require('@tanstack/react-query');
+require('@bigbinary/neeto-commons-frontend/react-utils');
+require('../query-BslM05TL.js');
+require('@rails/activestorage');
+require('axios');
+require('@bigbinary/neeto-icons/LeftArrow');
+require('@bigbinary/neeto-commons-frontend/utils');
+require('@bigbinary/neetoui/Input');
+require('@bigbinary/neetoui/Switch');
+require('@bigbinary/neetoui/Label');
+require('@bigbinary/neeto-team-members-frontend/constants');
+require('@bigbinary/neetoui/Alert');
+
+var ALIGNMENTS = [{
+  label: i18next.t("neetoImageUploader.labels.leftAlign"),
+  value: "left",
+  icon: LeftAlign,
+  dataCy: "left-alignment"
+}, {
+  label: i18next.t("neetoImageUploader.labels.centerAlign"),
+  value: "center",
+  icon: CenterAlign,
+  dataCy: "center-alignment"
+}, {
+  label: i18next.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 ? neetoCist.noop : _ref$onChange;
+  var _useField = formik.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__*/jsxRuntime.jsxs("div", {
+    dataCy: "".concat(neetoCist.hyphenate(title), "-block"),
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+      lineHeight: "normal",
+      style: "body2",
+      weight: "medium",
+      children: title
+    }), /*#__PURE__*/jsxRuntime.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__*/g.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__*/jsxRuntime.jsxs("div", {
+    className: classnames("space-y-4", className),
+    "data-cy": dataCy,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-between",
+      "data-cy": "properties-header",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        lineHeight: "normal",
+        style: "body1",
+        weight: "semibold",
+        children: title
+      }), isLoading && /*#__PURE__*/jsxRuntime.jsx(Spinner, {})]
+    }), /*#__PURE__*/jsxRuntime.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useField = formik.useField(name),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    var image = _useField2[1].value,
+    setValue = _useField2[2].setValue;
+  var handleImageChange = function handleImageChange(changedImage) {
+    if (ramda.isEmpty(changedImage === null || changedImage === void 0 ? void 0 : changedImage.url)) {
+      setValue(null, false);
+      handleUpdate(null);
+      return;
+    }
+    setValue(changedImage, false);
+    handleUpdate(changedImage);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Block, {
+    dataCy: "add-image-card",
+    title: t("neetoImageUploader.labels.addImage"),
+    children: /*#__PURE__*/jsxRuntime.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 ? neetoCist.noop : _ref$onChange,
+    defaultValue = _ref.defaultValue,
+    min = _ref.min,
+    max = _ref.max;
+  var _useField = formik.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__*/jsxRuntime.jsx("div", {
+    "data-cy": "".concat(neetoCist.hyphenate(title), "-slider-block"),
+    children: /*#__PURE__*/jsxRuntime.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 ? neetoCist.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 = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var imageValue = formik.getIn(values, names.image);
+  var handleImageChange = function handleImageChange(image) {
+    if (ramda.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__*/jsxRuntime.jsxs("div", {
+    className: "space-y-4 ".concat(className),
+    children: [/*#__PURE__*/jsxRuntime.jsx(ImageUpload, _objectSpread({
+      handleUpdate: handleImageChange,
+      name: names.image
+    }, imageUploaderProps)), imageValue && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "space-y-4 px-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(SliderBlock, {
+        defaultValue: logoHeight["default"],
+        max: logoHeight.max,
+        min: logoHeight.min,
+        name: names.height,
+        title: t("neetoImageUploader.labels.logoSize"),
+        onChange: handleSliderChange
+      }), /*#__PURE__*/jsxRuntime.jsx(AlignmentBlock, {
+        name: names.alignment,
+        title: t("neetoImageUploader.labels.alignment"),
+        onChange: onChange
+      }), /*#__PURE__*/jsxRuntime.jsx(Input, {
+        name: "altText",
+        helpText: t("neetoImageUploader.tooltips.logoAltText"),
+        placeholder: t("neetoImageUploader.labels.logoAltText")
+      })]
+    })]
+  });
+};
+
+module.exports = ImageForm;
+//# sourceMappingURL=ImageForm.js.map