@oxyhq/services 0.0.74 → 0.0.76

package/dist/components/elements/modal/components/modal.tsx

@@ -0,0 +1,182 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+"use client";
+import { motion } from "framer-motion";
+import React, { useCallback, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import styles from "./styles/modal.module.scss";
+
+export const Modal = ({
+  children,
+  onClose,
+  closeOnBackdropClick = true,
+  background,
+  minViewportWidth = null,
+  maxViewportWidth = null,
+  disableScroll = false,
+  focusOnElement = null,
+  focusAfterClose = null,
+}: {
+  children: React.ReactNode;
+  onClose: () => void;
+  closeOnBackdropClick?: boolean;
+  background?: string;
+  minViewportWidth?: number | null;
+  maxViewportWidth?: number | null;
+  disableScroll?: boolean;
+  focusOnElement?: string | null;
+  focusAfterClose?: string | null;
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previouslyFocusedElementRef = useRef<HTMLElement | null>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+
+      if (e.key === "Tab") {
+        const modal = modalRef.current;
+        if (!modal) return;
+
+        const focusableElements = Array.from(
+          modal.querySelectorAll(
+            'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
+          )
+        );
+        const firstFocusableElement = focusableElements[0] as HTMLElement;
+        const lastFocusableElement = focusableElements[
+          focusableElements.length - 1
+        ] as HTMLElement;
+
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableElement) {
+            lastFocusableElement.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === lastFocusableElement) {
+            firstFocusableElement.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    },
+    [onClose]
+  );
+
+  const handleScroll = useCallback(
+    (e: Event) => {
+      if (disableScroll) {
+        e.preventDefault();
+      }
+    },
+    [disableScroll]
+  );
+
+  const handleDisplay = useCallback(() => {
+    const modal = modalRef.current;
+    if (!modal) return;
+
+    const viewportWidth = window.innerWidth;
+
+    if (
+      (minViewportWidth && viewportWidth < minViewportWidth) ||
+      (maxViewportWidth && viewportWidth > maxViewportWidth)
+    ) {
+      onClose();
+    }
+  }, [onClose, minViewportWidth, maxViewportWidth]);
+
+  useLayoutEffect(() => {
+    const modal = modalRef.current;
+    if (!modal) return;
+
+    const focusableElements = Array.from(
+      modal.querySelectorAll(
+        'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
+      )
+    );
+    const firstFocusableElement = focusableElements?.[0] as HTMLElement;
+
+    previouslyFocusedElementRef.current = document.activeElement as HTMLElement;
+
+    modal?.addEventListener("keydown", handleKeyDown);
+    if (focusOnElement) {
+      const elementToFocus = modal.querySelector(focusOnElement) as HTMLElement;
+      elementToFocus?.focus();
+    } else {
+      firstFocusableElement?.focus();
+    }
+
+    if (disableScroll) {
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = "11px";
+      window.addEventListener("scroll", handleScroll);
+    }
+
+    if (minViewportWidth || maxViewportWidth) {
+      handleDisplay();
+    }
+
+    return () => {
+      modal?.removeEventListener("keydown", handleKeyDown);
+      if (focusAfterClose) {
+        const elementToFocus = document.querySelector(
+          focusAfterClose
+        ) as HTMLElement;
+        elementToFocus?.focus();
+      } else {
+        previouslyFocusedElementRef.current?.focus();
+      }
+
+      if (disableScroll) {
+        document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
+        window.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [
+    onClose,
+    disableScroll,
+    handleKeyDown,
+    handleScroll,
+    handleDisplay,
+    minViewportWidth,
+    maxViewportWidth,
+    focusOnElement,
+    focusAfterClose,
+  ]);
+
+  const backdropStyle: React.CSSProperties = {
+    backgroundColor:
+      background === "none" ? "transparent" : "var(--clr-modal-background)",
+  };
+
+  return createPortal(
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (e.currentTarget === e.target && closeOnBackdropClick) onClose();
+      }}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+      }}
+      ref={modalRef}
+      className={`${styles.container}`}
+      style={backdropStyle}
+      id="dialog"
+      role="dialog"
+      aria-modal="true"
+    >
+      {children}
+    </motion.div>,
+    document.body
+  );
+};

package/dist/components/elements/modal/components/styles/confirmation-modal.module.scss

@@ -0,0 +1,125 @@
+.container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: fit-content;
+  max-width: 320px;
+  height: fit-content;
+  margin: auto;
+  background-color: var(--clr-background);
+  padding: 2em;
+  border-radius: 1rem;
+
+  .logo {
+    display: grid;
+    place-items: center;
+    margin-bottom: 1em;
+
+    svg {
+      width: var(--fs-kilo);
+      height: var(--fs-kilo);
+      fill: var(--clr-primary);
+    }
+  }
+
+  h1 {
+    font-size: var(--fs-h2);
+    font-weight: var(--fw-700);
+    margin-bottom: 0.5em;
+  }
+
+  p {
+    font-size: var(--fs-milli);
+    color: var(--clr-tertiary);
+    margin-bottom: 2rem;
+    line-height: 1.4;
+  }
+
+  .buttons {
+    display: grid;
+    gap: 0.8rem;
+
+    button {
+      display: grid;
+      place-items: center;
+      padding: 0.9em;
+      border-radius: 100vmax;
+      font-size: var(--fs-milli);
+      font-weight: var(--fw-700);
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .delete {
+      background-color: var(--clr-red);
+
+      &:hover {
+        background-color: var(--clr-red-hover);
+      }
+
+      &:active {
+        background-color: var(--clr-red-active);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--clr-secondary);
+        background-color: var(--clr-red-hover);
+      }
+    }
+
+    .unfollow {
+      background-color: var(--clr-secondary);
+      color: var(--clr-background);
+
+      &:hover {
+        background-color: var(--clr-secondary-hover);
+      }
+
+      &:active {
+        background-color: var(--clr-secondary-active);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--clr-secondary);
+      }
+    }
+
+    .signout {
+      background-color: var(--clr-secondary);
+      color: var(--clr-background);
+
+      &:hover {
+        background-color: var(--clr-signout-logout-hover);
+      }
+
+      &:active {
+        background-color: var(--clr-signout-logout-active);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--clr-secondary);
+        background-color: var(--clr-signout-logout-hover);
+      }
+    }
+
+    .cancel {
+      color: var(--clr-secondary);
+      border: 1px solid var(--clr-tertiary);
+
+      &:hover {
+        background-color: var(--clr-trends-hover);
+      }
+
+      &:active {
+        background-color: var(--clr-trends-active);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--clr-secondary);
+        background-color: var(--clr-trends-hover);
+      }
+    }
+  }
+}

package/dist/components/elements/modal/components/styles/modal.module.scss

@@ -0,0 +1,8 @@
+.container {
+  z-index: var(--z-index-modal-backdrop);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

package/dist/components/elements/modal/hooks/use-track-position.ts

@@ -0,0 +1,49 @@
+"use client";
+import { useState, useLayoutEffect } from "react";
+
+export const useTrackPosition = ({
+  buttonRef,
+  trackScroll = false,
+}: {
+  buttonRef: React.RefObject<HTMLButtonElement>;
+  trackScroll?: boolean;
+}) => {
+  const [buttonBoundaries, setButtonBoundaries] = useState<DOMRect | null>(
+    buttonRef?.current?.getBoundingClientRect() ?? null,
+  );
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      if (buttonRef?.current) {
+        setButtonBoundaries(buttonRef.current.getBoundingClientRect());
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    if (trackScroll) {
+      window.addEventListener("scroll", handleResize);
+    }
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (trackScroll) {
+        window.removeEventListener("scroll", handleResize);
+      }
+    };
+  }, [
+    buttonRef,
+    buttonRef.current?.getBoundingClientRect,
+    trackScroll,
+    setButtonBoundaries,
+  ]);
+
+  useLayoutEffect(() => {
+    setButtonBoundaries(buttonRef.current?.getBoundingClientRect() ?? null);
+  }, [
+    buttonRef,
+    buttonRef.current?.getBoundingClientRect,
+    setButtonBoundaries,
+  ]);
+
+  return buttonBoundaries;
+};

package/dist/components/elements/modal/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/modal";
+export * from "./components/confirmation-modal";
+export * from "./hooks/use-track-position";

package/dist/config/index.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+const envSchema = z.object({
+  NODE_ENV: z.enum(["development", "production"]),
+  OXY_AUTH_URL: z.string().url(),
+});
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv extends z.infer<typeof envSchema> {}
+  }
+}
+
+export const NODE_ENV = process.env.NODE_ENV;
+export const OXY_AUTH_URL =
+  NODE_ENV === "production" ? "https://auth.oxy.so" : "http://localhost:3001";

package/dist/features/profile/components/avatar.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import React from "react";
+
+import { cn } from "../../../utils/cn";
+
+interface IAvatar extends React.ImgHTMLAttributes<HTMLImageElement> {
+  userImage: string | null | undefined;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export const Avatar = ({ userImage, className, ...props }: IAvatar) => {
+  return (
+    <div
+      className={cn(
+        "relative aspect-square w-[calc(var(--tw-fs-kilo)+9px)] overflow-hidden rounded-full",
+        className
+      )}
+    >
+      <Image
+        {...props}
+        src={userImage || `/user_placeholder.png`}
+        alt="profile picture"
+        fill={true}
+        className="block size-full object-cover"
+      />
+    </div>
+  );
+};

package/dist/features/profile/components/styles/avatar.module.scss

@@ -0,0 +1,14 @@
+.container {
+  position: relative;
+  width: var(--avatar-width);
+  border-radius: 50%;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/dist/features/profile/components/styles/user-name.module.scss

@@ -0,0 +1,19 @@
+.container {
+  font-size: var(--fs-milli);
+  font-weight: var(--fw-500);
+  color: var(--clr-secondary);
+  display: grid;
+  grid-auto-flow: column;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.hover {
+  &:hover {
+    text-decoration: underline;
+  }
+}

package/dist/features/profile/components/styles/user-username.module.scss

@@ -0,0 +1,4 @@
+.container {
+  font-size: var(--fs-milli);
+  color: var(--clr-tertiary);
+}

package/dist/features/profile/components/user-name.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { VerifiedIcon } from "../../../assets/verified-icon";
+
+import styles from "./styles/user-name.module.scss";
+
+export const UserName = ({
+  name,
+  isVerified = false,
+  hover = false,
+}: {
+  name: string | undefined;
+  isVerified?: boolean | undefined;
+  hover?: boolean | undefined;
+}) => {
+  return (
+    <div className={`${styles.container} ${hover ? styles.hover : ""}`}>
+      {name && <span>{name}</span>}
+      {isVerified && <VerifiedIcon />}
+    </div>
+  );
+};

package/dist/features/profile/components/user-username.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from "./styles/user-username.module.scss";
+
+export const UserUsername = ({
+  username,
+}: {
+  username: string | undefined;
+}) => {
+  return <span className={styles.container}>@{username}</span>;
+};

package/dist/features/profile/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/avatar";
+export * from "./components/user-name";
+export * from "./components/user-username";

package/dist/hooks/get-user.ts

@@ -0,0 +1,30 @@
+import axios from "axios";
+import { OXY_AUTH_URL } from "../config";
+
+export const getUser = async (id: string | undefined) => {
+  if (!id) {
+    throw new Error("User ID is required");
+  }
+  try {
+    const response = await axios.get(OXY_AUTH_URL + `/api/users/${id}`);
+    return response.data;
+  } catch (error: any) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        // Server responded with a status code outside of 2xx
+        throw new Error(
+          `Server responded with status ${error.response.status}: ${error.response.data}`
+        );
+      } else if (error.request) {
+        // Request was made but no response received
+        throw new Error("No response received from server");
+      } else {
+        // Error setting up the request
+        throw new Error(`Axios error: ${error.message}`);
+      }
+    } else {
+      // Non-Axios error
+      throw error;
+    }
+  }
+};

package/dist/hooks/getUserById.ts

@@ -0,0 +1,43 @@
+import axios from "axios";
+import { OXY_AUTH_URL } from "../config";
+
+interface User {
+  id: string;
+  username: string;
+  name: string;
+  email: string;
+  role: string;
+  avatar: string;
+}
+
+const getUserById = async (id?: string | string[], fields?: (keyof User)[]) => {
+  try {
+    const response = await axios.get(OXY_AUTH_URL + `/api/users/${id}`);
+    if (response.status !== 200) {
+      throw new Error(`Unexpected response status: ${response.status}`);
+    }
+    const user = fields
+      ? fields.reduce(
+          (obj, key) => ({ ...obj, [key]: response.data[key] }),
+          {} as User
+        )
+      : (response.data as User);
+    return user;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        throw new Error(
+          `Network error: ${error.message}, Status code: ${error.response.status}`
+        );
+      } else if (error.request) {
+        throw new Error("Network error: No response received from server.");
+      } else {
+        throw new Error(`Network error: ${error.message}`);
+      }
+    } else {
+      throw new Error("An unknown error occurred while loading the user data.");
+    }
+  }
+};
+
+export default getUserById;

package/dist/hooks/use-user.ts

@@ -0,0 +1,25 @@
+import { getUser } from "./get-user";
+
+export interface IUser {
+  id: string;
+  username: string;
+  name: string;
+  email: string;
+  role: string;
+  avatar: string;
+  color: string;
+}
+
+export const useUser = async ({
+  id,
+  initialData: IUser,
+}: {
+  id: string | undefined;
+  initialData?: IUser;
+}) => {
+  if (!id) {
+    // Return a default value or null when id is not provided
+    return null;
+  }
+  return getUser(id);
+};