feat(@ui): migrate colour swatches and combo box

src/components/common/LocaleSelector.tsx

@@ -1,6 +1,6 @@
-import { useApplicationState } from "../../mobx/State";
+import { ComboBox } from "@revoltchat/ui";
 
-import ComboBox from "../ui/ComboBox";
+import { useApplicationState } from "../../mobx/State";
 
 import { Language, Languages } from "../../../external/lang/Languages";
 

src/components/settings/AppearanceShims.tsx

@@ -6,7 +6,7 @@ import pSBC from "shade-blend-color";
 
 import { Text } from "preact-i18n";
 
-import { Checkbox } from "@revoltchat/ui";
+import { Checkbox, ColourSwatches, ComboBox } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
 
@@ -21,8 +21,6 @@ import {
     MONOSPACE_FONT_KEYS,
 } from "../../context/Theme";
 
-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";

src/components/ui/ColourSwatches.tsx

@@ -1,162 +0,0 @@
-import { Check } from "@styled-icons/boxicons-regular";
-import { Palette } from "@styled-icons/boxicons-solid";
-import styled, { css } from "styled-components/macro";
-
-import { RefObject } from "preact";
-import { useRef } from "preact/hooks";
-
-import { useDebounceCallback } from "../../lib/debounce";
-
-interface Props {
-    value: string;
-    onChange: (value: string) => void;
-}
-
-const presets = [
-    [
-        "#7B68EE",
-        "#3498DB",
-        "#1ABC9C",
-        "#F1C40F",
-        "#FF7F50",
-        "#FD6671",
-        "#E91E63",
-        "#D468EE",
-    ],
-    [
-        "#594CAD",
-        "#206694",
-        "#11806A",
-        "#C27C0E",
-        "#CD5B45",
-        "#FF424F",
-        "#AD1457",
-        "#954AA8",
-    ],
-];
-
-const SwatchesBase = styled.div`
-    /*gap: 8px;*/
-    display: flex;
-
-    input {
-        width: 0;
-        height: 0;
-        top: 72px;
-        opacity: 0;
-        padding: 0;
-        border: 0;
-        position: relative;
-        pointer-events: none;
-    }
-
-    .overlay {
-        position: relative;
-        width: 0;
-
-        div {
-            width: 8px;
-            height: 68px;
-            background: linear-gradient(
-                to right,
-                var(--primary-background),
-                transparent
-            );
-        }
-    }
-`;
-
-const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
-    flex-shrink: 0;
-    cursor: pointer;
-    border-radius: var(--border-radius);
-    background-color: ${(props) => props.colour};
-
-    display: grid;
-    place-items: center;
-
-    &:hover {
-        border: 3px solid var(--foreground);
-        transition: border ease-in-out 0.07s;
-    }
-
-    svg {
-        color: white;
-    }
-
-    ${(props) =>
-        props.type === "small"
-            ? css`
-                  width: 30px;
-                  height: 30px;
-
-                  svg {
-                      /*stroke-width: 2;*/
-                  }
-              `
-            : css`
-                  width: 68px;
-                  height: 68px;
-              `}
-`;
-
-const Rows = styled.div`
-    gap: 8px;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    padding-bottom: 4px;
-
-    > div {
-        gap: 8px;
-        display: flex;
-        flex-direction: row;
-        padding-inline-start: 8px;
-    }
-`;
-
-export default function ColourSwatches({ value, onChange }: Props) {
-    const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
-    const setValue = useDebounceCallback(
-        (value) => onChange(value as string),
-        [onChange],
-        100,
-    );
-
-    return (
-        <SwatchesBase>
-            <input
-                type="color"
-                value={value}
-                ref={ref}
-                onChange={(ev) => setValue(ev.currentTarget.value)}
-            />
-            <Swatch
-                colour={value}
-                type="large"
-                onClick={() => ref.current?.click()}>
-                <Palette size={32} />
-            </Swatch>
-
-            <div class="overlay">
-                <div />
-            </div>
-
-            <Rows>
-                {presets.map((row, i) => (
-                    <div key={i}>
-                        {row.map((swatch, i) => (
-                            <Swatch
-                                colour={swatch}
-                                type="small"
-                                key={i}
-                                onClick={() => onChange(swatch)}>
-                                {swatch === value && <Check size={22} />}
-                            </Swatch>
-                        ))}
-                    </div>
-                ))}
-            </Rows>
-        </SwatchesBase>
-    );
-}

src/components/ui/ComboBox.tsx

@@ -1,26 +0,0 @@
-import styled from "styled-components/macro";
-
-export default styled.select`
-    width: 100%;
-    padding: 10px;
-    cursor: pointer;
-    border-radius: var(--border-radius);
-    font-weight: 500;
-    font-family: inherit;
-    font-size: var(--text-size);
-    color: var(--secondary-foreground);
-    background: var(--secondary-background);
-
-    border: none;
-    outline: 2px solid transparent;
-    transition: box-shadow 0.2s ease-in-out;
-    transition: outline-color 0.2s ease-in-out;
-
-    &:focus {
-        box-shadow: 0 0 0 1.5pt var(--accent);
-    }
-
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-`;