@envive-ai/react-toolkit-v3 0.3.5

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

@@ -0,0 +1,384 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Typography } from '../Typography';
+import { TypographyAlign, TypographyColor, TypographyVariant } from '../types';
+
+describe('Typography', () => {
+  describe('Basic rendering', () => {
+    it('should render children correctly', () => {
+      render(<Typography variant={TypographyVariant.B1_RG}>Hello World</Typography>);
+      expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+
+    it('should render with default tag based on variant', () => {
+      const { container } = render(
+        <Typography variant={TypographyVariant.H1_SB}>Heading</Typography>,
+      );
+      const element = container.querySelector('h4');
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveTextContent('Heading');
+    });
+
+    it('should render with custom "as" prop', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          as="p"
+        >
+          Paragraph
+        </Typography>,
+      );
+      const element = container.querySelector('p');
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveTextContent('Paragraph');
+    });
+  });
+
+  describe('Variants', () => {
+    it('should apply correct variant class for T1_MD', () => {
+      const { container } = render(<Typography variant={TypographyVariant.T1_MD}>Text</Typography>);
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-t1-md');
+    });
+
+    it('should apply correct variant class for H1_SB', () => {
+      const { container } = render(
+        <Typography variant={TypographyVariant.H1_SB}>Heading</Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-h1-sb');
+    });
+
+    it('should apply correct variant class for B1_RG', () => {
+      const { container } = render(<Typography variant={TypographyVariant.B1_RG}>Body</Typography>);
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-b1-rg');
+    });
+
+    it('should render correct default tag for each variant', () => {
+      const variants = [
+        { variant: TypographyVariant.T1_MD, expectedTag: 'h1' },
+        { variant: TypographyVariant.T2_MD, expectedTag: 'h2' },
+        { variant: TypographyVariant.T3_MD, expectedTag: 'h3' },
+        { variant: TypographyVariant.H1_SB, expectedTag: 'h4' },
+        { variant: TypographyVariant.H1_MD, expectedTag: 'h4' },
+        { variant: TypographyVariant.H2_SB, expectedTag: 'h5' },
+        { variant: TypographyVariant.H2_MD, expectedTag: 'h5' },
+        { variant: TypographyVariant.H3_SB, expectedTag: 'h6' },
+        { variant: TypographyVariant.H3_MD, expectedTag: 'h6' },
+        { variant: TypographyVariant.B1_RG, expectedTag: 'span' },
+        { variant: TypographyVariant.B1_MD, expectedTag: 'span' },
+        { variant: TypographyVariant.B2_RG, expectedTag: 'span' },
+        { variant: TypographyVariant.B2_MD, expectedTag: 'span' },
+        { variant: TypographyVariant.B3_RG, expectedTag: 'span' },
+        { variant: TypographyVariant.B3_MD, expectedTag: 'span' },
+        { variant: TypographyVariant.B4_RG, expectedTag: 'span' },
+        { variant: TypographyVariant.B4_MD, expectedTag: 'span' },
+        { variant: TypographyVariant.B5_RG, expectedTag: 'span' },
+        { variant: TypographyVariant.B5_MD, expectedTag: 'span' },
+      ];
+
+      variants.forEach(({ variant, expectedTag }) => {
+        const { container } = render(<Typography variant={variant}>Text</Typography>);
+        const element = container.querySelector(expectedTag);
+        expect(element).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Colors', () => {
+    it('should apply default color (TEXT_PRIMARY)', () => {
+      const { container } = render(<Typography variant={TypographyVariant.B1_RG}>Text</Typography>);
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-[--envive-colors-text-primary]');
+    });
+
+    it('should apply TEXT_SECONDARY color', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          color={TypographyColor.TEXT_SECONDARY}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-[--envive-colors-text-secondary]');
+    });
+
+    it('should apply TEXT_ACCENT color', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          color={TypographyColor.TEXT_ACCENT}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-[--envive-colors-text-accent]');
+    });
+
+    it('should apply TEXT_LINK color', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          color={TypographyColor.TEXT_LINK}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-[--envive-colors-text-link]');
+    });
+
+    it('should apply TEXT_LIGHT color', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          color={TypographyColor.TEXT_LIGHT}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-[--envive-colors-text-light]');
+    });
+  });
+
+  describe('Alignment', () => {
+    it('should apply default alignment (LEFT)', () => {
+      const { container } = render(<Typography variant={TypographyVariant.B1_RG}>Text</Typography>);
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-left');
+    });
+
+    it('should apply CENTER alignment', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          align={TypographyAlign.CENTER}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-center');
+    });
+
+    it('should apply RIGHT alignment', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          align={TypographyAlign.RIGHT}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-right');
+    });
+
+    it('should apply JUSTIFY alignment', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          align={TypographyAlign.JUSTIFY}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-text-justify');
+    });
+  });
+
+  describe('NoWrap', () => {
+    it('should not apply noWrap classes when noWrap is false', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          noWrap={false}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).not.toHaveClass('envive-tw-whitespace-nowrap');
+      expect(element).not.toHaveClass('envive-tw-overflow-hidden');
+      expect(element).not.toHaveClass('envive-tw-text-ellipsis');
+    });
+
+    it('should apply noWrap classes when noWrap is true', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          noWrap
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-whitespace-nowrap');
+      expect(element).toHaveClass('envive-tw-overflow-hidden');
+      expect(element).toHaveClass('envive-tw-text-ellipsis');
+    });
+  });
+
+  describe('NumberOfLines', () => {
+    it('should not apply line-clamp class when numberOfLines is undefined', () => {
+      const { container } = render(<Typography variant={TypographyVariant.B1_RG}>Text</Typography>);
+      const element = container.firstChild as HTMLElement;
+      expect(element).not.toHaveClass('envive-tw-line-clamp-1');
+    });
+
+    it('should apply line-clamp-1 when numberOfLines is 1', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          numberOfLines={1}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-line-clamp-1');
+    });
+
+    it('should apply line-clamp-2 when numberOfLines is 2', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          numberOfLines={2}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-line-clamp-2');
+    });
+
+    it('should apply line-clamp-3 when numberOfLines is 3', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          numberOfLines={3}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-line-clamp-3');
+    });
+
+    it('should apply line-clamp-7 when numberOfLines is 7', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          numberOfLines={7}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('envive-tw-line-clamp-[7]');
+    });
+
+    it('should not apply line-clamp class when numberOfLines is greater than 7', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          numberOfLines={8}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).not.toHaveClass('envive-tw-line-clamp-8');
+    });
+  });
+
+  describe('Additional props', () => {
+    it('should apply custom className', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          className="custom-class"
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveClass('custom-class');
+    });
+
+    it('should apply custom style', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          style={{ color: '#0CD77C' }}
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveStyle({ color: '#0CD77C' });
+    });
+
+    it('should apply id attribute', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          id="test-id"
+        >
+          Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+      expect(element).toHaveAttribute('id', 'test-id');
+    });
+
+    it('should apply data-testid attribute', () => {
+      render(
+        <Typography
+          variant={TypographyVariant.B1_RG}
+          testId="test-typography"
+        >
+          Text
+        </Typography>,
+      );
+      expect(screen.getByTestId('test-typography')).toBeInTheDocument();
+    });
+
+    it('should combine multiple props correctly', () => {
+      const { container } = render(
+        <Typography
+          variant={TypographyVariant.H1_SB}
+          color={TypographyColor.TEXT_ACCENT}
+          align={TypographyAlign.CENTER}
+          noWrap
+          numberOfLines={2}
+          className="custom-class"
+          id="my-id"
+          testId="my-test-id"
+          style={{ marginTop: '10px' }}
+        >
+          Complex Text
+        </Typography>,
+      );
+      const element = container.firstChild as HTMLElement;
+
+      expect(element).toHaveTextContent('Complex Text');
+      expect(element).toHaveClass('envive-tw-text-h1-sb');
+      expect(element).toHaveClass('envive-tw-text-[--envive-colors-text-accent]');
+      expect(element).toHaveClass('envive-tw-text-center');
+      expect(element).toHaveClass('envive-tw-whitespace-nowrap');
+      expect(element).toHaveClass('envive-tw-line-clamp-2');
+      expect(element).toHaveClass('custom-class');
+      expect(element).toHaveAttribute('id', 'my-id');
+      expect(element).toHaveAttribute('data-testid', 'my-test-id');
+      expect(element).toHaveStyle({ marginTop: '10px' });
+    });
+  });
+});

package/src/components/Typography/hooks/useGetAccessibilityAttributes.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import type { TypographyAccessibilityAttributes, TypographyTag } from '../types';
+import { getHeadingLevelFromTag, isHeadingTag } from '../utils/utils';
+
+export const useGetAccessibilityAttributes = ({
+  tag,
+  numberOfLines,
+  noWrap,
+  children,
+}: {
+  tag: TypographyTag;
+  numberOfLines?: number;
+  noWrap?: boolean;
+  children: React.ReactNode;
+}) => {
+  return useMemo<TypographyAccessibilityAttributes>(() => {
+    const accessibilityAttributes: TypographyAccessibilityAttributes = {};
+
+    if (isHeadingTag(tag)) {
+      const headingLevel = getHeadingLevelFromTag(tag);
+
+      accessibilityAttributes.role = 'heading';
+      accessibilityAttributes['aria-level'] = headingLevel;
+    }
+
+    const isTruncated = Boolean(noWrap || (numberOfLines && numberOfLines > 0));
+
+    if (isTruncated && (typeof children === 'string' || typeof children === 'number')) {
+      const label = String(children);
+
+      accessibilityAttributes.title = label;
+      accessibilityAttributes['aria-label'] = label;
+
+      if (!isHeadingTag(tag)) {
+        // Add role="text" when aria-label is used on non-heading elements to fix accessibility warnings
+        accessibilityAttributes.role = 'text';
+      }
+    }
+
+    return accessibilityAttributes;
+  }, [tag, numberOfLines, noWrap, children]);
+};

package/src/components/Typography/hooks/useGetAlignProperties.ts

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import { TypographyAlign } from '../types';
+
+export const useGetAlignProperties = (align: TypographyAlign) => {
+  const alignClass = useMemo(() => {
+    const alignClassMap: Record<TypographyAlign, string> = {
+      left: 'envive-tw-text-left',
+      center: 'envive-tw-text-center',
+      right: 'envive-tw-text-right',
+      justify: 'envive-tw-text-justify',
+    };
+
+    return alignClassMap[align as TypographyAlign] || alignClassMap[TypographyAlign.LEFT];
+  }, [align]);
+
+  return { alignClass };
+};

package/src/components/Typography/hooks/useGetColorProperties.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { TypographyColor } from '../types';
+
+export const useGetColorProperties = (color: TypographyColor) => {
+  const colorVarClass = useMemo(() => {
+    const colorClassMap: Record<TypographyColor, string> = {
+      'text-primary': 'envive-tw-text-[--envive-colors-text-primary]',
+      'text-secondary': 'envive-tw-text-[--envive-colors-text-secondary]',
+      'text-accent': 'envive-tw-text-[--envive-colors-text-accent]',
+      'text-link': 'envive-tw-text-[--envive-colors-text-link]',
+      'text-light': 'envive-tw-text-[--envive-colors-text-light]',
+    };
+
+    return colorClassMap[color as TypographyColor] || colorClassMap[TypographyColor.TEXT_PRIMARY];
+  }, [color]);
+
+  return { colorVarClass };
+};

package/src/components/Typography/hooks/useGetNoWrapProperties.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+
+export const useGetNoWrapProperties = (noWrap: boolean) => {
+  const noWrapClass = useMemo(() => {
+    return noWrap
+      ? 'envive-tw-whitespace-nowrap envive-tw-overflow-hidden envive-tw-text-ellipsis'
+      : undefined;
+  }, [noWrap]);
+
+  return { noWrapClass };
+};

package/src/components/Typography/hooks/useGetNumberOfLinesProperties.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+
+export const useGetNumberOfLinesProperties = (numberOfLines?: number) => {
+  const numberOfLinesClass = useMemo(() => {
+    if (!numberOfLines) {
+      return '';
+    }
+
+    const numberOfLinesClassMap: Record<number, string> = {
+      1: 'envive-tw-line-clamp-1',
+      2: 'envive-tw-line-clamp-2',
+      3: 'envive-tw-line-clamp-3',
+      4: 'envive-tw-line-clamp-4',
+      5: 'envive-tw-line-clamp-5',
+      6: 'envive-tw-line-clamp-6',
+      7: 'envive-tw-line-clamp-[7]',
+    };
+
+    return numberOfLinesClassMap[numberOfLines] || '';
+  }, [numberOfLines]);
+
+  return { numberOfLinesClass };
+};

package/src/components/Typography/hooks/useGetVariantProperties.ts

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { TypographyVariant } from '../types';
+import type { TypographyProps, TypographyTag } from '../types';
+
+export const useGetVariantProperties = (variant: TypographyProps['variant']) => {
+  const variantClass = useMemo(() => {
+    const variantClassMap: Record<TypographyVariant, string> = {
+      't1-md': 'envive-tw-text-t1-md',
+      't2-md': 'envive-tw-text-t2-md',
+      't3-md': 'envive-tw-text-t3-md',
+      'h1-sb': 'envive-tw-text-h1-sb',
+      'h1-md': 'envive-tw-text-h1-md',
+      'h2-sb': 'envive-tw-text-h2-sb',
+      'h2-md': 'envive-tw-text-h2-md',
+      'h3-sb': 'envive-tw-text-h3-sb',
+      'h3-md': 'envive-tw-text-h3-md',
+      'b1-rg': 'envive-tw-text-b1-rg',
+      'b1-md': 'envive-tw-text-b1-md',
+      'b2-rg': 'envive-tw-text-b2-rg',
+      'b2-md': 'envive-tw-text-b2-md',
+      'b3-rg': 'envive-tw-text-b3-rg',
+      'b3-md': 'envive-tw-text-b3-md',
+      'b4-rg': 'envive-tw-text-b4-rg',
+      'b4-md': 'envive-tw-text-b4-md',
+      'b5-rg': 'envive-tw-text-b5-rg',
+      'b5-md': 'envive-tw-text-b5-md',
+      'l1-sb': 'envive-tw-text-l1-sb',
+      'l2-sb': 'envive-tw-text-l2-sb',
+    };
+
+    return variantClassMap[variant as TypographyVariant] || '';
+  }, [variant]);
+
+  const variantTag = useMemo(() => {
+    const variantTagMap: Record<TypographyVariant, TypographyTag> = {
+      't1-md': 'h1',
+      't2-md': 'h2',
+      't3-md': 'h3',
+      'h1-sb': 'h4',
+      'h1-md': 'h4',
+      'h2-sb': 'h5',
+      'h2-md': 'h5',
+      'h3-sb': 'h6',
+      'h3-md': 'h6',
+      'b1-rg': 'span',
+      'b1-md': 'span',
+      'b2-rg': 'span',
+      'b2-md': 'span',
+      'b3-rg': 'span',
+      'b3-md': 'span',
+      'b4-rg': 'span',
+      'b4-md': 'span',
+      'b5-rg': 'span',
+      'b5-md': 'span',
+      'l1-sb': 'span',
+      'l2-sb': 'span',
+    };
+
+    return variantTagMap[variant as TypographyVariant] || 'span';
+  }, [variant]);
+
+  return { variantClass, variantTag };
+};

package/src/components/Typography/index.ts

@@ -0,0 +1,3 @@
+export { Typography } from './Typography';
+export { TypographyAlign, TypographyColor, TypographyVariant } from './types';
+export type { TypographyProps } from './types';

package/src/components/Typography/types/index.ts

@@ -0,0 +1,106 @@
+import type { AriaRole, JSX } from 'react';
+
+export enum TypographyVariant {
+  T1_MD = 't1-md',
+  T2_MD = 't2-md',
+  T3_MD = 't3-md',
+  H1_SB = 'h1-sb',
+  H1_MD = 'h1-md',
+  H2_SB = 'h2-sb',
+  H2_MD = 'h2-md',
+  H3_SB = 'h3-sb',
+  H3_MD = 'h3-md',
+  B1_RG = 'b1-rg',
+  B1_MD = 'b1-md',
+  B2_RG = 'b2-rg',
+  B2_MD = 'b2-md',
+  B3_RG = 'b3-rg',
+  B3_MD = 'b3-md',
+  B4_RG = 'b4-rg',
+  B4_MD = 'b4-md',
+  B5_RG = 'b5-rg',
+  B5_MD = 'b5-md',
+  L1_SB = 'l1-sb',
+  L2_SB = 'l2-sb',
+}
+
+export enum TypographyColor {
+  TEXT_PRIMARY = 'text-primary',
+  TEXT_SECONDARY = 'text-secondary',
+  TEXT_ACCENT = 'text-accent',
+  TEXT_LINK = 'text-link',
+  TEXT_LIGHT = 'text-light',
+}
+
+export enum TypographyAlign {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+  JUSTIFY = 'justify',
+}
+
+export type TypographyTag = Extract<
+  keyof JSX.IntrinsicElements,
+  'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
+>;
+
+export type TypographyAccessibilityAttributes = {
+  'aria-label'?: string;
+  'aria-level'?: number;
+  role?: AriaRole;
+  title?: string;
+};
+
+/**
+ * Props accepted by the `Typography` component.
+ */
+export interface TypographyProps {
+  /**
+   * Unique `id` attribute attached to the rendered element.
+   */
+  id?: string;
+  /**
+   * Adds a `data-testid` attribute for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Node rendered inside the typography element.
+   */
+  children: React.ReactNode;
+  /**
+   * Additional class names appended to the computed typography classes.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the rendered element.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Maximum number of lines before the text is truncated with a line clamp.
+   */
+  numberOfLines?: number;
+  /**
+   * Typography variant that controls font size, weight and default HTML tag.
+   */
+  variant: TypographyVariant;
+  /**
+   * Color token applied to the text.
+   */
+  color?: TypographyColor;
+  /**
+   * Text alignment utility applied to the element.
+   */
+  align?: TypographyAlign;
+  /**
+   * Forces the text onto a single line with ellipsis overflow.
+   */
+  noWrap?: boolean;
+  /**
+   * Overrides the default HTML tag inferred from the typography variant.
+   */
+  as?: TypographyTag;
+  /**
+   * Accessible label for screen readers.
+   */
+  'aria-label'?: string;
+}

package/src/components/Typography/utils/utils.ts

@@ -0,0 +1,11 @@
+import type { TypographyTag } from '../types';
+
+export const isHeadingTag = (tag: TypographyTag) => /^h[1-6]$/.test(tag);
+
+export const getHeadingLevelFromTag = (tag: TypographyTag) => {
+  const match = /^h([1-6])$/.exec(tag);
+  if (match) {
+    return Number(match[1]);
+  }
+  return undefined;
+};