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/ui/package.json

@@ -25,7 +25,6 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-separator": "^1.0.3",
-    "class-variance-authority": "^0.7.0",
     "react-top-loading-bar": "2.3.1",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
@@ -37,7 +36,8 @@
     "@radix-ui/react-icons": "1.3.0",
     "zod": "^3.22.4",
     "sonner": "^1.4.41",
-    "lucide-react": "0.307.0"
+    "lucide-react": "0.307.0",
+    "class-variance-authority": "^0.7.0"
   },
   "devDependencies": {
     "@kit/eslint-config": "0.2.0",

packages/ui/src/makerkit/data-table.tsx

@@ -18,12 +18,11 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/react-table';
-import classNames from 'clsx';
 import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
 } from 'lucide-react';
 
 import { Button } from '../shadcn/button';
@@ -36,6 +35,7 @@ import {
   TableHeader,
   TableRow,
 } from '../shadcn/table';
+import { cn } from '../utils';
 import Trans from './trans';
 
 interface ReactTableProps<T extends object> {
@@ -148,7 +148,7 @@ export function DataTable<T extends object>({
           {table.getRowModel().rows.map((row) => (
             <Fragment key={row.id}>
               <TableRow
-                className={classNames({
+                className={cn({
                   'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted':
                     row.getIsExpanded(),
                 })}
@@ -200,7 +200,7 @@ function Pagination<T>({
         onClick={() => table.setPageIndex(0)}
         disabled={!table.getCanPreviousPage()}
       >
-        <ChevronsLeftIcon className={'h-4'} />
+        <ChevronsLeft className={'h-4'} />
       </Button>
 
       <Button
@@ -208,7 +208,7 @@ function Pagination<T>({
         onClick={() => table.previousPage()}
         disabled={!table.getCanPreviousPage()}
       >
-        <ChevronLeftIcon className={'h-4'} />
+        <ChevronLeft className={'h-4'} />
       </Button>
 
       <Button
@@ -216,7 +216,7 @@ function Pagination<T>({
         onClick={() => table.nextPage()}
         disabled={!table.getCanNextPage()}
       >
-        <ChevronRightIcon className={'h-4'} />
+        <ChevronRight className={'h-4'} />
       </Button>
 
       <Button
@@ -224,7 +224,7 @@ function Pagination<T>({
         onClick={() => table.setPageIndex(table.getPageCount() - 1)}
         disabled={!table.getCanNextPage()}
       >
-        <ChevronsRightIcon className={'h-4'} />
+        <ChevronsRight className={'h-4'} />
       </Button>
 
       <span className="flex items-center text-sm">

packages/ui/src/makerkit/image-upload-input.tsx

@@ -5,11 +5,11 @@ import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import Image from 'next/image';
 
-import cn from 'clsx';
-import { UploadCloud, XIcon } from 'lucide-react';
+import { UploadCloud, X } from 'lucide-react';
 
 import { Button } from '../shadcn/button';
 import { Label } from '../shadcn/label';
+import { cn } from '../utils';
 import { If } from './if';
 
 type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {
@@ -21,7 +21,7 @@ type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {
 
 const IMAGE_SIZE = 22;
 
-const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
+export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
   function ImageUploadInputComponent(
     {
       children,
@@ -190,7 +190,7 @@ const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
               className={'!h-5 !w-5'}
               onClick={imageRemoved}
             >
-              <XIcon className="h-4" />
+              <X className="h-4" />
             </Button>
           </If>
         </div>
@@ -198,4 +198,3 @@ const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
     );
   },
 );
-export default ImageUploadInput;

packages/ui/src/makerkit/image-uploader.tsx

@@ -4,11 +4,11 @@ import { useCallback, useEffect, useState } from 'react';
 
 import Image from 'next/image';
 
-import { ImageIcon } from 'lucide-react';
+import { Image as ImageIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
 import { Button } from '../shadcn/button';
-import ImageUploadInput from './image-upload-input';
+import { ImageUploadInput } from './image-upload-input';
 import { Trans } from './trans';
 
 function ImageUploader(

packages/ui/src/makerkit/mobile-navigation-dropdown.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { ChevronDownIcon } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 
 import { Button } from '../shadcn/button';
 import {
@@ -14,7 +14,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../shadcn/dropdown-menu';
-import { Trans } from '../shadcn/trans';
+import { Trans } from './trans';
 
 function MobileNavigationDropdown({
   links,
@@ -41,7 +41,7 @@ function MobileNavigationDropdown({
               <Trans i18nKey={currentPathName} defaults={currentPathName} />
             </span>
 
-            <ChevronDownIcon className={'h-5'} />
+            <ChevronDown className={'h-5'} />
           </span>
         </Button>
       </DropdownMenuTrigger>

packages/ui/src/makerkit/mobile-navigation-menu.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { ChevronDownIcon } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 
 import {
   DropdownMenu,
@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../shadcn/dropdown-menu';
-import { Trans } from '../shadcn/trans';
+import { Trans } from './trans';
 
 const MobileNavigationDropdown: React.FC<{
   links: {
@@ -60,7 +60,7 @@ const MobileNavigationDropdown: React.FC<{
               <Trans i18nKey={currentPathName} defaults={currentPathName} />
             </span>
 
-            <ChevronDownIcon className={'h-5'} />
+            <ChevronDown className={'h-5'} />
           </span>
         </div>
       </DropdownMenuTrigger>

packages/ui/src/makerkit/sidebar.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
 import { cva } from 'class-variance-authority';
-import { ChevronDownIcon } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import { z } from 'zod';
 
 import { Button } from '../shadcn/button';
@@ -111,7 +111,7 @@ export function SidebarGroup({
           <Title>{label}</Title>
 
           <If condition={collapsible}>
-            <ChevronDownIcon
+            <ChevronDown
               className={cn(`h-3 transition duration-300`, {
                 'rotate-180': !isGroupCollapsed,
               })}