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

package/src/components/banner/banner.stories.tsx

@@ -1,238 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import type React from 'react';
-
-import { Banner } from './banner';
-
-interface BannerProps {
-    background?: string;
-    useGradientBackground?: boolean;
-    width?: string;
-    className?: string;
-    children: React.ReactNode;
-}
-
-export default {
-    title: 'UI-Library/Banner',
-    component: Banner,
-    argTypes: {
-        background: {
-            control: 'text',
-        },
-        useGradientBackground: {
-            control: 'boolean',
-        },
-        width: {
-            control: 'text',
-        },
-        className: {
-            control: 'text',
-        },
-        children: {
-            control: false,
-        },
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'TODO: Add Figma URL',
-        },
-    },
-} as Meta<BannerProps>;
-
-type Story = StoryObj<BannerProps>;
-
-/**
- * Default banner with gradient background enabled
- */
-export const Default: Story = {
-    args: {
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Welcome to Apify</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>Build reliable web scrapers. Fast.</p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with gradient background enabled (explicitly set to true)
- */
-export const WithGradientBackground: Story = {
-    args: {
-        useGradientBackground: true,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Gradient Background Banner</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
-                    This banner uses the beautiful gradient background with colorful shapes.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner without gradient background - shows solid background color
- */
-export const WithoutGradientBackground: Story = {
-    args: {
-        useGradientBackground: false,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px' }}>Simple Banner</h2>
-                <p style={{ margin: 0, opacity: 0.7 }}>
-                    This banner uses a simple solid background without gradient effects.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with custom background color
- */
-export const WithCustomBackground: Story = {
-    args: {
-        background: '#4CAF50',
-        useGradientBackground: false,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Green Background</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                    This banner has a custom green background color.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with custom background color and gradient overlay
- */
-export const WithCustomBackgroundAndGradient: Story = {
-    args: {
-        background: '#2196F3',
-        useGradientBackground: true,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Blue Background with Gradient</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                    Custom blue background with gradient overlay effects.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with custom width
- */
-export const WithCustomWidth: Story = {
-    args: {
-        width: '600px',
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Width Banner</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
-                    This banner has a fixed width of 600px instead of 100%.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with minimal content
- */
-export const WithMinimalContent: Story = {
-    args: {
-        children: <p style={{ margin: 0, color: 'white', textAlign: 'center' }}>Simple announcement message</p>,
-    },
-};
-
-/**
- * Banner with rich content including buttons and links
- */
-export const WithRichContent: Story = {
-    args: {
-        children: (
-            <div>
-                <h1 style={{ margin: 0, marginBottom: '12px', color: 'white', fontSize: '2rem' }}>
-                    🚀 New Feature Launch
-                </h1>
-                <p style={{ margin: 0, marginBottom: '16px', color: 'rgba(255, 255, 255, 0.9)' }}>
-                    We&apos;ve just released our most powerful web scraping tools yet. Experience faster, more reliable
-                    data extraction with our enhanced platform.
-                </p>
-                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-                    <button
-                        type="button"
-                        style={{
-                            padding: '8px 16px',
-                            backgroundColor: 'white',
-                            color: '#333',
-                            border: 'none',
-                            borderRadius: '4px',
-                            fontWeight: 'bold',
-                            cursor: 'pointer',
-                        }}
-                    >
-                        Get Started
-                    </button>
-                    <a
-                        href="#"
-                        style={{
-                            color: 'white',
-                            textDecoration: 'underline',
-                        }}
-                    >
-                        Learn more
-                    </a>
-                </div>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with warning/alert styling
- */
-export const WarningBanner: Story = {
-    args: {
-        background: '#FF9800',
-        useGradientBackground: false,
-        children: (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <span style={{ fontSize: '1.5rem' }}>⚠️</span>
-                <div>
-                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Maintenance Notice</h3>
-                    <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                        Scheduled maintenance will occur on Sunday, 12:00-14:00 UTC.
-                    </p>
-                </div>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with success/positive messaging
- */
-export const SuccessBanner: Story = {
-    args: {
-        background: '#4CAF50',
-        useGradientBackground: false,
-        children: (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <span style={{ fontSize: '1.5rem' }}>✅</span>
-                <div>
-                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Migration Complete</h3>
-                    <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                        Your account has been successfully migrated to our new platform.
-                    </p>
-                </div>
-            </div>
-        ),
-    },
-};

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