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

package/lib/components/ChatBubble/ChatBubble.stories.tsx

@@ -1,277 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {Separator} from '../Separator';
-import {BodyMedium, SubTitleSmall} from '../Text';
-
-import type {ChatBubbleProps} from './';
-import {
-  ChatAnchor,
-  ChatBody,
-  ChatBubble,
-  ChatContent,
-  ChatFooter,
-  ChatFooterLeftSlot,
-  ChatFooterRightSlot,
-} from './ChatBubble';
-import {CHAT_BUBBLE_ORIENTATION} from './ChatBubble';
-
-import css from './ChatBubble.stories.module.css';
-
-
-export const ChatFooterWithIcons = () => (<ChatFooter>
-  <ChatFooterLeftSlot classNames={{wrapper: css.footerWrapperLeftSlot}}>
-    <Button iconRightName="flag" size="small" type="ghost" ariaLabel="Flag" />
-    <Separator classNames={{wrapper: css.separatorMargin}} />
-    <div className={css.buttonWrapper}>
-      <Button
-        iconRightName="thumbs-up"
-        size="small"
-        type="ghost"
-        ariaLabel="Thumbs Up"
-      />
-      <Button
-        iconRightName="thumbs-down"
-        size="small"
-        type="ghost"
-        ariaLabel="Thumbs Down"
-      />
-    </div>
-  </ChatFooterLeftSlot>
-  <ChatFooterRightSlot classNames={{wrapper: css.footerWrapperRightSlot}}>
-    <Button children="Secondary" type="ghost" size="small" />
-    <Button children="Primary" type="secondary" size="small" />
-  </ChatFooterRightSlot>
-</ChatFooter>);
-
-export default {
-  tags: ['autodocs'],
-  title: 'AI Prompt Components/Chat Bubble',
-  component: ChatBubble,
-  argTypes: {
-    orientation: {
-      description: 'Determines the alignment of the chat bubble.',
-      control: {type: 'radio'},
-      options: [CHAT_BUBBLE_ORIENTATION.left, CHAT_BUBBLE_ORIENTATION.right],
-      table: {
-        type: {
-          summary: `${CHAT_BUBBLE_ORIENTATION.left} | ${CHAT_BUBBLE_ORIENTATION.right}`,
-        },
-        defaultValue: {summary: `${CHAT_BUBBLE_ORIENTATION.left}`},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper.',
-      control: {type: 'text'},
-      table: {
-        type: {summary: '{ wrapper?: string }'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a ChatBubble component.',
-      description: {
-        component: `
-\`\`\`js
-import { ChatBubble } from "@spaced-out/ui-design-system/lib/components/ChatBubble";
-\`\`\`
-The ChatBubble component is used to structure chat messages with anchors, content, and a footer.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/ChatBubble/ChatBubble.jsx',
-    },
-  },
-};
-
-// Default ChatBubble Story
-export const _Default = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatAnchor />
-  <ChatContent>
-    <ChatBody>
-      <BodyMedium>
-        Generative AI (GenAI) enables systems to generate human-like
-        responses, content, or ideas dynamically, leveraging advanced machine
-        learning models. In conversational applications, GenAI enhances user
-        experiences by enabling intelligent, context-aware, and natural
-        language interactions.
-      </BodyMedium>
-    </ChatBody>
-    <ChatFooterWithIcons />
-  </ChatContent>
-</ChatBubble>);
-
-_Default.storyName = 'Default Chat Bubble';
-_Default.args = {
-  orientation: 'left',
-};
-
-// ChatBubble with Custom User Message
-export const _WithUserMessage = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatAnchor
-    isAI={false}
-    avatarProps={{
-      imageSrc:
-        'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
-      text: 'Adam Craig Gilchrist',
-    }}
-  />
-  <ChatContent>
-    <ChatBody withBgColor={false}>
-      <BodyMedium>This message has a custom avatar.</BodyMedium>
-    </ChatBody>
-  </ChatContent>
-</ChatBubble>);
-
-_WithUserMessage.storyName = 'Chat Bubble With Custom User';
-_WithUserMessage.args = {
-  orientation: 'left',
-};
-
-// ChatBubble with No Anchor
-export const _NoAnchor = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatContent>
-    <ChatBody>
-      <BodyMedium>
-        Generative AI (GenAI) enables systems to generate human-like
-        responses, content, or ideas dynamically, leveraging advanced machine
-        learning models. In conversational applications, GenAI enhances user
-        experiences by enabling intelligent, context-aware, and natural
-        language interactions.
-      </BodyMedium>
-    </ChatBody>
-    <ChatFooterWithIcons />
-  </ChatContent>
-</ChatBubble>);
-
-_NoAnchor.storyName = 'Chat Bubble Without Anchor';
-
-// ChatBubble with Custom Avatar
-export const _WithAvatar = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatAnchor
-    isAI={false}
-    avatarProps={{
-      imageSrc:
-        'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
-      text: 'Adam Craig Gilchrist',
-    }}
-  />
-  <ChatContent>
-    <ChatBody>
-      <BodyMedium>This message has a custom avatar.</BodyMedium>
-    </ChatBody>
-    <ChatFooterWithIcons />
-  </ChatContent>
-</ChatBubble>);
-
-_WithAvatar.storyName = 'Chat Bubble With Avatar';
-_WithAvatar.args = {
-  orientation: 'left',
-};
-
-// Loading State in ChatBubble
-export const _LoadingState = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatAnchor />
-  <ChatContent>
-    <ChatBody isLoading loadingText="Loading message" />
-  </ChatContent>
-</ChatBubble>);
-
-_LoadingState.storyName = 'Chat Bubble Loading State';
-_LoadingState.args = {
-  orientation: 'left',
-};
-
-// Data State in ChatBubble
-export const _DataState = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatAnchor />
-  <ChatContent>
-    <ChatBody>
-      <SubTitleSmall>Title</SubTitleSmall>
-      <BodyMedium>
-        Generative AI (GenAI) enables systems to generate human-like
-        responses, content, or ideas dynamically, leveraging advanced machine
-        learning models. In conversational applications, GenAI enhances user
-        experiences by enabling intelligent, context-aware, and natural
-        language interactions.
-      </BodyMedium>
-    </ChatBody>
-    <ChatFooterWithIcons />
-  </ChatContent>
-</ChatBubble>);
-
-_DataState.storyName = 'Chat Bubble With Data';
-_DataState.args = {
-  orientation: 'left',
-};
-
-// EMpty Slot in ChatBubble
-export const _EmptySlot = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatContent classNames={{wrapper: css.emptyChatContent}}>
-    <ChatBody classNames={{wrapper: css.emptyBodyChat}}>
-      <BodyMedium></BodyMedium>
-    </ChatBody>
-    <ChatFooterWithIcons />
-  </ChatContent>
-</ChatBubble>);
-
-_EmptySlot.storyName = 'Chat Bubble With Empty Slot';
-_EmptySlot.args = {
-  orientation: 'left',
-};
-
-export const _WithLongTextSlot = (args: ChatBubbleProps) => (<ChatBubble {...args}>
-  <ChatContent>
-    <ChatBody classNames={{wrapper: css.longChatContent}}>
-      <BodyMedium>
-        Generative AI (GenAI) represents a transform leap in the field of
-        artificial intelligence, enabling systems to generate human-like
-        responses, content, or ideas dynamically. This cutting-edge technology
-        leverages advanced machine learning models, including neural networks
-        like GPT (Generative Pre-trained Transformer) and other sophisticated
-        algorithms, to create coherent, contextually appropriate, and natural
-        outputs. The capability of GenAI to mimic human creativity and
-        language is not merely theoretical—it is actively reshaping
-        industries, enhancing user experiences, and revolutionizing the way
-        humans and machines interact. At its core, Generative AI operates by
-        understanding and analyzing massive datasets to learn patterns,
-        structures, and nuances of language or other types of input. Unlike
-        traditional AI systems, which are designed to follow predefined rules
-        or produce outputs based on specific programming, GenAI systems adapt
-        dynamically. They can respond to queries, generate creative content,
-        and simulate human-like understanding without requiring explicit
-        instructions for every scenario. This makes GenAI an invaluable tool
-        in applications ranging from conversational interfaces to content
-        creation, personalized recommendations, and beyond. In conversational
-        applications, Generative AI has emerged as a cornerstone of
-        intelligent, context-aware interactions. Whether it’s powering
-        chatbot, virtual assistants, or customer support agents, GenAI ensures
-        that users experience seamless and natural communication. For example,
-        when users engage with a customer service chatbot, a GenAI system
-        doesn’t simply respond with pre-written scripts. Instead, it
-        understands the user’s query, interprets the context, and crafts
-        responses that feel human and empathetic. This not only improves the
-        efficiency of the interaction but also leaves users feeling heard and
-        understood. The transform impact of GenAI extends far beyond customer
-        service. In education, for instance, GenAI is being used to create
-        adaptive learning environments. These systems can generate
-        personalized lesson plans, answer complex questions, and provide
-        feedback to students in real time, catering to individual learning
-        styles and needs. Similarly, in healthcare, GenAI powers virtual
-        health assistants that can triage symptoms, provide medical
-        information, and even remind patients to take their medications. These
-        applications demonstrate how GenAI is not only enhancing efficiency
-        but also contributing to better outcomes in critical fields.
-      </BodyMedium>
-    </ChatBody>
-    <ChatFooterWithIcons />
-  </ChatContent>
-</ChatBubble>);
-
-_WithLongTextSlot.storyName = 'Chat Bubble With Long Text';
-_WithLongTextSlot.args = {
-  orientation: 'left',
-};

package/lib/components/ChatBubble/ChatBubble.tsx

@@ -1,232 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import type {AvatarProps} from '../Avatar';
-import {Avatar} from '../Avatar';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
-import type {BaseTooltipProps} from '../Tooltip';
-import {Tooltip} from '../Tooltip';
-
-import css from './ChatBubble.module.css';
-
-
-const getNamedComponent = (childrenArray: Array<React.ReactNode>, componentDisplayName: string): React.ReactNode | null | undefined | React.ReactNode[] => {
-  const nodes: React.ReactNode[] = [];
-  for (const child of childrenArray) {
-    if (
-// @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-      child?.type?.displayName === componentDisplayName
-    ) {
-      nodes.push(child);
-    }
-  }
-  return nodes.length > 1 ? nodes : nodes[0] || null;
-};
-
-export type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export const CHAT_BUBBLE_ORIENTATION = Object.freeze({
-  left: 'left',
-  right: 'right ',
-});
-
-export type ChatBubbleOrientation = typeof CHAT_BUBBLE_ORIENTATION[keyof typeof CHAT_BUBBLE_ORIENTATION];
-
-export type ChatBubbleProps = {
-  classNames?: ClassNames;
-  orientation?: ChatBubbleOrientation;
-  children: React.ReactNode;
-};
-
-export const ChatBubble: Flow.AbstractComponent<ChatBubbleProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ChatBubbleProps>(({
-  classNames,
-  orientation = 'left',
-  children,
-}: ChatBubbleProps, ref) => {
-  const isLeftAligned = orientation === 'left';
-
-  const childrenArray: React.ReactNode[] = React.Children.toArray(children);
-
-  const anchorComponent = getNamedComponent(childrenArray, 'ChatAnchor');
-  const chatComponent = getNamedComponent(childrenArray, 'ChatContent');
-
-  return (
-    <div
-      ref={ref}
-      data-testid="ChatBubble"
-      className={classify(
-        css.chatBubbleWrapper,
-        {
-          [css.chatBubbleWrapperRight]: !isLeftAligned,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {anchorComponent}
-      {chatComponent}
-    </div>
-  );
-});
-
-export type ChatAnchorProps = {
-  isAI?: boolean;
-  tooltip?: BaseTooltipProps;
-  classNames?: ClassNames;
-  avatarProps?: AvatarProps;
-};
-
-export const ChatAnchor = (
-  {
-    isAI = true,
-    tooltip,
-    classNames,
-    avatarProps,
-  }: ChatAnchorProps,
-) => (<div
-  data-testid="ChatAnchor"
-  className={classify(css.chatAnchorWrapper, classNames?.wrapper)}
->
-  <Tooltip {...tooltip} hidden={!tooltip}>
-    {isAI ? (
-// @ts-ignore - TS2769 - No overload matches this call.
-      <Icon
-        name="sparkle"
-        color="information"
-        type={ICON_TYPE.solid}
-        size={ICON_SIZE.large}
-      />
-    ) : (
-      <Avatar {...avatarProps} />
-    )}
-  </Tooltip>
-</div>);
-
-ChatAnchor.displayName = 'ChatAnchor';
-
-export type ChatContentProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-};
-
-export const ChatContent = (
-  {
-    classNames,
-    children,
-  }: ChatContentProps,
-) => (<div
-  data-testid="ChatContent"
-  className={classify(css.chatContentWrapper, classNames?.wrapper)}
->
-  {children}
-</div>);
-
-ChatContent.displayName = 'ChatContent';
-
-export type ChatBodyClassNames = Readonly<{
-  wrapper?: string;
-  loader: string;
-}>;
-
-export type ChatBodyProps = {
-  withBgColor?: boolean;
-  isLoading?: boolean;
-  loadingText?: string;
-  children?: React.ReactNode;
-  classNames?: ClassNames;
-};
-
-export const ChatBody = (
-  {
-    withBgColor = true,
-    isLoading,
-    children,
-    loadingText = 'Generating',
-    classNames,
-  }: ChatBodyProps,
-) => (<div
-  data-testid="ChatBody"
-  className={classify(
-    css.chatBodyWrapper,
-    {
-      [css.chatBodyWrapperLoading]: isLoading || !withBgColor,
-      [css.chatBodyWrapperBgColor]: withBgColor,
-    },
-    classNames?.wrapper,
-  )}
->
-  {isLoading ? (
-    <div className={classify(css.loadingContainer, classNames?.wrapper)}>
-      <span className={css.loadingText}>{loadingText}</span>
-      <span className={css.loader}>
-        <span className={css.dot} />
-        <span className={css.dot} />
-        <span className={css.dot} />
-      </span>
-    </div>
-  ) : (
-    children
-  )}
-</div>);
-
-ChatBody.displayName = 'ChatBody';
-
-export type ChatFooterProps = {
-  classNames?: ClassNames;
-  children?: React.ReactNode;
-};
-
-export const ChatFooter = (
-  {
-    children,
-    classNames,
-  }: ChatFooterProps,
-) => {
-  const childrenArray: React.ReactNode[] = React.Children.toArray(children);
-
-  const leftSlot = getNamedComponent(childrenArray, 'ChatFooterLeftSlot');
-  const rightSlot = getNamedComponent(childrenArray, 'ChatFooterRightSlot');
-
-  return (
-    <div
-      data-testid="ChatFooter"
-      className={classify(css.chatFooterWrapper, classNames?.wrapper)}
-    >
-      {leftSlot}
-      {rightSlot}
-    </div>
-  );
-};
-
-ChatFooter.displayName = 'ChatFooter';
-
-export type ChatFooterRightSlotProps = {
-  children?: React.ReactNode;
-  classNames?: ClassNames;
-};
-
-export const ChatFooterRightSlot = (
-  {
-    children,
-    classNames,
-  }: ChatFooterRightSlotProps,
-) => (<div className={classNames?.wrapper}>{children}</div>);
-
-ChatFooterRightSlot.displayName = 'ChatFooterRightSlot';
-
-export type ChatFooterLeftSlotProps = {
-  children?: React.ReactNode;
-  classNames?: ClassNames;
-};
-
-export const ChatFooterLeftSlot = (
-  {
-    children,
-    classNames,
-  }: ChatFooterLeftSlotProps,
-) => (<div className={classNames?.wrapper}>{children}</div>);
-
-ChatFooterLeftSlot.displayName = 'ChatFooterLeftSlot';

package/lib/components/ChatBubble/index.ts

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

package/lib/components/Checkbox/Checkbox.stories.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-
-import type {CheckboxProps} from './Checkbox';
-import {Checkbox} from './Checkbox';
-
-import css from './Checkbox.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    name: {
-      description: 'Specify the name of the underlying `input` node',
-    },
-    value: {
-      description:
-        'The value to be used in the checkbox input. This is the value that will be returned on form submission',
-      name: 'value',
-      table: {
-        type: {summary: 'string'},
-      },
-      control: {
-        disable: true,
-      },
-    },
-    // controlled checked prop
-    checked: {
-      description: 'Checked state of native checkbox',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    tabIndex: {
-      description: 'Tab index applied to input',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 0},
-      },
-    },
-    indeterminate: {
-      name: 'indeterminate',
-      description:
-        'Setting indeterminate state takes visual precedence over checked props given but does not affect checked state',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    disabled: {
-      name: 'disabled',
-      description: `Disabled checkbox. When true, User can not interact with the the checkbox. But, you can pass checked as true or false
-        to show it as checked or unchecked`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    focused: {
-      name: 'focused',
-      description: `When passed true the checkbox will be focused to start with.`,
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    error: {
-      name: 'error',
-      description:
-        'Error state, when you need to show individual Checkbox 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, checkboxSquare?: string, label?: string}',
-        },
-      },
-    },
-    children: {
-      description: 'Pass label as children',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    onChange: {
-      description:
-        '**onChange** handler that is applied to the input type=checkbox element',
-      action: 'selected',
-      type: {
-        summary:
-          '({value: string, checked: boolean}, ?SyntheticEvent<HTMLElement>) => 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 Checkbox component',
-      description: {
-        component: `
-\`\`\`js
-import { Checkbox } from "@spaced-out/ui-design-system/lib/components/Checkbox";
-\`\`\`
-Checkbox component is used in forms when a user needs to select multiple values from several options.<br>
-Checkbox component has been implemented using <code>< input type="checkbox" >  <input type="checkbox" > </code>
-It is a controlled component, meaning that, you need to pass the value of checked as true/false to show it as checked or unchecked.
-You will pass a callback function in onChange prop, if checkbox is clicked this function will be called and you will receive a object
-{value, checked} the value will be same as the value passed to the value prop of checkbox and the boolean checked will give you new
-checked state of the checkbox.
-
-In most of the use cases you will use Checkbox with CheckboxGroup.
-Refer the <a href="../?path=/docs/form-components-checkbox-group--docs">CheckboxGroup</a> documentation for details.
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Checkbox/Checkbox.jsx',
-    },
-  },
-};
-
-export const _Checkbox = (args: CheckboxProps) => {
-  const [selected, setSelected] = React.useState(args.checked);
-  const onChangeHandler = (
-// @ts-ignore - TS7031 - Binding element 'value' implicitly has an 'any' type. | TS7031 - Binding element 'checked' implicitly has an 'any' type.
-    {value, checked},
-    event: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ): void => {
-    args.onChange && args.onChange({value, checked}, event);
-
-    setSelected(checked);
-  };
-  return (
-    <div className={css.storyContainer}>
-      <Checkbox {...args} onChange={onChangeHandler} checked={selected} />
-    </div>
-  );
-};
-
-_Checkbox.args = {
-  name: 'sample-checkbox',
-  disabled: false,
-  focused: false,
-  children: 'The Checkbox Label',
-  checked: false,
-  error: false,
-  indeterminate: false,
-  value: 'sample-value',
-};