chore(prettier): add tailwind prettier plugin [EE-4809] (#8221)

* add prettier plugin * apply tailwind prettier formatting
2025-07-25 08:19:40 +02:00 · 2023-02-13 10:04:24 +13:00 · 2023-02-13 10:04:24 +13:00 · 58d66d3142
commit 58d66d3142
parent 9f6702d0b8
226 changed files with 704 additions and 699 deletions
--- a/app/react/components/Alert/Alert.tsx
+++ b/app/react/components/Alert/Alert.tsx
@ -56,7 +56,7 @@ function AlertContainer({
  children,
 }: PropsWithChildren<{ className?: string }>) {
  return (
-    <div className={clsx('border-2 border-solid rounded-md', 'p-3', className)}>
+    <div className={clsx('rounded-md border-2 border-solid', 'p-3', className)}>
      {children}
    </div>
  );
@ -68,7 +68,7 @@ function AlertHeader({
 }: PropsWithChildren<{ className?: string }>) {
  return (
    <h4
-      className={clsx('text-base', 'flex gap-2 items-center !m-0', className)}
+      className={clsx('text-base', '!m-0 flex items-center gap-2', className)}
    >
      {children}
    </h4>
--- a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
+++ b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx
@ -35,7 +35,7 @@ export function BEFeatureIndicator({
      rel="noopener noreferrer"
    >
      {children}
-      {showIcon && <Icon icon={Briefcase} className="mr-1 be-indicator-icon" />}
+      {showIcon && <Icon icon={Briefcase} className="be-indicator-icon mr-1" />}
      <span className="be-indicator-label break-words">
        Business Edition Feature
      </span>
--- a/app/react/components/BadgeIcon/BadgeIcon.tsx
+++ b/app/react/components/BadgeIcon/BadgeIcon.tsx
@ -15,10 +15,10 @@ export function BadgeIcon({ icon, size = '3xl' }: Props) {
      className={clsx(
        sizeClasses,
        `badge-icon
-      bg-blue-3 text-blue-8
-      th-dark:bg-gray-9 th-dark:text-blue-3
-      rounded-full
-      inline-flex items-center justify-center
+      inline-flex items-center
+      justify-center rounded-full
+      bg-blue-3
+      text-blue-8 th-dark:bg-gray-9 th-dark:text-blue-3
   `
      )}
    >
--- a/app/react/components/BoxSelector/BoxOption.module.css
+++ b/app/react/components/BoxSelector/BoxOption.module.css
@ -4,8 +4,8 @@

 .root label {
  @apply border border-solid;
-  @apply bg-gray-2 border-gray-5 text-black;
-  @apply th-dark:bg-gray-iron-10 th-dark:border-gray-neutral-8 th-dark:text-white;
+  @apply border-gray-5 bg-gray-2 text-black;
+  @apply th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:text-white;
  @apply th-highcontrast:text-white;

  font-weight: normal;
@ -42,9 +42,9 @@
 }

 .root input:checked + label {
-  @apply bg-blue-2 border-blue-6;
-  @apply th-dark:bg-blue-10 th-dark:border-blue-7;
-  @apply th-highcontrast:bg-blue-10 th-highcontrast:border-blue-7;
+  @apply border-blue-6 bg-blue-2;
+  @apply th-dark:border-blue-7 th-dark:bg-blue-10;
+  @apply th-highcontrast:border-blue-7 th-highcontrast:bg-blue-10;

  border-radius: 8px;
  padding: 15px;
--- a/app/react/components/BoxSelector/BoxOption.tsx
+++ b/app/react/components/BoxSelector/BoxOption.tsx
@ -51,7 +51,7 @@ export function BoxOption<T extends Value>({
        {!disabled && (
          <div
            className={clsx(
-              'absolute top-4 right-4 h-4 w-4 rounded-full border border-solid border-blue-8 text-white font-bold flex items-center justify-center',
+              'absolute top-4 right-4 flex h-4 w-4 items-center justify-center rounded-full border border-solid border-blue-8 font-bold text-white',
              {
                'bg-white': !selected,
                'bg-blue-8': selected,
--- a/app/react/components/BoxSelector/BoxSelectorItem.tsx
+++ b/app/react/components/BoxSelector/BoxSelectorItem.tsx
@ -63,8 +63,8 @@ export function BoxSelectorItem<T extends Value>({
        <div
          className={clsx('flex gap-2', {
            'opacity-30': limitedToBE,
-            'flex-col justify-between h-full': !slim,
-            'items-center slim': slim,
+            'h-full flex-col justify-between': !slim,
+            'slim items-center': slim,
          })}
        >
          <div
--- a/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
+++ b/app/react/components/BoxSelector/LimitedToBeIndicator.tsx
@ -16,7 +16,7 @@ export function LimitedToBeIndicator({ featureId, tooltipId }: Props) {

  return (
    <div className="absolute left-0 top-0 w-full">
-      <div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
+      <div className="mx-auto flex max-w-fit items-center gap-1 rounded-b-lg bg-warning-4 py-1 px-3 text-sm">
        <a href={url} target="_blank" rel="noopener noreferrer">
          <span className="text-warning-9">BE Feature</span>
        </a>
--- a/app/react/components/BoxSelector/LogoIcon.tsx
+++ b/app/react/components/BoxSelector/LogoIcon.tsx
@ -6,8 +6,8 @@ export function LogoIcon({ icon }: Props) {
  return (
    <div
      className={`
-   text-6xl h-14 w-14
-   inline-flex items-center justify-center
+   inline-flex h-14 w-14
+   items-center justify-center text-6xl
 `}
    >
      <Icon icon={icon} className="!flex" />
--- a/app/react/components/DashboardItem/DashboardItem.tsx
+++ b/app/react/components/DashboardItem/DashboardItem.tsx
@ -14,16 +14,16 @@ export function DashboardItem({ value, icon, type, children }: Props) {
  return (
    <div
      className={clsx(
-        'border-solid rounded-lg border p-3',
-        'bg-gray-2 hover:bg-blue-2 border-gray-5 hover:border-blue-7',
-        'th-dark:bg-gray-iron-10 th-dark:hover:bg-gray-10 th-dark:border-gray-neutral-8 th-dark:hover:border-blue-8',
-        'th-highcontrast:bg-black th-highcontrast:hover:bg-gray-11 th-highcontrast:border-white th-highcontrast:hover:border-blue-8'
+        'rounded-lg border border-solid p-3',
+        'border-gray-5 bg-gray-2 hover:border-blue-7 hover:bg-blue-2',
+        'th-dark:border-gray-neutral-8 th-dark:bg-gray-iron-10 th-dark:hover:border-blue-8 th-dark:hover:bg-gray-10',
+        'th-highcontrast:border-white th-highcontrast:bg-black th-highcontrast:hover:border-blue-8 th-highcontrast:hover:bg-gray-11'
      )}
    >
      <div className="flex items-center" aria-label={type}>
        <div
          className={clsx(
-            'icon-badge text-2xl mr-4 !p-2',
+            'icon-badge mr-4 !p-2 text-2xl',
            'bg-blue-3 text-blue-8',
            'th-dark:bg-blue-3 th-dark:text-blue-8',
            'th-highcontrast:bg-blue-3 th-highcontrast:text-blue-8'
@ -35,7 +35,7 @@ export function DashboardItem({ value, icon, type, children }: Props) {
        <div className="flex flex-col justify-around">
          <div
            className={clsx(
-              'font-medium text-2xl',
+              'text-2xl font-medium',
              'text-gray-9',
              'th-dark:text-white',
              'th-highcontrast:text-white'
--- a/app/react/components/DetailsTable/DetailsRow.tsx
+++ b/app/react/components/DetailsTable/DetailsRow.tsx
@ -16,7 +16,7 @@ export function DetailsRow({
 }: Props) {
  return (
    <tr className={className}>
-      <td className={clsx(colClassName, '!break-normal min-w-[150px]')}>
+      <td className={clsx(colClassName, 'min-w-[150px] !break-normal')}>
        {label}
      </td>
      {children && (
--- a/app/react/components/EnvironmentStatusBadgeItem.tsx
+++ b/app/react/components/EnvironmentStatusBadgeItem.tsx
@ -20,7 +20,7 @@ export function EnvironmentStatusBadgeItem({
    <span
      className={clsx(
        'flex items-center gap-1',
-        'border-2 border-solid rounded',
+        'rounded border-2 border-solid',
        'w-fit py-px px-1',
        'text-xs font-semibold text-gray-7',
        {
--- a/app/react/components/LinkButton.tsx
+++ b/app/react/components/LinkButton.tsx
@ -18,7 +18,7 @@ export function LinkButton({
      title={title}
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...props}
-      className={clsx(className, '!m-0 no-link')}
+      className={clsx(className, 'no-link !m-0')}
      disabled={disabled}
      as={disabled ? 'span' : Link}
      props={{
--- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
+++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
@ -17,7 +17,7 @@ export function Breadcrumbs({ breadcrumbs }: Props) {
    : [breadcrumbs];

  return (
-    <div className="text-xs font-medium text-gray-7 th-dark:text-gray-5 th-highcontrast:text-white space-x-2">
+    <div className="space-x-2 text-xs font-medium text-gray-7 th-highcontrast:text-white th-dark:text-gray-5">
      {breadcrumbsArray.map((crumb, index) => (
        <Fragment key={index}>
          <span>{renderCrumb(crumb)}</span>
@ -42,7 +42,7 @@ function renderCrumb(crumb: Crumb | string) {
      <Link
        to={crumb.link}
        params={crumb.linkParams}
-        className="text-blue-9 hover:underline hover:text-blue-11 th-dark:text-blue-7 th-dark:hover:text-blue-9 th-highcontrast:text-blue-5"
+        className="text-blue-9 hover:text-blue-11 hover:underline th-highcontrast:text-blue-5 th-dark:text-blue-7 th-dark:hover:text-blue-9"
      >
        {crumb.label}
      </Link>
--- a/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
+++ b/app/react/components/PageHeader/ContextHelp/ContextHelp.tsx
@ -18,7 +18,7 @@ export function ContextHelp() {
        className={clsx(
          headerStyles.menuIcon,
          'menu-icon',
-          'icon-badge text-lg !p-2 mr-1',
+          'icon-badge mr-1 !p-2 text-lg',
          'text-gray-8',
          'th-dark:text-gray-warm-7'
        )}
--- a/app/react/components/PageHeader/HeaderTitle.tsx
+++ b/app/react/components/PageHeader/HeaderTitle.tsx
@ -16,7 +16,7 @@ export function HeaderTitle({ title, children }: PropsWithChildren<Props>) {
  return (
    <div className="flex justify-between whitespace-normal pt-3">
      <div className="flex items-center gap-2">
-        <div className="font-medium text-2xl text-gray-11 th-dark:text-white th-highcontrast:text-white">
+        <div className="text-2xl font-medium text-gray-11 th-highcontrast:text-white th-dark:text-white">
          {title}
        </div>
        {children && <span>{children}</span>}
--- a/app/react/components/PageHeader/NotificationsMenu.tsx
+++ b/app/react/components/PageHeader/NotificationsMenu.tsx
@ -65,7 +65,7 @@ export function NotificationsMenu() {
        <div
          className={clsx(
            headerStyles.menuIcon,
-            'icon-badge text-lg !p-2 mr-1',
+            'icon-badge mr-1 !p-2 text-lg',
            'text-gray-8',
            'th-dark:text-gray-warm-7'
          )}
--- a/app/react/components/PageHeader/UserMenu.tsx
+++ b/app/react/components/PageHeader/UserMenu.tsx
@ -29,7 +29,7 @@ export function UserMenu() {
        <div
          className={clsx(
            styles.menuIcon,
-            'icon-badge text-lg !p-2 mr-1',
+            'icon-badge mr-1 !p-2 text-lg',
            'text-gray-8',
            'th-dark:text-gray-warm-7'
          )}
--- a/app/react/components/PaginationControls/PageInput.tsx
+++ b/app/react/components/PaginationControls/PageInput.tsx
@ -25,7 +25,7 @@ export function PageInput({ onChange, totalPages }: Props) {

  return (
    <form className="mx-3" onSubmit={handleSubmit}>
-      <label className="m-0 mr-2 font-normal small" htmlFor="go-to-page-input">
+      <label className="small m-0 mr-2 font-normal" htmlFor="go-to-page-input">
        Go to page
      </label>
      <Input
--- a/app/react/components/StatsItem.tsx
+++ b/app/react/components/StatsItem.tsx
@ -16,11 +16,11 @@ export function StatsItem({
  iconClass,
 }: PropsWithChildren<Props>) {
  return (
-    <span className="flex gap-1 items-center">
+    <span className="flex items-center gap-1">
      <Icon className={clsx('icon icon-sm', iconClass)} icon={icon} />
      <span>{value}</span>
      {children && (
-        <span className="ml-1 flex gap-2 items-center">{children}</span>
+        <span className="ml-1 flex items-center gap-2">{children}</span>
      )}
    </span>
  );
--- a/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
+++ b/app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx
@ -40,7 +40,7 @@ export function TooltipWithChildren({
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    <div className={styles.tooltipContainer} onClick={onClickHandler}>
      {(heading || (BEFeatureID && limitedToBE)) && (
-        <div className="w-full mb-3 inline-flex justify-between">
+        <div className="mb-3 inline-flex w-full justify-between">
          <span>{heading}</span>
          {BEFeatureID && limitedToBE && (
            <a
--- a/app/react/components/ViewLoading/ViewLoading.tsx
+++ b/app/react/components/ViewLoading/ViewLoading.tsx
@ -21,7 +21,7 @@ export function ViewLoading({ message }: Props) {
      {message && (
        <span className={styles.message}>
          {message}
-          <Icon icon={Settings} className="animate-spin-slow !ml-1" />
+          <Icon icon={Settings} className="!ml-1 animate-spin-slow" />
        </span>
      )}
    </div>
--- a/app/react/components/buttons/LoadingButton.tsx
+++ b/app/react/components/buttons/LoadingButton.tsx
@ -39,7 +39,7 @@ function loadingButtonIcon(isLoading: boolean, defaultIcon: ReactNode) {
  return (
    <Icon
      icon={Loader2}
-      className="animate-spin-slow ml-1"
+      className="ml-1 animate-spin-slow"
      aria-label="loading"
    />
  );
--- a/app/react/components/datatables/NestedTable.css
+++ b/app/react/components/datatables/NestedTable.css
@ -1,5 +1,5 @@
 .inner-datatable {
-  @apply border border-solid rounded-md border-gray-5 th-dark:border-gray-9;
+  @apply rounded-md border border-solid border-gray-5 th-dark:border-gray-9;
  overflow: hidden;
 }

--- a/app/react/components/datatables/SearchBar.tsx
+++ b/app/react/components/datatables/SearchBar.tsx
@ -32,7 +32,7 @@ export function SearchBar({

  return (
    <div
-      className={clsx('searchBar items-center flex min-w-[90px]', className)}
+      className={clsx('searchBar flex min-w-[90px] items-center', className)}
    >
      <Search className="searchIcon lucide shrink-0" />
      <input
--- a/app/react/components/datatables/Table.tsx
+++ b/app/react/components/datatables/Table.tsx
@ -23,7 +23,7 @@ function MainComponent({
    <div className="table-responsive">
      <table
        className={clsx(
-          'table table-hover table-filters nowrap-cells',
+          'table-hover table-filters nowrap-cells table',
          className
        )}
        role={role}
--- a/app/react/components/datatables/TableContent.tsx
+++ b/app/react/components/datatables/TableContent.tsx
@ -41,7 +41,7 @@ function TableContentOneColumn({ children }: PropsWithChildren<unknown>) {
  // using MAX_SAFE_INTEGER to make sure the single column will be the size of the table
  return (
    <tr>
-      <td colSpan={Number.MAX_SAFE_INTEGER} className="text-center text-muted">
+      <td colSpan={Number.MAX_SAFE_INTEGER} className="text-muted text-center">
        {children}
      </td>
    </tr>
--- a/app/react/components/datatables/TableHeaderCell.tsx
+++ b/app/react/components/datatables/TableHeaderCell.tsx
@ -28,7 +28,7 @@ export function TableHeaderCell({
 }: Props) {
  return (
    <th role={role} style={style} className={className}>
-      <div className="flex flex-row flex-nowrap h-full items-center gap-1">
+      <div className="flex h-full flex-row flex-nowrap items-center gap-1">
        <SortWrapper
          canSort={canSort}
          onClick={onSortClick}
@ -66,12 +66,12 @@ function SortWrapper({
      type="button"
      onClick={() => onClick(!isSortedDesc)}
      className={clsx(
-        '!bg-transparent w-full h-full !ml-0 !px-0 border-none focus:border-none',
+        '!ml-0 h-full w-full border-none !bg-transparent !px-0 focus:border-none',
        styles.sortable,
        isSorted && styles.sortingActive
      )}
    >
-      <div className="flex flex-row justify-start items-center w-full h-full">
+      <div className="flex h-full w-full flex-row items-center justify-start">
        {children}
        <TableHeaderSortIcons
          sorted={isSorted}
@ -97,7 +97,7 @@ export function TableColumnHeaderAngular({
  isSortedDesc = true,
 }: TableColumnHeaderAngularProps) {
  return (
-    <div className="flex flex-row flex-nowrap h-full">
+    <div className="flex h-full flex-row flex-nowrap">
      <SortWrapper
        canSort={canSort}
        isSorted={!!isSorted}
--- a/app/react/components/datatables/TableHeaderSortIcons.tsx
+++ b/app/react/components/datatables/TableHeaderSortIcons.tsx
@ -12,7 +12,7 @@ interface Props {

 export function TableHeaderSortIcons({ sorted, descending, className }: Props) {
  return (
-    <div className="flex flex-row no-wrap w-min-max align-middle">
+    <div className="no-wrap w-min-max flex flex-row align-middle">
      <SortDownIcon
        className={clsx(
          className,
--- a/app/react/components/datatables/TableTitle.tsx
+++ b/app/react/components/datatables/TableTitle.tsx
@ -19,7 +19,7 @@ export function TableTitle({
 }: PropsWithChildren<Props>) {
  return (
    <div className={clsx('toolBar flex-col', className)}>
-      <div className="flex gap-1 p-0 w-full items-center">
+      <div className="flex w-full items-center gap-1 p-0">
        <div className="toolBarTitle">
          {icon && (
            <div className="widget-icon">
--- a/app/react/components/form-components/FormControl/FormControl.tsx
+++ b/app/react/components/form-components/FormControl/FormControl.tsx
@ -32,7 +32,7 @@ export function FormControl({
    <div
      className={clsx(
        'form-group',
-        'after:content-[""] after:clear-both after:table' // to fix issues with float
+        'after:clear-both after:table after:content-[""]' // to fix issues with float
      )}
    >
      <label
--- a/app/react/components/form-components/FormSection/FormSection.tsx
+++ b/app/react/components/form-components/FormSection/FormSection.tsx
@ -25,7 +25,7 @@ export function FormSection({
            id={`foldingButton${title}`}
            type="button"
            onClick={() => setIsExpanded(!isExpanded)}
-            className="border-0 mx-2 !ml-0 bg-transparent inline-flex justify-center items-center w-2"
+            className="mx-2 !ml-0 inline-flex w-2 items-center justify-center border-0 bg-transparent"
          >
            <Icon
              icon={isExpanded ? ChevronDown : ChevronRight}
--- a/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
+++ b/app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx
@ -12,7 +12,7 @@ export function FormSectionTitle({
    return (
      <label
        htmlFor={htmlFor}
-        className="col-sm-12 form-section-title cursor-pointer flex items-center"
+        className="col-sm-12 form-section-title flex cursor-pointer items-center"
      >
        {children}
      </label>
--- a/app/react/components/form-components/Slider/Slider.module.css
+++ b/app/react/components/form-components/Slider/Slider.module.css
@ -7,7 +7,7 @@
 }

 .slider :global .rc-slider-handle {
-  @apply border-blue-8 border-2;
+  @apply border-2 border-blue-8;
  width: 24px;
  height: 24px;
  margin-top: -8px;
--- a/app/react/components/form-components/SwitchField/SwitchField.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.tsx
@ -42,7 +42,7 @@ export function SwitchField({
  return (
    <label className={clsx(styles.root, fieldClass)}>
      <span
-        className={clsx('text-left space-right control-label !p-0', labelClass)}
+        className={clsx('space-right control-label !p-0 text-left', labelClass)}
      >
        {label}
        {tooltip && (
--- a/app/react/components/modals/Modal/CloseButton.tsx
+++ b/app/react/components/modals/Modal/CloseButton.tsx
@ -15,7 +15,7 @@ export function CloseButton({
      className={clsx(
        styles.close,
        className,
-        'absolute top-4 right-5 close-button'
+        'close-button absolute top-4 right-5'
      )}
      onClick={() => onClose()}
    >
--- a/app/react/components/modals/Modal/Modal.tsx
+++ b/app/react/components/modals/Modal/Modal.tsx
@ -39,7 +39,7 @@ export function Modal({
        isOpen
        className={clsx(
          styles.overlay,
-          'flex items-center justify-center z-50'
+          'z-50 flex items-center justify-center'
        )}
        onDismiss={onDismiss}
        role="dialog"
@ -47,7 +47,7 @@ export function Modal({
        <DialogContent
          aria-label={ariaLabel}
          aria-labelledby={ariaLabelledBy}
-          className={clsx(styles.modalDialog, 'p-0 bg-transparent', {
+          className={clsx(styles.modalDialog, 'bg-transparent p-0', {
            'w-[450px]': size === 'md',
            'w-[700px]': size === 'lg',
          })}
--- a/app/react/components/modals/Modal/ModalFooter.tsx
+++ b/app/react/components/modals/Modal/ModalFooter.tsx
@ -6,6 +6,6 @@ export function ModalFooter({ children }: PropsWithChildren<unknown>) {
  useModalContext();

  return (
-    <div className="flex justify-end gap-3 [&>*]:flex-1 pt-3">{children}</div>
+    <div className="flex justify-end gap-3 pt-3 [&>*]:flex-1">{children}</div>
  );
 }
--- a/app/react/components/modals/Modal/ModalHeader.tsx
+++ b/app/react/components/modals/Modal/ModalHeader.tsx
@ -24,7 +24,7 @@ export function ModalHeader({ title, modalType }: Props) {
        />
      )}
      {typeof title === 'string' ? (
-        <h5 className="font-bold m-0">{title}</h5>
+        <h5 className="m-0 font-bold">{title}</h5>
      ) : (
        title
      )}