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

package/lib/components/Dialog/Dialog.js.flow

@@ -0,0 +1,165 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+import type {ModalProps} from '../Modal';
+import {Modal} from '../Modal';
+
+import css from './Dialog.module.css';
+
+
+export const DIALOG_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+export type DialogSemanticType = $Values<typeof DIALOG_SEMANTIC>;
+
+export type DialogHeaderProps = {
+  children?: React.Node,
+};
+
+export type DialogFooterProps = {
+  children?: React.Node,
+};
+
+export type DialogBodyProps = {
+  children?: React.Node,
+};
+
+export type DialogPropsBase = {
+  ...ModalProps,
+};
+
+export type DialogPropsWithFixedIcon = {
+  ...DialogPropsBase,
+  semantic?: DialogSemanticType,
+};
+
+export type DialogPropsWithVariableIcon = {
+  ...DialogPropsBase,
+  semantic?: 'neutral',
+  iconName?: string,
+};
+
+export type DialogProps =
+  | DialogPropsWithFixedIcon
+  | DialogPropsWithVariableIcon;
+
+const DialogIcon = ({
+  semantic,
+  iconName,
+}: {
+  semantic: DialogSemanticType,
+  iconName: string,
+}) => {
+  switch (semantic) {
+  case DIALOG_SEMANTIC.neutral:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={iconName ? iconName : 'face-smile'}
+        type="solid"
+      />
+    );
+  case DIALOG_SEMANTIC.success:
+    return (
+      <Icon name="circle-check" color={TEXT_COLORS.success} type="solid" />
+    );
+
+  case DIALOG_SEMANTIC.information:
+    return (
+      <Icon name="circle-info" color={TEXT_COLORS.information} type="solid" />
+    );
+
+  case DIALOG_SEMANTIC.warning:
+    return (
+      <Icon
+        name="circle-exclamation"
+        color={TEXT_COLORS.warning}
+        type="solid"
+      />
+    );
+
+  case DIALOG_SEMANTIC.danger:
+    return (
+      <Icon
+        name="shield-exclamation"
+        color={TEXT_COLORS.danger}
+        type="solid"
+      />
+    );
+
+  default:
+    return (
+      <Icon color={TEXT_COLORS.neutral} name="face-smile" type="solid" />
+    );
+  }
+};
+
+export const DialogHeader = ({children}: DialogHeaderProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.dialogHeader}>
+        <div className={css.headerContent}>{children}</div>
+      </div>
+    )}
+  </>
+);
+
+export const DialogBody = ({children}: DialogBodyProps): React.Node => (
+  <div className={css.dialogBody}>{children}</div>
+);
+
+export const DialogFooter = ({children}: DialogFooterProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.dialogFooter}>
+        <div className={css.dialogFooterActions}>{children}</div>
+      </div>
+    )}
+  </>
+);
+
+export const Dialog = ({
+  children,
+  isOpen = false,
+  showBackdrop = true,
+  onClose,
+  tapOutsideToClose = false,
+  iconName = '',
+  semantic = 'neutral',
+  ...restDialogProps
+}: DialogProps): React.Node => (
+  <Modal
+    isOpen={isOpen}
+    onClose={onClose}
+    showBackdrop={showBackdrop}
+    tapOutsideToClose={tapOutsideToClose}
+    {...restDialogProps}
+    classNames={{
+      content: classify(css.dialog),
+    }}
+  >
+    <div className={css.topBlock}>
+      <div
+        className={classify(css.iconContainer, {
+          [css.neutral]: semantic === DIALOG_SEMANTIC.neutral,
+          [css.success]: semantic === DIALOG_SEMANTIC.success,
+          [css.information]: semantic === DIALOG_SEMANTIC.information,
+          [css.warning]: semantic === DIALOG_SEMANTIC.warning,
+          [css.danger]: semantic === DIALOG_SEMANTIC.danger,
+        })}
+      >
+        <DialogIcon semantic={semantic} iconName={iconName} />
+      </div>
+    </div>
+    {children}
+  </Modal>
+);

package/lib/components/Dialog/Dialog.module.css

@@ -0,0 +1,87 @@
+@value (spaceLarge, spaceXSmall, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
+@value (size42, size380, sizeFluid) from '../../styles/variables/_size.css';
+@value (borderRadiusMedium, borderRadiusCircle) from '../../styles/variables/_border.css';
+@value (
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorInformationLightest,
+  colorWarningLightest,
+  colorDangerLightest
+) from '../../styles/variables/_color.css';
+
+.dialog {
+  composes: boxShadow4 from '../../styles/shadow.module.css';
+  border-radius: borderRadiusMedium;
+  padding: spaceMedium;
+  max-width: size380;
+}
+
+.dialogHeader {
+  composes: subTitleLarge from '../../styles/typography.module.css';
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+
+.topBlock {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: spaceMedium;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: size42;
+  height: size42;
+  border-radius: borderRadiusCircle;
+}
+
+.headerContent {
+  display: flex;
+}
+
+.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.success {
+  background-color: colorSuccessLightest;
+}
+
+.information {
+  background-color: colorInformationLightest;
+}
+
+.warning {
+  background-color: colorWarningLightest;
+}
+
+.danger {
+  background-color: colorDangerLightest;
+}
+
+.dialogBody {
+  margin-top: spaceXSmall;
+  display: flex;
+  height: sizeFluid;
+  overflow: auto;
+  text-align: center;
+}
+
+.dialogFooter {
+  margin-top: spaceLarge;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.dialogFooterActions {
+  display: flex;
+  gap: spaceSmall;
+  width: 100%;
+}

package/lib/components/Dialog/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DIALOG_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _Dialog.DIALOG_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function () {
+    return _Dialog.Dialog;
+  }
+});
+Object.defineProperty(exports, "DialogBody", {
+  enumerable: true,
+  get: function () {
+    return _Dialog.DialogBody;
+  }
+});
+Object.defineProperty(exports, "DialogFooter", {
+  enumerable: true,
+  get: function () {
+    return _Dialog.DialogFooter;
+  }
+});
+Object.defineProperty(exports, "DialogHeader", {
+  enumerable: true,
+  get: function () {
+    return _Dialog.DialogHeader;
+  }
+});
+var _Dialog = require("./Dialog.js");

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

@@ -0,0 +1,14 @@
+//@flow strict
+export type {
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogProps,
+} from './Dialog.js';
+export {
+  Dialog,
+  DIALOG_SEMANTIC,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+} from './Dialog.js';

package/lib/components/Dropdown/Dropdown.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = 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 _Input = require("../Input");
+var _Menu = require("../Menu");
+var _DropdownModule = _interopRequireDefault(require("./Dropdown.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 Dropdown = _ref => {
+  let {
+    options,
+    size,
+    classNames,
+    placeholder = 'Select...',
+    onChange,
+    selectedOption,
+    ...inputProps
+  } = _ref;
+  const [inputValue, setInputValue] = React.useState(selectedOption?.label);
+  const dropdownRef = React.useRef();
+  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) {
+      onChange && onChange(option);
+      setInputValue(option.label);
+    }
+  };
+  React.useEffect(() => {
+    if (selectedOption?.key) {
+      setInputValue(selectedOption.label);
+    }
+  }, [selectedOption]);
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_clickAway.ClickAway, {
+    children: _ref2 => {
+      let {
+        isOpen,
+        onOpen,
+        cancelNext,
+        clickAway
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+        "data-testid": "Dropdown",
+        className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
+        ref: dropdownRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.js)(_Input.Input, {
+          boxRef: reference,
+          size: size,
+          placeholder: placeholder,
+          value: inputValue,
+          classNames: {
+            box: _DropdownModule.default.inputBox
+          },
+          ...inputProps,
+          iconRightName: isOpen ? 'angle-up' : 'angle-down',
+          readOnly: true,
+          onContainerClick: e => {
+            e.stopPropagation();
+            onOpen();
+          }
+        }), isOpen && options && /*#__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: options,
+            onSelect: option => {
+              handleSelect(option);
+              clickAway();
+            },
+            size: size
+          })
+        })]
+      });
+    }
+  });
+};
+exports.Dropdown = Dropdown;

package/lib/components/Dropdown/Dropdown.js.flow

@@ -0,0 +1,129 @@
+// @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 {Input} from '../Input';
+import type {MenuOption} from '../Menu';
+import {Menu} from '../Menu';
+
+import css from './Dropdown.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, box?: string}>;
+
+export type DropdownProps = {
+  classNames?: ClassNames,
+  onChange?: (option: MenuOption) => 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 Dropdown = ({
+  options,
+  size,
+  classNames,
+  placeholder = 'Select...',
+  onChange,
+  selectedOption,
+  ...inputProps
+}: DropdownProps): React.Node => {
+  const [inputValue, setInputValue] = React.useState(selectedOption?.label);
+  const dropdownRef = React.useRef();
+  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) {
+      onChange && onChange(option);
+      setInputValue(option.label);
+    }
+  };
+
+  React.useEffect(() => {
+    if (selectedOption?.key) {
+      setInputValue(selectedOption.label);
+    }
+  }, [selectedOption]);
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div
+          data-testid="Dropdown"
+          className={classify(css.dropdownContainer, classNames?.wrapper)}
+          ref={dropdownRef}
+        >
+          <Input
+            boxRef={reference}
+            size={size}
+            placeholder={placeholder}
+            value={inputValue}
+            classNames={{box: css.inputBox}}
+            {...inputProps}
+            iconRightName={isOpen ? 'angle-up' : 'angle-down'}
+            readOnly
+            onContainerClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+          />
+
+          {isOpen && options && (
+            <div
+              onClickCapture={cancelNext}
+              ref={floating}
+              style={{
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+                width: sizeFluid,
+                backgroundColor: colorBackgroundTertiary,
+              }}
+            >
+              <Menu
+                isFluid
+                options={options}
+                onSelect={(option) => {
+                  handleSelect(option);
+                  clickAway();
+                }}
+                size={size}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/Dropdown/Dropdown.module.css

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

package/lib/components/Dropdown/index.js

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

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export {Dropdown} from './Dropdown';
+export {DropdownProps} from './Dropdown';

package/lib/components/Grid/Grid.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Row = exports.Col = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _GridModule = _interopRequireDefault(require("./Grid.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 GRID_SYSTEM_MAP = {
+  small: 24,
+  medium: 12,
+  large: 6
+};
+const Row = _ref => {
+  let {
+    className,
+    children,
+    span = 1,
+    gridType = 'medium'
+  } = _ref;
+  const GRID_COLUMN_COUNT = GRID_SYSTEM_MAP[gridType];
+  let columnSpanCount = 0;
+  let lastChildColCount = 0;
+  const childrenWithProps = React.Children.map(children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      const {
+        span = 1,
+        offset = 0
+      } = child.props;
+      if (span < 1) {
+        console.error(`span can not be less than one`);
+        return;
+      }
+      if (offset < 0) {
+        console.error(`offset can not be negative`);
+        return;
+      }
+      lastChildColCount = columnSpanCount;
+      columnSpanCount = lastChildColCount + offset + span;
+      if (columnSpanCount <= GRID_COLUMN_COUNT) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          gridColumnStart: lastChildColCount + offset + 1,
+          gridColumnEnd: `span ${span}`
+        });
+      } else {
+        console.error(`number of column exceed ${GRID_COLUMN_COUNT}`);
+      }
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    "data-testid": "Grid",
+    className: (0, _classify.classify)(_GridModule.default.gridRow, _GridModule.default[`gridRowSpan${span}`], className),
+    style: {
+      gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`
+    },
+    children: childrenWithProps
+  });
+};
+exports.Row = Row;
+const Col = _ref2 => {
+  let {
+    className,
+    children,
+    gridColumnStart,
+    gridColumnEnd
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: (0, _classify.classify)(_GridModule.default.gridColumn, className),
+    style: {
+      gridColumnStart,
+      gridColumnEnd
+    },
+    children: children
+  });
+};
+exports.Col = Col;