@apify/ui-library 0.71.1-featcolortokens-178953.58 → 0.71.1-featcolortokens-178953.67

package/src/components/to_consolidate/pagination.tsx

@@ -0,0 +1,136 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import styled from 'styled-components';
+
+import { ChevronLeftIcon, ChevronRightIcon } from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { Box } from '../box.js';
+import { Button } from '../button.js';
+
+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'
+            >
+                <ChevronLeftIcon size="16" />
+            </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'
+            >
+                <ChevronRightIcon size="16" />
+            </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.js';
+import { Text } from '../text/index.js';
+
+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/build_color_tokens.js

@@ -0,0 +1,183 @@
+import StyleDictionary from 'style-dictionary';
+
+const DO_NOT_EXPORT_COMMENT = `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+`;
+
+function toCamelCase(str) {
+    return str
+        .toLowerCase()
+        .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
+}
+
+/**
+ * Converts an object to a TypeScript literal representation with proper indentation
+ * that can be written to a TypeScript file.
+ */
+function objectToTSLiteral(obj, indentLevel = 0) {
+    const indent = (level) => '    '.repeat(level); // 2-space indent
+
+    if (obj && typeof obj === 'object') {
+        const entries = Object.entries(obj);
+        if (entries.length === 0) return '{}';
+        return `{\n${entries
+            .map(
+                ([key, value]) => `${indent(indentLevel + 1)}${key}: ${objectToTSLiteral(value, indentLevel + 1)}`,
+            )
+            .join('\n')}\n${indent(indentLevel)}}${indentLevel > 0 ? ',' : ''}`;
+    } if (typeof obj === 'string') {
+        return `'${obj}',`;
+    }
+    return String(obj);
+}
+
+/**
+ * Build color tokens for a given theme.
+ * @param theme {string} - The theme to build tokens, 'light' or 'dark'.
+ */
+async function buildTheme(theme) {
+    // Transform to replace 'semantic' and 'decorative' with 'color' in token names
+    // Example: 'semantic-neutral-text' becomes 'color-neutral-text'
+    StyleDictionary.registerTransform({
+        name: 'name/prefix-color-name',
+        type: 'name',
+        transform: (prop) => {
+            return prop.name
+                .replace(/^semantic/, 'color')
+                .replace(/^decorative/, 'color');
+        },
+    });
+
+    // Format to generate typescript file that exports CSS variables as a string
+    // Example: export const tokens = `--color-neutral-text: #000; --color-primary: #fff;`
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-variables-string',
+        format: ({ dictionary, options }) => {
+            const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
+            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = \`\n${lines.join('\n')}\n\`;\n`;
+        },
+    });
+
+    // Format to generate typescript file that exports CSS properties as an object
+    // Example: export const tokens = { colorNeutralText: 'var(--color-neutral-text)', colorPrimary: 'var(--color-primary)' };
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-color-properties',
+        format: ({ dictionary, options }) => {
+            const properties = {};
+            dictionary.allTokens.forEach((token) => {
+                const path = token.path.slice(1).map(toCamelCase);
+                let current = properties;
+                for (let i = 0; i < path.length - 1; i++) {
+                    const key = path[i];
+                    if (!(key in current)) {
+                        current[key] = {};
+                    }
+                    current = current[key];
+                }
+                current[path[path.length - 1]] = `var(--${token.name})`;
+            });
+
+            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+        },
+    });
+
+    // Format to generate typescript file that exports CSS colors as an object
+    // Example: export const tokens = { colorNeutralText: '#000', colorPrimary: '#fff' };
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-color-values',
+        format: ({ dictionary, options }) => {
+            const properties = {};
+            dictionary.allTokens.forEach((token) => {
+                const path = token.path.slice(1);
+                const name = toCamelCase(path.join(' '));
+                properties[name] = token.$value;
+            });
+
+            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+        },
+    });
+
+    // Select only tokens for semantic and decorative colors
+    StyleDictionary.registerFilter({
+        name: 'only-colors',
+        filter: (token) => ['Semantic', 'Decorative'].includes(token.path[0]),
+    });
+
+    // Select only tokens for palette colors
+    StyleDictionary.registerFilter({
+        name: 'only-palette',
+        filter: (token) => ['Palette'].includes(token.path[0]),
+    });
+
+    // Select only tokens for theme colors (Decorative and Palette)
+    StyleDictionary.registerFilter({
+        name: 'only-theme',
+        filter: (token) => ['Decorative', 'Palette'].includes(token.path[0]),
+    });
+
+    const sd = await (new StyleDictionary()).extend({
+        source: [`src/design_system/colors/figma_color_tokens.${theme}.json`],
+        platforms: {
+            ts: {
+                transformGroup: 'scss',
+                transforms: ['name/prefix-color-name'],
+                buildPath: 'src/design_system/colors/generated/',
+                files: [
+                    {
+                        destination: `css_variables.${theme}.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-colors',
+                    },
+                    {
+                        destination: `css_variables_palette.${theme}.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-palette',
+                    },
+                    {
+                        destination: `properties_theme.ts`,
+                        format: 'typescript/css-color-properties',
+                        filter: 'only-colors',
+                        options: {
+                            varName: 'colorProperties',
+                        },
+                    },
+                    {
+                        destination: `colors_theme.${theme}.ts`,
+                        format: 'typescript/css-color-values',
+                        filter: 'only-theme',
+                        options: {
+                            varName: `${theme}Theme`,
+                        },
+                    },
+                ],
+            },
+            style: {
+                transformGroup: 'scss',
+                transforms: ['name/prefix-color-name'],
+                buildPath: 'style/colors/',
+                files: [
+                    {
+                        destination: `${theme}.scss`,
+                        format: 'scss/map-flat',
+                        mapName: 'tokens',
+                        filter: 'only-colors',
+                    },
+                    {
+                        destination: `palette.${theme}.scss`,
+                        format: 'scss/map-flat',
+                        mapName: 'tokens',
+                        filter: 'only-palette',
+                    },
+                ],
+            },
+        },
+    });
+    await sd.buildPlatform('ts');
+    await sd.buildPlatform('style');
+}
+
+await Promise.all([
+    buildTheme('light'),
+    buildTheme('dark'),
+]);