|
| 1 | +# Cockpit starter-kit - Technical Overview |
| 2 | + |
| 3 | +This document provides a technical overview for applications or plugins that integrate into Cockpit and are prepared with the starter-kit. Is is human readable but intended to give AI context to follow the project standards. |
| 4 | + |
| 5 | +## Project Structure |
| 6 | + |
| 7 | +- **Upstream Website**: [Cockpit Project](https://cockpit-project.org/) |
| 8 | +- **Upstream Code Repository**: [Cockpit Project Git](https://github.com/cockpit-project/) |
| 9 | +- **Upstream Starter Kit**: [starter-kit](https://github.com/cockpit-project/starter-kit) |
| 10 | +- **Language**: [TypeScript](https://www.typescriptlang.org/) |
| 11 | +- **Design System**: [Patternfly](https://www.patternfly.org) |
| 12 | +- **Design System Upgrades**: [Patternfly 5 to 6 migration](https://www.patternfly.org/get-started/upgrade/) |
| 13 | +- **JavaScript Library**: [React](https://react.dev/) |
| 14 | +- **API**: [Developer Guide](https://cockpit-project.org/guide/latest/development) |
| 15 | + |
| 16 | +## Key Scripts |
| 17 | + |
| 18 | +- `git clone https://github.com/cockpit-project/starter-kit.git`: clone the starter-kit repo. If not already done, this should be offered first but only once. |
| 19 | +- `npm run eslint`: check JavaScript/TypeScript code style in .js[x] and .ts[x] files. |
| 20 | +- `npm run eslint:fix`: automatically fix violations of some code style rules. |
| 21 | +- `npm run stylelint`: check CSS style in .css and scss files. |
| 22 | +- `npm run stylelint:fix`: automatically fix violations of some style rules. |
| 23 | +- `npm run build`: build the files and add them to the dist folder. |
| 24 | +- `make`: run this first to check if the project setup is correct and after source code changes. |
| 25 | +- `make devel-install`: link the dist directory to ~/.local/share/cockpit/ to make the application appear for the user. The command needs to run only once. |
| 26 | +- `sudo make install`: install the application files from dist system wide in /usr/local/share/cockpit/ |
| 27 | + |
| 28 | +## Architectural Notes |
| 29 | + |
| 30 | +- To allow gettext translations, all user visible strings should be appropriately prefixed by an underscore followed by parentheses enclosing the text, such as _("Text"). |
| 31 | +- The applications follows the Cockpit coding standards and consequently use React preferrably with only built in elements. |
| 32 | +- Patternfly 5 code needs to be upgraded to 6 and the exact implementation from the official PatternFly 6 documentation must be used. |
| 33 | +- Applications use CSS, support Light and Dark themes and should import cockpit-dark-theme. |
| 34 | + |
| 35 | +## Implementation standard |
| 36 | + |
| 37 | +- Do not over engineer things. Start with the simplest implementation. |
| 38 | +- Always keep security as a first priority. Performance is second. |
| 39 | +- Ask for any clarification rather just guessing things if you are not clear about anything. |
| 40 | + |
| 41 | +## General Instructions |
| 42 | + |
| 43 | +- When generating new code, follow the existing coding style. |
| 44 | +- Prefer functional programming paradigms where appropriate. |
| 45 | +- All code should be compatible with TypeScript 5.0 and Node.js 18+. |
| 46 | + |
| 47 | +## Coding Style |
| 48 | + |
| 49 | +- Source code is under src, the application is under dist after build. |
| 50 | +- Use 2 spaces for indentation. |
| 51 | +- Interface names should be prefixed with `I` (e.g., `IUserService`). |
| 52 | +- Private class members should be prefixed with an underscore (`_`). |
| 53 | +- Always use strict equality (`===` and `!==`). |
| 54 | + |
| 55 | +## Regarding Dependencies |
| 56 | + |
| 57 | +- Dependencies include the packages: nodejs, npm, git, cockpit, make. |
| 58 | +- Avoid introducing new external dependencies unless absolutely necessary. |
| 59 | +- If a new dependency is required, state the reason. |
0 commit comments