feat(@ui): migrate checkbox component

src/components/common/AgeGate.tsx

@@ -6,13 +6,11 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, Checkbox } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../mobx/State";
 import { SECTION_NSFW } from "../../mobx/stores/Layout";
 
-import Checkbox from "../ui/Checkbox";
-
 import { Children } from "../../types/Preact";
 
 const Base = styled.div`
@@ -81,10 +79,10 @@ export default observer((props: Props) => {
             </span>
 
             <Checkbox
-                checked={layout.getSectionState(SECTION_NSFW, false)}
-                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}>
-                <Text id="app.main.channel.nsfw.confirm" />
-            </Checkbox>
+                title={<Text id="app.main.channel.nsfw.confirm" />}
+                value={layout.getSectionState(SECTION_NSFW, false)}
+                onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}
+            />
             <div className="actions">
                 <Button palette="secondary" onClick={() => history.goBack()}>
                     <Text id="app.special.modals.actions.back" />

src/components/common/user/UserCheckbox.tsx

@@ -1,11 +1,11 @@
 import { User } from "revolt.js";
 
-import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
+import { Checkbox } from "@revoltchat/ui";
 
 import UserIcon from "./UserIcon";
 import { Username } from "./UserShort";
 
-type UserProps = Omit<CheckboxProps, "children"> & { user: User };
+type UserProps = { value: boolean; onChange: (v: boolean) => void; user: User };
 
 export default function UserCheckbox({ user, ...props }: UserProps) {
     return (

src/components/settings/AppearanceShims.tsx

@@ -6,6 +6,8 @@ import pSBC from "shade-blend-color";
 
 import { Text } from "preact-i18n";
 
+import { Checkbox } from "@revoltchat/ui";
+
 import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
 
 import { useApplicationState } from "../../mobx/State";
@@ -19,12 +21,10 @@ import {
     MONOSPACE_FONT_KEYS,
 } from "../../context/Theme";
 
-import Checkbox from "../ui/Checkbox";
 import ColourSwatches from "../ui/ColourSwatches";
 import ComboBox from "../ui/ComboBox";
 import Radio from "../ui/Radio";
 import CategoryButton from "../ui/fluent/CategoryButton";
-
 import { EmojiSelector } from "./appearance/EmojiSelector";
 import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
 
@@ -200,13 +200,13 @@ export const DisplayLigaturesShim = observer(() => {
     return (
         <>
             <Checkbox
-                checked={settings.get("appearance:ligatures") ?? false}
+                value={settings.get("appearance:ligatures") ?? false}
                 onChange={(v) => settings.set("appearance:ligatures", v)}
+                title={<Text id="app.settings.pages.appearance.ligatures" />}
                 description={
                     <Text id="app.settings.pages.appearance.ligatures_desc" />
-                }>
-                <Text id="app.settings.pages.appearance.ligatures" />
-            </Checkbox>
+                }
+            />
         </>
     );
 });
@@ -219,13 +219,15 @@ export const ShowSendButtonShim = observer(() => {
 
     return (
         <Checkbox
-            checked={settings.get("appearance:show_send_button") ?? false}
+            value={settings.get("appearance:show_send_button") ?? false}
             onChange={(v) => settings.set("appearance:show_send_button", v)}
+            title={
+                <Text id="app.settings.pages.appearance.appearance_options.show_send" />
+            }
             description={
                 <Text id="app.settings.pages.appearance.appearance_options.show_send_desc" />
-            }>
-            <Text id="app.settings.pages.appearance.appearance_options.show_send" />
-        </Checkbox>
+            }
+        />
     );
 });
 
@@ -237,13 +239,15 @@ export const DisplaySeasonalShim = observer(() => {
 
     return (
         <Checkbox
-            checked={settings.get("appearance:seasonal") ?? true}
+            value={settings.get("appearance:seasonal") ?? true}
             onChange={(v) => settings.set("appearance:seasonal", v)}
+            title={
+                <Text id="app.settings.pages.appearance.theme_options.seasonal" />
+            }
             description={
                 <Text id="app.settings.pages.appearance.theme_options.seasonal_desc" />
-            }>
-            <Text id="app.settings.pages.appearance.theme_options.seasonal" />
-        </Checkbox>
+            }
+        />
     );
 });
 
@@ -255,13 +259,15 @@ export const DisplayTransparencyShim = observer(() => {
 
     return (
         <Checkbox
-            checked={settings.get("appearance:transparency") ?? true}
+            value={settings.get("appearance:transparency") ?? true}
             onChange={(v) => settings.set("appearance:transparency", v)}
+            title={
+                <Text id="app.settings.pages.appearance.theme_options.transparency" />
+            }
             description={
                 <Text id="app.settings.pages.appearance.theme_options.transparency_desc" />
-            }>
-            <Text id="app.settings.pages.appearance.theme_options.transparency" />
-        </Checkbox>
+            }
+        />
     );
 });
 

src/components/settings/roles/PermissionSelect.tsx

@@ -7,8 +7,7 @@ import styled, { css } from "styled-components";
 import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";
 
-import Checkbox from "../../ui/Checkbox";
-import { OverrideSwitch } from "@revoltchat/ui";
+import { Checkbox, OverrideSwitch } from "@revoltchat/ui";
 
 interface PermissionSelectProps {
     id: keyof typeof Permission;
@@ -136,7 +135,7 @@ export function PermissionSelect({
             ) : (
                 <Checkbox
                     disabled={disabled}
-                    checked={state === "Allow"}
+                    value={state === "Allow"}
                     onChange={() =>
                         onChange(
                             Long.fromNumber(value, false)

src/components/ui/Checkbox.tsx

@@ -1,123 +0,0 @@
-import { Check } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-export const CheckboxBase = styled.label`
-    gap: 4px;
-    z-index: 1;
-    display: flex;
-    margin-top: 20px;
-    align-items: center;
-    border-radius: var(--border-radius);
-
-    cursor: pointer;
-    font-size: 18px;
-    user-select: none;
-
-    transition: 0.2s ease all;
-
-    input {
-        display: none;
-    }
-
-    &:hover {
-        .check {
-            background: var(--background);
-        }
-    }
-
-    &[disabled] {
-        opacity: 0.5;
-        cursor: not-allowed;
-
-        &:hover {
-            background: unset;
-        }
-    }
-`;
-
-const CheckboxContent = styled.span`
-    display: flex;
-    flex-grow: 1;
-    font-size: 14px;
-    gap: 2px;
-    font-weight: 600;
-    flex-direction: column;
-`;
-
-const CheckboxDescription = styled.span`
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--secondary-foreground);
-`;
-
-export const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
-    margin: 4px;
-    width: 24px;
-    height: 24px;
-    display: grid;
-    flex-shrink: 0;
-    place-items: center;
-    transition: 0.2s ease all;
-    border-radius: var(--border-radius);
-    background: var(--secondary-background);
-
-    svg {
-        color: var(--secondary-background);
-    }
-
-    ${(props) =>
-        props.contrast &&
-        css`
-            background: var(--primary-background);
-
-            svg {
-                color: var(--primary-background);
-            }
-        `}
-
-    ${(props) =>
-        props.checked &&
-        css`
-            background: var(--accent) !important;
-        `}
-`;
-
-export interface CheckboxProps {
-    checked: boolean;
-    disabled?: boolean;
-    contrast?: boolean;
-    className?: string;
-    children?: Children;
-    description?: Children;
-    onChange: (state: boolean) => void;
-}
-
-export default function Checkbox(props: CheckboxProps) {
-    return (
-        <CheckboxBase disabled={props.disabled} className={props.className}>
-            <CheckboxContent>
-                <span>{props.children}</span>
-                {props.description && (
-                    <CheckboxDescription>
-                        {props.description}
-                    </CheckboxDescription>
-                )}
-            </CheckboxContent>
-            <input
-                type="checkbox"
-                checked={props.checked}
-                onChange={() =>
-                    !props.disabled && props.onChange(!props.checked)
-                }
-            />
-            <Checkmark
-                checked={props.checked}
-                contrast={props.contrast}
-                className="check">
-                <Check size={20} />
-            </Checkmark>
-        </CheckboxBase>
-    );
-}