Documentation and Refactoring (#3028)

* Documentation and Refactoring

* Documentation and Refactoring

* Fix lint issues

* Convert components to Builder style

---------

Co-authored-by: Dolan Miu <dmiu@bloomberg.net>

src/file/paragraph/math/bar/math-bar-pos.ts

@@ -1,11 +1,12 @@
 // https://www.datypic.com/sc/ooxml/e-m_pos-1.html
-import { Attributes, XmlComponent } from "@file/xml-components";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
 
-export class MathBarPos extends XmlComponent {
-    // TODO: Use correct types rather than any
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    public constructor(attributes: any) {
-        super("m:pos");
-        this.root.push(new Attributes(attributes));
-    }
-}
+type MathBarPosOptions = { readonly val: string };
+
+export const createMathBarPos = ({ val }: MathBarPosOptions): XmlComponent =>
+    new BuilderElement<MathBarPosOptions>({
+        name: "m:pos",
+        attributes: {
+            val: { key: "w:val", value: val },
+        },
+    });

src/file/paragraph/math/bar/math-bar-properties.spec.ts

@@ -2,11 +2,12 @@ import { describe, expect, it } from "vitest";
 
 import { Formatter } from "@export/formatter";
 
-import { MathBarProperties } from "./math-bar-properties";
+import { createMathBarProperties } from "./math-bar-properties";
+
 describe("MathBarProperties", () => {
     describe("#constructor()", () => {
         it("should create a MathBarProperties with top key", () => {
-            const mathBarProperties = new MathBarProperties("top");
+            const mathBarProperties = createMathBarProperties({ type: "top" });
 
             const tree = new Formatter().format(mathBarProperties);
 
@@ -23,7 +24,7 @@ describe("MathBarProperties", () => {
             });
         });
         it("should create a MathBarProperties with bottom key", () => {
-            const mathBarProperties = new MathBarProperties("bot");
+            const mathBarProperties = createMathBarProperties({ type: "bot" });
 
             const tree = new Formatter().format(mathBarProperties);
 

src/file/paragraph/math/bar/math-bar-properties.ts

@@ -1,11 +1,10 @@
 // https://www.datypic.com/sc/ooxml/e-m_barPr-1.html
-import { XmlComponent } from "@file/xml-components";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
 
-import { MathBarPos } from "./math-bar-pos";
+import { createMathBarPos } from "./math-bar-pos";
 
-export class MathBarProperties extends XmlComponent {
-    public constructor(type: string) {
-        super("m:barPr");
-        this.root.push(new MathBarPos({ val: type }));
-    }
-}
+export const createMathBarProperties = ({ type }: { readonly type: string }): XmlComponent =>
+    new BuilderElement({
+        name: "m:barPr",
+        children: [createMathBarPos({ val: type })],
+    });

src/file/paragraph/math/bar/math-bar.spec.ts

@@ -2,13 +2,13 @@ import { describe, expect, it } from "vitest";
 
 import { Formatter } from "@export/formatter";
 
-import { MathBar } from "./math-bar";
 import { MathRun } from "../math-run";
+import { createMathBar } from "./math-bar";
 
 describe("MathBar", () => {
     describe("#constructor()", () => {
         it("should create a MathBar with correct root key", () => {
-            const mathBar = new MathBar({ type: "top", children: [new MathRun("text")] });
+            const mathBar = createMathBar({ type: "top", children: [new MathRun("text")] });
             const tree = new Formatter().format(mathBar);
 
             expect(tree).to.deep.equal({

src/file/paragraph/math/bar/math-bar.ts

@@ -1,18 +1,17 @@
 // https://www.datypic.com/sc/ooxml/e-m_bar-1.html
-import { XmlComponent } from "@file/xml-components";
+import { BuilderElement, XmlComponent } from "@file/xml-components";
 
-import { MathBarProperties } from "./math-bar-properties";
 import type { MathComponent } from "../math-component";
-import { MathBase } from "../n-ary";
+import { createMathBase } from "../n-ary";
+import { createMathBarProperties } from "./math-bar-properties";
 
-type MathBarOption = {
+type MathBarOptions = {
     readonly type: "top" | "bot";
     readonly children: readonly MathComponent[];
 };
-export class MathBar extends XmlComponent {
-    public constructor(options: MathBarOption) {
-        super("m:bar");
-        this.root.push(new MathBarProperties(options.type));
-        this.root.push(new MathBase(options.children));
-    }
-}
+
+export const createMathBar = ({ type, children }: MathBarOptions): XmlComponent =>
+    new BuilderElement({
+        name: "m:bar",
+        children: [createMathBarProperties({ type }), createMathBase({ children })],
+    });