@apify/ui-library 1.97.2 → 1.98.0

package/src/components/rating.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Rating, RatingStats, SingleStarRating } from './rating.js';
+
+interface RatingProps {
+    rating: number | undefined;
+    color?: string;
+}
+
+interface SingleStarRatingProps {
+    color?: string;
+}
+
+interface RatingStatsProps {
+    ratingStats: Record<1 | 2 | 3 | 4 | 5, number>;
+}
+
+export default {
+    title: 'UI-Library/Rating',
+    component: Rating,
+    argTypes: {
+        rating: {
+            control: 'number',
+        },
+        color: {
+            control: 'text',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'TODO: Add Figma URL',
+        },
+    },
+} as Meta<RatingProps>;
+
+type Story = StoryObj<RatingProps>;
+type SingleStarStory = StoryObj<SingleStarRatingProps>;
+type RatingStatsStory = StoryObj<RatingStatsProps>;
+
+/**
+ * Default rating showing 4.2 stars out of 5
+ */
+export const Default: Story = {
+    args: {
+        rating: 4.2,
+    },
+};
+
+/**
+ * Rating with custom orange color
+ */
+export const CustomColor: Story = {
+    args: {
+        rating: 4.2,
+        color: '#FF8C00',
+    },
+};
+
+/**
+ * All rating variations from 0.5 to 5 stars
+ */
+export const AllRatings: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>0:</span>
+                <Rating rating={0} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>0.5:</span>
+                <Rating rating={0.5} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>1.0:</span>
+                <Rating rating={1} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>1.5:</span>
+                <Rating rating={1.5} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>2.0:</span>
+                <Rating rating={2} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>2.5:</span>
+                <Rating rating={2.5} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>3.0:</span>
+                <Rating rating={3} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>3.5:</span>
+                <Rating rating={3.5} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>4.0:</span>
+                <Rating rating={4} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>4.5:</span>
+                <Rating rating={4.5} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <span style={{ minWidth: '40px', fontSize: '14px' }}>5.0:</span>
+                <Rating rating={5} />
+            </div>
+        </div>
+    ),
+};
+
+// Single Star Rating Stories
+export const SingleStarDefault: SingleStarStory = {
+    render: (args) => <SingleStarRating {...args} />,
+    args: {},
+    parameters: {
+        docs: {
+            description: {
+                story: 'A single star rating component for simple positive indicators.',
+            },
+        },
+    },
+};
+
+// Rating Stats Stories
+export const RatingStatsDefault: RatingStatsStory = {
+    render: (args) => <RatingStats {...args} />,
+    args: {
+        ratingStats: {
+            1: 5,
+            2: 10,
+            3: 15,
+            4: 30,
+            5: 40,
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Rating statistics showing distribution of ratings from 1 to 5 stars.',
+            },
+        },
+    },
+};
+
+export const RatingStatsEmpty: RatingStatsStory = {
+    render: (args) => <RatingStats {...args} />,
+    args: {
+        ratingStats: {
+            1: 0,
+            2: 0,
+            3: 0,
+            4: 0,
+            5: 0,
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Rating statistics with no ratings yet.',
+            },
+        },
+    },
+};

package/src/components/simple_markdown/simple_markdown.stories.tsx

@@ -0,0 +1,71 @@
+import {
+    Box,
+} from '../box.js';
+import {
+    SimpleMarkdown,
+    type SimpleMarkdownProps,
+} from './simple_markdown.js';
+
+const testMarkdown = `
+Lorem ipsum **with bold** text and some *italic text*.
+
+Now a paragraph with an [internal link](/admin-internal)
+and with an [external link](https://www.google.com) (we hade the external icon in Markdown).
+
+* List item
+* **List item bold**
+* *List item italic*
+
+Some \`inline code\` and **\`bold inline code\`**
+
+\`\`\`javascript
+http://www.example.com/search?do[load]=1
+\`\`\`
+
+\`\`\`javascript
+async function pageFunction(context) {
+    // jQuery is handy for finding DOM elements and extracting data from them.
+    // To use it, make sure to enable the "Inject jQuery" option.
+    const $ = context.jQuery;
+    const pageTitle = $('title').first().text();
+}
+\`\`\`
+
+# Title 1
+## Title 2
+### Title 3
+#### Title 4
+##### Title 5
+###### Title 6
+
+## Title [with link](/admin-internal)
+## Title \`with code\`
+
+> Blockquote lorem ipsum **with bold** text and some *italic text*.
+> Some \`inline code\` inside quote
+> > And some nested quote as well
+
+Video as link
+[![Watch Web Scraper video](https://img.youtube.com/vi/K76Hib0cY0k/0.jpg)](https://youtu.be/K76Hib0cY0k)
+
+Video as plain text
+https://youtu.be/K76Hib0cY0k
+
+`;
+
+const Template = (props: SimpleMarkdownProps) => {
+    return (
+        <Box px='space32' py='space40' style={{ maxWidth: '850px' }}>
+            <SimpleMarkdown {...props} />
+        </Box>
+    );
+};
+
+export default {
+    title: 'UI-Library/Markdown',
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component: SimpleMarkdown as any,
+};
+
+export const MarkdownRegular = () => <Template size='regular'>{testMarkdown}</Template>;
+export const MarkdownSmall = () => <Template size='small'>{testMarkdown}</Template>;

package/src/components/simple_markdown/simple_markdown.tsx

@@ -177,7 +177,7 @@ const smallMarkdownSizeComponents: Components = {
 
 type MarkdownSize = 'regular' | 'small';
 
-interface SimpleMarkdownProps extends ReactMarkdownOptions {
+export type SimpleMarkdownProps = ReactMarkdownOptions & {
     size?: MarkdownSize,
 }
 

package/src/components/tabs/tab.stories.tsx

@@ -10,6 +10,7 @@ import { Tabs as TabsComponent } from './tabs.js';
 const meta: Meta<typeof TabComponent> = {
     title: 'UI-Library/Tab',
     component: TabComponent,
+    tags: ['new'],
     parameters: {
         design: {
             type: 'figma',

package/src/components/tag.doc.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { theme } from '@apify/ui-library';
+import { DoDonts } from '@apify-packages/storybook-utils';
+
+import * as TagStories from './tag.stories';
+
+<Meta of={TagStories} />
+
+
+# Tag
+
+<br/>
+
+## Overview
+
+Tags represent a set of interactive, merchant-supplied keywords that help label, organize, and categorize objects. 
+Tags can be added or removed from an object by merchants.
+
+<Canvas of={TagStories.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={TagStories.Default} />
+
+---
+
+## Usage
+
+➡️ To add metadata to an element such as category, attribute, or property
+
+➡️ To represent parameters of a filter
+

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

@@ -0,0 +1,61 @@
+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>);

package/src/design_system/tokens/radiuses.doc.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { theme } from '@apify/ui-library';
+
+import * as RadiusesStories from './radiuses.stories';
+
+<Meta of={RadiusesStories} />
+
+# Radiuses
+
+Border radius tokens define consistent corner rounding values used throughout the design system. These tokens ensure visual harmony by providing standardized border radius options from subtle (4px) to fully rounded (100px) for various UI elements like buttons, cards, inputs, and containers.
+
+<Canvas of={RadiusesStories.Default} />

package/src/design_system/tokens/radiuses.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { theme } from '../theme.js';
+import { radiuses } from './radiuses.js';
+
+const RadiusesShowcase = () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: '16px', padding: '20px', backgroundColor: theme.color.neutral.background }}>
+        {Object.entries(radiuses).map(([key, value]) => (
+            <div key={key} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
+                <div
+                    style={{
+                        width: '60px',
+                        height: '60px',
+                        backgroundColor: theme.color.neutral.cardBackground,
+                        border: `1px solid ${theme.color.neutral.border}`,
+                        borderRadius: value,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: theme.color.neutral.text,
+                        fontSize: '11px',
+                        fontWeight: 'bold',
+                    }}
+                >
+                    {key.replace('radius', '')}
+                </div>
+                <span style={{ fontSize: '12px', color: theme.color.neutral.text, fontWeight: '500' }}>{value}</span>
+                <span style={{ fontSize: '11px', color: theme.color.neutral.textMuted }}>{key}</span>
+            </div>
+        ))}
+    </div>
+);
+
+export default {
+    title: 'Design Tokens/Radiuses',
+    component: RadiusesShowcase,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=1425-8220&t=qBdt7hpVWImfc9T3-1',
+        },
+    },
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => <RadiusesShowcase />,
+};

package/src/design_system/tokens/radiuses.ts

@@ -7,6 +7,8 @@
  * @property {'8px'} radius8
  * @property {'12px'} radius12
  * @property {'16px'} radius16
+ * @property {'20px'} radius20
+ * @property {'100px'} radiusFull
  */
 /**
  * @type {Radius}

package/src/design_system/tokens/shadows.doc.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { theme } from '@apify/ui-library';
+
+import * as ShadowsStories from './shadows.stories';
+
+<Meta of={ShadowsStories} />
+
+# Shadows
+
+Shadow tokens define consistent drop shadow effects used throughout the design system. These tokens provide standardized shadow depths from subtle (shadow1) to prominent (shadow5) for creating visual hierarchy and depth in UI elements like cards, buttons, modals, and tooltips.
+
+<Canvas of={ShadowsStories.Default} />
+
+## Do's and Don'ts
+
+Use shadow tokens progressively to create clear visual hierarchy. Elements with higher importance should have deeper shadows, while subtle elements should use lighter shadows or none at all.

package/src/design_system/tokens/shadows.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { theme } from '../theme.js';
+import { shadows } from './shadows.js';
+
+const ShadowsShowcase = () => (
+    <div
+        style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(6, 1fr)',
+            gap: '16px',
+            padding: '20px',
+            backgroundColor: theme.color.neutral.background,
+        }}
+    >
+        {Object.entries(shadows).map(([key, value]) => (
+            <div key={key} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px' }}>
+                <div
+                    style={{
+                        width: '60px',
+                        height: '60px',
+                        backgroundColor: theme.color.neutral.cardBackground,
+                        border: `1px solid ${theme.color.neutral.border}`,
+                        borderRadius: theme.radius.radius8,
+                        boxShadow: value,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        color: theme.color.neutral.text,
+                        fontSize: '11px',
+                        fontWeight: 'bold',
+                    }}
+                />
+                <div style={{ textAlign: 'center' }}>
+                    <div style={{ fontSize: '12px', color: theme.color.neutral.text, fontWeight: '500' }}>{key}</div>
+                    <div style={{ fontSize: '10px', color: theme.color.neutral.textMuted, fontFamily: 'monospace' }}>{value}</div>
+                </div>
+            </div>
+        ))}
+    </div>
+);
+
+export default {
+    title: 'Design Tokens/Shadows',
+    component: ShadowsShowcase,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=3295-4467&t=qBdt7hpVWImfc9T3-1',
+        },
+    },
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    render: () => <ShadowsShowcase />,
+};

package/src/design_system/tokens/spaces.doc.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { theme } from '@apify/ui-library';
+
+import * as SpacesStories from './spaces.stories';
+
+<Meta of={SpacesStories} />
+
+# Spaces
+
+Spacing tokens define consistent spacing values used throughout the design system. These tokens provide standardized spacing options from tight (0.2rem) to generous (8rem) for margins, padding, and gaps between UI elements.
+
+Use the controls below to explore different spacing values and see how they affect the visual separation between elements.
+
+<Canvas of={SpacesStories.Default} style={{ height: '300px' }} />
+
+## Do's and Don'ts
+
+Use spacing tokens progressively to create clear visual rhythm. Smaller spaces should be used for related elements, while larger spaces separate distinct sections and create breathing room.

package/src/design_system/tokens/spaces.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { theme } from '../theme.js';
+import { spaces } from './spaces.js';
+
+const SpacesShowcase = ({ space }: { space: keyof typeof spaces }) => {
+    const value = spaces[space];
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '16px',
+                padding: '20px',
+                backgroundColor: theme.color.neutral.background,
+                minHeight: '80vh',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}
+        >
+            <div style={{ fontSize: '18px', color: theme.color.neutral.text, fontWeight: '600' }}>
+                {space}: {value}
+            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '12px',
+                    backgroundColor: theme.color.neutral.cardBackground,
+                    border: `1px solid ${theme.color.neutral.border}`,
+                    borderRadius: theme.radius.radius8,
+                }}
+            >
+                <div
+                    style={{
+                        width: '50px',
+                        height: '50px',
+                        backgroundColor: theme.color.neutral.background,
+                        border: `1px solid ${theme.color.neutral.border}`,
+                        borderRadius: theme.radius.radius4,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        color: theme.color.neutral.text,
+                    }}
+                >
+                    Card 1
+                </div>
+                <div
+                    style={{
+                        width: value,
+                        height: '50px',
+                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                        borderRadius: '0',
+                    }}
+                />
+                <div
+                    style={{
+                        width: '50px',
+                        height: '50px',
+                        backgroundColor: theme.color.neutral.background,
+                        border: `1px solid ${theme.color.neutral.border}`,
+                        borderRadius: theme.radius.radius4,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        color: theme.color.neutral.text,
+                    }}
+                >
+                    Card 2
+                </div>
+                <div
+                    style={{
+                        width: value,
+                        height: '50px',
+                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                        borderRadius: '0',
+                    }}
+                />
+                <div
+                    style={{
+                        width: '50px',
+                        height: '50px',
+                        backgroundColor: theme.color.neutral.background,
+                        border: `1px solid ${theme.color.neutral.border}`,
+                        borderRadius: theme.radius.radius4,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '12px',
+                        fontWeight: '500',
+                        color: theme.color.neutral.text,
+                    }}
+                >
+                    Card 3
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default {
+    title: 'Design Tokens/Spaces',
+    component: SpacesShowcase,
+    argTypes: {
+        space: {
+            control: 'select',
+            options: Object.keys(spaces),
+            defaultValue: 'space8',
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=1425-7789&t=qBdt7hpVWImfc9T3-1',
+        },
+    },
+} as Meta<typeof SpacesShowcase>;
+
+type Story = StoryObj<typeof SpacesShowcase>;
+
+export const Default: Story = {
+    args: {
+        space: 'space32',
+    },
+};