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

package/lib/components/Input/Input.module.css

@@ -0,0 +1,122 @@
+@value (
+  size42,
+  size34,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone,
+  spaceXSmall,
+  spaceSmall,
+  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: spaceXSmall;
+  height: size42;
+  padding: spaceNone spaceSmall;
+  border: borderWidthSecondary solid colorBorderPrimary;
+}
+
+.locked {
+  border-style: dashed;
+}
+
+.medium {
+  composes: formInputMedium from '../../styles/typography.module.css';
+  height: size42;
+  border-radius: borderRadiusMedium;
+}
+
+.small {
+  composes: formInputSmall from '../../styles/typography.module.css';
+  height: size34;
+  border-radius: borderRadiusSmall;
+}
+
+.wrapper.withError .box {
+  border-color: colorTextDanger;
+}
+
+.wrapper.withError:focus-within .box {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+.box input {
+  width: sizeFluid;
+  height: sizeFluid;
+  cursor: inherit;
+}
+
+.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;
+}
+
+input::placeholder {
+  color: colorTextSecondary;
+}
+
+.inputDisabled input::placeholder {
+  color: inherit;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: sizeFluid;
+  gap: spaceXXSmall;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+}
+
+.infoContent {
+  display: flex;
+}
+
+.rightClickableIcon {
+  cursor: pointer;
+}
+
+.rightClickableIcon.disabled {
+  pointer-events: none;
+}

package/lib/components/Input/index.js

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

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

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

package/lib/components/LinearLoader/LinearLoader.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinearLoader = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _LinearLoaderModule = _interopRequireDefault(require("./LinearLoader.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 LinearLoader = _ref => {
+  let {
+    value,
+    size = 'medium',
+    className
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: (0, _classify.classify)(_LinearLoaderModule.default.lineContainer, {
+      [_LinearLoaderModule.default.large]: size === 'large',
+      [_LinearLoaderModule.default.medium]: size === 'medium',
+      [_LinearLoaderModule.default.small]: size === 'small'
+    }, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _LinearLoaderModule.default.progressBar,
+      style: {
+        width: `${value + '%'}`
+      }
+    })
+  });
+};
+exports.LinearLoader = LinearLoader;

package/lib/components/LinearLoader/LinearLoader.js.flow

@@ -0,0 +1,34 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './LinearLoader.module.css';
+
+
+export type LinearLoaderProps = {
+  value: number,
+  size?: 'large' | 'medium' | 'small',
+  className?: string,
+};
+
+export const LinearLoader = ({
+  value,
+  size = 'medium',
+  className,
+}: LinearLoaderProps): React.Node => (
+  <div
+    className={classify(
+      css.lineContainer,
+      {
+        [css.large]: size === 'large',
+        [css.medium]: size === 'medium',
+        [css.small]: size === 'small',
+      },
+      className,
+    )}
+  >
+    <div className={css.progressBar} style={{width: `${value + '%'}`}}></div>
+  </div>
+);

package/lib/components/LinearLoader/LinearLoader.module.css

@@ -0,0 +1,43 @@
+@value (
+  borderRadiusSmall
+) from '../../styles/variables/_border.css';
+@value (colorFillPrimary, colorBorderPrimary) from '../../styles/variables/_color.css';
+
+@value (
+  size4,
+  size8,
+  size12,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  motionDurationSlow
+) from '../../styles/variables/_motion.css';
+
+.lineContainer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: sizeFluid;
+  background: colorBorderPrimary;
+  border-radius: borderRadiusSmall;
+}
+
+.large {
+  height: size12;
+}
+
+.medium {
+  height: size8;
+}
+
+.small {
+  height: size4;
+}
+
+.progressBar {
+  background: colorFillPrimary;
+  border-radius: borderRadiusSmall;
+  height: sizeFluid;
+  transition: motionDurationSlow;
+}

package/lib/components/LinearLoader/index.js

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

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

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

package/lib/components/Menu/Menu.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _MenuModule = _interopRequireDefault(require("./Menu.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 Menu = props => {
+  const {
+    options,
+    onSelect,
+    selectedOption,
+    classNames,
+    size = 'medium',
+    width,
+    menuDisabled,
+    isFluid = true
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: (0, _classify.classify)(_MenuModule.default.menuCard, classNames?.wrapper, {
+      [_MenuModule.default.fluid]: isFluid,
+      [_MenuModule.default.medium]: size === 'medium',
+      [_MenuModule.default.small]: size === 'small'
+    }),
+    style: {
+      width
+    },
+    children: options.map(_ref => {
+      let {
+        key,
+        label,
+        iconLeft,
+        iconRight,
+        disabled
+      } = _ref;
+      return /*#__PURE__*/(0, _jsxRuntime.jss)(_Button.UnstyledButton, {
+        className: (0, _classify.classify)(_MenuModule.default.option, {
+          [_MenuModule.default.selected]: key === selectedOption?.key,
+          [_MenuModule.default.optionSmall]: size === 'small',
+          [_MenuModule.default.optionMedium]: size === 'medium',
+          [_MenuModule.default.disabled]: menuDisabled || disabled,
+          [_MenuModule.default.withIconLeft]: !!iconLeft,
+          [_MenuModule.default.withIconRight]: !!iconRight
+        }),
+        disabled: menuDisabled || disabled,
+        onClick: () => onSelect && onSelect({
+          key,
+          label
+        }),
+        autoFocus: selectedOption?.key === key,
+        children: [!!iconLeft && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+          name: iconLeft,
+          size: "small",
+          className: _MenuModule.default.icon
+        }), /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+          className: _MenuModule.default.optionText,
+          children: label
+        }), !!iconRight && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+          name: iconRight,
+          size: "small",
+          className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
+        })]
+      }, key);
+    })
+  });
+};
+exports.Menu = Menu;

package/lib/components/Menu/Menu.js.flow

@@ -0,0 +1,85 @@
+// @flow strict
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import {Icon} from '../Icon';
+
+import css from './Menu.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type MenuOption = {
+  key?: string,
+  label: string,
+  iconLeft?: string,
+  iconRight?: string,
+  disabled?: boolean,
+};
+
+export type MenuProps = {
+  options: Array<MenuOption>,
+  onSelect?: (option: MenuOption) => mixed,
+  selectedOption?: MenuOption,
+  classNames?: ClassNames,
+  size?: 'medium' | 'small',
+  width?: string,
+  menuDisabled?: boolean,
+  isFluid?: boolean,
+};
+
+export const Menu = (props: MenuProps): React.Node => {
+  const {
+    options,
+    onSelect,
+    selectedOption,
+    classNames,
+    size = 'medium',
+    width,
+    menuDisabled,
+    isFluid = true,
+  } = props;
+
+  return (
+    <div
+      className={classify(css.menuCard, classNames?.wrapper, {
+        [css.fluid]: isFluid,
+        [css.medium]: size === 'medium',
+        [css.small]: size === 'small',
+      })}
+      style={{width}}
+    >
+      {options.map(({key, label, iconLeft, iconRight, disabled}) => (
+        <UnstyledButton
+          className={classify(css.option, {
+            [css.selected]: key === selectedOption?.key,
+            [css.optionSmall]: size === 'small',
+            [css.optionMedium]: size === 'medium',
+            [css.disabled]: menuDisabled || disabled,
+            [css.withIconLeft]: !!iconLeft,
+            [css.withIconRight]: !!iconRight,
+          })}
+          key={key}
+          disabled={menuDisabled || disabled}
+          onClick={() => onSelect && onSelect({key, label})}
+          autoFocus={selectedOption?.key === key}
+        >
+          {!!iconLeft && (
+            <Icon name={iconLeft} size="small" className={css.icon} />
+          )}
+
+          <span className={css.optionText}>{label}</span>
+
+          {!!iconRight && (
+            <Icon
+              name={iconRight}
+              size="small"
+              className={classify(css.icon, css.rightIcon)}
+            />
+          )}
+        </UnstyledButton>
+      ))}
+    </div>
+  );
+};

package/lib/components/Menu/Menu.module.css

@@ -0,0 +1,124 @@
+@value (
+  borderWidthPrimary,
+  borderRadiusMedium,
+  borderRadiusSmall
+) from '../../styles/variables/_border.css';
+
+@value (
+  colorBackgroundSecondary,
+  colorFillSecondary,
+  colorTextDisabled,
+  colorTextPrimary,
+  colorTextSecondary,
+  colorBackgroundTertiary
+) from '../../styles/variables/_color.css';
+
+@value (
+  colorBorderPrimary
+) from '../../styles/variables/_color.css';
+
+@value (
+  size160,
+  size42,
+  size34,
+  size300,
+  size240,
+  size228,
+  size276,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.menuCard {
+  composes: boxShadow2 from '../../styles/shadow.module.css';
+  composes: borderPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundTertiary;
+  display: flex;
+  flex-flow: column;
+  padding: spaceSmall spaceXSmall;
+  min-width: size160;
+  border-radius: borderRadiusMedium;
+  overflow: auto;
+}
+
+.medium {
+  width: size300;
+  min-width: size300;
+  max-height: size276;
+}
+
+.small {
+  width: size240;
+  min-width: size240;
+  max-height: size228;
+}
+
+.fluid {
+  width: sizeFluid;
+  min-width: size160;
+}
+
+.option {
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  flex: 0 0 auto;
+  width: sizeFluid;
+  display: flex;
+  border-radius: borderRadiusSmall;
+  padding: spaceNone spaceSmall;
+  align-items: center;
+  cursor: pointer;
+  column-gap: spaceSmall;
+  color: colorTextSecondary;
+}
+
+.optionText {
+  composes: truncate from '../../styles/typography.module.css';
+}
+
+.withIconLeft {
+  padding-left: spaceXSmall;
+}
+
+.withIconRight {
+  padding-right: spaceXSmall;
+}
+
+.icon {
+  color: inherit;
+}
+
+.rightIcon {
+  margin-left: auto;
+}
+
+.optionSmall {
+  composes: buttonTextSmall from '../../styles/typography.module.css';
+  height: size34;
+}
+
+.optionMedium {
+  composes: buttonTextMedium from '../../styles/typography.module.css';
+  height: size42;
+}
+
+.option:hover,
+.option:active {
+  background: colorBackgroundSecondary;
+  color: colorTextPrimary;
+}
+
+.option:focus {
+  background: colorFillSecondary;
+  outline: none;
+  color: colorTextPrimary;
+}
+
+.disabled {
+  color: colorTextDisabled;
+  pointer-events: none;
+}

package/lib/components/Menu/index.js

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

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {MenuOption, MenuProps} from './Menu';
+export {Menu} from './Menu';