@apify/ui-library 1.170.1 → 1.170.2-uilibraryversion2candida-85b55e.17

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

package/src/components/color_wheel_gradient/color_wheel_gradient.stories.tsx

@@ -1,152 +0,0 @@
-import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
-import type { ElementType } from 'react';
-
-import { ColorWheelGradient, type ColorWheelGradientProps } from './color_wheel_gradient';
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-    <div
-        style={{
-            position: 'relative',
-            width: '400px',
-            height: '400px',
-            backgroundColor: '#f5f5f5',
-            border: '1px solid #ddd',
-            borderRadius: '8px',
-            overflow: 'hidden',
-        }}
-    >
-        <style>
-            {`
-                @keyframes rotate {
-                    from { transform: rotate(0deg); }
-                    to { transform: rotate(360deg); }
-                }
-            `}
-        </style>
-        {children}
-    </div>
-);
-
-// oxlint-disable-next-line local/storybook-figma-design-url -- decorative gradient, no Figma counterpart
-export default {
-    title: 'UI-Library/ColorWheelGradient',
-    tags: ['deprecated'],
-    component: ColorWheelGradient,
-    decorators: [
-        (Story: ElementType, _context: StoryContext) => (
-            <Wrapper>
-                <Story />
-            </Wrapper>
-        ),
-    ],
-    argTypes: {
-        translateX: {
-            control: 'number',
-        },
-        translateY: {
-            control: 'number',
-        },
-        rotation: {
-            control: 'number',
-        },
-        radius: {
-            control: 'number',
-        },
-        blurSize: {
-            control: 'number',
-        },
-    },
-} as Meta<ColorWheelGradientProps>;
-
-type Story = StoryObj<ColorWheelGradientProps>;
-
-/**
- * Default color wheel gradient with standard settings
- */
-export const Default: Story = {
-    args: {
-        radius: 200,
-    },
-};
-
-/**
- * Small color wheel gradient
- */
-export const Small: Story = {
-    args: {
-        radius: 100,
-    },
-};
-
-/**
- * Medium color wheel gradient
- */
-export const Medium: Story = {
-    args: {
-        radius: 150,
-    },
-};
-
-/**
- * Large color wheel gradient
- */
-export const Large: Story = {
-    args: {
-        radius: 250,
-    },
-};
-
-/**
- * Color wheel gradient with custom translation in both directions
- */
-export const Translated: Story = {
-    args: {
-        radius: 150,
-        translateX: 30,
-        translateY: -30,
-    },
-};
-
-/**
- * Color wheel gradient with minimal blur
- */
-export const MinimalBlur: Story = {
-    args: {
-        radius: 200,
-        blurSize: 10,
-    },
-};
-
-/**
- * Color wheel gradient with no blur (sharp edges)
- */
-export const NoBlur: Story = {
-    args: {
-        radius: 200,
-        blurSize: 0,
-    },
-};
-
-/**
- * Animated rotating color wheel gradient
- */
-export const AnimatedRotation: Story = {
-    args: {
-        radius: 180,
-    },
-    render: (args) => (
-        <ColorWheelGradient
-            {...args}
-            style={{
-                animation: 'rotate 4s linear infinite',
-            }}
-        />
-    ),
-    parameters: {
-        docs: {
-            description: {
-                story: 'This story demonstrates a continuously rotating color wheel gradient using CSS animation.',
-            },
-        },
-    },
-};

package/src/components/color_wheel_gradient/color_wheel_gradient.tsx

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-export interface ColorWheelGradientProps {
-    translateX?: number;
-    translateY?: number;
-    rotation?: number;
-    radius?: number;
-    blurSize?: number;
-}
-
-export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`
-    ${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
-    z-index: 1;
-    position: absolute;
-    width: ${radius ? `${radius}px` : 'auto'};
-    height: ${radius ? `${radius}px` : 'auto'};
-    transform-origin: center;
-    transform: translate(${translateX}px, ${translateY}px) rotate(${rotation}deg);
-
-    opacity: 0.30;
-    background: conic-gradient(
-        rgba(93, 133, 225, 0.99) 0deg,
-        rgba(106, 20, 222, 0.99) 69deg,
-        rgba(228, 68, 103, 0.99) 150deg,
-        rgba(250, 129, 54, 0.99) 221deg,
-        rgba(240, 178, 27, 0.99) 287deg,
-        rgba(18, 150, 111, 0.99) 360deg
-    );
-
-    border-radius: 50%;
-    filter: blur(${blurSize}px)
-`}
-`;

package/src/components/color_wheel_gradient/index.ts

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