diff --git a/.prettierrc.json b/.prettierrc.json index fd873cbb..579ac795 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -5,5 +5,6 @@ "trailingComma": "all", "printWidth": 80, "arrowParens": "always", - "endOfLine": "lf" + "endOfLine": "lf", + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/package.json b/package.json index 2ddabbba..e64d6817 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "husky": "^9.1.7", "lint-staged": "^17.0.8", "prettier": "^3.7.4", + "prettier-plugin-tailwindcss": "^0.8.0", "turbo": "^2.9.18", "typescript": "5.9.2" }, diff --git a/packages/eslint-config/next.js b/packages/eslint-config/next.js index a49d88fd..0a48d289 100644 --- a/packages/eslint-config/next.js +++ b/packages/eslint-config/next.js @@ -72,6 +72,11 @@ export const nextJsConfig = [ }, }, pluginJsxA11y.flatConfigs.recommended, + { + rules: { + "import/no-relative-parent-imports": "error", + }, + }, { files: [APP_ROUTER_SPECIAL_FILES], rules: { diff --git a/packages/timo-design-system/package.json b/packages/timo-design-system/package.json index 8e5459b1..c9157d8f 100644 --- a/packages/timo-design-system/package.json +++ b/packages/timo-design-system/package.json @@ -22,7 +22,9 @@ "typescript": "5.9.2" }, "dependencies": { + "clsx": "^2.1.1", "react": "^19.2.0", - "react-dom": "^19.2.0" + "react-dom": "^19.2.0", + "tailwind-merge": "^3.6.0" } } diff --git a/packages/timo-design-system/src/lib/cn.ts b/packages/timo-design-system/src/lib/cn.ts new file mode 100644 index 00000000..e167c34a --- /dev/null +++ b/packages/timo-design-system/src/lib/cn.ts @@ -0,0 +1,4 @@ +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); diff --git a/packages/timo-design-system/src/lib/index.ts b/packages/timo-design-system/src/lib/index.ts index cb0ff5c3..c25627d5 100644 --- a/packages/timo-design-system/src/lib/index.ts +++ b/packages/timo-design-system/src/lib/index.ts @@ -1 +1 @@ -export {}; +export { cn } from "./cn"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08c49c44..e416b64e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: prettier: specifier: ^3.7.4 version: 3.7.4 + prettier-plugin-tailwindcss: + specifier: ^0.8.0 + version: 0.8.0(prettier@3.7.4) turbo: specifier: ^2.9.18 version: 2.9.18 @@ -132,12 +135,18 @@ importers: packages/timo-design-system: dependencies: + clsx: + specifier: ^2.1.1 + version: 2.1.1 react: specifier: ^19.2.0 version: 19.2.0 react-dom: specifier: ^19.2.0 version: 19.2.0(react@19.2.0) + tailwind-merge: + specifier: ^3.6.0 + version: 3.6.0 devDependencies: '@repo/eslint-config': specifier: workspace:* @@ -1647,6 +1656,10 @@ packages: client-only@0.0.1: resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -2699,6 +2712,61 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} + prettier-plugin-tailwindcss@0.8.0: + resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==} + engines: {node: '>=20.19'} + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-hermes': '*' + '@prettier/plugin-oxc': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@trivago/prettier-plugin-sort-imports': '*' + '@zackad/prettier-plugin-twig': '*' + prettier: ^3.0 + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-multiline-arrays: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-sort-imports: '*' + prettier-plugin-svelte: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-hermes': + optional: true + '@prettier/plugin-oxc': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + '@zackad/prettier-plugin-twig': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-multiline-arrays: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-sort-imports: + optional: true + prettier-plugin-svelte: + optional: true + prettier@3.7.4: resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==} engines: {node: '>=14'} @@ -2966,6 +3034,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + tailwind-merge@3.6.0: + resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==} + tailwindcss@4.3.1: resolution: {integrity: sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==} @@ -4548,6 +4619,8 @@ snapshots: client-only@0.0.1: {} + clsx@2.1.1: {} + color-convert@2.0.1: dependencies: color-name: 1.1.4 @@ -5660,6 +5733,10 @@ snapshots: prelude-ls@1.2.1: {} + prettier-plugin-tailwindcss@0.8.0(prettier@3.7.4): + dependencies: + prettier: 3.7.4 + prettier@3.7.4: {} progress@2.0.3: {} @@ -6029,6 +6106,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + tailwind-merge@3.6.0: {} + tailwindcss@4.3.1: {} tapable@2.3.3: {}