refactor: ECHO-415: Revert "BEM Migration in editor"

web/libs/editor/src/common/Button/Button.tsx

@@ -8,11 +8,10 @@ import {
   forwardRef,
   type ForwardRefExoticComponent,
   useMemo,
-  createElement,
 } from "react";
 import { Hotkey } from "../../core/Hotkey";
 import { useHotkey } from "../../hooks/useHotkey";
-import { cn, type CNTagName } from "../../utils/bem";
+import { Block, type CNTagName, Elem } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import "./Button.scss";
 
@@ -108,19 +107,18 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 
     useHotkey(hotkey, rest.onClick as unknown as Keymaster.KeyHandler, hotkeyScope);
 
-    const buttonBody = createElement(
-      finalTag as any,
-      {
-        ref,
-        type,
-        ...rest,
-        className: cn("button").mod(mods).mix(className).toClassName(),
-      },
-      <>
-        {iconElem && <span className={cn("button").elem("icon").toClassName()}>{iconElem}</span>}
-        {iconElem && children ? <span>{children}</span> : children}
-        {extra !== undefined ? <div className={cn("button").elem("extra").toClassName()}>{extra}</div> : null}
-      </>,
+    const buttonBody = (
+      <Block name="button" mod={mods} mix={className} ref={ref} tag={finalTag} type={type} {...rest}>
+        <>
+          {iconElem && (
+            <Elem tag="span" name="icon">
+              {iconElem}
+            </Elem>
+          )}
+          {iconElem && children ? <span>{children}</span> : children}
+          {extra !== undefined ? <Elem name="extra">{extra}</Elem> : null}
+        </>
+      </Block>
     );
 
     if (
@@ -149,7 +147,11 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 Button.displayName = "Button";
 
 const Group: FC<ButtonGroupProps> = ({ className, children, collapsed }) => {
-  return <div className={cn("button-group").mod({ collapsed }).mix(className).toClassName()}>{children}</div>;
+  return (
+    <Block name="button-group" mod={{ collapsed }} mix={className}>
+      {children}
+    </Block>
+  );
 };
 
 Button.Group = Group;

web/libs/editor/src/common/Dropdown/DropdownComponent.tsx

@@ -12,7 +12,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { useFullscreen } from "../../hooks/useFullscreen";
-import { cn } from "../../utils/bem";
+import { Block, cn } from "../../utils/bem";
 import { alignElements, type Align } from "@humansignal/core/lib/utils/dom";
 import { aroundTransition } from "@humansignal/core/lib/utils/transition";
 import "./Dropdown.scss";
@@ -213,18 +213,19 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
     }, [props.style, dropdownIndex, minIndex, offset]);
 
     const result = (
-      <div
-        ref={dropdown as any}
+      <Block
+        ref={dropdown}
+        name="dropdown"
         data-testid={props.dataTestId}
-        className={rootName.mix(props.className, visibilityClasses).toClassName()}
+        mix={[props.className, visibilityClasses]}
         style={{
           ...compositeStyles,
           borderRadius: isFF(FF_DEV_3873) && 4,
         }}
         onClick={(e: MouseEvent) => e.stopPropagation()}
       >
         {content}
-      </div>
+      </Block>
     );
 
     return props.inline === true ? result : createPortal(result, document.body);

web/libs/editor/src/common/Icon/Icon.jsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { cn } from "../../utils/bem";
+import { Block } from "../../utils/bem";
 import "./Icon.scss";
 
 export const Icon = React.forwardRef(({ icon, ...props }, ref) => {
   return (
-    <span ref={ref} className={cn("icon").toClassName()}>
+    <Block tag="span" name="icon" ref={ref}>
       {React.createElement(icon, props)}
-    </span>
+    </Block>
   );
 });

web/libs/editor/src/common/Label/Label.jsx

@@ -1,5 +1,5 @@
-import { createElement, forwardRef } from "react";
-import { cn } from "../../utils/bem";
+import { forwardRef } from "react";
+import { Block, Elem } from "../../utils/bem";
 import "./Label.scss";
 
 export const Label = forwardRef(
@@ -14,21 +14,16 @@ export const Label = forwardRef(
       empty: !children,
     };
 
-    return createElement(
-      tagName,
-      {
-        ref,
-        style,
-        "data-required": required,
-        className: cn("field-label").mod(mods).toClassName(),
-      },
-      <div className={cn("field-label").elem("text").toClassName()}>
-        <div className={cn("field-label").elem("content").toClassName()}>
-          {text}
-          {description && <div className={cn("field-label").elem("description").toClassName()}>{description}</div>}
-        </div>
-      </div>,
-      <div className={cn("field-label").elem("field").toClassName()}>{children}</div>,
+    return (
+      <Block ref={ref} name="field-label" mod={mods} tag={tagName} style={style} data-required={required}>
+        <Elem name="text">
+          <Elem name="content">
+            {text}
+            {description && <Elem name="description">{description}</Elem>}
+          </Elem>
+        </Elem>
+        <Elem name="field">{children}</Elem>
+      </Block>
     );
   },
 );

web/libs/editor/src/common/Menu/Menu.jsx

@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useMemo } from "react";
-import { cn } from "../../utils/bem";
+import { Block, cn } from "../../utils/bem";
 import { useDropdown } from "../Dropdown/DropdownTrigger";
 import "./Menu.scss";
 import { MenuContext } from "./MenuContext";
@@ -34,14 +34,17 @@ export const Menu = forwardRef(
 
     return (
       <MenuContext.Provider value={contextValue}>
-        <ul
+        <Block
           ref={ref}
-          className={cn("menu").mod({ size, collapsed }).mix(className).toClassName()}
+          tag="ul"
+          name="menu"
+          mod={{ size, collapsed }}
+          mix={className}
           style={style}
           onClick={clickHandler}
         >
           {children}
-        </ul>
+        </Block>
       </MenuContext.Provider>
     );
   },

web/libs/editor/src/common/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import { type ChangeEvent, type FC, forwardRef, type KeyboardEvent, useCallback, useMemo, useState } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { Select } from "@humansignal/ui";
 import { WithHotkey } from "../Hotkey/WithHotkey";
 import "./Pagination.scss";
@@ -66,23 +66,23 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
     }, [pageSizeOptions]);
 
     return (
-      <div className={cn("pagination").mod({ size, outline, align, noPadding, disabled }).toClassName()}>
-        <div className={cn("pagination").elem("navigation").toClassName()}>
+      <Block name="pagination" mod={{ size, outline, align, noPadding, disabled }}>
+        <Elem name="navigation">
           <>
             <NavigationButton
               mod={["arrow-left", "arrow-left-double"]}
               onClick={() => onChange?.(1)}
               disabled={currentPage === 1 || disabled}
             />
-            <div className={cn("pagination").elem("divider").toClassName()} />
+            <Elem name="divider" />
           </>
           <NavigationButton
             mod={["arrow-left"]}
             onClick={() => onChange?.(currentPage - 1)}
             hotkey={hotkey?.prev}
             disabled={currentPage === 1 || disabled}
           />
-          <div className={cn("pagination").elem("input").toClassName()}>
+          <Elem name="input">
             {inputMode ? (
               <input
                 type="text"
@@ -116,8 +116,8 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                 }}
               />
             ) : (
-              <div
-                className={cn("pagination").elem("page-indicator").toClassName()}
+              <Elem
+                name="page-indicator"
                 onClick={() => {
                   setInputMode(true);
                 }}
@@ -128,30 +128,30 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                     /*  */
                   }}
                 />
-              </div>
+              </Elem>
             )}
-          </div>
+          </Elem>
           <NavigationButton
             mod={["arrow-right"]}
             onClick={() => onChange?.(currentPage + 1)}
             disabled={currentPage === totalPages || disabled}
             hotkey={hotkey?.next}
           />
           <>
-            <div className={cn("pagination").elem("divider").toClassName()} />
+            <Elem name="divider" />
             <NavigationButton
               mod={["arrow-right", "arrow-right-double"]}
               onClick={() => onChange?.(totalPages)}
               disabled={currentPage === totalPages || disabled}
             />
           </>
-        </div>
+        </Elem>
         {pageSizeSelectable && (
-          <div className={cn("pagination").elem("page-size").toClassName()}>
+          <Elem name="page-size">
             <Select value={pageSize} onChange={handleChangeSelect} options={options} />
-          </div>
+          </Elem>
         )}
-      </div>
+      </Block>
     );
   },
 );
@@ -174,7 +174,7 @@ const NavigationButton: FC<NavigationButtonProps> = ({ mod, disabled, hotkey, on
 
   return (
     <WithHotkey binging={hotkey as HotkeyList}>
-      <div className={cn("pagination").elem("btn").mod(buttonMod).toClassName()} onClick={actionHandler} />
+      <Elem name="btn" mod={buttonMod} onClick={actionHandler} />
     </WithHotkey>
   );
 };

web/libs/editor/src/common/Range/Range.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type FC, type MouseEvent as RMouseEvent, useCallback } from "react";
-import { cn } from "../../utils/bem";
+import { Block, Elem } from "../../utils/bem";
 import { clamp, isDefined } from "../../utils/utilities";
 import { useValueTracker } from "../Utils/useValueTracker";
 import "./Range.scss";
@@ -138,20 +138,20 @@ export const Range: FC<RangeProps> = ({
   const sizeProperty = align === "horizontal" ? "minWidth" : "minHeight";
 
   return (
-    <div className={cn("range").mod({ align }).toClassName()} style={{ [sizeProperty]: size }}>
+    <Block name="range" mod={{ align }} style={{ [sizeProperty]: size }}>
       {reverse
         ? maxIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
+            <Elem name="icon" onMouseDown={increase}>
               {maxIcon}
-            </div>
+            </Elem>
           )
         : minIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
+            <Elem name="icon" onMouseDown={decrease}>
               {minIcon}
-            </div>
+            </Elem>
           )}
-      <div className={cn("range").elem("body").toClassName()} onClick={onClick}>
-        <div className={cn("range").elem("line").toClassName()} />
+      <Elem name="body" onClick={onClick}>
+        <Elem name="line" />
         <RangeIndicator align={align} reverse={reverse} value={currentValue} valueConvert={valueToPercentage} />
         {isMultiArray ? (
           arrayReverse(currentValue, reverse).map((value, i) => {
@@ -196,19 +196,19 @@ export const Range: FC<RangeProps> = ({
             onChange={(val) => updateValue(val, true, true)}
           />
         )}
-      </div>
+      </Elem>
       {reverse
         ? minIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
+            <Elem name="icon" onMouseDown={decrease}>
               {minIcon}
-            </div>
+            </Elem>
           )
         : maxIcon && (
-            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
+            <Elem name="icon" onMouseDown={increase}>
               {maxIcon}
-            </div>
+            </Elem>
           )}
-    </div>
+    </Block>
   );
 };
 
@@ -276,8 +276,8 @@ const RangeHandle: FC<RangeHandleProps> = ({
   };
 
   return (
-    <div
-      className={cn("range").elem("range-handle").toClassName()}
+    <Elem
+      name="range-handle"
       style={{ [offsetProperty]: `${valueConvert(value)}%` }}
       onMouseDownCapture={handleMouseDown}
       onDoubleClick={handleDoubleClick}
@@ -318,5 +318,5 @@ const RangeIndicator: FC<RangeIndicatorProps> = ({ value, valueConvert, align, r
     if (reverse && !multi) [style.top, style.bottom] = [style.bottom, style.top];
   }
 
-  return <div className={cn("range").elem("indicator").toClassName()} style={style} />;
+  return <Elem name="indicator" style={style} />;
 };

web/libs/editor/src/common/Space/Space.tsx

@@ -1,8 +1,9 @@
 import type { CSSProperties, FC } from "react";
-
-import { cn } from "../../utils/bem";
+import { BemWithSpecificContext } from "../../utils/bem";
 import "./Space.scss";
 
+const { Block } = BemWithSpecificContext();
+
 export interface SpaceProps {
   direction?: "horizontal" | "vertical";
   size?: "small" | "medium" | "large" | "none";
@@ -29,15 +30,14 @@ export const Space: FC<SpaceProps> = ({
   ...rest
 }) => {
   return (
-    <div
+    <Block
+      name="space"
+      mod={{ direction, size, spread, stretch, align, collapsed, truncated }}
+      mix={className}
       style={style}
       {...rest}
-      className={cn("space")
-        .mod({ direction, size, spread, stretch, align, collapsed, truncated })
-        .mix(className)
-        .toClassName()}
     >
       {children}
-    </div>
+    </Block>
   );
 };