feat: moved to shared-components and implemented focal point picker in RTE

remix/app/components/FocalPointPicker/focalPointPicker.css

@@ -1,47 +0,0 @@
-.container {
-  display: grid;
-  gap: 1rem;
-  border-right: 1px solid #eee;
-  padding-right: 1rem;
-}
-
-.focalPointWrapper {
-  position: relative;
-  user-select: none;
-  justify-self: center;
-}
-
-.focalPointButton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(255, 0, 0, 0.4);
-  border: 3px solid red;
-  display: block;
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-}
-
-.focalPointImage {
-  height: 100%;
-  max-height: 350px;
-}
-
-.examples {
-  width: 100%;
-  max-width: 600px;
-  max-height: 400px;
-  display: grid;
-  grid-template-columns: 3fr 1fr;
-  grid-template-rows: 2fr 1fr;
-  gap: 0.25rem;
-}
-
-.examples img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-}

remix/app/components/FocalPointPicker/index.tsx

@@ -1,50 +0,0 @@
-import { FocalPoint } from "~/types/imagevault"
-import "./focalPointPicker.css"
-import useFocalPoint from "~/hooks/useFocalPoint"
-
-export interface FocalPointPickerProps {
-  focalPoint?: FocalPoint
-  imageSrc: string
-  onChange: (focalPoint: FocalPoint) => void
-}
-
-export default function FocalPointPicker({
-  focalPoint,
-  imageSrc,
-  onChange,
-}: FocalPointPickerProps) {
-  const { ref, x, y, onMove, canMove, setCanMove } = useFocalPoint({
-    focalPoint,
-    onChange,
-  })
-
-  const imagesArray = Array.from({ length: 4 })
-
-  return (
-    <div className="container">
-      <div className="focalPointWrapper" ref={ref} onMouseMove={onMove}>
-        <button
-          className="focalPointButton"
-          style={{
-            left: `${x}%`,
-            top: `${y}%`,
-            cursor: canMove ? "grabbing" : "grab",
-          }}
-          onMouseDown={() => setCanMove(true)}
-          onMouseUp={() => setCanMove(false)}
-        ></button>
-        <img className="focalPointImage" src={imageSrc} alt="" />
-      </div>
-      <div className="examples">
-        {imagesArray.map((_, idx) => (
-          <img
-            key={idx}
-            src={imageSrc}
-            alt=""
-            style={{ objectPosition: `${x}% ${y}%` }}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}

remix/app/components/ImageEditModal.tsx

@@ -11,7 +11,7 @@ import {
 } from "@contentstack/venus-components"
 
 import type { FocalPoint, InsertResponse } from "~/types/imagevault"
-import FocalPointPicker from "./FocalPointPicker"
+import FocalPointPicker from "~/shared-components/FocalPointPicker"
 
 type ImageEditModalProps = {
   fieldData: InsertResponse
@@ -123,8 +123,7 @@ export default function ImageEditModal({
             <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
             <TextInput
               value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
-              placeholder="Caption for image..."
-              name="caption"
+              name="focalPoint"
               disabled
             />
           </FieldComponent>