@oxyhq/services 0.0.76 → 0.0.78

package/dist/components/auth/styles/sign-in-button.module.scss

@@ -1,32 +0,0 @@
-.container {
-  width: 100%;
-  padding: 0.7em;
-  border-radius: 100vmax;
-  background-color: var(--clr-light);
-  border: 1px solid var(--clr-auth-border);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: background 0.2s ease-in-out;
-
-  &:hover {
-    background-color: var(--clr-auth-button-hover);
-  }
-
-  &:active {
-    background-color: var(--clr-auth-button-active);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--clr-light);
-    background-color: var(--clr-auth-button-hover);
-  }
-
-  svg {
-    width: var(--fs-h2);
-    height: var(--fs-h2);
-    fill: var(--clr-dark);
-    margin-right: 0.5em;
-  }
-}

package/dist/components/elements/button/components/button.tsx

@@ -1,35 +0,0 @@
-import React, { forwardRef } from "react";
-
-import { cn } from "../../../../utils/cn";
-
-interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-}
-
-export const Button = forwardRef<HTMLButtonElement, IButton>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        {...props}
-        className={cn(
-          "grid cursor-pointer place-items-center rounded-full",
-          "transition-colors duration-200 ease-in-out",
-          "fill-secondary-100 p-[0.5em]",
-          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-100",
-          "fill-secondary-100 [&>svg]:w-h2",
-          "disabled-button",
-          className,
-          "hover:bg-neutral-500 active:bg-neutral-600",
-          "focus-visible:bg-neutral-500 focus-visible:outline-secondary-100"
-        )}
-        aria-pressed={props["aria-pressed"]}
-        aria-disabled={props.disabled}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";

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

@@ -1,27 +0,0 @@
-.container {
-    cursor: pointer;
-    display: grid;
-    place-items: center;
-    padding: 0.5em;
-    border-radius: 100vmax;
-    transition: background-color 0.15s ease-in-out;
-
-    svg {
-        width: var(--fs-h2);
-        height: var(--fs-h2);
-        fill: var(--clr-secondary);
-    }
-
-    &:hover {
-        background-color: var(--clr-nav-hover);
-    }
-
-    &:active {
-        background-color: var(--clr-nav-active);
-    }
-
-    &:focus-visible {
-        outline: 2px solid var(--clr-secondary);
-        background-color: var(--clr-nav-hover);
-    }
-}

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

@@ -1 +0,0 @@
-export { Button } from "./components/button";

package/dist/components/elements/ellipsis-wrapper/components/EllipsisWrapper.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import styles from "./styles/ellipses-wrapper.module.scss";
-
-export const EllipsisWrapper = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  return (
-    <div
-      aria-hidden={true}
-      role="presentation"
-      className="grid grid-flow-col [&>*]:truncate"
-    >
-      {children}
-    </div>
-  );
-};

package/dist/components/elements/ellipsis-wrapper/components/styles/ellipses-wrapper.module.scss

@@ -1,10 +0,0 @@
-.container {
-  display: grid;
-  grid-auto-flow: column;
-
-  * {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-}

package/dist/components/elements/ellipsis-wrapper/index.ts

@@ -1 +0,0 @@
-export * from "./components/EllipsisWrapper";

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

@@ -1,62 +0,0 @@
-import React, { useEffect } from "react";
-import { motion } from "framer-motion";
-import styles from "./styles/confirmation-modal.module.scss";
-
-export const ConfirmationModal = ({
-  heading,
-  paragraph,
-  confirmButtonText,
-  confirmButtonClick,
-  confirmButtonStyle = "delete",
-  cancelButtonText,
-  cancelButtonClick,
-  logo,
-}: {
-  heading: string;
-  paragraph: string;
-  confirmButtonText: string;
-  confirmButtonClick: () => void;
-  confirmButtonStyle: "delete" | "unfollow" | "logout";
-  cancelButtonText: string;
-  cancelButtonClick: () => void;
-  logo?: React.ReactNode;
-}) => {
-  useEffect(() => {
-    document.body.style.overflow = "hidden";
-    document.body.style.paddingRight = "11px";
-
-    return () => {
-      document.body.style.overflow = "unset";
-      document.body.style.paddingRight = "0";
-    };
-  }, []);
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 50 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: 50 }}
-      transition={{ duration: 0.2 }}
-      className={styles.container}
-    >
-      {logo && <div className={styles.logo}>{logo}</div>}
-      <h1>{heading}</h1>
-      <p>{paragraph}</p>
-
-      <div className={styles.buttons}>
-        <button
-          onClick={confirmButtonClick}
-          className={`${styles.confirm} ${
-            styles[confirmButtonStyle as "delete" | "unfollow" | "logout"]
-          }
-        }`}
-        >
-          {confirmButtonText}
-        </button>
-        <button onClick={cancelButtonClick} className={styles.cancel}>
-          {cancelButtonText}
-        </button>
-      </div>
-    </motion.div>
-  );
-};

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

@@ -1,182 +0,0 @@
-/* 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

@@ -1,125 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-.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

@@ -1,49 +0,0 @@
-"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

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

package/dist/config/index.ts

@@ -1,17 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.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

@@ -1,19 +0,0 @@
-.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

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

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

@@ -1,21 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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