@apify/ui-library 1.171.1 → 1.171.2-uilibraryversion2candida-85b55e.23

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

package/src/components/text/text_content.stories.tsx

@@ -1,194 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import styled from 'styled-components';
-
-import { type ContentTextProps, TextContent } from './text_content';
-
-export default {
-    title: 'Design Tokens/Typography/TextContent',
-    component: TextContent,
-    tags: ['deprecated'],
-    parameters: {
-        docs: {
-            description: {
-                component:
-                    '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component.' +
-                    ' It provides content-specific text styles for markdown rendering (paragraphs and code snippets).' +
-                    ' For general text usage, use TextShared or TextMarketing instead.',
-            },
-        },
-    },
-    argTypes: {
-        type: {
-            control: { type: 'select' },
-            options: ['paragraph', 'snippet'],
-            description: 'Text type: paragraph for regular markdown text, snippet for inline code',
-        },
-        weight: {
-            control: { type: 'select' },
-            options: ['normal', 'bold'],
-            description: 'Font weight',
-        },
-        as: {
-            control: 'text',
-            description: 'The HTML element to render as (default: p)',
-        },
-        children: {
-            control: 'text',
-            description: 'The text content',
-        },
-        color: {
-            control: 'color',
-            description: 'Custom color for the text',
-        },
-        align: {
-            control: { type: 'select' },
-            options: ['left', 'center', 'right'],
-            description: 'Text alignment',
-        },
-        italic: {
-            control: 'boolean',
-            description: 'Apply italic style',
-        },
-        uppercase: {
-            control: 'boolean',
-            description: 'Transform text to uppercase',
-        },
-    },
-} as Meta<ContentTextProps>;
-
-type Story = StoryObj<ContentTextProps>;
-
-const StoryWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 2rem;
-    max-width: 800px;
-`;
-
-const TextShowcase = styled.div`
-    padding: 1rem;
-    background: #f5f5f5;
-    border-radius: 4px;
-
-    small {
-        display: block;
-        color: #666;
-        font-size: 0.75rem;
-        margin-bottom: 0.5rem;
-        font-family: monospace;
-    }
-`;
-
-const WarningBanner = styled.div`
-    background: #fff3cd;
-    border: 1px solid #ffc107;
-    border-radius: 4px;
-    padding: 1rem;
-    margin-bottom: 1.5rem;
-
-    strong {
-        color: #856404;
-        display: block;
-        margin-bottom: 0.5rem;
-    }
-
-    p {
-        color: #856404;
-        margin: 0;
-        font-size: 0.875rem;
-    }
-`;
-
-/**
- * Default content text (used by SimpleMarkdown)
- *
- * ⚠️ This component is for internal use by SimpleMarkdown only
- */
-export const Default: Story = {
-    args: {
-        type: 'paragraph',
-        weight: 'normal',
-        children: 'Content text for markdown rendering.',
-    },
-};
-
-/**
- * All content text variants as used in SimpleMarkdown component
- *
- * ⚠️ These text styles are specifically designed for markdown content rendering.
- * For general application text, use TextShared or TextMarketing.
- */
-export const AllVariants: Story = {
-    render: () => (
-        <StoryWrapper>
-            <WarningBanner>
-                <strong>⚠️ Internal Component</strong>
-                <p>
-                    TextContent is used exclusively by the SimpleMarkdown component for rendering markdown paragraphs
-                    and inline code snippets. For general text usage in your application, use TextShared or
-                    TextMarketing components instead.
-                </p>
-            </WarningBanner>
-
-            <div>
-                <h3 style={{ marginTop: 0, marginBottom: '1rem' }}>Paragraph Type</h3>
-                <p style={{ fontSize: '0.875rem', color: '#666', marginBottom: '1rem' }}>
-                    Used for regular text content in markdown documents
-                </p>
-
-                <TextShowcase>
-                    <small>type=paragraph, weight=normal</small>
-                    <TextContent type="paragraph" weight="normal">
-                        This is a paragraph with normal weight, used for standard markdown text content. It provides
-                        optimal readability for documentation and readme files.
-                    </TextContent>
-                </TextShowcase>
-
-                <TextShowcase>
-                    <small>type=paragraph, weight=bold</small>
-                    <TextContent type="paragraph" weight="bold">
-                        This is a paragraph with bold weight, used for **strong text** in markdown. It creates emphasis
-                        for important information within the content.
-                    </TextContent>
-                </TextShowcase>
-            </div>
-
-            <div>
-                <h3 style={{ marginBottom: '1rem' }}>Snippet Type</h3>
-                <p style={{ fontSize: '0.875rem', color: '#666', marginBottom: '1rem' }}>
-                    Used for inline code within markdown text (e.g., `code`)
-                </p>
-
-                <TextShowcase>
-                    <small>type=snippet, weight=normal</small>
-                    <TextContent type="snippet" weight="normal">
-                        const inlineCode = &quot;monospace text for code snippets&quot;;
-                    </TextContent>
-                </TextShowcase>
-
-                <TextShowcase>
-                    <small>type=snippet, weight=bold</small>
-                    <TextContent type="snippet" weight="bold">
-                        function boldCodeSnippet() &#123; return &quot;emphasized code&quot;; &#125;
-                    </TextContent>
-                </TextShowcase>
-            </div>
-
-            <div style={{ marginTop: '2rem', padding: '1.5rem', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
-                <h4 style={{ marginTop: 0 }}>Example in Markdown Context</h4>
-                <TextContent type="paragraph" weight="normal" mb="space8">
-                    The SimpleMarkdown component uses these styles to render markdown. For example, when you write code
-                    like{' '}
-                    <TextContent type="snippet" weight="normal" as="span">
-                        npm install
-                    </TextContent>{' '}
-                    inline, it uses the snippet type.
-                </TextContent>
-                <TextContent type="paragraph" weight="bold">
-                    Bold text in markdown is rendered using paragraph with bold weight.
-                </TextContent>
-            </div>
-        </StoryWrapper>
-    ),
-};