diff --git a/stories/account/pages/Account.stories.tsx b/stories/account/pages/Account.stories.tsx index 5e197369..8e4b1aee 100644 --- a/stories/account/pages/Account.stories.tsx +++ b/stories/account/pages/Account.stories.tsx @@ -1,15 +1,17 @@ import React from "react"; -import { Meta, StoryObj } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; +import type { Meta, StoryObj } from "@storybook/react"; +import { createPageStory, parameters } from "../createPageStory"; const pageId = "account.ftl"; const { PageStory } = createPageStory({ pageId }); const meta = { - title: "account/Account", - component: PageStory + title: `account/${pageId}`, + component: PageStory, + parameters } satisfies Meta; + export default meta; type Story = StoryObj; diff --git a/stories/account/pages/Authenticator.stories.tsx b/stories/account/pages/Authenticator.stories.tsx deleted file mode 100644 index 2f229056..00000000 --- a/stories/account/pages/Authenticator.stories.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import React from "react"; -import { Meta } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; - -const { PageStory } = createPageStory({ - pageId: "totp.ftl" -}); - -const meta = { - title: "account/Authenticator", - component: PageStory -} satisfies Meta; -export default meta; - -export const Default = () => ( - -); - -export const WithTotpEnabled = () => ( - -); - -export const WithManualMode = () => ( - -); - -export const MoreThanOneTotpProviders = () => ( - -); diff --git a/stories/account/pages/FederatedIdentity.stories.tsx b/stories/account/pages/FederatedIdentity.stories.tsx index ab9d782c..b583c709 100644 --- a/stories/account/pages/FederatedIdentity.stories.tsx +++ b/stories/account/pages/FederatedIdentity.stories.tsx @@ -1,34 +1,41 @@ import React from "react"; -import { Meta } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; +import type { Meta, StoryObj } from "@storybook/react"; +import { createPageStory, parameters } from "../createPageStory"; const pageId = "federatedIdentity.ftl"; const { PageStory } = createPageStory({ pageId }); const meta = { - title: "account/FederatedIdentity", - component: PageStory + title: `account/${pageId}`, + component: PageStory, + parameters } satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const NotConnected = () => ( - -); +export const Default: Story = { + render: () => +}; + +export const NotConnected: Story = { + render: () => ( + + ) +}; diff --git a/stories/account/pages/Log.stories.tsx b/stories/account/pages/Log.stories.tsx index 8e1fdfe5..90883914 100644 --- a/stories/account/pages/Log.stories.tsx +++ b/stories/account/pages/Log.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Meta } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; +import type { Meta, StoryObj } from "@storybook/react"; +import { createPageStory, parameters } from "../createPageStory"; const pageId = "log.ftl"; @@ -9,346 +9,350 @@ const { PageStory } = createPageStory({ }); const meta = { - title: "account/Log", + title: `account/${pageId}`, component: PageStory } satisfies Meta; export default meta; -export const Default = () => ( - -); +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + ) +}; diff --git a/stories/account/pages/Pasword.stories.tsx b/stories/account/pages/Pasword.stories.tsx index e385fcfa..a8619fc0 100644 --- a/stories/account/pages/Pasword.stories.tsx +++ b/stories/account/pages/Pasword.stories.tsx @@ -1,24 +1,31 @@ import React from "react"; -import { Meta } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; +import type { Meta, StoryObj } from "@storybook/react"; +import { createPageStory, parameters } from "../createPageStory"; const pageId = "password.ftl"; const { PageStory } = createPageStory({ pageId }); const meta = { - title: "account/Password", - component: PageStory + title: `account/${pageId}`, + component: PageStory, + parameters } satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithMessage = () => ( - -); +export const Default: Story = { + render: () => +}; + +export const WithMessage: Story = { + render: () => ( + + ) +}; diff --git a/stories/account/pages/Sessions.stories.tsx b/stories/account/pages/Sessions.stories.tsx index 462a2c98..52e22594 100644 --- a/stories/account/pages/Sessions.stories.tsx +++ b/stories/account/pages/Sessions.stories.tsx @@ -1,55 +1,62 @@ import React from "react"; -import { Meta } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; +import type { Meta, StoryObj } from "@storybook/react"; +import { createPageStory, parameters } from "../createPageStory"; const pageId = "sessions.ftl"; const { PageStory } = createPageStory({ pageId }); const meta = { - title: "account/Sessions", - component: PageStory + title: `account/${pageId}`, + component: PageStory, + parameters } satisfies Meta; export default meta; -export const Default = () => ( - -); +type Story = StoryObj; -export const WithError = () => ( - -); +export const Default: Story = { + render: () => ( + + ) +}; + +export const WithError: Story = { + render: () => ( + + ) +}; diff --git a/stories/account/pages/Totp.stories.tsx b/stories/account/pages/Totp.stories.tsx index c6e9f4ad..0cc813f1 100644 --- a/stories/account/pages/Totp.stories.tsx +++ b/stories/account/pages/Totp.stories.tsx @@ -1,105 +1,187 @@ import React from "react"; -import { Meta } from "@storybook/react"; -import { createPageStory } from "../createPageStory"; +import type { Meta, StoryObj } from "@storybook/react"; +import { createPageStory, parameters } from "../createPageStory"; const pageId = "totp.ftl"; -const { PageStory } = createPageStory({ pageId }); +const { PageStory } = createPageStory({ + pageId +}); const meta = { - title: "account/Authenticator", - component: PageStory + title: `account/${pageId}`, + component: PageStory, + parameters } satisfies Meta; export default meta; -export const Default = () => ( - -); +type Story = StoryObj; -export const WithTotpEnabled = () => ( - -); +export const Default: Story = { + render: () => ( + + ) +}; -export const WithManualMode = () => ( - -); +export const WithTotpEnabled: Story = { + render: () => ( + + ) +}; + +export const WithManualMode: Story = { + render: () => ( + + ) +}; + +export const MoreThanOneTotpProviders: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/createPageStory.tsx b/stories/login/createPageStory.tsx index d768e803..add3e5f6 100644 --- a/stories/login/createPageStory.tsx +++ b/stories/login/createPageStory.tsx @@ -1,19 +1,31 @@ import React from "react"; -import { getKcContext, type KcContext } from "./kcContext"; +import type { KcContext } from "./kcContext"; +import { getKcContextMock } from "./kcContextMock"; import KcApp from "./KcApp"; import type { DeepPartial } from "../../dist/tools/DeepPartial"; export function createPageStory(params: { pageId: PageId }) { const { pageId } = params; - function PageStory(params: { kcContext?: DeepPartial> }) { - const { kcContext } = getKcContext({ - mockPageId: pageId, - storyPartialKcContext: params.kcContext + function PageStory(props: { kcContext?: DeepPartial> }) { + const { kcContext: overrides } = props; + + const kcContextMock = getKcContextMock({ + pageId, + overrides }); - return ; + return ; } return { PageStory }; } + +export const parameters = { + viewMode: "story", + previewTabs: { + "storybook/docs/panel": { + hidden: true + } + } +}; diff --git a/stories/login/kcContext.ts b/stories/login/kcContext.ts index 1a598f8a..fca17d6c 100644 --- a/stories/login/kcContext.ts +++ b/stories/login/kcContext.ts @@ -1,7 +1,10 @@ -import { createGetKcContext } from "../../dist/login"; +import { ExtendKcContext } from "../../dist/login"; -export const { getKcContext } = createGetKcContext(); +export type KcContextExtraProperties = {}; -const { kcContext } = getKcContext(); +export type KcContextExtraPropertiesPerPage = {}; -export type KcContext = NonNullable; +export type KcContext = ExtendKcContext< + KcContextExtraProperties, + KcContextExtraPropertiesPerPage +>; diff --git a/stories/login/kcContextMock.ts b/stories/login/kcContextMock.ts new file mode 100644 index 00000000..53efb9c6 --- /dev/null +++ b/stories/login/kcContextMock.ts @@ -0,0 +1,10 @@ +import { createGetKcContextMock } from "../../dist/login"; +import { KcContextExtraProperties, KcContextExtraPropertiesPerPage } from "./kcContext"; + +const kcContextExtraProperties: KcContextExtraProperties = {}; +const kcContextExtraPropertiesPerPage: KcContextExtraPropertiesPerPage = {}; + +export const { getKcContextMock } = createGetKcContextMock({ + kcContextExtraProperties, + kcContextExtraPropertiesPerPage +}); diff --git a/stories/login/pages/Error.stories.tsx b/stories/login/pages/Error.stories.tsx index 479f02fb..19391607 100644 --- a/stories/login/pages/Error.stories.tsx +++ b/stories/login/pages/Error.stories.tsx @@ -1,25 +1,31 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "error.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithAnotherMessage = () => ( - -); +export const Default: Story = { + render: () => +}; + +export const WithAnotherMessage: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/IdpReviewUserProfile.stories.tsx b/stories/login/pages/IdpReviewUserProfile.stories.tsx index 95a9710a..083a4b97 100644 --- a/stories/login/pages/IdpReviewUserProfile.stories.tsx +++ b/stories/login/pages/IdpReviewUserProfile.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "idp-review-user-profile.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/Info.stories.tsx b/stories/login/pages/Info.stories.tsx index fc55afb9..a415cc2f 100644 --- a/stories/login/pages/Info.stories.tsx +++ b/stories/login/pages/Info.stories.tsx @@ -1,81 +1,95 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "info.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ( - -); +type Story = StoryObj; -export const WithWarning = () => ( - -); +export const Default: Story = { + render: () => ( + + ) +}; -export const WithError = () => ( - -); +export const WithWarning: Story = { + render: () => ( + + ) +}; -export const WithSuccess = () => ( - -); +export const WithError: Story = { + render: () => ( + + ) +}; -export const WithLinkBack = () => ( - -); +export const WithSuccess: Story = { + render: () => ( + + ) +}; -export const WithRequiredActions = () => ( - -); +export const WithLinkBack: Story = { + render: () => ( + + ) +}; + +export const WithRequiredActions: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/Login.stories.tsx b/stories/login/pages/Login.stories.tsx index f5725c36..9e4bd2f9 100644 --- a/stories/login/pages/Login.stories.tsx +++ b/stories/login/pages/Login.stories.tsx @@ -1,165 +1,185 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithoutPasswordField = () => ( - -); +export const Default: Story = { + render: () => +}; -export const WithoutRegistration = () => ( - -); +export const WithoutPasswordField: Story = { + render: () => ( + + ) +}; -export const WithoutRememberMe = () => ( - -); +export const WithoutRegistration: Story = { + render: () => ( + + ) +}; -export const WithoutPasswordReset = () => ( - -); +export const WithoutRememberMe: Story = { + render: () => ( + + ) +}; -export const WithEmailAsUsername = () => ( - -); +export const WithoutPasswordReset: Story = { + render: () => ( + + ) +}; -export const WithPresetUsername = () => ( - -); +export const WithEmailAsUsername: Story = { + render: () => ( + + ) +}; -export const WithImmutablePresetUsername = () => ( - -); +export const WithPresetUsername: Story = { + render: () => ( + + ) +}; -export const WithSocialProviders = () => ( - -); +export const WithImmutablePresetUsername: Story = { + render: () => ( + + ) +}; + +export const WithSocialProviders: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/LoginConfigTotp.stories.tsx b/stories/login/pages/LoginConfigTotp.stories.tsx index 4dfed74e..1eede3e6 100644 --- a/stories/login/pages/LoginConfigTotp.stories.tsx +++ b/stories/login/pages/LoginConfigTotp.stories.tsx @@ -1,38 +1,46 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-config-totp.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithManualSetUp = () => ( - -); +export const Default: Story = { + render: () => +}; -export const WithError = () => ( - (fieldName === "totp" ? "Invalid TOTP" : undefined), - exists: (fieldName: string) => fieldName === "totp", - existsError: (fieldName: string) => fieldName === "totp", - printIfExists: (fieldName: string, x: T) => (fieldName === "totp" ? x : undefined) - } - }} - /> -); +export const WithManualSetUp: Story = { + render: () => ( + + ) +}; + +export const WithError: Story = { + render: () => ( + (fieldName === "totp" ? "Invalid TOTP" : undefined), + exists: (fieldName: string) => fieldName === "totp", + existsError: (fieldName: string) => fieldName === "totp", + printIfExists: (fieldName: string, x: T) => (fieldName === "totp" ? x : undefined) + } + }} + /> + ) +}; diff --git a/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx b/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx index ac55ee95..10daa0d9 100644 --- a/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx +++ b/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-oauth2-device-verify-user-code.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginIdpLinkConfirm.stories.tsx b/stories/login/pages/LoginIdpLinkConfirm.stories.tsx index fefe2dc1..55385ccb 100644 --- a/stories/login/pages/LoginIdpLinkConfirm.stories.tsx +++ b/stories/login/pages/LoginIdpLinkConfirm.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-idp-link-confirm.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginIdpLinkEmail.stories.tsx b/stories/login/pages/LoginIdpLinkEmail.stories.tsx index dfc0687b..6302d3d6 100644 --- a/stories/login/pages/LoginIdpLinkEmail.stories.tsx +++ b/stories/login/pages/LoginIdpLinkEmail.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-idp-link-email.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginOauthGrant.stories.tsx b/stories/login/pages/LoginOauthGrant.stories.tsx index 1be34fe4..2f52e937 100644 --- a/stories/login/pages/LoginOauthGrant.stories.tsx +++ b/stories/login/pages/LoginOauthGrant.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-oauth-grant.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginOtp.stories.tsx b/stories/login/pages/LoginOtp.stories.tsx index 67327013..2c7b7607 100644 --- a/stories/login/pages/LoginOtp.stories.tsx +++ b/stories/login/pages/LoginOtp.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-otp.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginPageExpired.stories.tsx b/stories/login/pages/LoginPageExpired.stories.tsx index fe50b58e..de6191fd 100644 --- a/stories/login/pages/LoginPageExpired.stories.tsx +++ b/stories/login/pages/LoginPageExpired.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-page-expired.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginPassword.stories.tsx b/stories/login/pages/LoginPassword.stories.tsx index 9b280672..8e3e17a8 100644 --- a/stories/login/pages/LoginPassword.stories.tsx +++ b/stories/login/pages/LoginPassword.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-password.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginResetPassword.stories.tsx b/stories/login/pages/LoginResetPassword.stories.tsx index 0ccf8eb7..77d3499d 100644 --- a/stories/login/pages/LoginResetPassword.stories.tsx +++ b/stories/login/pages/LoginResetPassword.stories.tsx @@ -1,28 +1,34 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-reset-password.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithEmailAsUsername = () => ( - -); +export const Default: Story = { + render: () => +}; + +export const WithEmailAsUsername: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/LoginUpdatePassword.stories.tsx b/stories/login/pages/LoginUpdatePassword.stories.tsx index c22f8df9..980b74ee 100644 --- a/stories/login/pages/LoginUpdatePassword.stories.tsx +++ b/stories/login/pages/LoginUpdatePassword.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-update-password.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginUpdateProfile.stories.tsx b/stories/login/pages/LoginUpdateProfile.stories.tsx index 36a40573..d5d17355 100644 --- a/stories/login/pages/LoginUpdateProfile.stories.tsx +++ b/stories/login/pages/LoginUpdateProfile.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-update-profile.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LoginUsername.stories.tsx b/stories/login/pages/LoginUsername.stories.tsx index a938748a..33ee4c11 100644 --- a/stories/login/pages/LoginUsername.stories.tsx +++ b/stories/login/pages/LoginUsername.stories.tsx @@ -1,28 +1,34 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-username.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithEmailAsUsername = () => ( - -); +export const Default: Story = { + render: () => +}; + +export const WithEmailAsUsername: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/LoginVerifyEmail.stories.tsx b/stories/login/pages/LoginVerifyEmail.stories.tsx index 735e4eea..ad4b5960 100644 --- a/stories/login/pages/LoginVerifyEmail.stories.tsx +++ b/stories/login/pages/LoginVerifyEmail.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "login-verify-email.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/LogoutConfirm.stories.tsx b/stories/login/pages/LogoutConfirm.stories.tsx index 4944c388..1c514c01 100644 --- a/stories/login/pages/LogoutConfirm.stories.tsx +++ b/stories/login/pages/LogoutConfirm.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "logout-confirm.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/Register.stories.tsx b/stories/login/pages/Register.stories.tsx index b06984e7..7e6f6e5b 100644 --- a/stories/login/pages/Register.stories.tsx +++ b/stories/login/pages/Register.stories.tsx @@ -1,92 +1,106 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "register.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithFieldError = () => ( - fieldName === "email", - exists: (fieldName: string) => fieldName === "email", - get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined), - printIfExists: (fieldName: string, x: T) => (fieldName === "email" ? x : undefined) - } - }} - /> -); +export const Default: Story = { + render: () => +}; -export const WithEmailAsUsername = () => ( - -); +export const WithFieldError: Story = { + render: () => ( + fieldName === "email", + exists: (fieldName: string) => fieldName === "email", + get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined), + printIfExists: (fieldName: string, x: T) => (fieldName === "email" ? x : undefined) + } + }} + /> + ) +}; -export const WithoutPassword = () => ( - -); +export const WithEmailAsUsername: Story = { + render: () => ( + + ) +}; -export const WithRecaptcha = () => ( - -); +export const WithoutPassword: Story = { + render: () => ( + + ) +}; -export const WithPresets = () => ( - -); +export const WithRecaptcha: Story = { + render: () => ( + + ) +}; + +export const WithPresets: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/SamlPostForm.stories.tsx b/stories/login/pages/SamlPostForm.stories.tsx index 45546613..fb212e64 100644 --- a/stories/login/pages/SamlPostForm.stories.tsx +++ b/stories/login/pages/SamlPostForm.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "saml-post-form.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/SelectAuthenticator.stories.tsx b/stories/login/pages/SelectAuthenticator.stories.tsx index d8f920a5..dbaffc97 100644 --- a/stories/login/pages/SelectAuthenticator.stories.tsx +++ b/stories/login/pages/SelectAuthenticator.stories.tsx @@ -1,40 +1,46 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "select-authenticator.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; -export const WithDifferentAuthenticationMethods = () => ( - -); +export const Default: Story = { + render: () => +}; + +export const WithDifferentAuthenticationMethods: Story = { + render: () => ( + + ) +}; diff --git a/stories/login/pages/Terms.stories.tsx b/stories/login/pages/Terms.stories.tsx index 8085e5b5..eb0e012c 100644 --- a/stories/login/pages/Terms.stories.tsx +++ b/stories/login/pages/Terms.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "terms.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/UpdateEmail.stories.tsx b/stories/login/pages/UpdateEmail.stories.tsx index e340728f..9bb38991 100644 --- a/stories/login/pages/UpdateEmail.stories.tsx +++ b/stories/login/pages/UpdateEmail.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "update-email.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +}; diff --git a/stories/login/pages/WebauthnAuthenticate.stories.tsx b/stories/login/pages/WebauthnAuthenticate.stories.tsx index d70a9592..3b1ae2ac 100644 --- a/stories/login/pages/WebauthnAuthenticate.stories.tsx +++ b/stories/login/pages/WebauthnAuthenticate.stories.tsx @@ -1,17 +1,21 @@ import React from "react"; -import type { ComponentMeta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { createPageStory, parameters } from "../createPageStory"; const pageId = "webauthn-authenticate.ftl"; const { PageStory } = createPageStory({ pageId }); -const meta: ComponentMeta = { +const meta = { title: `login/${pageId}`, component: PageStory, parameters -}; +} satisfies Meta; export default meta; -export const Default = () => ; +type Story = StoryObj; + +export const Default: Story = { + render: () => +};