adds number, tests with buildQuery

src/client/components/forms/field-types/Number/index.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useFieldType from '../../useFieldType';
+import Label from '../../Label';
+import Error from '../../Error';
+
+import './index.scss';
+
+const defaultError = 'Please fill in the field';
+const defaultValidate = value => value.length > 0;
+
+const Number = (props) => {
+  const {
+    name,
+    required,
+    defaultValue,
+    validate,
+    style,
+    width,
+    errorMessage,
+    label,
+    placeholder,
+  } = props;
+
+  const {
+    value,
+    showError,
+    onFieldChange,
+    formProcessing,
+  } = useFieldType({
+    name,
+    required,
+    defaultValue,
+    validate,
+  });
+
+  const classes = [
+    'field-type',
+    'text',
+    showError && 'error',
+  ].filter(Boolean).join(' ');
+
+  const fieldWidth = width ? `${width}%` : undefined;
+
+  return (
+    <div
+      className={classes}
+      style={{
+        ...style,
+        width: fieldWidth,
+      }}
+    >
+      <Error
+        showError={showError}
+        message={errorMessage}
+      />
+      <Label
+        htmlFor={name}
+        label={label}
+        required={required}
+      />
+      <input
+        value={value || ''}
+        onChange={onFieldChange}
+        disabled={formProcessing ? 'disabled' : undefined}
+        placeholder={placeholder}
+        type="number"
+        id={name}
+        name={name}
+      />
+    </div>
+  );
+};
+
+Number.defaultProps = {
+  label: null,
+  required: false,
+  defaultValue: null,
+  placeholder: undefined,
+  validate: defaultValidate,
+  errorMessage: defaultError,
+  width: 100,
+  style: {},
+};
+
+Number.propTypes = {
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  placeholder: PropTypes.string,
+  defaultValue: PropTypes.string,
+  validate: PropTypes.func,
+  errorMessage: PropTypes.string,
+  width: PropTypes.number,
+  style: PropTypes.shape({}),
+  label: PropTypes.string,
+};
+
+export default Number;

src/client/components/forms/field-types/Number/index.scss

@@ -0,0 +1,17 @@
+@import '~payload/client/scss/styles';
+@import '../shared';
+
+.field-type.number {
+	margin-bottom: base(.5);
+	position: relative;
+
+	input {
+		@include formInput;
+	}
+
+	&.error {
+		input {
+      background-color: lighten($error, 20%);
+		}
+	}
+}

src/client/components/forms/field-types/index.js

@@ -8,6 +8,7 @@ import password from './Password';
 import repeater from './Repeater';
 import textarea from './Textarea';
 import select from './Select';
+import number from './Number';
 
 export default {
   email,
@@ -16,6 +17,7 @@ export default {
   text,
   relationship,
   // upload,
+  number,
   password,
   repeater,
   textarea,