galadrim-feedback 0.0.6 → 0.0.8

package/dist/src/index.css

@@ -3,5 +3,6 @@
 @tailwind utilities;
 
 .comment-cursor {
-  cursor: url("./assets/comment.svg"), auto !important;
+  cursor: url("https://galadrim-dashboard-client.s3.eu-west-3.amazonaws.com/comment.svg"),
+    auto !important;
 }

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/index.d.ts

@@ -0,0 +1,15 @@
+// index.d.ts
+
+import { FC } from "react";
+
+export interface FeedbackOverlayProps {
+  githubUrl?: string;
+}
+
+/**
+ * FeedbackOverlay Component
+ * A component that displays a feedback form overlay.
+ */
+declare const FeedbackOverlay: FC<FeedbackOverlayProps>;
+
+export default FeedbackOverlay;

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "galadrim-feedback",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist/",
-    "assets/"
-  ],
   "scripts": {
     "build": "rollup -c",
     "prepublishOnly": "npm run build"

package/rollup.config.js

@@ -0,0 +1,40 @@
+// rollup.config.js
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import json from "@rollup/plugin-json";
+import nodePolyfills from "rollup-plugin-node-polyfills";
+import pkg from "./package.json" assert { type: "json" };
+
+export default {
+  input: "src/App.tsx", // Your entry point
+  output: [
+    {
+      file: pkg.main, // dist/index.cjs.js
+      format: "cjs",
+      sourcemap: "inline",
+    },
+    {
+      file: pkg.module, // dist/index.es.js
+      format: "es",
+      sourcemap: "inline",
+    },
+  ],
+  external: [
+    // Peer dependencies (don’t bundle React, ReactDOM, etc.)
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
+  plugins: [
+    resolve(),
+    nodePolyfills(),
+    commonjs(),
+    postcss({
+      extract: "src/index.css",
+    }),
+    typescript({
+      tsconfig: "./tsconfig.json",
+    }),
+    json(),
+  ],
+};

package/src/App.tsx

@@ -0,0 +1,16 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Root from "./pages/Root";
+import "./index.css";
+import React from "react";
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Root />
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/src/components/buttons/IconButton.tsx

@@ -0,0 +1,27 @@
+import classNames from "classnames";
+
+export const IconButton = ({
+  text,
+  iconPath,
+  twButtonBackgroundColor,
+  onClick,
+}: {
+  text: string;
+  iconPath: string;
+  twButtonBackgroundColor: string;
+  onClick: () => void;
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={classNames(
+        "flex-shrink-0 flex flex-row items-center px-4 py-2 gap-2 rounded-[8px] text-white font-[500] ",
+        twButtonBackgroundColor,
+        "hover:bg-opacity-80"
+      )}
+    >
+      <img src={iconPath} className="w-6 h-6" />
+      {text}
+    </button>
+  );
+};

package/src/components/buttons/PlusButton.tsx

@@ -0,0 +1,20 @@
+import { IconButton } from "./IconButton";
+
+export const PlusButton = ({
+  text,
+  twButtonBackgroundColor,
+  onClick,
+}: {
+  text: string;
+  twButtonBackgroundColor: string;
+  onClick: () => void;
+}) => {
+  return (
+    <IconButton
+      text={text}
+      iconPath="/plus.svg"
+      twButtonBackgroundColor={twButtonBackgroundColor}
+      onClick={onClick}
+    />
+  );
+};

package/src/components/feedback/FeedbackInput.tsx

@@ -0,0 +1,23 @@
+// import { useState } from "react";
+// import { Feedback } from "../../types/types";
+
+// export const FeedbackInput = ({
+//   feedback,
+//   setFeedback,
+// }: {
+//   feedback: Feedback;
+//   setFeedback: (feedback: Feedback) => void;
+// }) => {
+//   const [comment, setComment] = useState(feedback.comment);
+
+//   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+//     setComment(event.target.value);
+//   };
+
+//   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+//     event.preventDefault();
+//     setFeedback({ ...feedback, comment });
+//   };
+
+//   return <div></div>;
+// };

package/src/components/feedback/FeedbackItem.tsx

@@ -0,0 +1,89 @@
+import { createPortal } from "react-dom";
+import { useEffect, useRef, useState } from "react";
+import { Feedback } from "../../types/types";
+import { useDeleteFeedback } from "../../services/feedback";
+
+export const FeedbackItem = ({ feedback }: { feedback: Feedback }) => {
+  const targetElement = useRef<HTMLElement | null>(null);
+  const { mutate: deleteFeedback } = useDeleteFeedback();
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (!targetElement || !targetElement.current) {
+        return;
+      }
+      const dimensions = targetElement.current.getBoundingClientRect();
+      setPosition({
+        top: feedback.y + dimensions.top + window.scrollY,
+        left: feedback.x + dimensions.left + window.scrollX,
+      });
+    };
+
+    const elements = document.querySelectorAll<HTMLElement>(
+      `[data-id="${feedback.elementId}"]`
+    );
+    const element = elements[feedback.elementIndex];
+
+    if (element) {
+      console.log(element);
+
+      targetElement.current = element;
+      handleResize();
+      window.addEventListener("resize", handleResize);
+    }
+
+    return () => {
+      if (element) {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, [feedback]);
+
+  const handleDeleteFeedback = () => {
+    deleteFeedback(feedback);
+  };
+
+  // If we haven't found a matching DOM node, don't render anything
+  if (!targetElement || !targetElement.current) {
+    return null;
+  }
+
+  console.log("rendrr", position);
+
+  // Render this component inside `targetElement` using a Portal
+  return createPortal(
+    <div
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        width: "200px",
+        height: "100px",
+        border: "1px solid black",
+        backgroundColor: "white",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <div>
+          <p style={{ fontSize: "16px", fontWeight: "bold" }}>Feedback</p>
+          <p style={{ fontSize: "14px" }}>
+            Created at: {feedback.createdAt.toLocaleString()}
+          </p>
+          <a href={feedback.elementId} target="_blank">
+            Go to component
+          </a>
+        </div>
+        <button onClick={handleDeleteFeedback}>Delete</button>
+      </div>
+      <p style={{ fontSize: "14px" }}>{feedback.comment}</p>
+    </div>,
+    document.body
+  );
+};

package/src/components/misc/Avatar.tsx

@@ -0,0 +1,3 @@
+export const Avatar = ({ avatar }: { avatar: string }) => {
+  return <img src={avatar} className="w-10 h-10 rounded-full" />;
+};

package/src/components/misc/Modal.tsx

@@ -0,0 +1,43 @@
+import { useRef } from "react";
+
+export const Modal = ({
+  isVisible,
+  closeModal,
+  limitWidth = true,
+  children,
+}: {
+  isVisible: boolean;
+  closeModal?: () => void;
+  limitWidth?: boolean;
+  children: React.ReactNode;
+}) => {
+  const resizing = useRef(false);
+
+  if (!isVisible) {
+    return null;
+  }
+  const width = limitWidth ? "w-[400px]" : "";
+  return (
+    <div
+      className="modal"
+      onMouseDown={(e) => {
+        const target = e.target as HTMLElement;
+        if (target.tagName === "TEXTAREA") {
+          resizing.current = true;
+        }
+      }}
+      onMouseUp={() => {
+        setTimeout(() => {
+          resizing.current = false;
+        }, 100);
+      }}
+      onClick={(e) => {
+        if (closeModal && e.target === e.currentTarget && !resizing.current) {
+          closeModal();
+        }
+      }}
+    >
+      <div className={`${width} bg-white rounded-lg`}>{children}</div>
+    </div>
+  );
+};

package/src/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.comment-cursor {
+  cursor: url("https://galadrim-dashboard-client.s3.eu-west-3.amazonaws.com/comment.svg"),
+    auto !important;
+}

package/src/pages/FeedbacksCanvas.tsx

@@ -0,0 +1,38 @@
+import { Dispatch, useEffect } from "react";
+import { FeedbackItem } from "../components/feedback/FeedbackItem";
+import { useFeedbacks } from "../services/feedback";
+import { Feedback } from "../types/types";
+
+export const FeedbacksCanvas = ({
+  isOpen,
+  setIsOpen,
+  feedbacks,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  feedbacks: Feedback[];
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        zIndex: 2147483647, // Maximum zIndex
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        height: "100vh",
+      }}
+    >
+      {feedbacks &&
+        feedbacks
+          .filter((feedback) => feedback.path === window.location.pathname)
+          .map((feedback) => (
+            <FeedbackItem key={feedback.id} feedback={feedback} />
+          ))}
+    </div>
+  );
+};

package/src/pages/Overlay.tsx

@@ -0,0 +1,26 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Dispatch } from "react";
+import { FeedbacksCanvas } from "./FeedbacksCanvas";
+import { Feedback } from "../types/types";
+
+export const Overlay = ({
+  isOpen,
+  setIsOpen,
+  queryClient,
+  feedbacks,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  queryClient: QueryClient;
+  feedbacks: Feedback[];
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <FeedbacksCanvas
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        feedbacks={feedbacks}
+      />
+    </QueryClientProvider>
+  );
+};

package/src/pages/Root.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect } from "react";
+import { FeedbackItem } from "../components/feedback/FeedbackItem";
+import { useCreateFeedback, useFeedbacks } from "../services/feedback";
+import { FeedbackPayload } from "../types/types";
+
+function Root() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { data: feedbacks } = useFeedbacks();
+
+  console.log("feedbacks 1 : ", feedbacks);
+
+  const { mutate: createFeedback } = useCreateFeedback();
+
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener("keydown", handleKeyPress);
+      return () => {
+        window.removeEventListener("keypress", handleKeyPress);
+      };
+    }
+  }, [isOpen]);
+
+  const handleKeyPress = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const node = e.target as HTMLElement | null;
+    const elementId = node?.dataset.id || "";
+    const allElements = document.querySelectorAll<HTMLElement>(
+      `[data-id="${elementId}"]`
+    );
+
+    const arrAllElements = Array.from(allElements);
+
+    const elementIndex = arrAllElements.indexOf(node as HTMLElement);
+
+    const x = e.offsetX;
+    const y = e.offsetY;
+    console.log(e);
+    const newFeedback: FeedbackPayload = {
+      x,
+      y,
+      comment: "test",
+      path: window.location.pathname,
+      elementId,
+      elementIndex,
+    };
+    console.log(newFeedback);
+    createFeedback(newFeedback);
+    document.body.classList.remove("comment-cursor");
+    document.removeEventListener("click", handleClick, true);
+    setIsOpen(true);
+  };
+
+  const handleCreateFeedback = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    document.body.classList.add("comment-cursor");
+    document.addEventListener("click", handleClick, true);
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          position: "fixed",
+          top: "calc(100vh - 62px)",
+          left: "calc(100vw - 124px)",
+          width: "100px",
+          height: "50px",
+          zIndex: 1000000,
+          backgroundColor: "#0085FF",
+          color: "white",
+          borderRadius: 4,
+        }}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        Show Feedback
+      </div>
+      <button
+        style={{
+          position: "fixed",
+          top: "calc(100vh - 122px)",
+          left: "calc(100vw - 124px)",
+          width: "100px",
+          height: "50px",
+          zIndex: 1000000,
+          backgroundColor: "#0085FF",
+          color: "white",
+          borderRadius: 4,
+        }}
+        onClick={handleCreateFeedback}
+      >
+        New Feedback
+      </button>
+      {isOpen &&
+        feedbacks &&
+        feedbacks
+          .filter((feedback) => feedback.path === window.location.pathname)
+          .map((feedback) => (
+            <FeedbackItem key={feedback.id} feedback={feedback} />
+          ))}
+    </>
+  );
+}
+
+export default Root;

package/src/services/api.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:3000",
+});
+
+api.interceptors.request.use(
+  async (config) => {
+    // const token = localStorage.getItem("dashboardGaladrimAuthToken");
+    // if (token && config.headers) {
+    //   config.headers["x-dashboard-token"] = token;
+    // } else {
+    //   delete api.defaults.headers.common.Authorization;
+    // }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default api;

package/src/services/feedback.ts

@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import api from "./api";
+import { Feedback, FeedbackPayload } from "../types/types";
+
+export const fetchFeedbacks = async () => {
+  const response = await api.get<Feedback[]>("/feedback");
+  return response.data;
+};
+
+export const createFeedback = async (feedback: FeedbackPayload) => {
+  const response = await api.post("/feedback", feedback);
+  return response.data;
+};
+
+export const updateFeedback = async (feedback: FeedbackPayload) => {
+  const response = await api.put("/feedback", feedback);
+  return response.data;
+};
+
+export const deleteFeedback = async (feedback: Feedback) => {
+  const response = await api.delete(`/feedback/${feedback.id}`);
+  return response.data;
+};
+
+export const useFeedbacks = () => {
+  return useQuery({
+    queryKey: ["feedbacks"],
+    queryFn: fetchFeedbacks,
+  });
+};
+
+export const useCreateFeedback = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createFeedback,
+    onSuccess: () => {
+      console.log("Feedback created");
+
+      return queryClient.invalidateQueries({ queryKey: ["feedbacks"] });
+    },
+  });
+};
+
+export const useUpdateFeedback = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateFeedback,
+    onSuccess: () => {
+      return queryClient.invalidateQueries({ queryKey: ["feedbacks"] });
+    },
+  });
+};
+
+export const useDeleteFeedback = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteFeedback,
+    onSuccess: () => {
+      return queryClient.invalidateQueries({ queryKey: ["feedbacks"] });
+    },
+  });
+};

package/src/types/types.d.ts

@@ -0,0 +1,14 @@
+export interface FeedbackPayload {
+  x: number;
+  y: number;
+  elementId: string;
+  elementIndex: number;
+  comment: string;
+  path: string;
+}
+
+export interface Feedback extends FeedbackPayload {
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
+}

package/tailwind.config.js

@@ -0,0 +1,46 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        gray: {
+          50: "#F2F2F2",
+          75: "#F4F5F7",
+          100: "#E2E8F0",
+          200: "#EAECF0",
+          300: "#676D78",
+          400: "#343D4B",
+          500: "#010C1E",
+          600: "#475467",
+          700: "#CBD5E1",
+          900: "#101828",
+        },
+        blue: {
+          50: "#F5FAFF",
+          100: "#EBF5FF",
+          500: "#0085FF",
+        },
+        red: {
+          100: "#FFD3E0",
+          500: "#FF2462",
+        },
+        rose: {
+          100: "#FFD3E0",
+          200: "#FFA7C0",
+        },
+        orange: {
+          50: "#FEF6EE",
+          200: "#F9DBAF",
+          700: "#B93815",
+        },
+        green: {
+          50: "#ECFDF3",
+          200: "#ABEFC6",
+          700: "#067647",
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    // Generate type definitions
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/*.test.*"]
+}

package/assets/comment.svg

@@ -1,10 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 32 32"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-   
-    <g id="Page-1" stroke="white" stroke-width="1" fill="white" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-100.000000, -255.000000)" fill="#000000">
-            <path d="M116,281 C114.832,281 113.704,280.864 112.62,280.633 L107.912,283.463 L107.975,278.824 C104.366,276.654 102,273.066 102,269 C102,262.373 108.268,257 116,257 C123.732,257 130,262.373 130,269 C130,275.628 123.732,281 116,281 L116,281 Z M116,255 C107.164,255 100,261.269 100,269 C100,273.419 102.345,277.354 106,279.919 L106,287 L113.009,282.747 C113.979,282.907 114.977,283 116,283 C124.836,283 132,276.732 132,269 C132,261.269 124.836,255 116,255 L116,255 Z" id="comment-1" sketch:type="MSShapeGroup">
-
-</path>
-        </g>
-    </g>
-</svg>