Add new email field type

.changeset/calm-pans-leave.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/fields': patch
+---
+
+Add `React.useCallback` and `React.useMem` inside of Text field view

.changeset/late-eagles-lie.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/fields': patch
+---
+
+Updated the `Text` field view to accept a `type` prop so it can be used by other input types

.changeset/tough-ads-kiss.md

@@ -0,0 +1,5 @@
+---
+'@keystonejs/fields': patch
+---
+
+Created a new `Email` field type

packages/fields/src/index.js

@@ -6,6 +6,7 @@ export { default as CloudinaryImage } from './types/CloudinaryImage';
 export { default as Color } from './types/Color';
 export { default as DateTime } from './types/DateTime';
 export { default as Decimal } from './types/Decimal';
+export { default as Email } from './types/Email';
 export { default as File } from './types/File';
 export { default as Float } from './types/Float';
 export { default as Integer } from './types/Integer';

packages/fields/src/types/Email/Implementation.js

@@ -0,0 +1,20 @@
+import { Text } from '../Text/Implementation';
+
+export class Email extends Text {
+  validateInput({ resolvedData, addFieldValidationError }) {
+    const fieldValue = resolvedData[this.path];
+
+    if (!this.isRequired && !fieldValue) {
+      // If the field isn't required and we don't have a value we can skip any validation checks
+      return;
+    }
+
+    if (!this.isValidEmail(fieldValue)) {
+      addFieldValidationError(`Invalid email`, { value: fieldValue });
+    }
+  }
+
+  isValidEmail(email) {
+    return /\S+@\S+\.\S+/.test(email);
+  }
+}

packages/fields/src/types/Email/README.md

@@ -0,0 +1,28 @@
+<!--[meta]
+section: api
+subSection: field-types
+title: Email
+[meta]-->
+
+# Email
+
+The `Email` field type is similar to the `Text` field, but it will validate against non valid email addresses
+
+## Usage
+
+```js
+const { Email } = require('@keystonejs/fields');
+
+keystone.createList('User', {
+  fields: {
+    email: { type: Email },
+  },
+});
+```
+
+## Config
+
+| Option       | Type      | Default | Description                                                     |
+| ------------ | --------- | ------- | --------------------------------------------------------------- |
+| `isRequired` | `Boolean` | `false` | Does this field require a value?                                |
+| `isUnique`   | `Boolean` | `false` | Adds a unique index that allows only unique values to be stored |

packages/fields/src/types/Email/index.js

@@ -0,0 +1,17 @@
+import { importView } from '@keystonejs/build-field-types';
+import { MongoTextInterface, KnexTextInterface } from '../Text/Implementation';
+import { Email } from './Implementation';
+
+export default {
+  type: 'Email',
+  implementation: Email,
+  views: {
+    Controller: importView('../Text/views/Controller'),
+    Field: importView('./views/Field'),
+    Filter: importView('../Text/views/Filter'),
+  },
+  adapters: {
+    mongoose: MongoTextInterface,
+    knex: KnexTextInterface,
+  },
+};

packages/fields/src/types/Email/views/Field.js

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import TextField from '../../Text/views/Field';
+
+const EmailField = props => {
+  return <TextField {...props} type="email" />;
+};
+
+export default EmailField;

packages/fields/src/types/Text/views/Field.js

@@ -1,21 +1,33 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/core';
+import { useCallback, useMemo } from 'react';
 
 import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
 import { Input } from '@arch-ui/input';
 
-const TextField = ({ onChange, autoFocus, field, errors, value = '', isDisabled }) => {
-  const handleChange = event => {
-    onChange(event.target.value);
-  };
+const isAccessDeniedError = error => error instanceof Error && error.name === 'AccessDeniedError';
 
+const TextField = ({
+  onChange,
+  autoFocus,
+  field,
+  errors,
+  value = '',
+  isDisabled,
+  type = 'text',
+}) => {
   const { isMultiline } = field.config;
   const htmlID = `ks-input-${field.path}`;
-  const canRead = errors.every(
-    error => !(error instanceof Error && error.name === 'AccessDeniedError')
+  const canRead = useMemo(() => errors.every(error => !isAccessDeniedError(error)), [errors]);
+  const error = useMemo(() => errors.find(isAccessDeniedError), [errors]);
+
+  const handleChange = useCallback(
+    event => {
+      onChange(event.target.value);
+    },
+    [onChange]
   );
-  const error = errors.find(error => error instanceof Error && error.name === 'AccessDeniedError');
 
   return (
     <FieldContainer>
@@ -26,7 +38,7 @@ const TextField = ({ onChange, autoFocus, field, errors, value = '', isDisabled
           autoComplete="off"
           autoFocus={autoFocus}
           required={field.isRequired}
-          type="text"
+          type={type}
           value={canRead ? value : undefined}
           placeholder={canRead ? undefined : error.message}
           onChange={handleChange}