@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -0,0 +1,295 @@
+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 { Check16, Link16 } from '@apify/icons';
+
+import { theme } from '../../design_system/theme';
+import type { WithOptional } from '../../type_utils';
+import { useCopyToClipboard } from '../../utils';
+import { Box } from '../box';
+import { CodeBlock, InlineCode, OneLineCode } from '../code';
+import type { LinkProps } from '../link';
+import { Link } from '../link';
+import { slugifyHeadingChildren } from '../readme_renderer/utils';
+import { Heading } from '../text';
+import type { HeadingSharedProps } from '../text/heading_shared';
+import type { SharedTextProps, SharedTextSize } from '../text/text_shared';
+
+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 ? (
+                    <Check16
+                        color={theme.color.success.action}
+                        viewBox="0 0 16 16"
+                    />
+                ) : (
+                    <Link16
+                        color={theme.color.primary.text}
+                        viewBox="0 0 16 16"
+                    />
+                )}
+            </Link>
+        </StyledMarkdownHeading>
+    );
+};
+
+// 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;
+};
+
+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>
+        );
+    }
+
+    if (!inline) {
+        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;
+        }
+    }
+`;

package/src/components/tag.tsx

@@ -0,0 +1,185 @@
+import React, { type ForwardedRef, forwardRef } from 'react';
+import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+import type { IconComponent, IconSize } from '@apify/ui-icons';
+
+import { theme } from '../design_system/theme';
+import type { WithTransientProps } from '../type_utils';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from './box';
+import { Link, type RegularLinkProps } from './link';
+
+type TagSize = typeof TAG_SIZES[number];
+
+export const TAG_SIZES = ['large', 'medium', 'small'] as const;
+
+const TAG_ICON_SIZES = {
+    large: '20',
+    medium: '16',
+    small: '12',
+} satisfies Record<TagSize, IconSize>;
+
+const tagSizeStyle = {
+    large: css`
+        height: 4rem;
+        padding: ${theme.space.space8} ${theme.space.space12};
+        border-radius: ${theme.radius.radius12};
+        ${theme.typography.shared.desktop.bodyLMedium}
+    `,
+    medium: css`
+        height: 2.8rem;
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius8};
+        ${theme.typography.shared.desktop.bodyMMedium}
+    `,
+    small: css`
+        height: 2rem;
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+        ${theme.typography.shared.desktop.bodySMedium}
+
+        &:has(> svg:last-child:nth-child(1)) {
+            padding: ${theme.space.space2} ${theme.space.space4};
+        }
+    `,
+} satisfies Record<TagSize, FlattenSimpleInterpolation>;
+
+type TagVariant = typeof TAG_VARIANTS[number];
+
+export const TAG_VARIANTS = ['primary', 'secondary', 'accent', 'success', 'warning', 'error'] as const;
+
+const tagVariantStyle = {
+    primary: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: transparent;
+        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+    secondary: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: transparent;
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+    accent: css`
+        color: ${theme.color.primary.chipText};
+        fill: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.background};
+
+        &:hover {
+            background: ${theme.color.primary.backgroundHover};
+        }
+    `,
+    success: css`
+        color: ${theme.color.success.chipText};
+        fill: ${theme.color.success.chipText};
+        background: ${theme.color.success.background};
+
+        &:hover {
+            background: ${theme.color.success.backgroundHover};
+        }
+    `,
+    warning: css`
+        color: ${theme.color.warning.chipText};
+        fill: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.background};
+
+        &:hover {
+            background: ${theme.color.warning.backgroundHover};
+        }
+    `,
+    error: css`
+        color: ${theme.color.danger.chipText};
+        fill: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.background};
+
+        &:hover {
+            background: ${theme.color.danger.backgroundHover};
+        }
+    `,
+} satisfies Record<TagVariant, FlattenSimpleInterpolation>;
+
+type StyledTagProps = WithTransientProps<
+    Required<Pick<TagProps<any>, 'size' | 'variant'>>
+>;
+
+const StyledTag = styled(Box)<StyledTagProps>`
+    ${({ $size }) => tagSizeStyle[$size]};
+    ${({ $variant }) => tagVariantStyle[$variant]};
+
+    /* Static styles */
+    width: fit-content;
+    border: none;
+    outline: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${theme.space.space4};
+    cursor: pointer;
+    transition: background ${theme.transition.fastEaseOut};
+`;
+
+type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type TagNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    };
+}
+
+export type TagProps<T extends TagNodeType> = RegularBoxProps & MarginSpacingProps & ({
+    as?: T;
+    size?: TagSize;
+    variant?: TagVariant;
+    LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
+} & Omit<TagNodePropsMap[T]['props'], 'size'>);
+
+/**
+ * Component for displaying inherenly interactive chip descendant
+ */
+function TagWrapper<T extends TagNodeType>({
+    as,
+    size = 'small',
+    variant = 'primary',
+    LeadingIcon,
+    TrailingIcon,
+    children,
+    ...props
+}: TagProps<T>,
+ref: ForwardedRef<TagNodePropsMap[T]['element']>,
+) {
+    const component: React.ElementType = (as === 'a' ? Link : as ?? 'button');
+
+    return (
+        <StyledTag
+            as={component}
+            ref={ref}
+            $variant={variant}
+            $size={size}
+            {...props}
+        >
+            {LeadingIcon && <LeadingIcon size={TAG_ICON_SIZES[size]} />}
+            {children}
+            {TrailingIcon && <TrailingIcon size={TAG_ICON_SIZES[size]} />}
+        </StyledTag>
+    );
+};
+TagWrapper.displayName = 'Tag';
+
+// `forwardRef` can't handle generic types, should be fixable with React 19
+export const Tag = forwardRef(TagWrapper) as <T extends TagNodeType>(
+    props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
+) => ReturnType<typeof TagWrapper>;

package/src/components/text/heading_content.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import type { WithTransientProps } from '../../type_utils';
+import type { TextBaseProps } from './text_base';
+import { TextBaseComponent } from './text_base';
+
+type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+
+interface HeadingContentTransientProps {
+    type?: HeadingContentType,
+};
+
+const getContentHeadingStyles = (headingType: HeadingContentType) => css`
+    ${theme.typography.content.mobile[headingType]}
+
+    @media (min-width: ${theme.layout.tablet}) {
+        ${theme.typography.content.tablet[headingType]}
+    }
+
+    @media (min-width: ${theme.layout.desktop}) {
+        ${theme.typography.content.desktop[headingType]}
+    }
+`;
+
+type StyledHeadingContentProps = WithTransientProps<HeadingContentTransientProps>;
+export type HeadingContentProps = HeadingContentTransientProps & TextBaseProps;
+
+const HEADING_CONTENT_DEFAULT_ELEMENTS = {
+    heading1: 'h1',
+    heading2: 'h2',
+    heading3: 'h3',
+    heading4: 'h4',
+    heading5: 'h5',
+    heading6: 'h6',
+} as const;
+
+const StyledHeadingContent = styled(TextBaseComponent)<StyledHeadingContentProps>`
+    ${(props) => getContentHeadingStyles(props.$type || 'heading1')}
+`;
+
+export const HeadingContent: React.FC<HeadingContentProps> = ({
+    type,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledHeadingContent
+            $type={type}
+            forwardedAs={as || HEADING_CONTENT_DEFAULT_ELEMENTS[type || 'heading1']}
+            m='none'
+            {...rest}
+        />
+    );
+};

package/src/components/text/heading_marketing.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import type { WithTransientProps } from '../../type_utils';
+import type { TextBaseProps } from './text_base';
+import { TextBaseComponent } from './text_base';
+
+type HeadingMarketingType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
+
+interface HeadingMarketingTransientProps {
+    type?: HeadingMarketingType,
+};
+
+type StyledHeadingMarketingProps = WithTransientProps<HeadingMarketingTransientProps>;
+export type HeadingMarketingProps = HeadingMarketingTransientProps & TextBaseProps;
+
+const HEADING_MARKETING_DEFAULT_ELEMENTS: { [Type in HeadingMarketingType]: string } = {
+    titleXs: 'h6',
+    titleS: 'h5',
+    titleM: 'h4',
+    titleL: 'h3',
+    titleXl: 'h2',
+    title2xl: 'h1',
+    title3xl: 'h1',
+};
+
+const StyledHeadingMarketing = styled(TextBaseComponent)<StyledHeadingMarketingProps>`
+    ${(props) => `
+        ${theme.typography.marketing.mobile[props.$type || 'titleL']}
+
+         @media (${theme.device.tablet}) {
+            ${theme.typography.marketing.tablet[props.$type || 'titleL']}
+        }
+
+        @media (${theme.device.desktop}) {
+            ${theme.typography.marketing.desktop[props.$type || 'titleL']}
+        }
+    `}
+`;
+
+export const HeadingMarketing: React.FC<HeadingMarketingProps> = ({
+    type,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledHeadingMarketing
+            $type={type}
+            forwardedAs={as || HEADING_MARKETING_DEFAULT_ELEMENTS[type || 'titleL']}
+            m='none'
+            {...rest}
+        />
+    );
+};

package/src/components/text/heading_shared.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import type { WithTransientProps } from '../../type_utils';
+import type { TextBaseProps } from './text_base';
+import { TextBaseComponent } from './text_base';
+
+type HeadingSharedType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
+
+interface HeadingSharedTransientProps {
+    type?: HeadingSharedType,
+};
+
+type StyledHeadingSharedProps = WithTransientProps<HeadingSharedTransientProps>;
+export type HeadingSharedProps = HeadingSharedTransientProps & TextBaseProps;
+
+const HEADING_SHARED_DEFAULT_ELEMENTS: { [Type in HeadingSharedType]: string } = {
+    titleXs: 'h6',
+    titleS: 'h5',
+    titleM: 'h4',
+    titleL: 'h3',
+    titleXl: 'h2',
+    title2xl: 'h1',
+    title3xl: 'h1',
+};
+
+const StyledHeadingShared = styled(TextBaseComponent)<StyledHeadingSharedProps>`
+    ${(props) => `
+        ${theme.typography.shared.mobile[props.$type || 'titleL']}
+
+        @media (${theme.device.tablet}) {
+            ${theme.typography.shared.tablet[props.$type || 'titleL']}
+        }
+
+        @media (${theme.device.desktop}) {
+            ${theme.typography.shared.desktop[props.$type || 'titleL']}
+        }
+    `}
+`;
+
+const HeadingShared: React.FC<HeadingSharedProps> = ({
+    type,
+    as,
+    ...rest
+}) => {
+    return (
+        <StyledHeadingShared
+            $type={type}
+            forwardedAs={as || HEADING_SHARED_DEFAULT_ELEMENTS[type || 'titleL']}
+            m='none'
+            {...rest}
+        />
+    );
+};
+
+export default HeadingShared;

package/src/components/text/index.ts

@@ -0,0 +1,18 @@
+import HeadingShared from './heading_shared';
+import type { SharedTextProps } from './text_shared';
+import TextShared from './text_shared';
+
+export * from './text_base';
+export * from './text_content';
+export * from './text_marketing';
+export * from './heading_content';
+export * from './heading_marketing';
+
+export {
+    TextShared as Text, // Shared typography is the default
+    HeadingShared as Heading, // Shared typography is the default
+};
+
+export type {
+    SharedTextProps,
+};