@apify/ui-library 1.97.2 → 1.98.1

package/src/components/code/inline_code/inline_code.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import type { InlineCodeProps } from './inline_code.js';
+import { InlineCode } from './inline_code.js';
+
+/**
+ * Stories for the InlineCode component. This file showcases the
+ * various states and configurations of the inline code component,
+ * including different sizes and copy button functionality.
+ */
+export default {
+    title: 'ui-library/InlineCode',
+    component: InlineCode,
+    tags: [],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The code content to display',
+        },
+        size: {
+            control: 'select',
+            options: ['regular', 'small', 'big'],
+            description: 'Size of the inline code text',
+        },
+        withCopyButton: {
+            control: 'boolean',
+            description: 'Whether to show a copy button',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=2132-2425&t=tH2x12cMH5yh0fuf-0',
+        },
+    },
+} as Meta<InlineCodeProps>;
+
+type Story = StoryObj<InlineCodeProps>;
+
+/**
+ * Comprehensive comparison of all InlineCode variants side by side.
+ * Shows different sizes, copy button states, and various code examples.
+ */
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+            gap: '24px',
+            padding: '24px',
+            maxWidth: '1200px',
+        }}>
+            {/* Size variants without copy button */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Size Variants</h3>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Small</p>
+                    <InlineCode size="small">npm install @apify/ui-library</InlineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Regular</p>
+                    <InlineCode size="regular">npm install @apify/ui-library</InlineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Big</p>
+                    <InlineCode size="big">npm install @apify/ui-library</InlineCode>
+                </div>
+            </div>
+
+            {/* Size variants with copy button */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>With Copy Button</h3>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Small</p>
+                    <InlineCode size="small" withCopyButton>npm install @apify/ui-library</InlineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Regular</p>
+                    <InlineCode size="regular" withCopyButton>npm install @apify/ui-library</InlineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Big</p>
+                    <InlineCode size="big" withCopyButton>npm install @apify/ui-library</InlineCode>
+                </div>
+            </div>
+        </div>
+    ),
+};

package/src/components/code/one_line_code/one_line_code.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { OneLineCode, type OneLineCodeProps } from './one_line_code.js';
+
+/**
+ * Stories for the OneLineCode component. This file showcases the
+ * various states and configurations of the one line code component,
+ * including different languages, HTTP methods, and interactive features.
+ */
+export default {
+    title: 'ui-library/OneLineCode',
+    component: OneLineCode,
+    tags: [],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The code content to display',
+        },
+        language: {
+            control: 'select',
+            options: ['javascript', 'python', 'bash', 'http', 'json', 'sql'],
+            description: 'Programming language for syntax highlighting',
+        },
+        size: {
+            control: 'select',
+            options: ['regular', 'small', 'big'],
+            description: 'Size of the code text',
+        },
+        httpMethod: {
+            control: 'select',
+            options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
+            description: 'HTTP method for API calls',
+        },
+        actionButtonLabel: {
+            control: 'text',
+            description: 'Label for the action button',
+        },
+        onActionButtonClick: {
+            action: 'actionButtonClicked',
+            description: 'Action button click handler',
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Whether the component should take full width',
+        },
+        secret: {
+            control: 'text',
+            description: 'Secret value to replace placeholder with',
+        },
+        secretPlaceholder: {
+            control: 'text',
+            description: 'Placeholder text for secrets',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the component is disabled',
+        },
+        hideCopyButton: {
+            control: 'boolean',
+            description: 'Whether to hide the copy button',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=2131-885&t=tH2x12cMH5yh0fuf-0',
+        },
+    },
+} as Meta<OneLineCodeProps>;
+
+type Story = StoryObj<OneLineCodeProps>;
+
+/**
+ * Comprehensive comparison of all OneLineCode variants side by side.
+ * Shows different languages, HTTP methods, and interactive features.
+ */
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '24px',
+            gap: '24px',
+            maxWidth: '1200px',
+        }}>
+            {/* Basic examples */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Basic Examples</h3>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>JavaScript</p>
+                    <OneLineCode language="javascript">const foo = &apos;bar&apos;;</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Python</p>
+                    <OneLineCode language="python">foo = &apos;bar&apos;</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Bash</p>
+                    <OneLineCode language="bash">curl -X GET https://api.example.com</OneLineCode>
+                </div>
+            </div>
+
+            {/* HTTP methods */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>HTTP Methods</h3>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>GET</p>
+                    <OneLineCode language="http" httpMethod="GET">https://api.example.com/users</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>POST</p>
+                    <OneLineCode language="http" httpMethod="POST">https://api.example.com/users</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>PUT</p>
+                    <OneLineCode language="http" httpMethod="PUT">https://api.example.com/users/123</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>DELETE</p>
+                    <OneLineCode language="http" httpMethod="DELETE">https://api.example.com/users/123</OneLineCode>
+                </div>
+            </div>
+
+            {/* Interactive features */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Interactive</h3>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>With Action Button</p>
+                    <OneLineCode
+                        language="javascript"
+                        actionButtonLabel="Try it"
+                        onActionButtonClick={() => console.log('Try it clicked')}
+                    >
+                        npm install @apify/ui-library
+                    </OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>With Secret</p>
+                    <OneLineCode
+                        language="http"
+                        secret="VERY_SECRET_TOKEN"
+                        httpMethod="GET"
+                    >
+                        https://api.example.com?token=***
+                    </OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Disabled</p>
+                    <OneLineCode language="bash" disabled>
+                        curl -X GET https://api.example.com
+                    </OneLineCode>
+                </div>
+            </div>
+
+            {/* Size variants */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <h3 style={{ margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }}>Size Variants</h3>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Small</p>
+                    <OneLineCode language="javascript" size="small">const foo = &apos;bar&apos;;</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Regular</p>
+                    <OneLineCode language="javascript" size="regular">const foo = &apos;bar&apos;;</OneLineCode>
+                </div>
+                <div>
+                    <p style={{ margin: '0 0 4px 0', fontSize: '14px', color: '#666' }}>Big</p>
+                    <OneLineCode language="javascript" size="big">const foo = &apos;bar&apos;;</OneLineCode>
+                </div>
+            </div>
+        </div>
+    ),
+};

package/src/components/color_wheel_gradient.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
+import type { ElementType } from 'react';
+
+import { ColorWheelGradient, type ColorWheelGradientProps } from './color_wheel_gradient.js';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <div
+        style={{
+            position: 'relative',
+            width: '400px',
+            height: '400px',
+            backgroundColor: '#f5f5f5',
+            border: '1px solid #ddd',
+            borderRadius: '8px',
+            overflow: 'hidden',
+        }}
+    >
+        <style>
+            {`
+                @keyframes rotate {
+                    from { transform: rotate(0deg); }
+                    to { transform: rotate(360deg); }
+                }
+            `}
+        </style>
+        {children}
+    </div>
+);
+
+export default {
+    title: 'UI-Library/ColorWheelGradient',
+    tags: ['deprecated'],
+    component: ColorWheelGradient,
+    decorators: [
+        (Story: ElementType, _context: StoryContext) => (
+            <Wrapper>
+                <Story />
+            </Wrapper>
+        ),
+    ],
+    argTypes: {
+        translateX: {
+            control: 'number',
+        },
+        translateY: {
+            control: 'number',
+        },
+        rotation: {
+            control: 'number',
+        },
+        radius: {
+            control: 'number',
+        },
+        blurSize: {
+            control: 'number',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'TODO: Add Figma URL',
+        },
+    },
+} as Meta<ColorWheelGradientProps>;
+
+type Story = StoryObj<ColorWheelGradientProps>;
+
+/**
+ * Default color wheel gradient with standard settings
+ */
+export const Default: Story = {
+    args: {
+        radius: 200,
+    },
+};
+
+/**
+ * Small color wheel gradient
+ */
+export const Small: Story = {
+    args: {
+        radius: 100,
+    },
+};
+
+/**
+ * Medium color wheel gradient
+ */
+export const Medium: Story = {
+    args: {
+        radius: 150,
+    },
+};
+
+/**
+ * Large color wheel gradient
+ */
+export const Large: Story = {
+    args: {
+        radius: 250,
+    },
+};
+
+/**
+ * Color wheel gradient with custom translation in both directions
+ */
+export const Translated: Story = {
+    args: {
+        radius: 150,
+        translateX: 30,
+        translateY: -30,
+    },
+};
+
+/**
+ * Color wheel gradient with minimal blur
+ */
+export const MinimalBlur: Story = {
+    args: {
+        radius: 200,
+        blurSize: 10,
+    },
+};
+
+/**
+ * Color wheel gradient with no blur (sharp edges)
+ */
+export const NoBlur: Story = {
+    args: {
+        radius: 200,
+        blurSize: 0,
+    },
+};
+
+/**
+ * Animated rotating color wheel gradient
+ */
+export const AnimatedRotation: Story = {
+    args: {
+        radius: 180,
+    },
+    render: (args) => (
+        <ColorWheelGradient
+            {...args}
+            style={{
+                animation: 'rotate 4s linear infinite',
+            }}
+        />
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'This story demonstrates a continuously rotating color wheel gradient using CSS animation.',
+            },
+        },
+    },
+};

package/src/components/floating/tooltip.stories.jsx

@@ -33,7 +33,6 @@ export default {
         content: 'This is a tooltip',
         isDarkTheme: false,
     },
-    tags: ['new'],
 };
 
 const DefaultStoryWrapper = styled.div`

package/src/components/link.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
+import type { ElementType } from 'react';
+
+import { Link, type LinkProps } from './link.js';
+
+// eslint-disable-next-line max-len
+const longText = 'This is a very long link text that might wrap to multiple lines depending on the container width. It is used to test how the Link component handles overflow and wrapping in different scenarios.';
+
+// Mock the UI dependencies provider for Storybook
+const MockUIProvider = ({ children }: { children: React.ReactNode }) => {
+    const mockDependencies = {
+        windowLocationHost: 'localhost:6006',
+        isHrefTrusted: (href: string) => !href.includes('untrusted'),
+        trackClick: (trackingId: string, trackingData?: object) => {
+            console.log('Tracked click:', trackingId, trackingData);
+        },
+        InternalLink: 'a' as ElementType, // Use regular anchor for Storybook
+    };
+
+    // Inject mock context (in real implementation, this would use React Context)
+    return <div data-mock-ui-provider={JSON.stringify(mockDependencies)}>{children}</div>;
+};
+
+export default {
+    title: 'UI-Library/Link',
+    component: Link,
+    decorators: [
+        (Story: ElementType, _context: StoryContext) => (
+            <MockUIProvider>
+                <Story />
+            </MockUIProvider>
+        ),
+    ],
+    argTypes: {
+        to: {
+            control: 'text',
+            description: 'The destination URL or path object. Can be internal (/path) or external (https://example.com)',
+        },
+        hideExternalIcon: {
+            control: 'boolean',
+            description: 'Hide the external link icon even for external URLs',
+        },
+        showExternalIcon: {
+            control: 'boolean',
+            description: 'Force show the external link icon even for internal links',
+        },
+        rel: {
+            control: 'text',
+            description: 'Custom rel attribute for the link (e.g., "sponsored", "nofollow")',
+        },
+        target: {
+            control: 'select',
+            options: ['_self', '_blank', '_parent', '_top'],
+            description: 'Where to open the link. External links default to "_blank"',
+        },
+        trackingId: {
+            control: 'text',
+            description: 'Unique identifier for tracking link clicks in analytics',
+        },
+        trackingData: {
+            control: 'object',
+            description: 'Additional data to send with tracking events (object format)',
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Callback function fired when the link is clicked',
+        },
+        children: {
+            control: 'text',
+            description: 'The link text or content to display',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'TODO: Add Figma URL',
+        },
+    },
+} as Meta<LinkProps>;
+
+type Story = StoryObj<LinkProps>;
+
+/**
+ * Default internal link behavior
+ */
+export const Default: Story = {
+    args: {
+        to: '/dashboard',
+        children: 'Go to Dashboard',
+    },
+};
+
+/**
+ * External link with automatic external icon
+ */
+export const ExternalLink: Story = {
+    args: {
+        to: 'https://apify.com',
+        children: 'Visit Apify Website',
+    },
+};
+
+/**
+ * Long link text to test wrapping behavior
+ */
+export const LongText: Story = {
+    args: {
+        to: 'https://apify.com/very-long-url-path',
+        showExternalIcon: true,
+        children: `${longText} ${longText}`,
+    },
+};
+
+/**
+ * Link with additional styling props
+ */
+export const WithStyling: Story = {
+    args: {
+        to: '/settings',
+        children: 'Account Settings',
+        style: {
+            fontWeight: 'bold',
+            fontSize: '16px',
+            color: '#2563eb',
+        },
+    },
+};

package/src/components/message.stories.jsx

@@ -0,0 +1,116 @@
+import { Fragment } from 'react';
+import styled from 'styled-components';
+
+import { PlaceholderIcon } from '@apify/ui-icons';
+
+import { Link } from './link.tsx';
+import { Message } from './message.tsx';
+
+const handleDismissClick = () => {};
+
+const MESSAGE_TYPES = ['info', 'warning', 'danger', 'success'];
+
+export default {
+    title: 'UI-Library/Message (aka Banner)',
+    component: Message,
+    argTypes: {
+        type: {
+            control: {
+                type: 'radio',
+                options: MESSAGE_TYPES,
+            },
+            defaultValue: 'warning',
+        },
+        borderless: {
+            control: {
+                type: 'boolean',
+            },
+            defaultValue: false,
+        },
+    },
+    args: {
+        caption: 'Message title',
+        children: 'Hello, friends. I am a message',
+        onDismissClick: null,
+    },
+};
+
+const Template = (args) => <StyledWrapper>
+    {MESSAGE_TYPES.map((type) => <Fragment key={type}>
+        <Message {...args} type={type} />
+    </Fragment>)}
+</StyledWrapper>;
+
+const StyledWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const Index = (args) => <StyledWrapper>
+    {MESSAGE_TYPES.map((type) => <Fragment key={type}>
+        <Message {...args} type={type} />
+        <Message {...args} caption="" type={type} />
+        <Message
+            {...args}
+            type={type}
+            onDismissClick={() => console.log('dismiss clicked')}
+        />
+        <Message
+            {...args}
+            type={type}
+            caption=""
+            onDismissClick={() => console.log('dismiss clicked')}
+        />
+        <Message
+            {...args}
+            type={type}
+            onDismissClick={() => console.log('dismiss clicked')}
+            actions={[{ label: 'Action', onClick: () => console.log('Action clicked') }]}
+        />
+    </Fragment>)}
+</StyledWrapper>;
+
+export const OneLine = Template.bind({});
+OneLine.args = {
+    children: 'Hello, friends, I am a short message',
+};
+
+export const MultiLine = Template.bind({});
+MultiLine.args = {
+    children: <>
+        Hello, friends, <br />
+        I am a very very very very very very very very very very very very very very long message<br />
+        and I have some <Link to="https://www.youtube.com/watch?v=dQw4w9WgXcQ">and links!</Link>
+    </>,
+};
+
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    Icon: PlaceholderIcon,
+};
+
+export const Dissmisable = Template.bind({});
+Dissmisable.args = {
+    onDismissClick: handleDismissClick,
+};
+
+export const Actions = Template.bind({});
+Actions.args = {
+    actions: [{ label: 'Action', onClick: () => console.log('Action clicked') }],
+};
+
+export const ActionsAndDissmisable = Template.bind({});
+ActionsAndDissmisable.args = {
+    actions: [{ label: 'Action', onClick: () => console.log('Action clicked') }],
+    onDismissClick: handleDismissClick,
+};
+
+export const Captionless = Template.bind({});
+Captionless.args = {
+    caption: '',
+};
+
+export const Borderless = Template.bind({});
+Borderless.args = {
+    borderless: true,
+};