edit-widget-test v1.0.34

Welcome to the EDIT-WIDGET Repo

Inside this document are instructions to get everything installed and running on your machine.

Table of Contents

• Abouth the repo
• Pre-requisite
• Setup EDIT-WIDGET
• Start EDIT-WIDGET
• Run EDIT-WIDGET in Host Application

About the repo

edit-widget is the app which contains edit related features that to be handover to builder team

This app provides the editing features like:

• Crop
• Enhance
• Rotate

Tech Stack:

• React
• TypeScript
• CSS(Styled Components)

Pre-requisite

• Install NVM (Node Version Manager)

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

• Download and Install Node.js using nvm

  nvm install 20.11.1

• we recommend using NVM (Node Version Manager) to manage NodeJS versions if multiple node versions installed

  nvm use version

  Verification commands

  nodejs: node --version
  npm: npm --version
  nvm: nvm --version

• Install Git

  Git-bash (WINDOWS ONLY) - (https://git-scm.com/download/win)

  Git (Linux/OS) Download (new Macs come with git already installed).

    Verification commands
    ```commands
    git --version
    ```

Setup EDIT-WIDGET

1. Clone the edit-widget repository. Clone this repo onto your computer. Navigate to the directory you want to put the repo.

 git@github.com:sflyinc-shutterfly/edit-widget.git

2. Navigate into the project directory

 cd edit-widget

3. Ok, now install the specific node module dependencies

npm install

Start EDIT-WIDGET

1. Run edit-widget, Open a terminal, go to the path of the edit-widget folder and run

   npm run dev

2. After execution of above command, local host url will get as output

3. Take that url, open it in browser

Run EDIT-WIDGET in Host Application

1. Install the package via npm.

   npm i @sfly/edit-widget

2. Instantiate the Class

   const editWidget = new EditWidget();

3. Open the modal

   editWidget.openModal(mediaData);
   // mediaData is the required parameter to open the modal

4. Retrieve the updated meta data of media.

   const onSubmitCallback = (updatedMediaData) => {
    console.log("Updated media data: in caalback",  updatedMediaData);
   }
   
   editWidget.setOnModalSubmitCallback(onSubmitCallback);

5. Render the updated image in place of actual image.

    <div>{editWidget.getCanvas()}</div>