shopify-accelerate-app 1.0.0

package/src/tailwind/tailwind-watch.ts

@@ -0,0 +1,133 @@
+import child_process from "child_process";
+import fs from "fs";
+import path from "path";
+import { config, root_dir } from "../../shopify-accelerate-app";
+import { deleteFile } from "../utils/fs";
+const watch = require("node-watch");
+
+export const runTailwindCSSWatcher = () => {
+  const { package_root } = config;
+  const hasConfig = fs.existsSync(path.join(root_dir, "tailwind.config.js"));
+  const hasPostCss = fs.existsSync(path.join(root_dir, "postcss.config.js"));
+  const inputFile = fs.existsSync(path.join(root_dir, `assets`, `_tailwind.css`));
+  const resetInputFile = fs.existsSync(path.join(root_dir, `assets`, `_reset.css`));
+
+  if (!inputFile) {
+    console.log("Tailwind Input file not found");
+    return;
+  }
+
+  const filePath = path.join(root_dir, `assets`, `tailwind_pre_sort.css.liquid`);
+  deleteFile(filePath);
+  /*= =============== Tailwind Watcher ================ */
+  child_process.spawn(
+    "npx",
+    [
+      "tailwindcss",
+      "--config",
+      /*hasConfig ? "tailwind.config.js" :*/ path.join(
+        package_root,
+        `src/tailwind/tailwind.config.js`
+      ),
+      "--postcss",
+      /*hasPostCss ? "postcss.config.js" : */ path.join(
+        package_root,
+        `src/tailwind/postcss.config.js`
+      ),
+      "-i",
+      path.join(root_dir, `assets`, `_tailwind.css`),
+      "-o",
+      filePath,
+      "--watch",
+    ],
+    {
+      shell: true,
+      stdio: "inherit",
+    }
+  );
+
+  if (!resetInputFile) {
+    console.log("Tailwind Reset Input file not found");
+    return;
+  }
+  /*= =============== Tailwind Reset ================ */
+  child_process.spawn(
+    "npx",
+    [
+      "tailwindcss",
+      "--config",
+      /*hasConfig ? "tailwind.config.js" :*/ path.join(
+        package_root,
+        `src/tailwind/tailwind.config.js`
+      ),
+      "--postcss",
+      /*hasPostCss ? "postcss.config.js" :*/ path.join(
+        package_root,
+        `src/tailwind/postcss.config.js`
+      ),
+      "-i",
+      path.join(root_dir, `assets`, `_reset.css`),
+      "-o",
+      path.join(root_dir, `assets`, `reset.css.liquid`),
+    ],
+    {
+      shell: true,
+      stdio: "inherit",
+    }
+  );
+
+  /*= =============== Tailwind Plugin Order ================ */
+  watch(path.join(root_dir, "assets"), { recursive: false }, async (evt, name) => {
+    if (
+      !name.match(/tailwind_pre_sort.css.liquid$/) ||
+      !fs.existsSync(path.join(root_dir, "./assets/tailwind_pre_sort.css.liquid"))
+    )
+      return;
+    const file = fs.readFileSync(path.join(root_dir, "./assets/tailwind_pre_sort.css.liquid"), {
+      encoding: "utf-8",
+    });
+
+    const top = file
+      .split(/\n}/gi)
+      .filter((str) => !/\n@container \(/gi.test(str))
+      .join("\n}");
+    const bottom = `${file
+      .split(/\n}/gi)
+      .filter((str) => /\n@container \(/gi.test(str))
+      .join("\n}")}\n}`;
+    const content = top + bottom;
+
+    const classesInOrder = [];
+    const omitCompoundClasses = [":not", ":where", ">", "*", ","];
+
+    content.split("\n").forEach((line) => {
+      if (!line.startsWith(".")) {
+        return;
+      }
+
+      let writeOut = true;
+
+      omitCompoundClasses.forEach((classToOmit) => {
+        if (line.includes(classToOmit)) {
+          writeOut = false;
+          return;
+        }
+      });
+
+      if (writeOut) {
+        const finalClassName = line
+          .replace(/\./g, "")
+          .replace(/{/g, "")
+          .replace(/}/g, "")
+          .replace(/\\/g, "")
+          .trim();
+        if (finalClassName !== "") {
+          classesInOrder.push(`${finalClassName}`);
+        }
+      }
+    });
+
+    fs.writeFileSync(path.join(root_dir, `assets/tailwind.css.liquid`), content);
+    fs.writeFileSync(path.join(process.cwd(), ".tailwindorder"), classesInOrder.join("\n"));
+  });
+};

package/src/tailwind/tailwind.config.js

@@ -0,0 +1,261 @@
+// eslint-disable-next-line node/no-unpublished-require
+const plugin = require("tailwindcss/plugin");
+require("dotenv").config();
+
+module.exports = {
+  content: [
+    `${process.env.THEME_PATH}/**/*{html,liquid,js,json}`,
+    `!${process.env.THEME_PATH}/**/*.css.liquid`,
+    `!${process.env.THEME_PATH}/**/*.css`,
+  ],
+  darkMode: "class", // or 'media' or 'class'
+  // mode: process.env.NODE_ENV ? "jit" : undefined,
+  // important: true,
+  mode: "jit",
+  theme: {
+    extend: {
+      screens: {
+        xxs: "373px" /* tiny phone*/,
+        xs: "427px" /*smaller than iphone pro max*/,
+      },
+      fontSize: {
+        9: ["9px", "1.5"],
+        10: ["10px", "1.5"],
+        11: ["11px", "1.5"],
+        12: ["12px", "1.5"],
+        13: ["13px", "1.5"],
+      },
+      padding: {
+        gutter: "var(--layout-container-gutter)",
+      },
+      maxWidth: {
+        container: {
+          xs: `var(--layout-page-width-xs)`,
+          sm: `var(--layout-page-width-sm)`,
+          md: `var(--layout-page-width-md)`,
+          lg: `var(--layout-page-width-lg)`,
+        },
+        "8xl": "90rem",
+      },
+      borderRadius: {
+        "theme-sm": `var(--rounded-theme-sm)`,
+        theme: `var(--rounded-theme)`,
+        "theme-md": `var(--rounded-theme-md)`,
+        "theme-lg": `var(--rounded-theme-lg)`,
+        "theme-xl": `var(--rounded-theme-xl)`,
+        "theme-2xl": `var(--rounded-theme-2xl)`,
+        "theme-3xl": `var(--rounded-theme-3xl)`,
+      },
+      colors: {
+        theme: {
+          bg: "rgb(var(--color-bg) / <alpha-value>)",
+          "bg-hex": "var(--color-bg-hex)",
+          text: "rgb(var(--color-text) / <alpha-value>)",
+          "text-hex": "var(--color-text-hex)",
+          "overlay-text": "rgb(var(--color-overlay-text) / <alpha-value>)",
+          "overlay-text-hex": "var(--color-overlay-text-hex)",
+          accent: "rgb(var(--color-accent) / <alpha-value>)",
+          border: "rgb(var(--color-border) / <alpha-value>)",
+        },
+        error: "rgb(var(--color-error) / <alpha-value>)",
+        warning: "rgb(var(--color-warning) / <alpha-value>)",
+        success: "rgb(var(--color-success) / <alpha-value>)",
+        info: "rgb(var(--color-info) / <alpha-value>)",
+        gray: {
+          50: "rgb(var(--color-gray-50) / <alpha-value>)",
+          100: "rgb(var(--color-gray-100) / <alpha-value>)",
+          200: "rgb(var(--color-gray-200) / <alpha-value>)",
+          300: "rgb(var(--color-gray-300) / <alpha-value>)",
+          400: "rgb(var(--color-gray-400) / <alpha-value>)",
+          500: "rgb(var(--color-gray-500) / <alpha-value>)",
+          600: "rgb(var(--color-gray-600) / <alpha-value>)",
+          700: "rgb(var(--color-gray-700) / <alpha-value>)",
+          800: "rgb(var(--color-gray-800) / <alpha-value>)",
+          900: "rgb(var(--color-gray-900) / <alpha-value>)",
+        },
+      },
+      ringColor: {
+        DEFAULT: `rgb(var(--color-accent))`,
+      },
+      boxShadow: {
+        "invert-sm": "0 -1px 2px 0 rgb(0 0 0 / 0.05)",
+        invert: "0 -3px 5px 1px rgb(0 0 0 / 0.03), 0 -2px 4px 2px rgb(0 0 0 / 0.03)",
+        "invert-md": "0 -4px 6px 1px rgb(0 0 0 / 0.07), 0 -2px 4px 2px rgb(0 0 0 / 0.07)",
+        "invert-lg": "0 -10px 15px 3px rgb(0 0 0 / 0.1), 0 -4px 6px 4px rgb(0 0 0 / 0.1)",
+        "invert-xl": "0 -20px 25px 5px rgb(0 0 0 / 0.1), 0 -8px 10px 6px rgb(0 0 0 / 0.1)",
+        "invert-2xl": "0 -25px 50px 12px rgb(0 0 0 / 0.25)",
+      },
+      keyframes: {
+        slide: {
+          "0%, 100%": { transform: "translate3d(0,0,0)" },
+          "100%": { transform: "translate3d(-50%,0,0)" },
+        },
+        marquee1: {
+          "0%, 100%": { transform: "translate3d(0,0,0)" },
+          "100%": { transform: "translate3d(-100%,0,0)" },
+        },
+        marquee2: {
+          "0%, 100%": { transform: "translate3d(100%,0,0)" },
+          "100%": { transform: "translate3d(0,0,0)" },
+        },
+        circle: {
+          "0%": { strokeDashoffset: "90" },
+          "100%": { strokeDashoffset: "0" },
+        },
+        dot: {
+          "0%,95%": { fill: "transparent", stroke: "currentColor", strokeOpacity: "0.1" },
+          "100%": { fill: "currentColor", stroke: "transparent", strokeOpacity: "0" },
+        },
+        typewriter: {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0" },
+        },
+      },
+      animation: {
+        slide: "slide 30s linear infinite",
+        marquee1: "marquee1 30s linear infinite",
+        marquee2: "marquee2 30s linear infinite",
+        circle: "circle 8.1s linear",
+        dot: "dot 8.1s linear",
+        typewriter: "typewriter 0.5s linear infinite",
+      },
+    },
+    variants: {
+      extend: {},
+    },
+  },
+  plugins: [
+    require("@tailwindcss/aspect-ratio"),
+    require("tailwindcss-container-queries-with-max-width"),
+    // require("@tailwindcss/forms"),
+    plugin(({ addVariant, addUtilities, matchUtilities, theme }) => {
+      addVariant("svg", ["& svg"]);
+      addVariant("hfa", ["&:hover", "&:focus", "&:active"]);
+      addVariant("hfw", ["&:hover", "&:focus-visible", "&:focus-within"]);
+      addVariant("hfwa", ["&:hover", "&:focus-visible", "&:focus-within", "&:active"]);
+      addVariant("hfwaa", ["&:hover", "&:focus-visible", "&:focus-within", "&:active", "&.active"]);
+      addVariant("hfva", ["&:hover", "&:focus", "&:focus-visible", "&:active"]);
+      addVariant("ha", ["&:hover", "&:active"]);
+      addVariant("hf", ["&:hover", "&:focus-visible"]);
+      addVariant("fa", ["&:focus", "&:active"]);
+      addVariant("f", ["&:focus"]);
+      addVariant("fw", ["&:focus-within"]);
+      addVariant("h", ["&:hover"]);
+      addVariant("d", [".dark &"]);
+      addVariant("ac", ["&.active"]);
+      addVariant("b", ["&::before"]);
+      addVariant("a", ["&::after"]);
+      addVariant("not-prose", [":not(.prose &)&"]);
+      addVariant("hfaa", ["&:hover", "&:focus", "&:active", "&.active"]);
+      addVariant("hfvaa", ["&:hover", "&:focus", "&:focus-visible", "&:active", "&.active"]);
+      addVariant("group-hfa", [".group:hover &", ".group:focus &", ".group:active &"]);
+      addVariant("group-hf", [".group:hover &", ".group:focus &"]);
+      addVariant("group-ac", [".group.active &"]);
+
+      addVariant("group-hfva", [".group:hover &", ".group:focus-visible &", ".group:active &"]);
+      addVariant("group-hfwa", [
+        ".group:hover &",
+        ".group:focus-visible &",
+        ".group:focus-within &",
+        ".group:active &",
+      ]);
+      addVariant("group-hfw", [
+        ".group:hover &",
+        ".group:focus-visible &",
+        ".group:focus-within &",
+      ]);
+      addVariant("peer-hfwa", [
+        ".peer:hover ~ &",
+        ".peer:focus-visible ~ &",
+        ".peer:focus-within ~ &",
+        ".peer:active ~ &",
+      ]);
+      matchUtilities(
+        {
+          "top-spacing": (value) => ({
+            top: `calc(${theme("spacing.top-bar-spacing")} + ${value})`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-w": (value) => ({
+            borderWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-x-w": (value) => ({
+            borderLeftWidth: `${value}`,
+            borderRightWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-l-w": (value) => ({
+            borderLeftWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-r-w": (value) => ({
+            borderRightWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-y-w": (value) => ({
+            borderTopWidth: `${value}`,
+            borderBottomWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-t-w": (value) => ({
+            borderTopWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      matchUtilities(
+        {
+          "border-b-w": (value) => ({
+            borderBottomWidth: `${value}`,
+          }),
+        },
+        { values: theme("spacing") }
+      );
+      addUtilities({
+        ".shape-geometric-precision": {
+          "shape-rendering": "geometricPrecision",
+        },
+        ".open-quote": {
+          content: "open-quote",
+        },
+        ".close-quote": {
+          content: "close-quote",
+        },
+        ".leading-0": {
+          "line-height": "0",
+        },
+        ".animation-pause": {
+          "animation-play-state": "paused",
+        },
+        ".animation-play": {
+          "animation-play-state": "running",
+        },
+      });
+    }),
+  ],
+};

package/src/telemetry/telemetry.ts

@@ -0,0 +1,84 @@
+import chalk from "chalk";
+import fs from "fs";
+import os from "os";
+import path from "path";
+import toml from "toml";
+
+export const telemetry = () => {
+  const root = process.cwd();
+  try {
+    let shop_url = "";
+    let theme_id = "";
+    let shop_url_prod = "";
+    let theme_id_prod = "";
+
+    try {
+      const shopifySettings = fs.readFileSync(path.join(root, "shopify.theme.toml"), {
+        encoding: "utf-8",
+      });
+      const userSettings = JSON.parse(JSON.stringify(toml.parse(shopifySettings)));
+      if (
+        typeof userSettings === "object" &&
+        "environments" in userSettings &&
+        "development" in userSettings.environments
+      ) {
+        theme_id = userSettings.environments.development.theme;
+        shop_url = userSettings.environments.development.store;
+        theme_id_prod = userSettings.environments.production.theme;
+        shop_url_prod = userSettings.environments.production.store;
+      }
+      console.log(
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.yellowBright(
+          `Dev Environment: Theme: ${theme_id} - Shop: ${shop_url}`
+        )}`
+      );
+      console.log(
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.yellowBright(
+          `Prod Environment: Theme: ${theme_id_prod} - Shop: ${shop_url_prod}`
+        )}`
+      );
+    } catch (err) {
+      console.log(
+        `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.cyanBright(
+          `'shopify.theme.toml' not found - Ensure that your Environment is setup using the Shopify CLI`
+        )}`
+      );
+    }
+
+    const root_path = root;
+    const username = os.userInfo().username;
+    const homedir = os.userInfo().homedir;
+    const platform = process.platform;
+
+    const ping = () => {
+      fetch(`https://accelerate-tracking.vercel.app/api/track`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          shop_url,
+          theme_id,
+          root_path,
+          username,
+          homedir,
+          platform,
+        }),
+      });
+    };
+    ping();
+    setInterval(
+      () => {
+        ping();
+      },
+      1000 * 60 * 5 /* 5 minutes */
+    );
+  } catch (err) {
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(
+        `Shopify CLI requires an Internet Connection to Sync`
+      )}`
+    );
+  }
+};

package/src/templates/.env.template

@@ -0,0 +1,12 @@
+SHOPIFY_ACCELERATE_DELETE_EXTERNAL_LAYOUTS=true
+SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SECTIONS=true
+SHOPIFY_ACCELERATE_DELETE_EXTERNAL_SNIPPETS=true
+SHOPIFY_ACCELERATE_DELETE_EXTERNAL_BLOCKS=true
+SHOPIFY_ACCELERATE_DELETE_EXTERNAL_ASSETS=true
+#SHOPIFY_ACCELERATE_DISABLED_LOCALES=true
+SHOPIFY_ACCELERATE_DISABLE_THEME_BLOCKS=true
+#SHOPIFY_ACCELERATE_ROOT=./shopify
+#SHOPIFY_ACCELERATE_SECTIONS=./sections
+#SHOPIFY_ACCELERATE_BLOCKS=./blocks
+#SHOPIFY_ACCELERATE_TYPES=./@types
+

package/src/templates/shopify.theme.toml

@@ -0,0 +1,9 @@
+[environments.development]
+theme = "154740490559"
+store = "accelerate-preview.myshopify.com"
+path = "./themes/accelerate-preview"
+
+[environments.production]
+theme = "154740490559"
+store = "accelerate-preview.myshopify.com"
+path = "./themes/accelerate-preview-prod"

package/src/utils/capitalize.ts

@@ -0,0 +1,3 @@
+export const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};

package/src/utils/delay.ts

@@ -0,0 +1,3 @@
+export function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/src/utils/fs.ts

@@ -0,0 +1,87 @@
+import chalk from "chalk";
+import fs from "fs";
+import path from "path";
+import { config } from "../../shopify-accelerate-app";
+
+export const readFile = (file_path, options?: any) => {
+  if (fs.existsSync(file_path)) {
+    return fs.readFileSync(file_path, { ...options, encoding: "utf-8" }) as unknown as string;
+  }
+  return "";
+};
+
+export const writeCompareFile = (file_path, content, successCallback = () => {}) => {
+  if (!fs.existsSync(file_path)) {
+    const dirname = path.dirname(file_path);
+    if (!fs.existsSync(dirname)) {
+      fs.mkdirSync(dirname, { recursive: true });
+    }
+
+    fs.writeFileSync(file_path, content);
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.cyanBright(
+        `Created: ${file_path.replace(process.cwd(), "")}`
+      )}`
+    );
+    successCallback();
+    return;
+  }
+
+  const contentVerification = fs.readFileSync(file_path, {
+    encoding: "utf-8",
+  });
+
+  if (contentVerification !== content) {
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.blueBright(
+        `Updated: ${file_path.replace(process.cwd(), "")}`
+      )}`
+    );
+    fs.writeFileSync(file_path, content);
+    successCallback();
+  }
+};
+
+export const writeOnlyNew = (file_path, content, successCallback = () => {}) => {
+  if (!fs.existsSync(file_path)) {
+    const dirname = path.dirname(file_path);
+
+    if (!fs.existsSync(dirname)) {
+      fs.mkdirSync(dirname, { recursive: true });
+    }
+
+    fs.writeFileSync(file_path, content);
+    console.log(
+      `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.cyanBright(
+        `Created: ${file_path.replace(process.cwd(), "")}`
+      )}`
+    );
+  }
+  successCallback();
+};
+
+export const getAllFiles = (dirname) => {
+  if (!fs.existsSync(dirname)) {
+    if (config.headless) {
+      return [];
+    }
+    fs.mkdirSync(dirname, { recursive: true });
+  }
+  return fs.readdirSync(dirname).reduce((acc, file) => {
+    const name = path.join(dirname, file);
+
+    const isDirectory = fs.statSync(name).isDirectory();
+    return isDirectory ? [...acc, ...getAllFiles(name)] : [...acc, name];
+  }, []);
+};
+
+export const deleteFile = (file_path: string) => {
+  if (!fs.existsSync(file_path)) return;
+
+  fs.unlinkSync(file_path);
+  console.log(
+    `[${chalk.gray(new Date().toLocaleTimeString())}]: ${chalk.redBright(
+      `Deleted: ${file_path.replace(process.cwd(), "")}`
+    )}`
+  );
+};

package/src/utils/is-object.ts

@@ -0,0 +1,3 @@
+export function isObject(x: any): x is Object {
+  return x !== null && typeof x === "object" && !Array.isArray(x);
+}

package/src/utils/json.ts

@@ -0,0 +1,8 @@
+export const JSONParse = <T = unknown>(object: any, origin = ""): T => {
+  try {
+    return JSON.parse(object);
+  } catch (err) {
+    // console.log({ object }, err);
+    return null;
+  }
+};

package/src/utils/to-camel-case.ts

@@ -0,0 +1,6 @@
+export const toCamelCase = (str) =>
+  str
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+    .replace(/[\s-]+/gi, "");

package/src/utils/to-kebab-case.ts

@@ -0,0 +1,6 @@
+export const toKebabCase = (str: string) =>
+  str &&
+  str
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .map((x) => x.toLowerCase())
+    .join("-");

package/src/utils/to-pascal-case.ts

@@ -0,0 +1,12 @@
+const toCamelCase = (str) =>
+  str
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+    .replace(/[\s-]+/gi, "");
+
+const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+export const toPascalCase = (str) => capitalize(toCamelCase(str));

package/src/utils/to-snake-case.ts

@@ -0,0 +1,45 @@
+export const toLocaleFriendlySnakeCase = (str: string) => {
+  if (typeof str === "number") {
+    str = `${str}`;
+  }
+  str = str && str.length <= 1 ? str.replace(/^ /gi, "empty_char") : str?.replaceAll(" ", " ");
+  try {
+    return (
+      str &&
+      str
+        .replace("%", "percentage")
+        .replace("$", "dollar")
+        .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+        .map((x) => x.toLowerCase())
+        .join("_")
+    );
+  } catch (err) {
+    if (str.length <= 5) {
+      return `custom_char_${escape(str)
+        .replace("%", "percentage")
+        .replace("$", "dollar")
+        .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+        .map((x) => x.toLowerCase())
+        .join("_")}`;
+    }
+    return str;
+  }
+};
+
+export const toSnakeCase = (str: string) => {
+  if (typeof str === "number") {
+    str = `${str}`;
+  }
+  try {
+    return (
+      str &&
+      str
+        .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+        .map((x) => x.toLowerCase())
+        .join("_")
+    );
+  } catch (err) {
+    console.log({ err, str });
+    return str.toLowerCase().replace(/\s+/gi, "_");
+  }
+};