@apify/ui-library 1.119.0 → 1.120.0

package/src/components/tile/vertical_tile.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { CheckCircleIcon, SettingsIcon, StarFullIcon } from '@apify/ui-icons';
+
+import { Button } from '../button.js';
+import { TextShared } from '../text/text_shared.js';
+import { TILE_SIZES } from './shared.js';
+import { VerticalTile } from './vertical_tile.js';
+
+export default {
+    title: 'UI-Library/Tile/VerticalTile',
+    component: VerticalTile,
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'The main content of the tile',
+        },
+        size: {
+            control: { type: 'select' },
+            options: [TILE_SIZES.SMALL, TILE_SIZES.LARGE],
+            description: 'Size of the tile (S or L)',
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Click handler for the tile',
+        },
+    },
+} as Meta<typeof VerticalTile>;
+
+type Story = StoryObj<typeof VerticalTile>;
+
+const StoryWrapper = styled.div`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+    max-width: 1000px;
+`;
+
+export const Default: Story = {
+    render: () => (
+        <StoryWrapper>
+            <VerticalTile
+                content={<TextShared>Option 1</TextShared>}
+                size={TILE_SIZES.SMALL}
+            />
+            <VerticalTile
+                content={<TextShared>Option 2</TextShared>}
+                size={TILE_SIZES.SMALL}
+            />
+            <VerticalTile
+                content={<TextShared>Option 3</TextShared>}
+                size={TILE_SIZES.SMALL}
+            />
+            <VerticalTile
+                content={<TextShared>Option 4</TextShared>}
+                size={TILE_SIZES.SMALL}
+            />
+        </StoryWrapper>
+    ),
+};
+
+export const CardStyleGrid: Story = {
+    render: () => (
+        <StoryWrapper>
+            <VerticalTile
+                content={
+                    <div>
+                        <div style={{ marginBottom: '1rem' }}>
+                            <StarFullIcon size="40" color="#FFD700" />
+                        </div>
+                        <TextShared weight="bold" mb="space8">
+                            Web Scraper
+                        </TextShared>
+                        <TextShared size="small" color="#666" mb="space12">
+                            Extract data from any website quickly and efficiently
+                        </TextShared>
+                        <Button size="small" fullWidth>
+                            Take Action
+                        </Button>
+                    </div>
+                }
+                size={TILE_SIZES.LARGE}
+                onClick={() => alert('Clicked Web Scraper')}
+            />
+            <VerticalTile
+                content={
+                    <div>
+                        <div style={{ marginBottom: '1rem' }}>
+                            <SettingsIcon size="40" color="#2196F3" />
+                        </div>
+                        <TextShared weight="bold" mb="space8">
+                            API Integration
+                        </TextShared>
+                        <TextShared size="small" color="#666" mb="space12">
+                            Connect your APIs and automate workflows
+                        </TextShared>
+                        <Button size="small" fullWidth>
+                            Take Action
+                        </Button>
+                    </div>
+                }
+                size={TILE_SIZES.LARGE}
+                onClick={() => alert('Clicked API Integration')}
+            />
+            <VerticalTile
+                content={
+                    <div>
+                        <div style={{ marginBottom: '1rem' }}>
+                            <CheckCircleIcon size="40" color="#4CAF50" />
+                        </div>
+                        <TextShared weight="bold" mb="space8">
+                            Data Processor
+                        </TextShared>
+                        <TextShared size="small" color="#666" mb="space12">
+                            Transform and clean your data automatically
+                        </TextShared>
+                        <Button size="small" fullWidth>
+                            Take Action
+                        </Button>
+                    </div>
+                }
+                size={TILE_SIZES.LARGE}
+                onClick={() => alert('Clicked Data Processor')}
+            />
+        </StoryWrapper>
+    ),
+};
+
+export const SizeComparison: Story = {
+    render: () => (
+        <StoryWrapper>
+            <div>
+                <TextShared size="small" weight="bold" mb="space8">Small Size</TextShared>
+                <VerticalTile
+                    content={
+                        <div>
+                            <TextShared weight="bold" mb="space4">
+                                Small Tile
+                            </TextShared>
+                            <TextShared size="small" color="#666">
+                                16px padding
+                            </TextShared>
+                        </div>
+                    }
+                    size={TILE_SIZES.SMALL}
+                />
+            </div>
+            <div>
+                <TextShared size="small" weight="bold" mb="space8">Large Size</TextShared>
+                <VerticalTile
+                    content={
+                        <div>
+                            <TextShared weight="bold" mb="space4">
+                                Large Tile
+                            </TextShared>
+                            <TextShared size="small" color="#666">
+                                24px padding
+                            </TextShared>
+                        </div>
+                    }
+                    size={TILE_SIZES.LARGE}
+                />
+            </div>
+        </StoryWrapper>
+    ),
+};

package/src/components/to_consolidate/card.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button.js';
+import { Card, type CardProps } from './card.js';
+
+export default {
+    title: 'UI-Library/Cards/Card',
+    component: Card,
+    argTypes: {
+        caption: {
+            control: 'text',
+            description: 'The heading/title text of the card',
+        },
+        description: {
+            control: 'text',
+            description: 'Additional description text displayed below the caption',
+        },
+        actions: {
+            control: false,
+            description: 'Action buttons or elements displayed in the header',
+        },
+        children: {
+            control: 'text',
+            description: 'Main content of the card',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the card content is disabled (overlayed)',
+        },
+        shadowless: {
+            control: 'boolean',
+            description: 'Whether to remove the box shadow from the card',
+        },
+        as: {
+            control: 'text',
+            description: 'The HTML element type to render as',
+        },
+    },
+} as Meta<CardProps>;
+
+type Story = StoryObj<CardProps>;
+
+/**
+ * A basic card with caption and content
+ */
+export const Default: Story = {
+    args: {
+        caption: 'Card Title',
+        children: 'This is the main content of the card.',
+    },
+};
+
+/**
+ * A card with all features: caption, description, actions, and content
+ */
+export const WithAllFeatures: Story = {
+    args: {
+        caption: 'Complete Card',
+        description: 'This is a description that provides additional context about the card content.',
+        actions: <Button size="small">Action</Button>,
+        children: 'This card demonstrates all available features including caption, description, actions, and content.',
+    },
+};
+
+/**
+ * A card with action buttons in the header
+ */
+export const WithActions: Story = {
+    args: {
+        caption: 'Card with Actions',
+        actions: (
+            <>
+                <Button size="small" variant="tertiary">Cancel</Button>
+                <Button size="small">Save</Button>
+            </>
+        ),
+        children: 'This card includes action buttons in its header.',
+    },
+};
+
+/**
+ * A disabled card with overlayed content
+ */
+export const Disabled: Story = {
+    args: {
+        caption: 'Disabled Card',
+        description: 'The content of this card is disabled.',
+        children: 'You cannot interact with this content.',
+        disabled: true,
+    },
+};

package/src/components/to_consolidate/markdown.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Markdown, type MarkdownProps } from './markdown.js';
+
+export default {
+    title: 'UI-Library/Markdown/Markdown',
+    component: Markdown,
+    argTypes: {
+        markdown: {
+            control: 'text',
+            description: 'The markdown content to render',
+        },
+        scrollMarginTopPx: {
+            control: { type: 'number', min: 0 },
+            description: 'Offset from top of page to account for sticky header',
+        },
+        addHeadingAnchors: {
+            control: 'boolean',
+            description: 'Whether to add clickable anchor links to headings',
+        },
+        isUserGeneratedContent: {
+            control: 'boolean',
+            description: 'Whether the content is user-generated (adds ugc rel attribute to external links)',
+        },
+        lazyLoadImages: {
+            control: 'boolean',
+            description: 'Whether to lazy load images',
+        },
+        transformLinkUri: {
+            control: false,
+            description: 'Function to transform link URIs',
+        },
+        transformImageUri: {
+            control: false,
+            description: 'Function to transform image URIs',
+        },
+        currentPathHostname: {
+            control: 'text',
+            description: 'Current path hostname for link handling',
+        },
+        allowElement: {
+            control: false,
+            description: 'Function to filter allowed elements',
+        },
+        LinkRenderer: {
+            control: false,
+            description: 'Custom link renderer component',
+        },
+    },
+} as Meta<MarkdownProps>;
+
+type Story = StoryObj<MarkdownProps>;
+
+const sampleMarkdown = `# Heading 1
+
+This is a paragraph with **bold** and *italic* text.
+
+## Heading 2
+
+Here's a list:
+- Item 1
+- Item 2
+- Item 3
+
+### Heading 3
+
+And a numbered list:
+1. First
+2. Second
+3. Third
+
+#### Code Example
+
+Inline code: \`const example = "hello"\`
+
+\`\`\`javascript
+function greet(name) {
+    return \`Hello, \${name}!\`;
+}
+\`\`\`
+`;
+
+/**
+ * Basic markdown rendering with common elements
+ */
+export const Default: Story = {
+    args: {
+        markdown: sampleMarkdown,
+    },
+};
+
+/**
+ * Markdown with images
+ */
+export const WithImages: Story = {
+    args: {
+        markdown: `# Images Example
+
+![Placeholder](https://console.apify.com/img/logos_apify/logo_apify_full_dark_text.svg)
+
+Images are responsive and scale to fit their container.`,
+        lazyLoadImages: true,
+    },
+};
+
+/**
+ * Markdown with mixed content
+ */
+export const ComplexMarkdown: Story = {
+    args: {
+        markdown: `# Complex Markdown Example
+
+This demonstrates various markdown features together.
+
+## Features
+
+Here's what we can do:
+
+### Lists and Formatting
+
+1. **Bold text** for emphasis
+2. *Italic text* for subtlety
+3. \`Inline code\` for technical terms
+4. ~~Strikethrough~~ for corrections
+
+### Code Block
+
+\`\`\`typescript
+interface Actor {
+    id: string;
+    name: string;
+    version: string;
+}
+
+const myActor: Actor = {
+    id: "abc123",
+    name: "web-scraper",
+    version: "1.0.0"
+};
+\`\`\`
+
+### Blockquote
+
+> Important information is highlighted in blockquotes.
+
+### Table
+
+| Feature | Supported | Notes |
+|---------|-----------|-------|
+| Headings | ✅ | H1-H6 |
+| Lists | ✅ | Ordered & unordered |
+| Code | ✅ | Inline & blocks |
+| Tables | ✅ | With alignment |
+
+---
+
+That's a comprehensive example!`,
+        addHeadingAnchors: true,
+    },
+};

package/src/components/to_consolidate/pagination.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { PaginationButtons, type PaginationButtonsProps } from './pagination.js';
+
+export default {
+    title: 'UI-Library/PaginationButtons',
+    component: PaginationButtons,
+    argTypes: {
+        page: {
+            control: { type: 'number', min: 0 },
+            description: 'Current page index (0-based)',
+        },
+        totalPages: {
+            control: { type: 'number', min: 1 },
+            description: 'Total number of pages',
+        },
+        onPageChange: {
+            action: 'pageChanged',
+            description: 'Callback when page changes',
+        },
+    },
+} as Meta<PaginationButtonsProps>;
+
+type Story = StoryObj<PaginationButtonsProps>;
+
+/**
+ * Basic pagination with a few pages
+ */
+export const Default: Story = {
+    args: {
+        page: 0,
+        totalPages: 5,
+    },
+};
+
+/**
+ * Pagination at the beginning of many pages
+ */
+export const ManyPagesStart: Story = {
+    args: {
+        page: 0,
+        totalPages: 20,
+    },
+};
+
+/**
+ * Pagination in the middle of many pages
+ */
+export const ManyPagesMiddle: Story = {
+    args: {
+        page: 10,
+        totalPages: 20,
+    },
+};
+
+/**
+ * Pagination at the end of many pages
+ */
+export const ManyPagesEnd: Story = {
+    args: {
+        page: 19,
+        totalPages: 20,
+    },
+};

package/src/components/to_consolidate/tab_number_chip.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { TabNumberChip } from './tab_number_chip.js';
+
+interface TabNumberChipProps {
+    children: React.ReactNode;
+}
+
+const StoryWrapper = styled.div`
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+`;
+
+export default {
+    title: 'UI-Library/TabNumberChip',
+    component: TabNumberChip,
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The content to display inside the chip (typically a number)',
+        },
+    },
+    decorators: [
+        (Story: ElementType, _context: StoryContext) => (
+            <StoryWrapper>
+                <Story />
+            </StoryWrapper>
+        ),
+    ],
+} as Meta<TabNumberChipProps>;
+
+type Story = StoryObj<TabNumberChipProps>;
+
+/**
+ * A basic chip showing a number
+ */
+export const Default: Story = {
+    args: {
+        children: '5',
+    },
+};
+
+/**
+ * A chip with a single digit
+ */
+export const SingleDigit: Story = {
+    args: {
+        children: '3',
+    },
+};
+
+/**
+ * A chip with a double digit number
+ */
+export const DoubleDigit: Story = {
+    args: {
+        children: '42',
+    },
+};
+
+/**
+ * A chip with a large number
+ */
+export const LargeNumber: Story = {
+    args: {
+        children: '999',
+    },
+};
+
+/**
+ * A chip with text content
+ */
+export const WithText: Story = {
+    args: {
+        children: 'New',
+    },
+};
+
+const DisabledParent = styled.div`
+    &._disabled {
+        opacity: 1;
+    }
+`;
+
+/**
+ * A chip in disabled state (requires parent with _disabled class)
+ */
+export const Disabled: Story = {
+    args: {
+        children: '7',
+    },
+    render: (args) => (
+        <DisabledParent className="_disabled">
+            <TabNumberChip {...args} />
+        </DisabledParent>
+    ),
+};
+
+/**
+ * Multiple chips with different values
+ */
+export const Multiple: Story = {
+    render: () => (
+        <StoryWrapper>
+            <TabNumberChip>1</TabNumberChip>
+            <TabNumberChip>12</TabNumberChip>
+            <TabNumberChip>999</TabNumberChip>
+            <TabNumberChip>New</TabNumberChip>
+        </StoryWrapper>
+    ),
+};

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

@@ -1,61 +0,0 @@
-import {
-    Heading,
-    Text,
-} from './index.js';
-
-export default {
-    title: 'UI-Library/Text',
-    component: Text,
-    args: {
-    },
-    parameters: {
-        layout: 'centered',
-    },
-};
-
-export const Default = () => (<div>
-    <Heading type="title3xl" mb='space24'>Title 3XL</Heading>
-    <Heading type="title2xl">Title 2XL</Heading>
-    <Heading type="titleXl">Title XL</Heading>
-    <Heading type="titleL">Title L</Heading>
-    <Heading type="titleM">Title M</Heading>
-    <Heading type="titleS">Title S</Heading>
-    <Heading type="titleXs">Title XS</Heading>
-    <br />
-    <Text type="body">Body default</Text>
-    <Text type="body" size='small'>Body size=small</Text>
-    <Text type="body" size='big'>Body size=big</Text>
-    <br />
-    <Text type="code">Code default</Text>
-    <Text type="code" size='small'>Code size=small</Text>
-    <Text type="code" size='big'>Code size=big</Text>
-    <br />
-    <Text type="body" weight='bold'>Body weight=bold</Text>
-    <Text type="body" weight='bold' size='small'>Body size=small weight=bold</Text>
-    <Text type="body" weight='bold' size='big'>Body size=big weight=bold</Text>
-    <br />
-    <Text type="code" weight='bold'>Code default weight=bold</Text>
-    <Text type="code" weight='bold' size='small'>Code size=small weight=bold</Text>
-    <Text type="code" weight='bold' size='big'>Code size=big weight=bold</Text>
-</div>);
-
-export const HeadingExtras = () => (<div style={{ minWidth: '20rem' }}>
-    <Heading align='left'>Heading align=left</Heading>
-    <Heading align='center'>Heading align=center</Heading>
-    <Heading align='right'>Heading align=right</Heading>
-    <br />
-    <Heading color="deeppink">Heading color=deeppink</Heading>
-    <br />
-    <Heading type='titleL' as="h2">Heading type=titleL as=h2</Heading>
-</div>);
-
-export const TextExtras = () => (<div style={{ minWidth: '20rem' }}>
-    <Text align='left'>Text align=left</Text>
-    <Text align='center'>Text align=center</Text>
-    <Text align='right'>Text align=right</Text>
-    <br />
-    <Text color='deeppink'>Text color=deeppink</Text>
-    <br />
-    <Text italic>Text italic=true</Text>
-    <Text uppercase={true}>Text uppercase=true</Text>
-</div>);