Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 21:47:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7
ToolJet/.github/copilot-instructions.md
Nakul Nagargade 433e1bd4c4
Enhance TypeScript support in frontend configuration (#15576) 
* test: verify pre-commit hook

* fix: clean up code formatting and improve readability across multiple components

* chore: update subproject commit reference in frontend/ee

* chore: update eslint to version 9.26.0 and remove unused dependencies from package.json

fix: update submodule reference in server/ee

* chore: refactor ESLint configuration and add quiet linting script; update components to disable specific ESLint rules

* chore: add GitHub Copilot review instructions for App Builder team

Covers backward compatibility rules, styling conventions, state management,
resolution system, widget definitions, and common review flags.

* chore: add review instructions for App Builder, Data Migrations, Server Widget Config, Widget Components, and Widget Config

* Enhance TypeScript support in frontend configuration

- Added TypeScript parser and linting rules to ESLint configuration.
- Updated Babel configuration to include TypeScript preset.
- Modified package.json and package-lock.json to include TypeScript and related dependencies.
- Introduced tsconfig.json for TypeScript compiler options.
- Updated Webpack configuration to support .ts and .tsx file extensions.
- Adjusted linting and formatting scripts to include TypeScript files.

* chore: update TypeScript ESLint packages and subproject commits

---------

Co-authored-by: kavinvenkatachalam <kavin.saratha@gmail.com>
Co-authored-by: Johnson Cherian <johnsonc.dev@gmail.com>
2026-03-19 12:41:32 +05:30

1.9 KiB
Raw Blame History

ToolJet — Shared Copilot Instructions

Styling

  • Tailwind classes MUST use the tw- prefix (e.g., tw-flex, tw-text-default). Unprefixed Tailwind is a bug.
  • NEVER hardcode hex/rgb colors. Use CSS variable tokens via Tailwind (tw-text-default, tw-bg-page-default) or var(--text-default).
  • Prefer Tailwind over Bootstrap for new code. Do not extend legacy react-bootstrap usage.
  • Use custom typography utilities (tw-font-title-default, tw-font-body-default, etc.) instead of ad-hoc font-size/weight.
  • Design tokens: frontend/src/_styles/designtheme.scss + frontend/tailwind.config.js.

Component Patterns

  • Check frontend/src/_ui/ (53+ components) before creating new UI components.
  • Functional components with hooks only. No class components.
  • File structure: ComponentName/index.js + optional ComponentName.jsx + style.scss.
  • Compose with Radix UI primitives for accessible interactive elements.

Imports

  • Use @/ path alias (maps to frontend/src/): import Button from '@/_ui/Button'.
  • No deep relative paths (../../.. is a smell).

State Management

  • Zustand with Immer middleware only. No Redux/MobX/Recoil.
  • Use shallow comparison in useStore when selecting objects/arrays. Flag missing shallow.

Icons & Assets

  • Use Tabler Icons (@tabler/icons-react) or Lucide React (lucide-react). Do NOT add new icon packages.
  • Static assets: frontend/assets/images/.

Security

  • No API keys/secrets in client-side code.
  • Backend: parameterized queries only, never concatenate user input into SQL.

Common Review Flags

  • Hardcoded colors (hex/rgb/hsl in JSX or SCSS)
  • Missing tw- prefix on Tailwind classes
  • New react-bootstrap imports
  • Class components
  • console.log / debug leftovers
  • Unused imports
  • Missing key props in .map()
  • Missing shallow in useStore selectors
  • Direct DOM manipulation (except canvas drop calculations)