fix(elements)!: fully document and streamline component naming

GitOrigin-RevId: 3cfd54446934c3070bae704ccc5c5c4560b83017

Author: jonas-jonas

eslint.config.mjs

@@ -80,7 +80,8 @@ const config = tseslint.config([
     },
 
     rules: {
-      "tsdoc/syntax": "warn",
+      // TODO: https://github.com/microsoft/tsdoc/issues/374 (and specifically https://github.com/microsoft/tsdoc/issues/374#issuecomment-2336536959)
+      "tsdoc/syntax": "off",
       "formatjs/no-offset": "error",
       "@typescript-eslint/no-floating-promises": "error",
       // The legacy elements is written with lots of any types

examples/nextjs-app-router/app/auth/layout.tsx

@@ -1,7 +1,13 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { DefaultCardLayout } from "@ory/elements-react/theme"
 import "@ory/elements-react/theme/styles.css"
+import { PropsWithChildren } from "react"
 
-export default DefaultCardLayout
+export default function DefaultCardLayout({ children }: PropsWithChildren) {
+  return (
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
+      {children}
+    </main>
+  )
+}

examples/nextjs-pages-router/pages/auth/login.tsx

@@ -1,9 +1,9 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 "use client"
-import { DefaultCardLayout, Login } from "@ory/elements-react/theme"
-import { useLoginFlow } from "@ory/nextjs/pages"
+import { Login } from "@ory/elements-react/theme"
 import "@ory/elements-react/theme/styles.css"
+import { useLoginFlow } from "@ory/nextjs/pages"
 
 import config from "@/ory.config"
 
@@ -15,14 +15,14 @@ export default function LoginPage() {
   }
 
   return (
-    <DefaultCardLayout>
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
       <Login
         flow={flow}
         config={config}
         components={{
           Card: {},
         }}
       />
-    </DefaultCardLayout>
+    </main>
   )
 }

examples/nextjs-pages-router/pages/auth/recovery.tsx

@@ -1,9 +1,9 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 "use client"
-import { DefaultCardLayout, Recovery } from "@ory/elements-react/theme"
-import { useRecoveryFlow } from "@ory/nextjs/pages"
+import { Recovery } from "@ory/elements-react/theme"
 import "@ory/elements-react/theme/styles.css"
+import { useRecoveryFlow } from "@ory/nextjs/pages"
 
 import config from "@/ory.config"
 
@@ -15,14 +15,14 @@ export default function RecoveryPage() {
   }
 
   return (
-    <DefaultCardLayout>
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
       <Recovery
         flow={flow}
         config={config}
         components={{
           Card: {},
         }}
       />
-    </DefaultCardLayout>
+    </main>
   )
 }

examples/nextjs-pages-router/pages/auth/registration.tsx

@@ -1,9 +1,9 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 "use client"
-import { DefaultCardLayout, Registration } from "@ory/elements-react/theme"
-import { useRegistrationFlow } from "@ory/nextjs/pages"
+import { Registration } from "@ory/elements-react/theme"
 import "@ory/elements-react/theme/styles.css"
+import { useRegistrationFlow } from "@ory/nextjs/pages"
 
 import config from "@/ory.config"
 
@@ -15,14 +15,14 @@ export default function RegistrationPage() {
   }
 
   return (
-    <DefaultCardLayout>
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
       <Registration
         flow={flow}
         config={config}
         components={{
           Card: {},
         }}
       />
-    </DefaultCardLayout>
+    </main>
   )
 }

examples/nextjs-pages-router/pages/auth/verification.tsx

@@ -1,7 +1,7 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 "use client"
-import { DefaultCardLayout, Verification } from "@ory/elements-react/theme"
+import { Verification } from "@ory/elements-react/theme"
 import "@ory/elements-react/theme/styles.css"
 import { useVerificationFlow } from "@ory/nextjs/pages"
 
@@ -15,14 +15,14 @@ export default function VerificationPage() {
   }
 
   return (
-    <DefaultCardLayout>
+    <main className="p-4 pb-8 flex items-center justify-center flex-col gap-8 min-h-screen">
       <Verification
         flow={flow}
         config={config}
         components={{
           Card: {},
         }}
       />
-    </DefaultCardLayout>
+    </main>
   )
 }