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

package/lib/styles/variables/_size.js.flow

@@ -0,0 +1,61 @@
+// @flow strict
+
+export const size2 = '2px';
+
+export const size4 = '4px';
+
+export const size5 = '5px';
+
+export const size8 = '8px';
+
+export const size10 = '10px';
+
+export const size12 = '12px';
+
+export const size18 = '18px';
+
+export const size20 = '20px';
+
+export const size24 = '24px';
+
+export const size30 = '30px';
+
+export const size34 = '34px';
+
+export const size36 = '36px';
+
+export const size40 = '40px';
+
+export const size42 = '42px';
+
+export const size60 = '60px';
+
+export const size110 = '110px';
+
+export const size140 = '140px';
+
+export const size160 = '160px';
+
+export const size228 = '228px';
+
+export const size240 = '240px';
+
+export const size276 = '276px';
+
+export const size300 = '300px';
+
+export const size380 = '380px';
+
+export const size400 = '400px';
+
+export const size480 = '480px';
+
+export const size500 = '500px';
+
+export const size580 = '580px';
+
+export const size720 = '720px';
+
+export const size960 = '960px';
+
+export const sizeFluid = '100%';

package/lib/styles/variables/_space.css

@@ -0,0 +1,23 @@
+@value spaceNone: 0px;
+
+@value spaceXXSmall: 4px;
+
+@value spaceXSmall: 8px;
+
+@value spaceSmall: 12px;
+
+@value spaceMedium: 20px;
+
+@value spaceLarge: 32px;
+
+@value spaceXLarge: 52px;
+
+@value spaceXXLarge: 84px;
+
+@value spaceFluid: 100%;
+
+@value spaceNegFluid: -100%;
+
+@value spaceHalfFluid: 50%;
+
+@value spaceNegHalfFluid: -50%;

package/lib/styles/variables/_space.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = void 0;
+
+const spaceNone = '0px';
+exports.spaceNone = spaceNone;
+const spaceXXSmall = '4px';
+exports.spaceXXSmall = spaceXXSmall;
+const spaceXSmall = '8px';
+exports.spaceXSmall = spaceXSmall;
+const spaceSmall = '12px';
+exports.spaceSmall = spaceSmall;
+const spaceMedium = '20px';
+exports.spaceMedium = spaceMedium;
+const spaceLarge = '32px';
+exports.spaceLarge = spaceLarge;
+const spaceXLarge = '52px';
+exports.spaceXLarge = spaceXLarge;
+const spaceXXLarge = '84px';
+exports.spaceXXLarge = spaceXXLarge;
+const spaceFluid = '100%';
+exports.spaceFluid = spaceFluid;
+const spaceNegFluid = '-100%';
+exports.spaceNegFluid = spaceNegFluid;
+const spaceHalfFluid = '50%';
+exports.spaceHalfFluid = spaceHalfFluid;
+const spaceNegHalfFluid = '-50%';
+exports.spaceNegHalfFluid = spaceNegHalfFluid;

package/lib/styles/variables/_space.js.flow

@@ -0,0 +1,25 @@
+// @flow strict
+
+export const spaceNone = '0px';
+
+export const spaceXXSmall = '4px';
+
+export const spaceXSmall = '8px';
+
+export const spaceSmall = '12px';
+
+export const spaceMedium = '20px';
+
+export const spaceLarge = '32px';
+
+export const spaceXLarge = '52px';
+
+export const spaceXXLarge = '84px';
+
+export const spaceFluid = '100%';
+
+export const spaceNegFluid = '-100%';
+
+export const spaceHalfFluid = '50%';
+
+export const spaceNegHalfFluid = '-50%';

package/lib/types/common.js

@@ -0,0 +1 @@
+"use strict";

package/lib/types/common.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export type GroupAlign = 'vertical' | 'horizontal-fixed' | 'horizontal-fluid';

package/lib/types/toast.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POSITIONS = exports.ACTIONS = void 0;
+var React = _interopRequireWildcard(require("react"));
+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 POSITIONS = {
+  TOP_CENTER: 'topCenter',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  BOTTOM_CENTER: 'bottomCenter'
+};
+exports.POSITIONS = POSITIONS;
+const ACTIONS = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE'
+};
+exports.ACTIONS = ACTIONS;

package/lib/types/toast.js.flow

@@ -0,0 +1,41 @@
+// @flow strict
+
+import * as React from 'react';
+
+
+export const POSITIONS = {
+  TOP_CENTER: 'topCenter',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight',
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  BOTTOM_CENTER: 'bottomCenter',
+};
+
+export const ACTIONS = {
+  ADD: 'ADD',
+  REMOVE: 'REMOVE',
+};
+
+export type positionTypes = $Values<typeof POSITIONS>;
+export type actionTypes = $Values<typeof ACTIONS>;
+export type contentTypes = React.Node;
+
+export type ToastOptions = {
+  timeout?: number,
+  position?: positionTypes,
+  autoClose?: boolean,
+  uniqueCode?: string | number,
+};
+
+export type optionTypes = {
+  ...ToastOptions,
+  id: string,
+  key?: string,
+};
+
+export type callbackFuncTypes = (
+  type: actionTypes,
+  content: contentTypes,
+  options: optionTypes,
+) => void;

package/lib/types/typography.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEXT_COLORS = void 0;
+
+const TEXT_COLORS = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  disabled: 'disabled',
+  selected: 'selected',
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+  inversePrimary: 'inversePrimary',
+  inverseSecondary: 'inverseSecondary'
+});
+exports.TEXT_COLORS = TEXT_COLORS;

package/lib/types/typography.js.flow

@@ -0,0 +1,18 @@
+// @flow strict
+
+export const TEXT_COLORS = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  disabled: 'disabled',
+  selected: 'selected',
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+  inversePrimary: 'inversePrimary',
+  inverseSecondary: 'inverseSecondary',
+});
+
+export type ColorTypes = $Values<typeof TEXT_COLORS>;

package/lib/utils/classify.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.classify = classify;
+exports.default = void 0;
+var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));
+var _map = _interopRequireDefault(require("lodash/map"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function classify() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args.map(arg => {
+    let mappedArg = arg;
+    if ((0, _isPlainObject.default)(arg)) {
+      // $FlowFixMe[incompatible-call]
+      mappedArg = (0, _map.default)(arg, (test, name) => test ? name : null);
+    }
+    return mappedArg;
+  }).reduce((array, current) => {
+    if (Array.isArray(current)) {
+      array.push(...current);
+    } else {
+      array.push(current);
+    }
+    return array;
+  }, []).filter(val => val).join(' ');
+}
+var _default = classify;
+exports.default = _default;

package/lib/utils/classify.js.flow

@@ -0,0 +1,29 @@
+// @flow strict
+
+import isPlainObject from 'lodash/isPlainObject';
+import map from 'lodash/map';
+
+
+export function classify(...args: Array<mixed>): string {
+  return args
+    .map((arg) => {
+      let mappedArg = arg;
+      if (isPlainObject(arg)) {
+        // $FlowFixMe[incompatible-call]
+        mappedArg = map(arg, (test, name: string) => (test ? name : null));
+      }
+      return mappedArg;
+    })
+    .reduce((array, current) => {
+      if (Array.isArray(current)) {
+        array.push(...current);
+      } else {
+        array.push(current);
+      }
+      return array;
+    }, [])
+    .filter((val) => val)
+    .join(' ');
+}
+
+export default classify;

package/lib/utils/click-away.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClickAway = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _invariant = _interopRequireDefault(require("invariant"));
+var _dom = require("./dom.js");
+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; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+// TODO(Nishant): Make this a functional component
+
+class ClickAway extends React.Component {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
+      isOpen: false,
+      height: null,
+      pageBottom: null
+    });
+    _defineProperty(this, "el", null);
+    _defineProperty(this, "cancelNext", false);
+    _defineProperty(this, "handleOpenClick", () => {
+      // NOTE (kyle): we recalculate the position on click because sibling and niece components
+      // could have changed.
+      let {
+        pageBottom
+      } = this.state;
+      if (this.el) {
+        pageBottom = this.pageBottom();
+      }
+      this.setState({
+        isOpen: true,
+        pageBottom
+      }, this.handleOnChange);
+    });
+    _defineProperty(this, "handleCloseClick", evt => {
+      if (this.props.shouldCancel(evt)) {
+        return;
+      }
+      if (this.cancelNext === true) {
+        this.cancelNext = false;
+      } else {
+        this.setState({
+          isOpen: false
+        }, this.handleOnChange);
+      }
+    });
+    _defineProperty(this, "forceClose", () => {
+      this.setState({
+        isOpen: false
+      }, this.handleOnChange);
+    });
+    _defineProperty(this, "cancelNextClickAway", () => {
+      this.cancelNext = true;
+    });
+    _defineProperty(this, "handleOnChange", () => this.props.onChange && this.props.onChange(this.state.isOpen));
+  }
+  componentDidMount() {
+    if (this.el) {
+      this.setState({
+        height: this.el.offsetHeight,
+        pageBottom: this.pageBottom()
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      isOpen
+    } = this.state;
+    if (prevState.isOpen !== isOpen) {
+      if (this.state.isOpen) {
+        window.document.addEventListener('click', this.handleCloseClick);
+      } else {
+        window.document.removeEventListener('click', this.handleCloseClick);
+      }
+    }
+  }
+  componentWillUnmount() {
+    window.document.removeEventListener('click', this.handleCloseClick);
+  }
+  render() {
+    const {
+      height,
+      isOpen,
+      pageBottom
+    } = this.state;
+    return this.props.children({
+      onOpen: this.handleOpenClick,
+      isOpen,
+      height,
+      pageBottom,
+      cancelNext: this.cancelNextClickAway,
+      clickAway: this.forceClose,
+      anchorRef: el => this.el = el
+    });
+  }
+  pageBottom() {
+    (0, _invariant.default)(this.el, 'pageBottom() requires that this.el not be null');
+    const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
+    return (0, _dom.pageHeight)() - bottomBound + window.scrollY;
+  }
+}
+exports.ClickAway = ClickAway;
+_defineProperty(ClickAway, "defaultProps", {
+  shouldCancel: () => false
+});

package/lib/utils/click-away.js.flow

@@ -0,0 +1,134 @@
+// @flow strict
+
+import * as React from 'react';
+import invariant from 'invariant';
+
+import {pageHeight} from './dom.js';
+
+
+export type ChildProps = {
+  onOpen: () => void,
+  isOpen: boolean,
+  height: ?number,
+  pageBottom: ?number,
+  cancelNext: () => void,
+  clickAway: () => void,
+  anchorRef: (?HTMLElement) => mixed,
+};
+
+type ClickAwayProps = {
+  children: (props: ChildProps) => React.Node,
+  shouldCancel: (event: MouseEvent) => boolean,
+  onChange?: (isOpen: boolean) => mixed,
+};
+
+type ClickAwayState = {
+  isOpen: boolean,
+  height: ?number,
+  pageBottom: ?number,
+};
+
+// TODO(Nishant): Make this a functional component
+
+export class ClickAway extends React.Component<ClickAwayProps, ClickAwayState> {
+  static defaultProps: {shouldCancel: () => boolean} = {
+    shouldCancel: () => false,
+  };
+
+  state: ClickAwayState = {
+    isOpen: false,
+    height: null,
+    pageBottom: null,
+  };
+
+  el: ?HTMLElement = null;
+  cancelNext: boolean = false;
+
+  componentDidMount() {
+    if (this.el) {
+      this.setState({
+        height: this.el.offsetHeight,
+        pageBottom: this.pageBottom(),
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps: ClickAwayProps, prevState: ClickAwayState) {
+    const {isOpen} = this.state;
+    if (prevState.isOpen !== isOpen) {
+      if (this.state.isOpen) {
+        window.document.addEventListener('click', this.handleCloseClick);
+      } else {
+        window.document.removeEventListener('click', this.handleCloseClick);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    window.document.removeEventListener('click', this.handleCloseClick);
+  }
+
+  render(): React.Node {
+    const {height, isOpen, pageBottom} = this.state;
+    return this.props.children({
+      onOpen: this.handleOpenClick,
+      isOpen,
+      height,
+      pageBottom,
+      cancelNext: this.cancelNextClickAway,
+      clickAway: this.forceClose,
+      anchorRef: (el) => (this.el = el),
+    });
+  }
+
+  handleOpenClick: () => void = () => {
+    // NOTE (kyle): we recalculate the position on click because sibling and niece components
+    // could have changed.
+    let {pageBottom} = this.state;
+    if (this.el) {
+      pageBottom = this.pageBottom();
+    }
+
+    this.setState(
+      {
+        isOpen: true,
+        pageBottom,
+      },
+      this.handleOnChange,
+    );
+  };
+
+  handleCloseClick: (evt: MouseEvent) => void = (evt: MouseEvent) => {
+    if (this.props.shouldCancel(evt)) {
+      return;
+    }
+
+    if (this.cancelNext === true) {
+      this.cancelNext = false;
+    } else {
+      this.setState(
+        {
+          isOpen: false,
+        },
+        this.handleOnChange,
+      );
+    }
+  };
+
+  forceClose: () => void = () => {
+    this.setState({isOpen: false}, this.handleOnChange);
+  };
+
+  cancelNextClickAway: () => void = () => {
+    this.cancelNext = true;
+  };
+
+  handleOnChange: () => mixed = () =>
+    this.props.onChange && this.props.onChange(this.state.isOpen);
+
+  pageBottom(): $FlowFixMe {
+    invariant(this.el, 'pageBottom() requires that this.el not be null');
+    const bottomBound = this.el ? this.el.getBoundingClientRect().bottom : 0;
+    return pageHeight() - bottomBound + window.scrollY;
+  }
+}