feat: OPTIC-1332: componetize Toggle and Label components

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

@@ -4,6 +4,7 @@ import { FormField } from "../../FormField";
 import { useValueTracker } from "../../Utils";
 import { default as Label } from "../Label/Label";
 import "./Toggle.scss";
+import { Toggle as UiToggle } from "@humansignal/ui";
 
 const Toggle = forwardRef(
   (
@@ -51,23 +52,16 @@ const Toggle = forwardRef(
       >
         {(ref) => (
           <div className={classList.join(" ")}>
-            <input
-              ref={ref}
+            <UiToggle ref={ref}
               {...props}
-              className={rootClass.elem("input")}
-              type="checkbox"
-              checked={isChecked}
-              onChange={(e) => {
+              checked={isChecked} onChange={(e) => {
                 setIsChecked(e.target.checked);
                 onChange?.(e);
-              }}
-            />
-            <span className={rootClass.elem("indicator")} />
+              }} />
           </div>
         )}
       </FormField>
     );
-
     return label ? (
       <Label
         ref={ref}

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

@@ -1,4 +1,4 @@
-.toggle {
+.toggle { 
   width: 42px;
   height: 24px;
   display: block;

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/editor/src/common/Toggle/Toggle.scss

@@ -1,5 +1,5 @@
 .toggle {
-  width: 42px;
+  width: 42px; 
   height: 24px;
   display: block;
   min-width: 42px;

web/libs/editor/src/components/AnnotationTab/AutoAcceptToggle.jsx

@@ -4,7 +4,7 @@ import { IconCheck, IconCross } from "../../assets/icons";
 import { Button } from "../../common/Button/Button";
 import { Block, Elem } from "../../utils/bem";
 import { Space } from "../../common/Space/Space";
-import Toggle from "../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 
 import "./AutoAcceptToggle.scss";
 
@@ -59,7 +59,6 @@ export const AutoAcceptToggle = injector(
                   checked={store.autoAcceptSuggestions}
                   onChange={(e) => store.setAutoAcceptSuggestions(e.target.checked)}
                   label="Auto-Accept Suggestions"
-                  style={{ color: "#7F64FF" }}
                 />
               )}
             </Space>

web/libs/editor/src/components/AnnotationTab/DynamicPreannotationsToggle.jsx

@@ -1,7 +1,7 @@
 import { inject, observer } from "mobx-react";
 import { useEffect } from "react";
 import { Space } from "../../common/Space/Space";
-import Toggle from "../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 import ToolsManager from "../../tools/Manager";
 import { Block, Elem } from "../../utils/bem";
 import "./DynamicPreannotationsToggle.scss";
@@ -30,7 +30,6 @@ export const DynamicPreannotationsToggle = inject("store")(
                 }
               }}
               label="Auto-Annotation"
-              style={{ color: "#7F64FF" }}
             />
           </Space>
         </Elem>

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

@@ -12,7 +12,7 @@ import { triggerResizeEvent } from "../../utils/utilities";
 import EditorSettings from "../../core/settings/editorsettings";
 import * as TagSettings from "./TagSettings";
 import { LsClose } from "../../assets/icons";
-import Toggle from "../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 import { FF_DEV_3873, isFF } from "../../utils/feature-flags";
 
 const HotkeysDescription = () => {

web/libs/editor/src/tags/object/Paragraphs/HtxParagraphs.jsx

@@ -8,7 +8,7 @@ import { isSelectionContainsSpan } from "../../../utils/selection-tools";
 import styles from "./Paragraphs.module.scss";
 import { AuthorFilter } from "./AuthorFilter";
 import { Phrases } from "./Phrases";
-import Toggle from "../../../common/Toggle/Toggle";
+import { Toggle } from "@humansignal/ui";
 import { IconHelp } from "../../../assets/icons";
 import { Tooltip } from "../../../common/Tooltip/Tooltip";
 import { cn } from "../../../utils/bem";

web/libs/ui/src/index.ts

@@ -1,4 +1,6 @@
 export * from "./lib/checkbox/checkbox";
 export * from "./lib/Toast/Toast";
+export * from "./lib/label/label";
+export * from "./lib/toggle/toggle";
 
 export * from "./assets/icons";

web/libs/ui/src/lib/label/label.module.scss

@@ -0,0 +1,87 @@
+.label {
+  margin-bottom: 0;
+
+  &__text {
+    padding: 0 16px;
+    height: 22px;
+    display: flex;
+    margin-bottom: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    justify-content: space-between;
+  }
+
+  &__content{
+
+  }
+
+  &__description {
+    margin-top: 5px;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--sand_500);
+  }
+
+  &__field {
+    line-height: 0;
+  }
+
+  &_size_small &__text {
+    font-size: 10px;
+    margin: 0;
+    height: 14px;
+    line-height: 14px;
+  }
+
+  &_size_large &__text {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    margin-bottom: 16px;
+  }
+
+  &_flat &__text {
+    padding: 0;
+  }
+
+  .input,
+  .select,
+  .textarea {
+    width: 100%;
+  }
+
+  &[data-required] &__text::after {
+    content: "Required";
+    color: var(--sand_500);
+  }
+
+  &_placement_right {
+    display: inline-flex;
+    flex-direction: row-reverse;
+  }
+
+  &_placement_left {
+    display: inline-flex;
+  }
+
+  &_empty &__text,
+  &_placement_right &__text,
+  &_placement_left &__text {
+    margin-bottom: 0;
+    font-size: 16px;
+    line-height: 22px;
+    height: auto;
+    align-items: center;
+  }
+
+  &_placement_right:not(.label_withDescription) &__field,
+  &_placement_left:not(.label_withDescription) &__field {
+    display: flex;
+    align-items: center;
+  }
+
+  &_placement_right.label_withDescription &__field,
+  &_placement_left.label_withDescription &__field {
+    margin-top: 5px;
+  }
+}

web/libs/ui/src/lib/label/label.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import styles from "./label.module.scss";
+type LabelProps = {
+  text: string;
+  children?: any;
+  required: false;
+  placement?: "right" | "left";
+  description?: string;
+  size?: "large" | "small";
+  style?: any;
+  simple: false;
+  flat: false;
+}
+export const Label = forwardRef(
+  ({ text, children, required, placement="left", description, size="small", style:inlineStyle, simple, flat }:LabelProps) => {
+    const TagName = simple ? "div" : "label";
+
+    return (
+      <TagName style={inlineStyle} data-required={required} className={clsx(styles.label, { [styles.label_size_small]: size==="small", [styles.label_size_large]: size==="large", [styles.label_flat]: flat, [styles.label_placement_left]: placement==="left", [styles.label_placement_right]: placement==="right", [styles.label_withDescription]: !!description, [styles.label_empty]: !children})}>
+        <span className={clsx(styles.label__text)}>
+          <span className={clsx(styles.label__content)}>
+            {text}
+            {description && <span className={clsx(styles.label__description)}>{description}</span>}
+          </span>
+        </span>
+        <span className={clsx(styles.label__field)}>{children}</span>
+      </TagName>
+    );
+  },
+);

web/libs/ui/src/lib/toggle/toggle.module.scss

@@ -0,0 +1,72 @@
+.toggle {
+  width: 42px; 
+  height: 24px;
+  display: block;
+  min-width: 42px;
+  max-height: 24px;
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  color: var(--toggle-color, var(--grape_500));
+  transition: box-shadow 80ms ease;
+  background: linear-gradient(0deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 5%)), var(--sand_0);
+  box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%), inset 0 0 0 1px rgb(0 0 0 / 5%);
+
+  &__input {
+    top: 0;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  &__indicator {
+    height: 24px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 120ms ease;
+
+    &::before {
+      content: "";
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      transition: all 120ms ease;
+      background: var(--sand_200);
+      box-shadow: 0 5px 10px rgb(0 0 0 / 15%), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 5%);
+    }
+  }
+
+  &_checked &__indicator {
+    margin-left: 18px;
+
+    &::before {
+      width: 16px;
+      height: 16px;
+      background: currentcolor;
+      box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%);
+    }
+  }
+
+  &_disabled {
+    box-shadow: none;
+    pointer-events: none;
+    background: var(--sand_200);
+  }
+
+  &_disabled &__indicator {
+    transition: none;
+  }
+
+  &_disabled &__indicator::before,
+  &_disabled.toggle_checked &__indicator::before {
+    box-shadow: none;
+    transition: none;
+    background-color: var(--sand_500);
+  }
+}

web/libs/ui/src/lib/toggle/toggle.tsx

@@ -0,0 +1,58 @@
+import { ChangeEvent, forwardRef, useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import {Label} from "@humansignal/ui";
+import styles from "./toggle.module.scss";
+
+type ToggleProps = {
+  className?: string;
+  label?: string;
+  labelProps: any;
+  description?: string;
+  checked: false;
+  defaultChecked: false;
+  onChange: (e:React.ChangeEvent<HTMLInputElement>) => void;
+  required: false;
+  style: any;
+  disabled: false;
+}
+
+export const Toggle = forwardRef(
+  (
+    { className, label, labelProps, description, checked, defaultChecked, onChange, required, style, ...props }:ToggleProps, ref
+  ) => {
+    const initialChecked = useMemo(() => defaultChecked ?? checked ?? false, [defaultChecked, checked]);
+    const [isChecked, setIsChecked] = useState<boolean>(defaultChecked ?? checked ?? false);
+    useEffect(() => {
+      setIsChecked(initialChecked);
+    }, [initialChecked]);
+
+    const formField = (
+      <div className={clsx(styles.toggle, { [styles.toggle_disabled]: props.disabled, [styles.toggle_checked]: isChecked })} style={style}>
+        <input
+          {...props}
+          ref={ref}
+          className={clsx(styles.toggle__input)}
+          type="checkbox"
+          checked={isChecked}
+          onChange={(e:React.ChangeEvent<HTMLInputElement>) => {
+            setIsChecked(e.target.checked);
+            onChange?.(e);
+          }}
+        />
+        <span className={clsx(styles.toggle__indicator)} />
+      </div>
+    );
+
+    return label ? (
+      <Label
+        placement="right"
+        required={required}
+        text={label}
+        description={description}
+        {...(labelProps ?? {})}
+      >{formField}</Label>
+    ) : (
+      formField
+    );
+  },
+);