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/(dashboard)/home/[account]/_components/app-sidebar.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 
 import type { Session } from '@supabase/supabase-js';
 
-import { ArrowLeftCircleIcon, ArrowRightCircleIcon } from 'lucide-react';
+import { ArrowLeftCircle, ArrowRightCircle } from 'lucide-react';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
 import { Sidebar, SidebarContent } from '@kit/ui/sidebar';
@@ -138,13 +138,13 @@ function CollapsibleButton({
           aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
           onClick={() => onClick(!collapsed)}
         >
-          <ArrowRightCircleIcon
+          <ArrowRightCircle
             className={cn(iconClassName, {
               hidden: !collapsed,
             })}
           />
 
-          <ArrowLeftCircleIcon
+          <ArrowLeftCircle
             className={cn(iconClassName, {
               hidden: collapsed,
             })}

apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from 'react';
 
-import { ArrowDownIcon, ArrowUpIcon, MenuIcon } from 'lucide-react';
+import { ArrowDown, ArrowUp, Menu } from 'lucide-react';
 import { Line, LineChart, ResponsiveContainer, XAxis } from 'recharts';
 
 import { Badge } from '@kit/ui/badge';
@@ -328,11 +328,11 @@ function Trend(
   const Icon = useMemo(() => {
     switch (props.trend) {
       case 'up':
-        return <ArrowUpIcon className={'h-4 text-green-500'} />;
+        return <ArrowUp className={'h-4 text-green-500'} />;
       case 'down':
-        return <ArrowDownIcon className={'h-4 text-destructive'} />;
+        return <ArrowDown className={'h-4 text-destructive'} />;
       case 'stale':
-        return <MenuIcon className={'h-4 text-orange-500'} />;
+        return <Menu className={'h-4 text-orange-500'} />;
     }
   }, [props.trend]);
 

apps/web/app/(dashboard)/home/[account]/_components/mobile-app-navigation.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
-import { HomeIcon, LogOutIcon, MenuIcon } from 'lucide-react';
+import { Home, LogOut, Menu } from 'lucide-react';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
@@ -67,7 +67,7 @@ export const MobileAppNavigation = (
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <MenuIcon className={'h-9'} />
+        <Menu className={'h-9'} />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
@@ -115,7 +115,7 @@ function SignOutDropdownItem(
       className={'flex h-12 w-full items-center space-x-4'}
       onClick={props.onSignOut}
     >
-      <LogOutIcon className={'h-6'} />
+      <LogOut className={'h-6'} />
 
       <span>
         <Trans i18nKey={'common:signOut'} defaults={'Sign out'} />
@@ -135,7 +135,7 @@ function OrganizationsModal() {
           onSelect={(e) => e.preventDefault()}
         >
           <button className={'flex items-center space-x-4'}>
-            <HomeIcon className={'h-6'} />
+            <Home className={'h-6'} />
 
             <span>
               <Trans i18nKey={'common:yourOrganizations'} />