Patchwork PR: GenerateSDKDocs

docs/fern/docs/pages/sdk/account-settings.mdx

@@ -0,0 +1,23 @@
+---
+title: AccountSettings
+---
+
+# AccountSettings
+
+Renders an account settings component with sections for profile, security, and general settings.
+
+## Props
+
+- `fullPage` (optional): `boolean` - Determines if the component should be rendered as a full page. Default is `false`.
+
+## Example
+
+```tsx
+import { AccountSettings } from '@stackframe/stack';
+
+// Render as a section
+<AccountSettings />
+
+// Render as a full page
+<AccountSettings fullPage={true} />
+```

docs/fern/docs/pages/sdk/auth-page.mdx

@@ -0,0 +1,54 @@
+---
+title: AuthPage
+---
+
+# AuthPage
+
+Renders an authentication page for sign-in or sign-up functionality.
+
+## Props
+
+- `fullPage` (optional): `boolean` - Determines if the component should be rendered in full-page mode. Default is `false`.
+- `type`: `'sign-in' | 'sign-up'` - Specifies whether the page is for sign-in or sign-up.
+- `automaticRedirect` (optional): `boolean` - If `true`, automatically redirects the user after successful authentication.
+- `mockProject` (optional): `object` - Mocks the project configuration for testing purposes.
+  - `config`: `object`
+    - `signUpEnabled`: `boolean`
+    - `credentialEnabled`: `boolean`
+    - `magicLinkEnabled`: `boolean`
+    - `oauthProviders`: `Array<{ id: string }>`
+
+## Example
+
+```tsx
+import { AuthPage } from '@stackframe/stack';
+
+function MyAuthPage() {
+  return (
+    <AuthPage
+      type="sign-in"
+      fullPage={true}
+      automaticRedirect={true}
+    />
+  );
+}
+
+// With mock project for testing
+function TestAuthPage() {
+  const mockProject = {
+    config: {
+      signUpEnabled: true,
+      credentialEnabled: true,
+      magicLinkEnabled: false,
+      oauthProviders: [{ id: 'google' }],
+    },
+  };
+
+  return (
+    <AuthPage
+      type="sign-up"
+      mockProject={mockProject}
+    />
+  );
+}
+```

docs/fern/docs/pages/sdk/credential-sign-in.mdx

@@ -0,0 +1,34 @@
+---
+title: CredentialSignIn
+---
+
+# CredentialSignIn
+
+A component that renders a sign-in form using email and password credentials.
+
+## Props
+
+This component does not accept any props.
+
+## Example
+
+```tsx
+import { CredentialSignIn } from '@stackframe/stack';
+
+function SignInPage() {
+  return (
+    <div>
+      <h1>Sign In</h1>
+      <CredentialSignIn />
+    </div>
+  );
+}
+```
+
+The `CredentialSignIn` component renders a form with the following elements:
+- Email input field
+- Password input field
+- 'Forgot password?' link
+- 'Sign In' submit button
+
+It handles form validation, submission, and displays error messages if the sign-in fails.

docs/fern/docs/pages/sdk/credential-sign-up.mdx

@@ -0,0 +1,34 @@
+---
+title: CredentialSignUp
+---
+
+# CredentialSignUp
+
+A React component that renders a sign-up form for user registration using email and password credentials.
+
+## Props
+
+This component does not accept any props.
+
+## Example
+
+```tsx
+import { CredentialSignUp } from '@stackframe/stack';
+
+function SignUpPage() {
+  return (
+    <div>
+      <h1>Sign Up</h1>
+      <CredentialSignUp />
+    </div>
+  );
+}
+```
+
+The `CredentialSignUp` component renders a form with the following fields:
+- Email input
+- Password input
+- Repeat password input
+- Sign Up button
+
+It handles form validation, error display, and submission automatically. Upon successful sign-up, it uses the `signUpWithCredential` method from the Stack app instance.

docs/fern/docs/pages/sdk/email-verification.mdx

@@ -0,0 +1,32 @@
+---
+title: EmailVerification
+---
+
+# EmailVerification
+
+Renders an email verification component based on the provided verification code and display preferences.
+
+## Props
+
+- `searchParams`: `Record<string, string>` (optional) - An object containing search parameters. It should include a `code` property for the verification code.
+  - `code`: `string` (optional) - The email verification code. Defaults to an empty string if not provided.
+- `fullPage`: `boolean` (optional) - Determines whether to display the component in full-page mode. Defaults to `false`.
+
+## Example
+
+```tsx
+import { EmailVerification } from '@stackframe/stack';
+
+// Basic usage
+<EmailVerification />
+
+// With search params and full-page mode
+<EmailVerification
+  searchParams={{ code: 'abc123' }}
+  fullPage={true}
+/>
+
+// Using URL search params
+const searchParams = new URLSearchParams(window.location.search);
+<EmailVerification searchParams={Object.fromEntries(searchParams)} />
+```

docs/fern/docs/pages/sdk/forgot-password.mdx

@@ -0,0 +1,29 @@
+---
+title: ForgotPassword
+---
+
+# ForgotPassword
+
+A component that renders a password reset interface for users who have forgotten their password.
+
+## Props
+
+- `fullPage` (optional): `boolean` - Determines if the component should be displayed in full-page mode. Default is `false`.
+
+## Example
+
+```tsx
+import { ForgotPassword } from '@stackframe/stack';
+
+function App() {
+  return (
+    <div>
+      {/* Default usage */}
+      <ForgotPassword />
+
+      {/* Full-page mode */}
+      <ForgotPassword fullPage={true} />
+    </div>
+  );
+}
+```

docs/fern/docs/pages/sdk/magic-link-sign-in.mdx

@@ -0,0 +1,28 @@
+---
+title: MagicLinkSignIn
+---
+
+# MagicLinkSignIn
+
+A React component that renders a form for magic link sign-in functionality.
+
+## Props
+
+This component does not accept any props.
+
+## Example
+
+```tsx
+import { MagicLinkSignIn } from '@stackframe/stack';
+
+function SignInPage() {
+  return (
+    <div>
+      <h1>Sign In</h1>
+      <MagicLinkSignIn />
+    </div>
+  );
+}
+```
+
+The `MagicLinkSignIn` component renders a form with an email input field and a submit button. When the form is submitted, it sends a magic link to the provided email address. The component handles form validation, submission, and displays appropriate feedback to the user.

docs/fern/docs/pages/sdk/message-card.mdx

@@ -0,0 +1,45 @@
+---
+title: MessageCard
+---
+
+# MessageCard
+
+A component for displaying a card with a title, optional content, and action buttons.
+
+## Props
+
+- `title`: `string` - The title of the message card.
+- `children` (optional): `React.ReactNode` - The content to be displayed in the card.
+- `fullPage` (optional): `boolean` - Whether to display the card in full-page mode. Default is `false`.
+- `primaryButtonText` (optional): `string` - The text for the primary action button.
+- `primaryAction` (optional): `() => Promise<void> | void` - The function to be called when the primary button is clicked.
+- `secondaryButtonText` (optional): `string` - The text for the secondary action button.
+- `secondaryAction` (optional): `() => Promise<void> | void` - The function to be called when the secondary button is clicked.
+
+## Example
+
+```tsx
+import { MessageCard } from '@stackframe/stack';
+
+function ExampleComponent() {
+  const handlePrimaryAction = () => {
+    console.log('Primary action clicked');
+  };
+
+  const handleSecondaryAction = () => {
+    console.log('Secondary action clicked');
+  };
+
+  return (
+    <MessageCard
+      title="Welcome"
+      primaryButtonText="Get Started"
+      primaryAction={handlePrimaryAction}
+      secondaryButtonText="Learn More"
+      secondaryAction={handleSecondaryAction}
+    >
+      <p>This is a message card example.</p>
+    </MessageCard>
+  );
+}
+```

docs/fern/docs/pages/sdk/oauth-button-group.mdx

@@ -0,0 +1,41 @@
+---
+title: OAuthButtonGroup
+---
+
+# OAuthButtonGroup
+
+Renders a group of OAuth buttons for sign-in or sign-up.
+
+## Props
+
+- `type`: `'sign-in' | 'sign-up'` - Specifies whether the buttons are for sign-in or sign-up.
+- `mockProject` (optional): `{ config: { oauthProviders: { id: string }[] } }` - Mock project configuration for testing purposes.
+
+## Example
+
+```tsx
+import { OAuthButtonGroup } from '@stackframe/stack';
+
+function SignInPage() {
+  return (
+    <div>
+      <h1>Sign In</h1>
+      <OAuthButtonGroup type='sign-in' />
+    </div>
+  );
+}
+
+// With mock project (for testing)
+const mockProject = {
+  config: {
+    oauthProviders: [
+      { id: 'google' },
+      { id: 'github' }
+    ]
+  }
+};
+
+function TestSignUpPage() {
+  return <OAuthButtonGroup type='sign-up' mockProject={mockProject} />;
+}
+```

docs/fern/docs/pages/sdk/oauth-button.mdx

@@ -0,0 +1,27 @@
+---
+title: OAuthButton
+---
+
+# OAuthButton
+
+Renders a customized OAuth button for different providers.
+
+## Props
+
+- `provider`: `string` - The OAuth provider (e.g., 'google', 'github', 'facebook', 'microsoft', 'spotify').
+- `type`: `'sign-in' | 'sign-up'` - Determines whether the button is for sign-in or sign-up.
+
+## Example
+
+```tsx
+import { OAuthButton } from '@stackframe/stack';
+
+function LoginPage() {
+  return (
+    <div>
+      <OAuthButton provider="google" type="sign-in" />
+      <OAuthButton provider="github" type="sign-up" />
+    </div>
+  );
+}
+```