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

package/lib/components/Text/index.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BodyLarge", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodyLarge;
+  }
+});
+Object.defineProperty(exports, "BodyMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodyMedium;
+  }
+});
+Object.defineProperty(exports, "BodySmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodySmall;
+  }
+});
+Object.defineProperty(exports, "ButtonTextMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextMedium;
+  }
+});
+Object.defineProperty(exports, "ButtonTextSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextSmall;
+  }
+});
+Object.defineProperty(exports, "FormInputMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.FormInputMedium;
+  }
+});
+Object.defineProperty(exports, "FormInputSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.FormInputSmall;
+  }
+});
+Object.defineProperty(exports, "FormLabelMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.FormLabelMedium;
+  }
+});
+Object.defineProperty(exports, "FormLabelSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.FormLabelSmall;
+  }
+});
+Object.defineProperty(exports, "JumboMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.JumboMedium;
+  }
+});
+Object.defineProperty(exports, "SubTitleExtraSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.SubTitleExtraSmall;
+  }
+});
+Object.defineProperty(exports, "SubTitleLarge", {
+  enumerable: true,
+  get: function () {
+    return _Text.SubTitleLarge;
+  }
+});
+Object.defineProperty(exports, "SubTitleMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.SubTitleMedium;
+  }
+});
+Object.defineProperty(exports, "SubTitleSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.SubTitleSmall;
+  }
+});
+Object.defineProperty(exports, "TEXT_COLORS", {
+  enumerable: true,
+  get: function () {
+    return _typography.TEXT_COLORS;
+  }
+});
+Object.defineProperty(exports, "TitleMedium", {
+  enumerable: true,
+  get: function () {
+    return _Text.TitleMedium;
+  }
+});
+var _typography = require("../../types/typography");
+var _Text = require("./Text");

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

@@ -0,0 +1,21 @@
+// @flow strict
+
+export {TEXT_COLORS} from '../../types/typography';
+export type {TextProps} from './Text';
+export {
+  BodyLarge,
+  BodyMedium,
+  BodySmall,
+  ButtonTextMedium,
+  ButtonTextSmall,
+  FormInputMedium,
+  FormInputSmall,
+  FormLabelMedium,
+  FormLabelSmall,
+  JumboMedium,
+  SubTitleExtraSmall,
+  SubTitleLarge,
+  SubTitleMedium,
+  SubTitleSmall,
+  TitleMedium,
+} from './Text';

package/lib/components/Textarea/Textarea.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Text = require("../Text");
+var _TextareaModule = _interopRequireDefault(require("./Textarea.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 Textarea_ = (props, ref) => {
+  const {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    name,
+    disabled,
+    placeholder,
+    error,
+    locked,
+    errorText,
+    label,
+    helperText,
+    classNames,
+    size = 'medium',
+    required,
+    textCountLimit,
+    ...textareaProps
+  } = props;
+  const [textCountError, setTextCountError] = React.useState(false);
+  React.useEffect(() => {
+    if (textCountLimit) {
+      if (value && value.length > textCountLimit) {
+        setTextCountError(true);
+      } else {
+        setTextCountError(false);
+      }
+    }
+  }, [value]);
+  const controlledTextareaFilled = value !== '';
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+    className: (0, _classify.classify)(_TextareaModule.default.wrapper, {
+      [_TextareaModule.default.filled]: controlledTextareaFilled ?? false,
+      [_TextareaModule.default.withError]: (error || textCountError) ?? false
+    }),
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      className: _TextareaModule.default.info,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+        className: _TextareaModule.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.js)(_Text.FormLabelSmall, {
+        color: error || textCountError ? 'danger' : 'secondary',
+        children: !!textCountLimit && (value && value.length || 0) + '/' + textCountLimit
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: (0, _classify.classify)(_TextareaModule.default.box, classNames?.box, {
+        [_TextareaModule.default.inputDisabled]: disabled ?? false,
+        [_TextareaModule.default.medium]: size === 'medium',
+        [_TextareaModule.default.small]: size === 'small',
+        [_TextareaModule.default.locked]: locked
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.js)("textarea", {
+        disabled: locked || disabled,
+        name: name,
+        ref: ref,
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        ...textareaProps
+      })
+    }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _TextareaModule.default.info,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodySmall, {
+        color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary',
+        children: error && errorText ? errorText : helperText ?? ''
+      })
+    })]
+  });
+};
+const Textarea = /*#__PURE__*/React.forwardRef(Textarea_);
+exports.Textarea = Textarea;

package/lib/components/Textarea/Textarea.js.flow

@@ -0,0 +1,133 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {BodySmall, FormLabelSmall} from '../Text';
+
+import css from './Textarea.module.css';
+
+
+type ClassNames = $ReadOnly<{box?: string}>;
+
+export type TextareaProps = {
+  value?: string,
+  onChange?: (
+    evt: SyntheticInputEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => mixed,
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  name?: string,
+  disabled?: boolean,
+  placeholder?: string,
+  locked?: boolean,
+  error?: boolean,
+  errorText?: string,
+  label?: string | React.Node,
+  helperText?: string | React.Node,
+  classNames?: ClassNames,
+  size?: 'medium' | 'small',
+  required?: boolean,
+  textCountLimit?: number,
+};
+
+const Textarea_ = (props: TextareaProps, ref): React.Node => {
+  const {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    name,
+    disabled,
+    placeholder,
+    error,
+    locked,
+    errorText,
+    label,
+    helperText,
+    classNames,
+    size = 'medium',
+    required,
+    textCountLimit,
+    ...textareaProps
+  } = props;
+
+  const [textCountError, setTextCountError] = React.useState(false);
+
+  React.useEffect(() => {
+    if (textCountLimit) {
+      if (value && value.length > textCountLimit) {
+        setTextCountError(true);
+      } else {
+        setTextCountError(false);
+      }
+    }
+  }, [value]);
+
+  const controlledTextareaFilled = value !== '';
+
+  return (
+    <div
+      className={classify(css.wrapper, {
+        [css.filled]: controlledTextareaFilled ?? false,
+        [css.withError]: (error || textCountError) ?? false,
+      })}
+    >
+      {Boolean(label) && (
+        <div className={css.info}>
+          <div className={css.infoContent}>
+            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
+            &nbsp;
+            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
+          </div>
+          <FormLabelSmall
+            color={error || textCountError ? 'danger' : 'secondary'}
+          >
+            {!!textCountLimit &&
+              ((value && value.length) || 0) + '/' + textCountLimit}
+          </FormLabelSmall>
+        </div>
+      )}
+      <div
+        className={classify(css.box, classNames?.box, {
+          [css.inputDisabled]: disabled ?? false,
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+          [css.locked]: locked,
+        })}
+      >
+        <textarea
+          disabled={locked || disabled}
+          name={name}
+          ref={ref}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          {...textareaProps}
+        ></textarea>
+      </div>
+      {(Boolean(helperText) || error) && (
+        <div className={css.info}>
+          <BodySmall
+            color={
+              error && errorText
+                ? 'danger'
+                : disabled
+                  ? 'disabled'
+                  : 'secondary'
+            }
+          >
+            {error && errorText ? errorText : helperText ?? ''}
+          </BodySmall>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Textarea = (React.forwardRef<TextareaProps, HTMLTextAreaElement>(
+  Textarea_,
+): React$AbstractComponent<TextareaProps, HTMLTextAreaElement>);

package/lib/components/Textarea/Textarea.module.css

@@ -0,0 +1,110 @@
+@value (
+  size160,
+  size140,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  borderRadiusMedium,
+  borderRadiusSmall,
+  borderWidthSecondary,
+  borderWidthTertiary,
+  borderWidthNone
+) from '../../styles/variables/_border.css';
+
+@value (
+  colorTextPrimary,
+  colorTextSecondary,
+  colorBorderPrimary,
+  colorFillPrimary,
+  colorFocusPrimary,
+  colorFocusDanger,
+  colorTextDisabled,
+  colorFillDisabled,
+  colorTextDanger
+) from '../../styles/variables/_color.css';
+
+.container {
+  color: colorTextPrimary;
+  width: sizeFluid;
+}
+
+.box {
+  display: flex;
+  align-items: center;
+  color: colorTextPrimary;
+  gap: spaceSmall;
+  height: size160;
+  padding: spaceXSmall spaceSmall;
+  border: borderWidthSecondary solid colorBorderPrimary;
+}
+
+.locked {
+  border-style: dashed;
+}
+
+.medium {
+  composes: formInputMedium from '../../styles/typography.module.css';
+  height: size160;
+  border-radius: borderRadiusMedium;
+}
+
+.small {
+  composes: formInputSmall from '../../styles/typography.module.css';
+  height: size140;
+  border-radius: borderRadiusSmall;
+}
+
+.wrapper.withError .box {
+  border-color: colorTextDanger;
+}
+
+.wrapper.withError:focus-within .box {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+.box textarea {
+  width: sizeFluid;
+  height: sizeFluid;
+  resize: none;
+}
+
+.wrapper:not(.inputDisabled):not(.withError):focus-within .box {
+  border-color: colorFillPrimary;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.inputDisabled {
+  color: colorTextDisabled;
+  border-color: colorBorderPrimary;
+  background-color: colorFillDisabled;
+}
+
+.inputDisabled textarea::placeholder {
+  color: inherit;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: sizeFluid;
+  gap: spaceXXSmall;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.infoContent {
+  display: flex;
+}

package/lib/components/Textarea/index.js

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

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {TextareaProps} from './Textarea';
+export {Textarea} from './Textarea';

package/lib/components/Toast/Toast.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToastTitle = exports.ToastFooter = exports.ToastBody = exports.Toast = exports.TOAST_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _ToastModule = _interopRequireDefault(require("./Toast.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 TOAST_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger'
+});
+exports.TOAST_SEMANTIC = TOAST_SEMANTIC;
+const TOAST_TITLE_COLOR = {
+  success: _Text.TEXT_COLORS.success,
+  information: _Text.TEXT_COLORS.information,
+  warning: _Text.TEXT_COLORS.warning,
+  danger: _Text.TEXT_COLORS.danger
+};
+const ToastIcon = _ref => {
+  let {
+    semantic
+  } = _ref;
+  switch (semantic) {
+    case 'success':
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-check",
+        size: "medium",
+        color: _Text.TEXT_COLORS.success,
+        type: "solid"
+      });
+    case TOAST_SEMANTIC.information:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-info",
+        size: "medium",
+        color: _Text.TEXT_COLORS.information,
+        type: "solid"
+      });
+    case TOAST_SEMANTIC.warning:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-exclamation",
+        size: "medium",
+        color: _Text.TEXT_COLORS.warning,
+        type: "solid"
+      });
+    case TOAST_SEMANTIC.danger:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "shield-exclamation",
+        size: "medium",
+        color: _Text.TEXT_COLORS.danger,
+        type: "solid"
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        color: _Text.TEXT_COLORS.neutral,
+        name: "face-smile",
+        size: "medium",
+        type: "solid"
+      });
+  }
+};
+const ToastTitle = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return children;
+};
+exports.ToastTitle = ToastTitle;
+const ToastBody = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return children;
+};
+exports.ToastBody = ToastBody;
+const ToastFooter = _ref4 => {
+  let {
+    children,
+    onClose
+  } = _ref4;
+  const arrayChildren = React.Children.toArray(children);
+  const footerActions = React.Children.map(children, (child, index) => {
+    const isLast = index === arrayChildren.length - 1;
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      const {
+        onClick
+      } = child.props;
+      const buttonClickHandler = e => {
+        onClose && onClose();
+        onClick && onClick(e);
+      };
+      if (child?.type?.name === 'Button' && isLast) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          size: 'small',
+          type: 'primary',
+          ...child.props,
+          onClick: buttonClickHandler
+        });
+      } else if (child?.type?.name === 'Button') {
+        return /*#__PURE__*/React.cloneElement(child, {
+          size: 'small',
+          type: 'tertiary',
+          ...child.props,
+          onClick: buttonClickHandler
+        });
+      }
+    }
+    return child;
+  });
+  return React.Children.count(children) > 0 ? /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: _ToastModule.default.toastFooterActions,
+    children: footerActions
+  }) : null;
+};
+exports.ToastFooter = ToastFooter;
+const Toast = _ref5 => {
+  let {
+    classNames,
+    children,
+    time,
+    semantic = TOAST_SEMANTIC.success,
+    onClose,
+    initialFocus = -1
+  } = _ref5;
+  const {
+    floating,
+    context
+  } = (0, _reactDomInteractions.useFloating)();
+  const getComp = comp => {
+    if (children instanceof Array) {
+      const nodes = [];
+      for (const child of children) {
+        if (child?.type?.name === comp) {
+          nodes.push(child);
+        }
+      }
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+    return null;
+  };
+  const footer = getComp('ToastFooter');
+  // $FlowFixMe
+  const footerWithClose = footer ? /*#__PURE__*/React.cloneElement(footer, {
+    onClose
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_reactDomInteractions.FloatingFocusManager, {
+    context: context,
+    initialFocus: initialFocus,
+    children: /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      className: (0, _classify.default)(_ToastModule.default.toastContainer, classNames?.wrapper),
+      ref: floating,
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)(ToastIcon, {
+        semantic: semantic
+      }), /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+        className: _ToastModule.default.toastMidSection,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+          className: _ToastModule.default.contentWrap,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+            className: _ToastModule.default.titleBodyWrap,
+            children: [/*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleSmall, {
+              color: TOAST_TITLE_COLOR[semantic],
+              children: getComp('ToastTitle')
+            }), /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodyMedium, {
+              children: getComp('ToastBody')
+            })]
+          }), time && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleExtraSmall, {
+            children: time
+          })]
+        }), footerWithClose]
+      }), /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.CloseIcon, {
+        onClick: onClose
+      })]
+    })
+  });
+};
+exports.Toast = Toast;