@apify/ui-library 0.71.1-featcolortokens-178953.56 → 0.71.1-featcolortokens-178953.63

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -1,293 +0,0 @@
-import qs from 'query-string';
-import React from 'react';
-import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
-import styled from 'styled-components';
-
-import { CheckIcon, LinkIcon } from '@apify/ui-icons';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithOptional } from '../../type_utils.js';
-import { useCopyToClipboard } from '../../utils/index.js';
-import { Box } from '../box.js';
-import { CodeBlock, InlineCode, OneLineCode } from '../code/index.js';
-import type { LinkProps } from '../link.js';
-import { Link } from '../link.js';
-import { slugifyHeadingChildren } from '../readme_renderer/utils.js';
-import type { HeadingSharedProps } from '../text/heading_shared.js';
-import { Heading } from '../text/index.js';
-import type { SharedTextProps, SharedTextSize } from '../text/text_shared.js';
-
-const simpleMarkdownClassNames = {
-    HEADING_ICON_LINK: 'headingIconLink',
-} as const;
-
-export const MarkdownPlainHeading: React.FC<HeadingSharedProps> = ({
-    children,
-    ...rest
-}) => {
-    const id = slugifyHeadingChildren(children);
-
-    return (
-        <Heading
-            mt='space32'
-            mb='space16'
-            id={id}
-            {...rest}
-        >
-            {children}
-        </Heading>
-    );
-};
-
-const StyledMarkdownHeading = styled(Box)`
-    display: flex;
-    align-items: center;
-    gap: ${theme.space.space4};
-
-    .${simpleMarkdownClassNames.HEADING_ICON_LINK} {
-        height: 16px;
-        display: none;
-
-        svg {
-            max-height: 1em !important;
-        }
-    }
-
-    &:hover {
-        .${simpleMarkdownClassNames.HEADING_ICON_LINK} {
-            display: initial;
-        }
-    }
-`;
-
-/**
- * Default markdown heading that renders copy icon next to it.
- * Use `MarkdownPlainHeading` if you want to render simple heading instead
- */
-// TODO: This should be used for readmes
-export const MarkdownHeadingWrapper: React.FC<HeadingSharedProps> = ({
-    children,
-    ...rest
-}) => {
-    const id = slugifyHeadingChildren(children);
-
-    const [isCopied, handleClick] = useCopyToClipboard({
-        text: id ?? '',
-        // We want the whole URL to be copied, not just the ID
-        transform: (text) => {
-            const url = new URL(window.location.href);
-            url.hash = `#${text}`;
-            return url.toString();
-        },
-    });
-
-    return (
-        <StyledMarkdownHeading
-            mt='space32'
-            mb='space16'
-            id={id}
-            {...rest}
-        >
-            {children}
-            <Link
-                className={simpleMarkdownClassNames.HEADING_ICON_LINK}
-                onClick={handleClick}
-                to={`#${id}`}
-            >
-                {isCopied ? (
-                    <CheckIcon
-                        size="16"
-                        color={theme.color.success.action}
-                    />
-                ) : (
-                    <LinkIcon
-                        size="16"
-                        color={theme.color.primary.text}
-                    />
-                )}
-            </Link>
-        </StyledMarkdownHeading>
-    );
-};
-
-const StyledInlineCode = styled(InlineCode)`
-    /* If code is rendered within heading, it should inherit its font styles */
-    /* TODO: Look at implementation of InlineCode - maybe we can live without it */
-    h1 & code, h2 & code, h3 & code, h4 & code, h5 & code {
-        font-size: inherit !important;
-        line-height: inherit !important;
-    }
-
-    b & code, strong & code{
-        font-weight: inherit !important;
-    }
-`;
-
-type MarkdownCodeProps = Pick<CodeProps, 'inline' | 'className' | 'children'>
-
-export const MarkdownCode: React.FC<MarkdownCodeProps & { size: SharedTextSize }> = ({
-    inline,
-    className,
-    children,
-    size,
-}) => {
-    if (inline) {
-        return <StyledInlineCode size={size} className={className}>{children}</StyledInlineCode>;
-    }
-
-    const code = String(children).replace(/\n$/, '').trim();
-    const match = /language-(\w+)/.exec(className || '');
-    const language = match?.[1]?.toLowerCase();
-    const isOneLineCode = code.split('\n').length <= 1;
-
-    if (isOneLineCode) {
-        return (
-            <OneLineCode
-                language={language}
-                size={size}
-                fullWidth
-            >
-                {code}
-            </OneLineCode>
-        );
-    }
-
-    return (
-        <CodeBlock
-            content={code}
-            language={language}
-            size={size}
-            hideLineNumbers
-            fullWidth
-            hideBashHeader
-            hideBashPromptPrefixes
-        />
-    );
-};
-
-const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/)?([a-zA-Z0-9\-_]+)(?:\S*)?$/;
-const vimeoRegex = /^((?:https?:\/\/)?(?:player\.)?vimeo\.com(?:\/video)?\/(\d+))$/;
-
-const getVideoSrc = (link: string) => {
-    const youtubeLink = link.match(youtubeRegex);
-    const vimeoLink = link.match(vimeoRegex);
-    let src;
-    if (youtubeLink) {
-        // add rel=0 to disable related videos from other channels at the end of the video
-        // add enablejsapi=1 to enable tracking videos via API through Google Analytics
-        src = qs.stringifyUrl({ url: `https://www.youtube.com/embed/${youtubeLink[1]}`, query: { rel: 0, enablejsapi: 1 } });
-    }
-    if (vimeoLink) src = `https://player.vimeo.com/video/${vimeoLink[2]}`;
-
-    return src;
-};
-
-const StyledVideo = styled.div`
-    width: 65%;
-
-    & > div {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        padding-top: 56.25%;
-
-        & > iframe {
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-            width: 100%;
-            height: 100%;
-            border: 0px;
-        }
-    }
-`;
-
-interface MarkdownVideoProps {
-    src: string;
-}
-
-const MarkdownVideo = ({ src }: MarkdownVideoProps) => {
-    return (
-        <StyledVideo>
-            <div>
-                <iframe loading="lazy" allowFullScreen src={src} />
-            </div>
-        </StyledVideo>
-    );
-};
-
-const StyledMarkdownLink = styled(Link)`
-    overflow-wrap: break-word;
-
-    h1 &, h2 &, h3 &, h4 &, h5 & {
-        overflow-wrap: normal;
-    }
-
-    &:hover {
-        /* Links normally don't have underline, but in markdown we want to have it */
-        text-decoration: underline;
-    }
-`;
-
-export const MarkdownLink: React.FC<WithOptional<LinkProps, 'to'>> = ({
-    to,
-    children,
-    rel,
-    className,
-}) => {
-    return (to && typeof to === 'string') ? (
-        <StyledMarkdownLink to={to} hideExternalIcon={true} rel={rel} className={className}>{children}</StyledMarkdownLink>
-    ) : (
-        (<span>{children}</span>) // Invalid links can be rendered as a regular span instead
-    );
-};
-
-export const MarkdownBlockQuote = styled(Box).attrs({
-    my: 'space16',
-    py: 'none',
-    forwardedAs: 'blockquote',
-})`
-    border-left: 2px solid ${theme.color.neutral.separatorSubtle};
-    padding-left: ${theme.space.space16};
-
-    color: ${theme.color.neutral.textMuted};
-
-    & > p {
-        margin: 0;
-    }
-`;
-
-export const MarkdownTable = styled.table`
-    display: block;
-    overflow: auto;
-    border-collapse: collapse;
-
-    td, th {
-        border: 1px solid ${theme.color.neutral.border};
-        padding: ${theme.space.space16};
-        text-align: left;
-    }
-
-    tr:nth-child(even):not([class]) {
-        > th, > td {
-            background-color: inherit;
-        }
-    }
-`;
-
-// TODO: This should be used for readmes
-export const MarkdownParagraphContent: React.FC<SharedTextProps & Pick<ReactMarkdownProps, 'node'>> = ({
-    children,
-    node,
-}) => {
-    const child = node.children[0];
-    const isText = child?.type === 'text';
-
-    const videoSrc = isText && getVideoSrc(child.value);
-    if (videoSrc) return <MarkdownVideo src={videoSrc} />;
-
-    // the || null part is important because non-supported elements will fall back to this paragraph component;
-    return children || null;
-};

package/src/components/tabs/index.ts

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

package/src/components/tabs/tab.tsx

@@ -1,217 +0,0 @@
-import clsx from 'clsx';
-import { createPath } from 'history';
-import React from 'react';
-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;
-};
-
-export const TAB_CLASSNAMES = {
-    ICON: 'Tab-icon',
-    TITLE: 'Tab-title',
-    BADGE: 'Tab-badge',
-};
-
-const TabWrapper = styled(Link)<TabWrapperProps>`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${theme.space.space4};
-    flex-shrink: 0;
-    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_CLASSNAMES.ICON} {
-        color: inherit;
-        flex-shrink: 0;
-        transition: color ${theme.transition.fastEaseOut};
-    }
-
-    .${TAB_CLASSNAMES.TITLE} {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .${TAB_CLASSNAMES.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"
-            data-test-url={href}
-            className={clsx(className, { active, disabled })}
-            onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
-            $variant={variant}
-        >
-            {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
-            <Text size={tabVariantTextSize[variant]} className={TAB_CLASSNAMES.ICON} weight="bold" as="div">{title}</Text>
-            {chip && (
-                <Badge
-                    size={tabVariantBadgeSize[variant]}
-                    variant={active ? 'primary_black' : 'neutral_subtle'}
-                    className={TAB_CLASSNAMES.ICON}
-                >
-                    {chip}
-                </Badge>
-            )}
-            {rollout && <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue" className={TAB_CLASSNAMES.ICON}>{rollout}</Badge>}
-        </TabWrapper>
-    );
-};

package/src/components/tabs/tabs.tsx

@@ -1,169 +0,0 @@
-import React, { 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 { useResizeObserverSsr } from '../../utils/resize_observer.js';
-import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
-import { Box } from '../box.js';
-import type { TabData, TabVariant } from './tab.js';
-import { Tab } 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?: React.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]};
-
-        /* Scrollbar */
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-        
-        &::-webkit-scrollbar {
-            display: none; /* Chrome, Safari, Opera */
-        }
-    }
-
-    & > [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>();
-
-    useResizeObserverSsr(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>;
-};