Components docs (#122)

* added sign in/up/out component docs

* added docs for stack handler

* fixed doc links

* fixed image url

docs/fern/docs.yml

@@ -77,16 +77,29 @@ navigation:
                 path: ./docs/pages/customization/page-examples/sign-up.mdx
   - tab: sdk
     layout: 
-      - section: Next.js SDK
+      - section: Classes
+        contents:
+          - page: CurrentUser
+            path: ./docs/pages/sdk/current-user.mdx
+          - page: StackApp
+            path: ./docs/pages/sdk/stack-app.mdx
+      - section: Hooks
         contents:
-          - page: User
-            path: ./docs/pages/sdk/user.mdx
-          - page: useUser
-            path: ./docs/pages/sdk/use-user.mdx
-          - page: App
-            path: ./docs/pages/sdk/app.mdx
           - page: useStackApp
             path: ./docs/pages/sdk/use-stack-app.mdx
+          - page: useUser
+            path: ./docs/pages/sdk/use-user.mdx
+      - section: Components
+        contents:
+          - page: StackHandler
+            path: ./docs/pages/sdk/stack-handler.mdx
+          - page: SignIn
+            path: ./docs/pages/sdk/sign-in.mdx
+          - page: SignUp
+            path: ./docs/pages/sdk/sign-up.mdx
+          - page: SignOut
+            path: ./docs/pages/sdk/sign-out.mdx
+
   - tab: api
     layout: 
       - api: Client API Reference

docs/fern/docs/pages/concepts/teams.mdx

@@ -9,7 +9,7 @@ To assign users to a default team upon sign-up, activate the corresponding toggl
 
 ## Creating a Team
 
-To create a team, use the `createTeam` method on the `stackServerApp`. Here’s an example:
+To create a team, use the `createTeam` method on the `stackServerApp`. Here's an example:
 
 ```tsx title="Create a Team"
 const team = await stackServerApp.createTeam({

docs/fern/docs/pages/getting-started/overview.mdx

@@ -69,7 +69,7 @@ The user data will update in both the frontend and backend automatically. The up
 
 You also get pages and components for the authentication flow out-of-the-box. This is the sign-in page you get without writing a single line of code:
 
-![Stack sign up page](../imgs/signup-page.png)
+![Stack sign in page](../imgs/sign-in.png)
 
 Notice, there's no branding on our components. We believe we should grow by building the best product, not by forcing our brand onto your users. This means we **rely on you to spread the word about Stack**. If you like what you’re reading, please take a moment to tell one or two of your friends about us.
 

docs/fern/docs/pages/getting-started/production.mdx

@@ -11,7 +11,7 @@ By default, Stack allows all localhost paths as valid callback URLs. This is con
 
 Follow these steps when you're ready to push your application to production:
 
-1. **Add Your Domain**: Navigate to the `Domain & Handlers` tab in the Stack dashboard. If you haven't configured your handler, you can leave it as the default. (Learn more about handlers [here](../sdk/app.mdx)).
+1. **Add Your Domain**: Navigate to the `Domain & Handlers` tab in the Stack dashboard. If you haven't configured your handler, you can leave it as the default. (Learn more about handlers [here](../sdk/stack-app.mdx)).
    
 2. **Disable Localhost Callbacks**: For enhanced security, disable the `Allow all localhost callbacks for development` option.
 

docs/fern/docs/pages/getting-started/setup.mdx

@@ -64,7 +64,7 @@ npm install @stackframe/stack
   
     This will read the environment variables automatically and create a server app that you can later use to access Stack from your Next.js server.
     
-    Check out the [`StackServerApp` documentation](../sdk/app.mdx) to learn more about its other options.
+    Check out the [`StackServerApp` documentation](../sdk/stack-app.mdx) to learn more about its other options.
 
 3. Create a new file in `app/handler/[...stack]/page.tsx` and paste the following code: 
 
@@ -115,9 +115,9 @@ npm install @stackframe/stack
   </Tab>
 </Tabs>
 
-That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup), you will see the Stack sign-up page.
+That's it! Stack is now configured in your Next.js project. If you start your Next.js app with `npm run dev` and navigate to [http://localhost:3000/handler/signin](http://localhost:3000/handler/signin), you will see the Stack sign-up page.
 
-![Stack sign up page](../imgs/signup-page.png)
+![Stack sign in page](../imgs/sign-in.png)
 
 After signing up/in, you will be redirected back to the home page. We will show you how to add useful information to it in the next section. You can also check out the [http://localhost:3000/handler/account-settings](http://localhost:3000/handler/account-settings) page which looks like this:
 

docs/fern/docs/pages/getting-started/users.mdx

@@ -196,7 +196,7 @@ Note the `UserButton` is a component that you normally put in the top right corn
 
 You will now be able to see the new profile page on [http://localhost:3000/profile](http://localhost:3000/profile).
 
-To see more examples of how to use the `User` object, check out the [User API documentation](../sdk/user.mdx).
+To see more examples of how to use the `User` object, check out the [User API documentation](../sdk/current-user.mdx).
 
 ## Custom User Information
 

docs/fern/docs/pages/sdk/current-user.mdx

@@ -12,16 +12,16 @@ You can call `useUser()` or `stackServerApp.getUser()` to get the `CurrentUser`
 
 ### Attributes
 
-- `id`: The user ID. This is the unique identifier of the user.
-- `displayName`: The display name of the user. Can be changed by the user.
-- `primayEmail`: The primary email of the user. Note: this is not unique.
-- `primaryEmailVerified`: Whether the primary email is verified.
-- `profileImageUrl`: The profile image URL of the user.
-- `signedUpAt`: The Date when the user signed up.
-- `authWithEmail`: Whether the user has an email authentication method (magic link or password).
-- `hasPassword`: Whether the user has a password set.
-- `oauthProviders`: The list of OAuth provider ID s the user has connected.
-- `clientMetadata`: The JSON metadata that is visible on the client side. Note that this should not contain information that should be kept private on the server side.
+- `id` (string): The user ID. This is the unique identifier of the user.
+- `displayName` (string | null): The display name of the user. Can be changed by the user.
+- `primayEmail` (string | null): The primary email of the user. Note: this is not unique.
+- `primaryEmailVerified` (boolean): Whether the primary email is verified.
+- `profileImageUrl` (string | null): The profile image URL of the user.
+- `signedUpAt` (Date): The Date when the user signed up.
+- `authWithEmail` (boolean): Whether the user has an email authentication method (magic link or password).
+- `hasPassword` (boolean): Whether the user has a password set.
+- `oauthProviders` (string[]): The list of OAuth provider ID s the user has connected.
+- `clientMetadata` (object): The JSON metadata that is visible on the client side. Note that this should not contain information that should be kept private on the server side.
 
 ### Methods
 

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

@@ -0,0 +1,14 @@
+---
+slug: sign-in
+---
+
+The `SignIn` component is a pre-built UI element that displays all available sign-in methods as configured in the Stack dashboard.
+
+<Note>
+  This component does not redirect a signed-in user. To achieve automatic redirection for signed-in users, you can use the `useUser` hook to check the user's sign-in status and perform the redirection if necessary.
+</Note>
+
+![Sign In Component](../imgs/sign-in.png)
+
+## Props
+- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`.

docs/fern/docs/pages/sdk/sign-out.mdx

@@ -0,0 +1,12 @@
+---
+slug: sign-out
+---
+
+The `SignOut` component automatically signs out the current user when rendered. It can serve as a dedicated sign-out page, ensuring users are signed out as soon as they navigate to it.
+
+<Note>
+  This component does not redirect a not signed-in user. To achieve automatic redirection for not signed-in users, you can use the `useUser` hook to check the user's sign-in status and perform the redirection if necessary.
+</Note>
+
+## Props
+- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`.

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

@@ -0,0 +1,14 @@
+---
+slug: sign-up
+---
+
+The `SignUp` component is a pre-built component that displays all the sign up methods available based on the Stack dashboard configuration.
+
+<Note>
+  This component does not redirect a signed-in user. To achieve automatic redirection for signed-in users, you can use the `useUser` hook to check the user's sign-in status and perform the redirection if necessary.
+</Note>
+
+![Sign Up Component](../imgs/sign-up.png)
+
+## Props
+- `fullPage` (boolean): Determines whether the component should occupy the full page. Default is `false`.

docs/fern/docs/pages/sdk/stack-app.mdx

@@ -1,5 +1,5 @@
 ---
-slug: app
+slug: stack-app
 ---
 
 ## `StackServerApp` and `StackClientApp`

docs/fern/docs/pages/sdk/stack-handler.mdx

@@ -0,0 +1,16 @@
+---
+slug: stack-handler
+---
+
+The `StackHandler` component is designed to manage navigation for all pages under the `/handler/*` route. It serves as a wrapper component that determines which page to display based on the URL path and configurations in the `StackApp`.
+
+<Note>
+  By default, this component will redirect users to appropriate pages. For example, if a user is not signed in and tries to access the account settings page, it will redirect the user to the sign-in page.
+</Note>
+
+## Props
+
+- `app` (StackServerApp): The component relies on the configurations from `app` to determine the correct page URLs and handle redirections.
+- `params` (object): This should be passed down from the parent component to relay any URL parameters.
+- `searchParams` (object): This should be passed down from the parent component to relay any search parameters from the URL.
+- `fullPage` (boolean): Determines whether the component should occupy the full page. The default value is `false`.

docs/fern/docs/pages/sdk/use-stack-app.mdx

@@ -2,7 +2,7 @@
 slug: use-stack-app
 ---
 
-The `useStackApp` hook returns the `StackClientApp` object that you can use to interact with the Stack API. If you want to learn more about the `StackClientApp` object, check out the [App](./app.mdx) documentation.
+The `useStackApp` hook returns the `StackClientApp` object that you can use to interact with the Stack API. If you want to learn more about the `StackClientApp` object, check out the [App](./stack-app.mdx) documentation.
 
 Example:
 

docs/fern/docs/pages/sdk/use-user.mdx

@@ -4,7 +4,7 @@ slug: use-user
 
 `useUser` is a hook that returns the user object if the user is authenticated; otherwise, it returns `null` by default. However, if you pass in `{ or: "redirect" }` or `{ or: "throw" }` as an option, it will redirect to the login page or throw an error respectively when the user is not authenticated.
 
-If you want to learn more about the `User` object, check out the [User](./user.mdx) documentation.
+If you want to learn more about the `User` object, check out the [User](./current-user.mdx) documentation.
 
 ## Default Usage