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

package/lib/components/Toast/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TOAST_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _Toast.TOAST_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.Toast;
+  }
+});
+Object.defineProperty(exports, "ToastBody", {
+  enumerable: true,
+  get: function () {
+    return _Toast.ToastBody;
+  }
+});
+Object.defineProperty(exports, "ToastContainer", {
+  enumerable: true,
+  get: function () {
+    return _ToastContainer.ToastContainer;
+  }
+});
+Object.defineProperty(exports, "ToastFooter", {
+  enumerable: true,
+  get: function () {
+    return _Toast.ToastFooter;
+  }
+});
+Object.defineProperty(exports, "ToastTitle", {
+  enumerable: true,
+  get: function () {
+    return _Toast.ToastTitle;
+  }
+});
+Object.defineProperty(exports, "toastApi", {
+  enumerable: true,
+  get: function () {
+    return _ToastManager.toastApi;
+  }
+});
+Object.defineProperty(exports, "toastManager", {
+  enumerable: true,
+  get: function () {
+    return _ToastManager.toastManager;
+  }
+});
+var _Toast = require("./Toast");
+var _ToastContainer = require("./ToastContainer");
+var _ToastManager = require("./ToastManager");

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

@@ -0,0 +1,12 @@
+// @flow strict
+
+export type {ToastProps, ToastSemanticType} from './Toast';
+export {
+  Toast,
+  TOAST_SEMANTIC,
+  ToastBody,
+  ToastFooter,
+  ToastTitle,
+} from './Toast';
+export {ToastContainer} from './ToastContainer';
+export {toastApi, toastManager} from './ToastManager';

package/lib/components/Toggle/Toggle.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toggle = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text/Text");
+var _ToggleModule = _interopRequireDefault(require("./Toggle.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 Toggle = _ref => {
+  let {
+    name = 'toggle',
+    value = '',
+    classNames,
+    children,
+    disabled,
+    checked,
+    focused,
+    onChange,
+    ...props
+  } = _ref;
+  const toggleInput = /*#__PURE__*/React.createRef();
+  const handleOnChange = () => {
+    if (!disabled) {
+      onChange && onChange({
+        value,
+        checked: !checked
+      });
+    }
+  };
+  React.useEffect(() => {
+    if (toggleInput.current && focused) {
+      toggleInput.current.focus();
+    }
+  }, [focused]);
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("label", {
+    className: (0, _classify.default)(_ToggleModule.default.container, {
+      [_ToggleModule.default.disabled]: disabled
+    }, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jss)("span", {
+      className: _ToggleModule.default.toggleWrap,
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)("input", {
+        type: "checkbox",
+        name: name,
+        value: value,
+        checked: checked,
+        onChange: handleOnChange,
+        ref: toggleInput,
+        disabled: disabled,
+        ...props
+      }), /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+        className: (0, _classify.default)(_ToggleModule.default.toggle, {
+          [_ToggleModule.default.disabledButton]: disabled
+        })
+      })]
+    }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelMedium, {
+      color: "secondary",
+      className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label),
+      children: children
+    })]
+  });
+};
+exports.Toggle = Toggle;

package/lib/components/Toggle/Toggle.js.flow

@@ -0,0 +1,94 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {FormLabelMedium} from '../Text/Text';
+
+import css from './Toggle.module.css';
+
+/**
+ * Note:
+ * Do not wrap Toggle in a label. For simplicity's sake, Toggle uses an
+ * internal label tag to handle click delegation to the hidden input, and
+ * nesting labels is a bad idea.
+ */
+
+type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
+
+export type ToggleProps = {
+  name?: string,
+  classNames?: ClassNames,
+  children?: React.Node,
+  checked?: boolean,
+  onChange?: ({value: string, checked: boolean}) => mixed,
+  disabled?: boolean,
+  focused?: boolean,
+  value?: string,
+};
+
+export const Toggle = ({
+  name = 'toggle',
+  value = '',
+  classNames,
+  children,
+  disabled,
+  checked,
+  focused,
+  onChange,
+  ...props
+}: ToggleProps): React.Node => {
+  const toggleInput = React.createRef<HTMLInputElement>();
+  const handleOnChange = () => {
+    if (!disabled) {
+      onChange &&
+        onChange({
+          value,
+          checked: !checked,
+        });
+    }
+  };
+
+  React.useEffect(() => {
+    if (toggleInput.current && focused) {
+      toggleInput.current.focus();
+    }
+  }, [focused]);
+  return (
+    <label
+      className={classify(
+        css.container,
+        {
+          [css.disabled]: disabled,
+        },
+        classNames?.wrapper,
+      )}
+    >
+      <span className={css.toggleWrap}>
+        <input
+          type="checkbox"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={handleOnChange}
+          ref={toggleInput}
+          disabled={disabled}
+          {...props}
+        />
+        <span
+          className={classify(css.toggle, {
+            [css.disabledButton]: disabled,
+          })}
+        />
+      </span>
+      {React.Children.count(children) > 0 && (
+        <FormLabelMedium
+          color="secondary"
+          className={classify(css.toggleLabel, classNames?.label)}
+        >
+          {children}
+        </FormLabelMedium>
+      )}
+    </label>
+  );
+};

package/lib/components/Toggle/Toggle.module.css

@@ -0,0 +1,144 @@
+@value (
+  borderWidthNone,
+  borderWidthTertiary,
+  borderRadiusMedium,
+  borderRadiusLarge
+) from '../../styles/variables/_border.css';
+
+@value (
+  colorBackgroundTertiary,
+  colorBorderSecondary,
+  colorFillPrimary,
+  colorFillDisabled,
+  colorFocusPrimary,
+  colorBorderSecondary
+) from '../../styles/variables/_color.css';
+
+@value (
+  motionDurationSlow
+) from '../../styles/variables/_motion.css';
+
+@value (
+  spaceNone,
+  spaceXXSmall,
+  spaceMedium
+) from '../../styles/variables/_space.css';
+
+@value (
+  shadowBoxShadow1X,
+  shadowBoxShadow1Y,
+  shadowBoxShadow1Blur,
+  shadowBoxShadow1Spread,
+  shadowBoxShadow1Color ) from '../../styles/variables/_shadow.css';
+
+@value (
+  size10,
+  size18,
+  size24,
+  size36,
+  size40
+) from '../../styles/variables/_size.css';
+
+.container {
+  position: relative;
+  display: flex;
+  gap: spaceMedium;
+  height: size24;
+  align-items: center;
+  cursor: pointer;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+.toggleWrap input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  width: size36;
+  height: size18;
+}
+
+.toggleWrap input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.toggleWrap {
+  width: size40;
+  height: size24;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggle {
+  position: relative;
+  width: size36;
+  height: size18;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: motionDurationSlow;
+  background: colorBorderSecondary;
+  border-radius: borderRadiusLarge;
+}
+
+.toggle::before {
+  box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur
+    shadowBoxShadow1Spread shadowBoxShadow1Color;
+  position: absolute;
+  content: '';
+  height: size10;
+  width: size10;
+  margin: auto;
+  top: spaceNone;
+  bottom: spaceNone;
+  left: spaceXXSmall;
+  transition: motionDurationSlow;
+  background: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+}
+
+.container input:checked + .toggle::before {
+  transform: translateX(size18);
+}
+
+.container input:checked + .toggle {
+  background-color: colorFillPrimary;
+}
+
+.container input:focus + .toggle {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.container input:active + .toggle {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+/* disabled/unchecked */
+.disabledButton {
+  pointer-events: none;
+  cursor: not-allowed;
+  background: colorFillDisabled;
+}
+
+.disabledButton::before {
+  background: colorBorderSecondary;
+}
+
+/* disabled/checked */
+.container input[type='checkbox']:checked + .disabled {
+  border: borderWidthNone;
+  background: colorFillDisabled;
+  cursor: not-allowed;
+}
+
+.container input[type='checkbox']:checked + .disabled::before {
+  background: colorBorderSecondary;
+}
+
+.toggleLabel {
+  margin-left: spaceNone;
+}

package/lib/components/Toggle/index.js

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

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

@@ -0,0 +1,2 @@
+//@flow strict
+export {Toggle} from './Toggle.js';

package/lib/components/Tooltip/Tooltip.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var _space = require("../../styles/variables/_space");
+var _classify = require("../../utils/classify");
+var _mergeRefs = require("../../utils/merge-refs");
+var _Text = require("../Text");
+var _Truncate = require("../Truncate");
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.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 Tooltip = _ref => {
+  let {
+    classNames,
+    children,
+    title,
+    body,
+    placement = 'top'
+  } = _ref;
+  const [open, setOpen] = React.useState(false);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    context
+  } = (0, _reactDomInteractions.useFloating)({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    middleware: [(0, _reactDomInteractions.offset)(parseInt(_space.spaceXXSmall)), (0, _reactDomInteractions.flip)(), (0, _reactDomInteractions.shift)()],
+    whileElementsMounted: _reactDomInteractions.autoUpdate
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = (0, _reactDomInteractions.useInteractions)([(0, _reactDomInteractions.useHover)(context), (0, _reactDomInteractions.useFocus)(context), (0, _reactDomInteractions.useRole)(context, {
+    role: 'tooltip'
+  }), (0, _reactDomInteractions.useDismiss)(context)]);
+
+  // Note(Nishant) Preserve the consumer's ref
+  const ref = React.useMemo(() => (0, _mergeRefs.mergeRefs)([reference, children.ref]), [reference, children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jss)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/React.cloneElement(children, getReferenceProps({
+      ref,
+      ...children.props
+    })), open && /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      ref: floating,
+      className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.wrapper),
+      style: {
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone
+      },
+      ...getFloatingProps(),
+      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleExtraSmall, {
+        color: "inversePrimary",
+        children: /*#__PURE__*/(0, _jsxRuntime.js)(_Truncate.Truncate, {
+          line: 1,
+          children: title
+        })
+      }), !!body && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodyMedium, {
+        color: !title ? 'inversePrimary' : 'inverseSecondary',
+        children: /*#__PURE__*/(0, _jsxRuntime.js)(_Truncate.Truncate, {
+          line: 2,
+          children: body
+        })
+      })]
+    })]
+  });
+};
+exports.Tooltip = Tooltip;

package/lib/components/Tooltip/Tooltip.js.flow

@@ -0,0 +1,110 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useDismiss,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+  // $FlowFixMe[untyped-import]
+  useFocus,
+  // $FlowFixMe[untyped-import]
+  useHover,
+  // $FlowFixMe[untyped-import]
+  useInteractions,
+  // $FlowFixMe[untyped-import]
+  useRole,
+} from '@floating-ui/react-dom-interactions';
+
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {mergeRefs} from '../../utils/merge-refs';
+import {BodyMedium, SubTitleExtraSmall} from '../Text';
+import {Truncate} from '../Truncate';
+
+import css from './Tooltip.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type TooltipProps = {
+  classNames?: ClassNames,
+  title?: string,
+  body?: string,
+  placement?: 'top' | 'bottom' | 'left' | 'right',
+  // TODO(Nishant): Decide on a type to use
+  // $FlowFixMe
+  children: any,
+};
+
+export const Tooltip = ({
+  classNames,
+  children,
+  title,
+  body,
+  placement = 'top',
+}: TooltipProps): React.Node => {
+  const [open, setOpen] = React.useState(false);
+
+  const {x, y, reference, floating, strategy, context} = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset(parseInt(spaceXXSmall)), flip(), shift()],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const {getReferenceProps, getFloatingProps} = useInteractions([
+    useHover(context),
+    useFocus(context),
+    useRole(context, {role: 'tooltip'}),
+    useDismiss(context),
+  ]);
+
+  // Note(Nishant) Preserve the consumer's ref
+  const ref = React.useMemo(
+    () => mergeRefs([reference, children.ref]),
+    [reference, children],
+  );
+
+  return (
+    <>
+      {React.cloneElement(
+        children,
+        getReferenceProps({ref, ...children.props}),
+      )}
+      {open && (
+        <div
+          ref={floating}
+          className={classify(css.tooltip, classNames?.wrapper)}
+          style={{
+            position: strategy,
+            top: y ?? spaceNone,
+            left: x ?? spaceNone,
+          }}
+          {...getFloatingProps()}
+        >
+          {!!title && (
+            <SubTitleExtraSmall color="inversePrimary">
+              <Truncate line={1}>{title}</Truncate>
+            </SubTitleExtraSmall>
+          )}
+
+          {!!body && (
+            <BodyMedium color={!title ? 'inversePrimary' : 'inverseSecondary'}>
+              <Truncate line={2}>{body}</Truncate>
+            </BodyMedium>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

package/lib/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,16 @@
+@value (colorTooltipFill) from '../../styles/variables/_color.css';
+@value (size300) from '../../styles/variables/_size.css';
+@value (spaceXSmall, spaceSmall, spaceXXSmall) from '../../styles/variables/_space.css';
+@value (borderRadiusSmall) from '../../styles/variables/_border.css';
+
+.tooltip {
+  display: flex;
+  flex-flow: column;
+  max-width: size300;
+  gap: spaceXXSmall;
+  padding: spaceXSmall spaceSmall;
+  background: colorTooltipFill;
+  pointer-events: none;
+  border-radius: borderRadiusSmall;
+  word-wrap: break-word;
+}

package/lib/components/Tooltip/index.js

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

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

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

package/lib/components/Truncate/Truncate.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Truncate = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _TruncateModule = _interopRequireDefault(require("./Truncate.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 Truncate = _ref => {
+  let {
+    children,
+    line = 1
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+    className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp),
+    style: {
+      WebkitLineClamp: `${line}`
+    },
+    children: children
+  });
+};
+exports.Truncate = Truncate;

package/lib/components/Truncate/Truncate.js.flow

@@ -0,0 +1,22 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './Truncate.module.css';
+
+
+export type TruncateProps = {
+  children?: React.Node,
+  line?: number,
+};
+
+export const Truncate = ({children, line = 1}: TruncateProps): React.Node => (
+  <span
+    className={classify(css.truncateLineClamp)}
+    style={{WebkitLineClamp: `${line}`}}
+  >
+    {children}
+  </span>
+);

package/lib/components/Truncate/Truncate.module.css

@@ -0,0 +1,6 @@
+.truncateLineClamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font: inherit;
+}