chore: migrate to oxfmt

.changeset/heavy-regions-shake.md

@@ -0,0 +1,86 @@
+---
+"@uifabricshared/foundation-composable": patch
+"@fluentui-react-native/experimental-appearance-additions": patch
+"@uifabricshared/theming-react-native": patch
+"@uifabricshared/foundation-settings": patch
+"@fluentui-react-native/experimental-activity-indicator": patch
+"@fluentui-react-native/experimental-native-font-metrics": patch
+"@uifabricshared/foundation-compose": patch
+"@fluentui-react-native/experimental-native-date-picker": patch
+"@uifabricshared/foundation-tokens": patch
+"@fluentui-react-native/eslint-config-rules": patch
+"@fluentui-react-native/themed-stylesheet": patch
+"@uifabricshared/themed-settings": patch
+"@fluentui-react-native/contextual-menu": patch
+"@uifabricshared/theme-registry": patch
+"@fluentui-react-native/vibrancy-view": patch
+"@fluentui-react-native/immutable-merge": patch
+"@fluentui-react-native/focus-trap-zone": patch
+"@fluentui-react-native/notification": patch
+"@uifabricshared/theming-ramp": patch
+"@fluentui-react-native/experimental-menu-button": patch
+"@fluentui-react-native/interactive-hooks": patch
+"@fluentui-react-native/persona-coin": patch
+"@fluentui-react-native/menu-button": patch
+"@fluentui-react-native/radio-group": patch
+"@fluentui-react-native/react-configs": patch
+"@fluentui-react-native/experimental-checkbox": patch
+"@fluentui-react-native/dropdown": patch
+"@fluentui-react-native/experimental-expander": patch
+"@fluentui-react-native/overflow": patch
+"@fluentui-react-native/composition": patch
+"@fluentui-react-native/merge-props": patch
+"@fluentui-react-native/use-styling": patch
+"@fluentui-react-native/android-theme": patch
+"@fluentui-react-native/default-theme": patch
+"@fluentui-react-native/theming-utils": patch
+"@fluentui-react-native/focus-zone": patch
+"@fluentui-react-native/pressable": patch
+"@fluentui-react-native/separator": patch
+"@fluentui-react-native/babel-config": patch
+"@fluentui-react-native/popover": patch
+"@fluentui-react-native/experimental-shimmer": patch
+"@fluentui-react-native/spinner": patch
+"@fluentui-react-native/tooltip": patch
+"@fluentui-react-native/memo-cache": patch
+"@fluentui-react-native/use-tokens": patch
+"@fluentui-react-native/theme-tokens": patch
+"@fluentui-react-native/checkbox": patch
+"@fluentui-react-native/jest-config": patch
+"@fluentui-react-native/experimental-avatar": patch
+"@fluentui-react-native/drawer": patch
+"@fluentui-react-native/experimental-shadow": patch
+"@fluentui-react-native/framework": patch
+"@fluentui-react-native/use-slots": patch
+"@fluentui-react-native/apple-theme": patch
+"@fluentui-react-native/theme-types": patch
+"@fluentui-react-native/win32-theme": patch
+"@fluentui-react-native/callout": patch
+"@fluentui-react-native/divider": patch
+"@fluentui-react-native/persona": patch
+"@fluentui-react-native/tablist": patch
+"@fluentui-react-native/kit-config": patch
+"@fluentui-react-native/experimental-stack": patch
+"@fluentui-react-native/use-slot": patch
+"@fluentui-react-native/avatar": patch
+"@fluentui-react-native/button": patch
+"@fluentui-react-native/switch": patch
+"@fluentui-react-native/badge": patch
+"@fluentui-react-native/input": patch
+"@fluentui-react-native/stack": patch
+"@fluentui-react-native/chip": patch
+"@fluentui-react-native/icon": patch
+"@fluentui-react-native/link": patch
+"@fluentui-react-native/menu": patch
+"@fluentui-react-native/text": patch
+"@fluentui-react-native/theme": patch
+"@fluentui-react-native/framework-base": patch
+"@fluentui/react-native": patch
+"@fluentui-react-native/adapters": patch
+"@fluentui-react-native/styling-utils": patch
+"@fluentui-react-native/tokens": patch
+"@fluentui-react-native/codemods": patch
+"@fluentui-react-native/scripts": patch
+---
+
+chore: migrate to `oxfmt`

.github/workflows/pr.yml

@@ -27,8 +27,8 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - name: Check prettier
-        run: yarn prettier
+      - name: Check formatting
+        run: yarn format
 
       - name: Run lint-lockfile
         run: yarn lint-lockfile

.oxfmtrc.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 140,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "ignorePatterns": [
+    "**/__fixtures__/**",
+    "**/__testfixtures__/**",
+    "**/lib-commonjs/**",
+    "**/dist/**",
+    "**/CHANGELOG.*",
+    "**/CODE_OF_CONDUCT.md",
+    "**/SECURITY.md"
+  ]
+}

CLAUDE.md

@@ -62,7 +62,7 @@ yarn clean      # Clean build artifacts
 
 ### Development Commands
 ```bash
-yarn prettier-fix     # Format code with Prettier
+yarn format:fix       # Format code with oxfmt
 yarn depcheck         # Check for unused dependencies across packages
 yarn depcheck-fix     # Fix depcheck issues automatically
 yarn align-deps       # Align React Native dependencies using @rnx-kit/align-deps
@@ -88,8 +88,8 @@ Individual packages use `fluentui-scripts` (in `/scripts/`) which provides:
   - Validates dependencies, scripts, entry points, and build configuration
 - `yarn test` - Jest tests (where applicable)
 - `yarn depcheck` - Check for unused dependencies
-- `yarn prettier` - Check code formatting
-- `yarn prettier-fix` - Fix code formatting
+- `yarn format` - Check code formatting
+- `yarn format:fix` - Fix code formatting
 
 ## TypeScript Configuration
 

README.md

@@ -120,14 +120,9 @@ After a successful yarn build, you can explore FluentUI Tester, our demo applica
 
 Note: If your repo is located on either your Desktop or Documents folder, you may encounter the error: "Watchman error... Operation not permitted". Clone it in a different directory to avoid Watchman permission issues.
 
-### Prettier
+### Formatting
 
-This repo is set up to run [Prettier](https://prettier.io/). To run Prettier in fix mode on the repo, run `yarn prettier-fix` at the root of the Repo.
-
-If you are using [Visual Studio Code as your editor, you can configure it to run Prettier on save. Prettier is a recommended extension for the repo. You can configure it to run by:
-
-1. Installing the Prettier extension for VSCode
-2. Going to Settings > Text Editor > Formatting > Check Format On Save
+This repo is set up to run [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html). To run oxfmt in fix mode on the repo, run `yarn prettier-fix` at the root of the Repo.
 
 ## Contributing
 

apps/component-generator/component-templates/ComponentTemplate/package.json

@@ -15,7 +15,7 @@
     "lint-package": "fluentui-scripts lint-package",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
   "repository": {

apps/fluent-tester/package.json

@@ -36,7 +36,7 @@
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
     "macos": "rnx-cli run --platform macos",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "start": "rnx-cli start",
     "windows": "react-native run-windows --arch x64 --sln windows/FluentTester.sln"
   },

apps/tester-core/package.json

@@ -28,7 +28,7 @@
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier"
+    "format": "fluentui-scripts format"
   },
   "jest": {
     "preset": "react-native"

apps/win32-81/package.json

@@ -27,7 +27,7 @@
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "run-win32": "rex-win32 --bundle index.win32 --component FluentTester --basePath ./dist --useDirectDebugger --windowTitle \"FluentUI Tester\" --pluginProps --debugBundlePath index --jsEngine v8",
     "run-win32-dev": "rex-win32 --bundle index --component FluentTester --basePath ./dist --useDirectDebugger --windowTitle \"FluentUI Tester\" --pluginProps --debugBundlePath index --jsEngine v8 --useFastRefresh",
     "run-win32-devmain": "rex-win32 --bundle index.win32 --component FluentTester --basePath ./dist --useDirectDebugger --windowTitle \"FluentUI Tester\" --pluginProps --debugBundlePath index --jsEngine v8 --useDevMain ",

apps/win32/package.json

@@ -27,7 +27,7 @@
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "run-win32": "rex-win32 --bundle index.win32 --component FluentTester --basePath ./dist --useDirectDebugger --windowTitle \"FluentUI Tester\" --pluginProps --debugBundlePath index --jsEngine v8",
     "run-win32-dev": "rex-win32 --bundle index --component FluentTester --basePath ./dist --useDirectDebugger --windowTitle \"FluentUI Tester\" --pluginProps --debugBundlePath index --jsEngine v8 --useFastRefresh",
     "run-win32-devmain": "rex-win32 --bundle index.win32 --component FluentTester --basePath ./dist --useDirectDebugger --windowTitle \"FluentUI Tester\" --pluginProps --debugBundlePath index --jsEngine v8 --useDevMain ",

lage.config.js

@@ -16,7 +16,7 @@ module.exports = {
       inputs: ['*', 'src/**/*', 'assets/**/*'],
       outputs: ['lib/**/*', 'lib-commonjs/**/*'],
     },
-    buildci: ['build-dual', 'test', 'lint', 'lint-package', 'check-publishing'],
+    buildci: ['build-dual', 'test', 'lint', 'lint-package', 'check-publishing', 'format'],
     bundle: {
       inputs: ['**/*', '!node_modules/**/*', '!dist/**/*', '!lib/**/*', '!lib-commonjs/**/*'],
       outputs: ['dist/**/*'],
@@ -32,12 +32,12 @@ module.exports = {
       inputs: ['**/*', '!node_modules/**/*', '!dist/**/*', '!lib/**/*', '!lib-commonjs/**/*'],
       outputs: [],
     },
-    prettier: {
+    format: {
       inputs: ['*', 'src/**/*'],
       outputs: [],
     },
-    ['pr-check']: ['build-dual', 'test', 'lint', 'check-publishing', 'align-deps', 'lint-package', 'lint-lockfile', 'prettier'],
-    ['prettier-fix']: [],
+    ['pr-check']: ['build-dual', 'test', 'lint', 'check-publishing', 'align-deps', 'lint-package', 'lint-lockfile', 'format'],
+    ['format:fix']: [],
     test: {
       dependsOn: ['build-dual'],
       inputs: [],

package.json

@@ -28,8 +28,8 @@
     "lint-package-fix": "cross-env FURN_FIX_MODE=true lage lint-package",
     "pr-check": "lage pr-check",
     "preinstall": "node ./scripts/src/preinstall/use-yarn-please.js",
-    "prettier": "lage prettier",
-    "prettier-fix": "cross-env FURN_FIX_MODE=true lage prettier",
+    "format": "lage format",
+    "format:fix": "cross-env FURN_FIX_MODE=true lage format",
     "test": "lage test",
     "test-links": "markdown-link-check"
   },
@@ -50,7 +50,7 @@
     "eslint-plugin-import": "^2.32.0",
     "lage": "^2.0.0",
     "markdown-link-check": "^3.8.7",
-    "prettier": "^2.4.1",
+    "oxfmt": "^0.35.0",
     "typescript": "^5.8.0",
     "zx": "^8.2.4"
   },

packages/codemods/package.json

@@ -31,7 +31,7 @@
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "test": "fluentui-scripts jest"
   },
   "dependencies": {

packages/components/Avatar/package.json

@@ -28,7 +28,7 @@
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },

packages/components/Avatar/src/AvatarTokens.mobile.ts

@@ -160,7 +160,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     mink: getColorProps('mink', t),
     platinum: getColorProps('platinum', t),
     anchor: getColorProps('anchor', t),
-  } as AvatarTokens);
+  }) as AvatarTokens;
 
 /**
  * A function which returns object of props depending on color and theme.

packages/components/Avatar/src/AvatarTokens.ts

@@ -167,7 +167,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     burgundy: getColorProps('burgundy', t),
     hotPink: getColorProps('hotPink', t),
     orchid: getColorProps('orchid', t),
-  } as AvatarTokens);
+  }) as AvatarTokens;
 
 /**
  * A function which returns object of props depending on color and theme.

packages/components/Avatar/src/AvatarTokens.win32.ts

@@ -167,7 +167,7 @@ export const defaultAvatarTokens: TokenSettings<AvatarTokens, Theme> = (t: Theme
     burgundy: getColorProps('burgundy', t),
     hotPink: getColorProps('hotPink', t),
     orchid: getColorProps('orchid', t),
-  } as AvatarTokens);
+  }) as AvatarTokens;
 
 /**
  * A function which returns object of props depending on color and theme.

packages/components/Badge/package.json

@@ -24,7 +24,7 @@
     "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package",
-    "prettier": "fluentui-scripts prettier",
+    "format": "fluentui-scripts format",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u"
   },

packages/components/Badge/src/Badge.styling.ts

@@ -87,20 +87,20 @@ export function getBadgePosition(tokens: BadgeCoreTokens) {
           top: tokens.top,
         }
       : tokens.bottom !== undefined
-      ? {
-          bottom: tokens.bottom,
-        }
-      : {};
+        ? {
+            bottom: tokens.bottom,
+          }
+        : {};
   const horizontalPosition =
     tokens.left !== undefined
       ? {
           left: tokens.left,
         }
       : tokens.right !== undefined
-      ? {
-          right: tokens.right,
-        }
-      : {};
+        ? {
+            right: tokens.right,
+          }
+        : {};
 
   return {
     ...verticalPosition,

packages/components/Badge/src/BadgeColorTokens.ts

@@ -294,4 +294,4 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (t: Theme) =>
         ),
       },
     },
-  } as BadgeTokens);
+  }) as BadgeTokens;

packages/components/Badge/src/BadgeColorTokens.win32.ts

@@ -326,4 +326,4 @@ export const defaultBadgeColorTokens: TokenSettings<BadgeTokens> = (t: Theme) =>
         ),
       },
     },
-  } as BadgeTokens);
+  }) as BadgeTokens;

packages/components/Badge/src/BadgeFontTokens.ts

@@ -12,4 +12,4 @@ export const badgeFontTokens: TokenSettings<BadgeTokens, Theme> = () =>
     extraLarge: {
       variant: 'secondaryStandard',
     },
-  } as BadgeTokens);
+  }) as BadgeTokens;

packages/components/Badge/src/BadgeFontTokens.win32.ts

@@ -15,4 +15,4 @@ export const badgeFontTokens: TokenSettings<BadgeTokens, Theme> = (t: Theme) =>
     extraLarge: {
       fontSize: globalTokens.font.size200,
     },
-  } as BadgeTokens);
+  }) as BadgeTokens;

packages/components/Badge/src/BadgeTokens.ts

@@ -72,4 +72,4 @@ export const defaultBadgeTokens: TokenSettings<BadgeTokens, Theme> = () =>
       left: globalTokens.sizeNone,
       right: undefined,
     },
-  } as BadgeTokens);
+  }) as BadgeTokens;

packages/components/Badge/src/CounterBadge/CounterBadgeColorTokens.android.ts

@@ -17,4 +17,4 @@ export const defaultCounterBadgeColorTokens: TokenSettings<CounterBadgeTokens> =
       color: t.colors.neutralForegroundLightStatic,
       borderColor: t.colors.strokeFocus1,
     },
-  } as CounterBadgeTokens);
+  }) as CounterBadgeTokens;

packages/components/Badge/src/CounterBadge/CounterBadgeColorTokens.ts

@@ -5,4 +5,4 @@ import type { CounterBadgeTokens } from './CounterBadge.types';
 export const defaultCounterBadgeColorTokens: TokenSettings<CounterBadgeTokens> = () =>
   ({
     // Android has separate tokens for CounterBadge, other platforms use Badge tokens.
-  } as CounterBadgeTokens);
+  }) as CounterBadgeTokens;

packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts

@@ -13,4 +13,4 @@ export const counterBadgeTokens: TokenSettings<CounterBadgeTokens> = () =>
       borderWidth: 0,
       borderRadius: globalTokens.corner.radiusCircular,
     },
-  } as CounterBadgeTokens);
+  }) as CounterBadgeTokens;

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts

@@ -51,7 +51,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = ()
       iconColor: globalTokens.color.grey38,
     },
     outOfOffice: getBadgeColor('berry'),
-  } as PresenceBadgeTokens);
+  }) as PresenceBadgeTokens;
 
 function getBadgeColor(color: string) {
   return {

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.mobile.ts

@@ -77,4 +77,4 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = (t
         iconColor: t.colors.neutralForeground3,
       },
     },
-  } as PresenceBadgeTokens);
+  }) as PresenceBadgeTokens;

packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts

@@ -58,7 +58,7 @@ export const defaultPresenceBadgeTokens: TokenSettings<PresenceBadgeTokens> = (t
       iconColor: isHighContrast(t) ? t.colors.neutralForeground3 : globalTokens.color.grey38,
     },
     outOfOffice: getBadgeColor('berry', t),
-  } as PresenceBadgeTokens);
+  }) as PresenceBadgeTokens;
 
 function getBadgeColor(color: string, t: Theme) {
   return {