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

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/de.json

@@ -0,0 +1,79 @@
+{
+  "neetoImageUploader": {
+    "common": {
+      "imageLibrary": "Bildbibliothek",
+      "image": "Bild",
+      "noImages": "Keine Bilder in der Bibliothek gefunden",
+      "dropHere": "Datei hier ablegen"
+    },
+    "unsplash": {
+      "errorMessage": "Etwas ist schiefgelaufen! Bitte versuche es später erneut.",
+      "poweredByUnsplash": "<a>Powered by <strong>Unsplash</strong></a>"
+    },
+    "labels": {
+      "back": "Zurück",
+      "done": "Fertig",
+      "height": "Höhe",
+      "lockAspectRatio": "Seitenverhältnis sperren",
+      "selectOriginalImage": "Originalbild auswählen",
+      "uploadImage": "Bild hochladen",
+      "myImages": "Meine Bilder",
+      "unsplash": "Unsplash",
+      "unsplashImages": "Unsplash Bilder",
+      "uploadFromLink": "Von Link hochladen",
+      "width": "Breite",
+      "imageQuality": "Bildqualität",
+      "searchTheWeb": "Im Web suchen",
+      "addImage": "Bild hinzufügen",
+      "logoSize": "Logo Größe",
+      "alignment": "Ausrichtung",
+      "logoAltText": "Alternativer Text für Logo",
+      "leftAlign": "Links ausrichten",
+      "centerAlign": "Zentriert ausrichten",
+      "rightAlign": "Rechts ausrichten"
+    },
+    "placeholders": {
+      "searchImage": "Nach Namen suchen",
+      "searchImageFromWeb": "Bilder im Web suchen"
+    },
+    "link": {
+      "cancel": "Abbrechen",
+      "error": "Ungültige URL",
+      "label": "Füge einen Link zu einem Bild ein",
+      "placeholder": "https://example.com/image.jpg",
+      "upload": "Hochladen"
+    },
+    "imageEditor": {
+      "aspectRatio": "Seitenverhältnis"
+    },
+    "imageUpload": {
+      "change": "Ändern",
+      "images": "Bilder",
+      "imageLibrary": "Bildbibliothek",
+      "remove": "Entfernen",
+      "dragAndDropOrBrowseFile": "Ziehen & fallen lassen oder <span>hochladen</span>.",
+      "selectImagefromImageLibrary": "Aus der <span>Bildbibliothek</span> auswählen.",
+      "edit": "Bearbeiten",
+      "genericError": "Etwas ist schiefgelaufen.",
+      "fileSizeError": "Dateigröße ist zu groß",
+      "fileTypeError": "Dateityp wird nicht unterstützt",
+      "fileDimensionError": "Bilddimension ist zu groß. Maximal sind 12000px x 12000px.",
+      "restrictionMessage": "{{fileTypes, anyCase}}. bis zu {{size}} MB.",
+      "uploadedImage": "Hochgeladenes Bild",
+      "dragDropOrBrowseOrImageLibrary": "Ziehen und ablegen oder <span>Durchsuchen</span> einer Datei oder aus der <span>Bildbibliothek</span> auswählen.",
+      "idealImageSizeInfo": "Optimale Bildgröße: {{width}}x{{height}}px."
+    },
+    "errors": {
+      "sdkKeysMissing": "Fehlender urlEndpoint während der SDK-Initialisierung",
+      "imagekitKeysMissing": "Initialisierungsschlüssel für ImageKit wurden nicht bereitgestellt"
+    },
+    "deleteConfirmation": {
+      "delete": "Löschen",
+      "title": "Bild dauerhaft löschen?",
+      "message": "Das Löschen dieses Bildes entfernt es dauerhaft aus all deinen Arbeitsbereichen. Diese Aktion kann nicht rückgängig gemacht werden und führt zu Datenverlust, wo immer das Bild verwendet wird."
+    },
+    "tooltips": {
+      "logoAltText": "Füge alternativen Text für das Logo hinzu."
+    }
+  }
+}

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/app/javascript/src/translations/es.json

@@ -0,0 +1,79 @@
+{
+  "neetoImageUploader": {
+    "common": {
+      "imageLibrary": "Biblioteca de imágenes",
+      "image": "Imagen",
+      "noImages": "No se encontraron imágenes en la biblioteca",
+      "dropHere": "Suelta el archivo aquí"
+    },
+    "unsplash": {
+      "errorMessage": "¡Algo salió mal! Por favor, intenta de nuevo más tarde.",
+      "poweredByUnsplash": "<a>Impulsado por <strong>Unsplash</strong></a>"
+    },
+    "labels": {
+      "back": "Atrás",
+      "done": "Hecho",
+      "height": "Altura",
+      "lockAspectRatio": "Bloquear relación de aspecto",
+      "selectOriginalImage": "Seleccionar imagen original",
+      "uploadImage": "Subir imagen",
+      "myImages": "Mis imágenes",
+      "unsplash": "Unsplash",
+      "unsplashImages": "Imágenes de Unsplash",
+      "uploadFromLink": "Subir desde enlace",
+      "width": "Anchura",
+      "imageQuality": "Calidad de imagen",
+      "searchTheWeb": "Buscar en la web",
+      "addImage": "Agregar imagen",
+      "logoSize": "Tamaño del logo",
+      "alignment": "Alineación",
+      "logoAltText": "Texto alternativo del logo",
+      "leftAlign": "Alinear a la izquierda",
+      "centerAlign": "Alinear al centro",
+      "rightAlign": "Alinear a la derecha"
+    },
+    "placeholders": {
+      "searchImage": "Buscar por nombre",
+      "searchImageFromWeb": "Buscar imágenes en la web"
+    },
+    "link": {
+      "cancel": "Cancelar",
+      "error": "URL inválido",
+      "label": "Pega un enlace a una imagen",
+      "placeholder": "https://example.com/image.jpg",
+      "upload": "Subir"
+    },
+    "imageEditor": {
+      "aspectRatio": "Relación de aspecto"
+    },
+    "imageUpload": {
+      "change": "Cambiar",
+      "images": "Imágenes",
+      "imageLibrary": "Biblioteca de imágenes",
+      "remove": "Eliminar",
+      "dragAndDropOrBrowseFile": "Arrastrar y soltar o <span>subir</span>.",
+      "selectImagefromImageLibrary": "Seleccionar de la <span>biblioteca de imágenes</span>.",
+      "edit": "Editar",
+      "genericError": "¡Algo salió mal!",
+      "fileSizeError": "El tamaño del archivo es demasiado grande",
+      "fileTypeError": "El tipo de archivo no es compatible",
+      "fileDimensionError": "Las dimensiones de la imagen son demasiado grandes. El máximo es 12000px x 12000px.",
+      "restrictionMessage": "{{fileTypes, anyCase}}. hasta {{size}} MB.",
+      "uploadedImage": "Imagen subida",
+      "dragDropOrBrowseOrImageLibrary": "Arrastra y suelta o <span>Explora</span> un archivo o selecciona de la <span>Biblioteca de Imágenes</span>.",
+      "idealImageSizeInfo": "Tamaño óptimo de imagen: {{width}}x{{height}}px."
+    },
+    "errors": {
+      "sdkKeysMissing": "Falta el urlEndpoint durante la inicialización del SDK",
+      "imagekitKeysMissing": "Las claves de inicialización de ImageKit no están proporcionadas"
+    },
+    "deleteConfirmation": {
+      "delete": "Eliminar",
+      "title": "¿Eliminar la imagen permanentemente?",
+      "message": "Eliminar esta imagen la retirará permanentemente de todos tus espacios de trabajo. Esta acción no se puede deshacer y resultará en pérdida de datos donde sea que se esté usando la imagen."
+    },
+    "tooltips": {
+      "logoAltText": "Agrega texto alternativo para el logo."
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+{
+  "neetoImageUploader": {
+    "common": {
+      "imageLibrary": "Bibliothèque d'images",
+      "image": "Image",
+      "noImages": "Aucune image trouvée dans la bibliothèque",
+      "dropHere": "Déposez le fichier ici"
+    },
+    "unsplash": {
+      "errorMessage": " quelque chose a mal tourné ! Veuillez réessayer plus tard.",
+      "poweredByUnsplash": "<a>Alimenté par <strong>Unsplash</strong></a>"
+    },
+    "labels": {
+      "back": "Retour",
+      "done": "Terminé",
+      "height": "Hauteur",
+      "lockAspectRatio": "Verrouiller le rapport d'aspect",
+      "selectOriginalImage": "Sélectionner l'image originale",
+      "uploadImage": "Télécharger l'image",
+      "myImages": "Mes images",
+      "unsplash": "Unsplash",
+      "unsplashImages": "Images Unsplash",
+      "uploadFromLink": "Télécharger à partir d'un lien",
+      "width": "Largeur",
+      "imageQuality": "Qualité de l'image",
+      "searchTheWeb": "Rechercher sur le web",
+      "addImage": "Ajouter une image",
+      "logoSize": "Taille du logo",
+      "alignment": "Alignement",
+      "logoAltText": "Texte alternatif du logo",
+      "leftAlign": "Alignement à gauche",
+      "centerAlign": "Alignement au centre",
+      "rightAlign": "Alignement à droite"
+    },
+    "placeholders": {
+      "searchImage": "Rechercher par nom",
+      "searchImageFromWeb": "Rechercher des images sur le web"
+    },
+    "link": {
+      "cancel": "Annuler",
+      "error": "URL invalide",
+      "label": "Collez un lien vers une image",
+      "placeholder": "https://example.com/image.jpg",
+      "upload": "Télécharger"
+    },
+    "imageEditor": {
+      "aspectRatio": "Rapport d'aspect"
+    },
+    "imageUpload": {
+      "change": "Changer",
+      "images": "Images",
+      "imageLibrary": "Bibliothèque d'images",
+      "remove": "Supprimer",
+      "dragAndDropOrBrowseFile": "Glissez-déposez ou <span>téléchargez</span>.",
+      "selectImagefromImageLibrary": "Sélectionner dans <span>bibliothèque d'images</span>.",
+      "edit": "Éditer",
+      "genericError": "Quelque chose a mal tourné.",
+      "fileSizeError": "La taille du fichier est trop grande",
+      "fileTypeError": "Le type de fichier n'est pas pris en charge",
+      "fileDimensionError": "La dimension de l'image est trop grande. Maximum est 12000px x 12000px.",
+      "restrictionMessage": "{{fileTypes, anyCase}}. jusqu'à {{size}} Mo.",
+      "uploadedImage": "Image téléchargée",
+      "dragDropOrBrowseOrImageLibrary": "Faites glisser et déposez ou <span>Parcourir</span> un fichier ou sélectionnez dans <span>Bibliothèque d'images</span>.",
+      "idealImageSizeInfo": "Taille d'image optimale : {{width}}x{{height}}px."
+    },
+    "errors": {
+      "sdkKeysMissing": "URLEndpoint manquant lors de l'initialisation du SDK",
+      "imagekitKeysMissing": "Les clés d'initialisation d'ImageKit ne sont pas fournies"
+    },
+    "deleteConfirmation": {
+      "delete": "Supprimer",
+      "title": "Supprimer l'image de façon permanente ?",
+      "message": "La suppression de cette image l'enlèvera de tous vos espaces de travail de manière permanente. Cette action ne peut pas être annulée et entraînera une perte de données là où l'image est utilisée."
+    },
+    "tooltips": {
+      "logoAltText": "Ajouter un texte alternatif pour le 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');