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.

packages/features/admin/package.json

@@ -9,10 +9,30 @@
     "typecheck": "tsc --noEmit"
   },
   "prettier": "@kit/prettier-config",
+  "peerDependencies": {
+    "@kit/ui": "0.1.0"
+  },
+  "devDependencies": {
+    "@kit/eslint-config": "0.2.0",
+    "@kit/prettier-config": "0.1.0",
+    "@kit/tailwind-config": "0.1.0",
+    "@kit/tsconfig": "0.1.0"
+  },
   "exports": {
     ".": "./src/index.ts"
   },
-  "devDependencies": {
-    "@kit/prettier-config": "0.1.0"
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@kit/eslint-config/base",
+      "@kit/eslint-config/react"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
   }
 }

packages/features/admin/src/components/AdminHeader.tsx

@@ -1,20 +1,27 @@
 import Link from 'next/link';
 
-import { PageHeader } from '@/components/app/Page';
-import pathsConfig from '@/config/paths.config';
-import { ArrowLeftIcon } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
+import { PageHeader } from '@kit/ui/page';
 
-function AdminHeader({ children }: React.PropsWithChildren) {
+function AdminHeader({
+  children,
+  paths,
+}: React.PropsWithChildren<{
+  appHome: string;
+  paths: {
+    appHome: string;
+  };
+}>) {
   return (
     <PageHeader
       title={children}
       description={`Manage your app from the admin dashboard.`}
     >
-      <Link href={pathsConfig.appHome}>
+      <Link href={paths.appHome}>
         <Button variant={'link'}>
-          <ArrowLeftIcon className={'h-4'} />
+          <ArrowLeft className={'h-4'} />
           <span>Back to App</span>
         </Button>
       </Link>

packages/features/admin/src/components/AdminSidebar.tsx

@@ -1,31 +1,26 @@
 'use client';
 
-import Logo from '@/components/app/Logo';
-import { Sidebar, SidebarContent, SidebarItem } from '@/components/app/Sidebar';
-import { HomeIcon, UserIcon, UsersIcon } from 'lucide-react';
+import { Home, User, Users } from 'lucide-react';
 
-function AdminSidebar() {
+import { Sidebar, SidebarContent, SidebarItem } from '@kit/ui/sidebar';
+
+function AdminSidebar(props: { Logo: React.ReactNode }) {
   return (
     <Sidebar>
-      <SidebarContent className={'mb-6 mt-4 pt-2'}>
-        <Logo href={'/admin'} />
-      </SidebarContent>
+      <SidebarContent className={'mb-6 mt-4 pt-2'}>{props.Logo}</SidebarContent>
 
       <SidebarContent>
-        <SidebarItem end path={'/admin'} Icon={<HomeIcon className={'h-4'} />}>
+        <SidebarItem end path={'/admin'} Icon={<Home className={'h-4'} />}>
           Admin
         </SidebarItem>
 
-        <SidebarItem
-          path={'/admin/users'}
-          Icon={<UserIcon className={'h-4'} />}
-        >
+        <SidebarItem path={'/admin/users'} Icon={<User className={'h-4'} />}>
           Users
         </SidebarItem>
 
         <SidebarItem
           path={'/admin/organizations'}
-          Icon={<UsersIcon className={'h-4'} />}
+          Icon={<Users className={'h-4'} />}
         >
           Organizations
         </SidebarItem>