Export more UI components via extensions-api (#1285)

* export more UI components via extensions-api, touches #1277 #1284

Signed-off-by: Roman <ixrock@gmail.com>

* fix build, added table + notification-store exports

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/input/input.tsx

@@ -3,13 +3,16 @@ import "./input.scss";
 import React, { DOMAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { autobind, cssNames, debouncePromise } from "../../utils";
 import { Icon } from "../icon";
-import { conditionalValidators, Validator } from "./input_validators";
+import * as Validators from "./input_validators";
+import { InputValidator } from "./input_validators";
 import isString from "lodash/isString"
 import isFunction from "lodash/isFunction"
 import isBoolean from "lodash/isBoolean"
 import uniqueId from "lodash/uniqueId"
 
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+const { conditionalValidators, ...InputValidators } = Validators;
+export { InputValidators, InputValidator }
+
 type InputElement = HTMLInputElement | HTMLTextAreaElement;
 type InputElementProps = InputHTMLAttributes<InputElement> & TextareaHTMLAttributes<InputElement> & DOMAttributes<InputElement>;
 
@@ -24,7 +27,7 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSub
   showValidationLine?: boolean; // show animated validation line for async validators
   iconLeft?: string | React.ReactNode; // material-icon name in case of string-type
   iconRight?: string | React.ReactNode;
-  validators?: Validator | Validator[];
+  validators?: InputValidator | InputValidator[];
   onChange?(value: T, evt: React.ChangeEvent<InputElement>): void;
   onSubmit?(value: T): void;
 }
@@ -49,7 +52,7 @@ export class Input extends React.Component<InputProps, State> {
   static defaultProps = defaultProps as object;
 
   public input: InputElement;
-  public validators: Validator[] = [];
+  public validators: InputValidator[] = [];
 
   public state: State = {
     dirty: !!this.props.dirty,
@@ -149,7 +152,7 @@ export class Input extends React.Component<InputProps, State> {
     });
   }
 
-  private getValidatorError(value: string, { message }: Validator) {
+  private getValidatorError(value: string, { message }: InputValidator) {
     if (isFunction(message)) return message(value, this.props)
     return message || "";
   }
@@ -288,9 +291,9 @@ export class Input extends React.Component<InputProps, State> {
     return (
       <div className={className}>
         <label className="input-area flex gaps align-center">
-          {isString(iconLeft) ? <Icon material={iconLeft} /> : iconLeft}
+          {isString(iconLeft) ? <Icon material={iconLeft}/> : iconLeft}
           {multiLine ? <textarea {...inputProps as any} /> : <input {...inputProps as any} />}
-          {isString(iconRight) ? <Icon material={iconRight} /> : iconRight}
+          {isString(iconRight) ? <Icon material={iconRight}/> : iconRight}
         </label>
         <div className="input-info flex gaps">
           {!valid && dirty && (

src/renderer/components/input/input_validators.ts

@@ -4,26 +4,26 @@ import { t } from "@lingui/macro";
 import { _i18n } from '../../i18n';
 import fse from "fs-extra";
 
-export interface Validator {
+export interface InputValidator {
   debounce?: number; // debounce for async validators in ms
   condition?(props: InputProps): boolean; // auto-bind condition depending on input props
   message?: ReactNode | ((value: string, props?: InputProps) => ReactNode | string);
   validate(value: string, props?: InputProps): boolean | Promise<any>; // promise can throw error message
 }
 
-export const isRequired: Validator = {
+export const isRequired: InputValidator = {
   condition: ({ required }) => required,
   message: () => _i18n._(t`This field is required`),
   validate: value => !!value.trim(),
 };
 
-export const isEmail: Validator = {
+export const isEmail: InputValidator = {
   condition: ({ type }) => type === "email",
   message: () => _i18n._(t`Wrong email format`),
   validate: value => !!value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/),
 };
 
-export const isNumber: Validator = {
+export const isNumber: InputValidator = {
   condition: ({ type }) => type === "number",
   message: () => _i18n._(t`Invalid number`),
   validate: (value, { min, max }) => {
@@ -36,37 +36,37 @@ export const isNumber: Validator = {
   },
 };
 
-export const isUrl: Validator = {
+export const isUrl: InputValidator = {
   condition: ({ type }) => type === "url",
   message: () => _i18n._(t`Wrong url format`),
   validate: value => !!value.match(/^$|^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
 };
 
-export const isPath: Validator = {
+export const isPath: InputValidator = {
   condition: ({ type }) => type === "text",
   message: () => _i18n._(t`This field must be a valid path`),
   validate: value => !value || fse.pathExistsSync(value),
 }
 
-export const minLength: Validator = {
+export const minLength: InputValidator = {
   condition: ({ minLength }) => !!minLength,
   message: (value, { minLength }) => _i18n._(t`Minimum length is ${minLength}`),
   validate: (value, { minLength }) => value.length >= minLength,
 };
 
-export const maxLength: Validator = {
+export const maxLength: InputValidator = {
   condition: ({ maxLength }) => !!maxLength,
   message: (value, { maxLength }) => _i18n._(t`Maximum length is ${maxLength}`),
   validate: (value, { maxLength }) => value.length <= maxLength,
 };
 
 const systemNameMatcher = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;
-export const systemName: Validator = {
+export const systemName: InputValidator = {
   message: () => _i18n._(t`A System Name must be lowercase DNS labels separated by dots. DNS labels are alphanumerics and dashes enclosed by alphanumerics.`),
   validate: value => !!value.match(systemNameMatcher),
 };
 
-export const accountId: Validator = {
+export const accountId: InputValidator = {
   message: () => _i18n._(t`Invalid account ID`),
   validate: value => (isEmail.validate(value) || systemName.validate(value))
 };