feat(ui): add min values for inputs and context-based keyboards for inputs

ui/src/components/SchemaForm/components/Input.tsx

@@ -29,6 +29,17 @@ interface Props {
   onChange?: (fd: Type.FormDataType) => void;
   formData: Type.FormDataType;
   readOnly: boolean;
+  minValue?: number;
+  inputMode?:
+    | 'text'
+    | 'search'
+    | 'none'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | undefined;
 }
 const Index: FC<Props> = ({
   type = 'text',
@@ -37,6 +48,8 @@ const Index: FC<Props> = ({
   onChange,
   formData,
   readOnly = false,
+  minValue = 0,
+  inputMode = 'text',
 }) => {
   const fieldObject = formData[fieldName];
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,6 +73,8 @@ const Index: FC<Props> = ({
       placeholder={placeholder}
       type={type}
       value={fieldObject?.value || ''}
+      min={minValue}
+      inputMode={inputMode}
       onChange={handleChange}
       disabled={readOnly}
       isInvalid={fieldObject?.isInvalid}

ui/src/components/SchemaForm/index.tsx

@@ -368,6 +368,9 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
             {widget === 'input' ? (
               <Input
                 type={uiOpt && 'inputType' in uiOpt ? uiOpt.inputType : 'text'}
+                inputMode={
+                  uiOpt && 'inputMode' in uiOpt ? uiOpt.inputMode : 'text'
+                }
                 placeholder={
                   uiOpt && 'placeholder' in uiOpt ? uiOpt.placeholder : ''
                 }

ui/src/components/SchemaForm/types.ts

@@ -88,6 +88,16 @@ export interface InputOptions extends BaseUIOptions {
     | 'time'
     | 'url'
     | 'week';
+  inputMode?:
+    | 'text'
+    | 'search'
+    | 'none'
+    | 'tel'
+    | 'url'
+    | 'email'
+    | 'numeric'
+    | 'decimal'
+    | undefined;
 }
 export interface SelectOptions extends BaseUIOptions {}
 export interface UploadOptions extends BaseUIOptions {

ui/src/pages/Admin/Privileges/index.tsx

@@ -90,6 +90,8 @@ const Index: FC = () => {
             }
             return true;
           },
+          inputType: 'number',
+          inputMode: 'numeric',
         },
       };
     });

ui/src/pages/Admin/Write/index.tsx

@@ -261,6 +261,8 @@ const Index: FC = () => {
           <Form.Label>{t('min_tags.label')}</Form.Label>
           <Form.Control
             type="number"
+            inputMode="numeric"
+            min={0}
             value={formData.min_tags.value}
             isInvalid={formData.min_tags.isInvalid}
             onChange={(evt) => {
@@ -302,6 +304,8 @@ const Index: FC = () => {
           <Form.Label>{t('min_content.label')}</Form.Label>
           <Form.Control
             type="number"
+            inputMode="numeric"
+            min={0}
             value={formData.min_content.value}
             isInvalid={formData.min_content.isInvalid}
             onChange={(evt) => {
@@ -344,6 +348,8 @@ const Index: FC = () => {
           <Form.Label>{t('image_size.label')}</Form.Label>
           <Form.Control
             type="number"
+            inputMode="numeric"
+            min={0}
             value={formData.max_image_size.value}
             isInvalid={formData.max_image_size.isInvalid}
             onChange={(evt) => {
@@ -366,6 +372,8 @@ const Index: FC = () => {
           <Form.Label>{t('attachment_size.label')}</Form.Label>
           <Form.Control
             type="number"
+            inputMode="numeric"
+            min={0}
             value={formData.max_attachment_size.value}
             isInvalid={formData.max_attachment_size.isInvalid}
             onChange={(evt) => {
@@ -388,6 +396,8 @@ const Index: FC = () => {
           <Form.Label>{t('image_megapixels.label')}</Form.Label>
           <Form.Control
             type="number"
+            inputMode="numeric"
+            min={0}
             isInvalid={formData.max_image_megapixel.isInvalid}
             value={formData.max_image_megapixel.value}
             onChange={(evt) => {