From 637f188ebec71fe4b0b80bbab4592d4c269d7d93 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Tue, 17 Oct 2023 12:46:06 +0200
Subject: [feature] Allow import/export/creation of domain allows via admin
 panel (#2264)

* it's happening!

* aaa

* fix silly whoopsie

* it's working pa! it's working ma!

* model report parameters

* shuffle some more stuff around

* getting there

* oo hoo

* finish tidying up for now

* aaa

* fix use form submit errors

* peepee poo poo

* aaaaa

* ffff

* they see me typin', they hatin'

* boop

* aaa

* oooo

* typing typing tappa tappa

* almost done typing

* weee

* alright

* push it push it real good doo doo doo doo doo doo

* thingy no worky

* almost done

* mutation modifers not quite right

* hmm

* it works

* view blocks + allows nicely

* it works!

* typia install

* the old linterino

* linter plz
---
 web/source/settings/components/form/inputs.jsx | 140 ------------------
 web/source/settings/components/form/inputs.tsx | 190 +++++++++++++++++++++++++
 2 files changed, 190 insertions(+), 140 deletions(-)
 delete mode 100644 web/source/settings/components/form/inputs.jsx
 create mode 100644 web/source/settings/components/form/inputs.tsx

(limited to 'web/source/settings/components/form')

diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.jsx
deleted file mode 100644
index f7a6beeda..000000000
--- a/web/source/settings/components/form/inputs.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-
-function TextInput({ label, field, ...inputProps }) {
-	const { onChange, value, ref } = field;
-
-	return (
-		<div className={`form-field text${field.valid ? "" : " invalid"}`}>
-			<label>
-				{label}
-				<input
-					type="text"
-					{...{ onChange, value, ref }}
-					{...inputProps}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function TextArea({ label, field, ...inputProps }) {
-	const { onChange, value, ref } = field;
-
-	return (
-		<div className="form-field textarea">
-			<label>
-				{label}
-				<textarea
-					type="text"
-					{...{ onChange, value, ref }}
-					{...inputProps}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function FileInput({ label, field, ...inputProps }) {
-	const { onChange, ref, infoComponent } = field;
-
-	return (
-		<div className="form-field file">
-			<label>
-				<div className="label">{label}</div>
-				<div className="file-input button">Browse</div>
-				{infoComponent}
-				{/* <a onClick={removeFile("header")}>remove</a> */}
-				<input
-					type="file"
-					className="hidden"
-					{...{ onChange, ref }}
-					{...inputProps}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function Checkbox({ label, field, ...inputProps }) {
-	const { onChange, value } = field;
-
-	return (
-		<div className="form-field checkbox">
-			<label>
-				<input
-					type="checkbox"
-					checked={value}
-					onChange={onChange}
-					{...inputProps}
-				/> {label}
-			</label>
-		</div>
-	);
-}
-
-function Select({ label, field, options, children, ...inputProps }) {
-	const { onChange, value, ref } = field;
-
-	return (
-		<div className="form-field select">
-			<label>
-				{label} {children}
-				<select
-					{...{ onChange, value, ref }}
-					{...inputProps}
-				>
-					{options}
-				</select>
-			</label>
-		</div>
-	);
-}
-
-function RadioGroup({ field, label, ...inputProps }) {
-	return (
-		<div className="form-field radio">
-			{Object.entries(field.options).map(([value, radioLabel]) => (
-				<label key={value}>
-					<input
-						type="radio"
-						name={field.name}
-						value={value}
-						checked={field.value == value}
-						onChange={field.onChange}
-						{...inputProps}
-					/>
-					{radioLabel}
-				</label>
-			))}
-			{label}
-		</div>
-	);
-}
-
-module.exports = {
-	TextInput,
-	TextArea,
-	FileInput,
-	Checkbox,
-	Select,
-	RadioGroup
-};
\ No newline at end of file
diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx
new file mode 100644
index 000000000..1e0d8eaab
--- /dev/null
+++ b/web/source/settings/components/form/inputs.tsx
@@ -0,0 +1,190 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+
+import type {
+	ReactNode,
+	RefObject,
+} from "react";
+
+import type {
+	FileFormInputHook,
+	RadioFormInputHook,
+	TextFormInputHook,
+} from "../../lib/form/types";
+
+export interface TextInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+}
+
+export function TextInput({label, field, ...props}: TextInputProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className={`form-field text${field.valid ? "" : " invalid"}`}>
+			<label>
+				{label}
+				<input
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLInputElement>}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
+export interface TextAreaProps extends React.DetailedHTMLProps<
+	React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+	HTMLTextAreaElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+}
+
+export function TextArea({label, field, ...props}: TextAreaProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field textarea">
+			<label>
+				{label}
+				<textarea
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLTextAreaElement>}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
+export interface FileInputProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: FileFormInputHook;
+}
+
+export function FileInput({ label, field, ...props }: FileInputProps) {
+	const { onChange, ref, infoComponent } = field;
+
+	return (
+		<div className="form-field file">
+			<label>
+				<div className="label">{label}</div>
+				<div className="file-input button">Browse</div>
+				{infoComponent}
+				{/* <a onClick={removeFile("header")}>remove</a> */}
+				<input
+					type="file"
+					className="hidden"
+					onChange={onChange}
+					ref={ref ? ref as RefObject<HTMLInputElement> : undefined}
+					{...props}
+				/>
+			</label>
+		</div>
+	);
+}
+
+export function Checkbox({ label, field, ...inputProps }) {
+	const { onChange, value } = field;
+
+	return (
+		<div className="form-field checkbox">
+			<label>
+				<input
+					type="checkbox"
+					checked={value}
+					onChange={onChange}
+					{...inputProps}
+				/> {label}
+			</label>
+		</div>
+	);
+}
+
+export interface SelectProps extends React.DetailedHTMLProps<
+	React.SelectHTMLAttributes<HTMLSelectElement>,
+	HTMLSelectElement
+> {
+	label?: string;
+	field: TextFormInputHook;
+	children?: ReactNode;
+	options: React.JSX.Element;
+}
+
+export function Select({ label, field, children, options, ...props }: SelectProps) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field select">
+			<label>
+				{label}
+				{children}
+				<select
+					onChange={onChange}
+					value={value}
+					ref={ref as RefObject<HTMLSelectElement>}
+					{...props}
+				>
+					{options}
+				</select>
+			</label>
+		</div>
+	);
+}
+
+export interface RadioGroupProps extends React.DetailedHTMLProps<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> {
+	label?: string;
+	field: RadioFormInputHook;
+}
+
+export function RadioGroup({ label, field, ...props }: RadioGroupProps) {
+	return (
+		<div className="form-field radio">
+			{Object.entries(field.options).map(([value, radioLabel]) => (
+				<label key={value}>
+					<input
+						type="radio"
+						name={field.name}
+						value={value}
+						checked={field.value == value}
+						onChange={field.onChange}
+						{...props}
+					/>
+					{radioLabel}
+				</label>
+			))}
+			{label}
+		</div>
+	);
+}
-- 
cgit v1.2.3