feat: OPTIC-1332: componetize Toggle and Label components

web/apps/labelstudio/src/components/Form/Elements/Label/Label.jsx

@@ -1,7 +1,7 @@
 import { createElement } from "react";
 import { cn } from "../../../../utils/bem";
 import "./Label.scss";
-
+/** @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently */
 const Label = ({ text, children, required, placement, description, size, large, style, simple, flat }) => {
   const rootClass = cn("label-ls");
   const classList = [rootClass];

web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.jsx

@@ -1,9 +1,8 @@
 import { forwardRef, useEffect, useMemo } from "react";
-import { cn } from "../../../../utils/bem";
+import { Toggle as UiToggle } from "@humansignal/ui";
 import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
 import { default as Label } from "../Label/Label";
-import "./Toggle.scss";
 
 const Toggle = forwardRef(
   (
@@ -22,22 +21,13 @@ const Toggle = forwardRef(
     },
     ref,
   ) => {
-    const rootClass = cn("toggle");
     const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
     const [isChecked, setIsChecked] = useValueTracker(checked, defaultChecked ?? false);
 
-    const classList = [rootClass];
-    const mods = {};
-
     useEffect(() => {
       setIsChecked(initialChecked);
     }, [initialChecked]);
 
-    if (isChecked) mods.checked = isChecked;
-    mods.disabled = props.disabled;
-
-    classList.push(rootClass.mod(mods), className);
-
     const formField = (
       <FormField
         ref={label ? null : ref}
@@ -50,24 +40,18 @@ const Toggle = forwardRef(
         {...props}
       >
         {(ref) => (
-          <div className={classList.join(" ")}>
-            <input
-              ref={ref}
-              {...props}
-              className={rootClass.elem("input")}
-              type="checkbox"
-              checked={isChecked}
-              onChange={(e) => {
-                setIsChecked(e.target.checked);
-                onChange?.(e);
-              }}
-            />
-            <span className={rootClass.elem("indicator")} />
-          </div>
+          <UiToggle
+            ref={ref}
+            {...props}
+            checked={isChecked}
+            onChange={(e) => {
+              setIsChecked(e.target.checked);
+              onChange?.(e);
+            }}
+          />
         )}
       </FormField>
     );
-
     return label ? (
       <Label
         ref={ref}

web/apps/labelstudio/src/components/Form/Elements/index.ts

@@ -4,4 +4,3 @@ export { default as Label } from "./Label/Label";
 export { default as Select } from "./Select/Select";
 export { default as TextArea } from "./TextArea/TextArea";
 export { default as Toggle } from "./Toggle/Toggle";
-export { default as ToggleRight } from "./ToggleRight/ToggleRight";

web/apps/labelstudio/src/pages/ExportPage/ExportPage.jsx

@@ -100,51 +100,6 @@ export const ExportPage = () => {
     }
   }, [pageParams]);
 
-  // const formatSelect = (
-  //   <Label text="Export format" style={{display: "block", width: "mix-content"}} flat>
-  //     <Dropdown.Trigger content={(
-  //       <Menu size="medium">
-  //         {Object.entries(formats).map(([key, value]) => {
-  //           return <Menu.Item key={key} onClick={() => setFormat(key)}>{value}</Menu.Item>;
-  //         })}
-  //       </Menu>
-  //     )}>
-  //       <Button size="small" style={{textAlign: "left"}}>
-  //         <span>{formats[format]}</span>
-  //       </Button>
-  //     </Dropdown.Trigger>
-  //   </Label>
-  // );
-
-  // const aggregation = (
-  //   <Form.Row columnCount={2}>
-  //     {/* TODO: We don't have api for different formats yet, so let's hide the select for now */}
-  //     {/* {formatSelect} */}
-
-  //     <RadioGroup label="Aggregation of annotations" size="small" name="aggregator_type" labelProps={{size: "large", flat: true}}>
-  //       <RadioGroup.Button value="majority_vote" checked>
-  //         Majority vote
-  //       </RadioGroup.Button>
-  //       <RadioGroup.Button value="no_aggregation">
-  //         No aggregation
-  //       </RadioGroup.Button>
-  //     </RadioGroup>
-  //   </Form.Row>
-  // );
-
-  // const exportHistory = (
-  //   <Label text="Previous exports" size="large" flat>
-  //     {previousExports.map(file => {
-  //       const basename = file.url.split('/').reverse()[0];
-  //       return (
-  //         <Button key={file.url} href={file.url} size="medium" download={basename} icon={<FaFileDownload/>}>
-  //           {basename}
-  //         </Button>
-  //       );
-  //     })}
-  //   </Label>
-  // );
-
   return (
     <Modal
       onHide={() => {
@@ -169,14 +124,6 @@ export const ExportPage = () => {
 
         <Form ref={form}>
           <Input type="hidden" name="exportType" value={currentFormat} />
-
-          {/* {aggregation} */}
-
-          {/*<Form.Row columnCount={3} style={{marginTop: 24}}>*/}
-          {/*  <Toggle label="Only finished tasks" name="finished" checked/>*/}
-          {/*  <Toggle label="Include full task descriptions" name="return_task" checked/>*/}
-          {/*  <Toggle label="Include predictions" name="return_predictions" checked/>*/}
-          {/*</Form.Row>*/}
         </Form>
 
         <Elem name="footer">

web/apps/labelstudio/src/pages/WebhookPage/WebhookList.jsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { LsPencil } from "../../assets/icons";
 import { IconCross } from "@humansignal/ui";
 import { Button } from "../../components";
-import { Toggle } from "../../components/Form";
+import { Toggle } from "@humansignal/ui";
 import { Block, Elem } from "../../utils/bem";
 import "./WebhookPage.scss";
 import { format } from "date-fns";

web/libs/datamanager/src/components/Common/Form/Elements/Label/Label.jsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import { Block, Elem } from "../../../../../utils/bem";
 import "./Label.scss";
-
+/** @deprecated - needs to be replaced with @humansignal/ui Label - visualizes differently currently */
 const Label = forwardRef(
   ({ text, children, required, placement, description, size, large, style, simple, flat }, ref) => {
     const tagName = simple ? "div" : "label";