@spaced-out/ui-design-system 0.3.38 → 0.3.39-beta.0

package/lib/components/PromptInput/PromptInput.d.ts

@@ -0,0 +1,189 @@
+import {$ReadOnly} from 'utility-types';
+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: React.SyntheticEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => unknown;
+  onInputFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onInputBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  inputName?: string;
+  inputDisabled?: boolean;
+  inputPlaceholder?: string;
+  inputLocked?: boolean;
+  inputError?: boolean;
+  inputErrorText?: string;
+  // Common props
+  helperContent?: React.ReactNode;
+  textCountLimit?: number;
+  classNames?: ClassNames;
+  withPadding?: boolean;
+  // Button Props
+  buttonText?: string;
+  buttonDisabled?: boolean;
+  onButtonClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  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.d.ts

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

package/lib/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,132 @@
+import {$ReadOnly} from 'utility-types';
+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.ReactNode;
+  value?: string;
+  disabled?: boolean;
+  focused?: boolean;
+  name?: string;
+  selectedValue?: string;
+  align?: GroupAlign;
+  classNames?: ClassNames;
+  error?: boolean;
+  onChange?: (newValue: string) => unknown;
+  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.ReactNode => {
+    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.d.ts

@@ -0,0 +1,88 @@
+import {$ReadOnly} from 'utility-types';
+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) => unknown;
+  children?: React.ReactNode;
+  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.ReactNode => {
+    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.d.ts

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

package/lib/components/RadioTile/RadioTile.d.ts

@@ -0,0 +1,109 @@
+import {$ReadOnly} from 'utility-types';
+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: React.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: React.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.d.ts

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