From 677f39f786ccee39aea055d2d7bf3dcc3a8a19e9 Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Sun, 14 Apr 2024 08:24:20 +0200
Subject: [PATCH] fixed small things in documentation

---
 apps/dev/src/components/custom-button.tsx     | 32 +++++++++++++
 apps/dev/src/components/provider.tsx          |  4 +-
 .../docs/02-customization/02-custom-colors.md |  2 +-
 .../02-customization/03-custom-components.md  | 47 ++++++++++++-------
 docs/docs/03-api-documentation/01-app.md      |  5 ++
 .../stack/src/components-core-joy/button.tsx  |  8 ----
 6 files changed, 70 insertions(+), 28 deletions(-)
 create mode 100644 apps/dev/src/components/custom-button.tsx

diff --git a/apps/dev/src/components/custom-button.tsx b/apps/dev/src/components/custom-button.tsx
new file mode 100644
index 000000000..818c06e51
--- /dev/null
+++ b/apps/dev/src/components/custom-button.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import React from "react";
+import { Button as DefaultButton, useDesign } from "@stackframe/stack";
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof DefaultButton>
+>(({
+  variant = "primary",
+  color,
+  size = "md",
+  loading = false,
+  disabled = false,
+  ...props
+}, ref) => {
+  const { colors } = useDesign();
+
+  return <button
+    style={{
+      padding: ({ sm: 5, md: 10, lg: 15 } as const)[size],
+      backgroundColor: color || ({
+        primary: colors.primaryColor,
+        secondary: colors.secondaryColor,
+      } as const)[variant],
+    }}
+    disabled={loading || disabled}
+    {...props}
+  />;
+});
+
+Button.displayName = "Button";
\ No newline at end of file
diff --git a/apps/dev/src/components/provider.tsx b/apps/dev/src/components/provider.tsx
index c1bbe2c69..e81565dd5 100644
--- a/apps/dev/src/components/provider.tsx
+++ b/apps/dev/src/components/provider.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { CssVarsProvider, getInitColorSchemeScript } from '@mui/joy/styles';
 import CssBaseline from '@mui/joy/CssBaseline';
 import { StackTheme, StackJoyTheme } from "@stackframe/stack";
+import { Button } from "./custom-button";
 
 type UI = 'default' | 'joy';
 const CurrentUIContext = React.createContext<[UI, React.Dispatch<React.SetStateAction<UI>>]>(['default', () => {}]);
@@ -24,8 +25,9 @@ function JoyProvider(props: any) {
 }
 
 function DefaultProvider(props: any) {
+  // theme={{ components: { Button }}}>
   return (
-    <StackTheme>
+    <StackTheme> 
       {props.children}
     </StackTheme>
   );
diff --git a/docs/docs/02-customization/02-custom-colors.md b/docs/docs/02-customization/02-custom-colors.md
index df726aaa1..426e3b56d 100644
--- a/docs/docs/02-customization/02-custom-colors.md
+++ b/docs/docs/02-customization/02-custom-colors.md
@@ -9,7 +9,7 @@ title: Colors & Color Mode
 
 If you want to spend minimal time on styling but still want to align with your brand, you can customize the colors of the Stack app. Colors are stored in React context and can be easily overridden.
 
-There are five variables that you can override:
+There are a few variables that you can override:
 - `primaryColor`: The primary color used for components like button with primary variant.
 - `secondaryColor`: The secondary color used for components like button with secondary variant.
 - `neutralColor`: The color used for separators and borders.
diff --git a/docs/docs/02-customization/03-custom-components.md b/docs/docs/02-customization/03-custom-components.md
index 5ab679a97..3b238f156 100644
--- a/docs/docs/02-customization/03-custom-components.md
+++ b/docs/docs/02-customization/03-custom-components.md
@@ -4,28 +4,33 @@ sidebar_position: 1
 
 # Custom Components
 
-Even though Stack provides beautiful components out of the box, sometimes you might want to achieve coherent visual across your whole website.Stack allow you to replace low-level components like button, input, and text, with your own custom components as long as the props are the same.  The high-level components like sign-in, sign-up, or oauth will automatically use the custom components. This is useful if you want to achieve deep customization. 
+# Custom Components
 
-We currently already implemented the support for MUI Joy for you, so you can use it directly with minimal setup (see [MUI Joy](#mui-joy-setup)). Support of other common libraries like Chakra UI, Daisy UI, and Shadcn are comming soon. If you use the libraries that are currently not supported or you have your own custom components, you can follow customizing components guide below.
+Even though Stack provides beautiful components out of the box, sometimes you might want to achieve a coherent visual style across your entire website. Stack allows you to replace low-level components like buttons, inputs, and text with your own custom components, as long as the props are the same. The high-level components like sign-in, sign-up, or OAuth will automatically use the custom components. This is useful if you want to achieve deep customization.
+
+We currently already implemented support for MUI Joy, so you can use it directly with minimal setup (see [MUI Joy](#mui-joy-setup)). Support for other common libraries like Chakra UI, Daisy UI, and Shadcn is coming soon. If you use libraries that are currently not supported or you have your own custom components, you can follow the customizing components guide below.
 
 ## Customizing Components
 
-Here is an example of how you can customize the button component. For demostration purpose, we will keep the styling minimal. First we will create a new button component with `ButtonProps`. You can use `useDesign` hook to get the colors scheme (see more in [Custom Colors](/docs/customization/custom-colors)). You can also ignore the color scheme if you have a different way to handle colors.
+Here is an example of how you can customize the button component. For demonstration purposes, we will keep the styling minimal. We will create a new button component. You can use the `useDesign` hook to get the color scheme (see more in [Custom Colors](/docs/customization/custom-colors)). You can also ignore the color scheme if you have a different way to handle colors.
 
 ```jsx
 'use client';
 
-import { ButtonProps, useDesign } from "@stackframe/stack";
+import React from "react";
+import { Button as DefaultButton, useDesign } from "@stackframe/stack";
 
-export default function CustomButton({
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof DefaultButton>
+>(({
   variant = "primary",
   color,
   size = "md",
   loading = false,
   disabled = false,
-  children,
   ...props
-} : ButtonProps) {
+}, ref) => {
   const { colors } = useDesign();
 
   return <button
@@ -38,10 +43,10 @@ export default function CustomButton({
     }}
     disabled={loading || disabled}
     {...props}
-  >
-    {children}
-  </button>;
-}
+  />;
+});
+
+Button.displayName = "Button";
 ```
 
 Then you can pass the custom button to the `StackTheme` (if you followed the get started guide, you can find it in your `layout.tsx` file) as follows:
@@ -67,13 +72,19 @@ const theme = {
 Now if you check out your sign-in page, you will see the sign-in button there is using your custom button component. If you import `Button` from `@stackframe/stack`, it will also use your custom button component as well.
 
 Here is a list of low-level components that you can customize, stared ones are the most used and recommended to customize first:
-- Button ⭐
-- Container
-- Separator
-- Input ⭐
-- Label
-- Link
-- Text ⭐
+
+- `Input` ⭐
+- `Button` ⭐
+- `Container`
+- `Separator`
+- `Label`
+- `Link`
+- `Text` ⭐
+- `Popover`, `PopoverTrigger`, `PopoverContent`
+- `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`
+- `Avatar`, `AvatarFallback`, `AvatarImage`
+- `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
+- `Card`, `CardHeader`, `CardContent`, `CardFooter`, `CardDescription`
 
 ## MUI Joy setup
 
diff --git a/docs/docs/03-api-documentation/01-app.md b/docs/docs/03-api-documentation/01-app.md
index 96d84aa16..d7e9057c3 100644
--- a/docs/docs/03-api-documentation/01-app.md
+++ b/docs/docs/03-api-documentation/01-app.md
@@ -94,6 +94,11 @@ export const stackApp = new StackServerApp({
 
     The URL of the forgot password page.
 
+- `account-settings`   
+    Default: `"/handler/account-settings"`
+
+    The URL of the account settings page.
+
 - `handler`    
     Default: `"/handler"`  
 
diff --git a/packages/stack/src/components-core-joy/button.tsx b/packages/stack/src/components-core-joy/button.tsx
index df5557bf2..61e1508c4 100644
--- a/packages/stack/src/components-core-joy/button.tsx
+++ b/packages/stack/src/components-core-joy/button.tsx
@@ -5,14 +5,6 @@ import { Button as DefaultButton } from "../components-core";
 import { Button as JoyButton } from '@mui/joy';
 import Color from "color";
 
-// export default function Button({
-//   variant = "primary",
-//   color,
-//   size = "md",
-//   loading = false,
-//   ...props
-// } : React.ComponentProps<typeof DefaultButton>) {
-
 export const Button = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof DefaultButton>