@bigbinary/neeto-image-uploader-frontend 1.2.6 → 1.2.8

package/README.md

@@ -1,8 +1,188 @@
 # 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)
+- [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. Add the following two lines to the applications `Gemfile.rb` file:
+
+  ```ruby
+    gem "imagekitio"
+
+    gem "httparty"
+  ```
+
+3. Run the following command to install the engine:
+
+```shell
+  bundle install
+```
+
+4. Add the following line to your application's `config/routes.rb`:
+
+```ruby
+  mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"
+```
+
+5. 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_AUTH_ENDPOINT
+  IMAGE_KIT_DEFAULT_FOLDER
+
+  UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)
+```
+
+6. 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"] %>
+  image_kit_auth_endpoint: <%= ENV["IMAGE_KIT_AUTH_ENDPOINT"] %>
+  client_app_name: <%= ENV["CLIENT_APP_NAME"] %>
+  unsplash_access_key: <%= ENV["UNSPLASH_ACCESS_KEY"] %>
+```
+
+7. 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,
+          authentication_endpoint: Rails.application.secrets.image_kit_auth_endpoint,
+          folder: Rails.application.secrets.client_app_name
+        }
+      }
+
+      global_props.deep_merge!(
+        {
+          organization: {
+            subdomain: @organization.subdomain
+          }
+        }) # only required if organization subdomain information is not present in globalProps
+
+      global_props.deep_merge!(image_kit_props)
+    end
+  end
+```
+
+8. Add the following file `imagekitio.rb` inside `config/initializers`
+
+```ruby
+  # frozen_string_literal: true
+
+  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
+```
+
+The frontend exports two components `AssetLibrary` and `ImageUploader`.
+
+# Components
+
+## 1. AssetLibrary
+
+<div align="center">
+  <img src="https://github.com/bigbinary/neeto-editor/assets/70290286/90f445f5-ed28-4e25-8e20-033887f06039" alt="Asset library"/>
+</div>
+
+## 2. ImageUploader
+
+<div align="center">
+  <img src="https://github.com/bigbinary/neeto-editor/assets/70290286/d293d887-38fd-4e55-a53d-dd591a52f053" alt="Image Uploader"/>
+</div>
+
+# 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
 
@@ -10,7 +190,8 @@ rails server
 ```
 
 2. Setup and run the example app:
+
 ```zsh
 yarn install
-yarn start
+./bin/webpacker-dev-server
 ```