galadrim-feedback 0.0.1

package/dist/src/index.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.comment-cursor {
+  cursor: url("/comment.svg"), auto !important;
+}

package/dist/types/App.d.ts

@@ -0,0 +1,3 @@
+import "./index.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/types/components/buttons/IconButton.d.ts

@@ -0,0 +1,6 @@
+export declare const IconButton: ({ text, iconPath, twButtonBackgroundColor, onClick, }: {
+    text: string;
+    iconPath: string;
+    twButtonBackgroundColor: string;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/buttons/PlusButton.d.ts

@@ -0,0 +1,5 @@
+export declare const PlusButton: ({ text, twButtonBackgroundColor, onClick, }: {
+    text: string;
+    twButtonBackgroundColor: string;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/feedback/FeedbackItem.d.ts

@@ -0,0 +1,4 @@
+import { Feedback } from "../../types/types";
+export declare const FeedbackItem: ({ feedback }: {
+    feedback: Feedback;
+}) => import("react").ReactPortal | null;

package/dist/types/components/misc/Avatar.d.ts

@@ -0,0 +1,3 @@
+export declare const Avatar: ({ avatar }: {
+    avatar: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/misc/Modal.d.ts

@@ -0,0 +1,6 @@
+export declare const Modal: ({ isVisible, closeModal, limitWidth, children, }: {
+    isVisible: boolean;
+    closeModal?: () => void;
+    limitWidth?: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/types/pages/FeedbacksCanvas.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch } from "react";
+import { Feedback } from "../types/types";
+export declare const FeedbacksCanvas: ({ isOpen, setIsOpen, feedbacks, }: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+    feedbacks: Feedback[];
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/types/pages/Overlay.d.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from "@tanstack/react-query";
+import { Dispatch } from "react";
+import { Feedback } from "../types/types";
+export declare const Overlay: ({ isOpen, setIsOpen, queryClient, feedbacks, }: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+    queryClient: QueryClient;
+    feedbacks: Feedback[];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/pages/Root.d.ts

@@ -0,0 +1,2 @@
+declare function Root(): import("react/jsx-runtime").JSX.Element;
+export default Root;

package/dist/types/services/api.d.ts

@@ -0,0 +1,2 @@
+declare const api: import("axios").AxiosInstance;
+export default api;

package/dist/types/services/feedback.d.ts

@@ -0,0 +1,9 @@
+import { Feedback, FeedbackPayload } from "../types/types";
+export declare const fetchFeedbacks: () => Promise<Feedback[]>;
+export declare const createFeedback: (feedback: FeedbackPayload) => Promise<any>;
+export declare const updateFeedback: (feedback: FeedbackPayload) => Promise<any>;
+export declare const deleteFeedback: (feedback: Feedback) => Promise<any>;
+export declare const useFeedbacks: () => import("@tanstack/react-query").UseQueryResult<Feedback[], Error>;
+export declare const useCreateFeedback: () => import("@tanstack/react-query").UseMutationResult<any, Error, FeedbackPayload, unknown>;
+export declare const useUpdateFeedback: () => import("@tanstack/react-query").UseMutationResult<any, Error, FeedbackPayload, unknown>;
+export declare const useDeleteFeedback: () => import("@tanstack/react-query").UseMutationResult<any, Error, Feedback, unknown>;

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/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "galadrim-feedback",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.59.19",
+    "axios": "^1.7.7",
+    "classnames": "^2.5.1",
+    "moment": "^2.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.11.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
+    "babel-plugin-react-generate-property": "^1.1.2",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.49",
+    "rollup": "^4.30.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.83.1",
+    "tailwindcss": "^3.4.13",
+    "tslib": "^2.8.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,39 @@
+// 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 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(),
+    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/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,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.comment-cursor {
+  cursor: url("/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,128 @@
+import { QueryClient } from "@tanstack/react-query";
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Overlay } from "./Overlay";
+import { useCreateFeedback, useFeedbacks } from "../services/feedback";
+import { FeedbackPayload } from "../types/types";
+import { FeedbackItem } from "../components/feedback/FeedbackItem";
+
+const queryClient = new QueryClient();
+
+function Root() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { data: feedbacks } = useFeedbacks();
+
+  console.log("feedbacks 1 : ", feedbacks);
+
+  const [creatingFeedback, setCreatingFeedback] = React.useState(false);
+
+  const { mutate: createFeedback } = useCreateFeedback();
+
+  useEffect(() => {
+    if (isOpen) {
+      console.log("Opening feedbacks canvas");
+
+      window.addEventListener("keydown", handleKeyPress);
+      return () => {
+        window.removeEventListener("keypress", handleKeyPress);
+      };
+    }
+  }, [isOpen]);
+
+  const handleKeyPress = (event: KeyboardEvent) => {
+    console.log(event.key);
+
+    if (event.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+
+  const handleClick = (e: any) => {
+    console.log("click");
+
+    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,
+      screenWidth: window.innerWidth,
+      screenHeight: window.innerHeight,
+      comment: "test",
+      path: window.location.pathname,
+      elementId,
+      elementIndex,
+    };
+    console.log(newFeedback);
+    createFeedback(newFeedback);
+    document.body.classList.remove("comment-cursor");
+    document.removeEventListener("click", handleClick, true);
+    setCreatingFeedback(false);
+    setIsOpen(true);
+  };
+
+  const handleCreateFeedback = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setCreatingFeedback(true);
+    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;