✨ feat(icons): synchronize icons to single package

package.json

@@ -40,7 +40,6 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.0.5",

src/components/app/alert/index.tsx

@@ -91,6 +91,7 @@ export function Alert({ type, message, renderJsx, action }: IProps) {
           type="button"
           onClick={renderMode.off}
           variant="ghost"
+          className="p-0"
           aria-label="Close"
         >
           <X size={16} />

src/components/app/form/input/Stories.tsx

@@ -10,7 +10,6 @@ import { FormInput } from "./text";
 import { FormNumberInput } from "./number";
 import { FormRichTextArea } from "./rich-text";
 import { FormTextArea } from "./textarea";
-import { FormMultiSelect } from "../../../../frontend/design-system/components/Form/Select";
 import { FormCodeEditor } from "../../../../frontend/design-system/components/Form/CodeEditor";
 import { FormSwitch } from "./switch";
 import { FormFileInput } from "../../../../frontend/design-system/components/Form/File";
@@ -210,22 +209,6 @@ function DemoForm() {
             )}
           </Field>
 
-          <Field name="foo7" validateFields={[]}>
-            {(formProps) => (
-              <FormMultiSelect
-                selectData={[
-                  { label: fakeMessageDescriptor("Foo"), value: "foo" },
-                  { label: fakeMessageDescriptor("Bar"), value: "bar" },
-                  { label: fakeMessageDescriptor("Baz"), value: "baz" },
-                  { label: fakeMessageDescriptor("Noop"), value: "noop" },
-                  { label: fakeMessageDescriptor("Dupe"), value: "dupe" },
-                ]}
-                values={formProps.input.value || ["foo", "bar"]}
-                onChange={formProps.input.onChange}
-              />
-            )}
-          </Field>
-
           <Field name="file" validateFields={[]} validate={required}>
             {(formProps) => (
               <FormFileInput

src/components/app/off-canvas.tsx

@@ -36,7 +36,9 @@ export function OffCanvas({ show, onClose, title, children, size }: IProps) {
             <SheetTitle>{_(title)}</SheetTitle>
           </SheetHeader>
           <Separator className="mt-2" />
-          <ScrollArea className="flex-grow px-4 my-2">{children}</ScrollArea>
+          <ScrollArea className="flex-grow">
+            <div className="px-4 my-2">{children}</div>
+          </ScrollArea>
         </SheetContent>
       </Sheet>
     </NextPortal>

src/components/app/table/Head.tsx

@@ -18,7 +18,7 @@ interface IProps {
   table: Table<Record<string, unknown>>;
 }
 
-export function _TableHead({ table }: IProps) {
+export function TableHead({ table }: IProps) {
   return (
     <TableHeader>
       {table.getHeaderGroups().map((headerGroup) => (
@@ -74,5 +74,3 @@ export function _TableHead({ table }: IProps) {
     </TableHeader>
   );
 }
-
-export const TableHead = React.memo(_TableHead);

src/components/app/table/_Pagination.tsx

@@ -1,8 +1,7 @@
 import ReactPaginate from "react-paginate";
 import { Trans, msg } from "@lingui/macro";
-import { ChevronLeft, ChevronRight } from "react-feather";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "react-feather";
 import { fakeMessageDescriptor } from "translations/fake";
-import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { TABLE_PAGE_SIZES } from "./constants";
 import { Select } from "@/components/ui/select";
 import { buttonVariants } from "@/components/ui/button";
@@ -57,7 +56,7 @@ export function TablePagination({
           <ReactPaginate
             previousLabel={<ChevronLeft className="h-4 w-4" />}
             nextLabel={<ChevronRight className="h-4 w-4" />}
-            breakLabel={<DotsHorizontalIcon className="h-4 w-4" />}
+            breakLabel={<MoreHorizontal className="h-4 w-4" />}
             pageCount={totalPageCount}
             renderOnZeroPageCount={() => null}
             marginPagesDisplayed={2}

src/components/app/toast/toaster.tsx

@@ -1,4 +1,11 @@
 import { useLingui } from "@lingui/react";
+import React from "react";
+import {
+  AlertCircle,
+  CheckCircle,
+  Icon as IconType,
+  XCircle,
+} from "react-feather";
 import {
   Toast,
   ToastAction,
@@ -12,39 +19,55 @@ import { useToast } from "./use-toast";
 import { spectrumVariants } from "@/components/ui/spectrum";
 import { cn } from "@/lib/utils";
 
+const ToastConfigMap: Record<
+  "green" | "red" | "yellow",
+  {
+    Icon: IconType;
+  }
+> = {
+  green: { Icon: CheckCircle },
+  red: { Icon: XCircle },
+  yellow: { Icon: AlertCircle },
+};
+
 export function Toaster() {
   const { toasts } = useToast();
   const { _ } = useLingui();
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, title, variant, description, action, ...props }) => {
+      {toasts.map(({ id, title, description, variant, action, ...props }) => {
+        const { Icon } = ToastConfigMap[variant];
         return (
           <Toast
             key={id}
             {...props}
             variant={variant}
             duration={variant === "red" || action ? 10000 : 5000}
           >
-            <div className="grid gap-1">
-              {title && <ToastTitle>{_(title)}</ToastTitle>}
-              {description && (
-                <ToastDescription>{_(description)}</ToastDescription>
-              )}
-            </div>
-            {action && (
-              <ToastAction
-                onClick={action.action}
-                altText={_(action.label)}
-                className={cn(
-                  spectrumVariants({
-                    spectrum: variant || "green",
-                  })
+            <div className="flex items-center">
+              <Icon className="mr-3 w-5 h-5 shrink-0" />
+              <div className="flex flex-col gap-2">
+                {title && <ToastTitle>{_(title)}</ToastTitle>}
+                {description && (
+                  <ToastDescription>{_(description)}</ToastDescription>
                 )}
-              >
-                {_(action.label)}
-              </ToastAction>
-            )}
+                {action && (
+                  <ToastAction
+                    onClick={action.action}
+                    altText={_(action.label)}
+                    className={cn(
+                      "self-start",
+                      spectrumVariants({
+                        spectrum: variant,
+                      })
+                    )}
+                  >
+                    {_(action.label)}
+                  </ToastAction>
+                )}
+              </div>
+            </div>
             <ToastClose />
           </Toast>
         );

src/components/app/toast/use-toast.ts

@@ -6,10 +6,11 @@ import type { ToastProps } from "@/components/ui/toast";
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
 
-type ToasterToast = Pick<ToastProps, "open" | "onOpenChange" | "variant"> & {
+type ToasterToast = Pick<ToastProps, "open" | "onOpenChange"> & {
   id: string;
   title?: MessageDescriptor;
   description?: MessageDescriptor;
+  variant: ToastProps["variant"];
   action?: { label: MessageDescriptor; action: () => void };
 };
 
@@ -129,7 +130,12 @@ const listeners: Array<(state: State) => void> = [];
 
 let memoryState: State = { toasts: [] };
 
-type Toast = Omit<ToasterToast, "id">;
+type Toast = {
+  description: MessageDescriptor;
+  variant: ToastProps["variant"];
+  title?: MessageDescriptor;
+  action?: { label: MessageDescriptor; action: () => void };
+};
 
 function dispatch(action: Action) {
   memoryState = reducer(memoryState, action);

src/components/ui/breadcrumb.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { Slot } from "@radix-ui/react-slot";
-
+import { ChevronRight, MoreHorizontal } from "react-feather";
 import { cn } from "@/lib/utils";
 
 const Breadcrumb = React.forwardRef<
@@ -85,7 +84,7 @@ function BreadcrumbSeparator({
       className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
-      {children ?? <ChevronRightIcon />}
+      {children ?? <ChevronRight />}
     </li>
   );
 }
@@ -102,7 +101,7 @@ function BreadcrumbEllipsis({
       className={cn("flex h-9 w-9 items-center justify-center", className)}
       {...props}
     >
-      <DotsHorizontalIcon className="h-4 w-4" />
+      <MoreHorizontal className="h-4 w-4" />
       <span className="sr-only">More</span>
     </span>
   );

src/components/ui/calendar.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable react/prop-types */
 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { DayPicker } from "react-day-picker";
-
+import { ChevronLeft, ChevronRight } from "react-feather";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 
@@ -54,8 +53,8 @@ function Calendar({ className, classNames, ...props }: CalendarProps) {
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />

src/components/ui/command.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 
+import { Search } from "react-feather";
 import { cn } from "@/lib/utils";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 
@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(

src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { X } from "react-feather";
 
 import { cn } from "@/lib/utils";
 
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-base transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-muted">
-        <Cross2Icon className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

src/components/ui/dropdown-menu.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { ChevronRightIcon } from "@radix-ui/react-icons";
 
+import { ChevronRight } from "react-feather";
 import { cn } from "@/lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -33,7 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =

src/components/ui/scroll-area.tsx

@@ -46,4 +46,4 @@ const ScrollArea = React.forwardRef<
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea };