refactor: ECHO-415: BEM Migration in editor

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

@@ -8,10 +8,11 @@ import {
   forwardRef,
   type ForwardRefExoticComponent,
   useMemo,
+  createElement,
 } from "react";
 import { Hotkey } from "../../core/Hotkey";
 import { useHotkey } from "../../hooks/useHotkey";
-import { Block, type CNTagName, Elem } from "../../utils/bem";
+import { cn, type CNTagName } from "../../utils/bem";
 import { isDefined } from "../../utils/utilities";
 import "./Button.scss";
 
@@ -107,18 +108,23 @@ export const Button: ButtonType<ButtonProps> = forwardRef(
 
     useHotkey(hotkey, rest.onClick as unknown as Keymaster.KeyHandler, hotkeyScope);
 
-    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>
+    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}
+      </>,
     );
 
     if (
@@ -148,9 +154,9 @@ Button.displayName = "Button";
 
 const Group: FC<ButtonGroupProps> = ({ className, children, collapsed }) => {
   return (
-    <Block name="button-group" mod={{ collapsed }} mix={className}>
+    <div className={cn("button-group").mod({ collapsed }).mix(className).toClassName()}>
       {children}
-    </Block>
+    </div>
   );
 };
 

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 { Block, cn } from "../../utils/bem";
+import { 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,19 +213,18 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
     }, [props.style, dropdownIndex, minIndex, offset]);
 
     const result = (
-      <Block
-        ref={dropdown}
-        name="dropdown"
+      <div
+        ref={dropdown as any}
         data-testid={props.dataTestId}
-        mix={[props.className, visibilityClasses]}
+        className={rootName.mix(props.className, visibilityClasses).toClassName()}
         style={{
           ...compositeStyles,
           borderRadius: isFF(FF_DEV_3873) && 4,
         }}
         onClick={(e: MouseEvent) => e.stopPropagation()}
       >
         {content}
-      </Block>
+      </div>
     );
 
     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 { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Icon.scss";
 
 export const Icon = React.forwardRef(({ icon, ...props }, ref) => {
   return (
-    <Block tag="span" name="icon" ref={ref}>
+    <span ref={ref} className={cn("icon").toClassName()}>
       {React.createElement(icon, props)}
-    </Block>
+    </span>
   );
 });

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

@@ -1,5 +1,5 @@
-import { forwardRef } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { createElement, forwardRef } from "react";
+import { cn } from "../../utils/bem";
 import "./Label.scss";
 
 export const Label = forwardRef(
@@ -14,16 +14,21 @@ export const Label = forwardRef(
       empty: !children,
     };
 
-    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>
+    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>,
     );
   },
 );

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

@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useMemo } from "react";
-import { Block, cn } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { useDropdown } from "../Dropdown/DropdownTrigger";
 import "./Menu.scss";
 import { MenuContext } from "./MenuContext";
@@ -34,17 +34,14 @@ export const Menu = forwardRef(
 
     return (
       <MenuContext.Provider value={contextValue}>
-        <Block
+        <ul
           ref={ref}
-          tag="ul"
-          name="menu"
-          mod={{ size, collapsed }}
-          mix={className}
+          className={cn("menu").mod({ size, collapsed }).mix(className).toClassName()}
           style={style}
           onClick={clickHandler}
         >
           {children}
-        </Block>
+        </ul>
       </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 { Block, Elem } from "../../utils/bem";
+import { cn } 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 (
-      <Block name="pagination" mod={{ size, outline, align, noPadding, disabled }}>
-        <Elem name="navigation">
+      <div className={cn("pagination").mod({ size, outline, align, noPadding, disabled }).toClassName()}>
+        <div className={cn("pagination").elem("navigation").toClassName()}>
           <>
             <NavigationButton
               mod={["arrow-left", "arrow-left-double"]}
               onClick={() => onChange?.(1)}
               disabled={currentPage === 1 || disabled}
             />
-            <Elem name="divider" />
+            <div className={cn("pagination").elem("divider").toClassName()} />
           </>
           <NavigationButton
             mod={["arrow-left"]}
             onClick={() => onChange?.(currentPage - 1)}
             hotkey={hotkey?.prev}
             disabled={currentPage === 1 || disabled}
           />
-          <Elem name="input">
+          <div className={cn("pagination").elem("input").toClassName()}>
             {inputMode ? (
               <input
                 type="text"
@@ -116,8 +116,8 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                 }}
               />
             ) : (
-              <Elem
-                name="page-indicator"
+              <div
+                className={cn("pagination").elem("page-indicator").toClassName()}
                 onClick={() => {
                   setInputMode(true);
                 }}
@@ -128,30 +128,30 @@ export const Pagination: FC<PaginationProps> = forwardRef<any, PaginationProps>(
                     /*  */
                   }}
                 />
-              </Elem>
+              </div>
             )}
-          </Elem>
+          </div>
           <NavigationButton
             mod={["arrow-right"]}
             onClick={() => onChange?.(currentPage + 1)}
             disabled={currentPage === totalPages || disabled}
             hotkey={hotkey?.next}
           />
           <>
-            <Elem name="divider" />
+            <div className={cn("pagination").elem("divider").toClassName()} />
             <NavigationButton
               mod={["arrow-right", "arrow-right-double"]}
               onClick={() => onChange?.(totalPages)}
               disabled={currentPage === totalPages || disabled}
             />
           </>
-        </Elem>
+        </div>
         {pageSizeSelectable && (
-          <Elem name="page-size">
+          <div className={cn("pagination").elem("page-size").toClassName()}>
             <Select value={pageSize} onChange={handleChangeSelect} options={options} />
-          </Elem>
+          </div>
         )}
-      </Block>
+      </div>
     );
   },
 );
@@ -174,7 +174,7 @@ const NavigationButton: FC<NavigationButtonProps> = ({ mod, disabled, hotkey, on
 
   return (
     <WithHotkey binging={hotkey as HotkeyList}>
-      <Elem name="btn" mod={buttonMod} onClick={actionHandler} />
+      <div className={cn("pagination").elem("btn").mod(buttonMod).toClassName()} 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 { Block, Elem } from "../../utils/bem";
+import { cn } 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 (
-    <Block name="range" mod={{ align }} style={{ [sizeProperty]: size }}>
+    <div className={cn("range").mod({ align }).toClassName()} style={{ [sizeProperty]: size }}>
       {reverse
         ? maxIcon && (
-            <Elem name="icon" onMouseDown={increase}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
               {maxIcon}
-            </Elem>
+            </div>
           )
         : minIcon && (
-            <Elem name="icon" onMouseDown={decrease}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
               {minIcon}
-            </Elem>
+            </div>
           )}
-      <Elem name="body" onClick={onClick}>
-        <Elem name="line" />
+      <div className={cn("range").elem("body").toClassName()} onClick={onClick}>
+        <div className={cn("range").elem("line").toClassName()} />
         <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)}
           />
         )}
-      </Elem>
+      </div>
       {reverse
         ? minIcon && (
-            <Elem name="icon" onMouseDown={decrease}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={decrease}>
               {minIcon}
-            </Elem>
+            </div>
           )
         : maxIcon && (
-            <Elem name="icon" onMouseDown={increase}>
+            <div className={cn("range").elem("icon").toClassName()} onMouseDown={increase}>
               {maxIcon}
-            </Elem>
+            </div>
           )}
-    </Block>
+    </div>
   );
 };
 
@@ -276,8 +276,8 @@ const RangeHandle: FC<RangeHandleProps> = ({
   };
 
   return (
-    <Elem
-      name="range-handle"
+    <div
+      className={cn("range").elem("range-handle").toClassName()}
       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 <Elem name="indicator" style={style} />;
+  return <div className={cn("range").elem("indicator").toClassName()} style={style} />;
 };

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

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