feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)

docs/developer_docs_versioned_docs/version-6.1.0/components/ui/progressbar.mdx

@@ -33,79 +33,66 @@ Progress bar component for displaying completion status. Supports line, circle,
 <StoryWithControls
   component="ProgressBar"
   props={{
-  percent: 75,
-  status: "normal",
-  type: "line",
-  striped: false,
-  showInfo: true,
-  strokeLinecap: "round"
-}}
+    percent: 75,
+    status: 'normal',
+    type: 'line',
+    striped: false,
+    showInfo: true,
+    strokeLinecap: 'round',
+  }}
   controls={[
-  {
-    name: "percent",
-    label: "Percent",
-    type: "number",
-    description: "Completion percentage (0-100)."
-  },
-  {
-    name: "status",
-    label: "Status",
-    type: "select",
-    options: [
-      "normal",
-      "success",
-      "exception",
-      "active"
-    ],
-    description: "Current status of the progress bar."
-  },
-  {
-    name: "type",
-    label: "Type",
-    type: "select",
-    options: [
-      "line",
-      "circle",
-      "dashboard"
-    ],
-    description: "Display type: line, circle, or dashboard gauge."
-  },
-  {
-    name: "striped",
-    label: "Striped",
-    type: "boolean",
-    description: "Whether to show striped animation on the bar."
-  },
-  {
-    name: "showInfo",
-    label: "Show Info",
-    type: "boolean",
-    description: "Whether to show the percentage text."
-  },
-  {
-    name: "strokeLinecap",
-    label: "Stroke Linecap",
-    type: "select",
-    options: [
-      "round",
-      "butt",
-      "square"
-    ],
-    description: "Shape of the progress bar endpoints."
-  },
-  {
-    name: "strokeColor",
-    label: "Stroke Color",
-    type: "color",
-    description: "Color of the progress bar fill."
-  },
-  {
-    name: "trailColor",
-    label: "Trail Color",
-    type: "color",
-    description: "Color of the unfilled portion."
-  }
-]}
+    {
+      name: 'percent',
+      label: 'Percent',
+      type: 'number',
+      description: 'Completion percentage (0-100).',
+    },
+    {
+      name: 'status',
+      label: 'Status',
+      type: 'select',
+      options: ['normal', 'success', 'exception', 'active'],
+      description: 'Current status of the progress bar.',
+    },
+    {
+      name: 'type',
+      label: 'Type',
+      type: 'select',
+      options: ['line', 'circle', 'dashboard'],
+      description: 'Display type: line, circle, or dashboard gauge.',
+    },
+    {
+      name: 'striped',
+      label: 'Striped',
+      type: 'boolean',
+      description: 'Whether to show striped animation on the bar.',
+    },
+    {
+      name: 'showInfo',
+      label: 'Show Info',
+      type: 'boolean',
+      description: 'Whether to show the percentage text.',
+    },
+    {
+      name: 'strokeLinecap',
+      label: 'Stroke Linecap',
+      type: 'select',
+      options: ['round', 'butt', 'square'],
+      description: 'Shape of the progress bar endpoints.',
+    },
+    {
+      name: 'strokeColor',
+      label: 'Stroke Color',
+      type: 'color',
+      description: 'Color of the progress bar fill.',
+    },
+    {
+      name: 'trailColor',
+      label: 'Trail Color',
+      type: 'color',
+      description: 'Color of the unfilled portion.',
+    },
+  ]}
 />
 
 ## Try It
@@ -114,14 +101,7 @@ Edit the code below to experiment with the component:
 
 ```tsx live
 function Demo() {
-  return (
-    <ProgressBar
-      percent={75}
-      status="normal"
-      type="line"
-      showInfo
-    />
-  );
+  return <ProgressBar percent={75} status="normal" type="line" showInfo />;
 }
 ```
 
@@ -156,9 +136,17 @@ function StatusDemo() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
       {statuses.map(status => (
-        <div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+        <div
+          key={status}
+          style={{ display: 'flex', alignItems: 'center', gap: 16 }}
+        >
           <span style={{ width: 80 }}>{status}</span>
-          <ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
+          <ProgressBar
+            percent={75}
+            status={status}
+            type="line"
+            style={{ flex: 1 }}
+          />
         </div>
       ))}
     </div>
@@ -183,14 +171,14 @@ function CustomColors() {
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `percent` | `number` | `75` | Completion percentage (0-100). |
-| `status` | `string` | `"normal"` | Current status of the progress bar. |
-| `type` | `string` | `"line"` | Display type: line, circle, or dashboard gauge. |
-| `striped` | `boolean` | `false` | Whether to show striped animation on the bar. |
-| `showInfo` | `boolean` | `true` | Whether to show the percentage text. |
-| `strokeLinecap` | `string` | `"round"` | Shape of the progress bar endpoints. |
+| Prop            | Type      | Default    | Description                                     |
+| --------------- | --------- | ---------- | ----------------------------------------------- |
+| `percent`       | `number`  | `75`       | Completion percentage (0-100).                  |
+| `status`        | `string`  | `"normal"` | Current status of the progress bar.             |
+| `type`          | `string`  | `"line"`   | Display type: line, circle, or dashboard gauge. |
+| `striped`       | `boolean` | `false`    | Whether to show striped animation on the bar.   |
+| `showInfo`      | `boolean` | `true`     | Whether to show the percentage text.            |
+| `strokeLinecap` | `string`  | `"round"`  | Shape of the progress bar endpoints.            |
 
 ## Import