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

package/lib/components/PromptInput/PromptInput.stories.tsx

@@ -1,349 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {Icon, ICON_SIZE} from '../Icon';
-import {BodySmallBold} from '../Text';
-import {Tooltip} from '../Tooltip';
-
-import type {PromptInputProps} from './PromptInput';
-import {PromptInput} from './PromptInput';
-
-import css from './PromptInput.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'AI Prompt Components/Prompt Input',
-  component: PromptInput,
-  argTypes: {
-    value: {
-      description: 'The current value of the text area.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onInputChange: {
-      description: 'Handler for input change event.',
-      action: 'onInputChange',
-      table: {
-        type: {
-          summary:
-            '(evt: SyntheticInputEvent<HTMLInputElement>, isEnter?: boolean) => mixed',
-        },
-      },
-    },
-    onInputFocus: {
-      description: 'Handler for input focus event.',
-      action: 'onInputFocus',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onInputBlur: {
-      description: 'Handler for input blur event.',
-      action: 'onInputBlur',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onInputKeyDown: {
-      description: 'Handler for key down event.',
-      action: 'onInputKeyDown',
-      table: {
-        type: {
-          summary: '(e: SyntheticKeyboardEvent<HTMLInputElement>) => mixed',
-        },
-      },
-    },
-    inputName: {
-      description: 'Name attribute for the input element.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'prompt-textarea'},
-      },
-    },
-    inputDisabled: {
-      description: 'Disables the input field.',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    inputPlaceholder: {
-      description: 'Placeholder text for the input.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'Ask me anything'},
-      },
-    },
-    inputLocked: {
-      description: 'Locks the input field.',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    inputError: {
-      description: 'Sets error state for the input.',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    inputErrorText: {
-      description: 'Error message displayed below the input.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    helperContent: {
-      description: 'Content displayed as helper text below the input.',
-      control: 'object',
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    textCountLimit: {
-      description: 'Character limit for the input field.',
-      control: 'number',
-      table: {
-        type: {summary: 'number'},
-      },
-    },
-    withPadding: {
-      description: 'Adds internal padding around the component.',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: true},
-      },
-    },
-    classNames: {
-      description: 'Optional class names for various parts of the component.',
-      control: 'object',
-    },
-    buttonText: {
-      description: 'Text displayed on the button.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'Generate'},
-      },
-    },
-    buttonDisabled: {
-      description: 'Disables the button.',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    onButtonClick: {
-      description: 'Handler for button click event.',
-      action: 'onButtonClick',
-      table: {
-        type: {summary: '(e: SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    buttonAriaLabel: {
-      description: 'Aria label for the button.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'Prompt Button'},
-      },
-    },
-    isButtonLoading: {
-      description: 'Displays a loading state for the button.',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    buttonIconLeftName: {
-      description: 'Name of the left icon on the button.',
-      control: 'text',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'sparkles'},
-      },
-    },
-    buttonIconLeftType: {
-      description: 'Type of the left icon (e.g., solid, outline).',
-      control: 'text',
-      table: {
-        type: {summary: 'IconType'},
-        defaultValue: {summary: 'solid'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'A flexible and accessible input field with button integration, helper text, and character count.',
-      description: {
-        component: `
-\`\`\`js
-import { PromptInput } from "@spaced-out/ui-design-system/lib/components/PromptInput";
-\`\`\`
-
-**PromptInput** is a versatile input and action component designed for user prompts. It includes a textarea that dynamically grows in height and a customizable action button.
-
-### Features:
-
-1. **Auto-Growing Textarea**
-   - The input automatically resizes its height as the user types.
-   - It grows dynamically until a maximum height of **200px**.
-   - Once the content exceeds the 200px limit, an **internal scroll bar** appears within the textarea to ensure content remains accessible.
-
-2. **Character Count Enforcement**
-   - Supports a configurable **character limit**.
-   - If the text exceeds the limit, the component enters an error state, and an error message or helper text can be displayed.
-
-3. **Error State Handling**
-   - Highlights the input field with an error style when in an error state.
-   - Accepts an optional \`inputErrorText\` to display a custom error message.
-
-4. **Helper Content Display**
-   - Displays helper content below the input field.
-   - Supports both **plain text** and **React nodes** (e.g., tooltips, icons).
-
-5. **Customizable Action Button**
-   - A button is positioned adjacent to the input field for performing actions like "Submit" or "Generate".
-   - The button supports:
-     - Custom text (e.g., "Generate")
-     - Loading state with a spinner
-     - Left-aligned icons (e.g., "sparkles")
-     - Disabled state
-     - Accessible \`aria-label\`.
-
-6. **Padding and Layout**
-   - Optionally adds internal padding to the component for better spacing.
-   - Flexible \`classNames\` props allow overriding styles for various parts of the component.
-
-### Accessibility:
-- Fully supports keyboard navigation and screen readers.
-- The button includes an \`aria-label\` for accessibility.
-
-### Example Usage:
-
-\`\`\`jsx
-<PromptInput
-  value="Hello World"
-  onInputChange={(e) => console.log(e.target.value)}
-  inputPlaceholder="Ask me anything..."
-  helperContent={<span>Provide your query here</span>}
-/>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/PromptInput/PromptInput.jsx',
-    },
-  },
-};
-
-const TOOLTIP_HELPER_TEXT = 'Some Help Text goes here';
-
-const HelperText = (): React.ReactElement<React.ComponentProps<'div'>> => (<div className={css.helperContent}>
-  <BodySmallBold color={TEXT_COLORS.secondary}>Helper Text</BodySmallBold>
-  <Tooltip body={TOOLTIP_HELPER_TEXT}>
-    <Icon
-      name="info-circle"
-      color={TEXT_COLORS.secondary}
-// @ts-ignore - TS2769 - No overload matches this call.
-      size={ICON_SIZE.small}
-    />
-  </Tooltip>
-</div>);
-
-export const _Default = (args: PromptInputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.container}>
-      <PromptInput
-        {...args}
-        value={value}
-        onInputChange={(e) => setValue(e.target.value)}
-      />
-    </div>
-  );
-};
-
-export const _WithHelperText = (args: PromptInputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.container}>
-      <PromptInput
-        {...args}
-        value={value}
-        onInputChange={(e) => setValue(e.target.value)}
-        helperContent={<HelperText />}
-      />
-    </div>
-  );
-};
-
-export const _WithTextCounter = (args: PromptInputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.container}>
-      <PromptInput
-        {...args}
-        value={value}
-        onInputChange={(e) => setValue(e.target.value)}
-      />
-    </div>
-  );
-};
-
-_WithTextCounter.args = {
-  textCountLimit: 500,
-};
-
-export const _WithHelperTextAndTextCounter = (args: PromptInputProps) => {
-  const [value, setValue] = React.useState(args.value);
-
-  React.useEffect(() => {
-    setValue(args.value);
-  }, [args.value]);
-
-  return (
-    <div className={css.container}>
-      <PromptInput
-        {...args}
-        value={value}
-        onInputChange={(e) => setValue(e.target.value)}
-        helperContent={<HelperText />}
-      />
-    </div>
-  );
-};
-
-_WithHelperTextAndTextCounter.args = {
-  textCountLimit: 500,
-};

package/lib/components/PromptInput/PromptInput.tsx

@@ -1,190 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-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,
-} as const;
-
-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.ChangeEvent<HTMLInputElement>, isEnter?: boolean) => unknown;
-  onInputFocus?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
-  onInputBlur?: (e: React.ChangeEvent<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?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  buttonAriaLabel?: string;
-  isButtonLoading?: boolean;
-  buttonIconLeftName?: string;
-  buttonIconLeftType?: IconType;
-};
-
-export const PromptInput: Flow.AbstractComponent<PromptInputProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, PromptInputProps>((
-  {
-    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,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
-    buttonIconLeftType = ICON_TYPE.solid,
-  }: PromptInputProps,
-  ref,
-) => {
-  const textareaRef = React.useRef(null);
-
-  const handleInput = () => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-// @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
-      textarea.style.height = 'auto'; // Reset height to auto to shrink
-// @ts-ignore - TS2339 - Property 'scrollHeight' does not exist on type 'never'.
-      if (textarea.scrollHeight > parseInt(size200)) {
-// @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
-        textarea.style.height = size200; // Limit height to size200
-// @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
-        textarea.style.overflowY = 'auto';
-      } else {
-// @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'. | TS2339 - Property 'scrollHeight' does not exist on type 'never'.
-        textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
-// @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
-        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}
-// @ts-ignore - TS2769 - No overload matches this call.
-          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.ts

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

package/lib/components/RadioButton/RadioButton.stories.tsx

@@ -1,157 +0,0 @@
-import * as React from 'react';
-
-import type {RadioButtonProps} from './RadioButton';
-import {RadioButton} from './RadioButton';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Radio Button',
-  component: RadioButton,
-  argTypes: {
-    name: {
-      description: 'Specify the name of the underlying `input` node',
-    },
-    // controlled selectedValue prop
-    selectedValue: {
-      name: 'selectedValue',
-      description:
-        'selectedValue will be compared with value of this radio to show as checked or unchecked',
-      table: {
-        type: {summary: 'string'},
-      },
-      control: {
-        disable: true,
-      },
-    },
-    tabIndex: {
-      description: 'Tab index applied to input',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 0},
-      },
-    },
-    value: {
-      name: 'value',
-      description:
-        'Value of this radio input. It is compared with selected value, to determine whether the radio is selected',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    disabled: {
-      name: 'disabled',
-      description: `Disabled RadioButton. When true, User can not interact with the the RadioButton.`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    focused: {
-      description: `When passed true the RadioButton will be focused to start with.`,
-      name: 'focused',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    error: {
-      name: 'error',
-      description:
-        'Error state, when you need to show individual RadioButton in error state then use this prop',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, label?: string, radio?: string}'},
-      },
-    },
-    children: {
-      description: 'Pass label as children',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    onChange: {
-      description:
-        '**onChange** handler that is applied to the input type=radio element',
-      action: 'value selected',
-      type: {summary: '(string) => mixed'},
-    },
-    align: {
-      description: 'To be used internally for Checkbox Group,',
-    },
-    ariaLabel: {
-      description:
-        'Pass label as ariaLabel. It is mandatory parameter for accessibility in case children is not a simple string.',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Radio Button component',
-      description: {
-        component: `
-\`\`\`js
-import { RadioButton } from "@spaced-out/ui-design-system/lib/components/RadioButton";
-\`\`\`
-RadioButtons are used when only one choice may be selected in a series of options.
-RadioButtons component has been implemented using <code>< input type="radio" >  <input type="radio" > </code>
-It is a controlled component, meaning that, you need to pass the selectedValue, if selectedValue is same as value then radio button will shown as checked.
-You will pass a callback function in onChange prop, if radio is clicked this function will be called and you will receive
-the selectedValue which will the value prop of RadioButton.
-
-RadioButton has to be only used as children to RadioGroup.
-Refer the <a href="../?path=/docs/form-components-radio-group--docs">RadioGroup</a> documentation for details.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/RadioButton/RadioButton.jsx',
-    },
-  },
-};
-
-export const _RadioButton = (args: RadioButtonProps) => {
-  const [selectedValue, setSelectedValue] = React.useState(args.selectedValue);
-// @ts-ignore - TS7019 - Rest parameter 'params' implicitly has an 'any[]' type.
-  const onChangeHandler = (...params): void => {
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    args.onChange && args.onChange(...params);
-// @ts-ignore - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-    setSelectedValue(...params);
-  };
-  return (
-    <RadioButton
-      {...args}
-      onChange={onChangeHandler}
-      selectedValue={selectedValue}
-    />
-  );
-};
-
-_RadioButton.args = {
-  disabled: false,
-  focused: false,
-  children: 'Radio Button Label',
-  value: 'sample',
-  error: false,
-};