@apify/ui-library 1.171.0 → 1.171.1-uilibraryversion2candida-85b55e.71

package/src/components/banner/banner.tsx

@@ -1,91 +0,0 @@
-import type React from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme';
-
-const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_2285_34756)">
-    <g filter="url(#filter0_f_2285_34756)">
-    <path d="M-39.7702 191.085C-55.0622 193.205 -68.8864 201.311 -78.2029 213.621C-87.5194 225.932 -91.5654 241.438 -89.4512 256.731L-55.0077 502.652L89.8852 173L-39.7702 191.085Z" fill="url(#paint0_linear_2285_34756)"/>
-    </g>
-    <g filter="url(#filter1_f_2285_34756)">
-    <path d="M1267.53 398.062L1253.99 209.002C1252.85 193.626 1245.67 179.327 1234.01 169.234C1222.36 159.14 1207.18 154.073 1191.8 155.14C1190.5 155.19 1189.2 155.331 1187.92 155.564L1132 163.289L1254.84 438.685C1264.05 427.236 1268.59 412.721 1267.53 398.062Z" fill="url(#paint1_linear_2285_34756)"/>
-    </g>
-    <g filter="url(#filter2_f_2285_34756)">
-    <path d="M561 29.7691C570.917 30.4746 580.956 29.5571 590.142 27.1057L801.075 -28.7862L700.682 -170L561 29.7691Z" fill="url(#paint2_linear_2285_34756)"/>
-    </g>
-    </g>
-    <defs>
-    <filter id="filter0_f_2285_34756" x="-170" y="93" width="339.885" height="489.652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
-    </filter>
-    <filter id="filter1_f_2285_34756" x="1052" y="75" width="295.683" height="443.686" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
-    </filter>
-    <filter id="filter2_f_2285_34756" x="481" y="-250" width="400.074" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
-    </filter>
-    <linearGradient id="paint0_linear_2285_34756" x1="-0.0574112" y1="173" x2="-0.0574112" y2="502.652" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#00FF85"/>
-    <stop offset="1" stop-color="#00FF47" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="paint1_linear_2285_34756" x1="1146.02" y1="174.549" x2="1333.1" y2="293.915" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#00FFF0"/>
-    <stop offset="1" stop-color="#1672EB"/>
-    </linearGradient>
-    <linearGradient id="paint2_linear_2285_34756" x1="681.037" y1="-170" x2="681.037" y2="30" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#F5B315"/>
-    <stop offset="1" stop-color="#FF2CC4"/>
-    </linearGradient>
-    <clipPath id="clip0_2285_34756">
-    <rect width="1200" height="1791.08" rx="16" fill="white"/>
-    </clipPath>
-    </defs>
-</svg>
-`;
-
-interface BannerProps {
-    background?: string;
-    useGradientBackground?: boolean;
-    width?: string;
-    className?: string;
-    children: React.ReactNode;
-}
-
-const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
-    return css`
-        background-color: ${background || theme.color.neutral.backgroundSubtle};
-        ${useGradientBackground &&
-        `
-            background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
-            `}
-    `;
-};
-
-const StyledBanner = styled.div<{ $background?: string; $useGradientBackground?: boolean; width?: string }>`
-    width: ${(props) => props.width || '100%'};
-    padding: ${theme.space.space40} ${theme.space.space80};
-    border-radius: ${theme.radius.radius16};
-
-    ${({ $background, $useGradientBackground }) => getBannerBackground($background, $useGradientBackground)};
-`;
-
-export const Banner: React.FC<BannerProps> = ({
-    useGradientBackground = true,
-    background,
-    children,
-    ...otherProps
-}) => (
-    <StyledBanner $background={background} $useGradientBackground={useGradientBackground} {...otherProps}>
-        {children}
-    </StyledBanner>
-);

package/src/components/banner/index.ts

@@ -1 +0,0 @@
-export * from './banner';

package/src/components/chip/chip.stories.tsx

@@ -1,311 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Chip, CHIP_SIZES, CHIP_TYPES, type ChipProps } from './chip';
-
-const mockIcons = {
-    star: <span style={{ fontSize: '14px' }}>⭐</span>,
-    check: <span style={{ fontSize: '14px' }}>✓</span>,
-    warning: <span style={{ fontSize: '14px' }}>⚠️</span>,
-    error: <span style={{ fontSize: '14px' }}>❌</span>,
-    info: <span style={{ fontSize: '14px' }}>ℹ️</span>,
-    heart: <span style={{ fontSize: '14px' }}>❤️</span>,
-    tag: <span style={{ fontSize: '14px' }}>#</span>,
-};
-
-export default {
-    title: 'UI-Library/Chip',
-    tags: ['deprecated'],
-    component: Chip,
-    argTypes: {
-        type: {
-            control: 'select',
-            options: Object.values(CHIP_TYPES),
-        },
-        size: {
-            control: 'select',
-            options: Object.values(CHIP_SIZES),
-        },
-        clickable: {
-            control: 'boolean',
-        },
-        icon: {
-            control: false,
-        },
-        children: {
-            control: 'text',
-        },
-        className: {
-            control: 'text',
-        },
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'TODO: Add Figma URL',
-        },
-    },
-} as Meta<ChipProps>;
-
-type Story = StoryObj<ChipProps>;
-
-/**
- * Default chip with medium size and default type
- */
-export const Default: Story = {
-    args: {
-        children: 'Default Chip',
-    },
-};
-
-/**
- * Extra small chip - the smallest size available
- */
-export const ExtraSmall: Story = {
-    args: {
-        size: CHIP_SIZES.EXTRA_SMALL,
-        children: 'XS Chip',
-    },
-};
-
-/**
- * Small chip size
- */
-export const Small: Story = {
-    args: {
-        size: CHIP_SIZES.SMALL,
-        children: 'Small Chip',
-    },
-};
-
-/**
- * Medium chip size (default)
- */
-export const Medium: Story = {
-    args: {
-        size: CHIP_SIZES.MEDIUM,
-        children: 'Medium Chip',
-    },
-};
-
-/**
- * Large chip size
- */
-export const Large: Story = {
-    args: {
-        size: CHIP_SIZES.LARGE,
-        children: 'Large Chip',
-    },
-};
-
-/**
- * Primary chip type with brand colors
- */
-export const Primary: Story = {
-    args: {
-        type: CHIP_TYPES.PRIMARY,
-        children: 'Primary Chip',
-    },
-};
-
-/**
- * Success chip type for positive states
- */
-export const Success: Story = {
-    args: {
-        type: CHIP_TYPES.SUCCESS,
-        children: 'Success Chip',
-    },
-};
-
-/**
- * Warning chip type for cautionary states
- */
-export const Warning: Story = {
-    args: {
-        type: CHIP_TYPES.WARNING,
-        children: 'Warning Chip',
-    },
-};
-
-/**
- * Danger chip type for error or critical states
- */
-export const Danger: Story = {
-    args: {
-        type: CHIP_TYPES.DANGER,
-        children: 'Danger Chip',
-    },
-};
-
-/**
- * Chip with an icon on the right side
- */
-export const WithIcon: Story = {
-    args: {
-        children: 'Starred',
-        icon: mockIcons.star,
-    },
-};
-
-/**
- * Primary chip with check icon
- */
-export const PrimaryWithIcon: Story = {
-    args: {
-        type: CHIP_TYPES.PRIMARY,
-        children: 'Completed',
-        icon: mockIcons.check,
-    },
-};
-
-/**
- * Success chip with check icon
- */
-export const SuccessWithIcon: Story = {
-    args: {
-        type: CHIP_TYPES.SUCCESS,
-        children: 'Verified',
-        icon: mockIcons.check,
-    },
-};
-
-/**
- * Warning chip with warning icon
- */
-export const WarningWithIcon: Story = {
-    args: {
-        type: CHIP_TYPES.WARNING,
-        children: 'Caution',
-        icon: mockIcons.warning,
-    },
-};
-
-/**
- * Danger chip with error icon
- */
-export const DangerWithIcon: Story = {
-    args: {
-        type: CHIP_TYPES.DANGER,
-        children: 'Error',
-        icon: mockIcons.error,
-    },
-};
-
-/**
- * Clickable chip with pointer cursor
- */
-export const Clickable: Story = {
-    args: {
-        children: 'Click me',
-        clickable: true,
-    },
-};
-
-/**
- * Non-clickable chip with default cursor
- */
-export const NonClickable: Story = {
-    args: {
-        children: 'Static chip',
-        clickable: false,
-    },
-};
-
-/**
- * Large primary clickable chip with icon
- */
-export const LargePrimaryClickableWithIcon: Story = {
-    args: {
-        type: CHIP_TYPES.PRIMARY,
-        size: CHIP_SIZES.LARGE,
-        children: 'Premium Feature',
-        icon: mockIcons.star,
-        clickable: true,
-    },
-};
-
-/**
- * Small success chip showing status
- */
-export const SmallStatusChip: Story = {
-    args: {
-        type: CHIP_TYPES.SUCCESS,
-        size: CHIP_SIZES.SMALL,
-        children: 'Active',
-    },
-};
-
-/**
- * Extra small chip for compact layouts
- */
-export const ExtraSmallTag: Story = {
-    args: {
-        size: CHIP_SIZES.EXTRA_SMALL,
-        children: 'Tag',
-        icon: mockIcons.tag,
-    },
-};
-
-/**
- * Chip with longer text content
- */
-export const WithLongText: Story = {
-    args: {
-        children: 'This is a longer chip text',
-        type: CHIP_TYPES.PRIMARY,
-    },
-};
-
-/**
- * Multiple chips showcasing different types in one view
- */
-export const AllTypes: Story = {
-    render: () => (
-        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-            <Chip type={CHIP_TYPES.DEFAULT}>Default</Chip>
-            <Chip type={CHIP_TYPES.PRIMARY}>Primary</Chip>
-            <Chip type={CHIP_TYPES.SUCCESS}>Success</Chip>
-            <Chip type={CHIP_TYPES.WARNING}>Warning</Chip>
-            <Chip type={CHIP_TYPES.DANGER}>Danger</Chip>
-        </div>
-    ),
-};
-
-/**
- * Multiple chips showcasing different sizes in one view
- */
-export const AllSizes: Story = {
-    render: () => (
-        <div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
-            <Chip size={CHIP_SIZES.EXTRA_SMALL}>XS</Chip>
-            <Chip size={CHIP_SIZES.SMALL}>Small</Chip>
-            <Chip size={CHIP_SIZES.MEDIUM}>Medium</Chip>
-            <Chip size={CHIP_SIZES.LARGE}>Large</Chip>
-        </div>
-    ),
-};
-
-/**
- * Chips with various icons demonstrating versatility
- */
-export const WithVariousIcons: Story = {
-    render: () => (
-        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-            <Chip type={CHIP_TYPES.SUCCESS} icon={mockIcons.check}>
-                Approved
-            </Chip>
-            <Chip type={CHIP_TYPES.WARNING} icon={mockIcons.warning}>
-                Pending
-            </Chip>
-            <Chip type={CHIP_TYPES.DANGER} icon={mockIcons.error}>
-                Failed
-            </Chip>
-            <Chip type={CHIP_TYPES.PRIMARY} icon={mockIcons.heart}>
-                Favorite
-            </Chip>
-            <Chip type={CHIP_TYPES.DEFAULT} icon={mockIcons.info}>
-                Info
-            </Chip>
-        </div>
-    ),
-};

package/src/components/chip/chip.tsx

@@ -1,167 +0,0 @@
-import clsx from 'clsx';
-import type { FC } from 'react';
-import type React from 'react';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme';
-import type { ValueOf } from '../../internal_type_utils';
-import type { RegularBoxProps } from '../box';
-
-export const CHIP_SIZES = {
-    EXTRA_SMALL: 'XS',
-    SMALL: 'S',
-    MEDIUM: 'M',
-    LARGE: 'L',
-} as const;
-type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
-
-export const CHIP_TYPES = {
-    DEFAULT: 'DEFAULT',
-    PRIMARY: 'PRIMARY',
-    SUCCESS: 'SUCCESS',
-    WARNING: 'WARNING',
-    DANGER: 'DANGER',
-} as const;
-export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
-
-export const classNames = {
-    BODY: 'Chip-body',
-};
-
-const chipSizeStyle = {
-    [CHIP_SIZES.EXTRA_SMALL]: css`
-        font-size: 12px;
-        line-height: 16px;
-        padding: 0 4px;
-        border-radius: 6px;
-    `,
-    [CHIP_SIZES.SMALL]: css`
-        font-size: 12px;
-        line-height: 16px;
-        padding: 2px 4px;
-        border-radius: 6px;
-    `,
-    [CHIP_SIZES.MEDIUM]: css`
-        font-size: 14px;
-        line-height: 20px;
-        padding: 2px 8px;
-        border-radius: 100px;
-    `,
-    [CHIP_SIZES.LARGE]: css`
-        /* TODO: (typography-mismatch) 16px/20px does not match any canonical typography token — needs designer input. Blocks migrating chipSizeStyle to typography token interpolations (XS/S match bodyS, M matches bodyM). */
-        font-size: 16px;
-        line-height: 20px;
-        padding: 2px 8px;
-        border-radius: 100px;
-    `,
-} satisfies Record<CHIP_SIZES, unknown>;
-
-const chipTypeStyle = {
-    [CHIP_TYPES.DEFAULT]: css`
-        color: ${theme.color.neutral.text};
-        background: ${theme.color.neutral.chipBackground};
-    `,
-    [CHIP_TYPES.PRIMARY]: css`
-        color: ${theme.color.primary.chipText};
-        background: ${theme.color.primary.chipBackground};
-    `,
-    [CHIP_TYPES.SUCCESS]: css`
-        color: ${theme.color.success.chipText};
-        background: ${theme.color.success.chipBackground};
-    `,
-    [CHIP_TYPES.WARNING]: css`
-        color: ${theme.color.warning.chipText};
-        background: ${theme.color.warning.chipBackground};
-    `,
-    [CHIP_TYPES.DANGER]: css`
-        color: ${theme.color.danger.chipText};
-        background: ${theme.color.danger.chipBackground};
-    `,
-} satisfies Record<CHIP_TYPES, unknown>;
-
-const chipTypeHoverStyle = {
-    [CHIP_TYPES.DEFAULT]: css`
-        background: ${theme.color.neutral.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.PRIMARY]: css`
-        background: ${theme.color.primary.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.SUCCESS]: css`
-        background: ${theme.color.success.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.WARNING]: css`
-        background: ${theme.color.warning.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.DANGER]: css`
-        background: ${theme.color.danger.chipBackgroundHover};
-    `,
-} satisfies Record<CHIP_TYPES, unknown>;
-
-const StyledChip = styled.span<{ size: CHIP_SIZES; type: CHIP_TYPES; clickable: boolean }>`
-    ${({ size }) => chipSizeStyle[size]};
-    ${({ type }) => chipTypeStyle[type]};
-    ${({ type, clickable }) =>
-        clickable &&
-        css`
-            &:hover {
-                ${chipTypeHoverStyle[type]};
-            }
-        `};
-    /* Static styles */
-    width: fit-content;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    /* TODO: (typography-keyword) 'normal' keyword used instead of numeric value (400) or typography token. */
-    font-weight: normal;
-    white-space: nowrap;
-    cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
-    gap: ${theme.space.space4};
-`;
-
-export type ChipProps = RegularBoxProps & {
-    type?: CHIP_TYPES;
-    size?: CHIP_SIZES;
-    icon?: React.ReactNode;
-    clickable?: boolean;
-};
-
-/**
- * Component for displaying status and for labelling other components.
- * @deprecated Use Tag or Badge
- */
-export const Chip = forwardRef(
-    (
-        {
-            type = CHIP_TYPES.DEFAULT,
-            size = CHIP_SIZES.MEDIUM,
-            clickable = false,
-            icon,
-            children,
-            className,
-            ...passThroughProps
-        }: ChipProps,
-        ref,
-    ) => {
-        const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
-
-        return (
-            <StyledChip ref={ref} {...otherProps}>
-                {children}
-                {icon}
-            </StyledChip>
-        );
-    },
-);
-
-Chip.displayName = 'Chip';
-
-type SpecificChipProps = Omit<ChipProps, 'type'>;
-
-export const PrimaryChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.PRIMARY} {...props} />;
-export const NeutralChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DEFAULT} {...props} />;
-export const SuccessChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.SUCCESS} {...props} />;
-export const DangerChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DANGER} {...props} />;
-export const WarningChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.WARNING} {...props} />;

package/src/components/chip/index.ts

@@ -1 +0,0 @@
-export * from './chip';