[UI] Alerts API (#21)

* [UI] Initial Alerts API

* [UI > Alerts] showCustomAlert and showInputAlert

* [Constants] Add HTTP_REGEX

* [UI > Plugins] Use InputAlert for installing plugins

* [UI > Plugins/PluginCard] Pass plugin index to PluginCard to add top margin

* [UI > Alerts] Fix indentation

src/ui/components/InputAlert.tsx

@@ -0,0 +1,49 @@
+import { findByProps } from "@metro/filters";
+import { Forms, Alert } from "@ui/components";
+import { InputAlertProps } from "@types";
+
+const { FormInput } = Forms;
+
+const Alerts = findByProps("openLazy", "close");
+
+export default function InputAlert({ title, confirmText, confirmColor, onConfirm, cancelText, placeholder, initialValue = "" }: InputAlertProps) {
+    const [value, setValue] = React.useState(initialValue);
+    const [error, setError] = React.useState("");
+
+    function onConfirmWrapper() {
+        const asyncOnConfirm = Promise.resolve(onConfirm(value))
+
+        asyncOnConfirm.then(() => {
+            Alerts.close();
+        }).catch((e: Error) => {
+            setError(e.message);
+        });
+    };
+
+    return (
+        <Alert
+            title={title}
+            confirmText={confirmText}
+            confirmColor={confirmColor}
+            isConfirmButtonDisabled={error.length !== 0}
+            onConfirm={onConfirmWrapper}
+            cancelText={cancelText}
+            onCancel={() => Alerts.close()}
+        >
+            <FormInput
+                placeholder={placeholder}
+                value={value}
+                onChangeText={(v: string) => {
+                    setValue(v);
+                    if (error) setError("");
+                }}
+                returnKeyType="done"
+                onSubmitEditing={onConfirmWrapper}
+                error={error}
+                autoFocus={true}
+                showBorder={true}
+                style={{ paddingVertical: 5, alignSelf: "stretch", paddingHorizontal: 0 }}
+            />
+        </Alert>
+    );
+};

src/ui/components/index.ts

@@ -4,6 +4,7 @@ import { findByDisplayName, findByProps } from "@metro/filters";
 export const Forms = findByProps("Form", "FormSection");
 export const General = findByProps("Button", "Text", "View");
 export const Search = findByDisplayName("StaticSearchBarContainer");
+export const Alert = findByProps("alertDarkStyles", "alertLightStyles").default;
 
 // Vendetta
 export { default as Summary } from "@ui/components/Summary";