updated the coding guidelines (#40179)

* updated the coding guidelines

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* added link to guidelines

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/CODING_GUIDELINES.md

@@ -18,8 +18,35 @@ If you submit a pull request that changes the dependencies, make sure that you a
 
 Since this project relies greatly on [PNPM workspaces](https://pnpm.io/workspaces) it is recommended you familiarize yourself with features such as [`--filter`](https://pnpm.io/filtering).
 
+## Running
+
+We run the UI in dev mode and configure keycloak to proxy the request this can be done by adding `KC_ADMIN_VITE_URL=http://localhost:5174` as environment variable to the startup of keycloak or by using the start script:
+
+```bash
+pnpm --filter keycloak-server start --admin-dev
+```
+
+This script will download the nightly version of keycloak and start it with the added environment variable.
+Afterwards one needs to start the dev server with:
+
+```bash
+pnpm --filter keycloak-admin-ui run dev
+```
+
+Now when viewing the admin ui in the browser this is the local version and any changes made to the ui code base will automatically be reflected no reload needed.
+See [README.md](apps/keycloak-server/README.md) for more information.
+
 ## Code-style
 
+### Frameworks used
+
+We try and keep the use of frameworks to a minium, but we do use a couple:
+  1. [Patternfly](https://www.patternfly.org/) a component library
+  1. [React router](https://reactrouter.com/) for routing
+  1. [React hook form](https://react-hook-form.com/) with so many forms this is to keep state
+  1. [Playwright](https://playwright.dev/) for testing
+
+
 ### Linting
 
 To ensure code-style is consistent between various contributions [ESLint](https://eslint.org/) is used to enforce a common set of guidelines. The [recommended rules](https://eslint.org/docs/latest/rules/) of ESLint are used as a foundation.
@@ -73,10 +100,6 @@ setUser(newUser);
 
 ```
 
-### useReducers
-
-When using reducers make sure you specify the [return type and not use inference](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/hooks#usereducer).
-
 ### useEffect
 
 For useEffect only [return the function or undefined](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/hooks#useeffect).
@@ -229,4 +252,7 @@ switch (titleStatus) {
 ## Resources
 
 - [PatternFly Docs](https://www.patternfly.org/)
+- [React hook form](https://react-hook-form.com/)
 - [Learn React](https://react.dev/learn)
+- [Typescript](https://www.typescriptlang.org/docs/handbook/intro.html)
+- [Playwright](https://playwright.dev/)

js/README.md

@@ -9,6 +9,7 @@ This directory contains the UIs and related libraries of the Keycloak project wr
     │   ├── admin-ui                   # Admin UI for handling login, registration, administration, and account management
     │   └── keycloak-server            # Keycloak server for local development of UIs
     ├── libs
+    │   ├── ui-shared                  # Shared component library between admin and account
     │   └── keycloak-admin-client      # Keycloak Admin Client library for Keycloak REST API
     ├── ...
 
@@ -19,3 +20,7 @@ Red Hat may process information including business contact information and code
 To speed up the build process, the following build flag can be used to disable the processing of these modules:
 
     -Dskip.npm
+
+## Contributing
+
+If you want to contribute please look at the [coding guidelines](CODING_GUIDELINES.md)

js/apps/keycloak-server/README.md

@@ -51,7 +51,4 @@ KC_FEATURES=login:v2,account:v3,admin-fine-grained-authz,transient-users,oid4vc-
 
 **All other arguments will be passed through to the underlying Keycloak server.**
 
-In order for the development version of the Admin UI to work you will have to import a custom client to the Keycloak server. This is only required during development as the development server for the Admin UI runs on a different port. This client will be imported automatically under the name `security-admin-console-v2` when the Keycloak server starts.
-
-This client only allows redirects from/to "localhost:8080" so be sure either modify the client json in `./scripts` or only attempt to authenticate and redirect from that address