@atlaskit/link-create 0.1.2 → 0.2.0

package/dist/types/controllers/form-context/main.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Validator, ValidatorMap } from '../../common/types';
+interface FormContextType {
+    assignValidator: (name: string, validators: Validator[]) => void;
+    getValidators: () => ValidatorMap;
+}
+export declare const FormContext: React.Context<FormContextType>;
+declare const FormContextProvider: React.FC<{}>;
+declare const useFormContext: () => FormContextType;
+export { FormContextProvider, useFormContext };

package/dist/types/index.d.ts

@@ -1,3 +1,7 @@
-export { default, TextField, Select } from './ui/index';
-export { useLinkCreateCallback } from './controllers/callback-context/index';
-export type { LinkCreateProps, LinkCreatePlugin } from './ui/types';
+export type { LinkCreatePlugin, Option } from './ui/types';
+export type { CreateFormProps } from './ui/index';
+export { default, TextField, CreateForm, AsyncSelect } from './ui/index';
+export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
+export { FormContextProvider, useFormContext, } from './controllers/form-context';
+export type { LinkCreateProps } from './ui/types';
+export type { Validator, ValidatorMap } from './common/types';

package/dist/types/ui/create-form/async-select/index.d.ts

@@ -0,0 +1 @@
+export { AsyncSelect } from './main';

package/dist/types/ui/create-form/async-select/main.d.ts

@@ -0,0 +1,10 @@
+import { jsx } from '@emotion/react';
+import { OptionType } from '@atlaskit/select';
+import { AsyncSelectProps } from './types';
+/**
+ * An async select utilising the Atlaskit AsyncSelect 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 AsyncSelect<T = OptionType>({ label, name, validationHelpText, isRequired, testId, validators, ...rest }: AsyncSelectProps<T>): jsx.JSX.Element;

package/dist/types/ui/create-form/async-select/types.d.ts

@@ -0,0 +1,18 @@
+import { AsyncSelectProps as AKAsyncSelectProps, OptionType } from '@atlaskit/select';
+import { Validator } from '../../../common/types';
+export declare type AsyncSelectProps<T = OptionType> = AKAsyncSelectProps<T> & {
+    /** 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;
+    testId?: string;
+    /** Will display a red astrix next to the field title if true */
+    isRequired?: boolean;
+    /** Validators for this field */
+    validators?: Validator[];
+};

package/dist/types/ui/create-form/index.d.ts

@@ -0,0 +1,3 @@
+export { CreateForm } from './main';
+export { AsyncSelect } from './async-select';
+export { TextField } from './textfield';

package/dist/types/ui/create-form/main.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface CreateFormProps {
+    children: ReactNode;
+    testId?: string;
+    onCancel?: () => void;
+    onSubmit: (data: Record<string, unknown>) => void;
+}
+export declare const CreateForm: (props: any) => JSX.Element;

package/dist/types/ui/create-form/textfield/index.d.ts

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

package/dist/types/ui/create-form/textfield/main.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import { TextFieldProps } from './types';
+/**
+ * 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, isRequired, testId, validators, }: TextFieldProps): jsx.JSX.Element;

package/dist/types/ui/create-form/textfield/types.d.ts

@@ -0,0 +1,17 @@
+import { Validator } from '../../../common/types';
+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;
+    testId?: string;
+    /** Will display a red astrix next to the field title if true */
+    isRequired?: boolean;
+    /** Validators for this field */
+    validators?: Validator[];
+}

package/dist/types/ui/create-form/types.d.ts

@@ -0,0 +1,6 @@
+export declare type Validator = {
+    /** Return true when the given input is valid */
+    isValid: (val: unknown) => 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;
+};

package/dist/types/{utils.d.ts → ui/create-form/utils/index.d.ts}

@@ -1,4 +1,4 @@
-import { Validator } from './ui/types';
+import { ValidatorMap } from '../../../common/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;
@@ -9,5 +9,5 @@ export declare type ValidatorResults = {
  */
 export declare function validateFormData({ data, validators, }: {
     data: Record<string, unknown>;
-    validators: Validator<any>[];
-}): Promise<ValidatorResults>;
+    validators: ValidatorMap;
+}): ValidatorResults;

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

@@ -1 +1,5 @@
-export { default, TextField, Select } from './main';
+export { default } from './main';
+export { TextField } from './create-form/textfield';
+export { CreateForm } from './create-form/main';
+export type { CreateFormProps } from './create-form/main';
+export { AsyncSelect } from './create-form/async-select';

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

@@ -1,11 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { LinkCreateProps, SelectProps, TextFieldProps } from './types';
+import { LinkCreateProps } 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,45 +59,9 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -26,20 +26,19 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/form": "^8.8.4",
     "@atlaskit/modal-dialog": "^12.4.4",
-    "@atlaskit/select": "^16.1.3",
+    "@atlaskit/select": "^16.1.5",
     "@atlaskit/textfield": "^5.3.5",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1",
-    "react-select": "^5.4.0"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/link-picker": "^1.18.0",
     "@atlaskit/link-provider": "^1.4.0",
@@ -48,12 +47,13 @@
     "@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": "^1.0.0",
-    "@atlassian/link-create-presets": "^0.1.0",
+    "@atlassian/link-create-confluence": "^2.0.0",
+    "@atlassian/link-create-presets": "^1.0.0",
     "@atlassian/link-picker-plugins": "^18.1.0",
     "@atlassian/recent-work-client": "^1.7.0",
     "@atlassian/search-client": "^0.5.0",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "react-dom": "^16.8.0",
     "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"

package/report.api.md

@@ -15,9 +15,59 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
+import { AsyncSelectProps as AsyncSelectProps_2 } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
+import { OptionType } from '@atlaskit/select';
+import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 
+// @public
+export function AsyncSelect<T = OptionType>({
+  label,
+  name,
+  validationHelpText,
+  isRequired,
+  testId,
+  validators,
+  ...rest
+}: AsyncSelectProps<T>): jsx.JSX.Element;
+
+// @public (undocumented)
+type AsyncSelectProps<T = OptionType> = AsyncSelectProps_2<T> & {
+  name: string;
+  label: string;
+  validationHelpText?: string;
+  testId?: string;
+  isRequired?: boolean;
+  validators?: Validator[];
+};
+
+// @public (undocumented)
+export const CreateForm: (props: any) => JSX.Element;
+
+// @public (undocumented)
+export interface CreateFormProps {
+  // (undocumented)
+  children: ReactNode;
+  // (undocumented)
+  onCancel?: () => void;
+  // (undocumented)
+  onSubmit: (data: Record<string, unknown>) => void;
+  // (undocumented)
+  testId?: string;
+}
+
+// @public (undocumented)
+export const FormContextProvider: React_2.FC<{}>;
+
+// @public (undocumented)
+interface FormContextType {
+  // (undocumented)
+  assignValidator: (name: string, validators: Validator[]) => void;
+  // (undocumented)
+  getValidators: () => ValidatorMap;
+}
+
 // @public (undocumented)
 interface Group {
   icon: string;
@@ -38,6 +88,9 @@ function LinkCreate({
 }: LinkCreateProps): jsx.JSX.Element;
 export default LinkCreate;
 
+// @public (undocumented)
+export const LinkCreateCallbackProvider: React_2.FC<LinkCreateCallbackProviderProps>;
+
 // @public (undocumented)
 interface LinkCreateCallbackProviderProps {
   onCancel?: () => void;
@@ -72,44 +125,44 @@ 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;
-}
+export { Option_2 as Option };
 
 // @public
 export function TextField({
   label,
   name,
   validationHelpText,
+  isRequired,
+  testId,
+  validators,
 }: TextFieldProps): jsx.JSX.Element;
 
 // @public (undocumented)
 interface TextFieldProps {
+  isRequired?: boolean;
   label: string;
   name: string;
+  // (undocumented)
+  testId?: string;
   validationHelpText?: string;
+  validators?: Validator[];
 }
 
+// @public (undocumented)
+export const useFormContext: () => FormContextType;
+
 // @public (undocumented)
 export const useLinkCreateCallback: () => LinkCreateCallbackProviderProps;
 
+// @public (undocumented)
+export type Validator = {
+  isValid: (val: unknown) => boolean;
+  errorMessage: string;
+};
+
+// @public
+export type ValidatorMap = Record<string, Validator[]>;
+
 // (No @packageDocumentation comment for this package)
 ```
 

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

@@ -4,9 +4,51 @@
 
 ```ts
 
+import { AsyncSelectProps as AsyncSelectProps_2 } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
+import { OptionType } from '@atlaskit/select';
+import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 
+// @public
+export function AsyncSelect<T = OptionType>({ label, name, validationHelpText, isRequired, testId, validators, ...rest }: AsyncSelectProps<T>): jsx.JSX.Element;
+
+// @public (undocumented)
+type AsyncSelectProps<T = OptionType> = AsyncSelectProps_2<T> & {
+    name: string;
+    label: string;
+    validationHelpText?: string;
+    testId?: string;
+    isRequired?: boolean;
+    validators?: Validator[];
+};
+
+// @public (undocumented)
+export const CreateForm: (props: any) => JSX.Element;
+
+// @public (undocumented)
+export interface CreateFormProps {
+    // (undocumented)
+    children: ReactNode;
+    // (undocumented)
+    onCancel?: () => void;
+    // (undocumented)
+    onSubmit: (data: Record<string, unknown>) => void;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+export const FormContextProvider: React_2.FC<{}>;
+
+// @public (undocumented)
+interface FormContextType {
+    // (undocumented)
+    assignValidator: (name: string, validators: Validator[]) => void;
+    // (undocumented)
+    getValidators: () => ValidatorMap;
+}
+
 // @public (undocumented)
 interface Group {
     icon: string;
@@ -18,6 +60,9 @@ interface Group {
 function LinkCreate({ plugins, testId, groupKey, entityKey, onCreate, onFailure, onCancel, active, }: LinkCreateProps): jsx.JSX.Element;
 export default LinkCreate;
 
+// @public (undocumented)
+export const LinkCreateCallbackProvider: React_2.FC<LinkCreateCallbackProviderProps>;
+
 // @public (undocumented)
 interface LinkCreateCallbackProviderProps {
     onCancel?: () => void;
@@ -52,34 +97,37 @@ 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;
-}
+export { Option_2 as Option }
 
 // @public
-export function TextField({ label, name, validationHelpText }: TextFieldProps): jsx.JSX.Element;
+export function TextField({ label, name, validationHelpText, isRequired, testId, validators, }: TextFieldProps): jsx.JSX.Element;
 
 // @public (undocumented)
 interface TextFieldProps {
+    isRequired?: boolean;
     label: string;
     name: string;
+    // (undocumented)
+    testId?: string;
     validationHelpText?: string;
+    validators?: Validator[];
 }
 
+// @public (undocumented)
+export const useFormContext: () => FormContextType;
+
 // @public (undocumented)
 export const useLinkCreateCallback: () => LinkCreateCallbackProviderProps;
 
+// @public (undocumented)
+export type Validator = {
+    isValid: (val: unknown) => boolean;
+    errorMessage: string;
+};
+
+// @public
+export type ValidatorMap = Record<string, Validator[]>;
+
 // (No @packageDocumentation comment for this package)
 
 ```

package/dist/cjs/utils.js

@@ -1,94 +0,0 @@
-"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/es2019/utils.js

@@ -1,35 +0,0 @@
-/** 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;
-}