@apify/ui-library 1.97.1 → 1.98.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.97.1",
+    "version": "1.98.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.18.2",
+        "@apify/ui-icons": "^1.18.3",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "5174c9c9414a8c7f6107dab1d339ee2246b434a5"
+    "gitHead": "a3cee11e266711bc8aa98b12498205fb2ebc90d0"
 }

package/src/components/action_link.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ComponentProps } from 'react';
+
+import { ActionLink, BackLink } from './action_link.js';
+
+type ActionLinkProps = ComponentProps<typeof ActionLink>;
+type BackLinkProps = ComponentProps<typeof BackLink>;
+
+export default {
+    title: 'UI-Library/ActionLink',
+    component: ActionLink,
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The text content of the link.',
+        },
+        to: {
+            control: 'text',
+            description: 'The URL that the link points to.',
+        },
+        as: {
+            control: 'text',
+            description: 'Component to render as (default is the Link component, which is an anchor).',
+        },
+        contentProps: {
+            control: 'object',
+            description: 'Additional props passed to the Heading component.',
+        },
+        target: {
+            control: 'select',
+            options: ['_self', '_blank', '_parent', '_top'],
+            description: 'Target window for the link.',
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click event handler.',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'TODO: Add Figma URL',
+        },
+    },
+} as Meta<ActionLinkProps>;
+
+type Story = StoryObj<ActionLinkProps>;
+type BackStory = StoryObj<BackLinkProps>;
+
+/**
+ * Default story for ActionLink.
+ * Shows the basic usage with text and a right arrow icon.
+ */
+export const Default: Story = {
+    args: {
+        children: 'Continue reading',
+        to: '#',
+    },
+};
+
+/**
+ * ActionLink with a longer text content.
+ * Demonstrates how the component handles longer text labels.
+ */
+export const LongText: Story = {
+    args: {
+        children: 'Learn more about our comprehensive documentation',
+        to: '#',
+    },
+};
+
+/**
+ * ActionLink with custom content props.
+ * Shows how additional props can be passed to the internal Heading component.
+ */
+export const WithContentProps: Story = {
+    args: {
+        children: 'Explore features',
+        to: '#',
+        contentProps: {
+            style: { fontWeight: 'bold' },
+        },
+    },
+};
+
+/**
+ * ActionLink rendered as a button element.
+ * Demonstrates the flexibility of the 'as' prop for different HTML elements.
+ */
+export const AsButton: Story = {
+    args: {
+        children: 'Submit form',
+        as: 'button',
+        onClick: () => console.log('Button clicked'),
+    },
+};
+
+/**
+ * Default story for BackLink.
+ * Shows the basic usage with text and a left arrow icon for navigation back.
+ */
+export const BackLinkDefault: BackStory = {
+    render: (args: BackLinkProps) => <BackLink {...args} />,
+    args: {
+        children: 'Back to previous page',
+        to: '#',
+    },
+};
+
+/**
+ * BackLink with shorter text.
+ * Demonstrates the BackLink component with minimal text content.
+ */
+export const BackLinkShort: BackStory = {
+    render: (args: BackLinkProps) => <BackLink {...args} />,
+    args: {
+        children: 'Back',
+        to: '#',
+    },
+};
+
+/**
+ * BackLink rendered as a button.
+ * Shows BackLink flexibility with different HTML elements.
+ */
+export const BackLinkAsButton: BackStory = {
+    render: (args: BackLinkProps) => <BackLink {...args} />,
+    args: {
+        children: 'Go back',
+        as: 'button',
+        onClick: () => console.log('Back button clicked'),
+    },
+};
+
+/**
+ * ActionLink with external URL.
+ * Demonstrates usage for external navigation with proper URL.
+ */
+export const ExternalLink: Story = {
+    args: {
+        children: 'Visit our website',
+        to: 'https://apify.com',
+        target: '_blank',
+    },
+};

package/src/components/actor_template_card.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type React from 'react';
+
+import { ActorTemplateCard } from './actor_template_card.js';
+
+// Define the props interface for the component
+interface ActorTemplateCardProps {
+    id: string;
+    label: string;
+    description: string;
+    icons: React.ReactNode[];
+    useCases?: string[];
+}
+
+// Mock icons for the stories
+const mockIcons = [
+    <img key="1" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon A" />,
+    <img key="2" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon B" />,
+];
+
+const singleIcon = [
+    <img key="1" src="https://apify.com/img/template-icons/typescript.svg" alt="Single Icon" />,
+];
+
+const multipleIcons = [
+    <img key="1" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon 1" />,
+    <img key="2" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon 2" />,
+    <img key="3" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon 3" />,
+    <img key="4" src="https://apify.com/img/template-icons/typescript.svg" alt="Icon 4" />,
+];
+
+export default {
+    title: 'UI-Library/ActorTemplateCard',
+    component: ActorTemplateCard,
+    argTypes: {
+        id: {
+            control: 'text',
+        },
+        label: {
+            control: 'text',
+        },
+        description: {
+            control: 'text',
+        },
+        icons: {
+            control: false,
+        },
+        useCases: {
+            control: 'select',
+            options: [undefined, ['STARTER'], ['AI'], ['STARTER', 'AI']],
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'TODO: Add Figma URL',
+        },
+    },
+} as Meta<ActorTemplateCardProps>;
+
+type Story = StoryObj<ActorTemplateCardProps>;
+
+/**
+ * Default story showing the basic ActorTemplateCard with standard props
+ */
+export const Default: Story = {
+    args: {
+        id: 'web-scraper',
+        label: 'Web Scraper',
+        description: 'A versatile web scraper that can extract data from any website. Perfect for beginners and professionals alike.',
+        icons: mockIcons,
+    },
+};
+
+/**
+ * Card with a starter badge to indicate it's beginner-friendly
+ */
+export const WithStarterBadge: Story = {
+    args: {
+        id: 'simple-scraper',
+        label: 'Simple Website Scraper',
+        description: 'An easy-to-use scraper designed for beginners. Start scraping websites with minimal configuration.',
+        icons: singleIcon,
+        useCases: ['STARTER'],
+    },
+};
+
+/**
+ * Card with an AI badge to indicate it uses artificial intelligence
+ */
+export const WithAIBadge: Story = {
+    args: {
+        id: 'ai-scraper',
+        label: 'AI-Powered Data Extractor',
+        description: 'Advanced scraper using artificial intelligence to intelligently extract and structure data from complex websites.',
+        icons: mockIcons,
+        useCases: ['AI'],
+    },
+};
+
+/**
+ * Card with both starter and AI badges
+ */
+export const WithMultipleBadges: Story = {
+    args: {
+        id: 'ai-starter-scraper',
+        label: 'AI Scraper for Beginners',
+        description: 'An AI-powered scraper designed specifically for newcomers. Get the power of AI with beginner-friendly setup.',
+        icons: mockIcons,
+        useCases: ['STARTER', 'AI'],
+    },
+};
+
+/**
+ * Card with a single icon
+ */
+export const WithSingleIcon: Story = {
+    args: {
+        id: 'single-icon-scraper',
+        label: 'E-commerce Scraper',
+        description: 'Specialized scraper for e-commerce websites. Extract product information, prices, and reviews efficiently.',
+        icons: singleIcon,
+        useCases: ['STARTER'],
+    },
+};
+
+/**
+ * Card with multiple icons to test flex-wrap behavior
+ */
+export const WithMultipleIcons: Story = {
+    args: {
+        id: 'multi-icon-scraper',
+        label: 'Universal Data Scraper',
+        description: 'A comprehensive scraper supporting multiple data formats and websites. Works with JSON, XML, HTML, and more.',
+        icons: multipleIcons,
+        useCases: ['AI'],
+    },
+};
+
+/**
+ * Card with a long description to test text truncation
+ */
+export const WithLongDescription: Story = {
+    args: {
+        id: 'long-description-scraper',
+        label: 'Advanced Web Scraper',
+        description: 'This is a very comprehensive web scraper that can handle complex websites with dynamic content, '
+            + 'JavaScript rendering, pagination, infinite scroll, CAPTCHA solving, proxy rotation, and much more. '
+            + 'It includes advanced features like data validation, duplicate detection, rate limiting, and export to '
+            + 'multiple formats including CSV, JSON, XML, and direct database connections.',
+        icons: mockIcons,
+        useCases: ['STARTER', 'AI'],
+    },
+};
+
+/**
+ * Card with no badges to show the clean appearance without use cases
+ */
+export const WithoutBadges: Story = {
+    args: {
+        id: 'no-badges-scraper',
+        label: 'Basic Web Scraper',
+        description: 'A straightforward web scraper without any special categorization. Perfect for general-purpose data extraction.',
+        icons: mockIcons,
+    },
+};
+
+/**
+ * Card with a very short description
+ */
+export const WithShortDescription: Story = {
+    args: {
+        id: 'short-description-scraper',
+        label: 'Quick Scraper',
+        description: 'Fast and simple.',
+        icons: singleIcon,
+        useCases: ['STARTER'],
+    },
+};

package/src/components/badge.doc.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { theme } from '@apify/ui-library';
+import { DoDonts } from '@apify-packages/storybook-utils';
+
+import * as BadgeStories from './badge.stories';
+
+<Meta of={BadgeStories} />
+
+
+# Badge
+
+<br/>
+
+## Overview
+
+To be continued
+
+<Canvas of={BadgeStories.Default} />
+
+## Tag vs Badge
+
+Tags can often be confused with badges. Although the two components are similar, the main difference is that tags are actionable and badges are not.
+
+## Inputs
+
+The component accepts the following inputs (props):
+
+<Controls of={BadgeStories.Default} />
+
+---
+
+## Usage
+
+➡️ 
+

package/src/components/banner.stories.tsx

@@ -0,0 +1,256 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type React from 'react';
+
+import { Banner } from './banner.js';
+
+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>
+        ),
+    },
+};