@apify/ui-library 1.97.2 → 1.98.0

package/src/components/blog_article.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ComponentProps } from 'react';
+
+import { BlogArticle } from './blog_article.js';
+
+type BlogArticleProps = ComponentProps<typeof BlogArticle>;
+
+export default {
+    title: 'UI-Library/BlogArticle',
+    component: BlogArticle,
+    argTypes: {
+        imageNode: {
+            control: 'object',
+            description: 'React node representing the article image or media.',
+        },
+        title: {
+            control: 'text',
+            description: 'Title of the blog article.',
+        },
+        ctaTitle: {
+            control: 'text',
+            description: 'Call-to-action text displayed in the read more section.',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'TODO: Add Figma URL',
+        },
+    },
+} as Meta<BlogArticleProps>;
+
+type Story = StoryObj<BlogArticleProps>;
+
+/**
+ * Default story for BlogArticle.
+ * Shows the component with a sample image, title, and default CTA text.
+ */
+export const Default: Story = {
+    args: {
+        imageNode: (
+            <img
+                src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=225&fit=crop&crop=faces"
+                alt="Sample blog cover"
+                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' }}
+            />
+        ),
+        title: 'How to Build Scalable Web Scrapers with Apify',
+        ctaTitle: 'Read more',
+    },
+};
+
+/**
+ * Story for BlogArticle with a custom CTA title.
+ * Demonstrates how the CTA text can be customized from the default "Read more".
+ */
+export const CustomCTA: Story = {
+    args: {
+        imageNode: (
+            <img
+                src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=225&fit=crop&crop=faces"
+                alt="Custom blog cover"
+                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' }}
+            />
+        ),
+        title: 'Introducing the New Apify SDK',
+        ctaTitle: 'Learn more',
+    },
+};
+
+/**
+ * Story for BlogArticle with a long title.
+ * Useful for testing text wrapping and layout with lengthy titles.
+ */
+export const LongTitle: Story = {
+    args: {
+        imageNode: (
+            <img
+                src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=225&fit=crop&crop=faces"
+                alt="Long title blog cover"
+                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' }}
+            />
+        ),
+        title: 'A Comprehensive Guide to Web Automation: Best Practices, Common Pitfalls, and Real-World Use Cases for Modern Developers',
+        ctaTitle: 'Read more',
+    },
+};
+
+/**
+ * Story for BlogArticle with a short title.
+ * Demonstrates the component behavior with minimal text content.
+ */
+export const ShortTitle: Story = {
+    args: {
+        imageNode: (
+            <img
+                src="https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=400&h=225&fit=crop&crop=faces"
+                alt="Short title blog cover"
+                style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' }}
+            />
+        ),
+        title: 'Quick Tips',
+        ctaTitle: 'Read more',
+    },
+};
+
+/**
+ * Story for BlogArticle with a placeholder image.
+ * Shows how the component handles when no actual image is provided.
+ */
+export const PlaceholderImage: Story = {
+    args: {
+        imageNode: (
+            <div
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    backgroundColor: '#f0f0f0',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    color: '#666',
+                    borderRadius: '12px',
+                    fontSize: '14px',
+                }}
+            >
+                Image placeholder
+            </div>
+        ),
+        title: 'Understanding Data Processing Pipelines',
+        ctaTitle: 'Read more',
+    },
+};

package/src/components/chip.stories.tsx

@@ -0,0 +1,301 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Chip, CHIP_SIZES, CHIP_TYPES, type ChipProps } from './chip.js';
+
+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/code/code_block/code_block.stories.jsx

@@ -0,0 +1,133 @@
+/* eslint-disable react/prop-types */
+import { CodeBlock } from './code_block.tsx';
+
+export default {
+    title: 'ui-library/CodeBlock',
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=2131-609&t=tH2x12cMH5yh0fuf-4',
+        },
+    },
+    tags: [],
+    component: CodeBlock,
+};
+
+const shuffleLines = (code) => {
+    const lines = code.split('\n');
+    const shuffledLines = lines.sort(() => Math.random() - 0.5);
+    return shuffledLines.join('\n');
+};
+
+const Template = ({ content, ...args }) => {
+    const longCode = `${Array.from(
+        { length: 20 },
+        () => content.split('\n')[1],
+    ).join(' ')}\n${Array.from({ length: 10 }, () => content).join('\n')}`;
+    const multipleCodes = Array.from({ length: 5 }, (_, i) => ({
+        key: i,
+        label: `Code ${i}`,
+        code: shuffleLines(content),
+    }));
+    const multipleLongCodes = Array.from({ length: 5 }, (_, i) => ({
+        key: i,
+        label: `Code ${i}`,
+        code: shuffleLines(longCode),
+        highlightLines: Array.from({ length: 3 }, () => Math.floor(Math.random() * 10)),
+    }));
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                width: '98vw',
+                overflow: 'hidden',
+                gap: '10px',
+            }}
+        >
+            <h2>CodeBlock</h2>
+            <CodeBlock content={content} {...args} />
+            <h2>CodeBlock with title</h2>
+            <CodeBlock title="What a code"
+
+                content={content}
+                {...args}
+            />
+            <h2>CodeBlock with gradient, dots and action</h2>
+            <CodeBlock
+                content={content}
+                highlightLines={[2, 3, 7]}
+                showGradient
+                showDotsHeader
+                showActionButton
+                {...args}
+            />
+            <h2>CodeBlock with long lines, action and gradient</h2>
+            <CodeBlock
+                content={longCode}
+                showGradient
+                showActionButton
+                {...args}
+            />
+
+            <h2>CodeBlock with multiple long codes, highlighted lines, action and gradient</h2>
+            <CodeBlock
+                content={multipleLongCodes}
+                showGradient
+                showActionButton
+                {...args}
+            />
+            <h2>CodeBlock with multiple codes</h2>
+            <CodeBlock
+                content={multipleCodes}
+                {...args}
+            />
+        </div>
+    );
+};
+
+export const JavascriptCodeBlock = Template.bind({});
+JavascriptCodeBlock.args = {
+    language: 'javascript',
+    content: `const a = 1;
+const b = 2;
+const c = a + b;
+console.log(c);`,
+};
+
+export const PythonCodeBlock = Template.bind({});
+PythonCodeBlock.args = {
+    language: 'python',
+    content: `a = 1
+b = 2
+c = a + b
+print(c)`,
+};
+
+export const TypescriptCodeBlock = Template.bind({});
+TypescriptCodeBlock.args = {
+    language: 'typescript',
+    content: `const a: number = 1;
+const b: number = 2;
+const c: number = a + b;
+console.log(c);`,
+};
+
+export const BashCodeBlock = Template.bind({});
+BashCodeBlock.args = {
+    language: 'bash',
+    content: `#!/bin/bash
+echo "Hello World"`,
+};
+
+export const JSONCodeBlock = Template.bind({});
+JSONCodeBlock.args = {
+    language: 'json',
+    content: `{
+    "name": "apify",
+    "version": "0.1.0",
+    "private": true,
+}`,
+};

package/src/components/code/code_block/code_block_with_tabs.stories.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react';
+import styled from 'styled-components';
+
+import {
+    theme,
+} from '../../../design_system/theme.js';
+import {
+    type CodeBlockTabKey,
+    CodeBlockWithTabs, type CodeBlockWithTabsProps,
+} from './code_block_with_tabs.js';
+
+export default {
+    title: 'UI-Library/Code/CodeBlockWithTabs',
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/Shared-library?node-id=5266-34497&t=aaAINB9GEUOOBZVl-4',
+        },
+        layout: 'centered',
+    },
+    component: CodeBlockWithTabs,
+};
+
+const Container = styled.div`
+    width: 360px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @media ${theme.device.tablet} {
+        width: 840px;
+    }
+`;
+
+export const Default = ({ tabs, ...args }: Omit<CodeBlockWithTabsProps, 'currentTabKey'>) => {
+    const [currentTabKey, setCurrentTabKey] = useState(tabs[0]?.key);
+    const extendedTabs = useMemo(() => tabs.map((tab) => ({
+        ...tab,
+        onClick: () => setCurrentTabKey(tab.key),
+    })), [tabs]);
+
+    return (
+        <Container>
+            <CodeBlockWithTabs
+                currentTabKey={currentTabKey as CodeBlockTabKey}
+                tabs={extendedTabs}
+                {...args}
+            />
+        </Container>
+    );
+};
+
+Default.args = {
+    tabs: [
+        {
+            key: 'python',
+            content: `
+a = 1
+b = 2
+c = a + b
+print(c)`,
+        },
+        {
+            key: 'javascript',
+            content: `
+const a = 1;
+const b = 2;
+const c = a + b;
+console.log(c);`,
+        },
+        {
+            key: 'typescript',
+            content: `
+const a: number = 1;
+const b: number = 2;
+const c: number = a + b;
+console.log(c);`
+            ,
+        },
+    ],
+};

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -71,7 +71,7 @@ export type CodeBlockTabProps = {
     onClick?: (e: React.MouseEvent) => void;
 } & Partial<SharedLinkProps>;
 
-type CodeBlockWithTabsProps = SharedBoxProps & {
+export type CodeBlockWithTabsProps = SharedBoxProps & {
     codeBlockProps: SharedCodeBlockProps;
     currentTabKey: CodeBlockTabKey;
     tabs: CodeBlockTabProps[];