feat: convert to TypeScript (#1910)

Author: LuLaValva

.babelrc

@@ -8,6 +8,12 @@
                     "safari": "11"
                 }
             }
+        ],
+        [
+            "@babel/preset-typescript",
+            {
+                "allowDeclareFields": true
+            }
         ]
     ],
     "env": {

.nycrc

@@ -1,12 +1,12 @@
 {
-    "include": ["src/**/*.js"],
+    "include": ["src/**/*.js", "src/**/*.ts"],
     "exclude": [
         "**/test",
         "**/mock",
         "demo",
-        "**/*.marko.js",
-        "**/*.stories.js",
-        "**/style.js",
+        "**/*.marko.*",
+        "**/*.stories.*",
+        "**/style",
         "src/common/test-utils",
         "src/components/ebay-icon/icons",
         "src/components/ebay-star-rating/icons"

.storybook/main.js

@@ -0,0 +1,43 @@
+import fsp from "node:fs/promises";
+
+import { mergeConfig } from "vite";
+
+// This is done because lasso does not work with readme.md?raw
+// Lasso is being used to run our browser tests with @marko/test
+// If we get rid of lasso we should remove this code and switch all readmes to use ?raw
+const markdownMatch = /\.md$/;
+const rawMarkdown = {
+    name: "markdown-loader",
+    async load(id: string) {
+        if (markdownMatch.test(id)) {
+            // raw query, read file and return as string
+            return `export default ${JSON.stringify(
+                await fsp.readFile(id, "utf-8"),
+            )}`;
+        }
+    },
+};
+
+export default {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    framework: "@storybook/marko-vite",
+    addons: [
+        {
+            name: "@storybook/addon-docs",
+            options: {
+                transcludeMarkdown: true,
+            },
+        },
+        "@storybook/addon-essentials",
+        "@storybook/addon-a11y",
+    ],
+    docs: {
+        autodocs: true,
+        defaultName: "Documentation",
+    },
+    async viteFinal(config: any) {
+        return mergeConfig(config, {
+            plugins: [rawMarkdown],
+        });
+    },
+};

.storybook/main.ts

@@ -0,0 +1,80 @@
+function tagToString(
+    tagName: string,
+    args: any,
+    plurarls: Record<string, string> = {},
+    indent = "",
+    fromAttribute = false
+) {
+    const nextIndex = indent + "\t";
+    const { body, attrs } = argsToString(args, plurarls, nextIndex);
+    let formattedTagName = tagName;
+    if (fromAttribute) {
+        formattedTagName = `@${plurarls[formattedTagName] || formattedTagName}`;
+    }
+    return `<${
+        formattedTagName +
+        attrs +
+        (body
+            ? `>\n${body.replace(
+                  /^|\n/gm,
+                  `$&${nextIndex}`
+              )}\n</${formattedTagName}>`
+            : `/>`)
+    }`;
+}
+
+function argsToString(
+    args: any,
+    plurarls: Record<string, string>,
+    indent: string
+) {
+    let attrs = "";
+    let body = "";
+    for (const key in args) {
+        if (
+            Object.prototype.hasOwnProperty.call(args, key) &&
+            key !== "renderBody"
+        ) {
+            const val = args[key];
+            const dashCaseKey = key.replace(
+                /([a-z])([A-Z])/g,
+                (m, m1, m2) => `${m1}-${m2.toLowerCase()}`
+            );
+            if (Array.isArray(val)) {
+                for (const item of val) {
+                    body += tagToString(
+                        dashCaseKey,
+                        item,
+                        plurarls,
+                        indent,
+                        true
+                    );
+                }
+            } else if (val && typeof val === "object") {
+                if (key === "spread") {
+                    Object.keys(val).forEach((spreadKey) => {
+                        attrs += ` ${spreadKey}=${JSON.stringify(
+                            val[spreadKey]
+                        )}`;
+                    });
+                } else
+                    body += tagToString(
+                        dashCaseKey,
+                        val,
+                        plurarls,
+                        indent,
+                        true
+                    );
+            } else {
+                attrs += ` ${dashCaseKey}=${JSON.stringify(val)}`;
+            }
+        }
+    }
+    if (args.renderBody) {
+        body += args.renderBody;
+    }
+
+    return { attrs, body };
+}
+
+export { tagToString };

.storybook/manager.js .storybook/manager.ts

@@ -0,0 +1,17 @@
+import { create } from "@storybook/theming";
+
+export default create({
+    base: "light",
+
+    // Typography
+    fontBase: '"Market Sans", Arial',
+    colorSecondary: "#97BB59",
+    appBg: "#F8FBF8",
+
+    // Brand assets
+    brandTitle: "eBayUI Core",
+    brandUrl: "/",
+    brandImage:
+        "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/EBay_logo.svg/1280px-EBay_logo.svg.png",
+    brandTarget: "/",
+});