@envive-ai/react-toolkit-v3 0.3.5

package/src/components/WidgetTextField/__tests__/WidgetTextField.test.tsx

@@ -0,0 +1,331 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { WidgetTextField } from '../WidgetTextField';
+import { Theme } from '../../../../tokens/theme/theme';
+
+describe('WidgetTextField', () => {
+  describe('Basic rendering', () => {
+    it('should render with placeholder text', () => {
+      render(
+        <WidgetTextField
+          placeholder="Type your message..."
+          theme={Theme.STANDARD}
+        />,
+      );
+      expect(screen.getByText('Type your message...')).toBeInTheDocument();
+    });
+
+    it('should render icon', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should apply id attribute when provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          id="test-textfield-id"
+        />,
+      );
+      const element = container.querySelector('#test-textfield-id');
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should apply testId attribute when provided', () => {
+      render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          testId="test-textfield"
+        />,
+      );
+      expect(screen.getByTestId('test-textfield')).toBeInTheDocument();
+    });
+
+    it('should apply custom className when provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          className="custom-class"
+        />,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('custom-class');
+    });
+
+    it('should apply custom style when provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          style={{ marginTop: '20px' }}
+        />,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveStyle({ marginTop: '20px' });
+    });
+  });
+
+  describe('Placeholder', () => {
+    it('should display placeholder text', () => {
+      render(
+        <WidgetTextField
+          placeholder="Ask me anything..."
+          theme={Theme.STANDARD}
+        />,
+      );
+      expect(screen.getByText('Ask me anything...')).toBeInTheDocument();
+    });
+
+    it('should handle empty placeholder', () => {
+      render(
+        <WidgetTextField
+          placeholder=""
+          theme={Theme.STANDARD}
+        />,
+      );
+      const element = screen.getByRole('button');
+      expect(element).toBeInTheDocument();
+    });
+  });
+
+  describe('Theme variants', () => {
+    it('should render with STANDARD theme', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should render with MODERN theme', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.MODERN}
+        />,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should render with MINIMAL theme', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.MINIMAL}
+        />,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should render with GLOBAL_CUSTOM theme', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.GLOBAL_CUSTOM}
+        />,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('should use GLOBAL_CUSTOM as default theme', () => {
+      const { container } = render(<WidgetTextField placeholder="Test" />);
+      const element = container.firstChild as HTMLElement;
+      expect(element).toBeInTheDocument();
+    });
+  });
+
+  describe('Click handler', () => {
+    it('should call onClick when clicked', () => {
+      const handleClick = vi.fn();
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          onClick={handleClick}
+        />,
+      );
+      const button = container.querySelector('[role="button"]');
+      fireEvent.click(button!);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onClick when not provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const button = container.querySelector('[role="button"]');
+      expect(button).toBeInTheDocument();
+      fireEvent.click(button!);
+      // Should not throw error
+    });
+
+    it('should be focusable when onClick is provided', () => {
+      const handleClick = vi.fn();
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          onClick={handleClick}
+        />,
+      );
+      const button = container.querySelector('[role="button"]') as HTMLElement;
+      expect(button).toHaveAttribute('tabIndex', '0');
+    });
+
+    it('should not be focusable when onClick is not provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const button = container.querySelector('[role="button"]') as HTMLElement;
+      expect(button).not.toHaveAttribute('tabIndex');
+    });
+  });
+
+  describe('Keyboard navigation', () => {
+    it('should call onClick when Enter key is pressed', () => {
+      const handleClick = vi.fn();
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          onClick={handleClick}
+        />,
+      );
+      const button = container.querySelector('[role="button"]') as HTMLElement;
+      button.focus();
+      fireEvent.keyDown(button, { key: 'Enter' });
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onClick when Space key is pressed', () => {
+      const handleClick = vi.fn();
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          onClick={handleClick}
+        />,
+      );
+      const button = container.querySelector('[role="button"]') as HTMLElement;
+      button.focus();
+      fireEvent.keyDown(button, { key: ' ' });
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should prevent default behavior when Space key is pressed', () => {
+      const handleClick = vi.fn();
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          onClick={handleClick}
+        />,
+      );
+      const button = container.querySelector('[role="button"]') as HTMLElement;
+      button.focus();
+      const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
+      const preventDefaultSpy = vi.spyOn(event, 'preventDefault');
+      fireEvent(button, event);
+      expect(preventDefaultSpy).toHaveBeenCalled();
+    });
+
+    it('should not call onClick for other keys', () => {
+      const handleClick = vi.fn();
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          onClick={handleClick}
+        />,
+      );
+      const button = container.querySelector('[role="button"]') as HTMLElement;
+      button.focus();
+      fireEvent.keyDown(button, { key: 'Tab' });
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should apply aria-label when provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          ariaLabel="Search input field"
+        />,
+      );
+      const button = container.querySelector('[role="button"]');
+      expect(button).toHaveAttribute('aria-label', 'Search input field');
+    });
+
+    it('should have role="button"', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const button = container.querySelector('[role="button"]');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('Component structure', () => {
+    it('should render Container with correct props', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          id="test-id"
+          testId="test-testid"
+        />,
+      );
+      const element = container.querySelector('#test-id');
+      expect(element).toBeInTheDocument();
+      expect(screen.getByTestId('test-testid')).toBeInTheDocument();
+    });
+
+    it('should render placeholder text inside component', () => {
+      render(
+        <WidgetTextField
+          placeholder="Custom placeholder"
+          theme={Theme.STANDARD}
+        />,
+      );
+      expect(screen.getByText('Custom placeholder')).toBeInTheDocument();
+    });
+
+    it('should render icon inside component', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+});

package/src/components/WidgetTextField/components/Container.tsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import { Stack } from '../../Stack';
+import { Container as ContainerComponent } from '../../Container';
+import { Theme } from '../../../../tokens/theme/theme';
+import { useGetContainerProperties } from '../hooks/useGetContainerProperties';
+import { useHandleKeyboard } from '../hooks/useHandleKeyboard';
+
+type ContainerProps = {
+  id?: string;
+  testId?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  theme: Theme;
+  ariaLabel?: string;
+  icon: React.ReactNode;
+  text: React.ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export const Container = ({
+  id,
+  testId,
+  style,
+  className,
+  theme,
+  ariaLabel,
+  icon,
+  text,
+  disabled,
+  onClick,
+}: ContainerProps) => {
+  const { baseClassName, themeContainerClassName } = useGetContainerProperties({ theme });
+
+  const { handleKeyDown } = useHandleKeyboard({ onClick });
+
+  return (
+    <ContainerComponent
+      id={id}
+      testId={testId}
+      style={style}
+      className={classNames(
+        className,
+        baseClassName,
+        themeContainerClassName,
+        disabled && 'envive-tw-pointer-events-none envive-tw-opacity-50',
+      )}
+      aria-label={ariaLabel}
+      fluid
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role="button"
+      tabIndex={onClick ? 0 : undefined}
+    >
+      <Stack
+        direction="row"
+        align="center"
+        justify="between"
+        gap="2"
+      >
+        {text}
+        {icon}
+      </Stack>
+    </ContainerComponent>
+  );
+};

package/src/components/WidgetTextField/components/FakeTextInput.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '../../Typography';
+import { TypographyColor, TypographyVariant } from '../../Typography/types';
+
+type FakeTextInputProps = {
+  placeholder: string;
+};
+
+export const FakeTextInput = ({ placeholder }: FakeTextInputProps) => {
+  return (
+    <Typography
+      variant={TypographyVariant.B3_RG}
+      color={TypographyColor.TEXT_SECONDARY}
+      noWrap
+    >
+      {placeholder}
+    </Typography>
+  );
+};

package/src/components/WidgetTextField/components/Icon.tsx

@@ -0,0 +1,47 @@
+import SendModern from '@envive-ai/react-icons/SendModern';
+import SendStandard from '@envive-ai/react-icons/SendStandard';
+import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
+import { Theme } from '../../../../tokens/theme/theme';
+import { CustomIcon } from '../../utils/CustomIcon';
+
+type IconProps = {
+  theme: Theme;
+};
+
+export const Icon = ({ theme }: IconProps) => {
+  if (theme === Theme.STANDARD) {
+    return (
+      <CustomIcon
+        IconComponent={<SendStandard />}
+        className="envive-tw-h-6 envive-tw-w-6"
+        fill="var(--envive-colors-border-medium)"
+      />
+    );
+  }
+  if (theme === Theme.MODERN) {
+    return (
+      <CustomIcon
+        IconComponent={<SendModern />}
+        className="envive-tw-h-6 envive-tw-w-6"
+        fill="var(--envive-colors-border-medium)"
+      />
+    );
+  }
+  if (theme === Theme.MINIMAL) {
+    return (
+      <CustomIcon
+        IconComponent={<SendMinimalist />}
+        className="envive-tw-h-6 envive-tw-w-6"
+        stroke="var(--envive-colors-text-secondary)"
+      />
+    );
+  }
+
+  return (
+    <CustomIcon
+      IconComponent={<SendStandard />}
+      className="envive-tw-h-6 envive-tw-w-6"
+      fill="var(--envive-colors-border-medium)"
+    />
+  );
+};

package/src/components/WidgetTextField/components/Skeleton.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import { Theme } from '../../../../tokens/theme/theme';
+import { resolveTheme } from '../../utils/resolveTheme';
+
+type SkeletonProps = {
+  theme: Theme;
+};
+
+export const Skeleton = ({ theme = Theme.GLOBAL_CUSTOM }: SkeletonProps) => {
+  const finalTheme = resolveTheme(theme);
+
+  const themeClass = useMemo(() => {
+    if (finalTheme === Theme.STANDARD) {
+      return 'envive-tw-rounded-global-custom';
+    }
+    return 'envive-tw-rounded-4';
+  }, [finalTheme]);
+
+  return (
+    <div
+      className={classNames(
+        'envive-tw-h-[40px] envive-tw-w-full envive-tw-animate-pulse',
+        themeClass,
+      )}
+    />
+  );
+};

package/src/components/WidgetTextField/components/index.ts

@@ -0,0 +1,11 @@
+import { Container } from './Container';
+import { FakeTextInput } from './FakeTextInput';
+import { Icon } from './Icon';
+import { Skeleton } from './Skeleton';
+
+export const WidgetTextFieldComponents = {
+  Container,
+  FakeTextInput,
+  Icon,
+  Skeleton,
+};

package/src/components/WidgetTextField/hooks/useGetContainerProperties.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type UseGetContainerPropertiesProps = {
+  theme: Theme;
+};
+
+export const useGetContainerProperties = ({ theme }: UseGetContainerPropertiesProps) => {
+  const baseClassName =
+    'envive-tw-cursor-text envive-tw-border-[1px] envive-tw-border-solid envive-tw-border-border-light envive-tw-px-4 envive-tw-py-2';
+
+  const themeContainerClassName = useMemo(() => {
+    const themeCotainerMap = {
+      [Theme.STANDARD]: 'envive-tw-rounded-global-custom',
+      [Theme.MODERN]: 'envive-tw-rounded-4',
+    };
+    return themeCotainerMap[theme] ?? '';
+  }, [theme]);
+
+  return { baseClassName, themeContainerClassName };
+};

package/src/components/WidgetTextField/hooks/useHandleKeyboard.ts

@@ -0,0 +1,10 @@
+export const useHandleKeyboard = ({ onClick }: { onClick: () => void }) => {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return { handleKeyDown };
+};

package/src/components/WidgetTextField/index.ts

@@ -0,0 +1,2 @@
+export { WidgetTextField } from './WidgetTextField';
+export type { WidgetTextFieldProps } from './types/types';

package/src/components/WidgetTextField/types/types.ts

@@ -0,0 +1,42 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+/**
+ * Props for the WidgetTextField component.
+ *
+ * WidgetTextField is a text input field component with consistent styling
+ * that supports multiple theme variants. It displays a placeholder text and
+ * can be clicked to trigger an action.
+ *
+ * @example
+ * ```tsx
+ * <WidgetTextField
+ *   theme={Theme.STANDARD}
+ *   placeholder="Type your message..."
+ *   onClick={() => console.log('Clicked')}
+ * />
+ * ```
+ */
+export type WidgetTextFieldProps = {
+  /** Unique identifier for the component. */
+  id?: string;
+  /** Test identifier for automated testing purposes. */
+  testId?: string;
+  /** Inline CSS styles to apply to the component. */
+  style?: React.CSSProperties;
+  /** Additional CSS class names to apply to the component. */
+  className?: string;
+  /** Visual theme variant that controls the component's appearance. The Global Custom theme is the default theme. Apply a custom theme by using the var(--envive-global-custom-theme) variable.`.
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+  /** Placeholder text displayed in the text field. */
+  placeholder?: string;
+  /** Accessible label for screen readers. If not provided, the placeholder will be used. */
+  ariaLabel?: string;
+  /** Whether the text field is disabled. */
+  disabled?: boolean;
+  /** Whether the text field is in a loading state. When true, displays a skeleton placeholder. */
+  isLoading?: boolean;
+  /** Callback function invoked when the text field is clicked or activated via keyboard. */
+  onClick?: () => void;
+};

package/src/components/WidgetWrapper/WidgetWrapper.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { Container } from '../Container';
+import { WidgetWrapperProps } from './types/types';
+import { useGetWrapperProperties } from './hooks/useGetWrapperProperties';
+
+/**
+ * WidgetWrapper component provides consistent styling for widget containers.
+ *
+ * The component wraps content in a Container with predefined styling variants based on the selected variant.
+ * It supports all Container props (fluid, centerContent, component, etc.), allowing for flexible customization
+ * while maintaining consistent widget styling across the application.
+ */
+export const WidgetWrapper = ({
+  children,
+  variant,
+  className,
+  style,
+  ...containerProps
+}: WidgetWrapperProps) => {
+  const { wrapperClassName } = useGetWrapperProperties(variant);
+
+  return (
+    <Container
+      className={classNames(wrapperClassName, className)}
+      style={style}
+      {...containerProps}
+    >
+      {children}
+    </Container>
+  );
+};