From c617dfd2e51b0cf217a9020769cf2d861a7e5513 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Kha <jean-philippe.kha@filigran.io>
Date: Tue, 17 Dec 2024 18:10:50 +0100
Subject: [PATCH] [filigran-ui] Remove lucide-react icon

---
 packages/filigran-ui/package.json             |  5 ++-
 .../src/components/clients/accordion.tsx      |  4 +--
 .../src/components/clients/combobox.tsx       |  8 ++---
 .../src/components/clients/command.tsx        |  4 +--
 .../src/components/clients/data-table.tsx     | 31 ++++++++++---------
 .../src/components/clients/dialog.tsx         |  4 +--
 .../src/components/clients/dropdown-menu.tsx  |  8 ++---
 .../src/components/clients/multi-select.tsx   |  8 ++---
 .../src/components/clients/sheet.tsx          |  5 ++-
 .../clients/tag-input/autocomplete.tsx        |  2 +-
 .../src/components/clients/toast.tsx          |  4 +--
 .../src/components/servers/breadcrumb.tsx     |  6 ++--
 .../example/example-multi-select.tsx          |  2 +-
 13 files changed, 43 insertions(+), 48 deletions(-)

diff --git a/packages/filigran-ui/package.json b/packages/filigran-ui/package.json
index 1f5bc6d..6f38a40 100644
--- a/packages/filigran-ui/package.json
+++ b/packages/filigran-ui/package.json
@@ -54,7 +54,6 @@
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "cmdk": "1.0.0",
-    "lucide-react": "0.399.0",
     "react-easy-sort": "1.6.0",
     "react-hook-form": "7.52.0",
     "tailwind-merge": "2.3.0",
@@ -62,8 +61,8 @@
     "zod": "3.23.8"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "exports": {
     ".": {
diff --git a/packages/filigran-ui/src/components/clients/accordion.tsx b/packages/filigran-ui/src/components/clients/accordion.tsx
index 8dfad93..e646b05 100644
--- a/packages/filigran-ui/src/components/clients/accordion.tsx
+++ b/packages/filigran-ui/src/components/clients/accordion.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import {ChevronDown} from 'lucide-react'
+import {KeyboardArrowDownIcon} from 'filigran-icon'
 import * as React from 'react'
 import {cn} from '../../lib/utils'
 
@@ -32,7 +32,7 @@ const AccordionTrigger = React.forwardRef<
       )}
       {...props}>
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <KeyboardArrowDownIcon className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/packages/filigran-ui/src/components/clients/combobox.tsx b/packages/filigran-ui/src/components/clients/combobox.tsx
index 8667a11..bf5f010 100644
--- a/packages/filigran-ui/src/components/clients/combobox.tsx
+++ b/packages/filigran-ui/src/components/clients/combobox.tsx
@@ -1,10 +1,8 @@
 'use client'
 
-import {Check, ChevronDown} from 'lucide-react'
+import {CheckIcon, KeyboardArrowDownIcon} from 'filigran-icon'
 import * as React from 'react'
-
 import {cn} from '../../lib/utils'
-
 import {Button} from '../servers'
 import {
   Command,
@@ -70,7 +68,7 @@ function Combobox({
           ) : (
             <span className="text-muted-foreground">{order}</span>
           )}
-          <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
+          <KeyboardArrowDownIcon className="h-4 cursor-pointer text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="p-0 popover-content-width-same-as-its-trigger">
@@ -84,7 +82,7 @@ function Combobox({
                   key={data.value}
                   value={data.value}
                   onSelect={() => handleSelect(data.value)}>
-                  <Check
+                  <CheckIcon
                     className={cn(
                       'mr-2 h-4 w-4',
                       value === data.value ? 'opacity-100' : 'opacity-0'
diff --git a/packages/filigran-ui/src/components/clients/command.tsx b/packages/filigran-ui/src/components/clients/command.tsx
index 04e15a5..b8d7fc4 100644
--- a/packages/filigran-ui/src/components/clients/command.tsx
+++ b/packages/filigran-ui/src/components/clients/command.tsx
@@ -2,9 +2,9 @@
 
 import {type DialogProps} from '@radix-ui/react-dialog'
 import {Command as CommandPrimitive} from 'cmdk'
-import {Search} from 'lucide-react'
 import * as React from 'react'
 
+import {SearchIcon} from 'filigran-icon'
 import {cn} from '../../lib/utils'
 import {Dialog, DialogContent} from './dialog'
 
@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
   <div
     className="flex items-center border-b px-3"
     cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
diff --git a/packages/filigran-ui/src/components/clients/data-table.tsx b/packages/filigran-ui/src/components/clients/data-table.tsx
index f20fb2e..417f899 100644
--- a/packages/filigran-ui/src/components/clients/data-table.tsx
+++ b/packages/filigran-ui/src/components/clients/data-table.tsx
@@ -1,55 +1,56 @@
 'use client'
 import {
-  closestCenter,
   DndContext,
-  type DragEndEvent,
   KeyboardSensor,
   MouseSensor,
   TouchSensor,
+  closestCenter,
   useSensor,
   useSensors,
+  type DragEndEvent,
 } from '@dnd-kit/core'
 import {restrictToHorizontalAxis} from '@dnd-kit/modifiers'
 import {
+  SortableContext,
   arrayMove,
   horizontalListSortingStrategy,
-  SortableContext,
   useSortable,
 } from '@dnd-kit/sortable'
 import type {Arguments} from '@dnd-kit/sortable/dist/hooks/useSortable'
 import {type Transform} from '@dnd-kit/utilities'
 import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
   type Cell,
   type Column,
   type ColumnDef,
-  flexRender,
-  getCoreRowModel,
   type Header,
   type Row,
   type SortDirection,
   type TableOptions,
   type TableState,
   type Table as TableType,
-  useReactTable,
 } from '@tanstack/react-table'
 import {
   ArrowNextIcon,
   ArrowPreviousIcon,
+  DragIndicatorIcon,
   KeyboardArrowDownIcon,
   KeyboardArrowUpIcon,
   TableTuneIcon,
   UnfoldMoreIcon,
+  VisibilityOffIcon,
 } from 'filigran-icon'
-import {ArrowDownIcon, ArrowUpIcon, EyeOff, GripHorizontal} from 'lucide-react'
 import {
   createContext,
-  type ReactNode,
   useCallback,
   useContext,
   useId,
   useImperativeHandle,
   useMemo,
   useState,
+  type ReactNode,
 } from 'react'
 import {cn, fixedForwardRef} from '../../lib/utils'
 import {Button, Skeleton} from '../servers'
@@ -262,11 +263,11 @@ const DataTableOptionsHeader = <TData, TValue>({
           {column.getCanSort() && (
             <>
               <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-                <ArrowUpIcon className="mr-2 h-4 w-4 text-text-secondary" />
+                <KeyboardArrowUpIcon className="mr-2 h-4 w-4 text-text-secondary" />
                 {t_i18n('Asc')}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-                <ArrowDownIcon className="mr-2 h-4 w-4 text-text-secondary" />
+                <KeyboardArrowDownIcon className="mr-2 h-4 w-4 text-text-secondary" />
                 {t_i18n('Desc')}
               </DropdownMenuItem>
             </>
@@ -277,7 +278,7 @@ const DataTableOptionsHeader = <TData, TValue>({
 
           {column.getCanHide() && (
             <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-              <EyeOff className="mr-2 h-4 w-4 text-text-secondary" />
+              <VisibilityOffIcon className="mr-2 h-4 w-4 text-text-secondary" />
               {t_i18n('Hide')}
             </DropdownMenuItem>
           )}
@@ -301,14 +302,14 @@ const DraggableTableHeader = <TData, TValue>({
     const styles: Record<string, string | number> = {
       transform: transform ? getTransformString(transform) : '',
     }
-    const size = header.getSize();
+    const size = header.getSize()
     // if size is -1, it means the column has no size and will expand to fit the available space
     if (size !== -1) {
       styles.minWidth = size
       styles.width = size
     }
-    return styles;
-  }, [header, transform]);
+    return styles
+  }, [header, transform])
 
   return (
     <TableHead
@@ -341,7 +342,7 @@ const DraggableTableHeader = <TData, TValue>({
             )}
             {...attributes}
             {...listeners}>
-            <GripHorizontal className="mx-s h-5 w-5" />
+            <DragIndicatorIcon className="mx-s h-5 w-5 rotate-90" />
           </button>
         )}
       </div>
diff --git a/packages/filigran-ui/src/components/clients/dialog.tsx b/packages/filigran-ui/src/components/clients/dialog.tsx
index b1acce4..e721946 100644
--- a/packages/filigran-ui/src/components/clients/dialog.tsx
+++ b/packages/filigran-ui/src/components/clients/dialog.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import {X} from 'lucide-react'
 import * as React from 'react'
 
+import {CloseIcon} from 'filigran-icon'
 import {cn} from '../../lib/utils'
 
 const Dialog = DialogPrimitive.Root
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}>
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <CloseIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/packages/filigran-ui/src/components/clients/dropdown-menu.tsx b/packages/filigran-ui/src/components/clients/dropdown-menu.tsx
index 55e6de2..09dc67d 100644
--- a/packages/filigran-ui/src/components/clients/dropdown-menu.tsx
+++ b/packages/filigran-ui/src/components/clients/dropdown-menu.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import {Check, ChevronRight, Circle} from 'lucide-react'
+import {CheckIcon, ChevronIcon, CircleIcon} from 'filigran-icon'
 import * as React from 'react'
 import {cn} from '../../lib/utils'
 
@@ -32,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     )}
     {...props}>
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     {...props}>
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -126,7 +126,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     {...props}>
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <CircleIcon className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/packages/filigran-ui/src/components/clients/multi-select.tsx b/packages/filigran-ui/src/components/clients/multi-select.tsx
index 077192f..4a2eb69 100644
--- a/packages/filigran-ui/src/components/clients/multi-select.tsx
+++ b/packages/filigran-ui/src/components/clients/multi-select.tsx
@@ -1,8 +1,6 @@
 import {cva, type VariantProps} from 'class-variance-authority'
-import {CheckIcon, ChevronDown} from 'lucide-react'
+import {CheckIcon, CloseIcon, KeyboardArrowDownIcon} from 'filigran-icon'
 import * as React from 'react'
-
-import {CloseIcon} from 'filigran-icon'
 import {cn} from '../../lib/utils'
 import {
   Command,
@@ -161,7 +159,7 @@ const MultiSelectFormField = React.forwardRef<
                     orientation="vertical"
                     className="flex h-full min-h-6"
                   />
-                  <ChevronDown className="mx-2 h-4 cursor-pointer text-muted-foreground" />
+                  <KeyboardArrowDownIcon className="mx-2 h-4 cursor-pointer text-muted-foreground" />
                 </div>
               </div>
             ) : (
@@ -169,7 +167,7 @@ const MultiSelectFormField = React.forwardRef<
                 <span className="mx-3 text-sm text-muted-foreground normal-case">
                   {placeholder}
                 </span>
-                <ChevronDown className="mx-2 h-4 cursor-pointer text-muted-foreground" />
+                <KeyboardArrowDownIcon className="mx-2 h-4 cursor-pointer text-muted-foreground" />
               </div>
             )}
           </Button>
diff --git a/packages/filigran-ui/src/components/clients/sheet.tsx b/packages/filigran-ui/src/components/clients/sheet.tsx
index 96bf852..d25d516 100644
--- a/packages/filigran-ui/src/components/clients/sheet.tsx
+++ b/packages/filigran-ui/src/components/clients/sheet.tsx
@@ -2,9 +2,8 @@
 
 import * as SheetPrimitive from '@radix-ui/react-dialog'
 import {cva, type VariantProps} from 'class-variance-authority'
-import {X} from 'lucide-react'
+import {CloseIcon} from 'filigran-icon'
 import * as React from 'react'
-
 import {cn} from '../../lib/utils'
 import {Button} from '../servers'
 
@@ -73,7 +72,7 @@ const SheetContent = React.forwardRef<
             variant="ghost"
             size="icon"
             className="text-primary hover:bg-hover/50 focus:bg-hover/50">
-            <X className="h-4 w-4" />
+            <CloseIcon className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </Button>
         </div>
diff --git a/packages/filigran-ui/src/components/clients/tag-input/autocomplete.tsx b/packages/filigran-ui/src/components/clients/tag-input/autocomplete.tsx
index 4e2be1b..338ffdc 100644
--- a/packages/filigran-ui/src/components/clients/tag-input/autocomplete.tsx
+++ b/packages/filigran-ui/src/components/clients/tag-input/autocomplete.tsx
@@ -1,4 +1,4 @@
-import {CheckIcon} from 'lucide-react'
+import {CheckIcon} from 'filigran-icon'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {cn} from '../../../lib/utils'
 import {Button} from '../../servers/button'
diff --git a/packages/filigran-ui/src/components/clients/toast.tsx b/packages/filigran-ui/src/components/clients/toast.tsx
index 49334c7..423234c 100644
--- a/packages/filigran-ui/src/components/clients/toast.tsx
+++ b/packages/filigran-ui/src/components/clients/toast.tsx
@@ -2,7 +2,7 @@
 
 import * as ToastPrimitives from '@radix-ui/react-toast'
 import {cva, type VariantProps} from 'class-variance-authority'
-import {X} from 'lucide-react'
+import {CloseIcon} from 'filigran-icon'
 import * as React from 'react'
 import {cn} from '../../lib/utils'
 
@@ -78,7 +78,7 @@ const ToastClose = React.forwardRef<
     className={cn('absolute right-4 top-4', className)}
     toast-close=""
     {...props}>
-    <X className="h-4 w-4" />
+    <CloseIcon className="h-4 w-4" />
   </ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
diff --git a/packages/filigran-ui/src/components/servers/breadcrumb.tsx b/packages/filigran-ui/src/components/servers/breadcrumb.tsx
index 594b5df..919b7fc 100644
--- a/packages/filigran-ui/src/components/servers/breadcrumb.tsx
+++ b/packages/filigran-ui/src/components/servers/breadcrumb.tsx
@@ -1,5 +1,5 @@
 import {Slot} from '@radix-ui/react-slot'
-import {ChevronRight, MoreHorizontal} from 'lucide-react'
+import {ChevronIcon, MoreHorizIcon} from 'filigran-icon'
 import * as React from 'react'
 import {cn} from '../../lib/utils'
 
@@ -87,7 +87,7 @@ const BreadcrumbSeparator = ({
     aria-hidden="true"
     className={cn('[&>svg]:size-3.5', className)}
     {...props}>
-    {children ?? <ChevronRight />}
+    {children ?? <ChevronIcon className="h-4 w-4" />}
   </li>
 )
 BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
@@ -101,7 +101,7 @@ const BreadcrumbEllipsis = ({
     aria-hidden="true"
     className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}>
-    <MoreHorizontal className="h-4 w-4" />
+    <MoreHorizIcon className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 )
diff --git a/projects/filigran-website/components/example/example-multi-select.tsx b/projects/filigran-website/components/example/example-multi-select.tsx
index c05b758..048a381 100644
--- a/projects/filigran-website/components/example/example-multi-select.tsx
+++ b/projects/filigran-website/components/example/example-multi-select.tsx
@@ -11,7 +11,7 @@ import {
   FormLabel,
   FormMessage,
 } from 'filigran-ui'
-import {MultiSelectFormField} from 'filigran-ui/servers'
+import {MultiSelectFormField} from 'filigran-ui/clients'
 
 const frameworksList = [
   {