# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

### White-labeling

Steps to add a new white label

1.  Client Instructions:

- supply assets and colours to be used for the white-label (favicon if necessary)
- determine a sub-domain to use as mask, dashboard is preferred (ex: dashboard.example.com)
- add a `CNAME` record pointing their custom subdomain (ex: dashboard.example.com) to brandxtech.ca
- add a login button on their website point to `/login` of their custom subdomain (ex: dashboard.example.com/login)

<!-- frontend steps -->
2. Create a PWA folder in `public` that is named after the client and generate PWA assets using [this](https://realfavicongenerator.net/) website (use the company logo but you might need to use a custom favicon depending on the result)

- https://maskable.app/ also create a maskable icon for PWA
- create a 512x512 png as well for PWA

3. Create a white-label branding folder in `src/assets/whitelabels` and create a `darkLogo.png` and `lightLogo.png` from the client's logo
4. In `src/services/whiteLabel.ts`, add a new `Whitelabel` instance with the required fields and add its hostname mapping to the `whitelabels` map (it is very similar to step one but had some constraints when dealing with the `public` folder)
5. If there are any pages specific to the whitelabel be sure to update the side and bottom navigator

<!-- backend steps -->
6. In `dynamic-config.prod.yml`, add a router entry for the new whitelabel
7. In `pond/http/server.go`, add the sub-domain to the `allowedOrigins`
8. In `pond/whitelabel.go`, add an entry for the new white label

7. Create a new `Auth0` application for the client
   - use a image bucket like [postimg](https://postimages.org/) to store their company logo and favicon
   - add a whitelabel logo
   - allow necessary `origins`, `callback URLs`, and `CORS domains` to the application settings (see the default application as a guideline)
   - customize the Universal Login page to handle the new whitelabel
     - check if the client ID matches this client's Auth0 application
     - change the Universal Login theme using white-label colours and images stored in a bucket (ex: [postimg](https://postimages.org/))
8. Enable the white-label sub-domain for CORS in the backend

- in [http.go](https://gitlab.com/brandx/backend/blob/master/pond/http.go), add the white-label sub-domain to the `AllowedOrigins` list

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```