Improve Register page default stories

src/bin/add-story.ts

@@ -81,7 +81,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             )
         )
         .toString("utf8")
-        .replace('import React from "react";\n', "");
+        .replace('import React from "react";\n', "")
+        .replace(/from "[./]+dist\//, 'from "keycloakify/');
 
     {
         const targetDirPath = pathDirname(targetFilePath);

stories/login/pages/Register.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
+import type { Attribute } from "../../../dist/login";
 
 const { KcPageStory } = createKcPageStory({ pageId: "register.ftl" });
 
@@ -48,23 +49,84 @@ export const WithEmailAlreadyExists: Story = {
     )
 };
 
-export const WithEmailAsUsername: Story = {
+export const WithRestrictedToMITStudents: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
-                realm: {
-                    registrationEmailAsUsername: true
+                profile: {
+                    attributesByName: {
+                        email: {
+                            validators: {
+                                pattern: {
+                                    pattern: "^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$",
+                                    "error-message": "${profile.attributes.email.pattern.error}"
+                                }
+                            },
+                            annotations: {
+                                inputHelperTextBefore: "${profile.attributes.email.inputHelperTextBefore}"
+                            }
+                        }
+                    }
+                },
+                "x-keycloakify": {
+                    realmMessageBundleUserProfile: {
+                        "${profile.attributes.email.inputHelperTextBefore}": "Please use your MIT or Berkeley email.",
+                        "${profile.attributes.email.pattern.error}":
+                            "This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email."
+                    }
                 }
             }}
         />
     )
 };
 
-export const WithoutPassword: Story = {
+export const WithFavoritePet: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
-                passwordRequired: false
+                profile: {
+                    attributesByName: {
+                        favoritePet: {
+                            name: "favorite-pet",
+                            displayName: "${profile.attributes.favoritePet}",
+                            validators: {
+                                options: {
+                                    options: ["cat", "dog", "fish"]
+                                }
+                            },
+                            annotations: {
+                                inputOptionLabelsI18nPrefix: "profile.attributes.favoritePet.options"
+                            },
+                            required: false,
+                            readOnly: false
+                        } satisfies Attribute
+                    }
+                },
+                "x-keycloakify": {
+                    realmMessageBundleUserProfile: {
+                        "${profile.attributes.favoritePet}": "Favorite Pet",
+                        "${profile.attributes.favoritePet.options.cat}": "Fluffy Cat",
+                        "${profile.attributes.favoritePet.options.dog}": "Loyal Dog",
+                        "${profile.attributes.favoritePet.options.fish}": "Peaceful Fish"
+                    }
+                }
+            }}
+        />
+    )
+};
+
+export const WithEmailAsUsername: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: {
+                    registrationEmailAsUsername: true
+                },
+                profile: {
+                    attributesByName: {
+                        username: undefined
+                    }
+                }
             }}
         />
     )
@@ -97,31 +159,6 @@ export const WithRecaptchaFrench: Story = {
     )
 };
 
-export const WithPresets: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                profile: {
-                    attributesByName: {
-                        firstName: {
-                            value: "Max"
-                        },
-                        lastName: {
-                            value: "Mustermann"
-                        },
-                        email: {
-                            value: "max.mustermann@gmail.com"
-                        },
-                        username: {
-                            value: "max.mustermann"
-                        }
-                    }
-                }
-            }}
-        />
-    )
-};
-
 export const WithPasswordMinLength8: Story = {
     render: () => (
         <KcPageStory