@apify/ui-library 0.71.1-featcolortokens-178953.55 → 0.71.1-featcolortokens-178953.58

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';

package/src/components/text/text_shared.tsx

@@ -1,95 +0,0 @@
-import { forwardRef } 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';
-
-export const SHARED_TEXT_TYPES = ['body', 'code'] as const;
-export type SharedTextType = typeof SHARED_TEXT_TYPES[number];
-
-export type SharedTextSize = 'regular' | 'small' | 'big';
-export type SharedTextWeight = 'normal' | 'medium' | 'bold';
-
-export interface TransientSharedTextProps {
-    type?: SharedTextType,
-    size?: SharedTextSize,
-    weight?: SharedTextWeight,
-}
-
-type StyledSharedTextProps = WithTransientProps<TransientSharedTextProps>;
-export type SharedTextProps = TransientSharedTextProps & TextBaseProps;
-
-type TextSharedVariants = {
-    [Type in SharedTextType]: {
-        [Size in SharedTextSize]: {
-            [Weight in SharedTextWeight]: string;
-        };
-    };
-};
-
-const TEXT_SHARED_VARIANTS_CSS: TextSharedVariants = {
-    body: {
-        regular: {
-            normal: theme.typography.shared.tablet.bodyM,
-            medium: theme.typography.shared.tablet.bodyMMedium,
-            bold: theme.typography.shared.tablet.bodyMStrong,
-        },
-        small: {
-            normal: theme.typography.shared.tablet.bodyS,
-            medium: theme.typography.shared.tablet.bodySMedium,
-            bold: theme.typography.shared.tablet.bodySStrong,
-        },
-        big: {
-            normal: theme.typography.shared.tablet.bodyL,
-            medium: theme.typography.shared.tablet.bodyLMedium,
-            bold: theme.typography.shared.tablet.bodyLStrong,
-        },
-    },
-    code: {
-        regular: {
-            normal: theme.typography.shared.tablet.codeM,
-            medium: theme.typography.shared.tablet.codeMMedium,
-            bold: theme.typography.shared.tablet.codeMStrong,
-        },
-        small: {
-            normal: theme.typography.shared.tablet.codeS,
-            medium: theme.typography.shared.tablet.codeSMedium,
-            bold: theme.typography.shared.tablet.codeSStrong,
-        },
-        big: {
-            normal: theme.typography.shared.tablet.codeL,
-            medium: theme.typography.shared.tablet.codeLMedium,
-            bold: theme.typography.shared.tablet.codeLStrong,
-        },
-    },
-};
-
-const StyledTextShared = styled(TextBaseComponent)<StyledSharedTextProps>`
-    ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'body'][props.$size || 'regular'][props.$weight || 'normal']}
-`;
-
-export const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(({
-    type,
-    size,
-    weight,
-    as,
-    ...rest
-}, ref) => {
-    return (
-        <StyledTextShared
-            $type={type}
-            $size={size}
-            $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}
-        />
-    );
-});

package/src/components/tile/horizontal_tile.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type {
-    TileSharedProps,
-    TileSizesType,
-} from './shared.js';
-import {
-    TILE_SIZES,
-    tileStyle,
-} from './shared.js';
-
-interface HorizontalTileProps extends TileSharedProps {
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-}
-
-interface StyledTileWrapperProps {
-    $hasIcon?: boolean;
-    $size?: TileSizesType;
-}
-
-const WrapperClasses = {
-    TILE_CONTENT: 'Tile-Content',
-};
-
-const StyledTileWrapper = styled.div<StyledTileWrapperProps>`
-    ${tileStyle}
-    padding: ${({ $size }) => ($size === TILE_SIZES.SMALL ? theme.space.space16 : theme.space.space24)};
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    cursor: pointer;
-    transition: box-shadow ${theme.transition.smoothEaseOut},
-        background-color ${theme.transition.smoothEaseOut},
-        border-color ${theme.transition.smoothEaseOut};
-
-    &:hover {
-        box-shadow: ${theme.shadow.shadow1};
-        background-color: ${theme.color.neutral.hover};
-    }
-
-    &:active,
-    &:focus {
-        border-color: ${theme.color.primary.action};
-    }
-
-    ${({ $hasIcon }) => $hasIcon && `gap: ${theme.space.space8};`}
-
-    .${WrapperClasses.TILE_CONTENT} {
-        flex-grow: 1;
-    }
-`;
-
-export const HorizontalTile: React.FC<HorizontalTileProps> = ({
-    content,
-    icon,
-    action,
-    size = TILE_SIZES.SMALL,
-    onClick,
-    ...otherProps
-}) => {
-    return (
-        <StyledTileWrapper
-            $hasIcon={!!icon}
-            $size={size}
-            onClick={onClick}
-            {...otherProps}
-        >
-            <div>{icon}</div>
-            <div className={WrapperClasses.TILE_CONTENT}>{content}</div>
-            <div>{action}</div>
-        </StyledTileWrapper>
-    );
-};

package/src/components/tile/index.ts

@@ -1,2 +0,0 @@
-export * from './horizontal_tile.js';
-export * from './vertical_tile.js';

package/src/components/tile/shared.ts

@@ -1,27 +0,0 @@
-import { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-
-export const TILE_SIZES = {
-    SMALL: 'S',
-    LARGE: 'L',
-};
-
-export type TileSizesType = typeof TILE_SIZES[keyof typeof TILE_SIZES];
-
-export const tileStyle = css`
-    background-color: ${theme.color.neutral.background};
-    border: 1px solid ${theme.color.neutral.border};
-    border-radius: ${theme.radius.radius12};
-`;
-
-export type TileSharedProps = {
-    content: React.ReactNode,
-    size?: TileSizesType,
-    isClickable?: boolean,
-    onClick?: () => void,
-    id?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    as?: React.ElementType;
-};

package/src/components/tile/vertical_tile.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type {
-    TileSharedProps,
-    TileSizesType,
-} from './shared.js';
-import {
-    TILE_SIZES,
-    tileStyle,
-} from './shared.js';
-
-interface VerticalTileProps extends TileSharedProps {
-    content: React.ReactNode;
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-}
-
-interface StyledTileWrapperProps {
-    $size?: TileSizesType;
-}
-
-const WrapperClasses = {
-    TILE_CONTENT: 'Tile-Content',
-};
-
-const StyledTileWrapper = styled.div<StyledTileWrapperProps>`
-    ${tileStyle}
-    padding: ${({ $size }) => ($size === TILE_SIZES.SMALL ? theme.space.space16 : theme.space.space24)};
-    width: 100%;
-    cursor: pointer;
-    transition: box-shadow ${theme.transition.smoothEaseOut},
-        background-color ${theme.transition.smoothEaseOut},
-        border-color ${theme.transition.smoothEaseOut};
-
-    &:hover {
-        box-shadow: ${theme.shadow.shadow1};
-        background-color: ${theme.color.neutral.hover};
-    }
-
-    &:active,
-    &:focus {
-        border-color: ${theme.color.primary.action};
-    }
-`;
-
-export const VerticalTile: React.FC<VerticalTileProps> = ({
-    content,
-    size = TILE_SIZES.LARGE,
-    onClick,
-    ...otherProps
-}) => {
-    return (
-        <StyledTileWrapper $size={size} onClick={onClick} {...otherProps}>
-            <div className={WrapperClasses.TILE_CONTENT}>{content}</div>
-        </StyledTileWrapper>
-    );
-};