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

package/lib/components/Checkbox/CheckboxGroup.js.flow

@@ -0,0 +1,105 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {GroupAlign} from '../../types/common';
+import classify from '../../utils/classify';
+import {BodySmall} from '../Text/Text.js';
+
+import css from './CheckboxGroup.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  checkboxGroup?: string,
+  errorText?: string,
+}>;
+export type CheckboxOptions = Array<{
+  label: React.Node,
+  value: string,
+}>;
+
+export type CheckboxGroupProps = {
+  align?: GroupAlign,
+  disabled?: boolean,
+  name: string,
+  value?: Array<string>,
+  onChange?: (value: Array<string>) => mixed,
+  classNames?: ClassNames,
+  error?: boolean,
+  errorText?: string,
+  children?: React.Node,
+};
+
+export const CheckboxGroup = ({
+  align = 'vertical',
+  disabled = false,
+  name,
+  value: checkedList,
+  onChange,
+  classNames,
+  error = false,
+  errorText = '',
+  children,
+}: CheckboxGroupProps): React.Node => {
+  const onChangeHandler = ({value, checked}) => {
+    const checkedListTemp = checkedList ? [...checkedList] : [];
+    if (checked && !checkedListTemp.includes(value)) {
+      checkedListTemp.push(value);
+    } else if (!checked && checkedListTemp.includes(value)) {
+      for (let i = 0; i < checkedListTemp.length; i++) {
+        if (checkedListTemp[i] === value) {
+          checkedListTemp.splice(i, 1);
+          break;
+        }
+      }
+    }
+    onChange && onChange(checkedListTemp);
+  };
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const {
+        value,
+        disabled: disabledChild,
+        error: errorChild,
+        onChange,
+      } = child.props;
+      const childOnChange = (...params) => {
+        onChangeHandler(...params);
+        onChange && onChange(...params);
+      };
+      return React.cloneElement(child, {
+        name,
+        checked: !!checkedList?.includes(value),
+        onChange: childOnChange,
+        align,
+        error: errorChild || error,
+        disabled: disabledChild || disabled,
+      });
+    }
+    return child;
+  });
+
+  return (
+    <div className={classify(css.checkboxGroupContainer, classNames?.wrapper)}>
+      <div
+        className={classify(
+          {
+            [css.vertical]: align === 'vertical',
+            [css.horizontal]: align === 'horizontal-fixed',
+            [css.horizontalFluid]: align === 'horizontal-fluid',
+          },
+          classNames?.checkboxGroup,
+        )}
+      >
+        {childrenWithProps}
+      </div>
+      {error && (
+        <BodySmall className={classify(classNames?.errorText)} color="danger">
+          {errorText}
+        </BodySmall>
+      )}
+    </div>
+  );
+};

package/lib/components/Checkbox/CheckboxGroup.module.css

@@ -0,0 +1,47 @@
+@value (
+  colorBackgroundTertiary,
+  colorBorderSecondary,
+  colorFillPrimary,
+  colorFillDisabled,
+  colorFocusPrimary
+) from '../../styles/variables/_color.css';
+
+@value (
+  spaceXSmall,
+  spaceSmall,
+  spaceMedium
+) from '../../styles/variables/_space.css';
+
+@value (
+  size500,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.checkboxGroupContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+}
+
+.vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: spaceSmall;
+}
+
+.horizontal {
+  display: flex;
+  align-items: flex-start;
+  gap: spaceMedium;
+  flex-wrap: wrap;
+  width: sizeFluid;
+}
+
+.horizontalFluid {
+  display: flex;
+  align-items: flex-start;
+  gap: spaceMedium;
+  flex-wrap: wrap;
+  width: sizeFluid;
+}

package/lib/components/Checkbox/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxGroup.CheckboxGroup;
+  }
+});
+var _Checkbox = require("./Checkbox.js");
+var _CheckboxGroup = require("./CheckboxGroup.js");

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

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

package/lib/components/CircularLoader/CircularLoader.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircularLoader = void 0;
+var React = _interopRequireWildcard(require("react"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color.js"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _CircularLoaderModule = _interopRequireDefault(require("./CircularLoader.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 CircularLoader = _ref => {
+  let {
+    size = 'medium',
+    className,
+    colorToken = 'colorFillPrimary'
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: (0, _classify.default)(_CircularLoaderModule.default.container, {
+      [_CircularLoaderModule.default.mediumContainer]: size === 'medium',
+      [_CircularLoaderModule.default.smallContainer]: size === 'small'
+    }, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+      className: _CircularLoaderModule.default.spinLoader,
+      "aria-hidden": "true",
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _CircularLoaderModule.default.outerCircle,
+        style: {
+          '--color': COLORS[colorToken]
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _CircularLoaderModule.default.ellipse,
+        style: {
+          '--color': COLORS[colorToken]
+        }
+      })]
+    })
+  });
+};
+exports.CircularLoader = CircularLoader;

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -0,0 +1,44 @@
+// @flow strict
+
+import * as React from 'react';
+
+import * as COLORS from '../../styles/variables/_color.js';
+import classify from '../../utils/classify';
+
+import css from './CircularLoader.module.css';
+
+
+export type CircularLoaderProps = {
+  size?: 'large' | 'medium' | 'small',
+  className?: string,
+  // TODO: update it to permissible colors
+  colorToken?: $Keys<typeof COLORS>,
+};
+
+export const CircularLoader = ({
+  size = 'medium',
+  className,
+  colorToken = 'colorFillPrimary',
+}: CircularLoaderProps): React.Node => (
+  <div
+    className={classify(
+      css.container,
+      {
+        [css.mediumContainer]: size === 'medium',
+        [css.smallContainer]: size === 'small',
+      },
+      className,
+    )}
+  >
+    <div className={css.spinLoader} aria-hidden="true">
+      <div
+        className={css.outerCircle}
+        style={{'--color': COLORS[colorToken]}}
+      ></div>
+      <div
+        className={css.ellipse}
+        style={{'--color': COLORS[colorToken]}}
+      ></div>
+    </div>
+  </div>
+);

package/lib/components/CircularLoader/CircularLoader.module.css

@@ -0,0 +1,81 @@
+@value (colorFillPrimary, colorBackgroundTertiary, colorFillNone) from '../../styles/variables/_color.css';
+@value (
+  spaceNone
+) from '../../styles/variables/_space.css';
+
+@value (
+  size5,
+  size60
+) from '../../styles/variables/_size.css';
+
+@value (
+  motionDurationSlowest
+) from '../../styles/variables/_motion.css';
+
+@value spinnerSize: size60;
+@value spinnerThickness: size5;
+
+@value innerCircleSize: calc(spinnerSize - 2 * spinnerThickness);
+
+@value innerMaskGradient: radial-gradient(farthest-side, colorFillNone calc(99% - spinnerThickness), colorFillPrimary calc(100% - spinnerThickness));
+
+.container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.mediumContainer {
+  transform: scale(0.5);
+}
+
+.smallContainer {
+  transform: scale(0.36);
+}
+
+.spinLoader {
+  height: spinnerSize;
+  width: spinnerSize;
+  display: block;
+  position: relative;
+  animation: spin motionDurationSlowest linear 0s infinite normal;
+  background: transparent;
+}
+
+.outerCircle {
+  --color: colorFillPrimary;
+  display: block;
+  position: absolute;
+  border-radius: calc(spinnerSize/2);
+  height: spinnerSize;
+  width: spinnerSize;
+  top: spaceNone;
+  right: spaceNone;
+  background: conic-gradient(
+    from 90deg at 50% 50%,
+    colorFillNone 1deg,
+    var(--color) 360deg
+  );
+  -webkit-mask: innerMaskGradient;
+  mask: innerMaskGradient;
+}
+
+.ellipse {
+  --color: colorFillPrimary;
+  position: absolute;
+  left: calc(spinnerSize - spinnerThickness);
+  right: spaceNone;
+  top: spaceNone;
+  bottom: spaceNone;
+  border-radius: calc(spinnerThickness/2);
+  height: spinnerThickness;
+  width: spinnerThickness;
+  margin: auto;
+  background: var(--color);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/components/CircularLoader/index.js

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

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

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

package/lib/components/CodeBlock.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeBlock = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactCodeBlocks = require("react-code-blocks");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+
+// $FlowFixMe[untyped-import]
+
+const CodeBlock = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_reactCodeBlocks.CodeBlock, {
+    text: children,
+    showLineNumbers: false,
+    ...props
+  });
+};
+exports.CodeBlock = CodeBlock;

package/lib/components/CodeBlock.js.flow

@@ -0,0 +1,19 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {CodeBlock as ReactCodeBlock} from 'react-code-blocks';
+
+
+type CodeBlockProps = {
+  children?: React.Node,
+  language?: string,
+};
+
+export const CodeBlock = ({children, ...props}: CodeBlockProps): React.Node => (
+  <ReactCodeBlock
+    text={children}
+    showLineNumbers={false}
+    {...props}
+  ></ReactCodeBlock>
+);

package/lib/components/Dialog/Dialog.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogHeader = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.DIALOG_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Modal = require("../Modal");
+var _DialogModule = _interopRequireDefault(require("./Dialog.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 DIALOG_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger'
+});
+exports.DIALOG_SEMANTIC = DIALOG_SEMANTIC;
+const DialogIcon = _ref => {
+  let {
+    semantic,
+    iconName
+  } = _ref;
+  switch (semantic) {
+    case DIALOG_SEMANTIC.neutral:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        color: _typography.TEXT_COLORS.neutral,
+        name: iconName ? iconName : 'face-smile',
+        type: "solid"
+      });
+    case DIALOG_SEMANTIC.success:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-check",
+        color: _typography.TEXT_COLORS.success,
+        type: "solid"
+      });
+    case DIALOG_SEMANTIC.information:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-info",
+        color: _typography.TEXT_COLORS.information,
+        type: "solid"
+      });
+    case DIALOG_SEMANTIC.warning:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "circle-exclamation",
+        color: _typography.TEXT_COLORS.warning,
+        type: "solid"
+      });
+    case DIALOG_SEMANTIC.danger:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: "shield-exclamation",
+        color: _typography.TEXT_COLORS.danger,
+        type: "solid"
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        color: _typography.TEXT_COLORS.neutral,
+        name: "face-smile",
+        type: "solid"
+      });
+  }
+};
+const DialogHeader = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _DialogModule.default.dialogHeader,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _DialogModule.default.headerContent,
+        children: children
+      })
+    })
+  });
+};
+exports.DialogHeader = DialogHeader;
+const DialogBody = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+    className: _DialogModule.default.dialogBody,
+    children: children
+  });
+};
+exports.DialogBody = DialogBody;
+const DialogFooter = _ref4 => {
+  let {
+    children
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _DialogModule.default.dialogFooter,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _DialogModule.default.dialogFooterActions,
+        children: children
+      })
+    })
+  });
+};
+exports.DialogFooter = DialogFooter;
+const Dialog = _ref5 => {
+  let {
+    children,
+    isOpen = false,
+    showBackdrop = true,
+    onClose,
+    tapOutsideToClose = false,
+    iconName = '',
+    semantic = 'neutral',
+    ...restDialogProps
+  } = _ref5;
+  return /*#__PURE__*/(0, _jsxRuntime.jss)(_Modal.Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    showBackdrop: showBackdrop,
+    tapOutsideToClose: tapOutsideToClose,
+    ...restDialogProps,
+    classNames: {
+      content: (0, _classify.default)(_DialogModule.default.dialog)
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _DialogModule.default.topBlock,
+      children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: (0, _classify.default)(_DialogModule.default.iconContainer, {
+          [_DialogModule.default.neutral]: semantic === DIALOG_SEMANTIC.neutral,
+          [_DialogModule.default.success]: semantic === DIALOG_SEMANTIC.success,
+          [_DialogModule.default.information]: semantic === DIALOG_SEMANTIC.information,
+          [_DialogModule.default.warning]: semantic === DIALOG_SEMANTIC.warning,
+          [_DialogModule.default.danger]: semantic === DIALOG_SEMANTIC.danger
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.js)(DialogIcon, {
+          semantic: semantic,
+          iconName: iconName
+        })
+      })
+    }), children]
+  });
+};
+exports.Dialog = Dialog;