@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -0,0 +1,173 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import {Icon} from '../Icon';
+import {SubTitleExtraSmall} from '../Text';
+import {Truncate} from '../Truncate';
+
+import css from './InContextAlert.module.css';
+
+
+export const ALERT_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+type ClassNames = $ReadOnly<{wrapper?: string, alertText?: string}>;
+export type AlertSemanticType = $Values<typeof ALERT_SEMANTIC>;
+
+type InContextAlertBaseProps = {
+  classNames?: ClassNames,
+  ...
+    | {
+        dismissable: true,
+        onCloseClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+        selfDismiss?: boolean,
+      }
+    | {dismissable?: false},
+  children?: string,
+};
+
+type InContextAlertPropsFixedIcon = {
+  ...InContextAlertBaseProps,
+  semantic: AlertSemanticType,
+};
+
+type InContextAlertPropsNeutral = {
+  ...InContextAlertBaseProps,
+  semantic?: 'neutral',
+  leftIconName?: string,
+};
+
+export type InContextAlertProps =
+  | InContextAlertPropsFixedIcon
+  | InContextAlertPropsNeutral;
+
+const AlertIcon = ({
+  semantic,
+  leftIconName,
+}: {
+  semantic: AlertSemanticType,
+  leftIconName: string,
+}) => {
+  switch (semantic) {
+  case ALERT_SEMANTIC.neutral:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={leftIconName ? leftIconName : 'face-smile'}
+        size="small"
+        type="regular"
+      />
+    );
+  case ALERT_SEMANTIC.success:
+    return (
+      <Icon
+        name="circle-check"
+        size="small"
+        color={TEXT_COLORS.success}
+        type="regular"
+      />
+    );
+
+  case ALERT_SEMANTIC.information:
+    return (
+      <Icon
+        name="circle-info"
+        size="small"
+        color={TEXT_COLORS.information}
+        type="regular"
+      />
+    );
+
+  case ALERT_SEMANTIC.warning:
+    return (
+      <Icon
+        name="circle-exclamation"
+        size="small"
+        color={TEXT_COLORS.warning}
+        type="regular"
+      />
+    );
+
+  case ALERT_SEMANTIC.danger:
+    return (
+      <Icon
+        name="shield-exclamation"
+        size="small"
+        color={TEXT_COLORS.danger}
+        type="regular"
+      />
+    );
+
+  default:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name="face-smile"
+        size="small"
+        type="regular"
+      />
+    );
+  }
+};
+
+export const InContextAlert = (props: InContextAlertProps): React.Node => {
+  const {
+    classNames,
+    semantic = ALERT_SEMANTIC.neutral,
+    dismissable,
+    children,
+    selfDismiss = false,
+    leftIconName = '',
+    onCloseClick,
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = (e) => {
+    onCloseClick && onCloseClick(e);
+    selfDismiss && setDismissed(true);
+  };
+
+  return (
+    <>
+      {!dismissed && (
+        <div
+          className={classify(
+            css.alertContainer,
+            {
+              [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+              [css.success]: semantic === ALERT_SEMANTIC.success,
+              [css.information]: semantic === ALERT_SEMANTIC.information,
+              [css.warning]: semantic === ALERT_SEMANTIC.warning,
+              [css.danger]: semantic === ALERT_SEMANTIC.danger,
+            },
+            classNames?.wrapper,
+          )}
+        >
+          <AlertIcon semantic={semantic} leftIconName={leftIconName} />
+          {React.Children.count(children) > 0 && (
+            <SubTitleExtraSmall className={classify(classNames?.alertText)}>
+              <Truncate line={2}>{children}</Truncate>
+            </SubTitleExtraSmall>
+          )}
+          {dismissable && (
+            <Icon
+              color={TEXT_COLORS.primary}
+              name="close"
+              size="small"
+              type="regular"
+              onClick={closeClickHandler}
+              className={css.closeIcon}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+};

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -0,0 +1,54 @@
+@value (borderRadiusXSmall) from '../../styles/variables/_border.css';
+@value (colorFillPrimary,
+  colorTextPrimary,
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorInformationLightest,
+  colorWarningLightest,
+  colorDangerLightest
+) from '../../styles/variables/_color.css';
+
+@value (
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.alertContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: spaceXSmall;
+  gap: spaceXSmall;
+  border-radius: borderRadiusXSmall;
+  width: sizeFluid;
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+
+.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.success {
+  background-color: colorSuccessLightest;
+}
+
+.information {
+  background-color: colorInformationLightest;
+}
+
+.warning {
+  background-color: colorWarningLightest;
+}
+
+.danger {
+  background-color: colorDangerLightest;
+}
+
+.closeIcon {
+  cursor: pointer;
+  margin-left: auto;
+}

package/lib/components/InContextAlert/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ALERT_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _InContextAlert.ALERT_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "InContextAlert", {
+  enumerable: true,
+  get: function () {
+    return _InContextAlert.InContextAlert;
+  }
+});
+var _InContextAlert = require("./InContextAlert");

package/lib/components/InContextAlert/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export {ALERT_SEMANTIC, InContextAlert} from './InContextAlert';

package/lib/components/Input/Input.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _InputModule = _interopRequireDefault(require("./Input.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const Input_ = (props, ref) => {
+  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,
+    ...inputProps
+  } = props;
+  const [showPassword, setShowPassword] = React.useState(false);
+  const controlledInputFilled = value !== '';
+  const handleRightIconClick = e => {
+    if (locked || disabled) {
+      return;
+    }
+    if (type === 'password') {
+      setShowPassword(!showPassword);
+    }
+    onIconRightClick && onIconRightClick(e);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+    className: (0, _classify.classify)(_InputModule.default.wrapper, {
+      [_InputModule.default.filled]: controlledInputFilled ?? false,
+      [_InputModule.default.withError]: error ?? false
+    }),
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _InputModule.default.info,
+      children: /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+        className: _InputModule.default.infoContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelSmall, {
+          color: "secondary",
+          children: label ?? ''
+        }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelSmall, {
+          color: "danger",
+          children: '*'
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      className: (0, _classify.classify)(_InputModule.default.box, classNames?.box, {
+        [_InputModule.default.inputDisabled]: disabled ?? false,
+        [_InputModule.default.medium]: size === 'medium',
+        [_InputModule.default.small]: size === 'small',
+        [_InputModule.default.locked]: locked
+      }),
+      onClick: !(disabled || locked) ? onContainerClick : null,
+      ref: boxRef,
+      children: [iconLeftName && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        className: (0, _classify.classify)(classNames?.iconLeft),
+        name: iconLeftName,
+        color: disabled ? 'disabled' : 'secondary',
+        size: "small",
+        type: iconLeftType
+      }), /*#__PURE__*/(0, _jsxRuntime.js)("input", {
+        disabled: locked || disabled,
+        name: name,
+        ref: ref,
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        type: showPassword ? 'text' : type,
+        readOnly: readOnly && 'readOnly',
+        ...inputProps
+      }), /*#__PURE__*/(0, _jsxRuntime.js)(RightInputIcon, {
+        isEmail: type === 'email',
+        isPassword: type === 'password',
+        showPassword: showPassword,
+        isLocked: locked,
+        isDisabled: disabled,
+        onClick: handleRightIconClick,
+        iconRightName: iconRightName,
+        iconRightType: iconRightType,
+        className: classNames?.iconRight
+      })]
+    }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _InputModule.default.info,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodySmall, {
+        color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary',
+        children: error && errorText ? errorText : helperText ?? ''
+      })
+    })]
+  });
+};
+const RightInputIcon = _ref => {
+  let {
+    isEmail,
+    isPassword,
+    showPassword,
+    isLocked,
+    isDisabled,
+    iconRightName,
+    iconRightType,
+    ...rightIconProps
+  } = _ref;
+  if (isLocked) {
+    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      name: "lock",
+      color: isDisabled ? 'disabled' : 'secondary',
+      size: "small",
+      ...rightIconProps
+    });
+  }
+  if (isEmail) {
+    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      name: "at",
+      color: isDisabled ? 'disabled' : 'secondary',
+      size: "small",
+      type: iconRightType,
+      ...rightIconProps
+    });
+  }
+  if (isPassword) {
+    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      name: showPassword ? 'eye-slash' : 'eye',
+      color: isDisabled ? 'disabled' : 'secondary',
+      size: "small",
+      type: iconRightType,
+      ...rightIconProps,
+      className: (0, _classify.classify)(_InputModule.default.rightClickableIcon, {
+        [_InputModule.default.disabled]: isDisabled || isLocked
+      })
+    });
+  }
+  if (iconRightName) {
+    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      name: iconRightName || '',
+      color: isDisabled ? 'disabled' : 'secondary',
+      size: "small",
+      type: iconRightType,
+      ...rightIconProps
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {});
+};
+const Input = /*#__PURE__*/React.forwardRef(Input_);
+exports.Input = Input;

package/lib/components/Input/Input.js.flow

@@ -0,0 +1,246 @@
+// @flow strict
+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,
+}>;
+
+export type InputProps = {
+  value?: string,
+  onChange?: (
+    evt: SyntheticInputEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => mixed,
+  classNames?: ClassNames,
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onPaste?: (e: ClipboardEvent) => mixed,
+  onIconRightClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  name?: string,
+  disabled?: boolean,
+  placeholder?: string,
+  locked?: boolean,
+  error?: boolean,
+  errorText?: string,
+  label?: string | React.Node,
+  helperText?: string | React.Node,
+  type?: 'text' | 'number' | 'password' | 'email' | 'tel' | 'url',
+  size?: 'medium' | 'small',
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  iconRightName?: string,
+  iconRightType?: IconType,
+  required?: boolean,
+  readOnly?: boolean,
+  boxRef?: (?HTMLElement) => mixed,
+};
+
+const Input_ = (props: InputProps, ref): React.Node => {
+  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,
+    ...inputProps
+  } = props;
+
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const controlledInputFilled = value !== '';
+
+  const handleRightIconClick = (e: SyntheticEvent<HTMLElement>) => {
+    if (locked || disabled) {
+      return;
+    }
+
+    if (type === 'password') {
+      setShowPassword(!showPassword);
+    }
+
+    onIconRightClick && onIconRightClick(e);
+  };
+
+  return (
+    <div
+      className={classify(css.wrapper, {
+        [css.filled]: controlledInputFilled ?? false,
+        [css.withError]: error ?? false,
+      })}
+    >
+      {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, classNames?.box, {
+          [css.inputDisabled]: disabled ?? false,
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+          [css.locked]: locked,
+        })}
+        onClick={!(disabled || locked) ? onContainerClick : null}
+        ref={boxRef}
+      >
+        {iconLeftName && (
+          <Icon
+            className={classify(classNames?.iconLeft)}
+            name={iconLeftName}
+            color={disabled ? 'disabled' : 'secondary'}
+            size="small"
+            type={iconLeftType}
+          />
+        )}
+        <input
+          disabled={locked || disabled}
+          name={name}
+          ref={ref}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          type={showPassword ? 'text' : type}
+          readOnly={readOnly && 'readOnly'}
+          {...inputProps}
+        />
+        <RightInputIcon
+          isEmail={type === 'email'}
+          isPassword={type === 'password'}
+          showPassword={showPassword}
+          isLocked={locked}
+          isDisabled={disabled}
+          onClick={handleRightIconClick}
+          iconRightName={iconRightName}
+          iconRightType={iconRightType}
+          className={classNames?.iconRight}
+        />
+      </div>
+      {(Boolean(helperText) || error) && (
+        <div className={css.info}>
+          <BodySmall
+            color={
+              error && errorText
+                ? 'danger'
+                : disabled
+                  ? 'disabled'
+                  : 'secondary'
+            }
+          >
+            {error && errorText ? errorText : helperText ?? ''}
+          </BodySmall>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const RightInputIcon = ({
+  isEmail,
+  isPassword,
+  showPassword,
+  isLocked,
+  isDisabled,
+  iconRightName,
+  iconRightType,
+  ...rightIconProps
+}: {
+  isEmail?: boolean,
+  isPassword?: boolean,
+  showPassword?: boolean,
+  isLocked?: boolean,
+  isDisabled?: boolean,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  iconRightName?: string,
+  iconRightType?: IconType,
+  className?: string,
+}): React.Node => {
+  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) {
+    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 <></>;
+};
+
+export const Input = (React.forwardRef<InputProps, HTMLInputElement>(
+  Input_,
+): React$AbstractComponent<InputProps, HTMLInputElement>);