Update readme

README.md

@@ -2,7 +2,7 @@
     <img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">  
 </p>
 <p align="center">
-    <i>🔏 Keycloak theme generator for Reacts app 🔏</i>
+    <i>🔏  Customize key cloak's pages as if they were part of your App 🔏</i>
     <br>
     <br>
     <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=develop">
@@ -11,9 +11,11 @@
     <img src="https://img.shields.io/npm/l/keycloakify">
 </p>
 
+<i>Ultimately this build tool Generates a Keycloak theme</i>
 
-
+<p align="center">
-**!!! This module is under active developement. It is not usable yet!!!**
+    <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
+</p>
 
 # Motivations
 
@@ -22,20 +24,14 @@ The problem:
 ![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
 
 When we redirected to Keycloak the user suffers from a harsh context switch.
-On je login/register pages the language is set back to default and the theme is different that the one on the app.  
-
 Keycloak does offer a way to customize theses pages but it requires a lot of raw HTML/CSS hacking
 to reproduce the look and feel of a specific app. Not mentioning the maintenance cost of such an endeavour.  
 
-Wouldn't it be great if we could just design the login and register pages as if they where part of our app while
+Wouldn't it be great if we could just design the login and register pages as if they where part of our app? 
-still letting Keycloak handle the heavy lifting of actually authenticating the users? 
-
 Here is `yarn add keycloakify` for you 🍸
 
 TODO: Insert video after.
-
 # How to use
-
 ## Setting up the build tool
 
 Add `keycloakify` to the dev dependencies of your project `npm install --save-dev keycloakify` or `yarn add --dev keycloakify`
@@ -56,18 +52,102 @@ Typically you will get:
 Then build your app with `yarn run build` or `npm run build`, you will be provided with instructions
 about how to load the theme into Keycloak.
 
-[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
-
 ## Developing your login and register pages in your React app
 
-TODO
+### Just changing the look
 
+The fist approach is to only arr/replace the default class names by your
+own.
+
+```tsx
+
+import { App } from "./<wherever>/App";
+import { 
+  KcApp, 
+  defaultKcProps, 
+  kcContext
+} from "keycloakify";
+import { css } from "tss-react";
+
+const myClassName = css({ "color": "red" });
+
+reactDom.render(
+    // Unless the app is currently being served by Keycloak 
+    // kcContext is undefined.
+    kcContext !== undefined ? 
+        <KcApp 
+            kcContext={kcContext} 
+            {...{
+                ...defaultKcProps,
+                "kcHeaderWrapperClass": myClassName
+            }} 
+        /> :
+        <App />, // Your actual app
+    document.getElementById("root")
+);
+```
+
+<i>result:</i>
+
+<p align="center">
+    <img src="https://user-images.githubusercontent.com/6702424/110261408-688d6280-7fb0-11eb-9822-7003d268b459.png">
+</p>
+
+### Changing the look and feel
+
+If you want to really re-implement the pages the best approach is to 
+create you own version of the [`<KcApp />`](https://github.com/garronej/keycloakify/blob/develop/src/lib/components/KcApp.tsx).
+Copy/past some of [the components](https://github.com/garronej/keycloakify/tree/develop/src/lib/components) provided by this module and start hacking around. 
+
+### Hot reload
+
+By default, in order to see your changes you will have to wait for 
+`yarn build` to complete which can takes sevrall minute. 
+
+If you want to test your login screens outside of Keycloak, in [storybook](https://storybook.js.org/)
+for example you can use `kcContextMocks`.
+
+```tsx
+import {
+    KcApp,
+    defaultKcProps,
+    kcContextMocks
+} from "keycloakify";
+
+reactDom.render(
+    kcContext !== undefined ? 
+        <KcApp 
+            kcContext={kcContextMocks.kcLoginContext}
+            {...defaultKcProps} 
+        />
+    document.getElementById("root")
+);
+```
+
+then `yarn start` ...
+
+
+*NOTE: keycloak-react-theming was renamed keycloakify since this video was recorded*
+[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
 # How to implement context persistance
 
-If you want dark mode preference, language and others users preferences your can do so
+If you want dark mode preference, language and others users preferences 
-very easily by using [`powerhooks/useGlobalState`](https://github.com/garronej/powerhooks)
+to persist within the page served by keycloak here are the methods you can
+adopt.
 
-WARNING: `powerhooks` is still a work in progress.
+## If your keycloak is a subdomain of your app.
+
+E.g: Your app url is `my-app.com` and your keycloak url is `auth.my-app.com`.
+
+In this case there is a very straightforward approach and it is to use [`powerhooks/useGlobalState`](https://github.com/garronej/powerhooks).
+Instead of `{ "persistance": "localStorage" }` use `{ "persistance": "cookie" }`.
+
+## Else
+
+You will have to use URL parameters to passes states when you redirect to 
+the login page.
+
+TOTO: Provide a clean way, as abstracted as possible, way to do that.
 
 # REQUIREMENTS
 
@@ -97,3 +177,4 @@ Part of the lib that runs with node, at build time.
 Part of the lib that you import in your react project and runs on the browser.
 
 **TODO**
+