Feat/v1-prep (#15)

RockiRider · Feb 25, 2024 · 9e0b577 · 9e0b577
1 parent 73f4cf7
commit 9e0b577
Show file tree

Hide file tree

Showing 31 changed files with 16,913 additions and 8,596 deletions.
diff --git a/apps/docs/next-sitemap.config.js b/apps/docs/next-sitemap.config.js
@@ -3,6 +3,28 @@ module.exports = {
   siteUrl: "https://mui-sonner.tsotne.co.uk",
   generateRobotsTxt: true, // (optional)
   generateIndexSitemap: false,
-  sitemapSize: 1000,
+  sitemapSize: 100,
   output: "export",
+  additionalPaths: async () => [
+    {
+      loc: "/",
+      priority: "1.0",
+    },
+    {
+      loc: "/getting-started",
+      priority: 0.9,
+    },
+    {
+      loc: "/toast",
+      priority: 0.7,
+    },
+    {
+      loc: "/toaster",
+      priority: 0.7,
+    },
+    {
+      loc: "/styling",
+      priority: 0.7,
+    },
+  ],
 };
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
@@ -1,10 +1,18 @@
 /** @type {import('next').NextConfig} */
 
-module.exports = {
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.jsx",
+});
+
+module.exports = withNextra({
   reactStrictMode: true,
   output: "export",
   transpilePackages: ["mui-sonner"],
   images: {
     unoptimized: true,
   },
-};
+});
+
+// If you have other Next.js configurations, you can pass them as the parameter:
+// module.exports = withNextra({ /* other next.js config */ })
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -22,6 +22,8 @@
         "mui-sonner": "*",
         "next": "latest",
         "next-sitemap": "^4.2.3",
+        "nextra": "^2.13.3",
+        "nextra-theme-docs": "^2.13.3",
         "react": "latest",
         "react-dom": "latest"
     },

diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
@@ -3,18 +3,17 @@ import { AppProps } from "next/app";
 import { AppCacheProvider } from "@mui/material-nextjs/v14-pagesRouter";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
-import getLPTheme from "@styles/dark";
+import getProTheme from "@styles/themes/pro";
+import defaultTheme from "@styles/themes/default";
 import { PaletteMode } from "@mui/material";
 import { useState } from "react";
 import CustomToaster from "@components/CustomToaster";
 
-const defaultTheme = createTheme({});
-
 export default function MyApp(props: AppProps) {
   const { Component, pageProps } = props;
   const [mode, setMode] = useState<PaletteMode>("dark");
   const [showCustomTheme, setShowCustomTheme] = useState(true);
-  const customTheme = createTheme(getLPTheme(mode));
+  const customTheme = createTheme(getProTheme(mode));
 
   const toggleColorMode = () => {
     setMode((prev) => (prev === "dark" ? "light" : "dark"));

diff --git a/apps/docs/pages/_meta.json b/apps/docs/pages/_meta.json
@@ -0,0 +1,27 @@
+{
+    "getting-started": {
+      "title": "Getting Started",
+      "href": "/getting-started"
+
+    },
+    "-- API": {
+      "type": "separator",
+      "title": "API"
+    },
+    "toast": {
+      "title": "toast()",
+      "href": "/toast"
+    },
+    "toaster": {
+      "title": "Toaster",
+      "href": "/toaster"
+    },
+    "-- More": {
+      "type": "separator",
+      "title": "Guides"
+    },
+    "styling": {
+      "title": "Styling",
+      "href": "/styling"
+    }
+  }
diff --git a/apps/docs/pages/getting-started.mdx b/apps/docs/pages/getting-started.mdx
@@ -0,0 +1,72 @@
+import { Tab, Tabs, Cards, Card, Steps } from "nextra-theme-docs";
+import { toast } from "mui-sonner";
+
+# Getting Started
+
+MUI Sonner is an opinionated toast component for MUI & React.
+
+<Steps>
+### Install
+
+<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
+  <Tab>
+    ```bash
+    pnpm i mui-sonner
+    ```
+
+  </Tab>
+  <Tab>
+    ```bash
+    npm i mui-sonner
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    yarn add mui-sonner
+    ```
+  </Tab>
+    <Tab>
+    ```bash
+    bun add mui-sonner
+    ```
+  </Tab>
+</Tabs>
+
+### Add Toaster to your app
+
+It can be placed anywhere, but it's recommended to place higher up the component tree.
+
+```tsx
+import { Toaster } from "mui-sonner";
+
+export default function App({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}
+```
+
+### Render a toast
+
+```tsx
+import { toast } from "mui-sonner";
+
+const MyToast = () => {
+    return (
+    <button onClick={() => toast("Hello World")}>
+      Render my toast
+    </button>
+    )
+}
+```
+
+</Steps>
diff --git a/apps/docs/pages/styling.mdx b/apps/docs/pages/styling.mdx
@@ -0,0 +1,112 @@
+import { Callout } from 'nextra/components'
+
+# Styling
+
+Styling can be done in a few different ways. We will run through all the options here.
+
+## Styling with the MUI Theme
+Styling can be done globally via the MUI theme. This way every toast will have the same styling.
+
+MUI lets you target the different variants of the toast, so you can style them differently. 
+
+For example you can style all the filled success toasts to have a red background color.
+
+```jsx
+const theme = createTheme({
+    components: {
+        MuiAlert: {
+            styleOverrides: {
+                filledSuccess: {
+                    backgroundColor: "red",
+                },
+            },
+        },
+    },
+});
+```
+
+<Callout type="warning" emoji="⚠️">This will change the styling of all the `Alert` components in your app, not just the toasts.</Callout>
+
+Check out the [MUI documentation](https://mui.com/customization/theming/) for more information on theming.
+- [Alert](https://mui.com/material-ui/api/alert/)
+- [AlertTitle](https://mui.com/material-ui/api/alert-title/)
+
+## Styling with the Toaster
+
+Styling can be done globally via `toastOptions`, this way every toast will have the same styling. 
+- You can style the `Alert` component for all toasts
+- You can style the `CloseButton` `ActionButton` and `Description` for all different types of toasts.
+
+```jsx
+<Toaster
+  toastOptions={{
+    alertSx: {
+        backgroundColor: "red",
+    },
+    success:{
+        closeButtonSx: {
+            color: "red",
+        }
+        actionButtonSx: {
+            color: "red",
+        }
+        descriptionSx: {
+            color: "red",
+        }  
+    },
+    loading:{
+        closeButtonSx: {
+            color: "red",
+        }
+        actionButtonSx: {
+            color: "red",
+        }
+        descriptionSx: {
+            color: "red",
+        }  
+    }
+    // ... and so on
+  }}
+/>
+```
+## Styling with the toast
+You can also use the same props when calling `toast` to style a specific toast.
+
+```jsx
+toast('Hello World', {
+});
+```
+
+## Changing Icons
+
+You can change the default icons using the `toasterOptions` on the `Toaster` component. This will change the default icons for all toasts, for their respective toast types.
+
+```jsx
+<Toaster
+  toasterOptions={{
+    success: {
+        icon: <SuccessIcon/>
+    },
+    info: {
+        icon: <InfoIcon/>
+    },
+    // ... and so on
+  }}
+/>
+```
+
+You can also set an icon for each toast:
+
+```jsx
+toast('Hello World', {
+  icon: <Icon />,
+});
+```
+
+You can also set a toast to hide the icon:
+
+```jsx
+toast('Hello World', {
+  hideIcon: true,
+});
+```