@ory/elements-react 1.0.0-next.29 → 1.0.0-next.30

package/stories/components/login/1fa/custom.stories.tsx

@@ -1,72 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { LoginFlowFromJSON } from "@ory/client-fetch"
-import {
-  OryCard,
-  OryCardContent,
-  OryForm,
-  OryFormGroups,
-  OryFormOidcButtons,
-  OryNodeOidcButtonProps,
-} from "@ory/elements-react"
-import { config } from "../../../utils"
-
-import type { Meta, StoryObj } from "@storybook/react"
-import { Login, LoginFlowContextProps } from "../../../../src/theme/default"
-
-const CustomSocialButton = ({ node }: OryNodeOidcButtonProps) => (
-  <div className="antialiased rounded-buttons border border-interface-background-default-inverted leading-none bg-button-primary-background-default hover:bg-button-primary-background-hover transition-colors text-button-primary-foreground-default hover:text-button-primary-foreground-hover px-4 py-4.5 text-sm font-medium">
-    Custom {node.meta.label?.text}
-  </div>
-)
-
-const CustomComponents = ({ flow, config }: LoginFlowContextProps) => {
-  return (
-    <Login
-      flow={flow}
-      components={{
-        Node: {
-          OidcButton: CustomSocialButton,
-        },
-      }}
-      config={config}
-    >
-      <OryCard>
-        <OryCardContent>
-          <OryForm>
-            <OryFormOidcButtons />
-            <div>
-              Even though the code method is available, we do not show it here
-              with our customization:
-            </div>
-            <OryFormGroups
-              groups={["default", "password" /* "code" */, "webauthn"]}
-            />
-          </OryForm>
-        </OryCardContent>
-      </OryCard>
-    </Login>
-  )
-}
-
-const meta = {
-  title: "Ory Elements/Custom Components",
-  component: CustomComponents,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Login>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const CustomSocialSignInButton: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/all-methods/initial-form.json"),
-    ),
-    config,
-  },
-}

package/stories/components/login/1fa/none.stories.tsx

@@ -1,28 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Login } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/First Factor Login/Methods/None",
-  component: Login,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Login>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const NoMethodsAvailable: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/none/initial-form.json"),
-    ),
-    config,
-  },
-}

package/stories/components/login/1fa/oidc.stories.tsx

@@ -1,143 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { LoginFlow, LoginFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { config } from "../../../utils"
-import { Login } from "../../../../src/theme/default"
-
-const oidcNodes = LoginFlowFromJSON(
-  require("$snapshots/login/1fa/oidc/initial-form.json"),
-)
-
-const providers = [
-  "apple",
-  "auth0",
-  "discord",
-  "facebook",
-  "generic",
-  "github",
-  "gitlab",
-  "google",
-  "linkedin",
-  "microsoft",
-  "slack",
-  "spotify",
-  "yandex",
-]
-
-const listOnly = (providers: string[]): LoginFlow => {
-  return LoginFlowFromJSON({
-    ...oidcNodes,
-    ui: {
-      ...oidcNodes.ui,
-      nodes: oidcNodes.ui.nodes.filter((node) => {
-        if (node.group !== "oidc" || node.attributes.node_type !== "input") {
-          return true
-        }
-
-        return providers.includes(
-          (node.attributes.value as string).toLowerCase(),
-        )
-      }),
-    },
-  })
-}
-
-type LoginProxy = Record<(typeof providers)[number], boolean>
-
-function LoginProxy(providers: LoginProxy) {
-  const flow = providers
-    ? listOnly(Object.keys(providers).filter((key) => providers[key]))
-    : LoginFlowFromJSON(oidcNodes)
-
-  return <Login flow={flow} config={config} />
-}
-
-const meta = {
-  title: "Ory Elements/First Factor Login/Methods/Social Sign In",
-  component: LoginProxy,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof LoginProxy>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const OneSocialButton: Story = {
-  args: {
-    google: true,
-  },
-}
-
-export const TwoSocialButtons: Story = {
-  args: {
-    google: true,
-    x: true,
-  },
-}
-
-export const ThreeSocialButtons: Story = {
-  args: {
-    google: true,
-    x: true,
-    github: true,
-  },
-}
-
-export const FourSocialButtons: Story = {
-  args: {
-    google: true,
-    x: true,
-    github: true,
-    linkedin: true,
-  },
-}
-
-export const FiveSocialButtons: Story = {
-  args: {
-    google: true,
-    x: true,
-    github: true,
-    linkedin: true,
-    auth0: true,
-  },
-}
-
-export const SixSocialButtons: Story = {
-  args: {
-    google: true,
-    x: true,
-    github: true,
-    linkedin: true,
-    auth0: true,
-    apple: true,
-  },
-}
-
-export const SevenSocialButtons: Story = {
-  args: {
-    google: true,
-    x: true,
-    github: true,
-    linkedin: true,
-    auth0: true,
-    apple: true,
-    microsoft: true,
-  },
-}
-
-export const AllGenericButton: Story = {
-  args: {
-    x: true,
-    ...Object.keys(providers).reduce(
-      (acc, key) => {
-        acc[key] = true
-        return acc
-      },
-      {} as Record<(typeof providers)[number], boolean>,
-    ),
-  },
-}

package/stories/components/login/1fa/passkey.stories.ts

@@ -1,28 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Login } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/First Factor Login/Methods/Passkey",
-  component: Login,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Login>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/passkey/initial-form.json"),
-    ),
-    config,
-  },
-}

package/stories/components/login/1fa/password.stories.ts

@@ -1,46 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Login } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/First Factor Login/Methods/Password",
-  component: Login,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Login>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/password/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const ValidationMissingFields: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/password/missing-email.json"),
-    ),
-    config,
-  },
-}
-
-export const ValidationIncorrectCredentials: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/password/wrong-credentials.json"),
-    ),
-    config,
-  },
-}

package/stories/components/login/1fa/webauthn.stories.ts

@@ -1,46 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Login } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/First Factor Login/Methods/WebAuthn",
-  component: Login,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Login>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/webauthn/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const InvalidAccount: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/webauthn/invalid-account.json"),
-    ),
-    config,
-  },
-}
-
-export const ShowTrigger: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/login/1fa/webauthn/show-trigger.json"),
-    ),
-    config,
-  },
-}

package/stories/components/registration/one-step/all-methods.stories.ts

@@ -1,37 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Registration } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/One Step Registration/Methods/Everything",
-  component: Registration,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Registration>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: RegistrationFlowFromJSON(
-      require("$snapshots/registration/one-step/all-methods/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const ValidationError: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/one-step/all-methods/missing-fields.json"),
-    ),
-    config,
-  },
-}

package/stories/components/registration/one-step/password.stories.ts

@@ -1,37 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Registration } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/One Step Registration/Methods/Password",
-  component: Registration,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Registration>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: RegistrationFlowFromJSON(
-      require("$snapshots/registration/one-step/password/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const ValidationError: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/one-step/password/missing-fields.json"),
-    ),
-    config,
-  },
-}

package/stories/components/registration/one-step/webauthn.stories.ts

@@ -1,28 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { RegistrationFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Registration } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/One Step Registration/Methods/WebAuthn",
-  component: Registration,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Registration>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: RegistrationFlowFromJSON(
-      require("$snapshots/registration/one-step/webauthn/initial-form.json"),
-    ),
-    config,
-  },
-}

package/stories/components/registration/two-step/all-methods.stories.ts

@@ -1,55 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Registration } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/Two Step Registration/Methods/Everything",
-  component: Registration,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Registration>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: RegistrationFlowFromJSON(
-      require("$snapshots/registration/two-step/all-methods/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const FirstStepValidationError: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/two-step/all-methods/missing-fields.json"),
-    ),
-    config,
-  },
-}
-
-export const EnterPassword: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/two-step/all-methods/enter-password.json"),
-    ),
-    config,
-  },
-}
-
-export const SecondStepValidationError: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/two-step/all-methods/password-validation-error.json"),
-    ),
-    config,
-  },
-}

package/stories/components/registration/two-step/password.stories.ts

@@ -1,55 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { config } from "../../../utils"
-import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
-import type { Meta, StoryObj } from "@storybook/react"
-import { Registration } from "../../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/Two Step Registration/Methods/Password",
-  component: Registration,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Registration>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: RegistrationFlowFromJSON(
-      require("$snapshots/registration/two-step/password/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const FirstStepValidationError: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/two-step/password/missing-fields.json"),
-    ),
-    config,
-  },
-}
-
-export const EnterPassword: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/two-step/password/enter-password.json"),
-    ),
-    config,
-  },
-}
-
-export const SecondStepValidationError: Story = {
-  args: {
-    flow: LoginFlowFromJSON(
-      require("$snapshots/registration/two-step/password/password-validation-error.json"),
-    ),
-    config,
-  },
-}

package/stories/components/settings/all.stories.ts

@@ -1,46 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { SettingsFlowFromJSON } from "@ory/client-fetch"
-import { Meta, StoryObj } from "@storybook/react"
-import { config } from "../../utils"
-import { Settings } from "../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/Settings/Methods/Everything",
-  component: Settings,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Settings>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: SettingsFlowFromJSON(
-      require("$snapshots/settings/all-methods/initial-form.json"),
-    ),
-    config,
-  },
-}
-
-export const ShowFormChangesSaved: Story = {
-  args: {
-    flow: SettingsFlowFromJSON(
-      require("$snapshots/settings/all-methods/change-password.json"),
-    ),
-    config,
-  },
-}
-
-export const ShowFormTraitValidationError: Story = {
-  args: {
-    flow: SettingsFlowFromJSON(
-      require("$snapshots/settings/all-methods/change-trait.json"),
-    ),
-    config,
-  },
-}

package/stories/components/settings/oidc.stories.ts

@@ -1,28 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { SettingsFlowFromJSON } from "@ory/client-fetch"
-import { Meta, StoryObj } from "@storybook/react"
-import { config } from "../../utils"
-import { Settings } from "../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/Settings/Methods/OIDC",
-  component: Settings,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Settings>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const WithUnlinkProvider: Story = {
-  args: {
-    flow: SettingsFlowFromJSON(
-      require("$snapshots/settings/oidc/with-provider.json"),
-    ),
-    config,
-  },
-}

package/stories/components/settings/passkey.stories.ts

@@ -1,28 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-import { SettingsFlowFromJSON } from "@ory/client-fetch"
-import { Meta, StoryObj } from "@storybook/react"
-import { config } from "../../utils"
-import { Settings } from "../../../src/theme/default"
-
-const meta = {
-  title: "Ory Elements/Settings/Methods/Passkey",
-  component: Settings,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Settings>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const ShowForm: Story = {
-  args: {
-    flow: SettingsFlowFromJSON(
-      require("$snapshots/settings/passkey/initial-form.json"),
-    ),
-    config,
-  },
-}