refactor: ECHO-417: Complete BEM Migration: Settings, Label, and Tags Components

web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx

@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import { CurrentTask } from "../CurrentTask";
-import { BlockContext, cn } from "../../../utils/bem.ts";
 import { FF_LEAP_1173 } from "../../../utils/feature-flags";
 import { mockFF } from "../../../../__mocks__/global";
 
@@ -53,11 +52,7 @@ describe("CurrentTask", () => {
       ["skip", "postpone", "topbar:prevnext", "topbar:task-counter"].includes(interfaceName),
     );
 
-    const { rerender, getByTestId } = render(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    const { rerender, getByTestId } = render(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(false);
 
@@ -71,11 +66,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -89,11 +80,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -107,11 +94,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -125,11 +108,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
   });

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

@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import React, { useMemo } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { asVars } from "../../utils/styles";
 
 import "./Label.scss";
@@ -36,25 +36,19 @@ export const Label = React.forwardRef(
     }, [color]);
 
     return (
-      <Block
-        tag="span"
+      <span
         ref={ref}
-        name="label"
-        mod={{ empty, hidden, selected, clickable: !!onClick, margins }}
-        mix={className}
+        className={cn("label")
+          .mod({ empty, hidden, selected, clickable: !!onClick, margins })
+          .mix(className)
+          .toClassName()}
         style={styles}
         onClick={onClick}
         {...rest}
       >
-        <Elem tag="span" name="text">
-          {children}
-        </Elem>
-        {hotkey ? (
-          <Elem tag="span" name="hotkey">
-            {hotkey}
-          </Elem>
-        ) : null}
-      </Block>
+        <span className={cn("label").elem("text").toClassName()}>{children}</span>
+        {hotkey ? <span className={cn("label").elem("hotkey").toClassName()}>{hotkey}</span> : null}
+      </span>
     );
   },
 );

web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx

@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import { CurrentTask } from "../CurrentTask";
-import { BlockContext, cn } from "../../../utils/bem.ts";
 import { FF_LEAP_1173 } from "../../../utils/feature-flags";
 import { mockFF } from "../../../../__mocks__/global";
 
@@ -53,11 +52,7 @@ describe("CurrentTask", () => {
       ["skip", "postpone", "topbar:prevnext", "topbar:task-counter"].includes(interfaceName),
     );
 
-    const { rerender, getByTestId } = render(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    const { rerender, getByTestId } = render(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(false);
 
@@ -71,11 +66,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -89,11 +80,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -107,11 +94,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -125,11 +108,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
   });

web/libs/editor/src/tags/control/Choice.jsx

@@ -11,7 +11,7 @@ import Types from "../../core/Types";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
 import { TagParentMixin } from "../../mixins/TagParentMixin";
 import { FF_DEV_3391, isFF } from "../../utils/feature-flags";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Choice/Choice.scss";
 import { IconChevron } from "@humansignal/ui";
 import { HintTooltip } from "../../components/Taxonomy/Taxonomy";
@@ -194,16 +194,17 @@ const HtxNewChoiceView = ({ item, store }) => {
   const [collapsed, setCollapsed] = useState(false);
   const toogleCollapsed = useCallback(() => setCollapsed((collapsed) => !collapsed), []);
 
+  const CheckboxComponent = nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value);
+
   return (
-    <Block
-      name="choice"
-      mod={{ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible }}
+    <div
+      className={cn("choice")
+        .mod({ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible })
+        .toClassName()}
     >
-      <Elem name="item" mod={{ notLeaf: !item.isLeaf }} style={style}>
-        <Elem
-          name="checkbox"
-          component={nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value)}
-          mod={{ notLeaf: !item.isLeaf }}
+      <div className={cn("choice").elem("item").mod({ notLeaf: !item.isLeaf }).toClassName()} style={style}>
+        <CheckboxComponent
+          className={cn("choice").elem("checkbox").mod({ notLeaf: !item.isLeaf }).toClassName()}
           checked={item.sel}
           indeterminate={!item.sel && item.indeterminate}
           disabled={item.isReadOnly()}
@@ -213,21 +214,25 @@ const HtxNewChoiceView = ({ item, store }) => {
             {item.html ? <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.html) }} /> : item._value}
             {showHotkey && <Hint>[{item.hotkey}]</Hint>}
           </HintTooltip>
-        </Elem>
+        </CheckboxComponent>
         {!item.isLeaf ? (
-          <Elem name="toggle" mod={{ collapsed }} component={Button} type="text" onClick={toogleCollapsed}>
+          <Button
+            className={cn("choice").elem("toggle").mod({ collapsed }).toClassName()}
+            type="text"
+            onClick={toogleCollapsed}
+          >
             <IconChevron />
-          </Elem>
+          </Button>
         ) : (
           false
         )}
-      </Elem>
+      </div>
       {item.nestedResults && item.children?.length ? (
-        <Elem name="children" mod={{ collapsed }}>
+        <div className={cn("choice").elem("children").mod({ collapsed }).toClassName()}>
           {Tree.renderChildren(item, item.annotation)}
-        </Elem>
+        </div>
       ) : null}
-    </Block>
+    </div>
   );
 };
 

web/libs/editor/src/tags/control/Choices.jsx

@@ -12,7 +12,7 @@ import Types from "../../core/Types";
 import { guidGenerator } from "../../core/Helpers";
 import ControlBase from "./Base";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Choices/Choices.scss";
 
 import "./Choice";
@@ -292,13 +292,14 @@ const ChoicesSelectLayout = observer(({ item }) => {
 
 const HtxChoices = observer(({ item }) => {
   return (
-    <Block
-      name="choices"
-      mod={{ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout }}
+    <div
+      className={cn("choices")
+        .mod({ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout })
+        .toClassName()}
       ref={item.elementRef}
     >
       {item.layout === "select" ? <ChoicesSelectLayout item={item} /> : Tree.renderChildren(item, item.annotation)}
-    </Block>
+    </div>
   );
 });
 

web/libs/editor/src/tags/control/Labels/Labels.jsx

@@ -11,7 +11,7 @@ import { AnnotationMixin } from "../../../mixins/AnnotationMixin";
 import DynamicChildrenMixin from "../../../mixins/DynamicChildrenMixin";
 import LabelMixin from "../../../mixins/LabelMixin";
 import SelectedModelMixin from "../../../mixins/SelectedModel";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import ControlBase from "../Base";
 import "../Label";
 import "./Labels.scss";
@@ -146,9 +146,9 @@ const LabelsModel = types.compose(
 
 const HtxLabels = observer(({ item }) => {
   return (
-    <Block name="labels" mod={{ hidden: !item.visible, inline: item.showinline }}>
+    <div className={cn("labels").mod({ hidden: !item.visible, inline: item.showinline }).toClassName()}>
       {Tree.renderChildren(item, item.annotation)}
-    </Block>
+    </div>
   );
 });