@atlaskit/link-create 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-create
 
+## 0.0.4
+
+### Patch Changes
+
+- [`09697a312bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/09697a312bc) - EDM-5657 EDM-5661 Implement Select and Textfield components
+
 ## 0.0.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,9 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _index.Select;
+  }
+});
+Object.defineProperty(exports, "TextField", {
+  enumerable: true,
+  get: function get() {
+    return _index.TextField;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -16,5 +28,7 @@ Object.defineProperty(exports, "useLinkCreateCallback", {
     return _index2.useLinkCreateCallback;
   }
 });
-var _index = _interopRequireDefault(require("./ui/index"));
-var _index2 = require("./controllers/callback-context/index");
+var _index = _interopRequireWildcard(require("./ui/index"));
+var _index2 = require("./controllers/callback-context/index");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/ui/index.js

@@ -1,13 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _main.Select;
+  }
+});
+Object.defineProperty(exports, "TextField", {
+  enumerable: true,
+  get: function get() {
+    return _main.TextField;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _main.default;
   }
 });
-var _main = _interopRequireDefault(require("./main"));
+var _main = _interopRequireWildcard(require("./main"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/ui/main.js

@@ -1,12 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Select = Select;
+exports.TextField = TextField;
 exports.default = LinkCreate;
-var _react = require("@emotion/react");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _form = require("@atlaskit/form");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _callbackContext = require("../controllers/callback-context");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,12 +35,54 @@ function LinkCreate(_ref) {
   if (!chosenOne) {
     throw new Error('Make sure you specified a valid entityKey');
   }
-  return (0, _react.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react.jsx)(_modalDialog.default, {
+  return (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react2.jsx)(_modalDialog.default, {
     onClose: onCancel,
     testId: testId
-  }, (0, _react.jsx)(_modalDialog.ModalBody, null, (0, _react.jsx)(_callbackContext.LinkCreateCallbackProvider, {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, "Create New")), (0, _react2.jsx)(_callbackContext.LinkCreateCallbackProvider, {
     onCreate: onCreate,
     onFailure: onFailure,
     onCancel: onCancel
-  }, chosenOne.form))));
+  }, chosenOne.form)));
+}
+function Select(_ref2) {
+  var name = _ref2.name,
+    title = _ref2.title,
+    options = _ref2.options,
+    defaultOption = _ref2.defaultOption,
+    placeholder = _ref2.placeholder;
+  return (0, _react2.jsx)(_form.Field, {
+    name: name,
+    label: title,
+    isRequired: true
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      error = _ref3.error;
+    return (0, _react2.jsx)(_react.Fragment, null, error && (0, _react2.jsx)(_form.ErrorMessage, null, error), (0, _react2.jsx)(_select.default, (0, _extends2.default)({}, fieldProps, {
+      inputId: "".concat(title, "-input-id"),
+      options: options,
+      placeholder: placeholder,
+      defaultValue: defaultOption
+    })));
+  });
+}
+
+/**
+ * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
+ * Validation is handled by the form as it is on form submission. Any errors returned by
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
+ * of this text field are shown above the field.
+ */
+function TextField(_ref4) {
+  var label = _ref4.label,
+    name = _ref4.name,
+    validationHelpText = _ref4.validationHelpText;
+  return (0, _react2.jsx)(_form.Field, {
+    name: name,
+    label: label,
+    isRequired: true
+  }, function (_ref5) {
+    var fieldProps = _ref5.fieldProps,
+      error = _ref5.error;
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, fieldProps), !error && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), error && (0, _react2.jsx)(_form.ErrorMessage, null, error));
+  });
 }

package/dist/cjs/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateFormData = validateFormData;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+/** Map of field names to errors for that field (or undefined if no error for that field) */
+
+function isOption(maybeOption) {
+  return maybeOption !== undefined && maybeOption !== null && maybeOption.value !== undefined && typeof maybeOption.value === 'string';
+}
+/**
+ * Returns an object where the keys are names of form fields, and values are a string if the field
+ * has an error, or undefined if the field is valid.
+ */
+function validateFormData(_x) {
+  return _validateFormData.apply(this, arguments);
+}
+function _validateFormData() {
+  _validateFormData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var data, validators, map, i, v, fieldName, maybeValue;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            data = _ref.data, validators = _ref.validators;
+            // Run each validator on the input.
+            map = {};
+            i = 0;
+          case 3:
+            if (!(i < validators.length)) {
+              _context.next = 26;
+              break;
+            }
+            v = validators[i];
+            fieldName = v.fieldName;
+            maybeValue = data[fieldName]; // If maybeValue is undefined, the fieldname of the current validator doesn't exist
+            // in our form.
+            // Value should always be in form, but if not, check if it's undefined here
+            if (!(maybeValue === undefined || maybeValue === null)) {
+              _context.next = 9;
+              break;
+            }
+            return _context.abrupt("continue", 23);
+          case 9:
+            _context.t0 = typeof maybeValue === 'string';
+            if (!_context.t0) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 13;
+            return v.isInvalid(maybeValue);
+          case 13:
+            _context.t0 = _context.sent;
+          case 14:
+            if (!_context.t0) {
+              _context.next = 16;
+              break;
+            }
+            map[v.fieldName] = v.errorMessage;
+          case 16:
+            _context.t1 = isOption(maybeValue);
+            if (!_context.t1) {
+              _context.next = 21;
+              break;
+            }
+            _context.next = 20;
+            return v.isInvalid(maybeValue.value);
+          case 20:
+            _context.t1 = _context.sent;
+          case 21:
+            if (!_context.t1) {
+              _context.next = 23;
+              break;
+            }
+            map[v.fieldName] = v.errorMessage;
+          case 23:
+            i++;
+            _context.next = 3;
+            break;
+          case 26:
+            return _context.abrupt("return", map);
+          case 27:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _validateFormData.apply(this, arguments);
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"sideEffects": false
 }

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-export { default } from './ui/index';
+export { default, TextField, Select } from './ui/index';
 export { useLinkCreateCallback } from './controllers/callback-context/index';

package/dist/es2019/ui/index.js

@@ -1 +1 @@
-export { default } from './main';
+export { default, TextField, Select } from './main';

package/dist/es2019/ui/main.js

@@ -1,6 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import Modal, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
+import Modal, { ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import AkSelect from '@atlaskit/select';
+import AkTextfield from '@atlaskit/textfield';
 import { LinkCreateCallbackProvider } from '../controllers/callback-context';
 export default function LinkCreate({
   plugins,
@@ -19,9 +24,51 @@ export default function LinkCreate({
   return jsx(ModalTransition, null, !!active && jsx(Modal, {
     onClose: onCancel,
     testId: testId
-  }, jsx(ModalBody, null, jsx(LinkCreateCallbackProvider, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, "Create New")), jsx(LinkCreateCallbackProvider, {
     onCreate: onCreate,
     onFailure: onFailure,
     onCancel: onCancel
-  }, chosenOne.form))));
+  }, chosenOne.form)));
+}
+export function Select({
+  name,
+  title,
+  options,
+  defaultOption,
+  placeholder
+}) {
+  return jsx(Field, {
+    name: name,
+    label: title,
+    isRequired: true
+  }, ({
+    fieldProps,
+    error
+  }) => jsx(Fragment, null, error && jsx(ErrorMessage, null, error), jsx(AkSelect, _extends({}, fieldProps, {
+    inputId: `${title}-input-id`,
+    options: options,
+    placeholder: placeholder,
+    defaultValue: defaultOption
+  }))));
+}
+
+/**
+ * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
+ * Validation is handled by the form as it is on form submission. Any errors returned by
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
+ * of this text field are shown above the field.
+ */
+export function TextField({
+  label,
+  name,
+  validationHelpText
+}) {
+  return jsx(Field, {
+    name: name,
+    label: label,
+    isRequired: true
+  }, ({
+    fieldProps,
+    error
+  }) => jsx(Fragment, null, jsx(AkTextfield, fieldProps), !error && jsx(HelperMessage, null, validationHelpText), error && jsx(ErrorMessage, null, error)));
 }

package/dist/es2019/utils.js

@@ -0,0 +1,35 @@
+/** Map of field names to errors for that field (or undefined if no error for that field) */
+
+function isOption(maybeOption) {
+  return maybeOption !== undefined && maybeOption !== null && maybeOption.value !== undefined && typeof maybeOption.value === 'string';
+}
+/**
+ * Returns an object where the keys are names of form fields, and values are a string if the field
+ * has an error, or undefined if the field is valid.
+ */
+export async function validateFormData({
+  data,
+  validators
+}) {
+  // Run each validator on the input.
+  const map = {};
+  for (let i = 0; i < validators.length; i++) {
+    const v = validators[i];
+    const fieldName = v.fieldName;
+    const maybeValue = data[fieldName];
+
+    // If maybeValue is undefined, the fieldname of the current validator doesn't exist
+    // in our form.
+    // Value should always be in form, but if not, check if it's undefined here
+    if (maybeValue === undefined || maybeValue === null) {
+      continue;
+    }
+    if (typeof maybeValue === 'string' && (await v.isInvalid(maybeValue))) {
+      map[v.fieldName] = v.errorMessage;
+    }
+    if (isOption(maybeValue) && (await v.isInvalid(maybeValue.value))) {
+      map[v.fieldName] = v.errorMessage;
+    }
+  }
+  return map;
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { default } from './ui/index';
+export { default, TextField, Select } from './ui/index';
 export { useLinkCreateCallback } from './controllers/callback-context/index';

package/dist/esm/ui/index.js

@@ -1 +1 @@
-export { default } from './main';
+export { default, TextField, Select } from './main';

package/dist/esm/ui/main.js

@@ -1,6 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import Modal, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
+import Modal, { ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import AkSelect from '@atlaskit/select';
+import AkTextfield from '@atlaskit/textfield';
 import { LinkCreateCallbackProvider } from '../controllers/callback-context';
 export default function LinkCreate(_ref) {
   var plugins = _ref.plugins,
@@ -20,9 +25,51 @@ export default function LinkCreate(_ref) {
   return jsx(ModalTransition, null, !!active && jsx(Modal, {
     onClose: onCancel,
     testId: testId
-  }, jsx(ModalBody, null, jsx(LinkCreateCallbackProvider, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, "Create New")), jsx(LinkCreateCallbackProvider, {
     onCreate: onCreate,
     onFailure: onFailure,
     onCancel: onCancel
-  }, chosenOne.form))));
+  }, chosenOne.form)));
+}
+export function Select(_ref2) {
+  var name = _ref2.name,
+    title = _ref2.title,
+    options = _ref2.options,
+    defaultOption = _ref2.defaultOption,
+    placeholder = _ref2.placeholder;
+  return jsx(Field, {
+    name: name,
+    label: title,
+    isRequired: true
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      error = _ref3.error;
+    return jsx(Fragment, null, error && jsx(ErrorMessage, null, error), jsx(AkSelect, _extends({}, fieldProps, {
+      inputId: "".concat(title, "-input-id"),
+      options: options,
+      placeholder: placeholder,
+      defaultValue: defaultOption
+    })));
+  });
+}
+
+/**
+ * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
+ * Validation is handled by the form as it is on form submission. Any errors returned by
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
+ * of this text field are shown above the field.
+ */
+export function TextField(_ref4) {
+  var label = _ref4.label,
+    name = _ref4.name,
+    validationHelpText = _ref4.validationHelpText;
+  return jsx(Field, {
+    name: name,
+    label: label,
+    isRequired: true
+  }, function (_ref5) {
+    var fieldProps = _ref5.fieldProps,
+      error = _ref5.error;
+    return jsx(Fragment, null, jsx(AkTextfield, fieldProps), !error && jsx(HelperMessage, null, validationHelpText), error && jsx(ErrorMessage, null, error));
+  });
 }

package/dist/esm/utils.js

@@ -0,0 +1,87 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** Map of field names to errors for that field (or undefined if no error for that field) */
+
+function isOption(maybeOption) {
+  return maybeOption !== undefined && maybeOption !== null && maybeOption.value !== undefined && typeof maybeOption.value === 'string';
+}
+/**
+ * Returns an object where the keys are names of form fields, and values are a string if the field
+ * has an error, or undefined if the field is valid.
+ */
+export function validateFormData(_x) {
+  return _validateFormData.apply(this, arguments);
+}
+function _validateFormData() {
+  _validateFormData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var data, validators, map, i, v, fieldName, maybeValue;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            data = _ref.data, validators = _ref.validators;
+            // Run each validator on the input.
+            map = {};
+            i = 0;
+          case 3:
+            if (!(i < validators.length)) {
+              _context.next = 26;
+              break;
+            }
+            v = validators[i];
+            fieldName = v.fieldName;
+            maybeValue = data[fieldName]; // If maybeValue is undefined, the fieldname of the current validator doesn't exist
+            // in our form.
+            // Value should always be in form, but if not, check if it's undefined here
+            if (!(maybeValue === undefined || maybeValue === null)) {
+              _context.next = 9;
+              break;
+            }
+            return _context.abrupt("continue", 23);
+          case 9:
+            _context.t0 = typeof maybeValue === 'string';
+            if (!_context.t0) {
+              _context.next = 14;
+              break;
+            }
+            _context.next = 13;
+            return v.isInvalid(maybeValue);
+          case 13:
+            _context.t0 = _context.sent;
+          case 14:
+            if (!_context.t0) {
+              _context.next = 16;
+              break;
+            }
+            map[v.fieldName] = v.errorMessage;
+          case 16:
+            _context.t1 = isOption(maybeValue);
+            if (!_context.t1) {
+              _context.next = 21;
+              break;
+            }
+            _context.next = 20;
+            return v.isInvalid(maybeValue.value);
+          case 20:
+            _context.t1 = _context.sent;
+          case 21:
+            if (!_context.t1) {
+              _context.next = 23;
+              break;
+            }
+            map[v.fieldName] = v.errorMessage;
+          case 23:
+            i++;
+            _context.next = 3;
+            break;
+          case 26:
+            return _context.abrupt("return", map);
+          case 27:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _validateFormData.apply(this, arguments);
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"sideEffects": false
 }

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export type { LinkCreatePlugin } from './ui/types';
-export { default } from './ui/index';
+export { default, TextField, Select } from './ui/index';
 export { useLinkCreateCallback } from './controllers/callback-context/index';

package/dist/types/ui/index.d.ts

@@ -1 +1 @@
-export { default } from './main';
+export { default, TextField, Select } from './main';

package/dist/types/ui/main.d.ts

@@ -1,4 +1,11 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LinkCreateProps } from './types';
+import { LinkCreateProps, SelectProps, TextFieldProps } from './types';
 export default function LinkCreate({ plugins, testId, groupKey, entityKey, onCreate, onFailure, onCancel, active, }: LinkCreateProps): jsx.JSX.Element;
+export declare function Select({ name, title, options, defaultOption, placeholder, }: SelectProps): jsx.JSX.Element;
+/**
+ * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
+ * Validation is handled by the form as it is on form submission. Any errors returned by
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
+ * of this text field are shown above the field.
+ */
+export declare function TextField({ label, name, validationHelpText }: TextFieldProps): jsx.JSX.Element;

package/dist/types/ui/types.d.ts

@@ -59,3 +59,45 @@ export interface LinkCreateProps {
      */
     active?: boolean;
 }
+export declare type Validator<FieldName extends string> = {
+    /** The field of the form that should be validated (eg. referencing name of TextFieldProps) */
+    fieldName: FieldName;
+    /** Return true when the given input is invalid */
+    isInvalid: (val: string) => Promise<boolean>;
+    /** An error message is used to tell a user that the field input is invalid. For example, an error message could be 'Invalid username, needs to be more than 4 characters'. */
+    errorMessage: string;
+};
+export interface TextFieldProps {
+    /** Name passed to the <Field>.*/
+    name: string;
+    /** This should be properly internationalization-ed */
+    label: string;
+    /**
+     * Optional text below the textfield explaining any requirements for a valid value.
+     * eg. "Must be 4 or more letters"
+     */
+    validationHelpText?: string;
+}
+export interface Option {
+    /** html `value` attribute to differentiate options */
+    value: string;
+    /** This should be properly internationalization-ed */
+    label: string;
+}
+export interface SelectProps {
+    name: string;
+    title: string;
+    /** Placeholder to go in the select */
+    placeholder?: string;
+    /** Options available in the select */
+    options: Option[];
+    /** Default select option */
+    defaultOption?: Option;
+}
+export interface FormProps<Fields extends string> {
+    /**
+     * Each validator will run on form submit. If multiple validators for a given field, the
+     * last validator's error will be shown
+     */
+    validators: Validator<Fields>[];
+}

package/dist/types/utils.d.ts

@@ -0,0 +1,13 @@
+import { Validator } from './ui/types';
+/** Map of field names to errors for that field (or undefined if no error for that field) */
+export declare type ValidatorResults = {
+    [name: string]: string | undefined;
+};
+/**
+ * Returns an object where the keys are names of form fields, and values are a string if the field
+ * has an error, or undefined if the field is valid.
+ */
+export declare function validateFormData({ data, validators, }: {
+    data: Record<string, unknown>;
+    validators: Validator<any>[];
+}): Promise<ValidatorResults>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -26,9 +26,13 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@atlaskit/form": "^8.8.4",
     "@atlaskit/modal-dialog": "^12.4.4",
+    "@atlaskit/select": "^16.1.3",
+    "@atlaskit/textfield": "^5.3.5",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
+    "@emotion/react": "^11.7.1",
+    "react-select": "^5.4.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -40,7 +44,7 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-create-confluence": "^0.0.1",
+    "@atlassian/link-create-confluence": "^0.0.2",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",
     "typescript": "4.5.5",

package/report.api.md

@@ -67,6 +67,46 @@ interface LinkCreateProps {
   testId?: string;
 }
 
+// @public (undocumented)
+interface Option_2 {
+  label: string;
+  value: string;
+}
+
+// @public (undocumented)
+export function Select({
+  name,
+  title,
+  options,
+  defaultOption,
+  placeholder,
+}: SelectProps): jsx.JSX.Element;
+
+// @public (undocumented)
+interface SelectProps {
+  defaultOption?: Option_2;
+  // (undocumented)
+  name: string;
+  options: Option_2[];
+  placeholder?: string;
+  // (undocumented)
+  title: string;
+}
+
+// @public
+export function TextField({
+  label,
+  name,
+  validationHelpText,
+}: TextFieldProps): jsx.JSX.Element;
+
+// @public (undocumented)
+interface TextFieldProps {
+  label: string;
+  name: string;
+  validationHelpText?: string;
+}
+
 // @public (undocumented)
 export const useLinkCreateCallback: () => LinkCreateCallbackProviderProps;
 

package/tmp/api-report-tmp.d.ts

@@ -47,6 +47,36 @@ interface LinkCreateProps {
     testId?: string;
 }
 
+// @public (undocumented)
+interface Option_2 {
+    label: string;
+    value: string;
+}
+
+// @public (undocumented)
+export function Select({ name, title, options, defaultOption, placeholder, }: SelectProps): jsx.JSX.Element;
+
+// @public (undocumented)
+interface SelectProps {
+    defaultOption?: Option_2;
+    // (undocumented)
+    name: string;
+    options: Option_2[];
+    placeholder?: string;
+    // (undocumented)
+    title: string;
+}
+
+// @public
+export function TextField({ label, name, validationHelpText }: TextFieldProps): jsx.JSX.Element;
+
+// @public (undocumented)
+interface TextFieldProps {
+    label: string;
+    name: string;
+    validationHelpText?: string;
+}
+
 // @public (undocumented)
 export const useLinkCreateCallback: () => LinkCreateCallbackProviderProps;