@spaced-out/ui-design-system 0.3.9 → 0.3.11

package/lib/components/PromptInput/PromptInput.js.flow

@@ -0,0 +1,190 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {size200} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import {Button, BUTTON_TYPES} from '../Button';
+import type {IconType} from '../Icon';
+import {ICON_TYPE} from '../Icon';
+import {BodySmallBold, FormLabelSmall} from '../Text';
+import {Textarea} from '../Textarea';
+
+import css from './PromptInput.module.css';
+
+
+const CONSTANTS = {
+  DEFAULT_INPUT_PLACEHOLDER: 'Ask me anything',
+  INPUT_NAME: 'prompt-textarea',
+  BUTTON_TEXT: 'Generate',
+  BUTTON_ICON: 'sparkles',
+  BUTTON_ARIA_LABEL: 'Prompt Button',
+  TEXT_AREA_ROWS: 1,
+};
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  inputBox?: string,
+  textarea?: string,
+  buttonWrapper?: string,
+  buttonIcon?: string,
+  buttonText?: string,
+}>;
+
+export type PromptInputProps = {
+  // textArea Props
+  value?: string,
+  onInputChange?: (
+    evt: SyntheticInputEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => mixed,
+  onInputFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onInputBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onInputKeyDown?: (e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  inputName?: string,
+  inputDisabled?: boolean,
+  inputPlaceholder?: string,
+  inputLocked?: boolean,
+  inputError?: boolean,
+  inputErrorText?: string,
+
+  // Common props
+  helperContent?: React.Node,
+  textCountLimit?: number,
+  classNames?: ClassNames,
+  withPadding?: boolean,
+
+  // Button Props
+  buttonText?: string,
+  buttonDisabled?: boolean,
+  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  buttonAriaLabel?: string,
+  isButtonLoading?: boolean,
+  buttonIconLeftName?: string,
+  buttonIconLeftType?: IconType,
+};
+
+export const PromptInput: React$AbstractComponent<
+  PromptInputProps,
+  HTMLDivElement,
+> = React.forwardRef<PromptInputProps, HTMLDivElement>(
+  (
+    {
+      value,
+      onInputChange,
+      onInputFocus,
+      onInputBlur,
+      onInputKeyDown,
+      inputName = CONSTANTS.INPUT_NAME,
+      inputDisabled,
+      inputPlaceholder = CONSTANTS.DEFAULT_INPUT_PLACEHOLDER,
+      inputLocked,
+      inputError,
+      inputErrorText,
+
+      helperContent,
+      textCountLimit,
+      classNames,
+      withPadding = true,
+
+      buttonText = CONSTANTS.BUTTON_TEXT,
+      buttonDisabled,
+      onButtonClick,
+      buttonAriaLabel = CONSTANTS.BUTTON_ARIA_LABEL,
+      isButtonLoading,
+      buttonIconLeftName = CONSTANTS.BUTTON_ICON,
+      buttonIconLeftType = ICON_TYPE.solid,
+    }: PromptInputProps,
+    ref,
+  ) => {
+    const textareaRef = React.useRef(null);
+
+    const handleInput = () => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.height = 'auto';
+        if (textarea.scrollHeight > parseInt(size200)) {
+          textarea.style.height = size200;
+          textarea.style.overflowY = 'auto';
+        } else {
+          textarea.style.height = `${textarea.scrollHeight}px`;
+          textarea.style.overflowY = 'hidden';
+        }
+      }
+    };
+
+    const textCountError = React.useMemo(() => {
+      const charCount = value ? value.length : 0;
+      return textCountLimit != null && charCount > textCountLimit;
+    }, [value, textCountLimit]);
+
+    return (
+      <div
+        ref={ref}
+        data-testid="PromptInput"
+        className={classify(
+          css.wrapper,
+          {[css.styledPromptContainer]: withPadding},
+          classNames?.wrapper,
+        )}
+      >
+        <div className={css.inputActionWrapper}>
+          <Textarea
+            classNames={{
+              box: classify(css.promptInputBox, classNames?.inputBox),
+              textarea: classify(css.textarea, classNames?.textarea),
+            }}
+            ref={textareaRef}
+            onInput={handleInput}
+            value={value}
+            onChange={onInputChange}
+            onFocus={onInputFocus}
+            onBlur={onInputBlur}
+            onKeyDown={onInputKeyDown}
+            name={inputName}
+            disabled={inputDisabled}
+            placeholder={inputPlaceholder}
+            locked={inputLocked}
+            error={inputError || textCountError}
+            errorText={inputErrorText}
+            rows={CONSTANTS.TEXT_AREA_ROWS}
+          ></Textarea>
+          <Button
+            iconLeftName={buttonIconLeftName}
+            iconLeftType={buttonIconLeftType}
+            onClick={onButtonClick}
+            type={BUTTON_TYPES.gradient}
+            disabled={buttonDisabled}
+            ariaLabel={buttonAriaLabel}
+            isLoading={isButtonLoading}
+            classNames={{
+              wrapper: classify(css.actionButton, classNames?.buttonWrapper),
+              icon: classNames?.buttonIcon,
+              text: classNames?.buttonText,
+            }}
+          >
+            {buttonText}
+          </Button>
+        </div>
+        {(!!helperContent || !!textCountLimit) && (
+          <div className={css.secondaryRow}>
+            {typeof helperContent === 'string' ? (
+              <BodySmallBold color={inputDisabled ? 'disabled' : 'secondary'}>
+                {helperContent}
+              </BodySmallBold>
+            ) : (
+              helperContent
+            )}
+            <FormLabelSmall
+              color={inputError || textCountError ? 'danger' : 'secondary'}
+              className={css.textCounter}
+            >
+              {!!textCountLimit &&
+                ((value && value.length) || 0) + '/' + textCountLimit}
+            </FormLabelSmall>
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/PromptInput/PromptInput.module.css

@@ -0,0 +1,56 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (
+  sizeFluid,
+  size140,
+  size42,
+  size200,
+  size160
+) from '../../styles/variables/_size.css';
+@value (
+  spaceSmall,
+  spaceMedium
+) from '../../styles/variables/_space.css';
+
+.wrapper {
+  display: flex;
+  flex-flow: column;
+  width: sizeFluid;
+  gap: spaceSmall;
+}
+
+.inputActionWrapper {
+  display: flex;
+  width: sizeFluid;
+  gap: spaceSmall;
+}
+
+.styledPromptContainer {
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  background: colorBackgroundTertiary;
+  padding: spaceMedium;
+}
+
+.actionButton {
+  width: auto;
+  flex-shrink: 0;
+}
+
+.promptInputBox {
+  height: initial;
+  min-height: size42;
+}
+
+.textarea {
+  width: sizeFluid;
+  max-height: size200;
+}
+
+.secondaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.textCounter {
+  margin-left: auto;
+}

package/lib/components/PromptInput/index.js

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

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './PromptInput';

package/lib/components/RadioTile/RadioTile.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioTile = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Card = require("../Card");
+var _Chip = require("../Chip");
+var _Icon = require("../Icon");
+var _RadioButton = require("../RadioButton");
+var _Text = require("../Text");
+var _RadioTileModule = _interopRequireDefault(require("./RadioTile.module.css"));
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const RadioTile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    id,
+    semantic = _common.ALERT_SEMANTIC.neutral,
+    header,
+    description,
+    chipItems,
+    iconName,
+    iconSize = _Icon.ICON_SIZE.medium,
+    iconType = _Icon.ICON_TYPE.solid,
+    onTileClick,
+    isSelected = false,
+    ...props
+  } = _ref;
+  const handleTileClick = e => {
+    onTileClick && onTileClick(e, id);
+  };
+  return /*#__PURE__*/React.createElement(_Card.ClickableCard, _extends({}, props, {
+    ref: ref,
+    "data-testid": "RadioTile",
+    classNames: {
+      wrapper: (0, _classify.default)(_RadioTileModule.default.wrapper, classNames?.wrapper)
+    },
+    onClick: handleTileClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _RadioTileModule.default.iconContainer
+  }, !!iconName && /*#__PURE__*/React.createElement(_Icon.SemanticIcon, {
+    semantic: semantic,
+    name: iconName,
+    size: iconSize,
+    type: iconType
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _RadioTileModule.default.contentContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _RadioTileModule.default.textContainer
+  }, !!header && /*#__PURE__*/React.createElement(_Text.SubTitleMedium, null, header), !!description && /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    color: "secondary"
+  }, description)), !!chipItems?.length && /*#__PURE__*/React.createElement("div", {
+    className: _RadioTileModule.default.chipsContainer
+  }, chipItems.map((item, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement(_Chip.Chip, {
+    key: index,
+    semantic: "primary"
+  }, item)))), /*#__PURE__*/React.createElement("div", {
+    className: _RadioTileModule.default.btnContainer
+  }, /*#__PURE__*/React.createElement(_RadioButton.RadioButton, {
+    classNames: {
+      wrapper: _RadioTileModule.default.radioButtonWrapper
+    },
+    value: id,
+    selectedValue: isSelected ? id : '',
+    tabIndex: -1
+  })));
+});
+exports.RadioTile = RadioTile;

package/lib/components/RadioTile/RadioTile.js.flow

@@ -0,0 +1,110 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {AlertSemanticType} from '../../types/common';
+import {ALERT_SEMANTIC} from '../../types/common';
+import classify from '../../utils/classify';
+import {ClickableCard} from '../Card';
+import {Chip} from '../Chip';
+import type {IconSize, IconType} from '../Icon';
+import {ICON_SIZE, ICON_TYPE, SemanticIcon} from '../Icon';
+import {RadioButton} from '../RadioButton';
+import {BodyMedium, SubTitleMedium} from '../Text';
+
+import css from './RadioTile.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+}>;
+
+export type RadioTileProps = {
+  id: string,
+  classNames?: ClassNames,
+  semantic?: AlertSemanticType,
+  header?: string,
+  description?: string,
+  chipItems?: Array<string>,
+  onTileClick?: (e: SyntheticEvent<HTMLElement>, id: string) => void,
+  iconName?: string,
+  iconSize?: IconSize,
+  iconType?: IconType,
+  isSelected?: boolean,
+};
+
+export const RadioTile: React$AbstractComponent<
+  RadioTileProps,
+  HTMLDivElement,
+> = React.forwardRef<RadioTileProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      id,
+      semantic = ALERT_SEMANTIC.neutral,
+      header,
+      description,
+      chipItems,
+      iconName,
+      iconSize = ICON_SIZE.medium,
+      iconType = ICON_TYPE.solid,
+      onTileClick,
+      isSelected = false,
+      ...props
+    }: RadioTileProps,
+    ref,
+  ) => {
+    const handleTileClick = (e: SyntheticEvent<HTMLElement>) => {
+      onTileClick && onTileClick(e, id);
+    };
+
+    return (
+      <ClickableCard
+        {...props}
+        ref={ref}
+        data-testid="RadioTile"
+        classNames={{
+          wrapper: classify(css.wrapper, classNames?.wrapper),
+        }}
+        onClick={handleTileClick}
+      >
+        <div className={css.iconContainer}>
+          {!!iconName && (
+            <SemanticIcon
+              semantic={semantic}
+              name={iconName}
+              size={iconSize}
+              type={iconType}
+            />
+          )}
+        </div>
+        <div className={css.contentContainer}>
+          <div className={css.textContainer}>
+            {!!header && <SubTitleMedium>{header}</SubTitleMedium>}
+            {!!description && (
+              <BodyMedium color="secondary">{description}</BodyMedium>
+            )}
+          </div>
+          {!!chipItems?.length && (
+            <div className={css.chipsContainer}>
+              {chipItems.map((item, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <Chip key={index} semantic="primary">
+                  {item}
+                </Chip>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className={css.btnContainer}>
+          <RadioButton
+            classNames={{wrapper: css.radioButtonWrapper}}
+            value={id}
+            selectedValue={isSelected ? id : ''}
+            tabIndex={-1}
+          />
+        </div>
+      </ClickableCard>
+    );
+  },
+);

package/lib/components/RadioTile/RadioTile.module.css

@@ -0,0 +1,41 @@
+@value (spaceXXSmall, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (size252, size26) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  min-width: size252;
+  height: fit-content;
+  gap: spaceSmall;
+}
+
+.btnContainer {
+  align-self: center;
+  margin-left: auto;
+}
+
+.radioButtonWrapper {
+  padding-left: size26;
+}
+
+.iconContainer {
+  align-self: flex-start;
+}
+
+.chipsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: spaceXSmall;
+  margin-top: auto;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spaceSmall;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXXSmall;
+}

package/lib/components/RadioTile/index.js

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

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './RadioTile';

package/lib/components/Separator/Separator.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Separator = exports.ORIENTATION = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _SeparatorModule = _interopRequireDefault(require("./Separator.module.css"));
+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 ORIENTATION = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+});
+exports.ORIENTATION = ORIENTATION;
+const Separator = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    orientation = ORIENTATION.vertical,
+    width,
+    height
+  } = _ref;
+  // Dynamically compute width and height based on orientation if not provided
+  const resolvedWidth = width || (orientation === ORIENTATION.vertical ? _size.size2 : 'auto');
+  const resolvedHeight = height || (orientation === ORIENTATION.horizontal ? _size.size2 : 'auto');
+  const style = {
+    '--separator-width': resolvedWidth,
+    '--separator-height': resolvedHeight
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Separator",
+    style: style,
+    className: (0, _classify.default)(_SeparatorModule.default.wrapper, classNames?.wrapper)
+  });
+});
+exports.Separator = Separator;

package/lib/components/Separator/Separator.js.flow

@@ -0,0 +1,60 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {size2} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+
+import css from './Separator.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const ORIENTATION = Object.freeze({
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+});
+
+export type OrientationType = $Values<typeof ORIENTATION>;
+
+export type SeparatorProps = {
+  classNames?: ClassNames,
+  orientation?: OrientationType,
+  width?: string,
+  height?: string,
+};
+
+export const Separator: React$AbstractComponent<
+  SeparatorProps,
+  HTMLDivElement,
+> = React.forwardRef<SeparatorProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      orientation = ORIENTATION.vertical,
+      width,
+      height,
+    }: SeparatorProps,
+    ref,
+  ) => {
+    // Dynamically compute width and height based on orientation if not provided
+    const resolvedWidth =
+      width || (orientation === ORIENTATION.vertical ? size2 : 'auto');
+    const resolvedHeight =
+      height || (orientation === ORIENTATION.horizontal ? size2 : 'auto');
+
+    const style = {
+      '--separator-width': resolvedWidth,
+      '--separator-height': resolvedHeight,
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Separator"
+        style={style}
+        className={classify(css.wrapper, classNames?.wrapper)}
+      />
+    );
+  },
+);

package/lib/components/Separator/Separator.module.css

@@ -0,0 +1,10 @@
+@value (colorBorderSecondary) from '../../styles/variables/_color.css';
+@value (borderRadiusSmall) from '../../styles/variables/_border.css';
+
+.wrapper {
+  display: flex;
+  background-color: colorBorderSecondary;
+  width: var(--separator-width);
+  height: var(--separator-height);
+  border-radius: borderRadiusSmall;
+}

package/lib/components/Separator/index.js

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

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Separator';