@apify/ui-library 0.71.1-featcolortokens-178953.56 → 0.71.1-featcolortokens-178953.63

package/src/components/to_consolidate/pagination.tsx

@@ -1,136 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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-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-colors',
-        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: {
-            main: {
-                transformGroup: 'scss',
-                transforms: ['name/prefix-color-name'],
-                buildPath: 'src/design_system/colors/generated/',
-                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',
-                    },
-                    {
-                        destination: `${theme}.ts`,
-                        format: 'typescript/css-variables-string',
-                        filter: 'only-colors',
-                    },
-                    {
-                        destination: `palette.${theme}.ts`,
-                        format: 'typescript/css-variables-string',
-                        filter: 'only-palette',
-                    },
-                    {
-                        destination: `properties_theme.ts`,
-                        format: 'typescript/css-properties',
-                        filter: 'only-colors',
-                        options: {
-                            varName: 'colorProperties',
-                        },
-                    },
-                    {
-                        destination: `colors_theme.${theme}.ts`,
-                        format: 'typescript/css-colors',
-                        filter: 'only-theme',
-                        options: {
-                            varName: `${theme}Theme`,
-                        },
-                    },
-                ],
-            },
-        },
-    });
-    await sd.buildPlatform('main');
-}
-
-await Promise.all([
-    buildTheme('light'),
-    buildTheme('dark'),
-]);