@frontify/fondue-components 1.0.0 → 1.1.0

package/src/utilities/tests/styleUtilities.spec.ts

@@ -1,114 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { describe, expect, it } from 'vitest';
-
-import { cn, sv } from '#/utilities/styleUtilities';
-
-describe('class merging utility', () => {
-    it('concatinates strings from list', () => {
-        const className = cn('tw-flex', 'tw-p-8 tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('allows for dynamic inputs', () => {
-        // eslint-disable-next-line no-constant-condition
-        const className = cn('tw-flex', 'tw-p-8 tw-justiify-center', true ? 'tw-items-start' : 'kiwi');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes whitespaces', () => {
-        const className = cn('tw-flex', 'tw-p-8     tw-justiify-center', '    tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('supports arrays', () => {
-        const className = cn('tw-flex', ['tw-p-8', ' tw-justiify-center'], 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes empty strings', () => {
-        const className = cn('tw-flex', 'tw-p-8', ' ', 'tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes null values', () => {
-        const className = cn('tw-flex', 'tw-p-8', null, 'tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes undefined values', () => {
-        const className = cn('tw-flex', 'tw-p-8', undefined, 'tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes false values', () => {
-        const className = cn('tw-flex', 'tw-p-8', false, 'tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes 0 values', () => {
-        const className = cn('tw-flex', 'tw-p-8', 0, 'tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes empty arrays', () => {
-        const className = cn('tw-flex', 'tw-p-8', [], 'tw-justiify-center', 'tw-items-start');
-        expect(className).toBe('tw-flex tw-p-8 tw-justiify-center tw-items-start');
-    });
-
-    it('removes overridden classes', () => {
-        const className = cn('tw-flex', 'tw-p-8', 'tw-justiify-center', 'tw-items-start', 'tw-flex', 'tw-p-2');
-        expect(className).toBe('tw-justiify-center tw-items-start tw-flex tw-p-2');
-    });
-});
-
-describe('tailwind variants utility', () => {
-    const styledDiv = sv({
-        base: 'tw-flex tw-flex-col',
-        variants: {
-            size: {
-                small: 'tw-px-2 tw-h-6',
-                medium: 'tw-px-4 tw-h-9',
-                large: 'tw-px-6 tw-h-12',
-            },
-            emphasis: {
-                default: '',
-                weak: '',
-                strong: '',
-            },
-            alignment: {
-                start: 'tw-items-start',
-                center: 'tw-items-center',
-                end: 'tw-items-end',
-            },
-        },
-        compoundVariants: [
-            {
-                size: 'large',
-                alignment: 'end',
-                class: 'tw-border-2 tw-border-black',
-            },
-        ],
-    });
-
-    it('returns base styles', () => {
-        const className = styledDiv();
-        expect(className).toBe('tw-flex tw-flex-col');
-    });
-
-    it('applies variants', () => {
-        const className = styledDiv({ alignment: 'start', size: 'medium' });
-        expect(className).toBe('tw-flex tw-flex-col tw-px-4 tw-h-9 tw-items-start');
-    });
-
-    it('ignores invalid variants', () => {
-        // @ts-expect-error Wrong value on purpose for the test
-        const className = styledDiv({ alignment: 'weird', size: 'medium' });
-        expect(className).toBe('tw-flex tw-flex-col tw-px-4 tw-h-9');
-    });
-
-    it('applies compound variants', () => {
-        const className = styledDiv({ alignment: 'end', size: 'large' });
-        expect(className).toBe('tw-flex tw-flex-col tw-px-6 tw-h-12 tw-items-end tw-border-2 tw-border-black');
-    });
-});

package/tailwind.config.ts

@@ -1,148 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-// @ts-expect-error Untyped
-import frontifyTailwindConfig from '@frontify/fondue-tokens/tailwind';
-import tailwindForms from '@tailwindcss/forms';
-import { type Config } from 'tailwindcss';
-
-export default {
-    presets: [frontifyTailwindConfig as Config],
-    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './.storybook/DocumentationTemplate.mdx'],
-    plugins: [
-        tailwindForms({
-            strategy: 'class',
-        }),
-    ],
-    theme: {
-        extend: {
-            outline: {
-                violet: '1px solid #825fff',
-            },
-            boxShadow: {
-                large: '0 25px 80px 0 rgba(45, 50, 50, 0.4)',
-                mid: '0 3px 10px 0 rgba(8, 8, 8, 0.15)',
-                'mid-top': '0 -10px 10px -5px rgba(45, 50, 50, 0.1)',
-                'mid-bottom': '0 10px 10px -5px rgba(45, 50, 50, 0.1)',
-                'inner-mighty': 'inset 0 0 0 var(--line-width) var(--line-color-mighty)',
-                none: 'none',
-            },
-            ringColor: {
-                blue: '#5e9ed6',
-            },
-            colors: {
-                transparent: 'transparent',
-                current: 'currentColor',
-                white: '#ffffff',
-                black: {
-                    DEFAULT: '#2d3232',
-
-                    // Solids
-                    superdark: '#1a1d1d',
-                    100: '#2d3232',
-                    95: '#424747',
-                    90: '#575b5b',
-                    85: '#5f6363',
-                    80: '#6c7070',
-                    70: '#818484',
-                    60: '#969898',
-                    50: '#abadad',
-                    40: '#b3b5b5',
-                    30: '#c0c2c2',
-                    20: '#d5d6d6',
-                    10: '#eaebeb',
-                    5: '#f7f7f7',
-                    0: '#fafafa',
-                    warm: '#e6dcdc',
-                },
-                violet: {
-                    // Solids
-                    90: '#443185',
-                    70: '#6449c4',
-                    60: '#825fff',
-                    50: '#9088ff',
-                    40: '#c8d1ed',
-                    20: '#e3e8f6',
-                },
-                green: {
-                    90: '#006452',
-                    75: '#00866E',
-                    70: '#00a084',
-                    60: '#00c8a5',
-                    50: '#80dbb7',
-                    40: '#bee1d4',
-                    20: '#def0e9',
-                },
-
-                yellow: {
-                    90: '#cc9000',
-                    70: '#e6a200',
-                    60: '#ffb400',
-                    50: '#eec779',
-                    40: '#e1d4be',
-                    20: '#f0e9de',
-                },
-
-                red: {
-                    90: '#992136',
-                    70: '#cc2c48',
-                    65: '#E52144',
-                    60: '#ff375a',
-                    50: '#ff8066',
-                    40: '#e1c4be',
-                    20: '#f0e1de',
-                },
-            },
-            fontFamily: {
-                sans: [
-                    '"Space Grotesk Frontify"',
-                    'Arial',
-                    '-apple-system',
-                    'BlinkMacSystemFont',
-                    'Segoe UI',
-                    'Roboto',
-                    'Helvetica',
-                    'sans-serif',
-                    '"Apple Color Emoji"',
-                    '"Segoe UI Emoji"',
-                    '"Segoe UI Symbol"',
-                ],
-                mono: ['Menlo', 'Courier', 'monospace'],
-            },
-            fontSize: {
-                xxs: ['0.75rem', { letterSpacing: '0.02rem', lineHeight: '1rem' }],
-                xs: ['0.813rem', '1rem'],
-                s: ['0.875rem', '1rem'],
-                m: ['1rem', '1.25rem'],
-                l: ['1.125rem', '1.5rem'],
-                xl: ['1.5rem', '2rem'],
-                xxl: ['2rem', '2.5rem'],
-                xxxl: ['3rem', '3.5rem'],
-            },
-            transitionProperty: {
-                height: 'height',
-                width: 'width',
-            },
-            screens: {
-                xs: '480px',
-                sm: '600px',
-                md: '768px',
-                lg: '1024px',
-                xl: '1280px',
-                '2xl': '1536px',
-            },
-            animation: {
-                'loading-bar-infinite': 'loading-bar-infinite 1s infinite linear',
-            },
-            keyframes: {
-                'loading-bar-infinite': {
-                    '0%': { transform: ' translateX(0) scaleX(0)' },
-                    '40%': { transform: 'translateX(0) scaleX(0.4)' },
-                    '100%': { transform: 'translateX(100%) scaleX(0.5)' },
-                },
-            },
-            transformOrigin: {
-                'left-right': '0% 50%',
-            },
-        },
-    },
-} satisfies Config;

package/tsconfig.json

@@ -1,26 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ES2021",
-        "useDefineForClassFields": true,
-        "lib": ["ES2021", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
-        "skipLibCheck": true,
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        "strict": true,
-        "noUncheckedIndexedAccess": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "baseUrl": ".",
-        "paths": {
-            "#/*": ["./src/*"]
-        }
-    },
-    "include": [".storybook", "src"],
-    "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,21 +0,0 @@
-{
-    "compilerOptions": {
-        "composite": true,
-        "module": "ESNext",
-        "moduleResolution": "Node",
-        "allowSyntheticDefaultImports": true,
-        "resolveJsonModule": true,
-        "baseUrl": ".",
-        "lib": ["ESNext"]
-    },
-    "include": [
-        ".eslintrc.cjs",
-        "tailwind.config.ts",
-        "vite.config.ts",
-        "postcss.config.cjs",
-        "package.json",
-        "playwright.config.ts",
-        "playwright",
-        "scripts"
-    ]
-}

package/vite.config.ts

@@ -1,67 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import tsConfigPaths from 'vite-tsconfig-paths';
-import { configDefaults, defineConfig } from 'vitest/config';
-
-import { dependencies as dependenciesMap, peerDependencies as peerDependenciesMap } from './package.json';
-
-const peerDependencies = Object.keys(peerDependenciesMap);
-const dependencies = Object.keys(dependenciesMap);
-
-export const globals = {
-    react: 'React',
-    'react-dom': 'ReactDOM',
-    'react-dom/client': 'ReactDOMClient',
-    'react/jsx-runtime': 'react/jsx-runtime',
-};
-
-export default defineConfig({
-    plugins: [
-        react(),
-        tsConfigPaths(),
-        dts({ insertTypesEntry: true, rollupTypes: true, exclude: ['**/*.stories.tsx'] }),
-    ],
-    build: {
-        lib: {
-            entry: './src/index.ts',
-            name: 'FondueComponents',
-            formats: ['es'],
-        },
-        sourcemap: true,
-        minify: true,
-        rollupOptions: {
-            external: [...dependencies, ...peerDependencies],
-            output: [
-                {
-                    name: 'FondueComponents',
-                    format: 'es',
-                    preserveModules: true,
-                    preserveModulesRoot: 'src',
-                    globals,
-                },
-            ],
-        },
-    },
-    test: {
-        environment: 'happy-dom',
-        setupFiles: ['./src/setupTests.ts'],
-        css: true,
-        exclude: [...configDefaults.exclude, 'scripts/templates/**/*.**'],
-        coverage: {
-            exclude: [
-                ...configDefaults.exclude,
-                '.storybook',
-                'playwright',
-                'scripts/templates',
-                '.eslintrc.cjs',
-                '**.config.{ts,cjs}',
-                '**/**/*.{ct,spec,test,stories}.{ts,tsx}',
-            ],
-            enabled: true,
-            provider: 'v8',
-            reporter: ['text', 'lcov', 'html'],
-        },
-    },
-});