@frontify/fondue-components 0.1.0-beta.0

package/tailwind.config.ts

@@ -0,0 +1,148 @@
+/* (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

@@ -0,0 +1,26 @@
+{
+    "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

@@ -0,0 +1,21 @@
+{
+    "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

@@ -0,0 +1,67 @@
+/* (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'],
+        },
+    },
+});