chore(monorepo): 🤖 make linting, formatting centralized by punkbit · Pull Request #955 · ClickHouse/click-ui

punkbit · 2026-03-27T12:34:22Z

Why?

A single root-level config ensures all packages use identical formatting rules from one source of truth making maintenance simpler (one file to update), avoiding style drift between packages formatting and linting rules.

How?

Create root-level config for eslint and prettier
Point eslint and prettier commands to use root configuration files

Tickets?

N/A

Contribution checklist?

You've done enough research before writing
You have reviewed the PR
The commit messages are detailed
The build command runs locally
Assets or static content are linked and stored in the project
For documentation, guides or references, you've tested the commands

Security checklist?

All user inputs are validated and sanitized
No usage of dangerouslySetInnerHTML
Sensitive data has been identified and is being protected properly
Build output contains no secrets or API keys

Preview?

❯ yarn format
[@clickhouse/click-ui]: Process started
[@clickhouse/click-ui]: Checking formatting...
[@clickhouse/click-ui]: All matched files use Prettier code style!
[@clickhouse/click-ui]: Process exited (exit code 0), completed in 2s 67ms

[@clickhouse/design-tokens]: Process started
[@clickhouse/design-tokens]: Checking formatting...
[@clickhouse/design-tokens]: All matched files use Prettier code style!
[@clickhouse/design-tokens]: Process exited (exit code 0), completed in 0s 283ms
Done in 2s 352ms

On branch chore/monorepo-make-linting-formatting-centralized
nothing to commit, working tree clean

click-ui on 🌱 chore/monorepo-make-linting-form [📦] via  v23.9.0 on   (
❯ git push origin chore/monorepo-make-linting-formatting-centralized
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 12 threads
Compressing objects: 100% (20/20), done.
Writing objects: 100% (21/21), 4.74 KiB | 2.37 MiB/s, done.
Total 21 (delta 14), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (14/14), completed with 14 local objects.
remote:
remote: Create a pull request for 'chore/monorepo-make-linting-formatting-
remote:      https://github.com/ClickHouse/click-ui/pull/new/chore/monorep
remote:
remote: GitHub found 22 vulnerabilities on ClickHouse/click-ui's default b
remote:      https://github.com/ClickHouse/click-ui/security/dependabot
remote:
To github.com:ClickHouse/click-ui.git
 * [new branch]        chore/monorepo-make-linting-formatting-centralized

click-ui on 🌱 chore/monorepo-make-linting-form [📦] via  v23.9.0 on   (
❯ yarn format
[@clickhouse/click-ui]: Process started
[@clickhouse/click-ui]: Checking formatting...
[@clickhouse/click-ui]: All matched files use Prettier code style!
[@clickhouse/click-ui]: Process exited (exit code 0), completed in 2s 67ms

[@clickhouse/design-tokens]: Process started
[@clickhouse/design-tokens]: Checking formatting...
[@clickhouse/design-tokens]: All matched files use Prettier code style!
[@clickhouse/design-tokens]: Process exited (exit code 0), completed in 0s
Done in 2s 352ms

click-ui on 🌱 chore/monorepo-make-linting-form [📦] via  v23.9.0 on   (
❯ yarn lint
[@clickhouse/click-ui]: Process started
[@clickhouse/click-ui]:
...
[@clickhouse/click-ui]:
[@clickhouse/click-ui]: Process exited (exit code 0), completed in 15s 481ms

[@clickhouse/design-tokens]: Process started
[@clickhouse/design-tokens]: ✔  No errors 261ms
[@clickhouse/design-tokens]: Process exited (exit code 0), completed in 0s 818ms
Done in 16s 301ms

changeset-bot · 2026-03-27T12:34:29Z

⚠️ No Changeset found

Latest commit: f6c22c1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-03-27T15:33:26Z

Claude finished @punkbit's task in 1m 22s —— View job

PR Review: chore(monorepo): make linting, formatting centralized

Gathering context
Reading changed files
Providing review feedback

Nice work on this! The approach of exporting named constants from the root eslint.config.ts (rather than a default export) is the right pattern for monorepo ESLint sharing — it lets packages compose selectively. The tsconfig hierarchy is clean too. A couple of things worth a look:

💡 Suggestions (non-blocking)

prettier version pinning drift — packages/click-ui/package.json previously pinned prettier at exact 3.7.4; the root now uses ^3.7.4 (package.json:32). If reproducibility matters (it usually does for a published component lib), consider keeping it exact: "prettier": "3.7.4".
Format coverage narrowed — The deleted .scripts/bash/format (23 lines) was replaced by "src/**/*.{js,jsx,ts,tsx}" in the format script (packages/click-ui/package.json:374). Config files like eslint.config.ts, vite.config.ts, .storybook/**/*.{ts,tsx} are no longer checked by yarn format. This may be intentional, but worth confirming no config files have drifted.
design-tokens format now checks . (all files) — packages/design-tokens/package.json:28 uses prettier --check . which will pick up tsconfig.json, terrazzo.config.ts, etc. This is broader than before. The .prettierignore at root covers dist/node_modules/.yarn, so it's probably fine — just intentional to make explicit.
Root tsconfig.eslint.json excludes packages/design-tokens (tsconfig.eslint.json:9) — makes sense since design-tokens uses Terrazzo's linter, and it's well-documented in the root eslint.config.ts comment. Worth adding a matching note in tsconfig.eslint.json for future maintainers.
@typescript-eslint/eslint-plugin moved to root but typescript-eslint (the typed wrapper) is also in root — these are now both root deps. ESLint resolves plugins from the config file location, so with jiti loading eslint.config.ts from root, this should be fine. If CI passes, you're good.

✅ The core goal is solid — one source of truth for formatting/linting, clean composition at the package level, and correct exclusion of design-tokens from ESLint. The PR works as described. The points above are all minor hygiene items, not blockers.

Copilot

Pull request overview

Centralizes linting/formatting and TypeScript base configuration at the monorepo root so packages share a single source of truth and can run ESLint/Prettier from top-level devDependencies.

Changes:

Add root shared ESLint flat config (eslint.config.ts) and root TS configs (tsconfig.base.json, tsconfig.eslint.json), then update packages to extend them.
Move ESLint/Prettier (and related plugins) to root devDependencies; update workspace scripts to run tools via yarn run -T.
Add root .prettierignore and adjust .prettierrc to rely on Prettier’s inferred parsers.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
yarn.lock	Reflects moving tooling deps to the root workspace and adding `jiti`; updates resolved Prettier version.
tsconfig.eslint.json	New root TS config intended for ESLint config/type-aware linting.
tsconfig.base.json	New shared TS compiler options for packages to extend.
packages/design-tokens/tsconfig.json	Simplified to extend the new root base TS config.
packages/design-tokens/package.json	Switch Prettier scripts to use root-installed Prettier via `yarn run -T`; remove local Prettier dep.
packages/click-ui/tsconfig.json	Switch to extending the new root base TS config; keep package-specific options.
packages/click-ui/tsconfig.eslint.json	New package ESLint TS project config (paths/baseUrl + includes).
packages/click-ui/package.json	Update lint/format scripts to run root tools via `yarn run -T`; remove per-package ESLint/Prettier deps.
packages/click-ui/eslint.config.ts	Refactors to import and extend the new shared root ESLint config pieces.
packages/click-ui/.scripts/bash/format	Removes package-local formatting wrapper script in favor of direct Prettier invocation.
package.json	Adds root `type: module` and centralizes ESLint/Prettier-related devDependencies at the root.
eslint.config.ts	Introduces the shared root ESLint flat config building blocks (ignores/base/rules/plugins).
.prettierrc	Removes forced TypeScript parser setting.
.prettierignore	Adds root ignore rules (dist/node_modules/.yarn/yarn.lock).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-30T09:05:36Z

packages/click-ui/tsconfig.eslint.json

+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }


tsconfig.eslint.json is now the parserOptions.project for ESLint, but it doesn’t include the test/global typings used in src/**/*.test.tsx (e.g. describe, it, expect, vi from vitest/globals). This can degrade type-aware linting and can surface TypeScript semantic diagnostics during lint runs. Consider adding the same compilerOptions.types as tsconfig.json (e.g. vitest/globals, @testing-library/jest-dom) or extending from tsconfig.json and overriding only include/exclude.

Suggested change

}

},

"types": ["vitest/globals", "@testing-library/jest-dom"]

Copilot · 2026-03-30T09:05:37Z

package.json

+    "globals": "^16.5.0",
+    "husky": "^9.1.7",
+    "jiti": "^2.4.0",
+    "prettier": "^3.7.4",


Root prettier was changed to a caret range (^3.7.4), which is already resolving to 3.8.1 in yarn.lock. Since formatting consistency is the goal of this PR (and @clickhouse/click-ui previously pinned Prettier), consider pinning Prettier to an exact version (or adding a Yarn resolution) to avoid formatting diffs when new minor versions are released.

Suggested change

"prettier": "^3.7.4",

"prettier": "3.8.1",

EvandroLG · 2026-03-30T09:11:01Z

package.json

  },
  "devDependencies": {
-    "husky": "^9.1.7"
+    "@typescript-eslint/eslint-plugin": "^8.54.0",


Do you still need this package @punkbit? typescript-eslint should be enough

The package's been removed on main #943
Once the branches are updated, that should go.

EvandroLG

Approving, but I think we should get rid of the package @typescript-eslint/eslint-plugin. The typescript-eslint package already bundles the recommended rules and configs.

punkbit · 2026-03-30T09:27:01Z

Approving, but I think we should get rid of the package @typescript-eslint/eslint-plugin. The typescript-eslint package already bundles the recommended rules and configs.

The following comments is to clarify other reviewers that this package been removed in main beforehand here #943, once these branch PR are updated with latest from main, the package will not be present.

…notation for sharedRules allows it to be spread into any ESLint config's rules object without type conflicts

… for ESLint rule configurations

package level

github-actions · 2026-04-02T17:13:17Z

Claude finished @punkbit's task in 54s —— View job

PR Review: chore(monorepo): make linting, formatting centralized

Gathering context
Reading changed files
Providing review feedback

Nice work on the centralization! The named-export pattern from the root eslint.config.ts is the right approach for monorepo sharing, and the tsconfig hierarchy is clean.

🚨 Must Fix

packages/click-ui/tsconfig.eslint.json missing test type globals — packages/click-ui/tsconfig.eslint.json includes src/**/*.ts and src/**/*.tsx (which covers test files) but doesn't carry over "types": ["@testing-library/jest-dom", "vitest/globals"] from the main tsconfig.json. Since ESLint's type-aware linting uses this as parserOptions.project, TypeScript globals like describe, it, expect, and vi won't be resolved — potentially causing false semantic errors during lint runs.

{
  "extends": "../../tsconfig.eslint.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] },
    "types": ["vitest/globals", "@testing-library/jest-dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Fix this →

💡 Suggestions (non-blocking)

@typescript-eslint/eslint-plugin in package.json:23 — Redundant alongside typescript-eslint which bundles it. Already removed from main in chore: 🤖 remove redundant @typescript-eslint package #943; will resolve once this branch is synced.
Prettier version range — package.json:31 uses ^3.7.4 (already resolving to 3.8.1 in lockfile). For a published component library, pinning exact versions avoids surprise formatting diffs on prettier minor bumps. Consider "prettier": "3.8.1".

✅ The core approach is solid — single source of truth, clean composition, correct design-tokens exclusion. The test types fix is the only thing that could cause lint failures in practice.

…typescript-eslint)

workflow-authentication-public · 2026-04-02T17:23:15Z

📚 Storybook Preview Deployed

✅ Preview URL: https://click-2mpy9d23e-clickhouse.vercel.app

Built from commit: c824a994042a87248cdc8364a4a7eaac220308a8

ClickHouse deleted a comment from github-actions bot Mar 27, 2026

punkbit marked this pull request as ready for review March 27, 2026 15:39

punkbit requested review from EvandroLG, ariser, hoorayimhelping and kunalpanchal March 27, 2026 15:41

EvandroLG requested a review from Copilot March 30, 2026 09:00

Copilot started reviewing on behalf of EvandroLG March 30, 2026 09:01 View session

Copilot AI reviewed Mar 30, 2026

View reviewed changes

EvandroLG reviewed Mar 30, 2026

View reviewed changes

EvandroLG approved these changes Mar 30, 2026

View reviewed changes

punkbit force-pushed the chore/design-tokens-package branch 2 times, most recently from 814d7ad to 6385b7a Compare April 2, 2026 15:49

punkbit added 3 commits April 2, 2026 17:42

refactor: 💡 make eslint config root-level

3ade323

refactor: 💡 make tsconfig base

8511f1e

refactor: 💡 root-level tsconfig for eslint

a788d8e

punkbit added 16 commits April 2, 2026 17:42

fix: 🐛 Removed the non-functional references array

b922b20

fix: 🐛 remove duplicate prettier version

74d62f2

chore: 🤖 exclude non eslint packages

31f9637

refactor: 💡 shared eslint config

76d3e40

fix: 🐛 missing type def

faa3f91

refactor: 💡 convert the eslint root-level config a typescript file

ce767c5

refactor: 💡 move click-ui specific eslint rules

3fc9993

fix: 🐛 type errors, e.g. Using Record<string, unknown> as the type an…

3b007a8

…notation for sharedRules allows it to be spread into any ESLint config's rules object without type conflicts

fix: 🐛 Using Linter.RulesRecord from eslint provides the correct type…

1270a82

… for ESLint rule configurations

refactor: 💡 React/Storybook plugins should be added at

8443376

package level

chore: 🤖 add comment

e8ab91b

chore: 🤖 remove comment

8f24d86

refactor: 💡 root-level tsconfig.eslint doesnt need a includes

fb80f48

refactor: 💡 move click ui specific eslint packages

b43d4e5

chore: 🤖 tsconfig.eslint default include set to eslint.config.ts

548f696

refactor: 💡 add local configs and extend to follow convention

af27131

punkbit force-pushed the chore/monorepo-make-linting-formatting-centralized branch from 65210ea to af27131 Compare April 2, 2026 17:08

chore: 🤖 update lockfile

6b7a58d

ClickHouse deleted a comment from github-actions bot Apr 2, 2026

fix: 🐛 remove redundant @typescript-eslint/eslint-plugin (bundled in …

f6c22c1

…typescript-eslint)

ClickHouse deleted a comment from github-actions bot Apr 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(monorepo): 🤖 make linting, formatting centralized#955

chore(monorepo): 🤖 make linting, formatting centralized#955
punkbit wants to merge 21 commits intochore/design-tokens-packagefrom
chore/monorepo-make-linting-formatting-centralized

punkbit commented Mar 27, 2026

Uh oh!

changeset-bot bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

EvandroLG Mar 30, 2026

Uh oh!

punkbit Mar 30, 2026

Uh oh!

EvandroLG left a comment

Uh oh!

punkbit commented Mar 30, 2026

Uh oh!

github-actions bot commented Apr 2, 2026 •

edited

Loading

Uh oh!

workflow-authentication-public bot commented Apr 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

punkbit commented Mar 27, 2026

Why?

How?

Tickets?

Contribution checklist?

Security checklist?

Preview?

Uh oh!

changeset-bot bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: chore(monorepo): make linting, formatting centralized

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

EvandroLG Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

punkbit Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

EvandroLG left a comment

Choose a reason for hiding this comment

Uh oh!

punkbit commented Mar 30, 2026

Uh oh!

github-actions bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: chore(monorepo): make linting, formatting centralized

🚨 Must Fix

💡 Suggestions (non-blocking)

Uh oh!

workflow-authentication-public bot commented Apr 2, 2026

📚 Storybook Preview Deployed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Mar 27, 2026 •

edited

Loading

github-actions bot commented Mar 27, 2026 •

edited

Loading

github-actions bot commented Apr 2, 2026 •

edited

Loading