@apify/ui-library 1.98.3 → 1.99.1

package/src/components/icon_button.tsx

@@ -0,0 +1,211 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { IconComponent, IconSize } from '@apify/ui-icons';
+
+import type { ValueOf } from '@apify-packages/types';
+
+import { theme } from '../design_system/theme.js';
+import type { RegularBoxProps } from './box.js';
+import { Button, BUTTON_SIZE_VARIANTS_CSS, type ButtonSize, type RegularButtonProps, type TransientButtonProps } from './button.js';
+import { Tooltip } from './floating/tooltip.js';
+import { Link, type RegularLinkProps } from './link.js';
+import { InlineSpinner, spinnerClassNames } from './spinner.js';
+
+export const ICON_BUTTON_VARIANTS = {
+    DEFAULT: 'DEFAULT',
+    BORDERED: 'BORDERED',
+    DANGER: 'DANGER',
+    DANGER_BORDERED: 'DANGER_BORDERED',
+} as const;
+export type ICON_BUTTON_VARIANTS = ValueOf<typeof ICON_BUTTON_VARIANTS>;
+
+const iconButtonVariantStyle = {
+    [ICON_BUTTON_VARIANTS.DEFAULT]: {
+        backgroundColor: 'transparent',
+        backgroundHoverColor: theme.color.neutral.hover,
+        backgroundDisabledColor: 'transparent',
+        borderColor: 'transparent',
+        borderHoverColor: 'transparent',
+        borderDisabledColor: 'transparent',
+        iconColor: theme.color.neutral.text,
+    },
+    [ICON_BUTTON_VARIANTS.BORDERED]: {
+        backgroundColor: theme.color.neutral.backgroundMuted,
+        backgroundHoverColor: theme.color.neutral.hover,
+        backgroundDisabledColor: theme.color.neutral.disabled,
+        borderColor: theme.color.neutral.border,
+        borderHoverColor: theme.color.neutral.border,
+        borderDisabledColor: theme.color.neutral.border,
+        iconColor: theme.color.neutral.text,
+    },
+    [ICON_BUTTON_VARIANTS.DANGER_BORDERED]: {
+        backgroundColor: theme.color.neutral.backgroundMuted,
+        backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
+        borderColor: theme.color.neutral.border,
+        borderHoverColor: theme.color.danger.borderSubtle,
+        borderDisabledColor: theme.color.neutral.border,
+        iconColor: theme.color.danger.text,
+    },
+    [ICON_BUTTON_VARIANTS.DANGER]: {
+        backgroundColor: 'transparent',
+        backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
+        borderColor: 'transparent',
+        borderHoverColor: 'transparent',
+        borderDisabledColor: 'transparent',
+        iconColor: theme.color.danger.text,
+    },
+} satisfies Record<ICON_BUTTON_VARIANTS, unknown>;
+
+type IconButtonSizeConfig = {
+    iconSize: IconSize;
+    spinnerSize: string;
+}
+
+const iconButtonSizeConfig: Record<ButtonSize, IconButtonSizeConfig> = {
+    extraLarge: {
+        iconSize: '24',
+        spinnerSize: '2.4rem',
+    },
+    large: {
+        iconSize: '20',
+        spinnerSize: '2rem',
+    },
+    medium: {
+        iconSize: '16',
+        spinnerSize: '1.6rem',
+    },
+    small: {
+        iconSize: '16',
+        spinnerSize: '1.6rem',
+    },
+    extraSmall: {
+        iconSize: '12',
+        spinnerSize: '1.2rem',
+    },
+};
+
+const getIconButtonColorStyles = (variant: ICON_BUTTON_VARIANTS) => {
+    const {
+        backgroundColor,
+        backgroundHoverColor,
+        backgroundDisabledColor,
+        borderDisabledColor,
+        borderColor,
+        borderHoverColor,
+        iconColor,
+    } = iconButtonVariantStyle[variant];
+
+    return css`
+        color: ${iconColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            background-color: ${backgroundHoverColor};
+            border-color: ${borderHoverColor || borderColor};
+            color: ${iconColor};
+        }
+
+        &:focus {
+            border-color: ${theme.color.primary.fieldBorderActive};
+        }
+
+        &:active {
+            background-color: ${theme.color.neutral.actionSecondaryActive};
+            border-color: ${theme.color.neutral.actionSecondaryActive};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.iconDisabled};
+            background-color: ${backgroundDisabledColor};
+            border-color: ${borderDisabledColor};
+
+            cursor: default;
+        }
+    `;
+};
+
+const StyledButton = styled(Button) <{ $variant: ICON_BUTTON_VARIANTS, $size: ButtonSize }>`
+    ${({ $variant }) => getIconButtonColorStyles($variant)}
+
+    /* Override default button styles */
+    box-sizing: border-box;
+    width: ${({ $size }) => (BUTTON_SIZE_VARIANTS_CSS[$size].size)}px;
+    padding: 0;
+
+    .${spinnerClassNames.SPINNER} .path {
+        stroke: ${theme.color.neutral.icon};
+    }
+`;
+
+type IconButtonNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type IconButtonNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: RegularButtonProps;
+    };
+}
+
+export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps & Pick<TransientButtonProps, 'size'> & {
+    as?: T
+    variant?: ICON_BUTTON_VARIANTS
+    Icon: IconComponent
+    disabled?: boolean
+    isLoading?: boolean
+    title?: string
+    tooltipProps?: unknown
+} & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
+
+/**
+ * Simplified button component that displays an icon.
+ * Has a tooltip and a loading state.
+ */
+export const IconButton = forwardRef(<T extends IconButtonNodeType>(
+    {
+        variant = ICON_BUTTON_VARIANTS.DEFAULT,
+        size = 'medium',
+        as = 'button' as T,
+        title,
+        disabled = false,
+        isLoading = false,
+        Icon,
+        tooltipProps,
+        ...passThroughProps
+    }: IconButtonProps<T>, ref: React.Ref<IconButtonNodePropsMap[T]['element']>) => {
+    const otherProps = { ...passThroughProps, size };
+
+    const component: React.ElementType = as === 'a' ? Link : as;
+    const { iconSize, spinnerSize } = iconButtonSizeConfig[size];
+
+    const button = (
+        <StyledButton
+            forwardedAs={component}
+            ref={ref}
+            disabled={disabled || isLoading}
+            type='button'
+            aria-label={title}
+            LeftIcon={isLoading ? () => <InlineSpinner size={spinnerSize} /> : () => <Icon size={iconSize} />}
+            // We apply our own styles to the button, so we need to override the default variant
+            variant="tertiary"
+            $size={size}
+            $variant={variant}
+            {...otherProps}
+        />
+    );
+
+    return title ? (
+        // @ts-expect-error tooltip is not migrated to TS yet
+        <Tooltip content={title} {...tooltipProps}>
+            {button}
+        </Tooltip>
+    ) : button;
+});
+
+IconButton.displayName = 'IconButton';

package/src/components/index.ts

@@ -21,3 +21,5 @@ export * from './badge.js';
 export * from './tag.js';
 export * from './tabs/index.js';
 export * from './shortcut.js';
+export * from './icon_button.js';
+export * from './spinner.js';

package/src/components/spinner.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/react-vite';
+
+import { InlineSpinner, Spinner, type SpinnerProps } from './spinner.js';
+
+export default {
+    title: 'UI-Library/Spinner',
+    parameters: { layout: 'padded' },
+    component: Spinner,
+    args: {},
+} as Meta<typeof Spinner>;
+
+const Template = (args: SpinnerProps) => <Spinner {...args} />;
+
+export const Standalone = Template.bind({});
+
+export const WithinContainer = (args: SpinnerProps) => {
+    return (
+        <div style={{
+            minWidth: '100px',
+            minHeight: '200px',
+            border: 'solid 1px lightgray',
+            borderRadius: '1rem',
+            position: 'relative',
+        }}>
+            <Spinner {...args} />
+        </div>
+    );
+};
+
+export const Inline = () => {
+    const elements: React.ElementType[] = ['h1', 'h2', 'h3', 'p'];
+    return (
+        <div style={{ width: '100%' }}>
+            {elements.map((Element) => <Element key={Element}>{Element}: There was a <InlineSpinner /> in New Orleans.</Element>)}
+        </div>
+    );
+};

package/src/components/spinner.tsx

@@ -0,0 +1,116 @@
+import styled, { keyframes } from 'styled-components';
+
+import { theme } from '../design_system/theme.js';
+import type { WithTransientProps } from '../type_utils.js';
+
+export const spinnerClassNames = {
+    SPINNER: 'spinner',
+};
+
+const rotate = keyframes`
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+
+const dash = keyframes`
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+`;
+
+export type SpinnerProps = {
+    id?: string;
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    small?: boolean,
+    loadingReason?: string,
+};
+
+type SpinnerWrapperProps = WithTransientProps<Pick<SpinnerProps, 'small'>>;
+
+// styled-components used in order to make 'as' prop work by default
+// span is intentional instead of div, so it can be validly nested in a <p>
+// display: block is used because it was div before and we don't wanna break anything
+const SpinnerWrapper = styled.span<SpinnerWrapperProps>`
+    display: block;
+
+    .${spinnerClassNames.SPINNER} {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+
+        width: ${({ $small }) => ($small ? '3rem' : '5rem')};
+        height: ${({ $small }) => ($small ? '3rem' : '5rem')};
+
+        & .path {
+            transform-origin: center;
+            stroke: ${theme.color.primary.text};
+            animation: ${dash} 1.5s ease-in-out infinite, ${rotate} 2s linear infinite;
+        }
+    }
+`;
+
+/**
+ * Visualize loading state of a component.
+ *
+ * Use this spinner when a page or section is waiting for asynchronous data.
+ * Do not use it for buttons and small components, apply only for bigger sections.
+ *
+ * Keep the spinner centered (eg. by setting position to parent container).
+ */
+export const Spinner = ({ loadingReason, small, ...props }: SpinnerProps) => {
+    return (
+        <SpinnerWrapper {...props} title={loadingReason} $small={small}>
+            <svg className={spinnerClassNames.SPINNER} viewBox="0 0 50 50">
+                <circle
+                    className="path"
+                    cx="25"
+                    cy="25"
+                    r="20"
+                    fill="none"
+                    strokeWidth="5"
+                    strokeLinecap="round"
+                ></circle>
+            </svg>
+        </SpinnerWrapper>
+    );
+};
+
+/**
+ * Spinner with basic block styling
+ * This styles should probably be in default spinner, but it's dangerous to modify it as it's used on so many places
+ */
+export const BlockSpinner = styled(Spinner)`
+    position: relative; /* "hold" absolutely positioned spinner */
+    width: 100%;
+    min-height: 8rem;
+`;
+
+/**
+ * Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
+ */
+export const InlineSpinner = styled(Spinner)<{size?: string}>`
+    display: inline-block;
+    position: relative;
+    height: ${({ size }) => size || theme.space.space12};
+    width: ${({ size }) => size || theme.space.space12};
+    vertical-align: middle;
+
+    .${spinnerClassNames.SPINNER} {
+        width: 100%;
+        height: 100%;
+    }
+`;