@apify/ui-library 1.138.0 → 1.138.1

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

@@ -9,8 +9,9 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: 'Shared headings are the standard typography component used throughout the console and shared components. '
-                + 'This is the default choice for most heading needs. **If you\'re unsure which heading component to use, choose this one.**',
+                component:
+                    'Shared headings are the standard typography component used throughout the console and shared components. ' +
+                    "This is the default choice for most heading needs. **If you're unsure which heading component to use, choose this one.**",
             },
         },
     },

package/src/components/text/heading_shared.tsx

@@ -9,7 +9,7 @@ import { TextBaseComponent } from './text_base.js';
 type HeadingSharedType = 'titleXs' | 'titleS' | 'titleM' | 'titleL' | 'titleXl' | 'title2xl' | 'title3xl';
 
 interface HeadingSharedTransientProps {
-    type?: HeadingSharedType,
+    type?: HeadingSharedType;
 }
 
 type StyledHeadingSharedProps = WithTransientProps<HeadingSharedTransientProps>;
@@ -39,16 +39,12 @@ const StyledHeadingShared = styled(TextBaseComponent)<StyledHeadingSharedProps>`
     `}
 `;
 
-export const HeadingShared: React.FC<HeadingSharedProps> = ({
-    type,
-    as,
-    ...rest
-}) => {
+export const HeadingShared: React.FC<HeadingSharedProps> = ({ type, as, ...rest }) => {
     return (
         <StyledHeadingShared
             $type={type}
             forwardedAs={as || HEADING_SHARED_DEFAULT_ELEMENTS[type || 'titleL']}
-            m='none'
+            m="none"
             {...rest}
         />
     );

package/src/components/text/index.ts

@@ -14,6 +14,4 @@ export {
     SHARED_TEXT_TYPES,
 };
 
-export type {
-    SharedTextProps,
-};
+export type { SharedTextProps };

package/src/components/text/text_base.tsx

@@ -6,47 +6,41 @@ import type { BoxProps } from '../box.js';
 import { Box } from '../box.js';
 
 export interface TransientTextBaseProps {
-    italic?: boolean
-    uppercase?: boolean
-    align?: 'left' | 'right' | 'center'
-    color?: string,
+    italic?: boolean;
+    uppercase?: boolean;
+    align?: 'left' | 'right' | 'center';
+    color?: string;
 }
 
 export type StyledTextBaseProps = WithTransientProps<TransientTextBaseProps>;
 export type TextBaseProps = TransientTextBaseProps & BoxProps;
 
 const StyledText = styled(Box)<StyledTextBaseProps>`
-    ${(props) => props.$italic && css`
-        font-style: italic;
-    `}
-
-    ${(props) => props.$uppercase && css`
-        text-transform: uppercase;
-    `}
-
-    ${(props) => props.$align && css`
-        text-align: ${props.$align};
-    `}
-
-    ${(props) => props.$color && css`
-        color: ${props.$color};
-    `}
+    ${(props) =>
+        props.$italic &&
+        css`
+            font-style: italic;
+        `}
+
+    ${(props) =>
+        props.$uppercase &&
+        css`
+            text-transform: uppercase;
+        `}
+
+    ${(props) =>
+        props.$align &&
+        css`
+            text-align: ${props.$align};
+        `}
+
+    ${(props) =>
+        props.$color &&
+        css`
+            color: ${props.$color};
+        `}
 `;
 
-export const TextBaseComponent: React.FC<TextBaseProps> = ({
-    italic,
-    align,
-    color,
-    uppercase,
-    as,
-    ...rest
-}) => (
-    <StyledText
-        $italic={italic}
-        $align={align}
-        $color={color}
-        $uppercase={uppercase}
-        forwardedAs={as}
-        {...rest}
-    />
+export const TextBaseComponent: React.FC<TextBaseProps> = ({ italic, align, color, uppercase, as, ...rest }) => (
+    <StyledText $italic={italic} $align={align} $color={color} $uppercase={uppercase} forwardedAs={as} {...rest} />
 );

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

@@ -10,9 +10,10 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component.'
-                    + ' It provides content-specific text styles for markdown rendering (paragraphs and code snippets).'
-                    + ' For general text usage, use TextShared or TextMarketing instead.',
+                component:
+                    '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component.' +
+                    ' It provides content-specific text styles for markdown rendering (paragraphs and code snippets).' +
+                    ' For general text usage, use TextShared or TextMarketing instead.',
             },
         },
     },
@@ -124,9 +125,9 @@ export const AllVariants: Story = {
             <WarningBanner>
                 <strong>⚠️ Internal Component</strong>
                 <p>
-                    TextContent is used exclusively by the SimpleMarkdown component for rendering
-                    markdown paragraphs and inline code snippets. For general text usage in your
-                    application, use TextShared or TextMarketing components instead.
+                    TextContent is used exclusively by the SimpleMarkdown component for rendering markdown paragraphs
+                    and inline code snippets. For general text usage in your application, use TextShared or
+                    TextMarketing components instead.
                 </p>
             </WarningBanner>
 
@@ -139,16 +140,16 @@ export const AllVariants: Story = {
                 <TextShowcase>
                     <small>type=paragraph, weight=normal</small>
                     <TextContent type="paragraph" weight="normal">
-                        This is a paragraph with normal weight, used for standard markdown text content.
-                        It provides optimal readability for documentation and readme files.
+                        This is a paragraph with normal weight, used for standard markdown text content. It provides
+                        optimal readability for documentation and readme files.
                     </TextContent>
                 </TextShowcase>
 
                 <TextShowcase>
                     <small>type=paragraph, weight=bold</small>
                     <TextContent type="paragraph" weight="bold">
-                        This is a paragraph with bold weight, used for **strong text** in markdown.
-                        It creates emphasis for important information within the content.
+                        This is a paragraph with bold weight, used for **strong text** in markdown. It creates emphasis
+                        for important information within the content.
                     </TextContent>
                 </TextShowcase>
             </div>
@@ -177,9 +178,12 @@ export const AllVariants: Story = {
             <div style={{ marginTop: '2rem', padding: '1.5rem', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
                 <h4 style={{ marginTop: 0 }}>Example in Markdown Context</h4>
                 <TextContent type="paragraph" weight="normal" mb="space8">
-                    The SimpleMarkdown component uses these styles to render markdown. For example,
-                    when you write code like <TextContent type="snippet" weight="normal" as="span">npm install</TextContent> inline,
-                    it uses the snippet type.
+                    The SimpleMarkdown component uses these styles to render markdown. For example, when you write code
+                    like{' '}
+                    <TextContent type="snippet" weight="normal" as="span">
+                        npm install
+                    </TextContent>{' '}
+                    inline, it uses the snippet type.
                 </TextContent>
                 <TextContent type="paragraph" weight="bold">
                     Bold text in markdown is rendered using paragraph with bold weight.

package/src/components/text/text_content.tsx

@@ -11,8 +11,8 @@ export type ContentTextType = 'paragraph' | 'snippet';
 export type ContentTextWeight = 'normal' | 'bold';
 
 export interface TransientContentTextProps {
-    type?: ContentTextType,
-    weight?: ContentTextWeight,
+    type?: ContentTextType;
+    weight?: ContentTextWeight;
 }
 
 type StyledContentTextProps = WithTransientProps<TransientContentTextProps>;
@@ -82,26 +82,23 @@ const StyledTextContent = styled(TextBaseComponent)<StyledContentTextProps>`
 /**
  * @deprecated Use Text or TextMarketing from ui-library
  */
-export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(({
-    type,
-    weight,
-    as,
-    ...rest
-}, ref) => {
-    return (
-        <StyledTextContent
-            $type={type}
-            $weight={weight}
-            forwardedAs={as || 'p'}
-            ref={ref}
-            // We have global CSS file that defines margins for p and h to some 'normalized' value
-            // But at the same time we want to have default margin set to 0 for Text and Headings
-            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
-            // Until then we have to set default 0 margin here
-            m='none'
-            {...rest}
-        />
-    );
-});
+export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(
+    ({ type, weight, as, ...rest }, ref) => {
+        return (
+            <StyledTextContent
+                $type={type}
+                $weight={weight}
+                forwardedAs={as || 'p'}
+                ref={ref}
+                // We have global CSS file that defines margins for p and h to some 'normalized' value
+                // But at the same time we want to have default margin set to 0 for Text and Headings
+                // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
+                // Until then we have to set default 0 margin here
+                m="none"
+                {...rest}
+            />
+        );
+    },
+);
 
 TextContent.displayName = 'TextContent';

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

@@ -9,9 +9,10 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: 'Marketing text is designed for promotional and web-facing content.'
-                    + ' These typography elements are primarily used for marketing pages, landing pages,'
-                    + ' and other web components where engaging, conversion-focused text is needed.',
+                component:
+                    'Marketing text is designed for promotional and web-facing content.' +
+                    ' These typography elements are primarily used for marketing pages, landing pages,' +
+                    ' and other web components where engaging, conversion-focused text is needed.',
             },
         },
     },

package/src/components/text/text_marketing.tsx

@@ -11,8 +11,8 @@ export type MarketingTextSize = 'large' | 'regular' | 'small' | 'extraSmall';
 export type MarketingTextWeight = 'normal' | 'medium' | 'bold';
 
 export interface TransientMarketingTextProps {
-    size?: MarketingTextSize,
-    weight?: MarketingTextWeight,
+    size?: MarketingTextSize;
+    weight?: MarketingTextWeight;
 }
 
 type StyledMarketingTextProps = WithTransientProps<TransientMarketingTextProps>;
@@ -171,26 +171,23 @@ const StyledTextMarketing = styled(TextBaseComponent)<StyledMarketingTextProps>`
     ${(props) => TEXT_MARKETING_VARIANTS_CSS[props.$size || 'regular'][props.$weight || 'normal']}
 `;
 
-export const TextMarketing = forwardRef<HTMLElement | undefined, MarketingTextProps>(({
-    weight,
-    size,
-    as,
-    ...rest
-}, ref) => {
-    return (
-        <StyledTextMarketing
-            $weight={weight}
-            $size={size}
-            forwardedAs={as || 'p'}
-            ref={ref}
-            // We have global CSS file that defines margins for p and h to some 'normalized' value
-            // But at the same time we want to have default margin set to 0 for Text and Headings
-            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
-            // Until then we have to set default 0 margin here
-            m='none'
-            {...rest}
-        />
-    );
-});
+export const TextMarketing = forwardRef<HTMLElement | undefined, MarketingTextProps>(
+    ({ weight, size, as, ...rest }, ref) => {
+        return (
+            <StyledTextMarketing
+                $weight={weight}
+                $size={size}
+                forwardedAs={as || 'p'}
+                ref={ref}
+                // We have global CSS file that defines margins for p and h to some 'normalized' value
+                // But at the same time we want to have default margin set to 0 for Text and Headings
+                // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
+                // Until then we have to set default 0 margin here
+                m="none"
+                {...rest}
+            />
+        );
+    },
+);
 
 TextMarketing.displayName = 'TextMarketing';

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

@@ -9,9 +9,10 @@ export default {
     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.**',
+                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.**",
             },
         },
     },

package/src/components/text/text_shared.tsx

@@ -7,15 +7,15 @@ import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 
 export const SHARED_TEXT_TYPES = ['body', 'code'] as const;
-export type SharedTextType = typeof SHARED_TEXT_TYPES[number];
+export type SharedTextType = (typeof SHARED_TEXT_TYPES)[number];
 
 export type SharedTextSize = 'regular' | 'small' | 'big';
 export type SharedTextWeight = 'normal' | 'medium' | 'bold';
 
 export interface TransientSharedTextProps {
-    type?: SharedTextType,
-    size?: SharedTextSize,
-    weight?: SharedTextWeight,
+    type?: SharedTextType;
+    size?: SharedTextSize;
+    weight?: SharedTextWeight;
 }
 
 type StyledSharedTextProps = WithTransientProps<TransientSharedTextProps>;
@@ -70,26 +70,22 @@ const StyledTextShared = styled(TextBaseComponent)<StyledSharedTextProps>`
     ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'body'][props.$size || 'regular'][props.$weight || 'normal']}
 `;
 
-export const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(({
-    type,
-    size,
-    weight,
-    as,
-    ...rest
-}, ref) => {
-    return (
-        <StyledTextShared
-            $type={type}
-            $size={size}
-            $weight={weight}
-            forwardedAs={as || 'p'}
-            ref={ref}
-            // We have global CSS file that defines margins for p and h to some 'normalized' value
-            // But at the same time we want to have default margin set to 0 for Text and Headings
-            // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
-            // Until then we have to set default 0 margin here
-            m='none'
-            {...rest}
-        />
-    );
-});
+export const TextShared = forwardRef<HTMLElement | undefined, SharedTextProps>(
+    ({ type, size, weight, as, ...rest }, ref) => {
+        return (
+            <StyledTextShared
+                $type={type}
+                $size={size}
+                $weight={weight}
+                forwardedAs={as || 'p'}
+                ref={ref}
+                // We have global CSS file that defines margins for p and h to some 'normalized' value
+                // But at the same time we want to have default margin set to 0 for Text and Headings
+                // In perfect world, all texts would be rendered using Text/Heading components and we could have 0 margin set globally
+                // Until then we have to set default 0 margin here
+                m="none"
+                {...rest}
+            />
+        );
+    },
+);

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

@@ -86,7 +86,9 @@ export const SizeComparison: Story = {
     render: () => (
         <StoryWrapper>
             <div>
-                <TextShared size="small" weight="bold" mb="space8">Small Size</TextShared>
+                <TextShared size="small" weight="bold" mb="space8">
+                    Small Size
+                </TextShared>
                 <HorizontalTile
                     icon={<StarFullIcon size="24" />}
                     content="Small tile with padding of 16px"
@@ -95,7 +97,9 @@ export const SizeComparison: Story = {
                 />
             </div>
             <div>
-                <TextShared size="small" weight="bold" mb="space8">Large Size</TextShared>
+                <TextShared size="small" weight="bold" mb="space8">
+                    Large Size
+                </TextShared>
                 <HorizontalTile
                     icon={<StarFullIcon size="24" />}
                     content="Large tile with padding of 24px"

package/src/components/tile/horizontal_tile.tsx

@@ -2,14 +2,8 @@ import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import type {
-    TileSharedProps,
-    TileSizesType,
-} from './shared.js';
-import {
-    TILE_SIZES,
-    tileStyle,
-} from './shared.js';
+import type { TileSharedProps, TileSizesType } from './shared.js';
+import { TILE_SIZES, tileStyle } from './shared.js';
 
 interface HorizontalTileProps extends TileSharedProps {
     icon?: React.ReactNode;
@@ -33,7 +27,8 @@ const StyledTileWrapper = styled.div<StyledTileWrapperProps>`
     align-items: center;
 
     cursor: pointer;
-    transition: box-shadow ${theme.transition.smoothEaseOut},
+    transition:
+        box-shadow ${theme.transition.smoothEaseOut},
         background-color ${theme.transition.smoothEaseOut},
         border-color ${theme.transition.smoothEaseOut};
 
@@ -63,12 +58,7 @@ export const HorizontalTile: React.FC<HorizontalTileProps> = ({
     ...otherProps
 }) => {
     return (
-        <StyledTileWrapper
-            $hasIcon={!!icon}
-            $size={size}
-            onClick={onClick}
-            {...otherProps}
-        >
+        <StyledTileWrapper $hasIcon={!!icon} $size={size} onClick={onClick} {...otherProps}>
             <div>{icon}</div>
             <div className={WrapperClasses.TILE_CONTENT}>{content}</div>
             <div>{action}</div>

package/src/components/tile/shared.ts

@@ -7,7 +7,7 @@ export const TILE_SIZES = {
     LARGE: 'L',
 };
 
-export type TileSizesType = typeof TILE_SIZES[keyof typeof TILE_SIZES];
+export type TileSizesType = (typeof TILE_SIZES)[keyof typeof TILE_SIZES];
 
 export const tileStyle = css`
     background-color: ${theme.color.neutral.background};
@@ -16,10 +16,10 @@ export const tileStyle = css`
 `;
 
 export type TileSharedProps = {
-    content: React.ReactNode,
-    size?: TileSizesType,
-    isClickable?: boolean,
-    onClick?: () => void,
+    content: React.ReactNode;
+    size?: TileSizesType;
+    isClickable?: boolean;
+    onClick?: () => void;
     id?: string;
     className?: string;
     style?: React.CSSProperties;

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

@@ -40,22 +40,10 @@ const StoryWrapper = styled.div`
 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}
-            />
+            <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>
     ),
 };
@@ -134,7 +122,9 @@ export const SizeComparison: Story = {
     render: () => (
         <StoryWrapper>
             <div>
-                <TextShared size="small" weight="bold" mb="space8">Small Size</TextShared>
+                <TextShared size="small" weight="bold" mb="space8">
+                    Small Size
+                </TextShared>
                 <VerticalTile
                     content={
                         <div>
@@ -150,7 +140,9 @@ export const SizeComparison: Story = {
                 />
             </div>
             <div>
-                <TextShared size="small" weight="bold" mb="space8">Large Size</TextShared>
+                <TextShared size="small" weight="bold" mb="space8">
+                    Large Size
+                </TextShared>
                 <VerticalTile
                     content={
                         <div>

package/src/components/tile/vertical_tile.tsx

@@ -2,14 +2,8 @@ import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import type {
-    TileSharedProps,
-    TileSizesType,
-} from './shared.js';
-import {
-    TILE_SIZES,
-    tileStyle,
-} from './shared.js';
+import type { TileSharedProps, TileSizesType } from './shared.js';
+import { TILE_SIZES, tileStyle } from './shared.js';
 
 interface VerticalTileProps extends TileSharedProps {
     content: React.ReactNode;
@@ -30,7 +24,8 @@ const StyledTileWrapper = styled.div<StyledTileWrapperProps>`
     padding: ${({ $size }) => ($size === TILE_SIZES.SMALL ? theme.space.space16 : theme.space.space24)};
     width: 100%;
     cursor: pointer;
-    transition: box-shadow ${theme.transition.smoothEaseOut},
+    transition:
+        box-shadow ${theme.transition.smoothEaseOut},
         background-color ${theme.transition.smoothEaseOut},
         border-color ${theme.transition.smoothEaseOut};
 

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

@@ -70,7 +70,9 @@ export const WithActions: Story = {
         caption: 'Card with Actions',
         actions: (
             <>
-                <Button size="small" variant="tertiary">Cancel</Button>
+                <Button size="small" variant="tertiary">
+                    Cancel
+                </Button>
                 <Button size="small">Save</Button>
             </>
         ),