refactor: creates src/utils dir

package.json

@@ -81,6 +81,7 @@
     "@vercel/speed-insights": "^1.0.12",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "color": "^4.2.3",
     "drizzle-orm": "^0.33.0",
     "drizzle-zod": "^0.5.1",
     "framer-motion": "^11.11.1",
@@ -97,6 +98,7 @@
     "react-hook-form": "^7.53.0",
     "resend": "^4.0.0",
     "server-only": "^0.0.1",
+    "slugify": "^1.6.6",
     "sonner": "^1.5.0",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.3",
@@ -122,6 +124,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/bun": "^1.1.10",
+    "@types/color": "^3.0.6",
     "@types/eslint": "^9.6.1",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/node": "^22.7.4",

src/app/(dashboard)/app/_components/active-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 import { Button } from '@/primitives/button';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

src/app/(dashboard)/app/_components/module-card.tsx

@@ -1,4 +1,4 @@
-import { convertHexToRGBA } from '@/lib/colors';
+import Color from 'color';
 import { Icon, type IconNames } from '@/primitives/icon';
 import { Skeleton } from '@/primitives/skeleton';
 import Link from 'next/link';
@@ -28,11 +28,14 @@ export function ModuleCard({
         href={`/app/module/${id}`}
         className="flex flex-col gap-2 rounded-xl p-6"
         style={{
-          background: `linear-gradient(135deg, ${convertHexToRGBA(
-            moduleColor['500'],
-            0.08,
-          )} 0%, ${convertHexToRGBA(moduleColor['700'], 0.05)} 100%)`,
-          border: `1px solid ${convertHexToRGBA(moduleColor['500'], 0.1)}`,
+          background: `linear-gradient(135deg, ${Color(moduleColor['500'])
+            .alpha(0.08)
+            .toString()} 0%, ${Color(moduleColor['700'])
+            .alpha(0.05)
+            .toString()} 100%)`,
+          border: `1px solid ${Color(moduleColor['500'])
+            .alpha(0.1)
+            .toString()}`,
         }}
       >
         <Icon name={icon} strokeWidth={2} size={20} />

src/app/(dashboard)/app/_components/recent-modules.tsx

@@ -6,7 +6,7 @@ import { Button } from '@/primitives/button';
 import AnimateHeight from 'react-animate-height';
 import { useState } from 'react';
 import type { RouterOutputs } from '@/lib/trpc/types';
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 import type { IconNames } from '@/primitives/icon';
 
 interface RecentModulesProps {

src/app/(site)/_components/custom-mdx.tsx

@@ -1,4 +1,5 @@
-import { cn, slugify } from '@/lib/utils';
+import { cn } from '@/utils/cn';
+import slugify from 'slugify';
 import { buttonVariants } from '@/primitives/button';
 import type { MDXRemoteProps } from 'next-mdx-remote/rsc';
 import { MDXRemote } from 'next-mdx-remote/rsc';
@@ -7,7 +8,10 @@ import { createElement } from 'react';
 
 function createHeading(level: 1 | 2 | 3 | 4 | 5 | 6, className: string) {
   const Element = ({ children }: PropsWithChildren) => {
-    const slug = typeof children === 'string' ? slugify(children) : '';
+    const slug =
+      typeof children === 'string'
+        ? slugify(children, { lower: true, strict: true })
+        : '';
 
     return createElement(
       `h${String(level)}`,

src/app/(site)/_components/navbar.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import { ChevronRightIcon, MenuIcon } from 'lucide-react';
 
 import { constants, features } from '@/constants';
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 import { Button } from '@/primitives/button';
 import {
   NavigationMenu,

src/app/(site)/blog/[slug]/page.tsx

@@ -2,8 +2,9 @@ import { getBlogPosts } from '@/lib/mdx';
 import { notFound } from 'next/navigation';
 import { CustomMDX, MDXComponents } from '../../_components/custom-mdx';
 import type { Metadata } from 'next';
-import { constructMetadata, getBaseUrl } from '@/lib/utils';
+import { constructMetadata } from '@/utils/construct-metadata';
 import { constants } from '@/constants';
+import { getBaseUrl } from '@/utils/base-url';
 
 export const dynamic = 'force-static';
 

src/app/(site)/early-access/_forms/join.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { api } from '@/lib/trpc/react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 import { Button, buttonVariants } from '@/primitives/button';
 import { Checkbox } from '@/primitives/checkbox';
 import { Input } from '@/primitives/input';

src/app/(site)/early-access/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { JoinEarlyAccessForm } from './_forms/join';
-import { constructMetadata } from '@/lib/utils';
+import { constructMetadata } from '@/utils/construct-metadata';
 
 export const metadata: Metadata = constructMetadata({
   title: 'Early Access - Noodle',

src/app/layout.tsx

@@ -11,7 +11,7 @@ import type { PropsWithChildren } from 'react';
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 
-import { constructMetadata } from '@/lib/utils';
+import { constructMetadata } from '@/utils/construct-metadata';
 import { Toaster } from '@/primitives/sonner';
 
 export const metadata: Metadata = constructMetadata();

src/app/robots.ts

@@ -1,6 +1,6 @@
 import type { MetadataRoute } from 'next';
 
-import { getBaseUrl } from '@/lib/utils';
+import { getBaseUrl } from '@/utils/base-url';
 
 /**
  * This function returns an object that represents the robots.txt file which

src/emails/layouts/Base.tsx

@@ -10,7 +10,7 @@ import {
 import { emailTailwindConfig } from '../tailwind';
 import type { PropsWithChildren } from 'react';
 import { emailBaseUrl } from '../utils';
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 type Props = PropsWithChildren<{
   title: string;

src/lib/trpc/react.tsx

@@ -7,7 +7,7 @@ import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
 import { createTRPCReact } from '@trpc/react-query';
 import superjson from 'superjson';
 
-import { getBaseUrl } from '@/lib/utils';
+import { getBaseUrl } from '@/utils/base-url';
 import { type AppRouter } from '@/server';
 
 const createQueryClient = () => new QueryClient();

src/mdx-components.tsx

@@ -1,6 +1,6 @@
 import type { MDXComponents } from 'mdx/types';
 import { buttonVariants } from './primitives/button';
-import { cn } from './lib/utils';
+import { cn } from '@/utils/cn';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {

src/primitives/button.tsx

@@ -5,7 +5,7 @@ import type { VariantProps } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-subtle-border focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

src/primitives/checkbox.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

src/primitives/dropdown-menu.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

src/primitives/form.tsx

@@ -9,7 +9,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';
 
 import { Label } from '@/primitives/label';
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 import { CircleXIcon } from 'lucide-react';
 
 const Form = FormProvider;

src/primitives/input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 

src/primitives/label.tsx

@@ -7,7 +7,7 @@ import type { VariantProps } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',

src/primitives/navigation-menu.tsx

@@ -6,7 +6,7 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { cva } from 'class-variance-authority';
 import { ChevronDown } from 'lucide-react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

src/primitives/popover.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const Popover = PopoverPrimitive.Root;
 

src/primitives/scroll-area.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,

src/primitives/select.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const Select = SelectPrimitive.Root;
 

src/primitives/separator.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

src/primitives/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 function Skeleton({
   className,

src/primitives/tabs.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 const Tabs = TabsPrimitive.Root;
 

src/primitives/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '@/lib/utils';
+import { cn } from '@/utils/cn';
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 

src/utils/base-url.ts

@@ -0,0 +1,16 @@
+import { env } from '@/env';
+
+/**
+ * A utility function to get the base URL of the current instance.
+ * @returns The base URL.
+ */
+export function getBaseUrl() {
+  if (typeof window !== 'undefined') {
+    return window.location.origin;
+  }
+
+  if (env.VERCEL_URL) {
+    return `https://${env.VERCEL_URL}`;
+  }
+  return `http://localhost:${String(env.PORT)}`;
+}

src/utils/cn.ts

@@ -0,0 +1,17 @@
+import type { ClassValue } from 'clsx';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * A utility function to merge Tailwind CSS classes using a combination of clsx
+ * and tailwind-merge.
+ * @example
+ *   import { cn } from '@lib/utils';
+ *
+ *   const classes = cn('text-black', 'bg-white', 'p-4');
+ * @param inputs - The classes to merge.
+ * @returns A string of the classes merged together.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}