Refactor code and improve usage of package dependencies

This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 
 import type { Session } from '@supabase/supabase-js';
 
-import { ChevronRightIcon } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 
 import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
@@ -60,7 +60,7 @@ function AuthButtons() {
       <Link href={pathsConfig.auth.signUp}>
         <Button className={'rounded-full'}>
           <Trans i18nKey={'auth:signUp'} />
-          <ChevronRightIcon className={'h-4'} />
+          <ChevronRight className={'h-4'} />
         </Button>
       </Link>
     </div>

apps/web/app/(marketing)/_components/site-header.tsx

@@ -4,7 +4,7 @@ import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-
 import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
-export async function SiteHeader(props: { session: Session | null }) {
+export async function SiteHeader(props: { session?: Session | null }) {
   return (
     <div className={'container mx-auto'}>
       <div className="flex h-16 items-center justify-between">
@@ -19,7 +19,7 @@ export async function SiteHeader(props: { session: Session | null }) {
         <div className={'flex flex-1 items-center justify-end space-x-4'}>
           <div className={'flex items-center'}></div>
 
-          <SiteHeaderAccountSection session={props.session} />
+          <SiteHeaderAccountSection session={props.session ?? null} />
 
           <div className={'flex lg:hidden'}>
             <SiteNavigation />

apps/web/app/(marketing)/_components/site-navigation.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { MenuIcon } from 'lucide-react';
+import { Menu } from 'lucide-react';
 
 import {
   DropdownMenu,
@@ -81,7 +81,7 @@ function MobileDropdown() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger aria-label={'Open Menu'}>
-        <MenuIcon className={'h-9'} />
+        <Menu className={'h-9'} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent>

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -3,7 +3,7 @@ import { cache } from 'react';
 import { notFound } from 'next/navigation';
 
 import { allDocumentationPages } from 'contentlayer/generated';
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 import { If } from '@kit/ui/if';
 import { Mdx } from '@kit/ui/mdx';
@@ -77,7 +77,7 @@ function DocumentationPage({ params }: PageParams) {
               {(page) => (
                 <DocumentationPageLink
                   page={page}
-                  before={<ChevronLeftIcon className={'w-4'} />}
+                  before={<ChevronLeft className={'w-4'} />}
                 />
               )}
             </If>
@@ -88,7 +88,7 @@ function DocumentationPage({ params }: PageParams) {
               {(page) => (
                 <DocumentationPageLink
                   page={page}
-                  after={<ChevronRightIcon className={'w-4'} />}
+                  after={<ChevronRight className={'w-4'} />}
                 />
               )}
             </If>

apps/web/app/(marketing)/docs/_components/docs-card.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { ChevronRightIcon } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 
 export const DocsCard: React.FC<
   React.PropsWithChildren<{
@@ -36,7 +36,7 @@ export const DocsCard: React.FC<
               {link.label}
             </Link>
 
-            <ChevronRightIcon className={'h-4'} />
+            <ChevronRight className={'h-4'} />
           </span>
         </div>
       )}

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { ChevronDownIcon, MenuIcon } from 'lucide-react';
+import { ChevronDown, Menu } from 'lucide-react';
 
 import { isBrowser } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
@@ -53,7 +53,7 @@ const DocsNavLink: React.FC<{
           <span
             className={`block w-2.5 ${collapsed ? '-rotate-90 transform' : ''}`}
           >
-            <ChevronDownIcon className="h-4 w-4" />
+            <ChevronDown className="h-4 w-4" />
           </span>
         </button>
       )}
@@ -218,7 +218,7 @@ function FloatingDocumentationNavigation({
         className={'fixed bottom-5 right-5 z-10 h-16 w-16 rounded-full'}
         onClick={onClick}
       >
-        <MenuIcon className={'h-8'} />
+        <Menu className={'h-8'} />
       </Button>
     </>
   );

apps/web/app/(marketing)/faq/page.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
@@ -108,7 +108,7 @@ function FaqItem({
         </h2>
 
         <div>
-          <ChevronDownIcon
+          <ChevronDown
             className={'h-5 transition duration-300 group-open:-rotate-180'}
           />
         </div>

apps/web/app/(marketing)/page.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { ChevronRightIcon } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
@@ -135,7 +135,7 @@ function Home() {
                 <Button variant={'outline'}>
                   <span className={'flex items-center space-x-2'}>
                     <span>Get Started</span>
-                    <ChevronRightIcon className={'h-3'} />
+                    <ChevronRight className={'h-3'} />
                   </span>
                 </Button>
               </div>
@@ -273,7 +273,7 @@ function MainCallToActionButton() {
         <span className={'flex items-center space-x-2'}>
           <span>Get Started</span>
 
-          <ChevronRightIcon
+          <ChevronRight
             className={
               'h-4 animate-in fade-in slide-in-from-left-8' +
               ' delay-1000 duration-1000 zoom-in fill-mode-both'