From e8daf813c29da8c7dfd7c58d0c608bca4095f97d Mon Sep 17 00:00:00 2001 From: Simon Relet Date: Sat, 16 May 2026 11:45:52 +0200 Subject: [PATCH 1/4] chore(tailwind-animation): Remove lib --- apps/admin/Dockerfile | 1 - apps/show/Dockerfile | 1 - apps/website/Dockerfile | 1 - libs/tailwind-animation/.gitignore | 5 -- libs/tailwind-animation/.prettierignore | 2 - libs/tailwind-animation/eslint.config.js | 1 - libs/tailwind-animation/package.json | 48 ------------ libs/tailwind-animation/prettier.config.js | 1 - libs/tailwind-animation/src/index.ts | 1 - .../src/tailwind-animation.ts | 74 ------------------ libs/tailwind-animation/tsconfig.build.json | 6 -- libs/tailwind-animation/tsconfig.json | 14 ---- pnpm-lock.yaml | 75 ++++++++++++------- 13 files changed, 47 insertions(+), 183 deletions(-) delete mode 100644 libs/tailwind-animation/.gitignore delete mode 100644 libs/tailwind-animation/.prettierignore delete mode 100644 libs/tailwind-animation/eslint.config.js delete mode 100644 libs/tailwind-animation/package.json delete mode 100644 libs/tailwind-animation/prettier.config.js delete mode 100644 libs/tailwind-animation/src/index.ts delete mode 100644 libs/tailwind-animation/src/tailwind-animation.ts delete mode 100644 libs/tailwind-animation/tsconfig.build.json delete mode 100644 libs/tailwind-animation/tsconfig.json diff --git a/apps/admin/Dockerfile b/apps/admin/Dockerfile index 3460a502..8adb3409 100644 --- a/apps/admin/Dockerfile +++ b/apps/admin/Dockerfile @@ -47,7 +47,6 @@ COPY libs/password/package.json libs/password/ COPY libs/prisma/package.json libs/prisma/ COPY libs/react-primitives/package.json libs/react-primitives/ COPY libs/search-params-io/package.json libs/search-params-io/ -COPY libs/tailwind-animation/package.json libs/tailwind-animation/ COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/ COPY libs/zod-utils/package.json libs/zod-utils/ COPY scripts/package.json scripts/ diff --git a/apps/show/Dockerfile b/apps/show/Dockerfile index ca95f547..74319b12 100644 --- a/apps/show/Dockerfile +++ b/apps/show/Dockerfile @@ -47,7 +47,6 @@ COPY libs/password/package.json libs/password/ COPY libs/prisma/package.json libs/prisma/ COPY libs/react-primitives/package.json libs/react-primitives/ COPY libs/search-params-io/package.json libs/search-params-io/ -COPY libs/tailwind-animation/package.json libs/tailwind-animation/ COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/ COPY libs/zod-utils/package.json libs/zod-utils/ COPY scripts/package.json scripts/ diff --git a/apps/website/Dockerfile b/apps/website/Dockerfile index bae3f24b..41c18e5e 100644 --- a/apps/website/Dockerfile +++ b/apps/website/Dockerfile @@ -47,7 +47,6 @@ COPY libs/password/package.json libs/password/ COPY libs/prisma/package.json libs/prisma/ COPY libs/react-primitives/package.json libs/react-primitives/ COPY libs/search-params-io/package.json libs/search-params-io/ -COPY libs/tailwind-animation/package.json libs/tailwind-animation/ COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/ COPY libs/zod-utils/package.json libs/zod-utils/ COPY scripts/package.json scripts/ diff --git a/libs/tailwind-animation/.gitignore b/libs/tailwind-animation/.gitignore deleted file mode 100644 index 7652daf0..00000000 --- a/libs/tailwind-animation/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Compiled code by tsc. -/build/ - -# Dependencies installed by pnpm. -/node_modules/ diff --git a/libs/tailwind-animation/.prettierignore b/libs/tailwind-animation/.prettierignore deleted file mode 100644 index 813a96ce..00000000 --- a/libs/tailwind-animation/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -# Compiled code by Vite. -/build/ diff --git a/libs/tailwind-animation/eslint.config.js b/libs/tailwind-animation/eslint.config.js deleted file mode 100644 index c28c06bb..00000000 --- a/libs/tailwind-animation/eslint.config.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "@animeaux/dev-tools/eslint" diff --git a/libs/tailwind-animation/package.json b/libs/tailwind-animation/package.json deleted file mode 100644 index 5d2288e6..00000000 --- a/libs/tailwind-animation/package.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "name": "@animeaux/tailwind-animation", - "version": "1.0.0", - "private": true, - "sideEffects": false, - "type": "module", - "files": [ - "build" - ], - "exports": { - ".": { - "types": "./build/src/index.d.ts", - "default": "./build/src/index.js" - } - }, - "scripts": { - "prebuild": "pnpm clean", - "build": "run-s --print-label build:src build:paths", - "build:paths": "tsc-alias -p ./tsconfig.build.json", - "build:src": "tsc -p ./tsconfig.build.json", - "postbuild": "pnpm sync-workspace", - "clean": "rm -rf ./build", - "dev": "run-p --continue-on-error --print-label dev:*", - "dev:paths": "pnpm build:paths --watch", - "dev:src": "pnpm build:src --watch", - "dev:sync-workspace": "chokidar ./build --debounce --silent -c 'pnpm sync-workspace'", - "lint": "run-p --continue-on-error --print-label lint:*", - "lint:eslint": "eslint --cache --cache-location ./node_modules/.cache/eslint --max-warnings 0 .", - "lint:prettier": "prettier --list-different .", - "lint:tsc": "tsc --noEmit", - "lint-fix": "run-s --print-label lint-fix:eslint lint-fix:prettier", - "lint-fix:eslint": "eslint --cache --cache-location ./node_modules/.cache/eslint --fix .", - "lint-fix:prettier": "prettier --write .", - "sync-workspace": "# See /docs/decisions/002-workspace-package-injection.md" - }, - "dependencies": { - "tailwindcss": "catalog:" - }, - "devDependencies": { - "@animeaux/dev-tools": "workspace:*", - "chokidar-cli": "catalog:", - "eslint": "catalog:", - "npm-run-all": "catalog:", - "prettier": "catalog:", - "tsc-alias": "catalog:", - "typescript": "catalog:" - } -} diff --git a/libs/tailwind-animation/prettier.config.js b/libs/tailwind-animation/prettier.config.js deleted file mode 100644 index 1a6f250b..00000000 --- a/libs/tailwind-animation/prettier.config.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "@animeaux/dev-tools/prettier" diff --git a/libs/tailwind-animation/src/index.ts b/libs/tailwind-animation/src/index.ts deleted file mode 100644 index 3ed652f1..00000000 --- a/libs/tailwind-animation/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "#i/tailwind-animation.js" diff --git a/libs/tailwind-animation/src/tailwind-animation.ts b/libs/tailwind-animation/src/tailwind-animation.ts deleted file mode 100644 index a34104a7..00000000 --- a/libs/tailwind-animation/src/tailwind-animation.ts +++ /dev/null @@ -1,74 +0,0 @@ -import plugin from "tailwindcss/plugin.js" - -export const tailwindAnimation = plugin( - ({ matchUtilities, addUtilities, theme }) => { - // So we can get the opacity using a custom property. - matchUtilities( - { opacity: (value) => ({ "--tw-opacity": value }) }, - { values: theme("opacity") }, - ) - - matchUtilities( - { "animation-opacity": (value) => ({ "--tw-animation-opacity": value }) }, - { values: theme("opacity") }, - ) - - matchUtilities( - { "animation-duration": (value) => ({ animationDuration: value }) }, - { values: theme("transitionDuration") }, - ) - - matchUtilities( - { - "animation-translate-y": (value) => ({ - "--tw-animation-translate-y": value, - }), - }, - { - values: theme("translate"), - supportsNegativeValues: true, - }, - ) - - // Somehow required for our custom keyframes to be found. - addUtilities({ - "@keyframes enter": theme("keyframes.enter"), - "@keyframes exit": theme("keyframes.exit"), - }) - - addUtilities({ - ".animation-enter": { - animationName: "enter", - animationTimingFunction: theme("transitionTimingFunction.out"), - }, - ".animation-exit": { - animationName: "exit", - animationTimingFunction: theme("transitionTimingFunction.in"), - }, - }) - }, - { - theme: { - extend: { - // If an `--tw-animation-*` is not defined, fallback to the current - // value to make sure the animation is a NOP. - keyframes: { - enter: { - from: { - opacity: "var(--tw-animation-opacity, var(--tw-opacity, 1))", - transform: - "translate(var(--tw-translate-x), var(--tw-animation-translate-y, var(--tw-translate-y))) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))", - }, - }, - exit: { - to: { - opacity: "var(--tw-animation-opacity, var(--tw-opacity, 1))", - transform: - "translate(var(--tw-translate-x), var(--tw-animation-translate-y, var(--tw-translate-y))) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))", - }, - }, - }, - }, - }, - }, -) diff --git a/libs/tailwind-animation/tsconfig.build.json b/libs/tailwind-animation/tsconfig.build.json deleted file mode 100644 index 49ad09e1..00000000 --- a/libs/tailwind-animation/tsconfig.build.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./tsconfig.json", - - // Only build files under these folders. - "include": ["./src/**/*"] -} diff --git a/libs/tailwind-animation/tsconfig.json b/libs/tailwind-animation/tsconfig.json deleted file mode 100644 index 2036e51d..00000000 --- a/libs/tailwind-animation/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "@animeaux/dev-tools/tsconfig.lib", - - "include": ["./**/*.ts"], - "exclude": ["./node_modules", "./build"], - - "compilerOptions": { - "rootDir": "./", - "outDir": "./build", - "paths": { "#i/*": ["./src/*"] }, - - "types": ["@animeaux/dev-tools/reset"] - } -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1684371f..0b816ef4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1407,34 +1407,6 @@ importers: specifier: 'catalog:' version: 5.7.3 - libs/tailwind-animation: - dependencies: - tailwindcss: - specifier: 'catalog:' - version: 3.4.3 - devDependencies: - '@animeaux/dev-tools': - specifier: workspace:* - version: file:libs/dev-tools(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(jiti@2.6.1)(tailwindcss@3.4.3)(typescript@5.7.3) - chokidar-cli: - specifier: 'catalog:' - version: 3.0.0 - eslint: - specifier: 'catalog:' - version: 9.39.3(jiti@2.6.1) - npm-run-all: - specifier: 'catalog:' - version: 4.1.5 - prettier: - specifier: 'catalog:' - version: 3.8.2 - tsc-alias: - specifier: 'catalog:' - version: 1.8.16 - typescript: - specifier: 'catalog:' - version: 5.7.3 - libs/tailwindcss-peekaboo: dependencies: tailwindcss: @@ -3530,95 +3502,111 @@ packages: '@react-email/body@0.0.10': resolution: {integrity: sha512-dMJyL9aU25ieatdPtVjCyQ/WHZYHwNc+Hy/XpF8Cc18gu21cUynVEeYQzFSeigDRMeBQ3PGAyjVDPIob7YlGwA==} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/button@0.0.18': resolution: {integrity: sha512-uNUnpeDzz1o9HAky47JSTsUN/Ih0A3Az165AAOgAy8XOVzQJPrltUBRzHkScSVJTwRqKLASkie1yZbtNGIcRdA==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/code-block@0.0.10': resolution: {integrity: sha512-xx4m5Ir1cSFbz1bhyZfETUW34iQg+WRLTItW7Qv2arnFr6Ec0u8AWi4lUUqkpmbXzeuY8U8lV+2awDerwRpW6g==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/code-inline@0.0.4': resolution: {integrity: sha512-zj3oMQiiUCZbddSNt3k0zNfIBFK0ZNDIzzDyBaJKy6ZASTtWfB+1WFX0cpTX8q0gUiYK+A94rk5Qp68L6YXjXQ==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/column@0.0.12': resolution: {integrity: sha512-Rsl7iSdDaeHZO938xb+0wR5ud0Z3MVfdtPbNKJNojZi2hApwLAQXmDrnn/AcPDM5Lpl331ZljJS8vHTWxxkvKw==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/components@0.0.28': resolution: {integrity: sha512-90ayLWy1g2uqlZVcwonfq1oKUlAnQBUJ4iUnGXg0UuBPAeoqxSG1BFrVDmLSX0u5MG/wtmFPFPxhq+v8roq+sA==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/container@0.0.14': resolution: {integrity: sha512-NgoaJJd9tTtsrveL86Ocr/AYLkGyN3prdXKd/zm5fQpfDhy/NXezyT3iF6VlwAOEUIu64ErHpAJd+P6ygR+vjg==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/font@0.0.8': resolution: {integrity: sha512-fSBEqYyVPAyyACBBHcs3wEYzNknpHMuwcSAAKE8fOoDfGqURr/vSxKPdh4tOa9z7G4hlcEfgGrCYEa2iPT22cw==} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/head@0.0.11': resolution: {integrity: sha512-skw5FUgyamIMK+LN+fZQ5WIKQYf0dPiRAvsUAUR2eYoZp9oRsfkIpFHr0GWPkKAYjFEj+uJjaxQ/0VzQH7svVg==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/heading@0.0.14': resolution: {integrity: sha512-jZM7IVuZOXa0G110ES8OkxajPTypIKlzlO1K1RIe1auk76ukQRiCg1IRV4HZlWk1GGUbec5hNxsvZa2kU8cb9w==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/hr@0.0.10': resolution: {integrity: sha512-3AA4Yjgl3zEid/KVx6uf6TuLJHVZvUc2cG9Wm9ZpWeAX4ODA+8g9HyuC0tfnjbRsVMhMcCGiECuWWXINi+60vA==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/html@0.0.10': resolution: {integrity: sha512-06uiuSKJBWQJfhCKv4MPupELei4Lepyz9Sth7Yq7Fq29CAeB1ejLgKkGqn1I+FZ72hQxPLdYF4iq4yloKv3JCg==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/img@0.0.10': resolution: {integrity: sha512-pJ8glJjDNaJ53qoM95pvX9SK05yh0bNQY/oyBKmxlBDdUII6ixuMc3SCwYXPMl+tgkQUyDgwEBpSTrLAnjL3hA==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/link@0.0.11': resolution: {integrity: sha512-o1/BgPn2Fi+bN4Nh+P64t4tulaOyPhkBNSpNmiYL1Ar+ilw8q0BmUAqM+lvHy8Qr/4K7BjkgFoc4GoYkoEjOig==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/markdown@0.0.12': resolution: {integrity: sha512-wsuvj1XAb6O63aizCLNEeqVgKR3oFjAwt9vjfg2y2oh4G1dZeo8zonZM2x1fmkEkBZhzwSHraNi70jSXhA3A9w==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/preview@0.0.11': resolution: {integrity: sha512-7O/CT4b16YlSGrj18htTPx3Vbhu2suCGv/cSe5c+fuSrIM/nMiBSZ3Js16Vj0XJbAmmmlVmYFZw9L20wXJ+LjQ==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc @@ -3639,24 +3627,28 @@ packages: '@react-email/row@0.0.11': resolution: {integrity: sha512-ra09h7BMoGa14ds3vh7KVuj1N3astTstEC1YbMdCiHcx/nxylglNaT7qJXU74ZTzyHiGabyiNuyabTS+HLoMCA==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/section@0.0.15': resolution: {integrity: sha512-xfM3Qy5eU7fbkwvktlTeQgad7uo+1Z7YVh1aowSZaRBvKbkEXgoH/XssRYQmQL8ZrZGXbEJMujwtf4fsQL6vrg==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/tailwind@1.0.2': resolution: {integrity: sha512-P106AouxGQCCvapE5/HJT5rmNma+UJwG3A0MF6+4me7Usf+VNyJ5Jk0eSdsZ1zEfY3AbUSs+F7ql3oWztCg9nw==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc '@react-email/text@0.0.10': resolution: {integrity: sha512-wNAnxeEAiFs6N+SxS0y6wTJWfewEzUETuyS2aZmT00xk50VijwyFRuhm4sYSjusMyshevomFwz5jNISCxRsGWw==} engines: {node: '>=18.0.0'} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. peerDependencies: react: ^18.0 || ^19.0 || ^19.0.0-rc @@ -3781,46 +3773,55 @@ packages: resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.18.0': resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.18.0': resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.18.0': resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-powerpc64le-gnu@4.18.0': resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.18.0': resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-s390x-gnu@4.18.0': resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.18.0': resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.18.0': resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-win32-arm64-msvc@4.18.0': resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==} @@ -4047,24 +4048,28 @@ packages: engines: {node: '>= 20'} cpu: [arm64] os: [linux] + libc: [glibc] '@tailwindcss/oxide-linux-arm64-musl@4.2.4': resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==} engines: {node: '>= 20'} cpu: [arm64] os: [linux] + libc: [musl] '@tailwindcss/oxide-linux-x64-gnu@4.2.4': resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==} engines: {node: '>= 20'} cpu: [x64] os: [linux] + libc: [glibc] '@tailwindcss/oxide-linux-x64-musl@4.2.4': resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==} engines: {node: '>= 20'} cpu: [x64] os: [linux] + libc: [musl] '@tailwindcss/oxide-wasm32-wasi@4.2.4': resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==} @@ -4411,6 +4416,7 @@ packages: '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} + deprecated: Potential CWE-502 - Update to 1.3.1 or higher '@unpic/pixels@1.3.0': resolution: {integrity: sha512-Xe3J4KU9m2NWCDZ9iwIIRYFe7VwkWEqGCy4yoKMEkjoxpcQ7TPxD+QmdTphv3yiTmrDMMIWYEEH+j4mT6dILTA==} @@ -4457,41 +4463,49 @@ packages: resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==} cpu: [arm64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-arm64-musl@1.11.1': resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==} cpu: [arm64] os: [linux] + libc: [musl] '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1': resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==} cpu: [ppc64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1': resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==} cpu: [riscv64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-riscv64-musl@1.11.1': resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==} cpu: [riscv64] os: [linux] + libc: [musl] '@unrs/resolver-binding-linux-s390x-gnu@1.11.1': resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==} cpu: [s390x] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-x64-gnu@1.11.1': resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==} cpu: [x64] os: [linux] + libc: [glibc] '@unrs/resolver-binding-linux-x64-musl@1.11.1': resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==} cpu: [x64] os: [linux] + libc: [musl] '@unrs/resolver-binding-wasm32-wasi@1.11.1': resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==} @@ -6832,24 +6846,28 @@ packages: engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [glibc] lightningcss-linux-arm64-musl@1.32.0: resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} engines: {node: '>= 12.0.0'} cpu: [arm64] os: [linux] + libc: [musl] lightningcss-linux-x64-gnu@1.32.0: resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [glibc] lightningcss-linux-x64-musl@1.32.0: resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} engines: {node: '>= 12.0.0'} cpu: [x64] os: [linux] + libc: [musl] lightningcss-win32-arm64-msvc@1.32.0: resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} @@ -9380,6 +9398,7 @@ packages: uuid@9.0.1: resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==} + deprecated: uuid@10 and below is no longer supported. For ESM codebases, update to uuid@latest. For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028). hasBin: true uvu@0.5.6: From e35e9e66ee6c29704dbbead3c463346f6550a6b9 Mon Sep 17 00:00:00 2001 From: Simon Relet Date: Sun, 17 May 2026 00:11:12 +0200 Subject: [PATCH 2/4] chore(website): Upgrade to Tailwind 4 --- .vscode/settings.json | 2 +- apps/website/eslint.config.js | 6 +- apps/website/package.json | 9 +- apps/website/postcss.config.js | 7 - apps/website/prettier.config.js | 6 +- apps/website/scripts/generate-theme.ts | 125 ++++++- apps/website/src/animals/item.tsx | 21 +- apps/website/src/blog/item.tsx | 4 +- apps/website/src/core/actions.ts | 10 +- .../src/core/controllers/paginator.tsx | 4 +- .../src/core/controllers/searchForm.tsx | 6 +- apps/website/src/core/controllers/tabs.tsx | 6 +- apps/website/src/core/data-display/image.tsx | 28 +- .../src/core/data-display/markdown.tsx | 6 +- .../website/src/core/data-display/options.tsx | 12 +- .../src/core/data-display/timeline.tsx | 12 +- .../src/core/layout/bubble-section.tsx | 12 +- apps/website/src/core/layout/footer.tsx | 12 +- apps/website/src/core/layout/hero-section.tsx | 4 +- .../src/core/layout/navigation/large-nav.tsx | 18 +- .../src/core/layout/navigation/shared.tsx | 40 +- .../core/layout/navigation/show-banner.tsx | 4 +- .../src/core/layout/navigation/small-nav.tsx | 25 +- .../core/layout/navigation/social-links.tsx | 10 +- .../src/core/layout/related-section.tsx | 4 +- apps/website/src/donation/section.tsx | 4 +- apps/website/src/events/item.tsx | 14 +- apps/website/src/root.tsx | 14 +- apps/website/src/routes/[manifest.json].tsx | 6 +- apps/website/src/routes/_index.tsx | 18 +- .../src/routes/abandonner-votre-animal.tsx | 2 +- apps/website/src/routes/adoption.$.tsx | 4 +- apps/website/src/routes/animal.$slug.tsx | 40 +- .../website/src/routes/articles-de-presse.tsx | 10 +- apps/website/src/routes/blog.$slug.tsx | 2 +- apps/website/src/routes/blog._index.tsx | 4 +- .../src/routes/conditions-d-adoption.tsx | 8 +- .../routes/conventions-de-sterilisation.tsx | 14 +- apps/website/src/routes/devenir-benevole.tsx | 10 +- .../src/routes/devenir-famille-d-accueil.tsx | 4 +- apps/website/src/routes/evenements._index.tsx | 4 +- apps/website/src/routes/evenements.passes.tsx | 4 +- apps/website/src/routes/faire-un-don.tsx | 14 +- apps/website/src/routes/faq.tsx | 14 +- .../informer-d-un-acte-de-maltraitance.tsx | 2 +- apps/website/src/routes/mentions-legales.tsx | 2 +- .../src/routes/nommez-votre-animal.tsx | 28 +- apps/website/src/routes/partenaires.tsx | 8 +- .../src/routes/resources.subscribe/input.tsx | 18 +- apps/website/src/routes/sauves.tsx | 4 +- .../src/routes/signaler-un-animal-errant.tsx | 2 +- apps/website/src/styles/animation.css | 6 + apps/website/src/styles/border-radius.css | 16 + apps/website/src/styles/custom-scrollbar.css | 9 + apps/website/src/styles/global.css | 56 +++ apps/website/src/styles/grid.css | 7 + apps/website/src/styles/icon-size.css | 17 + apps/website/src/styles/main.css | 11 + apps/website/src/styles/safe-area.css | 63 ++++ apps/website/src/styles/text-style.css | 95 +++++ apps/website/src/styles/theme.css | 120 ++++++ apps/website/src/tailwind.css | 17 - apps/website/src/warn/item.tsx | 2 +- apps/website/tailwind.config.ts | 353 ------------------ apps/website/vite.config.ts | 3 + pnpm-lock.yaml | 265 +------------ pnpm-workspace.yaml | 1 - 67 files changed, 790 insertions(+), 898 deletions(-) delete mode 100644 apps/website/postcss.config.js create mode 100644 apps/website/src/styles/animation.css create mode 100644 apps/website/src/styles/border-radius.css create mode 100644 apps/website/src/styles/custom-scrollbar.css create mode 100644 apps/website/src/styles/global.css create mode 100644 apps/website/src/styles/grid.css create mode 100644 apps/website/src/styles/icon-size.css create mode 100644 apps/website/src/styles/main.css create mode 100644 apps/website/src/styles/safe-area.css create mode 100644 apps/website/src/styles/text-style.css create mode 100644 apps/website/src/styles/theme.css delete mode 100644 apps/website/src/tailwind.css delete mode 100644 apps/website/tailwind.config.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index 629745e6..5a605532 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -20,7 +20,7 @@ "tailwindCSS.classFunctions": ["cn"], "tailwindCSS.experimental.configFile": { "apps/admin/src/styles/main.css": "apps/admin/**", - "apps/website/tailwind.config.ts": "apps/website/**", + "apps/website/src/styles/main.css": "apps/website/**", "apps/show/src/styles/main.css": "apps/show/**", "libs/tailwindcss-peekaboo/storybook/styles.css": "libs/tailwindcss-peekaboo/**" }, diff --git a/apps/website/eslint.config.js b/apps/website/eslint.config.js index c28c06bb..b6765fe1 100644 --- a/apps/website/eslint.config.js +++ b/apps/website/eslint.config.js @@ -1 +1,5 @@ -export { default } from "@animeaux/dev-tools/eslint" +import { createConfig } from "@animeaux/dev-tools/eslint" + +export default createConfig({ + tailwindStylesheet: "./src/styles/main.css", +}) diff --git a/apps/website/package.json b/apps/website/package.json index a1212811..36cd3d9f 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -39,10 +39,10 @@ "@remix-run/react": "catalog:", "@remix-run/serve": "catalog:", "body-scroll-lock": "catalog:", + "es-toolkit": "catalog:", "focus-trap": "catalog:", "history": "catalog:", "isbot": "catalog:", - "es-toolkit": "catalog:", "luxon": "catalog:", "react": "catalog:", "react-dom": "catalog:", @@ -57,7 +57,10 @@ "devDependencies": { "@animeaux/dev-tools": "workspace:*", "@remix-run/dev": "catalog:", + "@tailwindcss/node": "catalog:tailwindcss4", + "@tailwindcss/vite": "catalog:tailwindcss4", "@types/body-scroll-lock": "catalog:", + "@types/culori": "catalog:", "@types/luxon": "catalog:", "@types/node": "catalog:", "@types/react": "catalog:", @@ -65,14 +68,14 @@ "@types/react-transition-group": "catalog:", "autoprefixer": "catalog:", "chokidar": "catalog:", + "culori": "catalog:", "dotenv-flow": "catalog:", "eslint": "catalog:", "msw": "catalog:", "node-html-parser": "catalog:", "npm-run-all": "catalog:", "prettier": "catalog:", - "prettier-plugin-tailwindcss": "catalog:", - "tailwindcss": "catalog:", + "tailwindcss": "catalog:tailwindcss4", "tsx": "catalog:", "typescript": "catalog:", "vite": "catalog:", diff --git a/apps/website/postcss.config.js b/apps/website/postcss.config.js deleted file mode 100644 index d9bc7d09..00000000 --- a/apps/website/postcss.config.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - plugins: { - "tailwindcss/nesting": {}, - tailwindcss: {}, - autoprefixer: {}, - }, -} diff --git a/apps/website/prettier.config.js b/apps/website/prettier.config.js index 9bcbf4e4..1a6f250b 100644 --- a/apps/website/prettier.config.js +++ b/apps/website/prettier.config.js @@ -1,5 +1 @@ -import { createConfig } from "@animeaux/dev-tools/prettier" - -export default createConfig({ - tailwindConfig: "./tailwind.config.ts", -}) +export { default } from "@animeaux/dev-tools/prettier" diff --git a/apps/website/scripts/generate-theme.ts b/apps/website/scripts/generate-theme.ts index 1bac73e0..ced211a4 100644 --- a/apps/website/scripts/generate-theme.ts +++ b/apps/website/scripts/generate-theme.ts @@ -1,28 +1,42 @@ -import { mkdir, writeFile } from "node:fs/promises" +import { mkdir, readFile, writeFile } from "node:fs/promises" import { dirname, resolve } from "node:path" import { fileURLToPath } from "node:url" -import { colors, screens } from "../tailwind.config.js" +import { __unstable__loadDesignSystem as loadDesignSystem } from "@tailwindcss/node" +import { formatHex } from "culori" +import { orderBy } from "es-toolkit" +import type { __unstable__loadDesignSystem as loadDesignSystemBase } from "tailwindcss" +import invariant from "tiny-invariant" + import { relativeToCwd, safelyReadFile } from "./shared.js" const FILENAME = fileURLToPath(import.meta.url) const DIRNAME = dirname(FILENAME) const SCRIPT_NAME = relativeToCwd(FILENAME) +const STYLES_DIRECTORY = resolve(DIRNAME, "../src/styles") +const MAIN_STYLE_FILE = resolve(STYLES_DIRECTORY, "main.css") const DEST_DIRECTORY = resolve(DIRNAME, "../src/generated") const DEST_FILE = resolve(DEST_DIRECTORY, "theme.ts") console.log("Building...") +const mainCss = await readFile(MAIN_STYLE_FILE, "utf-8") + +// The type cast is required because @tailwindcss/node's `loadDesignSystem` +// types are broken (`design.theme: any`). We use tailwindcss's +// `loadDesignSystem` types because it's used internally and its types are fine. +const design = (await loadDesignSystem(mainCss, { + base: STYLES_DIRECTORY, +})) as Awaited> + // Ensure the destination directory exists. await mkdir(DEST_DIRECTORY, { recursive: true }) -// Add here values we need in code. -// Only add what is actualy needed to keep a minimal size. -const theme = { screens, colors } - const content = `// This file is generated by ${SCRIPT_NAME} -export type ScreenSize = keyof typeof theme.screens -export const theme = ${JSON.stringify(theme, null, 2)}` +${getBreakpoints()} + +${getColors()} +` const currentContent = await safelyReadFile(DEST_FILE) if (currentContent === content) { @@ -35,3 +49,98 @@ if (currentContent === content) { await writeFile(DEST_FILE, content) console.info(`Built theme (${relativeToCwd(DEST_FILE)})`) + +function getBreakpoints() { + const breakpoints = design.theme.namespace("--breakpoint") + + const sortedEntries = orderBy( + Array.from(breakpoints.entries()) + // `null` is used as key for a property with the namespace's name (e.g. + // `--breakpoint: `). + // For breakpoints this shouldn't happen. + .filter((entry): entry is [string, string] => entry[0] != null) + .map( + ([breakpoint, length]) => + [breakpoint, getLengthValuePx(length)] as const, + ), + [([_breakpoint, valuePx]) => valuePx], + ["desc"], + ) + + return `export type Breakpoint = typeof Breakpoint.names[number] + +export namespace Breakpoint { + /** Breakpoint names sorted by descending value. */ + export const names = ${JSON.stringify( + sortedEntries.map(([breakpoint]) => breakpoint), + )} as const + + /** Breakpoint values in pixels. */ + export const value = ${JSON.stringify(Object.fromEntries(sortedEntries), null, 2)} as const +}` +} + +function getColors() { + const colors = design.theme.namespace("--color") + + const brandBlue = colors.get("brand-blue-800") + const gray50 = colors.get("gray-50") + + return `export namespace Color { + export const brandBlue = ${JSON.stringify(brandBlue)} + export const brandBlueHex = ${JSON.stringify(formatHex(brandBlue))} + export const gray50 = ${JSON.stringify(gray50)} + export const gray50Hex = ${JSON.stringify(formatHex(gray50))} + + export const background = Color.gray50 + export const backgroundHex = Color.gray50Hex + export const primary = Color.brandBlue + export const primaryHex = Color.brandBlueHex +}` +} + +/** + * Returns the given CSS length in pixels. + * + * @param length expressed with the `` CSS type. + * @returns The value in pixels + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length + */ +function getLengthValuePx(length: string) { + length = length.trim() + + /** + * Matches values for the `` CSS type. + * We only support unitless `0`, rem and px. + * + * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length + */ + const CSS_LENGTH_REGEXP = /(?-?\d*\.?\d+)(?.*)/ + + const match = length.match(CSS_LENGTH_REGEXP) + + invariant( + match?.groups?.value != null, + `Invalid CSS length from theme: "${length}"`, + ) + + const value = Number(match.groups.value) + + // The unit is optional when the value is `0`. + // See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#syntax + const unit = match.groups.unit || "px" + + switch (unit) { + case "px": { + return value + } + + case "rem": { + return 16 * value + } + + default: { + throw new Error(`Unsupported length unit: "${unit}" in "${length}"`) + } + } +} diff --git a/apps/website/src/animals/item.tsx b/apps/website/src/animals/item.tsx index 2d446893..f2c679d7 100644 --- a/apps/website/src/animals/item.tsx +++ b/apps/website/src/animals/item.tsx @@ -55,9 +55,9 @@ export function AnimalItem({

@@ -65,21 +65,18 @@ export function AnimalItem({ {animal.name}

-

+

{speciesLabels} {formatAge(animal.birthdate)}

diff --git a/apps/website/src/blog/item.tsx b/apps/website/src/blog/item.tsx index e3b1c696..584c84c4 100644 --- a/apps/website/src/blog/item.tsx +++ b/apps/website/src/blog/item.tsx @@ -30,14 +30,14 @@ export function ArticleItem({ />
-

+

{DateTime.fromISO(article.publicationDate).toLocaleString( DateTime.DATE_MED, )}{" "} par {article.authorName}

-

+

{article.title}

{article.description}

diff --git a/apps/website/src/core/actions.ts b/apps/website/src/core/actions.ts index 30471797..8ef7a7b0 100644 --- a/apps/website/src/core/actions.ts +++ b/apps/website/src/core/actions.ts @@ -3,17 +3,17 @@ import { cn } from "@animeaux/core" type ActionColor = "blue" | "yellow" | "gray" const STANDALONE_ACTION_COLOR_CLASS_NAME: Record = { - blue: "bg-brandBlue text-white hover:bg-brandBlue-lighter", - yellow: "bg-brandYellow text-black hover:bg-brandYellow-darker", - gray: "bg-gray-100 hover:bg-gray-200", + blue: cn("bg-brand-blue text-white hover:bg-brand-blue-lighter"), + yellow: cn("bg-brand-yellow text-black hover:bg-brand-yellow-darker"), + gray: cn("bg-gray-100 hover:bg-gray-200"), } export const actionClassNames = { standalone: ({ color = "blue" }: { color?: ActionColor } = {}) => cn( - "flex min-w-max flex-none items-center justify-center px-6 py-2 transition-[background-color,transform] duration-100 ease-in-out rounded-bubble-sm text-body-emphasis active:scale-95", + "flex min-w-max flex-none items-center justify-center rounded-bubble-sm px-6 py-2 text-body-emphasis transition-[background-color,scale] active:scale-95", STANDALONE_ACTION_COLOR_CLASS_NAME[color], ), proseInline: () => - "border-b text-body-emphasis border-b-brandBlue hover:border-b-2", + cn("border-b border-b-brand-blue text-body-emphasis hover:border-b-2"), } diff --git a/apps/website/src/core/controllers/paginator.tsx b/apps/website/src/core/controllers/paginator.tsx index f4929719..e34f1846 100644 --- a/apps/website/src/core/controllers/paginator.tsx +++ b/apps/website/src/core/controllers/paginator.tsx @@ -77,9 +77,9 @@ function PaginatorItem({ { "w-[40px] rounded-bubble-sm": !isEllipsis, }, - "flex items-center justify-center transition-colors duration-100 ease-in-out text-body-emphasis", + "flex items-center justify-center text-body-emphasis transition-colors", { - "bg-brandBlue text-white": isActive, + "bg-brand-blue text-white": isActive, "hover:bg-gray-200": !isActive && to != null, }, )} diff --git a/apps/website/src/core/controllers/searchForm.tsx b/apps/website/src/core/controllers/searchForm.tsx index 24f9d951..37fcb504 100644 --- a/apps/website/src/core/controllers/searchForm.tsx +++ b/apps/website/src/core/controllers/searchForm.tsx @@ -89,7 +89,7 @@ export function SearchForm({
@@ -135,7 +135,7 @@ export function SearchForm({ @@ -161,7 +161,7 @@ function Select({ onChange(event.target.value as ValueType) }} className={cn( - "min-w-0 flex-1 cursor-pointer appearance-none bg-transparent px-6 py-2 transition-colors duration-100 ease-in-out rounded-bubble-sm hover:bg-gray-50", + "min-w-0 flex-1 cursor-pointer appearance-none rounded-bubble-sm bg-transparent px-6 py-2 transition-colors hover:bg-gray-50", { "text-gray-500": value == null }, )} > diff --git a/apps/website/src/core/controllers/tabs.tsx b/apps/website/src/core/controllers/tabs.tsx index 238d59a2..a33904a7 100644 --- a/apps/website/src/core/controllers/tabs.tsx +++ b/apps/website/src/core/controllers/tabs.tsx @@ -21,9 +21,9 @@ export function Tab({ type="button" onClick={onSelect} className={cn( - "relative flex px-3 py-2 transition-colors duration-150 ease-in-out text-body-emphasis", + "relative flex px-3 py-2 text-body-emphasis transition-colors duration-slow", { - "text-brandBlue": isActive, + "text-brand-blue": isActive, "text-gray-600 hover:text-black": !isActive, }, )} @@ -34,7 +34,7 @@ export function Tab({ {(transitionState) => ( ({ name, width: Number(width.replace("px", "")) }), - ), - [({ width }) => width], - ["desc"], -) - .map(({ name }) => name) - .concat("default") +const BREAKPOINT_NAMES = [...Breakpoint.names, "default"] as const export type StaticImageProps = { image: ImageDescriptor - sizes: Partial> & { + sizes: Partial> & { // `default` is mandatory. default: string } @@ -47,14 +37,14 @@ export function StaticImage({ }: StaticImageProps) { invariant(fallbackSize != null, "At least one size should be provided.") - const sizes = SCREEN_SIZES.reduce((sizes, screen) => { - const width = sizesProp[screen] + const sizes = BREAKPOINT_NAMES.reduce((sizes, breakpoint) => { + const width = sizesProp[breakpoint] if (width != null) { sizes.push( - screen === "default" + breakpoint === "default" ? width - : `(min-width: ${theme.screens[screen]}) ${width}`, + : `(min-width: ${Breakpoint.value[breakpoint]}px) ${width}`, ) } @@ -78,8 +68,8 @@ export function StaticImage({ type ImageBackground = "none" | "gray" const IMAGE_BACKGROUND_CLASS_NAME: Record = { - gray: "bg-gray-100", - none: "", + gray: cn("bg-gray-100"), + none: cn(), } export function DynamicImage({ diff --git a/apps/website/src/core/data-display/markdown.tsx b/apps/website/src/core/data-display/markdown.tsx index f72aac42..372f7f22 100644 --- a/apps/website/src/core/data-display/markdown.tsx +++ b/apps/website/src/core/data-display/markdown.tsx @@ -91,7 +91,7 @@ export const ARTICLE_COMPONENTS: MarkdownProps["components"] = {
- +
{children}
), @@ -107,8 +107,8 @@ export const ARTICLE_COMPONENTS: MarkdownProps["components"] = { h2: ({ children }) => (

{children} diff --git a/apps/website/src/core/data-display/options.tsx b/apps/website/src/core/data-display/options.tsx index 0dbd675c..3050c9e0 100644 --- a/apps/website/src/core/data-display/options.tsx +++ b/apps/website/src/core/data-display/options.tsx @@ -9,7 +9,7 @@ export function OptionList({ children }: { children: React.ReactNode }) { // Ensure the list takes the entire viewport width for better overflow // indicators. "-mx-page w-screen min-w-0", - "flex snap-x snap-mandatory items-start gap-3 overflow-x-auto scroll-smooth scrollbars-none", + "scrollbars-none flex snap-x snap-mandatory items-start gap-3 overflow-x-auto scroll-smooth", // Because of `overflow-x-auto`, we need to ensure card shadows are // visible. "-my-6 py-6", @@ -37,7 +37,7 @@ export function OptionCard({ children }: { children: React.ReactNode }) { "md:m-0 md:w-auto md:max-w-sm md:flex-1 md:p-0", )} > -
+
{children}
@@ -45,7 +45,7 @@ export function OptionCard({ children }: { children: React.ReactNode }) { } export function OptionTitle({ children }: { children: React.ReactNode }) { - return

{children}

+ return

{children}

} export function OptionDescription({ children }: { children: React.ReactNode }) { @@ -63,8 +63,8 @@ export function OptionPrice({

{children} @@ -91,7 +91,7 @@ export function OptionFeature({ diff --git a/apps/website/src/core/data-display/timeline.tsx b/apps/website/src/core/data-display/timeline.tsx index dec3d393..0bccca51 100644 --- a/apps/website/src/core/data-display/timeline.tsx +++ b/apps/website/src/core/data-display/timeline.tsx @@ -34,15 +34,15 @@ export function TimelineItem({

-

{title}

+

{title}

{children}

diff --git a/apps/website/src/core/layout/bubble-section.tsx b/apps/website/src/core/layout/bubble-section.tsx index 26ca084f..25780b13 100644 --- a/apps/website/src/core/layout/bubble-section.tsx +++ b/apps/website/src/core/layout/bubble-section.tsx @@ -1,13 +1,13 @@ import { cn } from "@animeaux/core" export const bubbleSectionClassNames = { - root: () => "relative flex", + root: () => cn("relative flex"), // Wrap the shape because it looks like SVG can only be sized with width and // height. But we don't want the width class to be a complexe arbitrary value - // with hard coded size in px: `w-[calc(100%_-_16px)]`. + // with hard coded size in px: `w-[calc(100%-16px)]`. bubbleContainer: () => - cn("absolute bottom-0 left-2 right-2 top-0 -z-10", "md:left-4 md:right-4"), - content: () => "w-full", + cn("absolute inset-x-2 inset-y-0 -z-10", "md:inset-x-4"), + content: () => cn("w-full"), } export function BubbleShape({ @@ -24,8 +24,8 @@ export function BubbleShape({ // Allow the shape to stretch. preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" - className={cn("h-full w-full overflow-visible", { - "stroke-brandYellow": isDouble, + className={cn("size-full overflow-visible", { + "stroke-brand-yellow": isDouble, "stroke-gray-300": !isDouble, })} style={style} diff --git a/apps/website/src/core/layout/footer.tsx b/apps/website/src/core/layout/footer.tsx index d39ba8c0..46966785 100644 --- a/apps/website/src/core/layout/footer.tsx +++ b/apps/website/src/core/layout/footer.tsx @@ -12,7 +12,7 @@ export function Footer() { return (