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

package/lib/components/Truncate/index.js

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

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

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

package/lib/components/Typeahead/Typeahead.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Typeahead = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("@floating-ui/react-dom");
+var _color = require("../../styles/variables/_color");
+var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
+var _classify = require("../../utils/classify");
+var _clickAway = require("../../utils/click-away");
+var _Menu = require("../Menu");
+var _SearchInput = require("../SearchInput");
+var _TypeaheadModule = _interopRequireDefault(require("./Typeahead.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 Typeahead = _ref => {
+  let {
+    options,
+    size,
+    classNames,
+    placeholder = 'Select...',
+    onSelect,
+    onSearch,
+    selectedOption,
+    ...inputProps
+  } = _ref;
+  const typeaheadRef = React.useRef();
+  const [inputValue, setInputValue] = React.useState(selectedOption?.label);
+  const [filteredOptions, setFilteredOptions] = React.useState(options);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy
+  } = (0, _reactDom.useFloating)({
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    whileElementsMounted: _reactDom.autoUpdate,
+    middleware: [(0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  const handleSelect = option => {
+    if (option?.key) {
+      onSelect && onSelect(option);
+      setInputValue(option.label);
+    }
+  };
+  React.useEffect(() => {
+    if (selectedOption?.key) {
+      setInputValue(selectedOption.label);
+    }
+  }, [selectedOption]);
+  React.useEffect(() => {
+    const optionsFiltered = options && options.filter(option => {
+      if (!option.label || !inputValue) {
+        return true;
+      } else {
+        return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1;
+      }
+    });
+    setFilteredOptions(optionsFiltered || []);
+  }, [inputValue]);
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_clickAway.ClickAway, {
+    children: _ref2 => {
+      let {
+        isOpen,
+        onOpen,
+        cancelNext,
+        clickAway
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+        "data-testid": "Typeahead",
+        className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
+        ref: typeaheadRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.js)(_SearchInput.SearchInput, {
+          boxRef: reference,
+          size: size,
+          placeholder: placeholder,
+          value: inputValue,
+          classNames: {
+            box: classNames?.box
+          },
+          ...inputProps,
+          onChange: e => {
+            e.stopPropagation();
+            setInputValue(e.target.value);
+            onSearch && onSearch(e);
+            if (e.target.value.length > 0) {
+              onOpen();
+            } else {
+              clickAway();
+            }
+          }
+        }), isOpen && filteredOptions && !!filteredOptions.length && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+          onClickCapture: cancelNext,
+          ref: floating,
+          style: {
+            position: strategy,
+            top: y ?? _space.spaceNone,
+            left: x ?? _space.spaceNone,
+            width: _size.sizeFluid,
+            backgroundColor: _color.colorBackgroundTertiary
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.js)(_Menu.Menu, {
+            isFluid: true,
+            options: filteredOptions,
+            onSelect: option => {
+              handleSelect(option);
+              clickAway();
+            },
+            size: size
+          })
+        })]
+      });
+    }
+  });
+};
+exports.Typeahead = Typeahead;

package/lib/components/Typeahead/Typeahead.js.flow

@@ -0,0 +1,153 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react-dom';
+
+import {colorBackgroundTertiary} from '../../styles/variables/_color';
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {ClickAway} from '../../utils/click-away';
+import type {MenuOption} from '../Menu';
+import {Menu} from '../Menu';
+import {SearchInput} from '../SearchInput';
+
+import css from './Typeahead.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
+
+export type TypeaheadProps = {
+  classNames?: ClassNames,
+  onSelect?: (option: MenuOption) => mixed,
+  onSearch?: (evt: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  name?: string,
+  disabled?: boolean,
+  placeholder?: string,
+  locked?: boolean,
+  error?: boolean,
+  errorText?: string,
+  label?: string | React.Node,
+  helperText?: string | React.Node,
+  size?: 'medium' | 'small',
+  required?: boolean,
+  options?: Array<MenuOption>,
+  selectedOption?: MenuOption,
+};
+
+export const Typeahead = ({
+  options,
+  size,
+  classNames,
+  placeholder = 'Select...',
+  onSelect,
+  onSearch,
+  selectedOption,
+  ...inputProps
+}: TypeaheadProps): React.Node => {
+  const typeaheadRef = React.useRef();
+
+  const [inputValue, setInputValue] = React.useState(selectedOption?.label);
+  const [filteredOptions, setFilteredOptions] = React.useState(options);
+
+  const {x, y, reference, floating, strategy} = useFloating({
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  const handleSelect = (option?: MenuOption) => {
+    if (option?.key) {
+      onSelect && onSelect(option);
+      setInputValue(option.label);
+    }
+  };
+
+  React.useEffect(() => {
+    if (selectedOption?.key) {
+      setInputValue(selectedOption.label);
+    }
+  }, [selectedOption]);
+
+  React.useEffect(() => {
+    const optionsFiltered =
+      options &&
+      options.filter((option) => {
+        if (!option.label || !inputValue) {
+          return true;
+        } else {
+          return (
+            option.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
+          );
+        }
+      });
+    setFilteredOptions(optionsFiltered || []);
+  }, [inputValue]);
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div
+          data-testid="Typeahead"
+          className={classify(css.typeaheadContainer, classNames?.wrapper)}
+          ref={typeaheadRef}
+        >
+          <SearchInput
+            boxRef={reference}
+            size={size}
+            placeholder={placeholder}
+            value={inputValue}
+            classNames={{box: classNames?.box}}
+            {...inputProps}
+            onChange={(e) => {
+              e.stopPropagation();
+              setInputValue(e.target.value);
+              onSearch && onSearch(e);
+              if (e.target.value.length > 0) {
+                onOpen();
+              } else {
+                clickAway();
+              }
+            }}
+          />
+
+          {isOpen && filteredOptions && !!filteredOptions.length && (
+            <div
+              onClickCapture={cancelNext}
+              ref={floating}
+              style={{
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+                width: sizeFluid,
+                backgroundColor: colorBackgroundTertiary,
+              }}
+            >
+              <Menu
+                isFluid
+                options={filteredOptions}
+                onSelect={(option) => {
+                  handleSelect(option);
+                  clickAway();
+                }}
+                size={size}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/Typeahead/Typeahead.module.css

@@ -0,0 +1,10 @@
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.typeaheadContainer {
+  display: flex;
+  position: relative;
+  flex-flow: column;
+  width: sizeFluid;
+}

package/lib/components/Typeahead/index.js

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

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

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

package/lib/hooks/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useMountTransition = require("./useMountTransition");
+Object.keys(_useMountTransition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMountTransition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useMountTransition[key];
+    }
+  });
+});
+var _useToastPortal = require("./useToastPortal");
+Object.keys(_useToastPortal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useToastPortal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useToastPortal[key];
+    }
+  });
+});

package/lib/hooks/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export * from './useMountTransition';
+export * from './useToastPortal';

package/lib/hooks/useMountTransition.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+
+const useMountTransition = (isMounted, unmountDelay) => {
+  const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let timeoutId;
+    if (isMounted && !isTransitioning) {
+      setIsTransitioning(true);
+    } else if (!isMounted && isTransitioning) {
+      timeoutId = setTimeout(() => setIsTransitioning(false), unmountDelay);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [unmountDelay, isMounted, isTransitioning]);
+  return isTransitioning;
+};
+var _default = useMountTransition;
+exports.default = _default;

package/lib/hooks/useMountTransition.js.flow

@@ -0,0 +1,27 @@
+// @flow strict
+import {useEffect, useState} from 'react';
+
+
+const useMountTransition = (
+  isMounted: boolean,
+  unmountDelay: number,
+): boolean => {
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    let timeoutId;
+
+    if (isMounted && !isTransitioning) {
+      setIsTransitioning(true);
+    } else if (!isMounted && isTransitioning) {
+      timeoutId = setTimeout(() => setIsTransitioning(false), unmountDelay);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [unmountDelay, isMounted, isTransitioning]);
+
+  return isTransitioning;
+};
+
+export default useMountTransition;

package/lib/hooks/useToastPortal.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToastPortal = void 0;
+var _react = require("react");
+var _elevation = require("../styles/variables/_elevation");
+var _space = require("../styles/variables/_space");
+
+const useToastPortal = _ref => {
+  let {
+    toastRef
+  } = _ref;
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const div = document.createElement('div');
+
+    // $FlowFixMe[incompatible-type];
+    div.style = `position: fixed; bottom: ${_space.spaceMedium}; left: ${_space.spaceMedium}; z-index: ${_elevation.elevationToast};`;
+    /* $FlowIgnore */
+    document.body.prepend(div);
+    toastRef.current = div;
+    setLoaded(true);
+    /* $FlowIgnore */
+    return () => document.body.removeChild(div);
+  }, []);
+  return {
+    loaded
+  };
+};
+exports.useToastPortal = useToastPortal;

package/lib/hooks/useToastPortal.js.flow

@@ -0,0 +1,30 @@
+// @flow strict
+import {useEffect, useState} from 'react';
+
+import {elevationToast} from '../styles/variables/_elevation';
+import {spaceMedium} from '../styles/variables/_space';
+
+
+type UseToastPortal = {
+  toastRef: {current: HTMLDivElement | null},
+};
+
+export const useToastPortal = ({
+  toastRef,
+}: UseToastPortal): {loaded: boolean} => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const div = document.createElement('div');
+
+    // $FlowFixMe[incompatible-type];
+    div.style = `position: fixed; bottom: ${spaceMedium}; left: ${spaceMedium}; z-index: ${elevationToast};`;
+    /* $FlowIgnore */
+    document.body.prepend(div);
+    toastRef.current = div;
+    setLoaded(true);
+    /* $FlowIgnore */
+    return () => document.body.removeChild(div);
+  }, []);
+  return {loaded};
+};

package/lib/styles/animation.module.css

@@ -0,0 +1,9 @@
+@value (
+  motionEaseInEaseOut,
+  motionDurationNormal
+) from 'variables/_motion.css';
+
+.motionEaseInEaseOut {
+  transition-timing-function: motionEaseInEaseOut;
+  transition: motionDurationNormal;
+}

package/lib/styles/border.module.css

@@ -0,0 +1,27 @@
+@value (
+  borderWidthPrimary
+) from 'variables/_border.css';
+
+@value (
+  colorBorderPrimary
+) from 'variables/_color.css';
+
+.borderPrimary {
+  border: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.borderTopPrimary {
+  border-top: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.borderBottomPrimary {
+  border-bottom: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.borderLeftPrimary {
+  border-left: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.borderRightPrimary {
+  border-right: borderWidthPrimary solid colorBorderPrimary;
+}

package/lib/styles/shadow.module.css

@@ -0,0 +1,42 @@
+@value (
+  shadowBoxShadow1Color,
+  shadowBoxShadow1X,
+  shadowBoxShadow1Y,
+  shadowBoxShadow1Blur,
+  shadowBoxShadow1Spread,
+  shadowBoxShadow2Color,
+  shadowBoxShadow2X,
+  shadowBoxShadow2Y,
+  shadowBoxShadow2Blur,
+  shadowBoxShadow2Spread,
+  shadowBoxShadow3Color,
+  shadowBoxShadow3X,
+  shadowBoxShadow3Y,
+  shadowBoxShadow3Blur,
+  shadowBoxShadow3Spread,
+  shadowBoxShadow4Color,
+  shadowBoxShadow4X,
+  shadowBoxShadow4Y,
+  shadowBoxShadow4Blur,
+  shadowBoxShadow4Spread
+) from 'variables/_shadow.css';
+
+.boxShadow1 {
+  box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur
+    shadowBoxShadow1Spread shadowBoxShadow1Color;
+}
+
+.boxShadow2 {
+  box-shadow: shadowBoxShadow2X shadowBoxShadow2Y shadowBoxShadow2Blur
+    shadowBoxShadow2Spread shadowBoxShadow2Color;
+}
+
+.boxShadow3 {
+  box-shadow: shadowBoxShadow3X shadowBoxShadow3Y shadowBoxShadow3Blur
+    shadowBoxShadow3Spread shadowBoxShadow3Color;
+}
+
+.boxShadow4 {
+  box-shadow: shadowBoxShadow4X shadowBoxShadow4Y shadowBoxShadow4Blur
+    shadowBoxShadow4Spread shadowBoxShadow4Color;
+}