feat(devx): introduce storybook

First shot at introducing storybook, with stories for the keycloak
theme pages already in the repo.

src/keycloak-theme/pages/Login.stories.tsx

@@ -0,0 +1,97 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData, socialProviders } from '../../../.storybook/data'
+
+export default {
+  title: 'Login',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'login.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const RealmDisplayNameIsHtml = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, realm: {
+      displayNameHtml: '<marquee>my realm</marquee>'
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const NoInternationalization = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, realm: {
+      internationalizationEnabled: false,
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const NoPasswordField = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { password: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const RegistrationNotAllowed = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { registrationAllowed: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const RememberMeNotAllowed = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { rememberMe: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const PasswordResetNotAllowed = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { resetPasswordAllowed: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const EmailIsUsername = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, realm: { loginWithEmailAllowed: false } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const TryAnotherWay = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, auth: { showTryAnotherWayLink: true } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const PresetUsername = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, login: { username: 'max.mustermann@mail.com' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const ReadOnlyPresetUsername = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, login: { username: 'max.mustermann@mail.com' }, usernameEditDisabled: true })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithSocialProviders = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, social: {
+      displayInfo: true,
+      providers: socialProviders
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithError = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: { type: "error", summary: "This is an error" } })
+  return <KcApp kcContext={kcContext} />
+}

src/keycloak-theme/pages/MyExtraPage1.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData } from '../../../.storybook/data'
+
+export default {
+  title: 'My Extra Page 1',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'my-extra-page-1.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}

src/keycloak-theme/pages/MyExtraPage2.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData } from '../../../.storybook/data'
+
+export default {
+  title: 'My Extra Page 2',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'my-extra-page-2.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithCustomValue = () => {
+  const { kcContext } = useKcStoryData({ pageId, someCustomValue: 'Foo Bar Baz' })
+  return <KcApp kcContext={kcContext} />
+}

src/keycloak-theme/pages/Register.stories.tsx

@@ -0,0 +1,69 @@
+import { ComponentMeta } from '@storybook/react';
+import KcApp from '../KcApp';
+
+import { useKcStoryData, socialProviders } from '../../../.storybook/data'
+
+export default {
+  title: 'Register',
+  component: KcApp,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof KcApp>;
+
+const pageId = 'register.ftl'
+
+export const Default = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const InFrench = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: undefined, locale: { currentLanguageTag: 'fr' } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithError = () => {
+  const { kcContext } = useKcStoryData({ pageId, message: { type: "error", summary: "This is an error" } })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const EmailIsUsername = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined,
+    realm: { registrationEmailAsUsername: true }
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const NoPassword = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined, passwordRequired: false
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithRecaptcha = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined,
+    recaptchaRequired: true,
+    recaptchaSiteKey: 'foobar'
+  })
+  return <KcApp kcContext={kcContext} />
+}
+
+export const WithPresets = () => {
+  const { kcContext } = useKcStoryData({
+    pageId, message: undefined,
+    register: {
+      formData: {
+        firstName: 'Max',
+        lastName: 'Mustermann',
+        email: 'max.mustermann@mail.com',
+        username: 'max.mustermann'
+      }
+    }
+  })
+  return <KcApp kcContext={kcContext} />
+
+}