Merge pull request #1 from RockiRider/feat/add-tests

Feat/add tests
RockiRider · Feb 16, 2024 · a54c9d0 · a54c9d0
2 parents 954e821 + f58ca4d
commit a54c9d0
Show file tree

Hide file tree

Showing 25 changed files with 1,341 additions and 99 deletions.
diff --git a/.github/workflows/CODEOWNERS b/.github/workflows/CODEOWNERS
@@ -0,0 +1,3 @@
+#GitHub CODEOWNERS
+
+* @RockiRider
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,66 @@
+name: "Release"
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build_and_test:
+    name: "Build and Test"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: 
+          node-version: 20
+      - run: npm ci
+      - run: npm run build
+      - name: Archive production artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: package-dist
+          retention-days: 30
+          path: packages/mui-sonner/dist
+
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: build_and_test
+    name: "Publish"
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - name: Download production artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: package-dist
+          path: packages/mui-sonner/dist
+
+      - uses: JS-DevTools/npm-publish@v3
+        id: publish
+        with:
+          token: ${{ secrets.NPM_AUTH_TOKEN }}
+          package: packages/mui-sonner
+
+      - name: Bump version and push tag
+        if: ${{ steps.publish.outputs.type }}
+        id: tag_version
+        uses: mathieudutour/[email protected]
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          custom_tag: v${{steps.publish.outputs.version}}
+          tag_prefix: vite-plugin-posthog_
+
+      - name: Create a GitHub release
+        if: ${{ steps.publish.outputs.type }}
+        uses: ncipollo/release-action@v1
+        with:
+          tag: ${{ steps.tag_version.outputs.new_tag }}
+          name: ${{ steps.tag_version.outputs.new_tag }}
+          body: ${{ steps.tag_version.outputs.changelog }}
+          generateReleaseNotes: true
diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 # MUI-Sonner
 
-This is a Monorepo for the MUI-Sonner project. You can find the package inside the `packages` folder.
+This is a Monorepo for the mui-sonner project. You can find the package inside the `packages` folder.
+
+Todo
 
-- Todo
 - [] Close Button
+- [] Promise Button
 - [] SX Props to override button styles
 - Cleanup some types
diff --git a/apps/example-next/package.json b/apps/example-next/package.json
@@ -5,7 +5,7 @@
     "scripts": {
         "dev": "next dev",
         "build": "next build",
-        "start": "next start",
+        "preview": "next start -p 3000",
         "lint": "next lint",
         "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
     },

diff --git a/apps/example-next/pages/_app.tsx b/apps/example-next/pages/_app.tsx
@@ -1,13 +1,18 @@
 import Head from "next/head";
 import { AppProps } from "next/app";
 import { AppCacheProvider } from "@mui/material-nextjs/v14-pagesRouter";
-import { ThemeProvider } from "@mui/material/styles";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
-import theme from "../src/theme";
 import { Toaster } from "mui-sonner";
+import getLPTheme from "@styles/dark";
+import { PaletteMode } from "@mui/material";
+import { useState } from "react";
 
 export default function MyApp(props: AppProps) {
   const { Component, pageProps } = props;
+  const [mode, setMode] = useState<PaletteMode>("dark");
+  const theme = createTheme(getLPTheme(mode));
+
   return (
     <AppCacheProvider {...props}>
       <Head>

diff --git a/apps/example-next/pages/_document.tsx b/apps/example-next/pages/_document.tsx
@@ -11,16 +11,14 @@ import {
   DocumentHeadTagsProps,
   documentGetInitialProps,
 } from "@mui/material-nextjs/v14-pagesRouter";
-import theme, { roboto } from "../src/theme";
 
 export default function MyDocument(
   props: DocumentProps & DocumentHeadTagsProps
 ) {
   return (
-    <Html lang="en" className={roboto.className}>
+    <Html lang="en">
       <Head>
         {/* PWA primary color */}
-        <meta name="theme-color" content={theme.palette.primary.main} />
         <link rel="shortcut icon" href="/favicon.ico" />
         <meta name="emotion-insertion-point" content="" />
         <DocumentHeadTags {...props} />

diff --git a/apps/example-next/pages/index.tsx b/apps/example-next/pages/index.tsx
@@ -3,8 +3,25 @@ import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { Button, Stack } from "@mui/material";
 import { toast } from "mui-sonner";
+import CloseIcon from "@mui/icons-material/Close";
 
 export default function Home() {
+  const successPromise = () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve("Success");
+      }, 2000);
+    });
+  };
+
+  const errorPromise = () => {
+    return new Promise((_, reject) => {
+      setTimeout(() => {
+        reject("Error");
+      }, 2000);
+    });
+  };
+
   return (
     <Container maxWidth="lg">
       <Box
@@ -21,23 +38,40 @@ export default function Home() {
         </Typography>
       </Box>
       <Stack alignItems="center" gap={5}>
-        <Button variant="contained" onClick={() => toast.loading("Saving")}>
-          Loading
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast.loading("You have a new message!", {
+              closeIcon: <CloseIcon fontSize="small" />,
+            })
+          }
+        >
+          Info
         </Button>
-        <Button variant="contained" onClick={() => toast.success("Success")}>
+        <Button
+          variant="contained"
+          onClick={() => toast.success("Successfully updated!")}
+        >
           Success
         </Button>
         <Button
           variant="contained"
           onClick={() =>
-            toast.error("Error", {
-              variant: "outlined",
+            toast.error("Sorry something went wrong!", {
+              variant: "filled",
             })
           }
         >
           Error
         </Button>
         <Button
+          variant="contained"
+          onClick={() => toast.warning("You have unsaved changes!")}
+        >
+          Warning
+        </Button>
+        <Button
+          variant="contained"
           onClick={() => {
             toast("Save Successful", {
               severity: "success",
@@ -53,6 +87,45 @@ export default function Home() {
         >
           Custom
         </Button>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast.promise(successPromise, {
+              loading: "Loading...",
+              success: "Loaded",
+            })
+          }
+        >
+          Promise Success
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() =>
+            toast.promise(errorPromise, {
+              loading: "Loading...",
+              error: "Error",
+            })
+          }
+        >
+          Promise Error
+        </Button>
+        <Button
+          variant="contained"
+          onClick={() => {
+            toast.loading("Loading...", {
+              id: "loader",
+            });
+            setTimeout(() => {
+              toast.dismiss("loader");
+            }, 1000);
+          }}
+        >
+          Loading
+        </Button>
+
+        <Button variant="contained" onClick={() => toast.dismiss()}>
+          Dismiss all
+        </Button>
       </Stack>
     </Container>
   );

diff --git a/apps/example-next/src/styles/dark/colors.ts b/apps/example-next/src/styles/dark/colors.ts
@@ -0,0 +1,51 @@
+export const brand = {
+  50: "#F0F7FF",
+  100: "#CEE5FD",
+  200: "#9CCCFC",
+  300: "#55A6F6",
+  400: "#0A66C2",
+  500: "#0959AA",
+  600: "#064079",
+  700: "#033363",
+  800: "#02294F",
+  900: "#021F3B",
+};
+
+export const secondary = {
+  50: "#F9F0FF",
+  100: "#E9CEFD",
+  200: "#D49CFC",
+  300: "#B355F6",
+  400: "#750AC2",
+  500: "#6709AA",
+  600: "#490679",
+  700: "#3B0363",
+  800: "#2F024F",
+  900: "#23023B",
+};
+
+export const gray = {
+  50: "#FBFCFE",
+  100: "#EAF0F5",
+  200: "#D6E2EB",
+  300: "#BFCCD9",
+  400: "#94A6B8",
+  500: "#5B6B7C",
+  600: "#4C5967",
+  700: "#364049",
+  800: "#131B20",
+  900: "#090E10",
+};
+
+export const green = {
+  50: "#F6FEF6",
+  100: "#E3FBE3",
+  200: "#C7F7C7",
+  300: "#A1E8A1",
+  400: "#51BC51",
+  500: "#1F7A1F",
+  600: "#136C13",
+  700: "#0A470A",
+  800: "#042F04",
+  900: "#021D02",
+};