@apify/ui-library 0.67.5-featoutputschemacomponent-327312.64 → 0.68.1-feattabs-4feb6d.72

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.67.5-featoutputschemacomponent-327312.64+9a84c4d8b5e",
+    "version": "0.68.1-feattabs-4feb6d.72+6c2024f5a97",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -28,6 +28,7 @@
     "dependencies": {
         "@apify/ui-icons": "^0.10.0",
         "@floating-ui/react": "^0.26.2",
+        "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
         "fast-average-color": "^9.4.0",
@@ -65,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "9a84c4d8b5ee91358475981d912c94ebd611251b"
+    "gitHead": "6c2024f5a97b2f1844976716cc92199dd6ede982"
 }

package/src/components/badge.tsx

@@ -9,14 +9,21 @@ import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 import { Text } from './text/index.js';
 import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
 
-type BadgeSize = Exclude<SharedTextSize, 'big'>;
+export type BadgeSize = 'regular' | 'small' | 'extra_small';
 export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
 
 const BADGE_ICON_SIZES = {
     regular: '16',
     small: '12',
+    extra_small: '12',
 } satisfies Record<BadgeSize, IconSize>;
 
+const BADGE_TEXT_SIZES = {
+    regular: 'regular',
+    small: 'small',
+    extra_small: 'small',
+} satisfies Record<BadgeSize, SharedTextSize>;
+
 export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
 type BadgeVariant = typeof BADGE_VARIANTS[number];
 
@@ -39,6 +46,11 @@ const badgeSizeStyle = {
         padding: ${theme.space.space2} ${theme.space.space6};
         border-radius: ${theme.radius.radius4};
     `,
+    extra_small: css`
+        height: 1.6rem;
+        padding: ${theme.space.space2} ${theme.space.space4};
+        border-radius: ${theme.radius.radius4};
+    `,
 } satisfies Record<BadgeSize, FlattenSimpleInterpolation>;
 
 const badgeVariantStyle = {
@@ -127,7 +139,7 @@ export const Badge = forwardRef(
                 {...props}
             >
                 {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
-                {children && (<Text size={size} type={type} weight="medium">{children}</Text>)}
+                {children && (<Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium">{children}</Text>)}
             </StyledBadge>
         );
     },

package/src/components/index.ts

@@ -19,3 +19,4 @@ export * from './image.js';
 export * from './rating.js';
 export * from './badge.js';
 export * from './tag.js';
+export * from './tabs/index.js';

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './tabs.js';
+export * from './tab.js';

package/src/components/tabs/tab.tsx

@@ -0,0 +1,194 @@
+import clsx from 'clsx';
+import { createPath } from 'history';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import type { IconComponent } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import type { BadgeSize } from '../badge.js';
+import { Badge } from '../badge.js';
+import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
+import type { RegularLinkProps } from '../link.js';
+import { Link } from '../link.js';
+import { Text } from '../text/index.js';
+import type { SharedTextSize } from '../text/text_shared.js';
+
+type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
+
+export type TabVariant = 'default' | 'boxed' | 'buttoned';
+
+export type TabData = SharedTabProps & {
+    id: string;
+    title: string;
+    Icon?: IconComponent;
+    chip?: number | string;
+    rollout?: 'alpha' | 'beta';
+    disabled?: boolean;
+};
+
+export type TabProps = TabData & {
+    variant?: TabVariant;
+    active?: boolean;
+    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
+};
+
+const tabVariantTextSize = {
+    default: 'regular',
+    boxed: 'regular',
+    buttoned: 'small',
+} satisfies Record<TabVariant, SharedTextSize>;
+
+const tabVariantBadgeSize = {
+    default: 'small',
+    boxed: 'small',
+    buttoned: 'extra_small',
+} satisfies Record<TabVariant, BadgeSize>;
+
+const tabVariantStyle = {
+    default: css`
+        height: 3.6rem;
+        padding: 0 ${theme.space.space8};
+        color: ${theme.color.neutral.textSubtle};
+
+        &:hover {
+            color: ${theme.color.primaryBlack.actionHover}
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                bottom: -${theme.space.space4};
+                right: 0;
+                left: 0;
+                height: 2px;
+                background-color: ${theme.color.primaryBlack.action};
+                border-radius: ${theme.radius.radiusFull};
+                content: '';
+                display: block;
+                pointer-events: none;
+                position: absolute;
+            }
+
+            &.disabled::after {
+                background-color: ${theme.color.neutral.textDisabled};
+            }
+        }
+    `,
+    boxed: css`
+        height: 3.6rem;
+        border: 1px solid transparent;
+        border-top-right-radius: ${theme.radius.radius6};
+        border-top-left-radius: ${theme.radius.radius6};
+        padding: 0 ${theme.space.space12};
+        color: ${theme.color.neutral.textMuted};
+
+        &::after {
+            inset: ${theme.space.space4};
+            background-color: transparent;
+            border-radius: ${theme.radius.radius6};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+            transition: background-color ${theme.transition.fastEaseOut};
+            z-index: -1;
+        }
+
+        &:hover {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                background-color: ${theme.color.neutral.hover};
+            }
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+            border-color: ${theme.color.neutral.border};
+            border-bottom-color: ${theme.color.neutral.background};
+
+            &::after {
+                background-color: transparent;
+            }
+        }
+    `,
+    buttoned: css`
+        height: 3.2rem;
+        margin: 0 ${theme.space.space4};
+        padding: 0 ${theme.space.space8};
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: ${theme.radius.radius8};
+        color: ${theme.color.neutral.textMuted};
+
+        &:hover {
+            background-color: ${theme.color.neutral.hover};
+            color: ${theme.color.neutral.text};
+        }
+
+        &.active {
+            background-color: transparent;
+            border-color: ${theme.color.neutral.border};
+            color: ${theme.color.neutral.text};
+        }
+    `,
+} satisfies Record<TabVariant, FlattenSimpleInterpolation>;
+
+type TabWrapperProps = WithTransientProps<Required<Pick<TabProps, 'variant'>>> & {
+    role?: React.AriaRole;
+};
+
+const TabWrapper = styled(Link)<TabWrapperProps>`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${theme.space.space4};
+    cursor: pointer;
+    position: relative;
+    transition: background-color ${theme.transition.fastEaseOut}, border-color ${theme.transition.fastEaseOut}, color ${theme.transition.fastEaseOut};
+    z-index: 1;
+
+    
+    ${({ $variant }) => tabVariantStyle[$variant]};
+
+    &.disabled {
+        color: ${theme.color.neutral.textDisabled};
+        pointer-events: none;
+    }
+
+    .Tab-icon {
+        color: inherit;
+        flex-shrink: 0;
+        transition: color ${theme.transition.fastEaseOut};
+    }
+
+    .Tab-badge {
+        flex-shrink: 0;
+        text-transform: uppercase;
+    }
+`;
+
+export const Tab = ({ variant = 'default', id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }: TabProps) => {
+    const href = typeof (to) === 'string' ? to : createPath(to);
+
+    return (
+        <TabWrapper
+            {...props}
+            id={id}
+            to={to}
+            role="tab"
+            data-test="tab"
+            className={clsx(className, { active, disabled })}
+            onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
+            $variant={variant}
+        >
+            {Icon && <Icon size="16" className="Tab-icon" />}
+            <Text size={tabVariantTextSize[variant]} weight="bold" as="div">{title}</Text>
+            {chip && <Badge size={tabVariantBadgeSize[variant]} variant={active ? 'primary_black' : 'neutral_subtle'} className="Tab-badge">{chip}</Badge>}
+            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className="Tab-badge">{rollout}</Badge>}
+        </TabWrapper>
+    );
+};

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,160 @@
+import useResizeObserver from '@react-hook/resize-observer';
+import { type AriaRole, useCallback, useRef, useState } from 'react';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils.js';
+import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
+import { Box } from '../box.js';
+import { Tab, type TabData, type TabVariant } from './tab.js';
+
+type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+type TabsProps = SharedTabsProps & {
+    variant?: TabVariant;
+    tabs: TabData[];
+    activeTab?: string;
+    onSelect?: (data: { id: string, href: string, event: React.MouseEvent }) => void;
+};
+
+const tabsVariantStyle = {
+    default: css`
+        align-items: flex-start;
+        gap: ${theme.space.space8};
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.separatorSubtle};
+            border-radius: ${theme.radius.radiusFull};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+    boxed: css`
+        align-items: flex-end;
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.border};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+    buttoned: css`
+        align-items: center;
+    `,
+} satisfies Record<TabVariant, FlattenSimpleInterpolation>;
+
+type TabsWrapperProps = WithTransientProps<Required<Pick<TabsProps, 'variant'>>> & {
+    role?: AriaRole;
+};
+
+const TabsWrapper = styled(Box)<TabsWrapperProps>`
+    height: 4rem;
+    display: flex;
+    position: relative;
+
+    [role='tabpanel'] {
+        min-width: 0;
+        display: flex;
+        flex-grow: 1;
+        overflow-x: auto;
+        ${({ $variant }) => tabsVariantStyle[$variant]};
+    }
+
+    & > [role="cell"] {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 0;
+        margin-left: auto;
+        opacity: 0;
+        transition: opacity ${theme.transition.fastEaseOut};
+        z-index: 2;
+
+        &[aria-hidden="false"] {
+            opacity: 1;
+        }
+
+        &::after {
+            height: 100%;
+            width: ${theme.space.space32};
+            content: ' ';
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &:first-of-type {
+            left: 0;
+            
+            &::after {
+                left: 0;
+                background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
+            }
+        }
+
+        &:last-of-type {
+            right: 0;
+            
+            &::after {
+                right: 0;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
+            }
+        }
+    }
+`;
+
+type TabOverflowState = {
+    right: boolean;
+    left: boolean;
+}
+
+const isTabsOverflowing = (node: HTMLDivElement): TabOverflowState => {
+    if (node.scrollWidth > node.clientWidth) {
+        return {
+            right: node.clientWidth + node.scrollLeft < node.scrollWidth,
+            left: node.scrollLeft > 0,
+        };
+    }
+
+    return {
+        right: false,
+        left: false,
+    };
+};
+
+export const Tabs = ({ variant = 'default', tabs, activeTab, onSelect, ...props }: TabsProps) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [overflowState, setOveflowState] = useState<TabOverflowState>();
+
+    useResizeObserver(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target as HTMLDivElement)));
+    const scrollHandler = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
+        setOveflowState(isTabsOverflowing(event.currentTarget as HTMLDivElement));
+    }, []);
+
+    return <TabsWrapper {...props} role="tablist" data-test="tabs-wrapper" $variant={variant}>
+        <div role="cell" aria-hidden={!overflowState?.left} />
+        <div ref={ref} role="tabpanel" onScroll={scrollHandler}>
+            {tabs.map((tab) => (
+                <Tab
+                    {...tab}
+                    key={tab.id}
+                    variant={variant}
+                    active={tab.id === activeTab}
+                    onSelect={onSelect}
+                />
+            ))}
+        </div>
+        <div role="cell" aria-hidden={!overflowState?.right} />
+    </TabsWrapper>;
+};