@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/Input/Input.tsx

@@ -0,0 +1,336 @@
+import {Flow} from 'flow-to-typescript-codemod';
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {BodySmall, FormLabelSmall} from '../Text';
+
+import css from './Input.module.css';
+
+
+type ClassNames = Readonly<{
+  box?: string;
+  iconLeft?: string;
+  iconRight?: string;
+  wrapper?: string;
+}>;
+
+export const EXPONENT_CHARACTER_LIST = ['E', 'e'] as const;
+
+export const INPUT_TYPES = Object.freeze({
+  text: 'text',
+  number: 'number',
+  password: 'password',
+  email: 'email',
+  tel: 'tel',
+  url: 'url',
+  date: 'date',
+  'datetime-local': 'datetime-local',
+  time: 'time',
+  week: 'week',
+  month: 'month',
+  color: 'color',
+  search: 'search',
+});
+
+export type InputType = typeof INPUT_TYPES[keyof typeof INPUT_TYPES];
+
+export type InputOnChangeParamsType = {
+  evt: React.ChangeEvent<HTMLInputElement>;
+  isEnter?: boolean;
+};
+
+export type InputProps = {
+  value?: string;
+  onChange?: (evt: React.ChangeEvent<HTMLInputElement>, isEnter?: boolean) => unknown;
+  classNames?: ClassNames;
+  onFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+  onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => unknown;
+  onIconRightClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+  onContainerClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+  name?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  locked?: boolean;
+  error?: boolean;
+  errorText?: string;
+  label?: string | React.ReactNode;
+  helperText?: string | React.ReactNode;
+  type?: InputType;
+  size?: 'medium' | 'small';
+  iconLeftName?: string;
+  iconLeftType?: IconType;
+  iconRightName?: string;
+  iconRightType?: IconType;
+  required?: boolean;
+  readOnly?: boolean;
+  boxRef?: (arg1?: HTMLElement | null | undefined) => unknown;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  min?: string;
+  max?: string;
+  autoComplete?: string;
+  /* Note(Nishant): Restricts typing `e` and `E` in the number input when
+    set to true. We have baked this condition in the keydown handler itself so
+    this would restrict and not show these exponent characters when typed
+    **/
+  disallowExponents?: boolean;
+  /** The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any.
+     * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
+     * appropriate default value if neither of those is provided) are valid. */
+  step?: string;
+  hideNumberSpinner?: boolean;
+  hidePasswordToggleIcon?: boolean;
+  /** HTML size attribute for input element */
+  htmlSize?: number;
+};
+
+const Input_ = (
+  props: InputProps & Omit<Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'name' | 'ref' | 'placeholder' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'type' | 'readOnly' | 'onKeyDown'>, keyof InputProps>,
+  ref: ((arg1: null | HTMLInputElement) => unknown) | {
+    current: null | HTMLInputElement;
+  },
+) => {
+  const {
+    value,
+    type,
+    onChange,
+    onFocus,
+    onBlur,
+    onIconRightClick,
+    onContainerClick,
+    name,
+    disabled,
+    placeholder,
+    error,
+    locked,
+    errorText,
+    label,
+    helperText,
+    classNames,
+    size = 'medium',
+    iconLeftName = '',
+    iconLeftType = 'regular',
+    iconRightName = '',
+    iconRightType = 'regular',
+    required,
+    readOnly,
+    boxRef,
+    onKeyDown,
+    disallowExponents,
+    hideNumberSpinner,
+    hidePasswordToggleIcon,
+    htmlSize,
+    ...inputProps
+  } = props;
+
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const controlledInputFilled = value !== '';
+
+  const handleRightIconClick = (e: React.SyntheticEvent<HTMLElement>) => {
+    if (locked || disabled) {
+      return;
+    }
+
+    if (type === 'password') {
+      setShowPassword(!showPassword);
+    }
+
+    onIconRightClick && onIconRightClick(e);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (type === INPUT_TYPES.number && disallowExponents) {
+// @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type '"E" | "e"'.
+      if (EXPONENT_CHARACTER_LIST.includes(e.key)) {
+        e.preventDefault();
+      }
+    }
+
+    onKeyDown?.(e);
+  };
+
+  return (
+    <div
+      className={classify(
+        css.wrapper,
+        {
+          [css.filled]: controlledInputFilled ?? false,
+          [css.withError]: error ?? false,
+        },
+        classNames?.wrapper,
+      )}
+    >
+      {Boolean(label) && (
+        <div className={css.info}>
+          <div className={css.infoContent}>
+            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
+            &nbsp;
+            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
+          </div>
+        </div>
+      )}
+      <div
+        className={classify(
+          css.box,
+          {
+            [css.inputDisabled]: disabled ?? false,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.locked]: locked,
+            [css.color]: type === 'color',
+            [css.hideNumberSpinner]: hideNumberSpinner,
+          },
+          classNames?.box,
+        )}
+// @ts-ignore - TS2322 - Type '((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'.
+        onClick={!(disabled || locked) ? onContainerClick : null}
+// @ts-ignore - TS2322 - Type '((arg1?: HTMLElement | null | undefined) => unknown) | undefined' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
+        ref={boxRef}
+      >
+        {iconLeftName && (
+          <Icon
+            className={classify(classNames?.iconLeft)}
+            name={iconLeftName}
+            color={disabled ? 'disabled' : 'secondary'}
+            size="small"
+            type={iconLeftType}
+          />
+        )}
+        <input
+          {...inputProps}
+          disabled={locked || disabled}
+          name={name}
+// @ts-ignore - TS2322 - Type '{ current: HTMLInputElement | null; } | ((arg1: HTMLInputElement | null) => unknown)' is not assignable to type 'Ref<HTMLInputElement> | undefined'.
+          ref={ref}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          type={showPassword ? 'text' : type}
+// @ts-ignore - TS2322 - Type 'false | "readOnly" | undefined' is not assignable to type 'boolean | undefined'.
+          readOnly={readOnly && 'readOnly'}
+          onKeyDown={handleKeyDown}
+          size={htmlSize}
+        />
+        {type === 'color' && (
+          <div
+            className={classify(css.colorText, css[size], {
+              [css.hasValue]: value,
+            })}
+          >
+            {value ? value : placeholder}
+          </div>
+        )}
+        <RightInputIcon
+          isEmail={type === 'email'}
+          isPassword={type === 'password'}
+          showPassword={showPassword}
+          showPasswordToggleIcon={!hidePasswordToggleIcon}
+          isLocked={locked}
+          isDisabled={disabled}
+          onClick={handleRightIconClick}
+          iconRightName={iconRightName}
+          iconRightType={iconRightType}
+          className={classNames?.iconRight}
+        />
+      </div>
+      {(Boolean(helperText) || error) && (
+        <div className={css.info}>
+          {error && errorText ? (
+            <BodySmall color="danger">{errorText}</BodySmall>
+          ) : typeof helperText === 'string' ? (
+            <BodySmall color={disabled ? 'disabled' : 'secondary'}>
+              {helperText}
+            </BodySmall>
+          ) : (
+            helperText
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const RightInputIcon = (
+  {
+    isEmail,
+    isPassword,
+    showPassword,
+    showPasswordToggleIcon,
+    isLocked,
+    isDisabled,
+    iconRightName,
+    iconRightType,
+    ...rightIconProps
+  }: {
+    isEmail?: boolean;
+    isPassword?: boolean;
+    showPassword?: boolean;
+    showPasswordToggleIcon?: boolean;
+    isLocked?: boolean;
+    isDisabled?: boolean;
+    onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    iconRightName?: string;
+    iconRightType?: IconType;
+    className?: string;
+  },
+) => {
+  if (isLocked) {
+    return (
+      <Icon
+        name="lock"
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        {...rightIconProps}
+      />
+    );
+  }
+  if (isEmail) {
+    return (
+      <Icon
+        name="at"
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        type={iconRightType}
+        {...rightIconProps}
+      />
+    );
+  }
+  if (isPassword && showPasswordToggleIcon) {
+    return (
+      <Icon
+        name={showPassword ? 'eye-slash' : 'eye'}
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        type={iconRightType}
+        {...rightIconProps}
+        className={classify(css.rightClickableIcon, {
+          [css.disabled]: isDisabled || isLocked,
+        })}
+      />
+    );
+  }
+  if (iconRightName) {
+    return (
+      <Icon
+        name={iconRightName || ''}
+        color={isDisabled ? 'disabled' : 'secondary'}
+        size="small"
+        type={iconRightType}
+        {...rightIconProps}
+      />
+    );
+  }
+
+  return <></>;
+};
+
+// @ts-ignore - TS2345 - Argument of type '(props: InputProps & Omit<Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'name' | 'ref' | 'placeholder' | 'value' | 'onChange' | 'onFocus' | 'onBlur' | 'type' | 'readOnly' | 'onKeyDown'>, keyof InputProps>, ref: { current: null | HTMLInputElement; } | ((arg1: null | HTMLInputElement) => unknown)) => React.JSX....' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLInputElement, InputProps>'.
+export const Input = (React.forwardRef<HTMLInputElement, InputProps>(Input_) as Flow.AbstractComponent<InputProps, HTMLInputElement>);

package/lib/components/Input/NativeColorpicker.stories.d.ts

@@ -0,0 +1,370 @@
+import * as React from 'react';
+import type { InputProps } from './Input';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<InputProps, HTMLInputElement>;
+    argTypes: {
+        size: {
+            options: string[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        iconLeftName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconLeftType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        iconRightName: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        iconRightType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        name: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        required: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        locked: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        error: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        errorText: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        label: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        helperText: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        readOnly: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        minLength: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        maxLength: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        pattern: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        min: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        max: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        step: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onChange: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onFocus: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onBlur: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onKeyDown: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onIconRightClick: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onPaste: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        autoComplete: {
+            description: string;
+            action: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _NativeColorPicker: {
+    (args: InputProps): React.JSX.Element;
+    args: {
+        label: string;
+        placeholder: string;
+        value: string;
+    };
+};
+//# sourceMappingURL=NativeColorpicker.stories.d.ts.map

package/lib/components/Input/NativeColorpicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeColorpicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Input/NativeColorpicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMxC,wBA+SE;AAEF,eAAO,MAAM,kBAAkB;WAAU,UAAU;;;;;;CAiBlD,CAAC"}