chore(repo): fix file formatting (#26463)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

Files are unformatted.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

Files are formatted.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

e2e/angular/src/tailwind.test.ts

@@ -72,7 +72,7 @@ describe('Tailwind support', () => {
 
   const createTailwindConfigFile = (
     tailwindConfigFile = 'tailwind.config.js',
-    libSpacing: typeof spacing['projectVariant1']
+    libSpacing: (typeof spacing)['projectVariant1']
   ) => {
     const tailwindConfig = `const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
     const { join } = require('path');
@@ -98,7 +98,7 @@ describe('Tailwind support', () => {
 
   const updateTailwindConfig = (
     tailwindConfigPath: string,
-    projectSpacing: typeof spacing['root']
+    projectSpacing: (typeof spacing)['root']
   ) => {
     const tailwindConfig = readFile(tailwindConfigPath);
 
@@ -173,7 +173,7 @@ describe('Tailwind support', () => {
 
     const assertLibComponentStyles = (
       lib: string,
-      libSpacing: typeof spacing['root']
+      libSpacing: (typeof spacing)['root']
     ) => {
       const builtComponentContent = readFile(
         `dist/${lib}/esm2022/lib/foo.component.mjs`
@@ -327,7 +327,7 @@ describe('Tailwind support', () => {
 
     const assertAppComponentStyles = (
       outputPath: string,
-      appSpacing: typeof spacing['root']
+      appSpacing: (typeof spacing)['root']
     ) => {
       const mainBundlePath = listFiles(outputPath).find((file) =>
         /^main[\.-]/.test(file)

e2e/utils/create-project-utils.ts

@@ -65,7 +65,7 @@ const nxPackages = [
   `@nx/expo`,
 ] as const;
 
-type NxPackage = typeof nxPackages[number];
+type NxPackage = (typeof nxPackages)[number];
 
 /**
  * Sets up a new project in the temporary project path

graph/client/src/app/feature-projects/panels/search-depth.tsx

@@ -50,22 +50,22 @@ export const SearchDepth = memo(
             <button
               data-cy="decrement-depth-filter"
               title="Remove ancestor level"
-              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={decrementDepthFilter}
             >
               <MinusIcon className="h-4 w-4"></MinusIcon>
             </button>
             <span
               id="depthFilterValue"
               data-cy="depth-value"
-              className="block w-full flex-1 rounded-none border-t border-b border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="block w-full flex-1 rounded-none border-b border-t border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
             >
               {searchDepth}
             </span>
             <button
               data-cy="increment-depth-filter"
               title="Add ancestor level"
-              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
+              className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={incrementDepthFilter}
             >
               <PlusIcon className="h-4 w-4"></PlusIcon>

graph/client/src/app/feature-projects/panels/tracing-panel.tsx

@@ -28,7 +28,7 @@ export const TracingPanel = memo(
     return (
       <div className="mt-10 px-4">
         <div className="transition duration-200 ease-in-out group-hover:opacity-60">
-          <h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
+          <h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
             Tracing Path
           </h3>
           <div className="mb-3 flex cursor-pointer flex-row rounded-md border text-center text-xs dark:border-slate-600">
@@ -38,7 +38,7 @@ export const TracingPanel = memo(
                 algorithm === 'shortest'
                   ? 'border-blue-500 dark:border-sky-500'
                   : 'border-slate-300 dark:border-slate-600'
-              } flex-1 rounded-l-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
+              } flex-1 rounded-l-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
             >
               <span>Shortest</span>
             </button>
@@ -48,7 +48,7 @@ export const TracingPanel = memo(
                 algorithm === 'all'
                   ? 'border-blue-500 dark:border-sky-500'
                   : 'border-slate-300 dark:border-slate-600'
-              } flex-1 rounded-r-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
+              } flex-1 rounded-r-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
             >
               <span>All</span>
             </button>
@@ -66,7 +66,7 @@ export const TracingPanel = memo(
                   <span>{start}</span>
                 </div>
 
-                <div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
                   Reset
                   <span className="rounded-md p-1">
                     <XCircleIcon className="h-5 w-5"></XCircleIcon>
@@ -95,7 +95,7 @@ export const TracingPanel = memo(
                   <span>{end}</span>
                 </div>
 
-                <div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
                   Reset
                   <span className="rounded-md p-1">
                     <XCircleIcon className="h-5 w-5" />

graph/client/src/app/feature-tasks/task-list.tsx

@@ -87,11 +87,11 @@ function SubProjectList({
   return (
     <>
       {headerText !== '' ? (
-        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
+        <h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
           {headerText}
         </h3>
       ) : null}
-      <ul className="mt-2 -ml-3">
+      <ul className="-ml-3 mt-2">
         {sortedProjects.map((project) => {
           return (
             <ProjectListItem

graph/client/src/app/ui-tooltips/task-node-actions.tsx

@@ -9,9 +9,9 @@ export function TaskNodeActions(props: TaskNodeTooltipProps) {
   }, [props.id]);
   const project = props.id.split(':')[0];
   return (
-    <div className="overflow-auto w-full min-w-[350px] max-w-full rounded-md border border-slate-200 dark:border-slate-800 w-full">
+    <div className="w-full w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
       <div
-        className="flex justify-between items-center w-full bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
+        className="flex w-full items-center justify-between bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
         onClick={() => setIsOpen(!isOpen)}
         data-cy="inputs-accordion"
       >
@@ -53,11 +53,11 @@ function InputAccordion({ section, inputs }) {
   return [
     <li
       key={section}
-      className="flex justify-between items-center whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
+      className="flex items-center justify-between whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
       onClick={() => setIsOpen(!isOpen)}
       data-cy="input-section-entry"
     >
-      <span className="block truncate font-normal font-bold">{section}</span>
+      <span className="block truncate font-bold font-normal">{section}</span>
       <span>
         {isOpen ? (
           <ChevronUpIcon className="h-4 w-4" />

graph/ui-code-block/src/lib/json-code-block.tsx

@@ -47,7 +47,7 @@ export function JsonCodeBlock(props: JsonCodeBlockProps): JSX.Element {
   }, [copied]);
   return (
     <div className="code-block group relative w-full">
-      <div className="absolute top-0 right-0 z-10 flex">
+      <div className="absolute right-0 top-0 z-10 flex">
         <CopyToClipboard
           text={jsonString}
           onCopy={() => {
@@ -104,12 +104,12 @@ export function sourcesRenderer(
       }
       return (
         <span
-          className="flex group/line min-w-0 flex shrink-1"
+          className="group/line shrink-1 flex flex min-w-0"
           key={`code-group${idx}`}
         >
           <span>{element}</span>
           {sourceElement && (
-            <span className="opacity-0 min-w-0 flex shrink-1 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-2">
+            <span className="shrink-1 inline flex min-w-0 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
               {sourceElement}
             </span>
           )}

graph/ui-components/src/lib/debounced-text-input.tsx

@@ -75,7 +75,7 @@ export function DebouncedTextInput({
           data-cy="textFilterReset"
           type="reset"
           onClick={resetClicked}
-          className="absolute top-1 right-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
+          className="absolute right-1 top-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
         >
           <BackspaceIcon className="h-5 w-5"></BackspaceIcon>
         </button>

graph/ui-components/src/lib/dropdown.tsx

@@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
   const { className, children, ...rest } = props;
   return (
     <select
-      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white pl-4 pr-8 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
+      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white py-2 pl-4 pr-8 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
       {...rest}
     >
       {children}

graph/ui-project-details/src/lib/pill.tsx

@@ -17,9 +17,9 @@ export function Pill({
         color === 'grey' &&
           'bg-slate-400/10 text-slate-600 ring-slate-400/40 dark:text-slate-400 dark:ring-slate-400/30',
         color === 'green' &&
-          'dark:bg-green-500/10 bg-green-400/10 dark:text-green-400 text-green-500 dark:ring-green-500/20 ring-green-500/40',
+          'bg-green-400/10 text-green-500 ring-green-500/40 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20',
         color === 'yellow' &&
-          'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 dark:ring-yellow-500/20 ring-yellow-500/40'
+          'bg-yellow-50 text-yellow-600 ring-yellow-500/40 dark:bg-yellow-900/30 dark:text-yellow-400 dark:ring-yellow-500/20'
       )}
     >
       {text}

graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx

@@ -43,7 +43,7 @@ export function FadingCollapsible({ children }: { children: ReactNode }) {
       </div>
       {isCollapsible && (
         <div
-          className="h-4 w-4 absolute bottom-2 right-1/2 cursor-pointer"
+          className="absolute bottom-2 right-1/2 h-4 w-4 cursor-pointer"
           onClick={(e) => {
             e.stopPropagation();
             toggleCollapsed();

graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx

@@ -6,7 +6,7 @@ export function TooltipTriggerText({
   children: string | ReactNode;
 }) {
   return (
-    <span className="underline cursor-help underline-offset-8 decoration-2 decoration-dotted decoration-slate-700/50 dark:decoration-slate-400/50">
+    <span className="cursor-help underline decoration-slate-700/50 decoration-dotted decoration-2 underline-offset-8 dark:decoration-slate-400/50">
       {children}
     </span>
   );

graph/ui-theme/src/lib/theme-panel.stories.tsx

@@ -5,7 +5,7 @@ const meta: Meta<typeof ThemePanel> = {
   component: ThemePanel,
   decorators: [
     (Story) => (
-      <div className="bg-white dark:bg-slate-800 block h-auto w-auto border-2 px-8 py-4">
+      <div className="block h-auto w-auto border-2 bg-white px-8 py-4 dark:bg-slate-800">
         <div className="flex justify-end">
           <Story className="justify-items-end" />
         </div>

graph/ui-tooltips/src/lib/project-edge-tooltip.tsx

@@ -39,7 +39,7 @@ export function ProjectEdgeNodeTooltip({
                 key={fileDep.fileName}
                 className={`whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300 ${
                   fileClickCallback !== undefined
-                    ? 'hover:underline hover:cursor-pointer'
+                    ? 'hover:cursor-pointer hover:underline'
                     : ''
                 }`}
                 onClick={

graph/ui-tooltips/src/lib/project-node-tooltip.tsx

@@ -26,10 +26,10 @@ export function ProjectNodeToolTip({
 }: ProjectNodeToolTipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4">
+      <h4 className="flex items-center justify-between gap-4">
         <div className="flex items-center">
           <Tag className="mr-3">{type}</Tag>
-          <span className="font-mono mr-3">{id}</span>
+          <span className="mr-3 font-mono">{id}</span>
         </div>
         {openConfigCallback && (
           <button

graph/ui-tooltips/src/lib/task-node-tooltip.tsx

@@ -28,11 +28,11 @@ export function TaskNodeTooltip({
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4 className="flex justify-between items-center gap-4 mb-3">
+      <h4 className="mb-3 flex items-center justify-between gap-4">
         <div className="flex grow items-center justify-between">
           <div className="flex items-center">
             <Tag className="mr-3">{executor}</Tag>
-            <span className="font-mono mr-3">{id}</span>
+            <span className="mr-3 font-mono">{id}</span>
           </div>
           {openConfigCallback && (
             <button

nx-dev/feature-ai/src/lib/feed-container.tsx

@@ -135,7 +135,7 @@ export function FeedContainer(): JSX.Element {
 
                 <div
                   className={cx(
-                    'fixed bottom-0 left0 right-0 w-full py-4 px-4 lg:py-6 lg:px-0',
+                    'left0 fixed bottom-0 right-0 w-full px-4 py-4 lg:px-0 lg:py-6',
                     'bg-gradient-to-t from-white via-white/75 dark:from-slate-900 dark:via-slate-900/75'
                   )}
                 >

nx-dev/feature-ai/src/lib/feed/feed-question.tsx

@@ -1,7 +1,7 @@
 export function FeedQuestion({ content }: { content: string }) {
   return (
-    <div className="flex justify-end w-full">
-      <p className="px-4 py-2 bg-blue-500 dark:bg-sky-500 selection:bg-sky-900 rounded-lg text-white text-base whitespace-pre-wrap break-words">
+    <div className="flex w-full justify-end">
+      <p className="whitespace-pre-wrap break-words rounded-lg bg-blue-500 px-4 py-2 text-base text-white selection:bg-sky-900 dark:bg-sky-500">
         {content}
       </p>
     </div>

nx-dev/feature-ai/src/lib/feed/feed.tsx

@@ -10,12 +10,12 @@ export function Feed({
   onFeedback: (statement: 'bad' | 'good', chatItemUid: string) => void;
 }) {
   return (
-    <div className="flow-root my-12">
+    <div className="my-12 flow-root">
       <ul role="list" className="-mb-8 space-y-12">
         {activity.map((activityItem, activityItemIdx) => (
           <li
             key={[activityItem.role, activityItem.id].join('-')}
-            className="pt-12 relative flex items-start space-x-3 feed-item"
+            className="feed-item relative flex items-start space-x-3 pt-12"
           >
             {activityItem.role === 'assistant' ? (
               <FeedAnswer

nx-dev/feature-ai/src/lib/loading-state.tsx

@@ -1,8 +1,8 @@
 export function LoadingState(): JSX.Element {
   return (
-    <div className="w-full flex items-center justify-center px-4 gap-4 py-2 text-blue-500 dark:text-sky-500 transition ease-in-out duration-150">
+    <div className="flex w-full items-center justify-center gap-4 px-4 py-2 text-blue-500 transition duration-150 ease-in-out dark:text-sky-500">
       <svg
-        className="animate-spin h-5 w-5"
+        className="h-5 w-5 animate-spin"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         stroke="currentColor"

nx-dev/feature-ai/src/lib/prompt.tsx

@@ -62,7 +62,7 @@ export function Prompt({
     <form
       ref={formRef}
       onSubmit={handleSubmit}
-      className="relative flex gap-2 max-w-3xl mx-auto py-0 px-2 shadow-lg rounded-md border border-slate-300 bg-white dark:border-slate-900 dark:bg-slate-700"
+      className="relative mx-auto flex max-w-3xl gap-2 rounded-md border border-slate-300 bg-white px-2 py-0 shadow-lg dark:border-slate-900 dark:bg-slate-700"
     >
       <div
         className={cx(
@@ -104,7 +104,7 @@ export function Prompt({
           </Button>
         )}
       </div>
-      <div className="overflow-y-auto w-full h-full max-h-[300px]">
+      <div className="h-full max-h-[300px] w-full overflow-y-auto">
         <Textarea
           onKeyDown={(event) => {
             if (
@@ -123,7 +123,7 @@ export function Prompt({
           name="query"
           maxLength={500}
           disabled={isGenerating}
-          className="block w-full p-0 resize-none bg-transparent text-sm placeholder-slate-500 pl-2 py-[1.3rem] focus-within:outline-none focus:placeholder-slate-400 dark:focus:placeholder-slate-300 dark:text-white focus:outline-none focus:ring-0 border-none disabled:cursor-not-allowed"
+          className="block w-full resize-none border-none bg-transparent p-0 py-[1.3rem] pl-2 text-sm placeholder-slate-500 focus-within:outline-none focus:placeholder-slate-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed dark:text-white dark:focus:placeholder-slate-300"
           placeholder="How does caching work?"
           rows={1}
         />
@@ -134,7 +134,7 @@ export function Prompt({
           size="small"
           type="submit"
           disabled={isGenerating}
-          className="self-end w-12 h-12 disabled:cursor-not-allowed"
+          className="h-12 w-12 self-end disabled:cursor-not-allowed"
         >
           <div hidden className="sr-only">
             Ask

nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx

@@ -2,7 +2,7 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline';
 
 export function ActivityLimitReached(): JSX.Element {
   return (
-    <div className="rounded-md bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700 ring-1 p-4 shadow-sm">
+    <div className="rounded-md bg-slate-50 p-4 shadow-sm ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700">
       <div className="flex">
         <div className="flex-shrink-0">
           <InformationCircleIcon