fix!: improve component naming (#218)

.prettierignore

@@ -13,4 +13,4 @@ docs
 
 # Generated files
 CHANGELOG.md
-**/api-report/*
+**/api-report/*

packages/elements-react-stories/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { IntlProvider } from "@ory/elements-react"
 import type { Decorator, Preview } from "@storybook/react"
 import { chromaticModes } from "./modes"
 import "@ory/elements-react/theme/styles.css"
@@ -31,11 +30,8 @@ const preview: Preview = {
 const withI18next: Decorator = (Story, context) => {
   const { locale } = context.globals
 
-  return (
-    <IntlProvider locale={locale} defaultLocale="en">
-      <Story />
-    </IntlProvider>
-  )
+  // TODO: this needs a refactor, because it doesn't pass the locale to the Ory Provider at the moment.
+  return <Story args={{ locale }} />
 }
 
 // export decorators for storybook to wrap your stories in

packages/elements-react-stories/src/elements-react/components/login/1fa/all.stories.ts

@@ -3,7 +3,7 @@
 
 import { LoginFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Login } from "../../../pages/login"
+import { Login } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 
 const meta = {

packages/elements-react-stories/src/elements-react/components/login/1fa/code.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Login } from "../../../pages/login"
+import { Login } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/login/1fa/custom.stories.tsx

@@ -1,21 +1,21 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
+import { LoginFlowFromJSON } from "@ory/client-fetch"
 import {
-  HeadlessSocialButtonProps,
   OryCard,
   OryCardContent,
   OryForm,
   OryFormGroups,
-  OryFormSocialButtons,
+  OryFormOidcButtons,
+  OryNodeOidcButtonProps,
 } from "@ory/elements-react"
-import { FlowContextProps, Login } from "../../../pages/login"
+import { Login, LoginFlowContextProps } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
-import { LoginFlowFromJSON } from "@ory/client-fetch"
 
 import type { Meta, StoryObj } from "@storybook/react"
 
-const CustomSocialButton = ({ node }: HeadlessSocialButtonProps) => (
+const CustomSocialButton = ({ node }: OryNodeOidcButtonProps) => (
   <div
     className={
       "antialiased rounded-border-radius-buttons border border-transparent gap-3 leading-none bg-button-primary-bg-default hover:bg-button-primary-bg-hover transition-colors text-button-primary-fg-default hover:text-button-primary-fg-hover px-4 py-4.5 text-sm font-medium"
@@ -25,19 +25,21 @@ const CustomSocialButton = ({ node }: HeadlessSocialButtonProps) => (
   </div>
 )
 
-const CustomComponents = ({ flow, config }: FlowContextProps) => {
+const CustomComponents = ({ flow, config }: LoginFlowContextProps) => {
   return (
     <Login
       flow={flow}
       components={{
-        SocialButton: CustomSocialButton,
+        Node: {
+          OidcButton: CustomSocialButton,
+        },
       }}
       config={config}
     >
       <OryCard>
         <OryCardContent>
           <OryForm>
-            <OryFormSocialButtons />
+            <OryFormOidcButtons />
             <div>
               Even though the code method is available, we do not show it here
               with our customization:

packages/elements-react-stories/src/elements-react/components/login/1fa/passkey.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Login } from "../../../pages/login"
+import { Login } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/login/1fa/password.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Login } from "../../../pages/login"
+import { Login } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/registration/one-step/all-methods.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Registration } from "../../../pages/registration"
+import { Registration } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/registration/one-step/password.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Registration } from "../../../pages/registration"
+import { Registration } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/registration/one-step/webauthn.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Registration } from "../../../pages/registration"
+import { Registration } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { RegistrationFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/registration/two-step/all-methods.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Registration } from "../../../pages/registration"
+import { Registration } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react-stories/src/elements-react/components/registration/two-step/password.stories.ts

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { Registration } from "../../../pages/registration"
+import { Registration } from "@ory/elements-react/theme"
 import { config } from "../../../utils"
 import { LoginFlowFromJSON, RegistrationFlowFromJSON } from "@ory/client-fetch"
 import type { Meta, StoryObj } from "@storybook/react"

packages/elements-react/.gitignore

@@ -1,5 +1,4 @@
 playwright/.cache/
 playwright-report/*
 .last-run.json
-
-api-report/temp
+api-report/temp