@bigbinary/neeto-image-uploader-frontend 1.5.6 → 1.5.8

package/README.md

@@ -1,209 +1,212 @@
-# neeto-image-uploader
-
-**neeto-image-uploader-nano** enables the management of assets across projects for an induvidual organization.
-
-# Index
-
-- [General information](#general-information)
-- [Installation instructions](#installation-instructions)
-  - [Engine Installation](#engine-installation)
-  - [Frontend package Installation](#frontend-package-installation)
-- [Components](#components)
-  - [1. AssetLibrary](#1-assetlibrary)
-  - [2. ImageUploader](#2-imageuploader)
-- [Hooks](#hooks)
-  - [1. useImageUpload](#1-useimageuploader)
-- [Development instructions](#development-instructions)
-  - [Engine development](#engine-development)
-  - [Frontend package development](#frontend-package-development)
-- [Setup](#setup)
-
-# General information
-
-- This nano deals with accessing assets across projects for an organization.
-
-# Installation instructions
-
-## Engine Installation
-
-1. Add the following line to your application's Gemfile:
-
-```ruby
-  source "NEETO_GEM_SERVER_URL" do
-   # ..existing gems
-
-   gem 'neeto-image-uploader-engine'
-  end
-```
-
-2. Run the following command to install the engine:
-
-```shell
-  bundle install
-```
-
-3. Add the following line to your application's `config/routes.rb`:
-
-```ruby
-  mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"
-```
-
-4. Add the following keys to environment variables (all 6 keys are required):
-
-```zsh
-  IMAGE_KIT_PUBLIC_KEY
-  IMAGE_KIT_PRIVATE_KEY
-  IMAGE_KIT_URL_ENDPOINT
-  IMAGE_KIT_DEFAULT_FOLDER
-
-  UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)
-```
-
-5. Add the following lines to `secrets.yml`:
-
-```yml
-  image_kit_public_key: <%= ENV["IMAGE_KIT_PUBLIC_KEY"] %>
-  image_kit_private_key: <%= ENV["IMAGE_KIT_PRIVATE_KEY"] %>
-  image_kit_url_endpoint: <%= ENV["IMAGE_KIT_URL_ENDPOINT"] %>
-  unsplash_access_key: <%= ENV["UNSPLASH_ACCESS_KEY"] %>
-```
-
-6. Add the folowing linse in `application_helper.rb` inside `app/helpers` folder:
-
-```ruby
-  module ApplicationHelper
-    def get_client_props
-      global_props = NeetoCommonsBackend::Helpers.common_client_props(@organization, current_user)
-
-      image_kit_props = {
-        image_kit: {
-          url_endpoint: Rails.application.secrets.image_kit_url_endpoint,
-          public_key: Rails.application.secrets.image_kit_public_key,
-          folder: NeetoCommonsBackend::EnvConstants.client_app_name
-        }
-      }
-
-      global_props.deep_merge!(image_kit_props)
+# 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.
+
+# Contents
+1. [Development with Host Application](#development-with-host-application)
+    - [Engine](#engine)
+        - [Installation](#installation)
+    - [Frontend package](#frontend-package)
+        - [Installation](#installation-1)
+        - [Components](#components)
+        - [Hooks](#hooks)
+        - [Upload Config](#upload-config)
+2. [Instructions for Publishing](#instructions-for-publishing)
+
+# Development with Host Application
+## Engine
+The engine is used to manage assets across neeto products.
+
+### Installation
+1. Add this line to your application's Gemfile:
+    ```ruby
+    source "NEETO_GEM_SERVER_URL" do
+       # ..existing gems
+
+       gem 'neeto-image-uploader-engine'
     end
-  end
-```
-
-7. Add the following file `imagekitio.rb` inside `config/initializers`
-
-```ruby
-  # frozen_string_literal: true
-
-  require "imagekitio"
-
-  ImageKitIo.configure do |config|
-    config.public_key = Rails.application.secrets.image_kit_public_key
-    config.private_key = Rails.application.secrets.image_kit_private_key
-    config.url_endpoint = Rails.application.secrets.image_kit_url_endpoint
-  end
-```
-
-## Frontend package installation
-
-Install the latest neeto-image-uploader-frontend package using the below command:
-
-```shell
-  yarn add @bigbinary/neeto-image-uploader-frontend
-```
+    ```
+2. And then execute:
+    ```zsh
+    bundle install
+    ```
+3. Add this line to your application's `config/routes.rb` file:
+    ```ruby
+    mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"
+    ```
+4. Add the following keys to environment variables (all 6 keys are required):
+    ```zsh
+    IMAGE_KIT_PUBLIC_KEY
+    IMAGE_KIT_PRIVATE_KEY
+    IMAGE_KIT_URL_ENDPOINT
 
-The frontend exports two components `AssetLibrary` and `ImageUploader`.
+    UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)
+    ```
 
-# Components
+## Frontend package
+### Installation
+1. Install the latest `neeto-image-uploader-frontend` package using the below command:
+    ```zsh
+    yarn add @bigbinary/neeto-image-uploader-frontend
+    ```
 
-## 1. AssetLibrary
+### Components
+#### 1. `AssetLibrary` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/components/Modal/index.jsx))
 
 <div align="center">
   <img src="https://github.com/bigbinary/neeto-editor/assets/70290286/90f445f5-ed28-4e25-8e20-033887f06039" alt="Asset library"/>
 </div>
 
-## 2. ImageUploader
+**Props**
+- `isOpen`: A boolean to specify whether the modal is open or not.
+- `onClose`: A callback function triggered when the modal is closed.
+- `onUploadComplete`: A callback function triggered when the image upload is complete.
+- `uploadConfig`: Configuration object for image uploads.
+
+**Usage**
+```jsx
+import React, { useState } from "react";
+import { AssetLibrary } from "@bigbinary/neeto-image-uploader-frontend";
+
+const App = () => {
+  const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
+  const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
+
+  const handleUploadComplete = image => setImage(image);
+
+  return (
+      <AssetLibrary
+        isOpen={isAssetLibraryOpen}
+        onClose={() => setIsAssetLibraryOpen(false)}
+        onUploadComplete={handleUploadComplete}
+      />
+  );
+};
+
+export default App;
+```
+
+#### 2. `ImageUploader` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/components/ImageUploader/index.jsx))
 
 <div align="center">
   <img src="https://github.com/bigbinary/neeto-editor/assets/70290286/d293d887-38fd-4e55-a53d-dd591a52f053" alt="Image Uploader"/>
 </div>
 
-# Hooks
+**Props**
+- `onUploadComplete`: A callback function triggered when the image upload is complete.
+- `className`: Additional classes to be applied to the component.
+- `src`: The source URL of the image to be displayed initially.
+- `uploadConfig`: Configuration object for image uploads.
+
+**Usage**
+```jsx
+import React, { useState } from "react";
+import { ImageUploader } from "@bigbinary/neeto-image-uploader-frontend";
+
+const App = () => {
+  const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
+  const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
+
+  const handleUploadComplete = image => setImage(image);
+
+  return (
+      <ImageUploader
+        className="mb-8 h-52 w-80"
+        key={image.url}
+        src={image.url}
+        onUploadComplete={handleUploadComplete}
+      />
+  );
+};
+
+export default App;
+```
 
-## 1. useImageUpload
+#### 3. `BasicImageUploader` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/components/BasicImageUploader.jsx))
+
+**Props**
+- `src`: The source URL of the image to be displayed initially.
+- `className`: Additional classes to be applied to the component.
+- `imageFallbackProps`: Props to be passed to the ImageWithFallback component.
+- `onDrop`: Callback function triggered when an image is dropped or selected for upload.
+- `isDisabled`: A boolean to specify whether the uploader is disabled.
+- `onRemove`: Callback function triggered when the "Remove" button is clicked.
+
+**Usage**
+```jsx
+import React, { useState } from "react";
+import { noop } from "neetocist";
+import { BasicImageUploader } from "@bigbinary/neeto-image-uploader-frontend";
+
+const App = () => {
+  const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });
+
+  return (
+      <BasicImageUploader
+        className="h-52 w-80"
+        src={image.url}
+        uploadProgress={0}
+        onDrop={noop}
+        onRemove={() => setImage({ url: "", signedId: "" })}
+      />
+  );
+};
+
+export default App;
+```
 
-  The `useImageUpload` hook is a React custom hook that simplifies the process of uploading images in your application. It handles both development and production scenarios, tracks upload progress, and provides a clean interface for image uploading.
+### Hooks
+#### 1. `useImageUpload` ([source code](https://github.com/bigbinary/neeto-image-uploader-nano/blob/0c060e75a32bc04308491a50b96c3b7d4d6f7c83/app/javascript/src/hooks/useImageUpload.js))
 
-### Import the hook
+- The `useImageUpload` hook is a React custom hook that simplifies the process of uploading images in your application. It handles both development and production scenarios, tracks upload progress, and provides a clean interface for image uploading.
+- Usage in [neetoAuth](https://github.com/bigbinary/neeto-auth-web/blob/9fdf3baf49f60c2ad7d7bf0518af9c00885f56ef/app/javascript/src/components/Dashboard/Account/Profile/ChangeProfile.jsx#L59).
 
+**Returns**
+- `uploadImage`: Function to initiate image upload. It takes two parameters:
+  - `file`: The image file to be uploaded.
+  - `onUploadComplete`: Callback function called when the upload is complete.
+- `uploadProgress`: Number representing the upload progress (0-100).
+- `isUploading`: Boolean indicating whether an upload is in progress.
+
+**Usage**
+##### Import the hook
   ```jsx
   import { useImageUpload } from "@bigbinary/neeto-image-uploader-frontend";
   ```
 
-### Invoke the hook
-
+##### Invoke the hook
   ```jsx
-    const { uploadImage, uploadProgress, isUploading } = useImageUpload();
+  const { uploadImage, uploadProgress, isUploading } = useImageUpload();
   ```
 
-### Call uploadImage to Upload an Image
-
+##### Call uploadImage to Upload an Image
   ```jsx
-    const handleImageUpload = async (file) => {
-      uploadImage(file, (uploadedImageData) => {
-        // Handle the uploaded image data
-      });
-    };
+  const handleImageUpload = async (file) => {
+    uploadImage(file, (uploadedImageData) => {
+      // Handle the uploaded image data
+    });
+  };
   ```
 
-# Development instructions
-
-## Engine development
-
-1. Add this line to your application's Gemfile (replace the path to the local
-   copy of neeto-image-uploader-engine):
-
-   ```ruby
-   gem 'neeto-image-uploader-engine', path: '../neeto-image-uploader-engine'
-   ```
-
-2. And then execute:
-
-   ```shell
-   bundle install
-   ```
-
-3. Refer [engine installation](#engine-installation).
-
-## Frontend package development
-
-The usage of `yalc` is explained in this video:
-<https://www.youtube.com/watch?v=QBiYGP0Rhe0>
-
-1. See the changes in the host app by executing the following command \
-     <br/> Use this command if releasing package for the first time.
-
-    ```shell
-    yarn build && yalc publish
-    ```
-
-    Use this command to see changes after the initial publish.
-
-    ```shell
-    yarn release
-    ```
-
-### Setup
-
-1. Setup and run the Rails server of the dummy application:
-
-```zsh
-./test/dummy/bin/setup
-
-rails server
+### Upload Config
+The "Upload Config" section describes the default upload configuration. This configuration can be overridden by passing the `uploadConfig` prop.
+
+```js
+{
+  "maxImageSize": globalProps.endUserUploadedFileSizeLimitInMb,
+  "allowedImageTypes": {
+    "image/png": [".png"],
+    "image/jpg": [".jpg", ".jpeg"],
+    "image/gif": [".gif"],
+    "image/svg+xml": [".svg"]
+  }
+}
 ```
 
-2. Setup and run the example app:
+Example: Overriding upload config in [neetoForm](https://github.com/bigbinary/neeto-form-web/blob/48db536b74c1e09176d7634c23d8a59c71d848e9/app/javascript/src/components/Form/Design/Sidebar/commons/ImageBlock.jsx#L59).
 
-```zsh
-yarn install
-./bin/webpacker-dev-server
-```
+**Keys**
+- `maxImageSize`: The maximum size allowed for uploaded images.
+- `allowedImageTypes`: An object specifying the allowed image types and their corresponding file extensions.
+
+# Instructions for Publishing
+Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.

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

@@ -45,14 +45,14 @@
       "imageLibrary": "Image library",
       "remove": "Remove",
       "dragAndDropOrBrowseFile": "Drag and drop or <span>Browse</span> a file.",
-      "selectImagefromImageLibrary": "Select from <span>Image Library</span>",
+      "selectImagefromImageLibrary": "Select from <span>Image Library</span>.",
       "edit": "Edit",
       "genericError": "Something went wrong!.",
       "fileSizeError": "File size is too large",
       "fileTypeError": "File type is not supported",
-      "allowedTypes": " Only <strong>{{fileTypes}}</strong> files are supported.",
-      "allowedSize": "Maximum allowed size is <strong>{{size}}</strong> MB.",
-      "uploadedImage": "Uploaded Image"
+      "restrictionMessage": "{{fileTypes, anyCase}}. upto {{size}} MB.",
+      "uploadedImage": "Uploaded Image",
+      "dragDropOrBrowseOrImageLibrary": "Drag and drop or <span>Browse</span> a file or select from <span>Image Library</span>."
     }
   }
 }