@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/Typography/Links/Links.tsx

@@ -0,0 +1,113 @@
+import { cn } from '@evolve.ui/theme-system';
+import { forwardRef, HTMLProps, ElementType } from 'react';
+
+function factory(classes: string) {
+    return forwardRef<
+        HTMLAnchorElement,
+        Omit<HTMLProps<HTMLAnchorElement>, 'size'> & {
+            /**
+             * Polymorphic component type. Use this to render as a Next.js Link or any other element.
+             * @example <Link as={NextLink} href="/about">About</Link>
+             */
+            as?: ElementType;
+            /**
+             * Whether the link is disabled. Disables `onClick` as well.
+             */
+            disabled?: boolean;
+            /**
+             * Optional custom navigation handler. Called instead of default link behavior
+             * when no special case applies and `onClick` did not preventDefault.
+             *
+             * Receives the `href` and returns a click event handler.
+             */
+            navigate?: (href: string) => (e: React.MouseEvent<HTMLAnchorElement>) => void;
+            /**
+             * The size of the link to render.
+             *
+             * xs = extra small
+             * sm = small
+             * md = medium (default)
+             */
+            size?: 'xs' | 'sm' | 'md';
+        }
+    >(({ as: Component = 'a', className, disabled, href, navigate, onClick, size = 'md', ...rest }, ref) => {
+        return (
+            <Component
+                aria-disabled={disabled}
+                className={cn(
+                    'cursor-pointer outline-offset-2 transition-colors hover:underline aria-disabled:cursor-not-allowed aria-disabled:text-link-disabled',
+                    {
+                        'hui-link-md': size === 'md',
+                        'hui-link-sm': size === 'sm',
+                        'hui-link-xs': size === 'xs',
+                    },
+                    classes,
+                    className
+                )}
+                href={href}
+                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                    if (disabled) {
+                        e.preventDefault();
+                        return;
+                    }
+
+                    if (onClick) {
+                        onClick(e);
+                    }
+
+                    if (e.defaultPrevented || !href) {
+                        return;
+                    }
+
+                    // Browser/default navigation handles these cases.
+                    if (href.startsWith('#') || /^\w+:/.test(href) || rest.target === '_blank') {
+                        return;
+                    }
+
+                    if (navigate) {
+                        navigate(href)(e);
+                    }
+                }}
+                ref={ref}
+                tabIndex={0}
+                {...rest}
+            />
+        );
+    });
+}
+
+export const Link = factory(
+    'underline text-link-primary hover:text-link-hover active:text-link-pressed hui-focus-visible-outline'
+);
+Link.displayName = 'Link';
+
+export const WeakLink = factory(
+    'underline text-link-secondary hover:text-link-hover active:text-link-pressed hui-focus-visible-outline'
+);
+WeakLink.displayName = 'WeakLink';
+
+export const MonochromeLink = factory(
+    'underline text-link-monochrome hover:text-link-hover active:text-link-pressed hui-focus-visible-outline'
+);
+MonochromeLink.displayName = 'MonochromeLink';
+
+export const InverseLink = factory('underline text-link-inverse hui-focus-visible-outline-inverse');
+InverseLink.displayName = 'InverseLink';
+
+export const SubtleLink = factory(
+    'text-link-primary hover:text-link-hover active:text-link-pressed hui-focus-visible-outline'
+);
+SubtleLink.displayName = 'SubtleLink';
+
+export const SubtleWeakLink = factory(
+    'text-link-secondary hover:text-link-hover active:text-link-pressed hui-focus-visible-outline'
+);
+SubtleWeakLink.displayName = 'SubtleWeakLink';
+
+export const SubtleMonochromeLink = factory(
+    'text-link-monochrome hover:text-link-hover active:text-link-pressed hui-focus-visible-outline'
+);
+SubtleMonochromeLink.displayName = 'SubtleMonochromeLink';
+
+export const SubtleInverseLink = factory('text-link-inverse hui-focus-visible-outline-inverse');
+SubtleInverseLink.displayName = 'SubtleInverseLink';

package/src/Typography/Text/Text.tsx

@@ -0,0 +1,239 @@
+import { cn, type TextColorAliases } from '@evolve.ui/theme-system';
+import { forwardRef, HTMLProps } from 'react';
+
+type ColorProp = {
+    /**
+     * Pass any text color like 'primary', 'secondary', 'critical', 'success', 'info', 'inverse', etc.
+     *
+     * You can access all of these colors through tailwind through `text-text-[color]` like `text-text-primary`, etc.
+     */
+    color?: TextColorAliases;
+};
+
+const colors = {
+    critical: 'text-text-critical',
+    disabled: 'text-text-disabled',
+    inactive: 'text-text-inactive',
+    info: 'text-text-info',
+    inverse: 'text-text-inverse',
+    primary: 'text-text-primary',
+    secondary: 'text-text-secondary',
+    success: 'text-text-success',
+    warning: 'text-text-warning',
+} satisfies Record<TextColorAliases, string>;
+
+/**
+ * H1 styled text. If you need a non `h1` with the same styles, use the classnames `hui-text-h1` and `text-text-[yourColor]`.
+ */
+export const H1 = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <h1
+                className={cn('hui-text-h1', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </h1>
+        );
+    }
+);
+H1.displayName = 'H1';
+
+/**
+ * H2 styled text. If you need a non `h2` with the same styles, use the classnames `hui-text-h2` and `text-text-[yourColor]`.
+ */
+export const H2 = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <h2
+                className={cn('hui-text-h2', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </h2>
+        );
+    }
+);
+H2.displayName = 'H2';
+
+/**
+ * H3 styled text. If you need a non `h3` with the same styles, use the classnames `hui-text-h3` and `text-text-[yourColor]`.
+ */
+export const H3 = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <h3
+                className={cn('hui-text-h3', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </h3>
+        );
+    }
+);
+H3.displayName = 'H3';
+
+/**
+ * H4 styled text. If you need a non `h4` with the same styles, use the classnames `hui-text-h4` and `text-text-[yourColor]`.
+ */
+export const H4 = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <h4
+                className={cn('hui-text-h4', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </h4>
+        );
+    }
+);
+H4.displayName = 'H4';
+
+/**
+ * H5 styled text. If you need a non `h5` with the same styles, use the classnames `hui-text-h5` and `text-text-[yourColor]`.
+ */
+export const H5 = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <h5
+                className={cn('hui-text-h5', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </h5>
+        );
+    }
+);
+H5.displayName = 'H5';
+
+/**
+ * H6 styled text. If you need a non `h6` with the same styles, use the classnames `hui-text-h6` and `text-text-[yourColor]`.
+ */
+export const H6 = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <h6
+                className={cn('hui-text-h6', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </h6>
+        );
+    }
+);
+H6.displayName = 'H6';
+
+/**
+ * BodyPrimary styled text. If you need a non `span` with the same styles, use the classnames `hui-text-body-primary` and `text-text-[yourColor]`.
+ */
+export const BodyPrimary = forwardRef<HTMLSpanElement, HTMLProps<HTMLSpanElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <span
+                className={cn('hui-text-body-primary', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </span>
+        );
+    }
+);
+BodyPrimary.displayName = 'BodyPrimary';
+
+/**
+ * BodySecondary styled text. If you need a non `span` with the same styles, use the classnames `hui-text-body-secondary` and `text-text-[yourColor]`.
+ */
+export const BodySecondary = forwardRef<HTMLSpanElement, HTMLProps<HTMLSpanElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <span
+                className={cn('hui-text-body-secondary', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </span>
+        );
+    }
+);
+BodySecondary.displayName = 'BodySecondary';
+
+/**
+ * Caption styled text. If you need a non `span` with the same styles, use the classnames `hui-text-caption` and `text-text-[yourColor]`.
+ */
+export const Caption = forwardRef<HTMLSpanElement, HTMLProps<HTMLSpanElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <span
+                className={cn('hui-text-caption', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </span>
+        );
+    }
+);
+Caption.displayName = 'Caption';
+
+/**
+ * LabelMini styled text. If you need a non `label` with the same styles, use the classnames `hui-text-label-mini` and `text-text-[yourColor]`.
+ */
+export const LabelMini = forwardRef<HTMLLabelElement, HTMLProps<HTMLLabelElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <label
+                className={cn('hui-text-label-mini', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </label>
+        );
+    }
+);
+LabelMini.displayName = 'LabelMini';
+
+/**
+ * LabelMiniStrong styled text. If you need a non `label` with the same styles, use the classnames `hui-text-label-mini-strong` and `text-text-[yourColor]`.
+ */
+export const LabelMiniStrong = forwardRef<HTMLLabelElement, HTMLProps<HTMLLabelElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <label
+                className={cn('hui-text-label-mini-strong', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </label>
+        );
+    }
+);
+LabelMiniStrong.displayName = 'LabelMiniStrong';
+
+/**
+ * LabelStrong styled text. If you need a non `label` with the same styles, use the classnames `hui-text-label-strong` and `text-text-[yourColor]`.
+ */
+export const LabelStrong = forwardRef<HTMLLabelElement, HTMLProps<HTMLLabelElement> & ColorProp>(
+    ({ children, className, color = 'primary', ...props }, ref) => {
+        return (
+            <label
+                className={cn('hui-text-label-strong', colors[color], className)}
+                ref={ref}
+                {...props}
+            >
+                {children}
+            </label>
+        );
+    }
+);
+LabelStrong.displayName = 'LabelStrong';

package/src/ViewMore/ViewMore.tsx

@@ -0,0 +1,226 @@
+import { cn, wrapVarRgb } from '@evolve.ui/theme-system';
+import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+
+import { CaretDown, CaretUp } from '../Icons';
+import { InlineButton } from '../Typography/InlineButton/InlineButton';
+import { effectEventListener } from '../utils/effectEventListener';
+import { smoothScrollTo } from '../utils/smoothScrollTo';
+
+const SCROLL_TOP_OFFSET = 100;
+const SCROLL_DURATION = 200;
+
+type Props = {
+    /**
+     * Determines whether to center the inline button.
+     */
+    centerInlineButton?: boolean;
+    /**
+     * The inner text description or content to display.
+     *
+     */
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Custom text for the collapse button.
+     *
+     * @default 'Read Less'
+     */
+    collapseText?: string;
+    /**
+     * Whether the view more should be expanded by default.
+     *
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Prevents expansion/collapse while still allowing onClick callback to fire.
+     * Useful when you want to control the expansion behavior externally.
+     *
+     * @default false
+     */
+    disableExpand?: boolean;
+    /**
+     * Custom text for the expand button.
+     *
+     * @default 'Read More'
+     */
+    expandText?: string;
+    /**
+     * Custom fade color.
+     */
+    fadeBackgroundColor?: string;
+    /**
+     * Callback function that is called when the view more is expanded or collapsed.
+     */
+    onChange?: (isExpanded: boolean) => void;
+    /**
+     * Callback function that is called when the view more button is clicked.
+     * Can be used to track analytics or trigger other actions when the view more is interacted with.
+     * Use the `disableExpand` prop if you want to prevent the default expansion/collapse behavior.
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Determines whether to remove the fade background color.
+     */
+    removeFadeBackgroundColor?: boolean;
+    /**
+     * Whether to display caret icons (CaretDown/CaretUp) alongside the button text.
+     *
+     * @default false
+     */
+    showIcon?: boolean;
+    /**
+     * Number in pixels at which the text description will cut off and show the expand toggle.
+     *
+     * @default 150
+     */
+    textCutoffHeight?: number;
+    /**
+     * Determines whether to use a weak inline button.
+     */
+    useWeakInlineButton?: boolean;
+};
+
+export const ViewMore = ({
+    centerInlineButton,
+    children,
+    className,
+    collapseText = 'Read Less',
+    defaultExpanded = false,
+    disableExpand = false,
+    expandText = 'Read More',
+    fadeBackgroundColor,
+    onChange,
+    onClick,
+    removeFadeBackgroundColor,
+    showIcon = false,
+    textCutoffHeight = 150,
+    useWeakInlineButton,
+}: Props) => {
+    const [isExpanded, setIsExpanded] = useState<boolean>(defaultExpanded);
+    // Set initial height for SSR-friendly rendering:
+    // - When expanded: Use large value (9999px) to show all content before useEffect measures actual height
+    // - When collapsed: Use textCutoffHeight to truncate content appropriately
+    const [height, setHeight] = useState<number>(defaultExpanded ? 9999 : textCutoffHeight);
+    const [showViewToggle, setShowViewToggle] = useState<boolean>(false);
+    const [enableTransitions, setEnableTransitions] = useState<boolean>(false);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    const toggleDescription = useCallback(
+        (event: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(event);
+
+            // If disableExpand is true, call onClick but don't toggle the expansion
+            if (disableExpand) {
+                return;
+            }
+
+            // Enable transitions on first user interaction
+            setEnableTransitions(true);
+
+            setIsExpanded((prevIsExpanded) => {
+                const newHeight = prevIsExpanded
+                    ? textCutoffHeight
+                    : (contentRef.current?.scrollHeight ?? textCutoffHeight);
+                setHeight(newHeight);
+                onChange?.(!prevIsExpanded);
+
+                // Scroll to top when collapsing with custom smooth scroll to match 300ms transition
+                if (prevIsExpanded && containerRef.current) {
+                    const top = containerRef.current.getBoundingClientRect().top + window.scrollY - SCROLL_TOP_OFFSET;
+                    smoothScrollTo(top, SCROLL_DURATION);
+                }
+
+                return !prevIsExpanded;
+            });
+        },
+        [textCutoffHeight, onChange, onClick, disableExpand]
+    );
+
+    const updateView = useCallback(() => {
+        if (!contentRef.current) {
+            return;
+        }
+
+        const scrollHeight = contentRef.current.scrollHeight;
+        const shouldShowToggle = scrollHeight > textCutoffHeight;
+        setShowViewToggle(shouldShowToggle);
+        setHeight(isExpanded || !shouldShowToggle ? scrollHeight : textCutoffHeight);
+    }, [isExpanded, textCutoffHeight]);
+
+    useEffect(() => {
+        if (!contentRef.current) {
+            return;
+        }
+        updateView();
+
+        const cleanupResizeListener = effectEventListener(window, 'resize', updateView);
+
+        // Add ResizeObserver to detect content height changes
+        const resizeObserver = new ResizeObserver(updateView);
+        resizeObserver.observe(contentRef.current);
+
+        return () => {
+            cleanupResizeListener();
+            resizeObserver.disconnect();
+        };
+    }, [updateView, children]);
+
+    return (
+        <div className={cn(className, 'flex flex-col gap-xs')}>
+            <div
+                className={cn('relative overflow-hidden', {
+                    'transition-all duration-300 ease-in-out': enableTransitions,
+                })}
+                data-testid="description-container"
+                ref={containerRef}
+                style={{
+                    height: showViewToggle ? `${height}px` : 'auto',
+                    maxHeight: showViewToggle || isExpanded ? undefined : `${textCutoffHeight}px`,
+                }}
+            >
+                <div ref={contentRef}>{children}</div>
+                {showViewToggle && !removeFadeBackgroundColor && !isExpanded && (
+                    <div
+                        className="absolute bottom-0 left-0 right-0 h-xl w-full"
+                        style={{
+                            background: fadeBackgroundColor
+                                ? `linear-gradient(to bottom, transparent, ${fadeBackgroundColor})`
+                                : `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,
+                        }}
+                    />
+                )}
+            </div>
+            {showViewToggle && (
+                <div
+                    className={cn('w-full', {
+                        'text-center': centerInlineButton,
+                    })}
+                >
+                    {useWeakInlineButton ? (
+                        <InlineButton
+                            className="w-fit"
+                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}
+                            iconPlacement="right"
+                            onClick={toggleDescription}
+                            style="neutral"
+                        >
+                            {isExpanded ? collapseText : expandText}
+                        </InlineButton>
+                    ) : (
+                        <InlineButton
+                            className="w-fit"
+                            icon={showIcon ? (isExpanded ? CaretUp : CaretDown) : undefined}
+                            iconPlacement="right"
+                            onClick={toggleDescription}
+                        >
+                            {isExpanded ? collapseText : expandText}
+                        </InlineButton>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};