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

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>
-    );
-};

package/src/components/to_consolidate/card.tsx

@@ -1,141 +0,0 @@
-import clsx from 'clsx';
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
-import { Text } from '../text/index.js';
-
-export const cardClassNames = {
-    WRAPPER: 'Card',
-    HEADER: 'Card-header',
-    CAPTION: 'Card-caption',
-    ACTIONS: 'Card-actions',
-    DESCRIPTION: 'Card-description',
-    CONTENT: 'Card-content',
-};
-
-interface TransientCardProps {
-    disabled?: boolean,
-    shadowless?: boolean,
-}
-
-interface RegularCardProps {
-    caption?: React.ReactNode;
-    description?: React.ReactNode;
-    actions?: React.ReactNode;
-    children: React.ReactNode;
-}
-
-export type StyledCardProps = WithTransientProps<TransientCardProps>;
-export type CardProps = TransientCardProps & RegularCardProps & BoxProps;
-
-export const StyledCardWrapper = styled(Box)<StyledCardProps>`
-    /* 👇 this is consoleStyle.partialStyle.card */
-    background-color: ${theme.color.neutral.cardBackground};
-    border: 1px solid ${theme.color.neutral.border};
-    border-radius: ${theme.radius.radius8};
-    box-shadow: var(--shadow-1);
-    padding: 2rem;
-    box-sizing: border-box;
-
-    /* Reset padding, it is dealt with within header and content styles */
-    padding: 0;
-    width: 100%;
-    font-size: 1.4rem;
-    position: relative;
-
-    & > .${cardClassNames.HEADER} {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center; /* so it aligns nicely with various content in corner, eg. button */
-        padding: ${theme.space.space16} ${theme.space.space16} ${theme.space.space8};
-        border-radius: ${theme.radius.radius8} ${theme.radius.radius8} 0 0;
-
-        .${cardClassNames.ACTIONS} {
-            margin-left: 2rem;
-
-            button {
-                font-size: 1.4rem;
-                line-height: 1.4rem;
-                font-weight: 500;
-            }
-        }
-    }
-
-    & > .${cardClassNames.DESCRIPTION} {
-        padding: 0rem ${theme.space.space16} ${theme.space.space16} ${theme.space.space16};
-        color: ${theme.color.neutral.textSubtle};
-    }
-
-    & > .${cardClassNames.CONTENT} {
-        position: relative;
-        display: block;
-        padding: ${theme.space.space16};
-        border-bottom-right-radius: ${theme.radius.radius8};
-        border-bottom-left-radius: ${theme.radius.radius8};
-    }
-
-    ${({ $shadowless }) => ($shadowless && css`
-        box-shadow: none;
-    `)}
-
-    ${({ $disabled }) => ($disabled && css`
-        .${cardClassNames.CONTENT} {
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0; bottom: 0; left: 0; right: 0; /* stretch full */
-                background: ${theme.color.neutral.backgroundSubtle} !important;
-                opacity: 0.4;
-                pointer-events: all;
-            }
-        }
-    `)}
-`;
-
-export const Card = forwardRef<HTMLElement, CardProps>(({
-    as,
-    className,
-    caption,
-    description,
-    actions,
-    children,
-    disabled,
-    shadowless,
-    ...rest
-}, ref) => {
-    return (
-        <StyledCardWrapper
-            $disabled={disabled}
-            $shadowless={shadowless}
-            forwardedAs={ as || 'section'}
-            className={clsx(cardClassNames.WRAPPER, className)}
-            data-test='card'
-            {...rest}
-            ref={ref}
-        >
-            {(!!caption || !!actions) && (
-                <header className={cardClassNames.HEADER} data-test='card-header'>
-                    {caption && (
-                        <Text
-                            as='div'
-                            size='big'
-                            weight='bold'
-                            className={cardClassNames.CAPTION}
-                            data-test='card-caption'
-                        >
-                            {caption}
-                        </Text>
-                    )}
-                    {actions && (<div className={cardClassNames.ACTIONS} data-test='card-actions'>{actions}</div>)}
-                </header>
-            )}
-            {description && (<div className={cardClassNames.DESCRIPTION} data-test='card-description'>{description}</div>)}
-            <div className={cardClassNames.CONTENT} data-test='card-content'>{children}</div>
-        </StyledCardWrapper>
-    );
-});

package/src/components/to_consolidate/index.ts

@@ -1,4 +0,0 @@
-export * from './card.js';
-export * from './pagination.js';
-export * from './markdown.js';
-export * from './tab_number_chip.js';