wip: components library

src/webpack/common.tsx

@@ -33,6 +33,7 @@ export let UserStore: Stores.UserStore;
 export let SelectedChannelStore: Stores.SelectedChannelStore;
 export let ChannelStore: Stores.ChannelStore;
 
+/** @deprecated import from "@components/Forms" instead */
 export const Forms = {} as {
     FormTitle: Components.FormTitle;
     FormSection: any;
@@ -47,6 +48,7 @@ export let Router: any;
 export let TextInput: any;
 export let Text: (props: TextProps) => JSX.Element;
 
+/** @deprecated import from "@components/Select" instead */
 export const Select = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
 export const Slider = lazyWebpack(filters.byCode("closestMarkerIndex", "stickToMarkers"));
 
@@ -78,6 +80,7 @@ const ToastPosition = {
     BOTTOM: 1
 };
 
+/** @deprecated import from "@components/Toasts" instead */
 export const Toasts = {
     Type: ToastType,
     Position: ToastPosition,

src/webpack/components/Forms.tsx

@@ -0,0 +1,64 @@
+import { filters, proxyWaitFor } from "../webpack";
+
+export enum Tag {
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+}
+
+interface FormTitleProps extends React.PropsWithChildren<React.HTMLProps<HTMLDivElement>> {
+    tag?: Tag | `${Tag}`;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    faded?: boolean;
+}
+
+interface FormSectionProps extends React.PropsWithChildren {
+    title?: React.ReactNode;
+    icon?: React.ReactNode;
+    titleId?: string;
+    tag?: Tag | `${Tag}`;
+    titleClassName?: string;
+}
+
+export enum FormTextType {
+    DEFAULT = "default",
+    INPUT_PLACEHOLDER = "placeholder",
+    DESCRIPTION = "description",
+    LABEL_BOLD = "labelBold",
+    LABEL_SELECTED = "labelSelected",
+    LABEL_DESCRIPTOR = "labelDescriptor",
+    ERROR = "error",
+    SUCCESS = "success",
+}
+
+interface FormTextProps extends React.PropsWithChildren<React.HTMLProps<HTMLDivElement>> {
+    type?: FormTextType;
+    selectable?: boolean;
+}
+
+interface FormDividerProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export const FormTitle: (props: FormTitleProps) => JSX.Element = proxyWaitFor(filters.byCode("errorSeparator"));
+export const FormSection: (props: FormSectionProps) => JSX.Element = proxyWaitFor(filters.byCode("titleClassName", "sectionTitle"));
+export const FormText: (props: FormTextProps) => JSX.Element = proxyWaitFor(m => m.Types?.INPUT_PLACEHOLDER);
+export const FormDivider: (props: FormDividerProps) => JSX.Element = proxyWaitFor(m => {
+    if (typeof m !== "function") return false;
+    const s = m.toString();
+    return s.length < 200 && s.includes("divider");
+});
+
+export const Forms = {
+    FormTitle,
+    FormSection,
+    FormText,
+    FormDivider
+};
+
+export default Forms;

src/webpack/components/Select.tsx

@@ -0,0 +1,55 @@
+import { lazyWebpack } from "src/utils";
+
+import { filters } from "../webpack";
+
+export enum Look {
+    FILLED,
+    CUSTOM
+}
+
+export enum Position {
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right",
+    BOTTOM = "bottom",
+    CENTER = "center",
+    WINDOW_CENTER = "window_center",
+}
+
+export interface SelectOption {
+    value: any;
+    label: string;
+    disabled?: boolean;
+    key?: React.Key;
+}
+
+interface SelectProps {
+    options: SelectOption[];
+    placeholder?: string;
+    className?: string;
+    isDisabled?: boolean;
+    maxVisibleItems?: number;
+    look?: Look;
+    autoFocus?: boolean;
+    popoutWidth?: number;
+    clearable?: boolean;
+    onClose?(): void;
+    onOpen?(): void;
+    renderOptionLabel?(option: SelectOption): React.ReactNode;
+    renderOptionValue?(option: SelectOption[]): React.ReactNode;
+    popoutClassName?: string;
+    popoutPosition?: Position;
+    optionClassName?: string;
+    closeOnSelect?: boolean;
+    select?(value: any): void;
+    isSelected?(value: any): boolean;
+    serialize?(value: any): string;
+    clear?(): void;
+    hideIcon?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+
+export const Select: (props: SelectProps) => JSX.Element = lazyWebpack(filters.byCode("optionClassName", "popoutPosition", "autoFocus", "maxVisibleItems"));
+
+export default Select;

src/webpack/components/Toasts.tsx

@@ -0,0 +1,42 @@
+import { lazyWebpack } from "../../utils";
+import { filters } from "../webpack";
+
+export enum ToastType {
+    MESSAGE = 0,
+    SUCCESS,
+    FAILURE,
+    CUSTOM
+}
+
+export enum ToastPosition {
+    TOP = 0,
+    BOTTOM,
+}
+
+export interface ToastOptions {
+    position?: ToastPosition;
+    timeout?: number;
+    duration?: number;
+}
+
+export interface ToastProps {
+    message: string;
+    type: ToastType;
+    id: string;
+    options?: ToastOptions;
+}
+
+const showToast = lazyWebpack(filters.byCode("currentToast?"));
+const popToast = lazyWebpack(filters.byCode("currentToast:null"));
+
+export const ToastAPI = {
+    show(props: ToastProps): void {
+        return showToast(props);
+    },
+
+    pop(): void {
+        return popToast();
+    }
+};
+
+export default ToastAPI;

src/webpack/components/index.ts

@@ -0,0 +1,4 @@
+
+export * as Toasts from "./Toasts";
+export * as Forms from "./Forms";
+export * as Select from "./Select";

src/webpack/webpack.ts

@@ -180,6 +180,12 @@ export function waitFor(filter: string | string[] | FilterFn, callback: Callback
     subscriptions.set(filter, callback);
 }
 
+export function proxyWaitFor(filter: string | string[] | FilterFn, mapper = m => m) {
+    let v;
+    waitFor(filter, m => v = mapper(m));
+    return proxyLazy(() => v);
+}
+
 export function addListener(callback: CallbackFn) {
     listeners.add(callback);
 }