@apify/ui-library 1.119.0 → 1.120.1

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

@@ -0,0 +1,246 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { type SharedTextProps, TextShared } from './text_shared.js';
+
+export default {
+    title: 'Design Tokens/Typography/TextShared',
+    component: TextShared,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Shared text is the standard typography component used throughout the console and shared components.'
+                    + ' This is the default choice for most text needs across the application.'
+                    + ' **If you\'re unsure which text component to use, choose this one.**',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['body', 'code'],
+            description: 'Text type: body for regular text, code for monospace',
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['regular', 'small', 'big'],
+            description: 'Text size',
+        },
+        weight: {
+            control: { type: 'select' },
+            options: ['normal', 'medium', '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<SharedTextProps>;
+
+type Story = StoryObj<SharedTextProps>;
+
+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;
+    }
+`;
+
+/**
+ * Default shared text
+ */
+export const Default: Story = {
+    args: {
+        type: 'body',
+        size: 'regular',
+        weight: 'normal',
+        children: 'Shared typography for consistent text across the platform.',
+    },
+};
+
+/**
+ * All body text variants
+ */
+export const AllBodyVariants: Story = {
+    render: () => (
+        <StoryWrapper>
+            <div>
+                <h3 style={{ marginTop: 0 }}>Big Size</h3>
+                <TextShowcase>
+                    <small>type=body, size=big, weight=normal</small>
+                    <TextShared type="body" size="big" weight="normal">
+                        Big body text with normal weight for emphasis or lead paragraphs.
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=body, size=big, weight=medium</small>
+                    <TextShared type="body" size="big" weight="medium">
+                        Big body text with medium weight for stronger emphasis.
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=body, size=big, weight=bold</small>
+                    <TextShared type="body" size="big" weight="bold">
+                        Big body text with bold weight for important statements.
+                    </TextShared>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Regular Size</h3>
+                <TextShowcase>
+                    <small>type=body, size=regular, weight=normal</small>
+                    <TextShared type="body" size="regular" weight="normal">
+                        Regular body text with normal weight for standard content.
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=body, size=regular, weight=medium</small>
+                    <TextShared type="body" size="regular" weight="medium">
+                        Regular body text with medium weight for subtle emphasis.
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=body, size=regular, weight=bold</small>
+                    <TextShared type="body" size="regular" weight="bold">
+                        Regular body text with bold weight for highlights.
+                    </TextShared>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Small Size</h3>
+                <TextShowcase>
+                    <small>type=body, size=small, weight=normal</small>
+                    <TextShared type="body" size="small" weight="normal">
+                        Small body text with normal weight for captions and secondary content.
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=body, size=small, weight=medium</small>
+                    <TextShared type="body" size="small" weight="medium">
+                        Small body text with medium weight for emphasis in compact spaces.
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=body, size=small, weight=bold</small>
+                    <TextShared type="body" size="small" weight="bold">
+                        Small body text with bold weight for labels and tags.
+                    </TextShared>
+                </TextShowcase>
+            </div>
+        </StoryWrapper>
+    ),
+};
+
+/**
+ * All code text variants
+ */
+export const AllCodeVariants: Story = {
+    render: () => (
+        <StoryWrapper>
+            <div>
+                <h3 style={{ marginTop: 0 }}>Big Size</h3>
+                <TextShowcase>
+                    <small>type=code, size=big, weight=normal</small>
+                    <TextShared type="code" size="big" weight="normal">
+                        const largeCode = &quot;monospace text&quot;;
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=code, size=big, weight=medium</small>
+                    <TextShared type="code" size="big" weight="medium">
+                        const largeCodeMedium = &quot;emphasized&quot;;
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=code, size=big, weight=bold</small>
+                    <TextShared type="code" size="big" weight="bold">
+                        const largeCodeBold = &quot;strongly emphasized&quot;;
+                    </TextShared>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Regular Size</h3>
+                <TextShowcase>
+                    <small>type=code, size=regular, weight=normal</small>
+                    <TextShared type="code" size="regular" weight="normal">
+                        const regularCode = &quot;standard monospace&quot;;
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=code, size=regular, weight=medium</small>
+                    <TextShared type="code" size="regular" weight="medium">
+                        const regularCodeMedium = &quot;medium weight&quot;;
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=code, size=regular, weight=bold</small>
+                    <TextShared type="code" size="regular" weight="bold">
+                        const regularCodeBold = &quot;bold weight&quot;;
+                    </TextShared>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Small Size</h3>
+                <TextShowcase>
+                    <small>type=code, size=small, weight=normal</small>
+                    <TextShared type="code" size="small" weight="normal">
+                        const smallCode = &quot;compact&quot;;
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=code, size=small, weight=medium</small>
+                    <TextShared type="code" size="small" weight="medium">
+                        const smallCodeMedium = &quot;compact medium&quot;;
+                    </TextShared>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>type=code, size=small, weight=bold</small>
+                    <TextShared type="code" size="small" weight="bold">
+                        const smallCodeBold = &quot;compact bold&quot;;
+                    </TextShared>
+                </TextShowcase>
+            </div>
+        </StoryWrapper>
+    ),
+};

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { ChevronRightIcon, DeleteIcon, SettingsIcon, StarFullIcon } from '@apify/ui-icons';
+
+import { TextShared } from '../text/text_shared.js';
+import { HorizontalTile } from './horizontal_tile.js';
+import { TILE_SIZES } from './shared.js';
+
+export default {
+    title: 'UI-Library/Tile/HorizontalTile',
+    component: HorizontalTile,
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'The main content of the tile',
+        },
+        icon: {
+            control: false,
+            description: 'Optional icon element displayed on the left',
+        },
+        action: {
+            control: false,
+            description: 'Optional action element displayed on the right (e.g., button, icon)',
+        },
+        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 HorizontalTile>;
+
+type Story = StoryObj<typeof HorizontalTile>;
+
+const StoryWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 600px;
+`;
+
+export const Default: Story = {
+    args: {
+        content: 'Horizontal Tile Content',
+        size: TILE_SIZES.SMALL,
+    },
+};
+
+export const TileList: Story = {
+    render: () => (
+        <StoryWrapper>
+            <HorizontalTile
+                icon={<StarFullIcon size="24" />}
+                content="Favorite Items"
+                action={<ChevronRightIcon size="20" />}
+                size={TILE_SIZES.SMALL}
+                onClick={() => alert('Clicked Favorite Items')}
+            />
+            <HorizontalTile
+                icon={<SettingsIcon size="24" />}
+                content="Settings"
+                action={<ChevronRightIcon size="20" />}
+                size={TILE_SIZES.SMALL}
+                onClick={() => alert('Clicked Settings')}
+            />
+            <HorizontalTile
+                icon={<DeleteIcon size="24" />}
+                content="Deleted Items"
+                action={<ChevronRightIcon size="20" />}
+                size={TILE_SIZES.SMALL}
+                onClick={() => alert('Clicked Deleted Items')}
+            />
+        </StoryWrapper>
+    ),
+};
+
+export const SizeComparison: Story = {
+    render: () => (
+        <StoryWrapper>
+            <div>
+                <TextShared size="small" weight="bold" mb="space8">Small Size</TextShared>
+                <HorizontalTile
+                    icon={<StarFullIcon size="24" />}
+                    content="Small tile with padding of 16px"
+                    action={<ChevronRightIcon size="20" />}
+                    size={TILE_SIZES.SMALL}
+                />
+            </div>
+            <div>
+                <TextShared size="small" weight="bold" mb="space8">Large Size</TextShared>
+                <HorizontalTile
+                    icon={<StarFullIcon size="24" />}
+                    content="Large tile with padding of 24px"
+                    action={<ChevronRightIcon size="20" />}
+                    size={TILE_SIZES.LARGE}
+                />
+            </div>
+        </StoryWrapper>
+    ),
+};

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