umwd-components 0.1.232 → 0.1.234

package/dist/cjs/components/LogoutButton.js

@@ -0,0 +1,35 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var authActions = require('../data/actions/auth-actions.js');
+var material = require('@mui/material');
+var LogoutIcon = require('@mui/icons-material/Logout');
+
+//
+function LogoutButton(_ref) {
+  let {
+    text = "Log out",
+    variant = "text"
+  } = _ref;
+  return /*#__PURE__*/React.createElement("form", {
+    action: authActions.logoutAction
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    type: "submit"
+    // aria-disabled={status.pending || loading}
+    // disabled={status.pending || loading}
+    ,
+    startIcon: /*#__PURE__*/React.createElement(LogoutIcon, null),
+    variant: variant
+  }, text));
+}
+
+exports.default = LogoutButton;

package/dist/cjs/components/dashboard/SideNav.js

@@ -182,7 +182,13 @@ function SideNav(_ref) {
     }
   }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
     onClick: handleDrawerClose
-  }, theme.direction === "rtl" ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, null) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, null))), /*#__PURE__*/React__namespace.createElement(material.Divider, null), sections.map((section, index) => /*#__PURE__*/React__namespace.createElement(Link, {
+  }, theme.direction === "rtl" ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, null) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, null))), /*#__PURE__*/React__namespace.createElement(material.Divider, null), sections.map((section, index) => /*#__PURE__*/React__namespace.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(Link, {
     key: index,
     href: section.link,
     passHref: true
@@ -194,11 +200,30 @@ function SideNav(_ref) {
       p: 1,
       cursor: "pointer"
     }
-  }, section.icon, open && /*#__PURE__*/React__namespace.createElement(material.Typography, {
+  }, section.icon, !open && section.subSections && /*#__PURE__*/React__namespace.createElement(material.Typography, null, "..."), open && /*#__PURE__*/React__namespace.createElement(material.Typography, {
     sx: {
       pl: 2
     }
-  }, section.title))))), /*#__PURE__*/React__namespace.createElement(material.Box, {
+  }, section.title))), section.subSections && open && section.subSections.map((subSection, index) => {
+    return /*#__PURE__*/React__namespace.createElement(Link, {
+      key: index,
+      href: subSection.link,
+      passHref: true
+    }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        p: 1,
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+      variant: "body2",
+      sx: {
+        pl: 4
+      }
+    }, subSection.title)));
+  })))), /*#__PURE__*/React__namespace.createElement(material.Box, {
     component: "main",
     sx: {
       flexGrow: 1,

package/dist/cjs/data/actions/auth-actions.js

@@ -110,6 +110,14 @@ async function loginUserAction(prevState, formData) {
   headers.cookies().set("jwt", responseData.jwt, config);
   navigation.redirect("/dashboard");
 }
+async function logoutAction() {
+  headers.cookies().set("jwt", "", {
+    ...config,
+    maxAge: 0
+  });
+  navigation.redirect("/");
+}
 
 exports.loginUserAction = loginUserAction;
+exports.logoutAction = logoutAction;
 exports.registerUserAction = registerUserAction;

package/dist/cjs/index.js

@@ -22,6 +22,7 @@ var FluidBackgroundV2 = require('./components/FluidBackgroundV2.js');
 var RegisterForm = require('./components/forms/RegisterForm.js');
 var SigninForm = require('./components/forms/SigninForm.js');
 var SideNav = require('./components/dashboard/SideNav.js');
+var LogoutButton = require('./components/LogoutButton.js');
 
 
 
@@ -41,3 +42,4 @@ exports.FluidBackground = FluidBackgroundV2.default;
 exports.RegisterForm = RegisterForm.default;
 exports.SigninForm = SigninForm.default;
 exports.SideNav = SideNav.default;
+exports.LogoutButton = LogoutButton.default;

package/dist/esm/components/LogoutButton.js

@@ -0,0 +1,31 @@
+"use client";
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React__default from 'react';
+import { logoutAction } from '../data/actions/auth-actions.js';
+import { Button } from '@mui/material';
+import LogoutIcon from '@mui/icons-material/Logout';
+
+//
+function LogoutButton(_ref) {
+  let {
+    text = "Log out",
+    variant = "text"
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("form", {
+    action: logoutAction
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: "submit"
+    // aria-disabled={status.pending || loading}
+    // disabled={status.pending || loading}
+    ,
+    startIcon: /*#__PURE__*/React__default.createElement(LogoutIcon, null),
+    variant: variant
+  }, text));
+}
+
+export { LogoutButton as default };

package/dist/esm/components/dashboard/SideNav.js

@@ -159,7 +159,13 @@ function SideNav(_ref) {
     }
   }, /*#__PURE__*/React.createElement(IconButton, {
     onClick: handleDrawerClose
-  }, theme.direction === "rtl" ? /*#__PURE__*/React.createElement(ChevronRight, null) : /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement(Divider, null), sections.map((section, index) => /*#__PURE__*/React.createElement(Link, {
+  }, theme.direction === "rtl" ? /*#__PURE__*/React.createElement(ChevronRight, null) : /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement(Divider, null), sections.map((section, index) => /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start"
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
     key: index,
     href: section.link,
     passHref: true
@@ -171,11 +177,30 @@ function SideNav(_ref) {
       p: 1,
       cursor: "pointer"
     }
-  }, section.icon, open && /*#__PURE__*/React.createElement(Typography, {
+  }, section.icon, !open && section.subSections && /*#__PURE__*/React.createElement(Typography, null, "..."), open && /*#__PURE__*/React.createElement(Typography, {
     sx: {
       pl: 2
     }
-  }, section.title))))), /*#__PURE__*/React.createElement(Box, {
+  }, section.title))), section.subSections && open && section.subSections.map((subSection, index) => {
+    return /*#__PURE__*/React.createElement(Link, {
+      key: index,
+      href: subSection.link,
+      passHref: true
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        p: 1,
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      sx: {
+        pl: 4
+      }
+    }, subSection.title)));
+  })))), /*#__PURE__*/React.createElement(Box, {
     component: "main",
     sx: {
       flexGrow: 1,

package/dist/esm/data/actions/auth-actions.js

@@ -108,5 +108,12 @@ async function loginUserAction(prevState, formData) {
   cookies().set("jwt", responseData.jwt, config);
   redirect("/dashboard");
 }
+async function logoutAction() {
+  cookies().set("jwt", "", {
+    ...config,
+    maxAge: 0
+  });
+  redirect("/");
+}
 
-export { loginUserAction, registerUserAction };
+export { loginUserAction, logoutAction, registerUserAction };

package/dist/esm/index.js

@@ -20,3 +20,4 @@ export { default as FluidBackground } from './components/FluidBackgroundV2.js';
 export { default as RegisterForm } from './components/forms/RegisterForm.js';
 export { default as SigninForm } from './components/forms/SigninForm.js';
 export { default as SideNav } from './components/dashboard/SideNav.js';
+export { default as LogoutButton } from './components/LogoutButton.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.232",
+  "version": "0.1.234",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/LogoutButton.tsx

@@ -1,12 +1,63 @@
-import { logoutAction } from "@/data/actions/auth-actions";
-import { LogOut } from "lucide-react";
+"use client";
+import React from "react";
+import { logoutAction } from "../data/actions/auth-actions.ts";
+import { Button, Skeleton } from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout";
 
-export function LogoutButton() {
+interface LogoutButtonProps {
+  text: string;
+  variant?: "text" | "outlined" | "contained";
+  /* loadingText: string;
+  loading?: boolean; */
+}
+
+//
+function LogoutButton({
+  text = "Log out",
+  variant = "text",
+}: Readonly<LogoutButtonProps>) {
   return (
     <form action={logoutAction}>
-      <button type="submit">
-        <LogOut className="w-6 h-6 hover:text-primary" />
-      </button>
+      <Button
+        type="submit"
+        // aria-disabled={status.pending || loading}
+        // disabled={status.pending || loading}
+        startIcon={<LogoutIcon />}
+        variant={variant}
+      >
+        {/*{status.pending || loading ? <Loader text={loadingText} /> : text}*/}
+        {text}
+      </Button>
     </form>
   );
 }
+
+/* import { useFormStatus } from "react-dom";
+
+function Loader({ text }: { readonly text: string }) {
+  return (
+    <div className="flex items-center space-x-2">
+      <Skeleton />
+      <p>{text}</p>
+    </div>
+  );
+} */
+
+/* export function SubmitButton({
+  text,
+  loadingText,
+  loading,
+}: Readonly<SubmitButtonProps>) {
+  const status = useFormStatus();
+  return (
+    <Button
+      type="submit"
+      aria-disabled={status.pending || loading}
+      disabled={status.pending || loading}
+    >
+      {status.pending || loading ? <Loader text={loadingText} /> : text}
+    </Button>
+  );
+} */
+
+export default LogoutButton;

package/src/components/dashboard/SideNav.tsx

@@ -14,6 +14,7 @@ import {
   SpeedDialAction,
   Drawer,
   AppBar,
+  Stack,
 } from "@mui/material";
 import {} from "@mui/material";
 import {
@@ -31,6 +32,10 @@ interface SideNavProps {
     title: string;
     icon: React.ReactNode;
     link: string;
+    subSections?: Array<{
+      title: string;
+      link: string;
+    }>;
   }>;
   actions: Array<{
     icon: React.ReactNode;
@@ -216,20 +221,52 @@ function SideNav({
         </Box>
         <Divider />
         {sections.map((section, index) => (
-          <Link key={index} href={section.link} passHref>
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                p: 1,
-                cursor: "pointer",
-              }}
-            >
-              {section.icon}
-              {open && <Typography sx={{ pl: 2 }}>{section.title}</Typography>}
-            </Box>
-          </Link>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+            }}
+          >
+            <Link key={index} href={section.link} passHref>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  p: 1,
+                  cursor: "pointer",
+                }}
+              >
+                {section.icon}
+                {!open && section.subSections && <Typography>...</Typography>}
+                {open && (
+                  <Typography sx={{ pl: 2 }}>{section.title}</Typography>
+                )}
+              </Box>
+            </Link>
+            {section.subSections &&
+              open &&
+              section.subSections.map((subSection, index) => {
+                return (
+                  <Link key={index} href={subSection.link} passHref>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        p: 1,
+                        cursor: "pointer",
+                      }}
+                    >
+                      <Typography variant={"body2"} sx={{ pl: 4 }}>
+                        {subSection.title}
+                      </Typography>
+                    </Box>
+                  </Link>
+                );
+              })}
+          </Box>
         ))}
       </Drawer>
 

package/src/index.js

@@ -14,3 +14,4 @@ export { default as FluidBackground } from "./components/FluidBackgroundV2.tsx";
 export { default as RegisterForm } from "./components/forms/RegisterForm.tsx";
 export { default as SigninForm } from "./components/forms/SigninForm.tsx";
 export { default as SideNav } from "./components/dashboard/SideNav.tsx";
+export { default as LogoutButton } from "./components/LogoutButton.tsx";

package/src/stories/LogoutButton.stories.js

@@ -0,0 +1,15 @@
+import LogoutButton from "../components/LogoutButton.tsx";
+import React from "react";
+
+export default {
+  title: "UMWD/LogoutButton",
+  component: LogoutButton,
+};
+
+const Template = ({ ...args }) => <LogoutButton data={{ ...args }} />;
+
+export const HelloWorld = Template.bind({});
+
+HelloWorld.args = {
+  text: "Log-Out",
+};

package/src/stories/SideNav.stories.js

@@ -32,6 +32,16 @@ HelloWorld.args = {
       title: "My Account",
       icon: <AccountBoxIcon />,
       link: "/account",
+      subSections: [
+        {
+          title: "Dashboard",
+          link: "/account/dashboard",
+        },
+        {
+          title: "Settings",
+          link: "/account/settings",
+        },
+      ],
     },
   ],
 };