frontend-conventions.mdc 1.2 KB

1234567891011121314151617181920212223242526272829303132
  1. ---
  2. description: Conventions for React/TS, imports, naming, structure; auto-attach to UI code.
  3. globs: ["**/*.ts", "**/*.tsx"]
  4. alwaysApply: false
  5. ---
  6. # React + TS Conventions
  7. - Use `interface` for props; no `any`; narrow `unknown`.
  8. - Import order: externals → internal utils/hooks → types → styles (last).
  9. - Keep components cohesive; lift state; split large parts into small pure pieces.
  10. ## New react components
  11. - Component folder: `ComponentName/ComponentName.tsx` + `ComponentName.test.tsx` + `ComponentName.scss`.
  12. - Do not create an index.ts file
  13. - Always the create a unit test and if needed the scss file
  14. - Always include the Cloudera copyright msg at the beginning of the file
  15. - Global and reusable components are placed in folder `desktop/core/src/desktop/js/reactComponents`
  16. - Put app specific components under that app, e.g. `desktop/core/src/desktop/js/apps/editor/components/`
  17. ## Example Skeleton
  18. ```ts
  19. export interface FooProps { title: string; onAction?: () => void }
  20. export const Foo = ({ title, onAction }: FooProps) => (
  21. <div className="foo">
  22. <h2>{title}</h2>
  23. <button onClick={onAction}>{t('Click me')}</button>
  24. </div>
  25. );
  26. ```
  27. ## Performance
  28. Lazy-load heavy chunks; debounce/cancel network work; memoize expensive calcs.