@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/components/to_consolidate/pagination.tsx

@@ -0,0 +1,139 @@
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import {
+    ChevronRight20,
+    ChevronLeft20,
+} from '@apify/icons';
+
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
+import { Button } from '../button';
+
+const LEADING_THREE_DOTS_PAGE_KEY = -1;
+const TRAILING_THREE_DOTS_PAGE_KEY = -2;
+
+const PaginationButtonBase = styled(Button).attrs({ variant: 'text' })`
+    padding: 0;
+    height: 28px;
+    min-width: 28px;
+    font-weight: 400 !important; /* default for button is medium, force regular to all page selection buttons */
+
+    &:disabled {
+        background: transparent;
+    }
+
+    &.currentPage {
+        background-color: ${theme.color.neutral.chipBackground};
+
+        &:hover {
+            background-color: ${theme.color.neutral.hover};
+        }
+    }
+`;
+
+const StyledPageSelectionButtons = styled(Box)`
+    display: inline-flex;
+    gap: ${theme.space.space8};
+`;
+
+export type PaginationButtonsProps = {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+
+// TODO: Consolidate and move to /library
+export const PaginationButtons: FC<PaginationButtonsProps> = ({
+    page,
+    totalPages,
+    onPageChange,
+}) => {
+    // Pages to display buttons for (counting from 0, -1 and -2 will mean a special '...' disabled button)
+    const pagesToDisplay = useMemo(() => {
+        const result = [];
+        if (totalPages <= 8) {
+            for (let i = 0; i < totalPages; i++) {
+                result.push(i);
+            }
+        } else if (page < 5) {
+            for (let i = 0; i < 7; i++) {
+                result.push(i);
+            }
+            result.push(TRAILING_THREE_DOTS_PAGE_KEY);
+        } else if (page < totalPages - 4) {
+            result.push(0);
+            result.push(LEADING_THREE_DOTS_PAGE_KEY);
+            for (let i = page - 2; i <= page + 2; i++) {
+                result.push(i);
+            }
+            result.push(TRAILING_THREE_DOTS_PAGE_KEY);
+        } else {
+            result.push(0);
+            result.push(LEADING_THREE_DOTS_PAGE_KEY);
+            for (let i = totalPages - 6; i < totalPages; i++) {
+                result.push(i);
+            }
+        }
+        return result;
+    }, [page, totalPages]);
+
+    return (
+        <StyledPageSelectionButtons>
+            <PaginationButtonBase
+                data-test='page-prev-button'
+                disabled={page <= 0}
+                onClick={() => onPageChange(page - 1)}
+                trackingId='PaginationPrevPage'
+            >
+                <ChevronLeft20 strokeWidth={2} />
+            </PaginationButtonBase>
+            {pagesToDisplay.map((pageToDisplay) => {
+                if (pageToDisplay === LEADING_THREE_DOTS_PAGE_KEY || pageToDisplay === TRAILING_THREE_DOTS_PAGE_KEY) {
+                    return (
+                        <PaginationButtonBase
+                            trackingId='ThreeDots'
+                            key={pageToDisplay}
+                            onClick={() => undefined}
+                            disabled
+                        >
+                            ...
+                        </PaginationButtonBase>
+                    );
+                }
+                if (pageToDisplay === page) {
+                    return (
+                        <PaginationButtonBase
+                            key={pageToDisplay}
+                            data-test='current-page-button'
+                            trackingId='PaginationCurrentPage'
+                            className='currentPage'
+                            onClick={() => undefined}
+                        >
+                            {pageToDisplay + 1}
+                        </PaginationButtonBase>
+                    );
+                }
+                return (
+                    <PaginationButtonBase
+                        key={pageToDisplay}
+                        data-test='page-number-button'
+                        onClick={() => onPageChange(pageToDisplay)}
+                        trackingId='PaginationNumberedPage'
+                    >
+                        {pageToDisplay + 1}
+                    </PaginationButtonBase>
+                );
+            })}
+            <PaginationButtonBase
+                data-test='page-next-button'
+                disabled={page >= totalPages - 1}
+                onClick={() => onPageChange(page + 1)}
+                trackingId='PaginationNextPage'
+            >
+                <ChevronRight20 strokeWidth={2} />
+            </PaginationButtonBase>
+        </StyledPageSelectionButtons>
+    );
+};

package/src/components/to_consolidate/tab_number_chip.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from '../../design_system/theme';
+import { Text } from '../text';
+
+const StyledChip = styled(Text)`
+    color: ${theme.color.neutral.text};
+    background-color: ${theme.color.neutral.chipBackground};
+    line-height: 1;
+    padding: ${theme.space.space2} ${theme.space.space4};
+    border-radius: ${theme.radius.radius8};
+
+    ._disabled & {
+        background-color: ${theme.color.neutral.backgroundSubtle};
+        color: ${theme.color.neutral.textDisabled};
+    }
+`;
+
+interface ChipProps {
+    children: React.ReactNode;
+}
+
+export const TabNumberChip: React.FC<ChipProps> = ({ children, ...rest }) => {
+    return <StyledChip
+        size='small'
+        {...rest}
+    >
+        {children}
+    </StyledChip>;
+};

package/src/design_system/colors_theme.ts

@@ -0,0 +1,213 @@
+export const lightTheme = {
+    neutral0: '#ffffff',
+    neutral25: '#f8f9fc',
+    neutral50: '#f3f4fa',
+    neutral75: '#eef0f8',
+    neutral100: '#e0e3f2',
+    neutral150: '#d0d5e9',
+    neutral200: '#c0c6de',
+    neutral250: '#b0b8d1',
+    neutral300: '#a3abc5',
+    neutral350: '#969eb8',
+    neutral400: '#8a93ae',
+    neutral450: '#7b84a0',
+    neutral500: '#6c7590',
+    neutral550: '#626a85',
+    neutral600: '#555d76',
+    neutral650: '#4b526b',
+    neutral700: '#3f475d',
+    neutral750: '#31384d',
+    neutral775: '#2b3143',
+    neutral800: '#272d3e',
+    neutral850: '#242836',
+    neutral875: '#1d202a',
+    neutral900: '#191b22',
+    neutral950: '#0a0b0f',
+    yellow25: '#f9f6ea',
+    yellow50: '#f9f0db',
+    yellow75: '#f7e8c4',
+    yellow100: '#f7dfb1',
+    yellow200: '#f5b315',
+    yellow300: '#e39c04',
+    yellow350: '#d58e00',
+    yellow400: '#ca8200',
+    yellow500: '#a96600',
+    yellow600: '#8c4e02',
+    yellow700: '#864906',
+    red25: '#fcf2ef',
+    red50: '#fff0ec',
+    red75: '#ffe3dc',
+    red100: '#fedad1',
+    red200: '#ffb39f',
+    red300: '#ff886e',
+    red350: '#fc7156',
+    red400: '#fa4d37',
+    red500: '#e3231d',
+    red600: '#bb0401',
+    red700: '#af0600',
+    green25: '#e8f9ef',
+    green50: '#e4f5e5',
+    green75: '#daefdc',
+    green100: '#cfe9d1',
+    green200: '#80da8d',
+    green300: '#46c263',
+    green350: '#22b551',
+    green400: '#00ab46',
+    green500: '#008a27',
+    green600: '#086e08',
+    green700: '#176b08',
+    blue25: '#f0f8ff',
+    blue50: '#ecf1ff',
+    blue75: '#e1eaff',
+    blue100: '#d8e2ff',
+    blue200: '#b2c6ff',
+    blue300: '#88abfe',
+    blue350: '#709efd',
+    blue400: '#5290f9',
+    blue500: '#1672eb',
+    blue600: '#1a57da',
+    blue700: '#224ed5',
+    roseLight: '#f483b5',
+    roseBase: '#c6387d',
+    roseDark: '#781552',
+    roseText: '#b6006b',
+    buttercupLight: '#ffdd96',
+    buttercupBase: '#f0b21b',
+    buttercupDark: '#c37319',
+    buttercupText: '#a65d00',
+    paprikaLight: '#e44467',
+    paprikaBase: '#9b0238',
+    paprikaDark: '#4a0018',
+    paprikaText: '#ba0044',
+    tealLight: '#a7f2ed',
+    tealBase: '#30c0bb',
+    tealDark: '#297774',
+    tealText: '#018181',
+    indigoLight: '#a1b7ff',
+    indigoBase: '#5d85e1',
+    indigoDark: '#365494',
+    indigoText: '#2563c1',
+    slateLight: '#c1c5e1',
+    slateBase: '#8490c4',
+    slateDark: '#525c85',
+    slateText: '#566087',
+    coralLight: '#ffc89f',
+    coralBase: '#fa8136',
+    coralDark: '#bb4511',
+    coralText: '#c74000',
+    lavenderLight: '#bf97ed',
+    lavenderBase: '#6a14de',
+    lavenderDark: '#330276',
+    lavenderText: '#6e00f4',
+    bambooLight: '#64cda5',
+    bambooBase: '#12966f',
+    bambooDark: '#195d46',
+    bambooText: '#007455',
+} as const;
+
+export const darkTheme = {
+    neutral0: '#ffffff',
+    neutral25: '#f8f9fc',
+    neutral50: '#f3f4fa',
+    neutral75: '#eef0f8',
+    neutral100: '#e1e3ed',
+    neutral150: '#d1d5e4',
+    neutral200: '#c1c6d9',
+    neutral250: '#b2b8cc',
+    neutral300: '#a5abc0',
+    neutral350: '#989eb3',
+    neutral400: '#8c93a8',
+    neutral450: '#7d8499',
+    neutral500: '#6e758a',
+    neutral550: '#646a7f',
+    neutral600: '#575d71',
+    neutral650: '#4d5265',
+    neutral700: '#414758',
+    neutral750: '#343847',
+    neutral775: '#2d313e',
+    neutral800: '#2a2d39',
+    neutral850: '#252832',
+    neutral875: '#1e2027',
+    neutral900: '#1a1b21',
+    neutral950: '#101114',
+    yellow25: '#fcdc73',
+    yellow50: '#ffd761',
+    yellow75: '#f9ce4b',
+    yellow100: '#f5bc38',
+    yellow200: '#cf9117',
+    yellow300: '#a56909',
+    yellow350: '#8a4f05',
+    yellow400: '#6d3806',
+    yellow500: '#5d2e0e',
+    yellow600: '#3f1b07',
+    yellow700: '#301806',
+    red25: '#f5a790',
+    red50: '#fe9e8a',
+    red75: '#ff8770',
+    red100: '#ff7157',
+    red200: '#ef6045',
+    red300: '#cf4436',
+    red350: '#aa3229',
+    red400: '#812420',
+    red500: '#672523',
+    red600: '#40191b',
+    red700: '#381719',
+    green25: '#74d584',
+    green50: '#6ccd7c',
+    green75: '#55c06a',
+    green100: '#3bb358',
+    green200: '#23a64a',
+    green300: '#068a35',
+    green350: '#006e29',
+    green400: '#00531e',
+    green500: '#14441f',
+    green600: '#0f2b14',
+    green700: '#09260f',
+    blue25: '#92C0ff',
+    blue50: '#8ebcff',
+    blue75: '#80a9ff',
+    blue100: '#6f9dff',
+    blue200: '#5990ff',
+    blue300: '#3970d7',
+    blue350: '#295cbb',
+    blue400: '#194594',
+    blue500: '#1a3a78',
+    blue600: '#0d2550',
+    blue700: '#151d34',
+    roseLight: '#e88bb3',
+    roseBase: '#b8487b',
+    roseDark: '#6f234f',
+    roseText: '#ed8bb5',
+    buttercupLight: '#f9deaa',
+    buttercupBase: '#e5b557',
+    buttercupDark: '#b87939',
+    buttercupText: '#ebbf6c',
+    paprikaLight: '#e26c7d',
+    paprikaBase: '#9e384b',
+    paprikaDark: '#511d27',
+    paprikaText: '#f67c8d',
+    tealLight: '#aef0f5',
+    tealBase: '#58bcc4',
+    tealDark: '#408288',
+    tealText: '#62c1c8',
+    indigoLight: '#a8b7ed',
+    indigoBase: '#6d85ca',
+    indigoDark: '#425484',
+    indigoText: '#a2b2eb',
+    slateLight: '#c2c5dc',
+    slateBase: '#8690bf',
+    slateDark: '#535c81',
+    slateText: '#afb2c9',
+    coralLight: '#f3ccb0',
+    coralBase: '#f08848',
+    coralDark: '#9a4e2d',
+    coralText: '#f9b27b',
+    lavenderLight: '#b482ed',
+    lavenderBase: '#8148c9',
+    lavenderDark: '#48296f',
+    lavenderText: '#be8af9',
+    bambooLight: '#7acaa9',
+    bambooBase: '#439274',
+    bambooDark: '#305b4a',
+    bambooText: '#65bc99',
+} as const;

package/src/design_system/generate_color_definitions.js

@@ -0,0 +1,43 @@
+import { readFileSync } from 'fs';
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const colorsDefinitions = JSON.parse(code);
+
+const getObjectValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, part) => {
+        return acc && acc[part];
+    }, obj);
+};
+
+const getColorPropertyName = (semanticCategory, property) => {
+    const semanticColorName = `${property.split(/[_ ]/).map((semanticPartName) => semanticPartName.toLowerCase()).join('-')}`;
+
+    // lower case and replace spaces with dashes
+    const semanticCategoryName = semanticCategory.toLowerCase().split(' ').join('-');
+
+    return `--color-${semanticCategoryName}-${semanticColorName}`;
+};
+
+const generateColorDefinitions = (themeVariant) => {
+    const mergedPalette = {
+        ...colorsDefinitions[themeVariant].Semantic,
+        ...colorsDefinitions[themeVariant].Decorative,
+    };
+
+    const colorDefinitions = [];
+    for (const [semanticCategory, palette] of Object.entries(mergedPalette)) {
+        for (const [key, { value }] of Object.entries(palette)) {
+            colorDefinitions.push(
+                // eslint-disable-next-line max-len
+                `${getColorPropertyName(semanticCategory, key)}: ${value.startsWith('#') ? value : getObjectValueByPath(colorsDefinitions[themeVariant], value.slice(1, -1)).value};`,
+            );
+        }
+    }
+
+    return colorDefinitions.join('\n');
+};
+
+['light', 'dark'].forEach((themeVariant) => {
+    console.log(`\n*** CSS variables fro ${themeVariant} mode ***\n`, generateColorDefinitions(themeVariant));
+});