@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -0,0 +1,194 @@
+// @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'; // Reset height to auto to shrink
+        if (textarea.scrollHeight > parseInt(size200)) {
+          textarea.style.height = size200; // Limit height to size200
+          textarea.style.overflowY = 'auto';
+        } else {
+          textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
+          textarea.style.overflowY = 'hidden';
+        }
+      }
+    };
+
+    // Reset height on value change
+    React.useEffect(() => {
+      handleInput();
+    }, [value]);
+
+    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}
+            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/index.js.flow

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

package/lib/components/RadioButton/RadioButton.js

@@ -34,7 +34,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/React.forwardRef((_ref, f
     ...props
   } = _ref;
   const radioInput = /*#__PURE__*/React.createRef();
-  // @ts-ignore - TS2322 - Type 'HTMLInputElement | null' is not assignable to type 'HTMLInputElement'.
   React.useImperativeHandle(forwardRef, () => radioInput.current);
   const checked = selectedValue === value;
   React.useEffect(() => {

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

@@ -0,0 +1,134 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {GroupAlign} from '../../types/common';
+import classify from '../../utils/classify';
+
+import css from './RadioButton.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, label?: string, radio?: string}>;
+
+export type RadioButtonProps = {
+  children?: React.Node,
+  value?: string,
+  disabled?: boolean,
+  focused?: boolean,
+  name?: string,
+  selectedValue?: string,
+  align?: GroupAlign,
+  classNames?: ClassNames,
+  error?: boolean,
+  onChange?: (newValue: string) => mixed,
+  tabIndex?: number,
+  ariaLabel?: string,
+};
+
+export const RadioButton: React$AbstractComponent<
+  RadioButtonProps,
+  HTMLInputElement,
+> = React.forwardRef<RadioButtonProps, HTMLInputElement>(
+  (
+    {
+      children,
+      disabled = false,
+      value = '',
+      focused = false,
+      name = 'radio',
+      selectedValue,
+      onChange,
+      align = 'vertical',
+      classNames,
+      error = false,
+      tabIndex = 0,
+      ariaLabel = '',
+      ...props
+    }: RadioButtonProps,
+    forwardRef,
+  ): React.Node => {
+    const radioInput = React.createRef<HTMLInputElement>();
+    React.useImperativeHandle(forwardRef, () => radioInput.current);
+
+    const checked = selectedValue === value;
+
+    React.useEffect(() => {
+      if (radioInput.current && focused) {
+        radioInput.current.focus();
+      }
+    }, [focused]);
+
+    const onWrapClickHandler = () => {
+      radioInput.current?.click();
+    };
+
+    const onChangeHandler = (e) => {
+      if (!disabled) {
+        onChange && onChange(e?.target?.value);
+      }
+    };
+
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler(e);
+      }
+    };
+
+    return (
+      <div
+        className={classify(
+          css.container,
+          {
+            [css.horizontalRadioButton]: align === 'horizontal-fixed',
+            [css.fluidRadioButton]: align === 'horizontal-fluid',
+            [css.containerDisabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+        onClick={onWrapClickHandler}
+      >
+        <input
+          type="radio"
+          checked={checked}
+          disabled={disabled}
+          className={classify(
+            css.radio,
+            {
+              [css.unselected]: !checked && !disabled && !error,
+              [css.selected]: checked && !disabled && !error,
+              [css.disabled]: disabled,
+              [css.error]: error && !disabled,
+            },
+            classNames?.radio,
+          )}
+          ref={radioInput}
+          onChange={onChangeHandler}
+          onKeyDown={onKeyDownHandler}
+          tabIndex={disabled ? -1 : tabIndex}
+          name={name}
+          value={value || ''}
+          aria-label={ariaLabel || children}
+          {...props}
+        />
+        {React.Children.count(children) > 0 && (
+          <div
+            color="secondary"
+            className={classify(
+              css.radioLabel,
+              {[css.labelDisabled]: disabled},
+              classNames?.label,
+            )}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/lib/components/RadioButton/RadioGroup.js

@@ -16,7 +16,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * internal label tag to handle click delegation to the hidden input, and
  * nesting labels is a bad idea.
  */
-
 const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     align = 'vertical',
@@ -36,7 +35,6 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef((_ref, for
   const childrenWithProps = React.Children.map(children, child => {
     if (/*#__PURE__*/React.isValidElement(child)) {
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-ignore - TS2769 - No overload matches this call.
         name,
         selectedValue: value,
         onChange: onChangeHandler,

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

@@ -0,0 +1,94 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {GroupAlign} from '../../types/common';
+import classify from '../../utils/classify';
+import {BodySmall} from '../Text/Text';
+
+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: React$AbstractComponent<
+  RadioGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<RadioGroupProps, HTMLDivElement>(
+  (
+    {
+      align = 'vertical',
+      name,
+      value,
+      onChange,
+      children,
+      classNames,
+      error = false,
+      errorText = '',
+    }: RadioGroupProps,
+    forwardRef,
+  ): 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,
+          )}
+          ref={forwardRef}
+        >
+          {childrenWithProps}
+        </div>
+        {error && (
+          <BodySmall color="danger" className={classNames?.errorText}>
+            {errorText}
+          </BodySmall>
+        )}
+      </div>
+    );
+  },
+);

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

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

package/lib/components/RadioTile/RadioTile.js

@@ -25,9 +25,7 @@ const RadioTile = exports.RadioTile = /*#__PURE__*/React.forwardRef((_ref, ref)
     description,
     chipItems,
     iconName,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "large" | "medium"'.
     iconSize = _Icon.ICON_SIZE.medium,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
     iconType = _Icon.ICON_TYPE.solid,
     onTileClick,
     isSelected = false,

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/index.js.flow

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

package/lib/components/RangeSlider/RangeSlider.js

@@ -25,10 +25,8 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
     onChange,
     showTicks,
     iconLeftName = 'minus',
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "medium"'.
     btnLeftSize = _Button.BUTTON_SIZE.small,
     iconRightName = 'plus',
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "medium"'.
     btnRightSize = _Button.BUTTON_SIZE.small,
     hideLeftBtn,
     hideRightBtn,
@@ -59,7 +57,6 @@ const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, r
     emitRoundedValue(e.currentTarget.value);
   };
   const emitRoundedValue = value => {
-    // @ts-ignore - TS2345 - Argument of type 'string | number' is not assignable to parameter of type 'string'.
     const newValue = parseFloat(value);
     const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
     onChange?.(roundedValue);