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

package/README.md

@@ -1,5 +1,5 @@
 # neeto-image-uploader-nano
-The `neeto-image-uploader-nano` manages assets across neeto products. The nano exports the `@bigbinary/neeto-image-uploader-frontend` NPM package and `neeto-image-uploader-engine` Rails engine for development.
+The `neeto-image-uploader-nano` manages assets across neeto products. The nano exports the `@bigbinary/neeto-image-uploader-frontend` NPM package and `neeto-image-uploader-engine` Rails engine for development.
 
 # Contents
 - [neeto-image-uploader-nano](#neeto-image-uploader-nano)
@@ -38,7 +38,7 @@ The engine is used to manage assets across neeto products.
     ```zsh
     bundle install
     ```
-3. Add this line to your application's `config/routes.rb` file:
+3. Add this line to your application's `config/routes.rb` file:
     ```ruby
     mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"
     ```
@@ -165,6 +165,61 @@ const App = () => {
 export default App;
 ```
 
+#### 4. `ImageForm` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/main/app/javascript/src/components/ImageForm/index.jsx))
+
+**Props**
+- `onChange`: Callback function triggered when any form field changes.
+- `imageUploaderProps`: Additional props to be passed to the ImageUpload component.
+- `className`: Additional classes to be applied to the component.
+- `names`: Object specifying field names for form integration:
+  - `image`: Name of the image field in the form (e.g., "properties.imageUrl")
+  - `height`: Name of the height field in the form (e.g., "height")
+  - `alignment`: Name of the alignment field in the form (e.g., "alignment")
+- `logoHeight`: Object specifying height constraints for the logo slider:
+  - `default`: Default height value for the slider (default: 64)
+  - `min`: Minimum height value for the slider (default: 64)
+  - `max`: Maximum height value for the slider (default: 100)
+- `logoSizeVariableName`: CSS variable name for controlling logo size (required)
+
+**Usage**
+```jsx
+import { Formik } from "formik";
+import { ImageForm } from "@bigbinary/neeto-image-uploader-frontend";
+
+const App = () => {
+  const handleUpdate = (fieldName, value) => {
+    console.log(`Field ${fieldName} changed to:`, value);
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        properties: {
+          imageUrl: "",
+          height: 64,
+          alignment: "left"
+        },
+        altText: ""
+      }}
+    >
+      <ImageForm
+        className="logo-form"
+        imageUploaderProps={{ maxSize: 1048576 }}
+        names={{
+          image: "properties.imageUrl",
+          height: "height",
+          alignment: "alignment",
+        }}
+        logoSizeVariableName="--my-app-logo-size"
+        onChange={handleUpdate}
+      />
+    </Formik>
+  );
+};
+
+export default App;
+```
+
 ### Hooks
 #### 1. `useImageUpload` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/hooks/useImageUpload.js))
 

package/app/javascript/src/translations/en.json

@@ -23,7 +23,14 @@
       "uploadFromLink": "Upload from link",
       "width": "Width",
       "imageQuality": "Image quality",
-      "searchTheWeb": "Search the web"
+      "searchTheWeb": "Search the web",
+      "addImage": "Add image",
+      "logoSize": "Logo size",
+      "alignment": "Alignment",
+      "logoAltText": "Logo alt text",
+      "leftAlign": "Left align",
+      "centerAlign": "Center align",
+      "rightAlign": "Right align"
     },
     "placeholders": {
       "searchImage": "Search by name",
@@ -64,6 +71,9 @@
       "delete": "Delete",
       "title": "Delete image permanently?",
       "message": "Deleting this image will permanently remove it from all your workspaces. This action cannot be undone and will result in data loss wherever the image is being used."
+    },
+    "tooltips": {
+      "logoAltText": "Add alternative text for the logo."
     }
   }
 }

package/dist/AssetLibrary.js

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

package/dist/ImageUploader.js

@@ -13,7 +13,7 @@ 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 { I as ImageWithFallback } from './ImageWithFallback-Csv6Oivd.js';
-import { M as Modal, c as constructCloudflareImageURL } from './index-BSGhIrC8.js';
+import { M as Modal, c as constructCloudflareImageURL } from './index-DQC5j8GS.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/AssetLibrary.js

@@ -13,7 +13,7 @@ require('@bigbinary/neetoui/Typography');
 require('ramda');
 require('react-i18next');
 require('../utils-BoO2mwcq.js');
-var AssetLibrary = require('../index-dt1pENcE.js');
+var AssetLibrary = require('../index-DspO4oaA.js');
 require('../useImageUploader-YWyed_UV.js');
 require('../index-CmR3zLng.js');
 require('react/jsx-runtime');

package/dist/cjs/ImageUploader.js

@@ -15,7 +15,7 @@ var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var utils = require('../utils-BoO2mwcq.js');
 var ImageWithFallback = require('../ImageWithFallback-DzT_N2Su.js');
-var AssetLibrary = require('../index-dt1pENcE.js');
+var AssetLibrary = require('../index-DspO4oaA.js');
 var useImageUploader = require('../useImageUploader-YWyed_UV.js');
 var index = require('../index-CmR3zLng.js');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/cjs/index.js

@@ -1,30 +1,37 @@
 'use strict';
 
 var BasicImageUploader = require('./BasicImageUploader.js');
+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 AssetLibrary = require('../index-dt1pENcE.js');
+var Slider = require('@bigbinary/neetoui/Slider');
+var AssetLibrary = require('../index-DspO4oaA.js');
 var useProfileImageUpload = require('../useProfileImageUpload-B3zr0KBe.js');
 var useImageUploader = require('../useImageUploader-YWyed_UV.js');
 var utils = require('./utils.js');
-require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/objectWithoutProperties');
-require('classnames');
-require('@bigbinary/neeto-cist');
 require('@bigbinary/neeto-icons/Delete');
-require('@bigbinary/neetoui/Button');
 require('../utils-BoO2mwcq.js');
-require('@bigbinary/neetoui/Typography');
 require('@bigbinary/neetoui/ProgressBar');
-require('ramda');
-require('react-i18next');
 require('@bigbinary/neeto-commons-frontend/initializers');
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
 require('react-dropzone');
-require('i18next');
 require('@bigbinary/neetoui/Toastr');
 require('../index-CmR3zLng.js');
-require('react/jsx-runtime');
 require('../ImageWithFallback-DzT_N2Su.js');
 require('@babel/runtime/helpers/asyncToGenerator');
 require('@babel/runtime/regenerator');
@@ -32,7 +39,6 @@ require('@bigbinary/neeto-icons/MenuHorizontal');
 require('@bigbinary/neetoui/Dropdown');
 require('@bigbinary/neetoui/Modal');
 require('@bigbinary/neetoui/Tab');
-require('@bigbinary/neetoui/Spinner');
 require('@bigbinary/neeto-icons/LeftArrow');
 require('@tanstack/react-query');
 require('axios');
@@ -46,7 +52,238 @@ require('@bigbinary/neeto-team-members-frontend/constants');
 require('@bigbinary/neetoui/Alert');
 require('@rails/activestorage');
 
+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")
+      })]
+    })]
+  });
+};
 
 exports.BasicImageUploader = BasicImageUploader;
 exports.ImageUploader = ImageUploader;
@@ -55,4 +292,5 @@ exports.useImageUpload = useProfileImageUpload.useImageUpload;
 exports.useProfileImageUpload = useProfileImageUpload.useProfileImageUpload;
 exports.useImageUploader = useImageUploader.useImageUploader;
 exports.refetchImageLibraryAssetList = utils.refetchImageLibraryAssetList;
+exports.ImageForm = ImageForm;
 //# sourceMappingURL=index.js.map

package/dist/cjs/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/dist/{index-BSGhIrC8.js → index-DQC5j8GS.js}

@@ -23,7 +23,7 @@ import { withEventTargetValue, hasPermission } from '@bigbinary/neeto-commons-fr
 import Input from '@bigbinary/neetoui/Input';
 import Switch from '@bigbinary/neetoui/Switch';
 import Label from '@bigbinary/neetoui/Label';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Q as QUERY_KEYS, A as ASSETS_STALE_TIME, U as UNSPLASH_STALE_TIME } from './query-DMtOS6FM.js';
 import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
 import { VIEW_ROLES_PERMISSION } from '@bigbinary/neeto-team-members-frontend/constants';
@@ -472,67 +472,34 @@ n(css$1,{});
 
 var Controls = withT(function (_ref) {
   var _imageRef$current, _imageRef$current2;
-  var t = _ref.t,
-    aspectRatio = _ref.aspectRatio,
-    isAspectRatioLocked = _ref.isAspectRatioLocked,
-    crop = _ref.crop,
+  var t = _ref.t;
+    _ref.aspectRatio;
+    _ref.isAspectRatioLocked;
+    var crop = _ref.crop,
     handleSubmit = _ref.handleSubmit,
     imageRef = _ref.imageRef,
     isFullImage = _ref.isFullImage,
     setIsFullImage = _ref.setIsFullImage,
     _ref$hideControls = _ref.hideControls,
-    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls,
-    onToggleAspectRatioLock = _ref.onToggleAspectRatioLock,
-    handleWidthChange = _ref.handleWidthChange,
-    handleHeightChange = _ref.handleHeightChange,
-    handleAspectWidthChange = _ref.handleAspectWidthChange,
-    handleAspectHeightChange = _ref.handleAspectHeightChange,
-    width = _ref.width,
+    hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls;
+    _ref.onToggleAspectRatioLock;
+    var handleWidthChange = _ref.handleWidthChange,
+    handleHeightChange = _ref.handleHeightChange;
+    _ref.handleAspectWidthChange;
+    _ref.handleAspectHeightChange;
+    var width = _ref.width,
     height = _ref.height;
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-col space-y-6 p-4 md:w-2/6",
-    children: [!hideControls && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(Switch, {
-        checked: isFullImage,
-        className: "w-full",
-        label: t("neetoImageUploader.labels.selectOriginalImage"),
-        onChange: function onChange() {
-          return setIsFullImage(function (isFullImage) {
-            return !isFullImage;
-          });
-        }
-      }), /*#__PURE__*/jsx(Switch, {
-        checked: isAspectRatioLocked,
-        className: "w-full",
-        disabled: isFullImage,
-        label: t("neetoImageUploader.labels.lockAspectRatio"),
-        onChange: onToggleAspectRatioLock
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex w-full items-start gap-2",
-        children: [/*#__PURE__*/jsx(Label, {
-          className: "w-24 pt-2",
-          children: t("neetoImageUploader.imageEditor.aspectRatio")
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex w-32 justify-between gap-1 self-start",
-          children: [/*#__PURE__*/jsx(Input, {
-            className: "w-12",
-            "data-cy": "aspect-ratio-width-input",
-            disabled: isFullImage,
-            type: "number",
-            value: aspectRatio.width,
-            onChange: withEventTargetValue(handleAspectWidthChange)
-          }), /*#__PURE__*/jsx(Typography, {
-            children: ":"
-          }), /*#__PURE__*/jsx(Input, {
-            className: "w-12",
-            "data-cy": "aspect-ratio-height-input",
-            disabled: isFullImage,
-            type: "number",
-            value: aspectRatio.height,
-            onChange: withEventTargetValue(handleAspectHeightChange)
-          })]
-        })]
-      })]
+    children: [!hideControls && /*#__PURE__*/jsx(Switch, {
+      checked: isFullImage,
+      className: "w-full",
+      label: t("neetoImageUploader.labels.selectOriginalImage"),
+      onChange: function onChange() {
+        return setIsFullImage(function (isFullImage) {
+          return !isFullImage;
+        });
+      }
     }), /*#__PURE__*/jsxs("div", {
       className: "flex w-full items-start gap-2",
       children: [/*#__PURE__*/jsx(Label, {
@@ -577,7 +544,7 @@ var useImageControls = function useImageControls(_ref) {
   var _ref2 = (_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 ? _imageRef$current : {},
     imageWidth = _ref2.naturalWidth,
     imageHeight = _ref2.naturalHeight;
-  var _useState = useState(true),
+  var _useState = useState(isPresent(fixedAspectRatio)),
     _useState2 = _slicedToArray(_useState, 2),
     isAspectRatioLocked = _useState2[0],
     setIsAspectRatioLocked = _useState2[1];
@@ -2406,4 +2373,4 @@ var Modal = function Modal(_ref) {
 };
 
 export { Modal as M, constructCloudflareImageURL as c };
-//# sourceMappingURL=index-BSGhIrC8.js.map
+//# sourceMappingURL=index-DQC5j8GS.js.map