helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate all icons from Untitled UI to FontAwesome Pro Duotone

Browse Source 
Replace all @untitledui/icons imports across 55 files with equivalent
@fortawesome/pro-duotone-svg-icons icons, using FontAwesomeIcon wrappers
(FC<{ className?: string }>) for prop-based usage and inline replacements
for direct JSX usage. Drops unsupported Untitled UI-specific props
(strokeWidth, numeric size). TypeScript compiles clean with no errors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-21 11:07:19 +05:30
parent 3064eeb444
commit 6f40b82579
55 changed files with 289 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/application/app-navigation/base-components/mobile-header.tsx
View File

@@ -1,5 +1,6 @@
import type { PropsWithChildren } from "react";
import { X as CloseIcon, Menu02 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark, faBars } from "@fortawesome/pro-duotone-svg-icons";
import {
Button as AriaButton,
Dialog as AriaDialog,
@@ -20,8 +21,8 @@ export const MobileNavigationHeader = ({ children }: PropsWithChildren) => {
aria-label="Expand navigation menu"
className="group flex items-center justify-center rounded-lg bg-primary p-2 text-fg-secondary outline-focus-ring hover:bg-primary_hover hover:text-fg-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2"
>
<Menu02 className="size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" />
<CloseIcon className="absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" />
<FontAwesomeIcon icon={faBars} className="size-6 transition duration-200 ease-in-out group-aria-expanded:opacity-0" />
<FontAwesomeIcon icon={faXmark} className="absolute size-6 opacity-0 transition duration-200 ease-in-out group-aria-expanded:opacity-100" />
</AriaButton>
</header>
@@ -42,7 +43,7 @@ export const MobileNavigationHeader = ({ children }: PropsWithChildren) => {
onPress={() => state.close()}
className="fixed top-3 right-2 flex cursor-pointer items-center justify-center rounded-lg p-2 text-fg-white/70 outline-focus-ring hover:bg-white/10 hover:text-fg-white focus-visible:outline-2 focus-visible:outline-offset-2"
>
<CloseIcon className="size-6" />
<FontAwesomeIcon icon={faXmark} className="size-6" />
</AriaButton>
<AriaModal className="w-full cursor-auto will-change-transform">

6
src/components/application/app-navigation/base-components/nav-account-card.tsx
View File

@@ -1,9 +1,9 @@
import type { FC, HTMLAttributes } from "react";
import { useCallback, useEffect, useRef } from "react";
import type { Placement } from "@react-types/overlays";
import { ChevronSelectorVertical } from "@untitledui/icons";
import { faSort } from "@fortawesome/pro-duotone-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser, faGear, faArrowRightFromBracket, faPhoneVolume } from "@fortawesome/pro-duotone-svg-icons";
import { faUser, faGear, faArrowRightFromBracket, faPhoneVolume, faSort } from "@fortawesome/pro-duotone-svg-icons";
const IconUser: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faUser} className={className} />;
const IconSettings: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faGear} className={className} />;
@@ -154,7 +154,7 @@ export const NavAccountCard = ({
<div className="absolute top-1.5 right-1.5">
<AriaDialogTrigger>
<AriaButton className="flex cursor-pointer items-center justify-center rounded-md p-1.5 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 pressed:bg-primary_hover pressed:text-fg-quaternary_hover">
<ChevronSelectorVertical className="size-4 shrink-0" />
<FontAwesomeIcon icon={faSort} className="size-4 shrink-0" />
</AriaButton>
<AriaPopover
placement={popoverPlacement ?? (isDesktop ? "right bottom" : "top right")}

7
src/components/application/app-navigation/base-components/nav-item.tsx
View File

@@ -1,5 +1,6 @@
import type { FC, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
import { ChevronDown, Share04 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faArrowUpRightFromSquare } from "@fortawesome/pro-duotone-svg-icons";
import { Link as AriaLink } from "react-aria-components";
import { Badge } from "@/components/base/badges/badges";
import { cx, sortCx } from "@/utils/cx";
@@ -57,7 +58,7 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
);
const isExternal = href && href.startsWith("http");
const externalIcon = isExternal && <Share04 className="size-4 stroke-[2.5px] text-fg-quaternary" />;
const externalIcon = isExternal && <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="size-4 text-fg-quaternary" />;
if (type === "collapsible") {
return (
@@ -68,7 +69,7 @@ export const NavItemBase = ({ current, type, badge, href, icon: Icon, children,
{badgeElement}
<ChevronDown aria-hidden="true" className="ml-3 size-4 shrink-0 stroke-[2.5px] text-fg-quaternary in-open:-scale-y-100" />
<FontAwesomeIcon icon={faChevronDown} aria-hidden="true" className="ml-3 size-4 shrink-0 text-fg-quaternary in-open:-scale-y-100" />
</summary>
);
}

8
src/components/application/app-navigation/header-navigation.tsx
View File

@@ -1,5 +1,11 @@
import type { FC, ReactNode } from "react";
import { Bell01, LifeBuoy01, SearchLg, Settings01 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBell, faLifeRing, faMagnifyingGlass, faGear } from "@fortawesome/pro-duotone-svg-icons";
const Bell01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faBell} className={className} />;
const LifeBuoy01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faLifeRing} className={className} />;
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
const Settings01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faGear} className={className} />;
import { Button as AriaButton, DialogTrigger, Popover } from "react-aria-components";
import { Avatar } from "@/components/base/avatar/avatar";
import { BadgeWithDot } from "@/components/base/badges/badges";

7
src/components/application/app-navigation/sidebar-navigation/sidebar-dual-tier.tsx
View File

@@ -1,6 +1,9 @@
import type { ReactNode } from "react";
import type { FC, ReactNode } from "react";
import { useState } from "react";
import { SearchLg } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/pro-duotone-svg-icons";
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { AnimatePresence, motion } from "motion/react";
import { Input } from "@/components/base/input/input";
import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";

6
src/components/application/app-navigation/sidebar-navigation/sidebar-section-dividers.tsx
View File

@@ -1,4 +1,8 @@
import { SearchLg } from "@untitledui/icons";
import type { FC } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/pro-duotone-svg-icons";
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Input } from "@/components/base/input/input";
import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
import { MobileNavigationHeader } from "../base-components/mobile-header";

7
src/components/application/app-navigation/sidebar-navigation/sidebar-simple.tsx
View File

@@ -1,5 +1,8 @@
import type { ReactNode } from "react";
import { SearchLg } from "@untitledui/icons";
import type { FC, ReactNode } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/pro-duotone-svg-icons";
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { Input } from "@/components/base/input/input";
import { UntitledLogo } from "@/components/foundations/logo/untitledui-logo";
import { cx } from "@/utils/cx";

7
src/components/application/app-navigation/sidebar-navigation/sidebar-slim.tsx
View File

@@ -1,6 +1,11 @@
import type { FC } from "react";
import { useState } from "react";
import { LifeBuoy01, LogOut01, Settings01 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLifeRing, faArrowRightFromBracket, faGear } from "@fortawesome/pro-duotone-svg-icons";
const LifeBuoy01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faLifeRing} className={className} />;
const LogOut01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRightFromBracket} className={className} />;
const Settings01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faGear} className={className} />;
import { AnimatePresence, motion } from "motion/react";
import { Button as AriaButton, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
import { Avatar } from "@/components/base/avatar/avatar";

8
src/components/application/date-picker/calendar.tsx
View File

@@ -1,7 +1,11 @@
import type { HTMLAttributes, PropsWithChildren } from "react";
import type { FC, HTMLAttributes, PropsWithChildren } from "react";
import { Fragment, useContext, useState } from "react";
import { type CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
import { ChevronLeft, ChevronRight } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faChevronRight } from "@fortawesome/pro-duotone-svg-icons";
const ChevronLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faChevronLeft} className={className} />;
const ChevronRight: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faChevronRight} className={className} />;
import type { CalendarProps as AriaCalendarProps, DateValue } from "react-aria-components";
import {
Calendar as AriaCalendar,

6
src/components/application/date-picker/date-picker.tsx
View File

@@ -1,6 +1,10 @@
import type { FC } from "react";
import { getLocalTimeZone, today } from "@internationalized/date";
import { useControlledState } from "@react-stately/utils";
import { Calendar as CalendarIcon } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendar } from "@fortawesome/pro-duotone-svg-icons";
const CalendarIcon: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCalendar} className={className} />;
import { useDateFormatter } from "react-aria";
import type { DatePickerProps as AriaDatePickerProps, DateValue } from "react-aria-components";
import { DatePicker as AriaDatePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover } from "react-aria-components";

6
src/components/application/date-picker/date-range-picker.tsx
View File

@@ -1,7 +1,11 @@
import type { FC } from "react";
import { useMemo, useState } from "react";
import { endOfMonth, endOfWeek, getLocalTimeZone, startOfMonth, startOfWeek, today } from "@internationalized/date";
import { useControlledState } from "@react-stately/utils";
import { Calendar as CalendarIcon } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendar } from "@fortawesome/pro-duotone-svg-icons";
const CalendarIcon: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCalendar} className={className} />;
import { useDateFormatter } from "react-aria";
import type { DateRangePickerProps as AriaDateRangePickerProps, DateValue } from "react-aria-components";
import { DateRangePicker as AriaDateRangePicker, Dialog as AriaDialog, Group as AriaGroup, Popover as AriaPopover, useLocale } from "react-aria-components";

8
src/components/application/date-picker/range-calendar.tsx
View File

@@ -1,7 +1,11 @@
import type { HTMLAttributes, PropsWithChildren } from "react";
import type { FC, HTMLAttributes, PropsWithChildren } from "react";
import { Fragment, useContext, useState } from "react";
import type { CalendarDate } from "@internationalized/date";
import { ChevronLeft, ChevronRight } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft, faChevronRight } from "@fortawesome/pro-duotone-svg-icons";
const ChevronLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faChevronLeft} className={className} />;
const ChevronRight: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faChevronRight} className={className} />;
import { useDateFormatter } from "react-aria";
import type { RangeCalendarProps as AriaRangeCalendarProps, DateValue } from "react-aria-components";
import {

7
src/components/application/empty-state/empty-state.tsx
View File

@@ -1,7 +1,10 @@
import type { ComponentProps, ComponentPropsWithRef } from "react";
import type { ComponentProps, ComponentPropsWithRef, FC } from "react";
import { Children, createContext, isValidElement, useContext } from "react";
import { FileIcon } from "@untitledui/file-icons";
import { SearchLg } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/pro-duotone-svg-icons";
const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
import { FeaturedIcon as FeaturedIconbase } from "@/components/foundations/featured-icon/featured-icon";
import type { BackgroundPatternProps } from "@/components/shared-assets/background-patterns";
import { BackgroundPattern } from "@/components/shared-assets/background-patterns";

19
src/components/application/file-upload/file-upload-base.tsx
View File

@@ -1,8 +1,11 @@
import type { ComponentProps, ComponentPropsWithRef } from "react";
import type { ComponentProps, ComponentPropsWithRef, FC } from "react";
import { useId, useRef, useState } from "react";
import type { FileIcon } from "@untitledui/file-icons";
import { FileIcon as FileTypeIcon } from "@untitledui/file-icons";
import { CheckCircle, Trash01, UploadCloud02, XCircle } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleCheck, faTrash, faCloudArrowUp, faCircleXmark } from "@fortawesome/pro-duotone-svg-icons";
const Trash01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faTrash} className={className} />;
import { AnimatePresence, motion } from "motion/react";
import { Button } from "@/components/base/buttons/button";
import { ButtonUtility } from "@/components/base/buttons/button-utility";
@@ -206,7 +209,7 @@ export const FileUploadDropZone = ({
)}
>
<FeaturedIcon color="gray" theme="modern" size="md">
<UploadCloud02 className="size-5" />
<FontAwesomeIcon icon={faCloudArrowUp} className="size-5" />
</FeaturedIcon>
<div className="flex flex-col gap-1 text-center">
@@ -283,13 +286,13 @@ export const FileListItemProgressBar = ({ name, size, progress, failed, type, fi
<hr className="h-3 w-px rounded-t-full rounded-b-full border-none bg-border-primary" />
<div className="flex items-center gap-1">
{isComplete && <CheckCircle className="size-4 stroke-[2.5px] text-fg-success-primary" />}
{isComplete && <FontAwesomeIcon icon={faCircleCheck} className="size-4 text-fg-success-primary" />}
{isComplete && <p className="text-sm font-medium text-success-primary">Complete</p>}
{!isComplete && !failed && <UploadCloud02 className="stroke-[2.5px size-4 text-fg-quaternary" />}
{!isComplete && !failed && <FontAwesomeIcon icon={faCloudArrowUp} className="size-4 text-fg-quaternary" />}
{!isComplete && !failed && <p className="text-sm font-medium text-quaternary">Uploading...</p>}
{failed && <XCircle className="size-4 text-fg-error-primary" />}
{failed && <FontAwesomeIcon icon={faCircleXmark} className="size-4 text-fg-error-primary" />}
{failed && <p className="text-sm font-medium text-error-primary">Failed</p>}
</div>
</div>
@@ -350,8 +353,8 @@ export const FileListItemProgressFill = ({ name, size, progress, failed, type, f
<>
<hr className="h-3 w-px rounded-t-full rounded-b-full border-none bg-border-primary" />
<div className="flex items-center gap-1">
{isComplete && <CheckCircle className="size-4 stroke-[2.5px] text-fg-success-primary" />}
{!isComplete && <UploadCloud02 className="size-4 stroke-[2.5px] text-fg-quaternary" />}
{isComplete && <FontAwesomeIcon icon={faCircleCheck} className="size-4 text-fg-success-primary" />}
{!isComplete && <FontAwesomeIcon icon={faCloudArrowUp} className="size-4 text-fg-quaternary" />}
<p className="text-sm text-tertiary">{progress}%</p>
</div>

7
src/components/application/notifications/notifications.tsx
View File

@@ -1,5 +1,10 @@
import type { FC } from "react";
import { AlertCircle, CheckCircle, InfoCircle } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCircleExclamation, faCircleCheck, faCircleInfo } from "@fortawesome/pro-duotone-svg-icons";
const AlertCircle: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCircleExclamation} className={className} />;
const CheckCircle: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCircleCheck} className={className} />;
const InfoCircle: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCircleInfo} className={className} />;
import { Avatar } from "@/components/base/avatar/avatar";
import { Button } from "@/components/base/buttons/button";
import { CloseButton } from "@/components/base/buttons/close-button";

7
src/components/application/pagination/pagination.tsx
View File

@@ -1,4 +1,9 @@
import { ArrowLeft, ArrowRight } from "@untitledui/icons";
import type { FC } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft, faArrowRight } from "@fortawesome/pro-duotone-svg-icons";
const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
const ArrowRight: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRight} className={className} />;
import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
import { Button } from "@/components/base/buttons/button";
import { useBreakpoint } from "@/hooks/use-breakpoint";

15
src/components/application/table/table.tsx
View File

@@ -1,6 +1,11 @@
import type { ComponentPropsWithRef, HTMLAttributes, ReactNode, Ref, TdHTMLAttributes, ThHTMLAttributes } from "react";
import type { ComponentPropsWithRef, FC, HTMLAttributes, ReactNode, Ref, TdHTMLAttributes, ThHTMLAttributes } from "react";
import { createContext, isValidElement, useContext } from "react";
import { ArrowDown, ChevronSelectorVertical, Copy01, Edit01, HelpCircle, Trash01 } from "@untitledui/icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowDown, faSort, faCopy, faPenToSquare, faCircleQuestion, faTrash } from "@fortawesome/pro-duotone-svg-icons";
const Edit01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faPenToSquare} className={className} />;
const Copy01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faCopy} className={className} />;
const Trash01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faTrash} className={className} />;
import type {
CellProps as AriaCellProps,
ColumnProps as AriaColumnProps,
@@ -190,16 +195,16 @@ const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadP
{tooltip && (
<Tooltip title={tooltip} placement="top">
<TooltipTrigger className="cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
<HelpCircle className="size-4" />
<FontAwesomeIcon icon={faCircleQuestion} className="size-4" />
</TooltipTrigger>
</Tooltip>
)}
{state.allowsSorting &&
(state.sortDirection ? (
<ArrowDown className={cx("size-3 stroke-[3px] text-fg-quaternary", state.sortDirection === "ascending" && "rotate-180")} />
<FontAwesomeIcon icon={faArrowDown} className={cx("size-3 text-fg-quaternary", state.sortDirection === "ascending" && "rotate-180")} />
) : (
<ChevronSelectorVertical size={12} strokeWidth={3} className="text-fg-quaternary" />
<FontAwesomeIcon icon={faSort} className="text-fg-quaternary" />
))}
</AriaGroup>
)}