✨ feat: add generateBEM

src/generator/index.ts

@@ -0,0 +1,50 @@
+import type { Modifier } from "../types";
+
+const _formatModifier = (
+  be: string,
+  modifiers: Modifier | Modifier[],
+): string => {
+  if (typeof modifiers === "string") return ` ${be}--${modifiers}`;
+
+  if (Array.isArray(modifiers)) {
+    return modifiers.reduce(
+      (acc: string, curr) => acc + _formatModifier(be, curr),
+      "",
+    );
+  }
+
+  return Object.keys(modifiers).reduce((acc, curr) => {
+    if (modifiers[curr]) return acc + _formatModifier(be, curr);
+    return acc;
+  }, "");
+};
+
+/**
+ * Generate Block Element Modifier string
+ * @typedef {string | Record<string, boolean>} Modifier
+ * @method
+ * @param name {string} Block name
+ * @return {generateBEM~string}
+ * @example
+ * generateBEM("facil-button")() // "facil-button"
+ * generateBEM("facil-button")("block") // "facil-button__block"
+ * @category Generator
+ * @version v0.3.0
+ */
+export const generateBEM = (name: string) => {
+  /**
+   * @param {Modifier | Modifier[]} elementOrModifiers=
+   * @param {Modifier | Modifier[]} modifiers=
+   */
+  return (
+    elementOrModifiers?: Modifier | Modifier[],
+    modifiers?: Modifier | Modifier[],
+  ): string => {
+    if (elementOrModifiers && typeof elementOrModifiers !== "string") {
+      modifiers = elementOrModifiers;
+      elementOrModifiers = "";
+    }
+    const be = elementOrModifiers ? `${name}__${elementOrModifiers}` : name;
+    return modifiers ? be + _formatModifier(be, modifiers) : be;
+  };
+};

src/generator/test/generator.test.ts

@@ -0,0 +1,21 @@
+import { describe, it, expect } from "vitest";
+import { generateBEM } from "../index";
+
+describe("test bem", () => {
+  it("should generate proper bem", () => {
+    const bem = generateBEM("facil-button");
+    const disabled = true;
+    const primary = false;
+    expect(bem()).toBe("facil-button");
+    expect(bem("block")).toBe("facil-button__block");
+    expect(bem("block", ["disabled", "primary"])).toBe(
+      "facil-button__block facil-button__block--disabled facil-button__block--primary",
+    );
+    expect(bem(["disabled", "primary"])).toBe(
+      "facil-button facil-button--disabled facil-button--primary",
+    );
+    expect(bem("block", { disabled, primary })).toBe(
+      "facil-button__block facil-button__block--disabled",
+    );
+  });
+});

src/types/index.ts

@@ -13,3 +13,5 @@ export type NestedObject = {
 export interface Func {
   (): void;
 }
+
+export type Modifier = string | { [modifier: string]: boolean };