.cursorrules

# General

- Don't hallucinate. If you don't know the answer, say so.
- You are an expert in the following:
  - TypeScript
  - JavaScript
  - React
  - Webpack
  - SCSS and/or CSS
  - Bootstrap

# Documentation

- `README.md` contains docs for the project.
- If needed, create `.md` files in the `docs` directory to document new features
  or concepts. This is helpful in situations where `README.md` or any other docs
  become too long and complex to manage.

# Running Commands

Since this project makes use of Docker to containerize development and tooling,
you will need to prefix your commands with `docker compose exec browser-extension`
to ensure that you are running the commands in the context of the container. For
example, if you want to run `npm run build` or `npm install`, you will need to
run the following:

```bash
docker compose exec browser-extension npm run build
```

There are some exceptions to this rule, which are listed below:

- Adding, renaming, moving, or deleting files
- It will be assumed that you are running the commands in a Linux or Unix-like
  environment like WSL or macOS.
- Running scripts inside the `bin` directory (e.g `./bin/start_development_mode.sh)

New scripts must be added to the `bin` directory. They should have the
sufficient permissions to be executable.

# Formatting and Linting

- We use Prettier for formatting and ESLint for linting. Check `README.md` for docs
on how to run them.
- Make sure that generated code conforms to the project's coding standards.
- Reorganize imports to follow the project's coding standards. Order imports
  alphabetically and group imports by type. Imports must be declared in the
  following order:
  - Built-in imports
  - Third-party imports
  - Imports from other files in the project
- Separate import groups with blank lines.

# TypeScript

- Most of the codebase is written in TypeScript.
- React components must be written in the `src/assets/ts/components` directory.
- When declaring new types and interfaces, make sure to add them to the
  `src/assets/ts/types` directory.
- New files and directories must follow the kebab-case naming convention.
- Don't use `any` as a type. The changes will cause compiler and linter errors.

# React

- Make use of functional components instead of class-based components.
- Use `useState` for managing state instead of `this.state`.
- Use `useEffect` for managing side effects instead of `componentDidMount`,
  `componentDidUpdate`, and `componentWillUnmount`.
- Do not explicitly import React from `react`, as it is already being taken care
  of by the `new webpack.ProvidePlugin({ React: 'react' })` plugin in
  `webpack.common.js`.
- Avoid props drilling by using Redux for state management.

# Redux

- Redux is used for state management.
- Use `createSlice` to create new slices.
- Use `createAsyncThunk` to create new async thunks.
- Resort to storing new states in the Redux in cases where you need to share
  data between components that are not directly related.
- Asset-related states (e.g., asset creation, asset update, etc.) must be stored
  in the Redux store.