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

package/lib/components/RadioButton/RadioGroup.js.flow

@@ -0,0 +1,85 @@
+// @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 './RadioGroup.module.css';
+
+/**
+ * Note:
+ * Do not wrap Radio in a label. For simplicity's sake, Radio uses an
+ * internal label tag to handle click delegation to the hidden input, and
+ * nesting labels is a bad idea.
+ */
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  radioGroup?: string,
+  errorText?: string,
+}>;
+
+export type RadioGroupProps = {
+  align?: GroupAlign,
+  name: string,
+  value?: string,
+  onChange?: (value: string) => mixed,
+  children?: React.Node,
+  classNames?: ClassNames,
+  error?: boolean,
+  errorText?: string,
+};
+
+export const RadioGroup = ({
+  align = 'vertical',
+  name,
+  value,
+  onChange,
+  children,
+  classNames,
+  error = false,
+  errorText = '',
+}: RadioGroupProps): React.Node => {
+  const onChangeHandler = (value) => {
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        name,
+        selectedValue: value,
+        onChange: onChangeHandler,
+        align,
+        error,
+      });
+    }
+    return child;
+  });
+
+  return (
+    <div className={classify(css.radioGroupContainer, classNames?.wrapper)}>
+      <div
+        className={classify(
+          {
+            [css.vertical]: align === 'vertical',
+            [css.horizontal]: align === 'horizontal-fixed',
+            [css.horizontalFluid]: align === 'horizontal-fluid',
+          },
+          classNames?.radioGroup,
+        )}
+      >
+        {childrenWithProps}
+      </div>
+      {error && (
+        <BodySmall color="danger" className={classNames?.errorText}>
+          {errorText}
+        </BodySmall>
+      )}
+    </div>
+  );
+};

package/lib/components/RadioButton/RadioGroup.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';
+
+.radioGroupContainer {
+  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/RadioButton/index.js

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

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

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

package/lib/components/SearchInput/SearchInput.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInput = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Input = require("../Input");
+var _SearchInputModule = _interopRequireDefault(require("./SearchInput.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 SearchInput = _ref => {
+  let {
+    value,
+    disabled,
+    locked,
+    placeholder = 'Search...',
+    classNames,
+    ...searchInputProps
+  } = _ref;
+  const [searchValue, setSearchValue] = React.useState(value);
+  React.useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+  const handleClearClick = () => {
+    setSearchValue('');
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_Input.Input, {
+    ...searchInputProps,
+    classNames: {
+      ...classNames,
+      iconRight: searchValue && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
+      iconLeft: searchValue && !disabled ? _SearchInputModule.default.primaryText : ''
+    },
+    placeholder: placeholder,
+    value: searchValue,
+    disabled: disabled,
+    locked: locked,
+    iconLeftName: "magnifying-glass",
+    iconRightName: searchValue && !(disabled || locked) ? 'xmark' : 'fw',
+    onIconRightClick: handleClearClick
+  });
+};
+exports.SearchInput = SearchInput;

package/lib/components/SearchInput/SearchInput.js.flow

@@ -0,0 +1,73 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {Input} from '../Input';
+
+import css from './SearchInput.module.css';
+
+
+type ClassNames = $ReadOnly<{box?: string, iconLeft?: string}>;
+
+export type SearchInputProps = {
+  classNames?: ClassNames,
+  name?: string,
+  placeholder?: string,
+  disabled?: boolean,
+  locked?: boolean,
+  value?: string,
+  error?: boolean,
+  errorText?: string,
+  label?: string | React.Node,
+  helperText?: string | React.Node,
+  size?: 'medium' | 'small',
+  required?: boolean,
+  boxRef?: (?HTMLElement) => mixed,
+  onChange?: (
+    evt: SyntheticInputEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => mixed,
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onPaste?: (e: ClipboardEvent) => mixed,
+  onPaste?: (e: ClipboardEvent) => mixed,
+  onContainerClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const SearchInput = ({
+  value,
+  disabled,
+  locked,
+  placeholder = 'Search...',
+  classNames,
+  ...searchInputProps
+}: SearchInputProps): React.Node => {
+  const [searchValue, setSearchValue] = React.useState(value);
+
+  React.useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+
+  const handleClearClick = () => {
+    setSearchValue('');
+  };
+
+  return (
+    <Input
+      {...searchInputProps}
+      classNames={{
+        ...classNames,
+        iconRight: searchValue && !(disabled || locked) ? css.clickable : '',
+        iconLeft: searchValue && !disabled ? css.primaryText : '',
+      }}
+      placeholder={placeholder}
+      value={searchValue}
+      disabled={disabled}
+      locked={locked}
+      iconLeftName="magnifying-glass"
+      iconRightName={searchValue && !(disabled || locked) ? 'xmark' : 'fw'}
+      onIconRightClick={handleClearClick}
+    />
+  );
+};

package/lib/components/SearchInput/SearchInput.module.css

@@ -0,0 +1,11 @@
+@value (
+  colorTextPrimary
+) from '../../styles/variables/_color.css';
+
+.clickable {
+  cursor: pointer;
+}
+
+.primaryText {
+  color: colorTextPrimary;
+}

package/lib/components/SearchInput/index.js

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

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

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

package/lib/components/Text/Text.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.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 JumboMedium = _ref => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+    className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.JumboMedium = JumboMedium;
+const TitleMedium = _ref2 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("h1", {
+    className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.TitleMedium = TitleMedium;
+const SubTitleLarge = _ref3 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("h2", {
+    className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.SubTitleLarge = SubTitleLarge;
+const SubTitleMedium = _ref4 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("h3", {
+    className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.SubTitleMedium = SubTitleMedium;
+const SubTitleSmall = _ref5 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref5;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("h4", {
+    className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.SubTitleSmall = SubTitleSmall;
+const SubTitleExtraSmall = _ref6 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref6;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("h5", {
+    className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.SubTitleExtraSmall = SubTitleExtraSmall;
+const ButtonTextMedium = _ref7 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref7;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.ButtonTextMedium = ButtonTextMedium;
+const ButtonTextSmall = _ref8 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref8;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.ButtonTextSmall = ButtonTextSmall;
+const FormInputMedium = _ref9 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref9;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("p", {
+    className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.FormInputMedium = FormInputMedium;
+const FormInputSmall = _ref10 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref10;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("p", {
+    className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.FormInputSmall = FormInputSmall;
+const BodyLarge = _ref11 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref11;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("p", {
+    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.BodyLarge = BodyLarge;
+const BodyMedium = _ref12 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref12;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("p", {
+    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.BodyMedium = BodyMedium;
+const BodySmall = _ref13 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref13;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("p", {
+    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.BodySmall = BodySmall;
+const FormLabelMedium = _ref14 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref14;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+    className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.FormLabelMedium = FormLabelMedium;
+const FormLabelSmall = _ref15 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className
+  } = _ref15;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("span", {
+    className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
+    children: children
+  });
+};
+exports.FormLabelSmall = FormLabelSmall;

package/lib/components/Text/Text.js.flow

@@ -0,0 +1,160 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+
+import css from '../../styles/typography.module.css';
+
+
+export type TextProps = {
+  color?: ColorTypes,
+  children?: React.Node,
+  className?: string,
+};
+
+export const JumboMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <span className={classify(css.jumboMedium, css[color], className)}>
+    {children}
+  </span>
+);
+
+export const TitleMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <h1 className={classify(css.titleMedium, css[color], className)}>
+    {children}
+  </h1>
+);
+
+export const SubTitleLarge = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <h2 className={classify(css.subTitleLarge, css[color], className)}>
+    {children}
+  </h2>
+);
+
+export const SubTitleMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <h3 className={classify(css.subTitleMedium, css[color], className)}>
+    {children}
+  </h3>
+);
+
+export const SubTitleSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <h4 className={classify(css.subTitleSmall, css[color], className)}>
+    {children}
+  </h4>
+);
+
+export const SubTitleExtraSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <h5 className={classify(css.subTitleExtraSmall, css[color], className)}>
+    {children}
+  </h5>
+);
+
+export const ButtonTextMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <span className={classify(css.buttonTextMedium, css[color], className)}>
+    {children}
+  </span>
+);
+
+export const ButtonTextSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <span className={classify(css.buttonTextSmall, css[color], className)}>
+    {children}
+  </span>
+);
+
+export const FormInputMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <p className={classify(css.formInputMedium, css[color], className)}>
+    {children}
+  </p>
+);
+
+export const FormInputSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <p className={classify(css.formInputSmall, css[color], className)}>
+    {children}
+  </p>
+);
+
+export const BodyLarge = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <p className={classify(css.bodyLarge, css[color], className)}>{children}</p>
+);
+
+export const BodyMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <p className={classify(css.bodyMedium, css[color], className)}>{children}</p>
+);
+
+export const BodySmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <p className={classify(css.bodySmall, css[color], className)}>{children}</p>
+);
+
+export const FormLabelMedium = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <span className={classify(css.formLabelMedium, css[color], className)}>
+    {children}
+  </span>
+);
+
+export const FormLabelSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+}: TextProps): React.Node => (
+  <span className={classify(css.formLabelSmall, css[color], className)}>
+    {children}
+  </span>
+);