fix!: improve component naming

.prettierignore

@@ -10,3 +10,4 @@ CONTRIBUTING.md
 docs
 .next
 .cache
+api-report/*

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

@@ -1,4 +1,3 @@
-import { IntlProvider } from "@ory/elements-react"
 import type { Decorator, Preview } from "@storybook/react"
 import { chromaticModes } from "./modes"
 import "@ory/elements-react/theme/styles.css"
@@ -28,11 +27,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,18 +1,18 @@
+import { LoginFlowFromJSON } from "@ory/client-fetch"
 import {
-  HeadlessSocialButtonProps,
   OryCard,
   OryCardContent,
   OryForm,
   OryFormGroups,
   OryFormSocialButtons,
+  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"
@@ -22,12 +22,14 @@ 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}
     >

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

packages/elements-react/api-report/elements-react-theme.api.json

@@ -184,7 +184,7 @@
             {
               "kind": "Reference",
               "text": "OryCardProps",
-              "canonicalReference": "@ory/elements-react!~OryCardProps:type"
+              "canonicalReference": "@ory/elements-react!~OryCardRootProps:type"
             },
             {
               "kind": "Content",
@@ -377,8 +377,8 @@
             },
             {
               "kind": "Reference",
-              "text": "HeadlessFormProps",
-              "canonicalReference": "@ory/elements-react!~HeadlessFormProps:type"
+              "text": "OryFormRootProps",
+              "canonicalReference": "@ory/elements-react!~OryFormRootProps:type"
             },
             {
               "kind": "Content",
@@ -428,8 +428,8 @@
             },
             {
               "kind": "Reference",
-              "text": "HeadlessMessageProps",
-              "canonicalReference": "@ory/elements-react!~HeadlessMessageProps:type"
+              "text": "OryMessageContentProps",
+              "canonicalReference": "@ory/elements-react!~OryMessageContentProps:type"
             },
             {
               "kind": "Content",
@@ -730,21 +730,12 @@
             },
             {
               "kind": "Reference",
-              "text": "Partial",
-              "canonicalReference": "!Partial:type"
+              "text": "OryFlowComponentOverrides",
+              "canonicalReference": "@ory/elements-react!~OryFlowComponentOverrides:type"
             },
             {
               "kind": "Content",
-              "text": "<"
-            },
-            {
-              "kind": "Reference",
-              "text": "OryFlowComponents",
-              "canonicalReference": "@ory/elements-react!~OryFlowComponents:type"
-            },
-            {
-              "kind": "Content",
-              "text": ">;\n    config: "
+              "text": ";\n    config: "
             },
             {
               "kind": "Reference",
@@ -765,7 +756,7 @@
           "name": "LoginFlowContextProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 10
+            "endIndex": 8
           }
         },
         {

packages/elements-react/api-report/elements-react-theme.api.md

@@ -27,10 +27,10 @@ import { UiNodeTextAttributes } from '@ory/client-fetch';
 import { UiText } from '@ory/client-fetch';
 import { VerificationFlow } from '@ory/client-fetch';
 
-// Warning: (ae-forgotten-export) The symbol "OryCardProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function DefaultCard({ children }: OryCardProps): react_jsx_runtime.JSX.Element;
+export function DefaultCard({ children }: OryCardRootProps): react_jsx_runtime.JSX.Element;
 
 // Warning: (ae-forgotten-export) The symbol "OryCardContentProps" needs to be exported by the entry point index.d.ts
 //
@@ -46,15 +46,15 @@ export function DefaultCardHeader(): react_jsx_runtime.JSX.Element;
 // @public (undocumented)
 export function DefaultCardLogo(): react_jsx_runtime.JSX.Element;
 
-// Warning: (ae-forgotten-export) The symbol "HeadlessFormProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "OryFormRootProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren<HeadlessFormProps>): react_jsx_runtime.JSX.Element;
+export function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren<OryFormRootProps>): react_jsx_runtime.JSX.Element;
 
-// Warning: (ae-forgotten-export) The symbol "HeadlessMessageProps" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "OryMessageContentProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export function DefaultMessage({ message }: HeadlessMessageProps): react_jsx_runtime.JSX.Element;
+export function DefaultMessage({ message }: OryMessageContentProps): react_jsx_runtime.JSX.Element;
 
 // @public (undocumented)
 export function DefaultMessageContainer({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element | null;
@@ -76,7 +76,7 @@ export function Login({ flow, config, children, components: flowOverrideComponen
 // @public (undocumented)
 export type LoginFlowContextProps = {
     flow: LoginFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 
@@ -122,6 +122,7 @@ export type VerificationFlowContextProps = {
 //
 // dist/theme/default/index.d.ts:25:5 - (ae-forgotten-export) The symbol "OryFlowComponents" needs to be exported by the entry point index.d.ts
 // dist/theme/default/index.d.ts:26:5 - (ae-forgotten-export) The symbol "OryClientConfiguration" needs to be exported by the entry point index.d.ts
+// dist/theme/default/index.d.ts:32:5 - (ae-forgotten-export) The symbol "OryFlowComponentOverrides" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)