feat(build): migrate from Prettier to Oxfmt for docs

Signed-off-by: hainenber <dotronghai96@gmail.com>

docs/developer_docs_versioned_docs/version-6.1.0/components/design-system/grid.mdx

@@ -34,52 +34,87 @@ The Grid system of Ant Design is based on a 24-grid layout. The `Row` and `Col`
   component="Grid"
   renderComponent="Row"
   props={{
-  align: "top",
-  justify: "start",
-  wrap: true,
-  gutter: 16
-}}
+    align: 'top',
+    justify: 'start',
+    wrap: true,
+    gutter: 16,
+  }}
   controls={[
-  {
-    name: "align",
-    label: "Align",
-    type: "select",
-    options: [
-      "top",
-      "middle",
-      "bottom",
-      "stretch"
-    ],
-    description: "Vertical alignment of columns within the row."
-  },
-  {
-    name: "justify",
-    label: "Justify",
-    type: "select",
-    options: [
-      "start",
-      "end",
-      "center",
-      "space-around",
-      "space-between",
-      "space-evenly"
-    ],
-    description: "Horizontal distribution of columns within the row."
-  },
-  {
-    name: "wrap",
-    label: "Wrap",
-    type: "boolean",
-    description: "Whether columns are allowed to wrap to the next line."
-  },
-  {
-    name: "gutter",
-    label: "Gutter",
-    type: "number",
-    description: "Spacing between columns in pixels."
-  }
-]}
-  sampleChildren={[{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4 (tall)","style":{"background":"#e6f4ff","padding":"24px 8px","border":"1px solid #91caff","textAlign":"center"}}},{"component":"Col","props":{"span":4,"children":"col-4","style":{"background":"#e6f4ff","padding":"8px","border":"1px solid #91caff","textAlign":"center"}}}]}
+    {
+      name: 'align',
+      label: 'Align',
+      type: 'select',
+      options: ['top', 'middle', 'bottom', 'stretch'],
+      description: 'Vertical alignment of columns within the row.',
+    },
+    {
+      name: 'justify',
+      label: 'Justify',
+      type: 'select',
+      options: [
+        'start',
+        'end',
+        'center',
+        'space-around',
+        'space-between',
+        'space-evenly',
+      ],
+      description: 'Horizontal distribution of columns within the row.',
+    },
+    {
+      name: 'wrap',
+      label: 'Wrap',
+      type: 'boolean',
+      description: 'Whether columns are allowed to wrap to the next line.',
+    },
+    {
+      name: 'gutter',
+      label: 'Gutter',
+      type: 'number',
+      description: 'Spacing between columns in pixels.',
+    },
+  ]}
+  sampleChildren={[
+    {
+      component: 'Col',
+      props: {
+        span: 4,
+        children: 'col-4',
+        style: {
+          background: '#e6f4ff',
+          padding: '8px',
+          border: '1px solid #91caff',
+          textAlign: 'center',
+        },
+      },
+    },
+    {
+      component: 'Col',
+      props: {
+        span: 4,
+        children: 'col-4 (tall)',
+        style: {
+          background: '#e6f4ff',
+          padding: '24px 8px',
+          border: '1px solid #91caff',
+          textAlign: 'center',
+        },
+      },
+    },
+    {
+      component: 'Col',
+      props: {
+        span: 4,
+        children: 'col-4',
+        style: {
+          background: '#e6f4ff',
+          padding: '8px',
+          border: '1px solid #91caff',
+          textAlign: 'center',
+        },
+      },
+    },
+  ]}
 />
 
 ## Try It
@@ -91,19 +126,59 @@ function Demo() {
   return (
     <Row gutter={[16, 16]}>
       <Col span={12}>
-        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '8px',
+            border: '1px solid #91caff',
+          }}
+        >
+          col-12
+        </div>
       </Col>
       <Col span={12}>
-        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '8px',
+            border: '1px solid #91caff',
+          }}
+        >
+          col-12
+        </div>
       </Col>
       <Col span={8}>
-        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '8px',
+            border: '1px solid #91caff',
+          }}
+        >
+          col-8
+        </div>
       </Col>
       <Col span={8}>
-        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '8px',
+            border: '1px solid #91caff',
+          }}
+        >
+          col-8
+        </div>
       </Col>
       <Col span={8}>
-        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '8px',
+            border: '1px solid #91caff',
+          }}
+        >
+          col-8
+        </div>
       </Col>
     </Row>
   );
@@ -117,22 +192,50 @@ function ResponsiveGrid() {
   return (
     <Row gutter={[16, 16]}>
       <Col xs={24} sm={12} md={8} lg={6}>
-        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '16px',
+            border: '1px solid #91caff',
+            textAlign: 'center',
+          }}
+        >
           Responsive
         </div>
       </Col>
       <Col xs={24} sm={12} md={8} lg={6}>
-        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '16px',
+            border: '1px solid #91caff',
+            textAlign: 'center',
+          }}
+        >
           Responsive
         </div>
       </Col>
       <Col xs={24} sm={12} md={8} lg={6}>
-        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '16px',
+            border: '1px solid #91caff',
+            textAlign: 'center',
+          }}
+        >
           Responsive
         </div>
       </Col>
       <Col xs={24} sm={12} md={8} lg={6}>
-        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
+        <div
+          style={{
+            background: '#e6f4ff',
+            padding: '16px',
+            border: '1px solid #91caff',
+            textAlign: 'center',
+          }}
+        >
           Responsive
         </div>
       </Col>
@@ -145,24 +248,45 @@ function ResponsiveGrid() {
 
 ```tsx live
 function AlignmentDemo() {
-  const boxStyle = { background: '#e6f4ff', padding: '16px 0', border: '1px solid #91caff', textAlign: 'center' };
+  const boxStyle = {
+    background: '#e6f4ff',
+    padding: '16px 0',
+    border: '1px solid #91caff',
+    textAlign: 'center',
+  };
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
       <Row justify="start" gutter={8}>
-        <Col span={4}><div style={boxStyle}>start</div></Col>
-        <Col span={4}><div style={boxStyle}>start</div></Col>
+        <Col span={4}>
+          <div style={boxStyle}>start</div>
+        </Col>
+        <Col span={4}>
+          <div style={boxStyle}>start</div>
+        </Col>
       </Row>
       <Row justify="center" gutter={8}>
-        <Col span={4}><div style={boxStyle}>center</div></Col>
-        <Col span={4}><div style={boxStyle}>center</div></Col>
+        <Col span={4}>
+          <div style={boxStyle}>center</div>
+        </Col>
+        <Col span={4}>
+          <div style={boxStyle}>center</div>
+        </Col>
       </Row>
       <Row justify="end" gutter={8}>
-        <Col span={4}><div style={boxStyle}>end</div></Col>
-        <Col span={4}><div style={boxStyle}>end</div></Col>
+        <Col span={4}>
+          <div style={boxStyle}>end</div>
+        </Col>
+        <Col span={4}>
+          <div style={boxStyle}>end</div>
+        </Col>
       </Row>
       <Row justify="space-between" gutter={8}>
-        <Col span={4}><div style={boxStyle}>between</div></Col>
-        <Col span={4}><div style={boxStyle}>between</div></Col>
+        <Col span={4}>
+          <div style={boxStyle}>between</div>
+        </Col>
+        <Col span={4}>
+          <div style={boxStyle}>between</div>
+        </Col>
       </Row>
     </div>
   );
@@ -171,12 +295,12 @@ function AlignmentDemo() {
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `align` | `string` | `"top"` | Vertical alignment of columns within the row. |
-| `justify` | `string` | `"start"` | Horizontal distribution of columns within the row. |
-| `wrap` | `boolean` | `true` | Whether columns are allowed to wrap to the next line. |
-| `gutter` | `number` | `16` | Spacing between columns in pixels. |
+| Prop      | Type      | Default   | Description                                           |
+| --------- | --------- | --------- | ----------------------------------------------------- |
+| `align`   | `string`  | `"top"`   | Vertical alignment of columns within the row.         |
+| `justify` | `string`  | `"start"` | Horizontal distribution of columns within the row.    |
+| `wrap`    | `boolean` | `true`    | Whether columns are allowed to wrap to the next line. |
+| `gutter`  | `number`  | `16`      | Spacing between columns in pixels.                    |
 
 ## Import