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
-# You can now develop your Login pages. (Don't forget to comment it back when you're done)
+           # 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)
 
-# Think your theme is ready? Run
-yarn build-keycloak-theme
-# Read the instruction printed on the console to see how to test
-# your theme on a real Keycloak instance.
+yarn storybook # Start Storybook
+               # This is by far the best way to develop your theme
+               # This enable to quickly see your pages in isolation and in different states.  
+               # 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 storybook
+yarn build-keycloak-theme # Actually build the theme
+                          # 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 # Then select the page you want
+npx eject-keycloak-page # Prompt that let you select the pages you want to customize
+                        # 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
+npx initialize-email-theme # For initializing your email theme
+                           # Note that Keycloakify does not feature React integration for email yet.
 
-# For downloading the default theme
-npx download-builtin-keycloak-theme
+npx download-builtin-keycloak-theme # For downloading the default theme (as a reference)
+                                    # 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;
 }

src/keycloak-theme/account/KcApp.tsx

@@ -13,7 +13,7 @@ const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
 const Fallback = lazy(()=> import("keycloakify/account"));
 
 const classes: PageProps<any, any>["classes"] = {
-    "kcBodyClass": "my-root-class"
+    "kcBodyClass": "my-root-account-class"
 };
 
 export default function KcApp(props: { kcContext: KcContext; }) {

src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx

@@ -0,0 +1,23 @@
+//This is to show that you can create stories for pages that you haven't overloaded.
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { createPageStory } from "../createPageStory";
+
+const { PageStory } = createPageStory({
+    pageId: "login-reset-password.ftl"
+});
+
+export default {
+    title: "login/LoginResetPassword",
+    component: PageStory,
+} as ComponentMeta<typeof PageStory>;
+
+export const Default: ComponentStory<typeof PageStory> = () => <PageStory />;
+
+export const WithEmailAsUsername: ComponentStory<typeof PageStory> = () => (
+    <PageStory
+        kcContext={{
+            realm: { loginWithEmailAllowed: true, registrationEmailAsUsername: true }
+        }}
+    />
+);

src/keycloak-theme/login/pages/Terms.stories copy.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { createPageStory } from "../createPageStory";
+
+const { PageStory } = createPageStory({
+    pageId: "terms.ftl"
+});
+
+export default {
+    title: "login/Terms",
+    component: PageStory,
+} as ComponentMeta<typeof PageStory>;
+
+export const Primary: ComponentStory<typeof PageStory> = () => <PageStory />;

yarn.lock

@@ -9697,10 +9697,10 @@ keycloak-js@^21.0.1:
     base64-js "^1.5.1"
     js-sha256 "^0.9.0"
 
-keycloakify@^7.6.6:
-  version "7.6.7"
-  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.6.7.tgz#33dcccc7da3fd9ed5b47127c30dabc22d2b7aef8"
-  integrity sha512-Fv5ypw/UhvQaZqteQVzVL+klQZsGMDbhcJPDymIeO8my8J+WmA6tivzE6FiYqSCIb+DyX1ZYuEmSl4PkxJWVlw==
+keycloakify@^7.6.8:
+  version "7.6.8"
+  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.6.8.tgz#be485b9766dbb54a92c8ce43e5f5181e0acf05ad"
+  integrity sha512-5F3pM4b1XBdV1FHIAdQ1RTuZG0i7QGAMXFBZQlTFLbW2AkyjBLWB9P62tUuzLM0MxSgsNH4x3/7jRzrzKhxGCA==
   dependencies:
     "@octokit/rest" "^18.12.0"
     "@types/yazl" "^2.4.2"