@apify/ui-library 1.170.2-uilibraryversion2candida-85b55e.17 → 1.171.0

package/src/components/chip/chip.tsx

@@ -0,0 +1,167 @@
+import clsx from 'clsx';
+import type { FC } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import type { ValueOf } from '../../internal_type_utils';
+import type { RegularBoxProps } from '../box';
+
+export const CHIP_SIZES = {
+    EXTRA_SMALL: 'XS',
+    SMALL: 'S',
+    MEDIUM: 'M',
+    LARGE: 'L',
+} as const;
+type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
+
+export const CHIP_TYPES = {
+    DEFAULT: 'DEFAULT',
+    PRIMARY: 'PRIMARY',
+    SUCCESS: 'SUCCESS',
+    WARNING: 'WARNING',
+    DANGER: 'DANGER',
+} as const;
+export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
+
+export const classNames = {
+    BODY: 'Chip-body',
+};
+
+const chipSizeStyle = {
+    [CHIP_SIZES.EXTRA_SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 0 4px;
+        border-radius: 6px;
+    `,
+    [CHIP_SIZES.SMALL]: css`
+        font-size: 12px;
+        line-height: 16px;
+        padding: 2px 4px;
+        border-radius: 6px;
+    `,
+    [CHIP_SIZES.MEDIUM]: css`
+        font-size: 14px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+    [CHIP_SIZES.LARGE]: css`
+        /* TODO: (typography-mismatch) 16px/20px does not match any canonical typography token — needs designer input. Blocks migrating chipSizeStyle to typography token interpolations (XS/S match bodyS, M matches bodyM). */
+        font-size: 16px;
+        line-height: 20px;
+        padding: 2px 8px;
+        border-radius: 100px;
+    `,
+} satisfies Record<CHIP_SIZES, unknown>;
+
+const chipTypeStyle = {
+    [CHIP_TYPES.DEFAULT]: css`
+        color: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
+    `,
+    [CHIP_TYPES.PRIMARY]: css`
+        color: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.chipBackground};
+    `,
+    [CHIP_TYPES.SUCCESS]: css`
+        color: ${theme.color.success.chipText};
+        background: ${theme.color.success.chipBackground};
+    `,
+    [CHIP_TYPES.WARNING]: css`
+        color: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.chipBackground};
+    `,
+    [CHIP_TYPES.DANGER]: css`
+        color: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.chipBackground};
+    `,
+} satisfies Record<CHIP_TYPES, unknown>;
+
+const chipTypeHoverStyle = {
+    [CHIP_TYPES.DEFAULT]: css`
+        background: ${theme.color.neutral.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.PRIMARY]: css`
+        background: ${theme.color.primary.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.SUCCESS]: css`
+        background: ${theme.color.success.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.WARNING]: css`
+        background: ${theme.color.warning.chipBackgroundHover};
+    `,
+    [CHIP_TYPES.DANGER]: css`
+        background: ${theme.color.danger.chipBackgroundHover};
+    `,
+} satisfies Record<CHIP_TYPES, unknown>;
+
+const StyledChip = styled.span<{ size: CHIP_SIZES; type: CHIP_TYPES; clickable: boolean }>`
+    ${({ size }) => chipSizeStyle[size]};
+    ${({ type }) => chipTypeStyle[type]};
+    ${({ type, clickable }) =>
+        clickable &&
+        css`
+            &:hover {
+                ${chipTypeHoverStyle[type]};
+            }
+        `};
+    /* Static styles */
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    /* TODO: (typography-keyword) 'normal' keyword used instead of numeric value (400) or typography token. */
+    font-weight: normal;
+    white-space: nowrap;
+    cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
+    gap: ${theme.space.space4};
+`;
+
+export type ChipProps = RegularBoxProps & {
+    type?: CHIP_TYPES;
+    size?: CHIP_SIZES;
+    icon?: React.ReactNode;
+    clickable?: boolean;
+};
+
+/**
+ * Component for displaying status and for labelling other components.
+ * @deprecated Use Tag or Badge
+ */
+export const Chip = forwardRef(
+    (
+        {
+            type = CHIP_TYPES.DEFAULT,
+            size = CHIP_SIZES.MEDIUM,
+            clickable = false,
+            icon,
+            children,
+            className,
+            ...passThroughProps
+        }: ChipProps,
+        ref,
+    ) => {
+        const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
+
+        return (
+            <StyledChip ref={ref} {...otherProps}>
+                {children}
+                {icon}
+            </StyledChip>
+        );
+    },
+);
+
+Chip.displayName = 'Chip';
+
+type SpecificChipProps = Omit<ChipProps, 'type'>;
+
+export const PrimaryChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.PRIMARY} {...props} />;
+export const NeutralChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DEFAULT} {...props} />;
+export const SuccessChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.SUCCESS} {...props} />;
+export const DangerChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.DANGER} {...props} />;
+export const WarningChip: FC<SpecificChipProps> = (props) => <Chip type={CHIP_TYPES.WARNING} {...props} />;

package/src/components/chip/index.ts

@@ -0,0 +1 @@
+export * from './chip';

package/src/components/code/code_block/code_block.stories.jsx

@@ -43,13 +43,20 @@ const Template = ({ content, ...args }) => {
             <CodeBlock content={content} {...args} />
             <h2>CodeBlock with title</h2>
             <CodeBlock title="What a code" content={content} {...args} />
-            <h2>CodeBlock with dots and action</h2>
-            <CodeBlock content={content} highlightLines={[2, 3, 7]} showDotsHeader showActionButton {...args} />
-            <h2>CodeBlock with long lines and action</h2>
-            <CodeBlock content={longCode} showActionButton {...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 and action</h2>
-            <CodeBlock content={multipleLongCodes} 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>

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

@@ -34,6 +34,7 @@ export const SyntaxHighlighterBaseStylesWrapper = styled(Box)<SyntaxHighlighterB
 
 export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<{
     $hasHeader: boolean;
+    $gradientRotation?: number;
     $highlightLines?: number[];
     $hasActionButton?: boolean;
     $hasTabs?: boolean;
@@ -157,6 +158,16 @@ export const CodeBlockWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<{
             `}
     }
 
+    .CodeBlock-Gradient {
+        right: 0px;
+        bottom: 0px;
+
+        aspect-ratio: 1/1;
+        height: 250%;
+
+        transform: translate(50%, 70%) rotate(${({ $gradientRotation }) => $gradientRotation ?? 0}deg) scaleX(-1);
+    }
+
     .CodeBlock-HederDotsWrapper {
         display: flex;
         padding: ${theme.space.space8};

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

@@ -3,6 +3,7 @@ import type React from 'react';
 import { useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box';
+import { ColorWheelGradient } from '../../color_wheel_gradient';
 import { Link } from '../../link';
 import { Text } from '../../text';
 import type { SharedTextSize } from '../../text/text_shared';
@@ -102,6 +103,8 @@ export type CodeBlockProps = RegularBoxProps & {
     className?: string;
     hideBashHeader?: boolean;
     onTabChange?: (key: string, e: React.MouseEvent) => Promise<void> | void;
+    showGradient?: boolean;
+    gradientRotation?: number;
     highlightLines?: number[];
     showActionButton?: boolean;
     actionButtonLabel?: string;
@@ -123,10 +126,12 @@ export const CodeBlock = ({
     highlightLines,
     onTabChange,
     defaultTabKey,
+    showGradient,
     hideBashHeader,
     showActionButton,
     fullWidth,
     actionButtonLabel,
+    gradientRotation = 340,
     hideLineNumbers,
     fullHeight,
     title,
@@ -180,6 +185,7 @@ export const CodeBlock = ({
     return (
         <CodeBlockWrapper
             $hasHeader={showHeader}
+            $gradientRotation={gradientRotation}
             $hasActionButton={showActionButton}
             $hasTabs={isMultiTab}
             $fullWidth={fullWidth}
@@ -215,6 +221,8 @@ export const CodeBlock = ({
                 )}
                 {!hideCopyButton && <CopyButton code={currentCode} />}
             </div>
+
+            {showGradient && <ColorWheelGradient className="CodeBlock-Gradient" blurSize={69} />}
         </CodeBlockWrapper>
     );
 };

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

@@ -46,6 +46,7 @@ export type InlineCodeProps = RegularBoxProps & {
     withCopyButton?: boolean;
 };
 
+// This might be just a Chip component
 export const InlineCode: React.FC<InlineCodeProps> = ({ children, size, withCopyButton, ...props }) => (
     <Wrapper {...props}>
         <Text type="code" as="code" size={size}>

package/src/components/color_wheel_gradient/color_wheel_gradient.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
+import type { ElementType } from 'react';
+
+import { ColorWheelGradient, type ColorWheelGradientProps } from './color_wheel_gradient';
+
+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>
+);
+
+// oxlint-disable-next-line local/storybook-figma-design-url -- decorative gradient, no Figma counterpart
+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',
+        },
+    },
+} 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/color_wheel_gradient/color_wheel_gradient.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export interface ColorWheelGradientProps {
+    translateX?: number;
+    translateY?: number;
+    rotation?: number;
+    radius?: number;
+    blurSize?: number;
+}
+
+export const ColorWheelGradient = styled.div<ColorWheelGradientProps>`
+    ${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
+    z-index: 1;
+    position: absolute;
+    width: ${radius ? `${radius}px` : 'auto'};
+    height: ${radius ? `${radius}px` : 'auto'};
+    transform-origin: center;
+    transform: translate(${translateX}px, ${translateY}px) rotate(${rotation}deg);
+
+    opacity: 0.30;
+    background: conic-gradient(
+        rgba(93, 133, 225, 0.99) 0deg,
+        rgba(106, 20, 222, 0.99) 69deg,
+        rgba(228, 68, 103, 0.99) 150deg,
+        rgba(250, 129, 54, 0.99) 221deg,
+        rgba(240, 178, 27, 0.99) 287deg,
+        rgba(18, 150, 111, 0.99) 360deg
+    );
+
+    border-radius: 50%;
+    filter: blur(${blurSize}px)
+`}
+`;

package/src/components/color_wheel_gradient/index.ts

@@ -0,0 +1 @@
+export * from './color_wheel_gradient';

package/src/components/icon_button/icon_button.tsx

@@ -158,7 +158,7 @@ const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
             color: ${iconColor};
         }
 
-        &:focus {
+        &:focus-visible {
             border-color: ${theme.color.primary.fieldBorderActive};
         }
 

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './link';
 export * from './action_link';
 export * from './simple_markdown';
 export * from './code';
+export * from './color_wheel_gradient';
 export * from './readme_renderer';
 export * from './card';
 export * from './markdown';
@@ -17,7 +18,9 @@ export * from './pagination';
 export * from './tab_number_chip';
 export * from './tile';
 export * from './blog_article';
+export * from './banner';
 export * from './actor_template_card';
+export * from './chip';
 export * from './image';
 export * from './rating';
 export * from './badge';

package/src/components/tag/tag.tsx

@@ -13,7 +13,7 @@ import { Link, type RegularLinkProps } from '../link';
 import { Text } from '../text';
 import { type SharedTextSize, type SharedTextType } from '../text';
 
-export type TagSize = SharedTextSize;
+type TagSize = SharedTextSize;
 export const TAG_SIZES: TagSize[] = ['big', 'regular', 'small'];
 
 const TAG_ICON_SIZES = {