Web cleanup (#2703)

web/.eslintrc.json

@@ -1,12 +1,7 @@
 {
   "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
 
-  "ignorePatterns": [
-    "lib/api/graphql/schema/types/graphql.tsx",
-    "lib/api/graphql/client/fragment-masking.ts",
-    "lib/api/graphql/client/index.ts",
-    "lib/clients/jawnTypes/*.ts"
-  ],
+  "ignorePatterns": ["lib/clients/jawnTypes/*.ts"],
   "plugins": ["unused-imports"],
   "rules": {
     "unused-imports/no-unused-imports": "error"

web/components/layout/auth/DesktopSidebar.tsx

@@ -16,15 +16,22 @@ import {
 } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useMemo, useEffect, useRef, useState } from "react";
+import {
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+  ComponentType,
+  SVGProps,
+} from "react";
 import { useOrg } from "../organizationContext";
 import OrgDropdown from "../orgDropdown";
 import NavItem from "./NavItem";
 
 export interface NavigationItem {
   name: string;
   href: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>> | null;
+  icon: ComponentType<SVGProps<SVGSVGElement>> | null;
   current: boolean;
   featured?: boolean;
   subItems?: NavigationItem[];

web/components/layout/basePageV2.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import { ReactNode, SVGProps } from "react";
 import { BsDiscord } from "react-icons/bs";
 import Footer from "./footer";
 import NavBarV2 from "./navbar/navBarV2";
@@ -40,7 +40,7 @@ const meta = {
 export type SocialMeta = (typeof meta.social)[number];
 
 interface BasePageV2Props {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const BasePageV2 = (props: BasePageV2Props) => {

web/components/layout/common/button.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { forwardRef } from "react";
 
 interface GenericButtonProps {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -9,27 +9,26 @@ interface GenericButtonProps {
   className?: string;
 }
 
-export const GenericButton = React.forwardRef<
-  HTMLButtonElement,
-  GenericButtonProps
->(({ onClick, icon, text, count, disabled, className }, ref) => (
-  <button
-    ref={ref}
-    className={`bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg px-2.5 py-1.5 hover:bg-sky-50 dark:hover:bg-sky-900 flex flex-row items-center gap-2 ${className}`}
-    onClick={onClick}
-    disabled={disabled}
-  >
-    {icon && icon}
-    <div className="text-sm font-medium items-center text-gray-900 dark:text-gray-100 hidden sm:flex gap-1">
-      {text}
-    </div>
-    {count !== undefined && (
-      <code className="text-xs text-gray-500 dark:text-gray-400">
-        ({count})
-      </code>
-    )}
-  </button>
-));
+export const GenericButton = forwardRef<HTMLButtonElement, GenericButtonProps>(
+  ({ onClick, icon, text, count, disabled, className }, ref) => (
+    <button
+      ref={ref}
+      className={`bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg px-2.5 py-1.5 hover:bg-sky-50 dark:hover:bg-sky-900 flex flex-row items-center gap-2 ${className}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {icon && icon}
+      <div className="text-sm font-medium items-center text-gray-900 dark:text-gray-100 hidden sm:flex gap-1">
+        {text}
+      </div>
+      {count !== undefined && (
+        <code className="text-xs text-gray-500 dark:text-gray-400">
+          ({count})
+        </code>
+      )}
+    </button>
+  )
+);
 
 GenericButton.displayName = "GenericButton";
 

web/components/layout/common/card.tsx

@@ -1,9 +1,9 @@
 import clsx from "clsx";
-import React from "react";
+import { forwardRef, Ref } from "react";
 
-export const Card = React.forwardRef(function Grid(
+export const Card = forwardRef(function Grid(
   props: JSX.IntrinsicElements["div"],
-  ref: React.Ref<HTMLDivElement>
+  ref: Ref<HTMLDivElement>
 ) {
   const { children, className, ...rest } = props;
   return (

web/components/layout/common/checkBox.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState, FC, ChangeEvent } from "react";
 
 interface CheckBoxProps {
   id: string;
   onChange: (id: string, checked: boolean) => void;
   value: boolean;
 }
 
-const CheckBox: React.FC<CheckBoxProps> = ({ id, onChange, value }) => {
+const CheckBox: FC<CheckBoxProps> = ({ id, onChange, value }) => {
   const [checked, setChecked] = useState(value);
 
   useEffect(() => {
     setChecked(value);
   }, [value]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setChecked(e.target.checked);
     onChange(id, e.target.checked);
   };

web/components/layout/navbar/developerButton.tsx

@@ -5,7 +5,6 @@ import {
   BookOpenIcon,
   ChatBubbleBottomCenterIcon,
   ChevronRightIcon,
-  CodeBracketIcon,
   GlobeAltIcon,
   MapIcon,
   UserGroupIcon,
@@ -51,11 +50,6 @@ const solutions = [
     href: "https://docs.helicone.ai/features/webhooks",
     icon: GlobeAltIcon,
   },
-  {
-    name: "GraphQL",
-    href: "https://docs.helicone.ai/graphql/getting-started",
-    icon: CodeBracketIcon,
-  },
 ];
 
 export default function DeveloperButton() {

web/components/layout/orgDropdown.tsx

@@ -20,11 +20,12 @@ import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
 import { clsx } from "../shared/clsx";
 import AddMemberModal from "../templates/organization/addMemberModal";
-import CreateOrgForm, {
+import CreateOrgForm from "../templates/organization/createOrgForm";
+import { useOrg } from "./organizationContext";
+import {
   ORGANIZATION_COLORS,
   ORGANIZATION_ICONS,
-} from "../templates/organization/createOrgForm";
-import { useOrg } from "./organizationContext";
+} from "../templates/organization/orgConstants";
 
 interface OrgDropdownProps {}
 

web/components/layout/organizationContext.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext, createContext, ReactNode } from "react";
 import { Database } from "../../supabase/database.types";
 import { useOrgsContextManager } from "../../services/hooks/organizations";
 
@@ -15,13 +15,9 @@ export interface OrgContextValue {
   isResellerOfCurrentCustomerOrg: boolean;
 }
 
-const OrgContext = React.createContext<OrgContextValue | null>(null);
+const OrgContext = createContext<OrgContextValue | null>(null);
 
-export const OrgContextProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+export const OrgContextProvider = ({ children }: { children: ReactNode }) => {
   const orgContextValue = useOrgsContextManager();
   return (
     <OrgContext.Provider value={orgContextValue}>

web/components/shared/upgradeProModal.tsx

@@ -1,16 +1,18 @@
-import { SparklesIcon } from "@heroicons/react/24/outline";
+// import { SparklesIcon } from "@heroicons/react/24/outline";
 import { useUser } from "@supabase/auth-helpers-react";
 import { useState } from "react";
 import { useOrg } from "../layout/organizationContext";
 import ThemedModal from "./themed/themedModal";
 import getStripe from "../../utlis/getStripe";
-import {
-  ORGANIZATION_COLORS,
-  ORGANIZATION_ICONS,
-} from "../templates/organization/createOrgForm";
+
 import { clsx } from "./clsx";
 import { useGetRequestCountClickhouse } from "../../services/hooks/requests";
 import { endOfMonth, formatISO, startOfMonth } from "date-fns";
+import {
+  ORGANIZATION_COLORS,
+  ORGANIZATION_ICONS,
+} from "../templates/organization/orgConstants";
+import { SparklesIcon } from "lucide-react";
 
 interface UpgradeProModalProps {
   open: boolean;

web/components/templates/enterprise/portal/customerRow.tsx

@@ -7,16 +7,16 @@ import { formatISO } from "date-fns";
 import { useRequestsOverTime } from "../../organization/plan/renderOrgPlan";
 import { useOrg } from "../../../layout/organizationContext";
 import { useRouter } from "next/router";
-import {
-  ORGANIZATION_COLORS,
-  ORGANIZATION_ICONS,
-  OrgLimits,
-} from "../../organization/createOrgForm";
+import { OrgLimits } from "../../organization/createOrgForm";
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 import { Menu, Transition } from "@headlessui/react";
 import { DeleteOrgModal } from "../../organization/deleteOrgModal";
 import EditCustomerOrgModal from "./editCustomerOrgModal";
 import { Database } from "../../../../supabase/database.types";
+import {
+  ORGANIZATION_COLORS,
+  ORGANIZATION_ICONS,
+} from "../../organization/orgConstants";
 
 interface CustomerRowProps {
   org: Database["public"]["Tables"]["organization"]["Row"];

web/components/templates/enterprise/portal/id/portalIdPage.tsx

@@ -2,11 +2,7 @@ import {
   useGetOrg,
   useGetOrgMembers,
 } from "../../../../../services/hooks/organizations";
-import {
-  ORGANIZATION_COLORS,
-  ORGANIZATION_ICONS,
-  OrgLimits,
-} from "../../../organization/createOrgForm";
+import { OrgLimits } from "../../../organization/createOrgForm";
 import { getUSDateFromString } from "../../../../shared/utils/utils";
 import { clsx } from "../../../../shared/clsx";
 import OrgMembersPage from "../../../organization/members/orgMembersPage";
@@ -29,6 +25,10 @@ import HcBreadcrumb from "../../../../ui/hcBreadcrumb";
 import { formatISO } from "date-fns";
 import { useRequestsOverTime } from "../../../organization/plan/renderOrgPlan";
 import StyledAreaChart from "../../../dashboard/styledAreaChart";
+import {
+  ORGANIZATION_COLORS,
+  ORGANIZATION_ICONS,
+} from "@/components/templates/organization/orgConstants";
 
 interface PortalIdPageProps {
   orgId: string | null;