chore: updates deps (#285)

apps/web/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@clerk/nextjs": "^4.23.2",
     "@clerk/themes": "^1.7.5",
-    "@hookform/resolvers": "^3.1.1",
+    "@hookform/resolvers": "^3.2.0",
     "@noodle/api": "workspace:^",
     "@noodle/db": "workspace:^",
     "@noodle/editor": "workspace:^",
@@ -26,23 +26,23 @@
     "@noodle/utils": "workspace:^",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-select": "^1.2.2",
-    "@tanstack/react-query": "^4.32.5",
-    "@tanstack/react-query-devtools": "^4.32.5",
+    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.32.6",
     "@trpc/client": "^10.37.1",
     "@trpc/next": "^10.37.1",
     "@trpc/react-query": "^10.37.1",
     "@trpc/server": "^10.37.1",
     "@upstash/ratelimit": "^0.4.3",
-    "@vercel/analytics": "^1.0.1",
-    "lucide-react": "^0.263.1",
-    "next": "13.4.12",
+    "@vercel/analytics": "^1.0.2",
+    "lucide-react": "0.263.1",
+    "next": "13.4.13",
     "next-mdx-remote": "^4.4.1",
     "next-seo": "^6.1.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-animate-height": "^3.2.2",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.45.4",
     "react-wrap-balancer": "^1.0.0",
     "rehype-slug": "^5.1.0",
     "remark-gfm": "^3.0.1",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@noodle/tailwind": "workspace:^",
     "@noodle/tsconfig": "workspace:^",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",

apps/web/src/components/Accordion.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
 
 import { cn } from '@noodle/utils';
 
+import { Icon } from './Icon';
+
 const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
@@ -28,7 +29,10 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="text-gray-11 dark:text-graydark-11 h-4 w-4 shrink-0 transition-transform duration-200" />
+      <Icon
+        name="chevron-down"
+        className="text-gray-11 dark:text-graydark-11 h-4 w-4 shrink-0 transition-transform duration-200"
+      />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -51,4 +55,4 @@ const AccordionContent = React.forwardRef<
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

apps/web/src/components/Navbar.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import type { MouseEventHandler } from 'react';
-import { Github, Menu, Twitter } from 'lucide-react';
 import Link from 'next/link';
 import { useMediaQuery } from 'usehooks-ts';
 
 import { Brand } from '@noodle/ui';
 
 import { constants } from '@/utils/constants';
+import { Icon } from './Icon';
 
 export const Navbar = () => {
   const [height, setHeight] = useState<'auto' | number>(0);
@@ -116,7 +116,7 @@ export const Navbar = () => {
               rel="noopener noreferrer"
               className="text-gray-11 dark:text-graydark-11 dark:hover:text-graydark-12 hover:text-gray-12 flex items-center px-2 transition-colors"
             >
-              <Github size={20} />
+              <Icon name="github" size={20} />
             </a>
           </li>
           <li>
@@ -126,7 +126,7 @@ export const Navbar = () => {
               rel="noopener noreferrer"
               className="text-gray-11 dark:text-graydark-11 dark:hover:text-graydark-12 hover:text-gray-12 flex items-center px-2 transition-colors"
             >
-              <Twitter size={20} />
+              <Icon name="twitter" size={20} />
             </a>
           </li>
 
@@ -141,7 +141,7 @@ export const Navbar = () => {
               }}
             >
               <span className="sr-only">Open Menu</span>
-              <Menu size={20} />
+              <Icon name="menu" size={20} />
             </button>
           </li>
         </ul>

apps/web/src/components/Select.tsx

@@ -2,10 +2,11 @@
 
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown } from 'lucide-react';
 
 import { cn } from '@noodle/utils';
 
+import { Icon } from './Icon';
+
 const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
@@ -26,7 +27,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <Icon name="chevron-down" className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -76,7 +77,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Icon name="check" className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

apps/web/src/pages/index.tsx

@@ -1,6 +1,5 @@
 import { Balancer } from 'react-wrap-balancer';
 import type { FC, MouseEventHandler, ReactNode } from 'react';
-import { ArrowDown, ArrowRight, Star } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useMediaQuery } from 'usehooks-ts';
@@ -13,6 +12,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@/components/Accordion';
+import { Icon } from '@/components/Icon';
 import { Navbar } from '@/components/Navbar';
 import { constants } from '@/utils/constants';
 import { type NextPageWithLayout } from '@/utils/NextPageWithLayout';
@@ -158,7 +158,11 @@ const Home: NextPageWithLayout = () => {
           className="bg-gray-4 border-gray-8 dark:bg-graydark-4 dark:border-graydark-8 dark:hover:bg-graydark-5 hover:bg-gray-5 flex items-center gap-4 rounded-full border px-3 py-2 text-sm transition-colors"
         >
           Star us on Github{' '}
-          <Star size={13} className="fill-primary-500 stroke-primary-500" />
+          <Icon
+            name="star"
+            size={13}
+            className="fill-primary-500 stroke-primary-500"
+          />
         </a>
         <h1 className="text-5xl font-extrabold tracking-tighter md:text-6xl">
           <Balancer>{constants.tagline}</Balancer>
@@ -174,13 +178,13 @@ const Home: NextPageWithLayout = () => {
             onClick={smoothScrollToId('features')}
             className="bg-gray-4 border-gray-6 dark:bg-graydark-4 dark:border-graydark-6 dark:hover:bg-graydark-5 hover:bg-gray-5 flex w-full items-center justify-center gap-4 rounded-md border px-6 py-3 font-semibold transition-colors lg:w-auto"
           >
-            Features <ArrowDown size={20} />
+            Features <Icon name="arrow-down" size={20} />
           </Link>
           <Link
             href="/waitlist"
             className="bg-primary-500 text-gray-12 hover:bg-primary-700 flex w-full items-center justify-center gap-4 rounded-md px-6 py-3 font-semibold transition-colors lg:w-auto"
           >
-            Join Waitlist <ArrowRight size={20} />
+            Join Waitlist <Icon name="arrow-right" size={20} />
           </Link>
         </div>
       </header>
@@ -353,7 +357,7 @@ const Home: NextPageWithLayout = () => {
             href="/waitlist"
             className="bg-gray-1 text-primary-500 dark:bg-graydark-1 dark:hover:bg-graydark-2 hover:bg-gray-2 flex w-full items-center justify-center gap-4 rounded-md px-6 py-3 font-semibold transition-colors md:w-auto"
           >
-            Join Waitlist <ArrowRight size={20} />
+            Join Waitlist <Icon name="arrow-right" size={20} />
           </Link>
         </div>
       </div>

apps/web/src/pages/waitlist.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { Balancer } from 'react-wrap-balancer';
-import { ArrowRight, Check, Loader2, Mail, User } from 'lucide-react';
 import { z } from 'zod';
 
 import { cn } from '@noodle/utils';
 
+import { Icon } from '@/components/Icon';
 import { Input } from '@/components/Input';
 import { Navbar } from '@/components/Navbar';
 import {
@@ -79,7 +79,7 @@ const WaitList: NextPageWithLayout = () => {
             <Input
               type="text"
               placeholder="Your name..."
-              icon={<User />}
+              icon={<Icon name="user" />}
               value={name}
               onChange={(e) => {
                 setName(e.target.value);
@@ -88,7 +88,7 @@ const WaitList: NextPageWithLayout = () => {
             <Input
               type="email"
               placeholder="Email address..."
-              icon={<Mail />}
+              icon={<Icon name="mail" />}
               value={email}
               onChange={(e) => {
                 setEmail(e.target.value);
@@ -116,10 +116,10 @@ const WaitList: NextPageWithLayout = () => {
               className="bg-primary-500 text-gray-12 dark:disabled:bg-graydark-4 dark:disabled:text-graydark-8 dark:disabled:border-graydark-6 hover:bg-primary-700 disabled:bg-gray-4 disabled:text-gray-8 disabled:border-gray-6 flex w-full items-center justify-center gap-4 rounded-md px-6 py-3 font-semibold transition-colors disabled:border"
             >
               {isLoading ? (
-                <Loader2 />
+                <Icon name="loader-2" />
               ) : (
                 <span className="flex items-center gap-4">
-                  Secure your spot <ArrowRight size={20} />
+                  Secure your spot <Icon name="arrow-right" size={20} />
                 </span>
               )}
             </button>
@@ -132,7 +132,7 @@ const WaitList: NextPageWithLayout = () => {
               <div className="bg-teal-2 border-teal-2 dark:bg-tealdark-2/50 dark:border-tealdark-2 flex w-full items-center gap-6 rounded-lg border px-4 py-4">
                 <div className="flex h-full items-start">
                   <div className="bg-teal-1 border-teal-11 dark:bg-tealdark-1 dark:border-tealdark-11 rounded-full border p-[4px]">
-                    <Check className="text-teal-10 h-4 w-4" />
+                    <Icon name="check" className="text-teal-10 h-4 w-4" />
                   </div>
                 </div>
                 <div>
@@ -161,7 +161,7 @@ const WaitList: NextPageWithLayout = () => {
               <div className="bg-red-1 border-red-2 dark:bg-reddark-2/50 dark:border-reddark-2 flex w-full items-center gap-6 rounded-lg border px-4 py-4">
                 <div className="flex h-full items-start">
                   <div className="bg-red-1 border-red-11 dark:bg-reddark-1 dark:border-reddark-11 rounded-full border p-[4px]">
-                    <Check className="text-red-10 h-4 w-4" />
+                    <Icon name="check" className="text-red-10 h-4 w-4" />
                   </div>
                 </div>
                 <div>

package.json

@@ -23,23 +23,23 @@
     "node-gyp-build": "^4.6.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.7",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@noodle/tsconfig": "workspace:^",
-    "@types/eslint": "^8.44.1",
-    "@types/node": "^20.4.7",
+    "@types/eslint": "^8.44.2",
+    "@types/node": "^20.4.9",
     "del-cli": "^5.0.0",
     "eslint": "^8.46.0",
     "eslint-config-noodle": "workspace:^",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
     "nx": "16.6.0",
-    "nx-cloud": "16.2.0",
+    "nx-cloud": "16.3.0",
     "prettier": "^3.0.1",
     "prettier-plugin-jsdoc": "^1.0.1",
     "prettier-plugin-packagejson": "^2.4.5",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier-plugin-tailwindcss": "^0.5.1",
     "typescript": "^5.1.6"
   },
   "packageManager": "[email protected]",

packages/config/eslint/package.json

@@ -15,11 +15,11 @@
     "lint:fix": "pnpm run lint --fix"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.4.12",
+    "@next/eslint-plugin-next": "^13.4.13",
     "@noodle/tsconfig": "workspace:^",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "eslint-config-prettier": "^8.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.1",

packages/config/tailwind/package.json

@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@noodle/tsconfig": "workspace:^",
-    "@radix-ui/colors": "^1.0.1",
+    "@radix-ui/colors": "^2.0.1",
     "@savvywombat/tailwindcss-grid-areas": "^3.1.0",
     "autoprefixer": "^10.4.14",
     "tailwindcss-animate": "^1.0.6",

packages/db/package.json

@@ -18,10 +18,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@neondatabase/serverless": "^0.5.6",
+    "@neondatabase/serverless": "^0.5.7",
     "@noodle/env": "workspace:^",
-    "drizzle-orm": "^0.27.2",
-    "drizzle-zod": "^0.4.4",
+    "drizzle-orm": "^0.28.2",
+    "drizzle-zod": "^0.5.0",
     "pg": "^8.11.2",
     "postgres": "^3.3.5"
   },

packages/editor/package.json

@@ -31,7 +31,7 @@
   "devDependencies": {
     "@noodle/tailwind": "workspace:^",
     "@noodle/tsconfig": "workspace:^",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.14",
     "eslint-config-noodle": "workspace:^",

packages/ui/package.json

@@ -27,15 +27,15 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.6",
     "class-variance-authority": "^0.7.0",
-    "lucide-react": "^0.263.1",
+    "lucide-react": "0.263.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.45.2"
+    "react-hook-form": "^7.45.4"
   },
   "devDependencies": {
     "@noodle/tailwind": "workspace:^",
     "@noodle/tsconfig": "workspace:^",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",