Basic storybook setup and update readme

README.md

@@ -22,27 +22,32 @@ If you are only looking to create a theme (and not a theme + an App) there are a
 ```bash
 yarn
 yarn build-keycloak-theme # Build the theme one time (some assets will be copied to 
-              # public/keycloak_static, they are needed to dev your page outside of Keycloak)
+                          # public/keycloak_static, they are needed to dev your page 
+                          # outside of Keycloak)
+
 yarn start # See the Hello World app
-# Uncomment line 15 of src/keycloak-theme/login/kcContext, reload https://localhost:3000
+           # Uncomment line 15 of src/keycloak-theme/login/kcContext, reload https://localhost:3000
-# You can now develop your Login pages. (Don't forget to comment it back when you're done)
+           # You can now develop your Login pages. (Don't forget to comment it back when you're done)
 
-# Think your theme is ready? Run
+yarn storybook # Start Storybook
-yarn build-keycloak-theme
+               # This is by far the best way to develop your theme
-# Read the instruction printed on the console to see how to test
+               # This enable to quickly see your pages in isolation and in different states.  
-# your theme on a real Keycloak instance.
+               # You can create stories even for pages that you haven't explicitly overloaded. See src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx
+               # See Keycloakify's storybook for if you need a starting point for your stories: https://github.com/keycloakify/keycloakify/tree/main/stories
 
-# For launching the Storybook
+yarn build-keycloak-theme # Actually build the theme
-yarn storybook
+                          # Read the instruction printed on the console to see how to test
+                          # your theme on a real Keycloak instance.
 
-# For customizing other pages at the component level
+npx eject-keycloak-page # Prompt that let you select the pages you want to customize
-npx eject-keycloak-page # Then select the page you want
+                        # This CLI tools is not guarenty to work, you can always copy pase pages 
+                        # from the Keycloakify repo.
 
-# For initializing your email theme
+npx initialize-email-theme # For initializing your email theme
-npx initialize-email-theme
+                           # Note that Keycloakify does not feature React integration for email yet.
 
-# For downloading the default theme
+npx download-builtin-keycloak-theme # For downloading the default theme (as a reference)
-npx download-builtin-keycloak-theme
+                                    # Look for the files in build_keycloak/src/main/resources/theme/{base,keycloak}
 ```
 
 # The CI workflow

package.json

@@ -39,7 +39,7 @@
         "evt": "^2.4.15",
         "jwt-decode": "^3.1.2",
         "keycloak-js": "^21.0.1",
-        "keycloakify": "^7.6.6",
+        "keycloakify": "^7.6.8",
         "powerhooks": "^0.26.7",
         "react": "18.1.0",
         "react-dom": "18.1.0",

src/keycloak-theme/account/KcApp.css

@@ -1,5 +1,5 @@
 
 
-.my-root-class {
+.my-root-account-class {
 	background: url(./assets/background.svg) no-repeat center center fixed;
 }