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

package/src/components/tag.tsx

@@ -1,196 +0,0 @@
-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.js';
-import type { WithTransientProps } from '../type_utils.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import type { RegularButtonProps } from './button.js';
-import { Link, type RegularLinkProps } from './link.js';
-import { Text } from './text/index.js';
-import { type SharedTextSize, type SharedTextType } from './text/text_shared.js';
-
-type TagSize = SharedTextSize;
-export const TAG_SIZES: TagSize[] = ['big', 'regular', 'small'];
-
-const TAG_ICON_SIZES = {
-    big: '20',
-    regular: '16',
-    small: '12',
-} satisfies Record<TagSize, IconSize>;
-
-export const TAG_VARIANTS = ['primary', 'secondary', 'subtle', 'accent', 'success', 'warning', 'error'] as const;
-type TagVariant = typeof TAG_VARIANTS[number];
-
-type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
-type TagNodePropsMap = {
-    a: {
-        element: HTMLAnchorElement;
-        props: RegularLinkProps;
-    };
-    button: {
-        element: HTMLButtonElement;
-        props: RegularButtonProps;
-    };
-}
-
-type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
-export type TagProps<T extends TagNodeType> = SharedTagProps & ({
-    as?: T;
-    size?: TagSize;
-    type?: SharedTextType;
-    variant?: TagVariant;
-    LeadingIcon?: IconComponent;
-    TrailingIcon?: IconComponent;
-} & Omit<TagNodePropsMap[T]['props'], 'size'>);
-
-const tagSizeStyle = {
-    big: css`
-        height: 4rem;
-        padding: ${theme.space.space8} ${theme.space.space12};
-        border-radius: ${theme.radius.radius12};
-    `,
-    regular: css`
-        height: 2.8rem;
-        padding: ${theme.space.space4} ${theme.space.space8};
-        border-radius: ${theme.radius.radius8};
-    `,
-    small: css`
-        height: 2rem;
-        padding: ${theme.space.space2} ${theme.space.space6};
-        border-radius: ${theme.radius.radius4};
-
-        &:has(> svg:last-child:nth-child(1)) {
-            padding: ${theme.space.space2} ${theme.space.space4};
-        }
-    `,
-} satisfies Record<TagSize, FlattenSimpleInterpolation>;
-
-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};
-        }
-    `,
-    subtle: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.icon};
-        background: ${theme.color.neutral.backgroundSubtle};
-
-        &: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<TagNodeType>, '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};
-`;
-
-/**
- * Component for displaying inherenly interactive chip descendant
- */
-function TagWrapper<T extends TagNodeType>({
-    as,
-    size = 'small',
-    type = 'body',
-    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 && (<Text size={size} type={type} weight="medium">{children}</Text>)}
-            {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>(
-    // eslint-disable-next-line no-use-before-define -- see comment above 👆
-    props: TagProps<T> & { ref?: ForwardedRef<TagNodePropsMap[T]['element']> },
-) => ReturnType<typeof TagWrapper>;

package/src/components/text/heading_content.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-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

@@ -1,55 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-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

@@ -1,55 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-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']}
-        }
-    `}
-`;
-
-export const HeadingShared: React.FC<HeadingSharedProps> = ({
-    type,
-    as,
-    ...rest
-}) => {
-    return (
-        <StyledHeadingShared
-            $type={type}
-            forwardedAs={as || HEADING_SHARED_DEFAULT_ELEMENTS[type || 'titleL']}
-            m='none'
-            {...rest}
-        />
-    );
-};

package/src/components/text/index.ts

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

package/src/components/text/text_base.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import type { WithTransientProps } from '../../type_utils.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
-
-export interface TransientTextBaseProps {
-    italic?: boolean
-    uppercase?: boolean
-    align?: 'left' | 'right' | 'center'
-    color?: string,
-}
-
-export type StyledTextBaseProps = WithTransientProps<TransientTextBaseProps>;
-export type TextBaseProps = TransientTextBaseProps & BoxProps;
-
-const StyledText = styled(Box)<StyledTextBaseProps>`
-    ${(props) => props.$italic && css`
-        font-style: italic;
-    `}
-
-    ${(props) => props.$uppercase && css`
-        text-transform: uppercase;
-    `}
-
-    ${(props) => props.$align && css`
-        text-align: ${props.$align};
-    `}
-
-    ${(props) => props.$color && css`
-        color: ${props.$color};
-    `}
-`;
-
-export const TextBaseComponent: React.FC<TextBaseProps> = ({
-    italic,
-    align,
-    color,
-    uppercase,
-    as,
-    ...rest
-}) => (
-    <StyledText
-        $italic={italic}
-        $align={align}
-        $color={color}
-        $uppercase={uppercase}
-        forwardedAs={as}
-        {...rest}
-    />
-);

package/src/components/text/text_content.tsx

@@ -1,104 +0,0 @@
-import { forwardRef } 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 { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-export type ContentTextType = 'paragraph' | 'snippet';
-export type ContentTextWeight = 'normal' | 'bold';
-
-export interface TransientContentTextProps {
-    type?: ContentTextType,
-    weight?: ContentTextWeight,
-}
-
-type StyledContentTextProps = WithTransientProps<TransientContentTextProps>;
-export type ContentTextProps = TransientContentTextProps & TextBaseProps;
-
-type TextContentVariants = {
-    [Type in ContentTextType]: {
-        [Weight in ContentTextWeight]: FlattenSimpleInterpolation;
-    };
-};
-
-const TEXT_SHARED_VARIANTS_CSS: TextContentVariants = {
-    paragraph: {
-        normal: css`
-            ${theme.typography.content.mobile.paragraph}
-
-            @media (min-width: ${theme.layout.tablet}) {
-                ${theme.typography.content.tablet.paragraph}
-            }
-
-            @media (min-width: ${theme.layout.desktop}) {
-                ${theme.typography.content.desktop.paragraph}
-            }
-        `,
-        bold: css`
-            ${theme.typography.content.mobile.paragraphStrong}
-
-            @media (min-width: ${theme.layout.tablet}) {
-                ${theme.typography.content.tablet.paragraphStrong}
-            }
-
-            @media (min-width: ${theme.layout.desktop}) {
-                ${theme.typography.content.desktop.paragraphStrong}
-            }
-        `,
-    },
-    snippet: {
-        normal: css`
-            ${theme.typography.content.mobile.snippet}
-
-            @media (min-width: ${theme.layout.tablet}) {
-                ${theme.typography.content.tablet.snippet}
-            }
-
-            @media (min-width: ${theme.layout.desktop}) {
-                ${theme.typography.content.desktop.snippet}
-            }
-        `,
-        bold: css`
-            ${theme.typography.content.mobile.snippetStrong}
-
-            @media (min-width: ${theme.layout.tablet}) {
-                ${theme.typography.content.tablet.snippetStrong}
-            }
-
-            @media (min-width: ${theme.layout.desktop}) {
-                ${theme.typography.content.desktop.snippetStrong}
-            }
-        `,
-    },
-};
-
-const StyledTextContent = styled(TextBaseComponent)<StyledContentTextProps>`
-    ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'paragraph'][props.$weight || 'normal']}
-`;
-
-export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(({
-    type,
-    weight,
-    as,
-    ...rest
-}, ref) => {
-    return (
-        <StyledTextContent
-            $type={type}
-            $weight={weight}
-            forwardedAs={as || 'p'}
-            ref={ref}
-            // We have global CSS file that defines margins for p and h to some 'normalized' value
-            // But at the same time we want to have default margin set to 0 for Text and Headings
-            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
-            // Until then we have to set default 0 margin here
-            m='none'
-            {...rest}
-        />
-    );
-});
-
-TextContent.displayName = 'TextContent';

package/src/components/text/text_marketing.tsx

@@ -1,152 +0,0 @@
-import { forwardRef } 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 { TextBaseProps } from './text_base.js';
-import { TextBaseComponent } from './text_base.js';
-
-export type MarketingTextSize = 'large' | 'regular' | 'small' | 'extraSmall';
-export type MarketingTextWeight = 'normal' | 'bold';
-
-export interface TransientMarketingTextProps {
-    size?: MarketingTextSize,
-    weight?: MarketingTextWeight,
-}
-
-type StyledMarketingTextProps = WithTransientProps<TransientMarketingTextProps>;
-export type MarketingTextProps = TransientMarketingTextProps & TextBaseProps;
-
-type TextMarketingVariants = {
-    [Size in MarketingTextSize]: {
-        [Weight in MarketingTextWeight]: FlattenSimpleInterpolation;
-    };
-};
-
-const TEXT_MARKETING_VARIANTS_CSS: TextMarketingVariants = {
-    large: {
-        normal: css`
-            ${theme.typography.marketing.mobile.bodyL}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyL}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyL}
-            }
-        `,
-        bold: css`
-            ${theme.typography.marketing.mobile.bodyLStrong}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyLStrong}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyLStrong}
-            }
-        `,
-    },
-    regular: {
-        normal: css`
-            ${theme.typography.marketing.mobile.bodyM}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyM}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyM}
-            }
-        `,
-        bold: css`
-            ${theme.typography.marketing.mobile.bodyMStrong}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyMStrong}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyMStrong}
-            }
-        `,
-    },
-    small: {
-        normal: css`
-            ${theme.typography.marketing.mobile.bodyS}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyS}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyS}
-            }
-        `,
-        bold: css`
-            ${theme.typography.marketing.mobile.bodySStrong}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodySStrong}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodySStrong}
-            }
-        `,
-    },
-    extraSmall: {
-        normal: css`
-            ${theme.typography.marketing.mobile.bodyXs}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyXs}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyXs}
-            }
-        `,
-        bold: css`
-            ${theme.typography.marketing.mobile.bodyXsStrong}
-
-            @media (${theme.device.tablet}) {
-                ${theme.typography.marketing.tablet.bodyXsStrong}
-            }
-
-            @media (${theme.device.desktop}) {
-                ${theme.typography.marketing.desktop.bodyXsStrong}
-            }
-        `,
-    },
-};
-
-const StyledTextMarketing = styled(TextBaseComponent)<StyledMarketingTextProps>`
-    ${(props) => TEXT_MARKETING_VARIANTS_CSS[props.$size || 'regular'][props.$weight || 'normal']}
-`;
-
-export const TextMarketing = forwardRef<HTMLElement | undefined, MarketingTextProps>(({
-    weight,
-    size,
-    as,
-    ...rest
-}, ref) => {
-    return (
-        <StyledTextMarketing
-            $weight={weight}
-            $size={size}
-            forwardedAs={as || 'p'}
-            ref={ref}
-            // We have global CSS file that defines margins for p and h to some 'normalized' value
-            // But at the same time we want to have default margin set to 0 for Text and Headings
-            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
-            // Until then we have to set default 0 margin here
-            m='none'
-            {...rest}
-        />
-    );
-});
-
-TextMarketing.displayName = 'TextMarketing';