# 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)

It is recommended to start with the Auth0 stage once everything from the client has been recieved as things like the client ID will be needed in other stages

<!-- frontend steps -->
Frontend Steps
1. 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

2. Create a white-label branding folder in `src/assets/whitelabels` and create a `darkLogo.png` and `lightLogo.png` from the client's logo
3. In `src/services/whiteLabel.ts`, add a new `Whitelabel` instance with the required fields and add its hostname mapping to the `whitelabels` map
4. If there are any pages specific to the whitelabel be sure to update the side and bottom navigator

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

<!-- Auth steps -->
Auth0 Steps
1. Create a new Single Page App on Auth0 using React as the tech
2. Once you have the client ID add it to your .env file in the frontend
3. Adjust settings accordingly in the new application
   - 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 other applications/whitelabels 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/))

## 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,
  },
})
```