init

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

.gitignore

@@ -0,0 +1,32 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

components/NavBarItem.js

@@ -0,0 +1,72 @@
+import Link from "next/link";
+import { useState } from 'react';
+import { useSelector } from 'react-redux'
+import { mdiChevronUp, mdiChevronDown } from "@mdi/js";
+import BaseDivider from "./baseDivider";
+import BaseIcon from "./baseIcon";
+import UserAvatarCurrentUser from "./userAvatarCurrentUser";
+import NavBarMenuList from "./navBarMenuList";
+
+export default function NavBarItem({ item }) {
+  const navBarItemLabelActiveColorStyle = useSelector(state => state.style.navBarItemLabelActiveColorStyle)
+  const navBarItemLabelStyle = useSelector(state => state.style.navBarItemLabelStyle)
+  const navBarItemLabelHoverStyle = useSelector(state => state.style.navBarItemLabelHoverStyle)
+
+  const userName = useSelector(state => state.main.userName)
+
+  const [isDropdownActive, setIsDropdownActive] = useState(false)
+
+  const componentClass = [
+    "block lg:flex items-center relative cursor-pointer",
+    isDropdownActive 
+      ? `${navBarItemLabelActiveColorStyle} dark:text-slate-400`
+      : `${navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${navBarItemLabelHoverStyle}`,
+    item.menu ? "lg:py-2 lg:px-3" : "py-2 px-3",
+    item.isDesktopNoLabel ? "lg:w-16 lg:justify-center" : ""
+  ].join(' ')
+
+  const itemLabel = item.isCurrentUser ? userName : item.label
+
+  const NavBarItemComponentContents = (
+    <>
+      <div className={`flex items-center ${item.menu ? 'bg-gray-100 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0' : ''}`}>
+        {item.isCurrentUser && <UserAvatarCurrentUser className="w-6 h-6 mr-3 inline-flex" />}
+        {item.icon && <BaseIcon path={item.icon} className="transition-colors" />}
+        <span className={`px-2 transition-colors ${item.isDesktopNoLabel && item.icon ? 'lg:hidden' : ''}`}>
+          {itemLabel}
+        </span>
+        {item.menu && <BaseIcon path={isDropdownActive ? mdiChevronUp : mdiChevronDown} className="hidden lg:inline-flex transition-colors" />}
+      </div>
+      {item.menu && (
+        <div
+          className={`${!isDropdownActive ? 'lg:hidden' : ''} text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-slate-800 dark:border-slate-700`}
+        >
+          <NavBarMenuList menu={item.menu} onClick={() => setIsDropdownActive(!isDropdownActive)} />
+        </div>
+      )}
+    </>
+  )
+
+  if (item.isDivider) {
+    return <BaseDivider navBar />
+  }
+
+  if (item.href) {
+    return (
+      <Link
+        href={item.href}
+
+      >
+        <a className={componentClass}>
+          {NavBarItemComponentContents}
+        </a>
+      </Link>
+    )
+  }
+
+  return (
+    <div className={componentClass}>
+      {NavBarItemComponentContents}
+    </div>
+  )
+}

components/asideMenu.js

@@ -0,0 +1,14 @@
+import AsideMenuLayer from "./asideMenuLayer";
+import OverlayLayer from "./overlayLayer";
+
+export default function AsideMenu({menu, isAsideMobileExpanded=false, isAsideLgActive=false}) {
+  return (
+    <>
+      <AsideMenuLayer 
+        menu={menu}
+        className={`${isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0'} ${!isAsideLgActive ? 'lg:hidden xl:flex' : ''}`}
+      />
+      {isAsideLgActive && <OverlayLayer zIndex="z-30" />}
+    </>
+  )
+}

components/asideMenuItem.js

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { mdiMinus, mdiPlus } from "@mdi/js";
+import BaseIcon from "./baseIcon";
+import Link from "next/link";
+import { getButtonColor } from "../src/colors";
+import { useSelector } from "react-redux";
+import AsideMenuList from "./asideMenuList";
+
+export default function AsideMenuItem({item, isDropdownList=false}) {
+  const [isDropdownActive, setIsDropdownActive] = useState(false);
+  const asideMenuItemStyle = useSelector(state => state.style.asideMenuItemStyle)
+  const asideMenuDropdownStyle = useSelector(state => state.style.asideMenuDropdownStyle)
+
+  const asideMenuItemInnerContents = (
+    <>
+      {item.icon && <BaseIcon path={item.icon} className="flex-none" w="w-16" size="18" />}
+      <span className={`grow text-ellipsis line-clamp-1 ${item.menu ? '' : 'pr-12'}`}>
+        {item.label}
+      </span>
+      {item.menu && <BaseIcon path={isDropdownActive ? mdiMinus : mdiPlus} className="flex-none" w="w-12" />}
+    </>
+  )
+
+  const componentClass = [
+    "flex cursor-pointer",
+    isDropdownList ? "py-3 px-6 text-sm" : "py-3",
+    item.color
+      ? getButtonColor(item.color, false, true)
+      : `${asideMenuItemStyle} dark:text-slate-300 dark:hover:text-white`,
+  ].join(" ")
+
+  return (
+    <li>
+      {item.href && (
+        <Link href={item.href} target={item.target}>
+          <a className={componentClass}>
+            {asideMenuItemInnerContents}
+          </a>
+        </Link>
+      )}
+      {!item.href && (
+        <div className={componentClass}>
+          {asideMenuItemInnerContents}
+        </div>
+      )}
+      {item.menu && (
+        <AsideMenuList 
+          menu={item.menu}
+          className={`${asideMenuDropdownStyle} ${isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden'}`}
+          isDropdownList
+        />
+      )}
+    </li>
+  )
+}

components/asideMenuLayer.js

@@ -0,0 +1,44 @@
+import { useSelector } from "react-redux"
+import { mdiLogout, mdiClose } from "@mdi/js";
+import BaseIcon from "./baseIcon";
+import AsideMenuItem from "./asideMenuItem";
+import AsideMenuList from "./asideMenuList";
+
+export default function AsideMenuLayer({menu, className}) {
+  const asideStyle = useSelector(state => state.style.asideStyle)
+  const asideBrandStyle = useSelector(state => state.style.asideBrandStyle)
+  const asideScrollbarsStyle = useSelector(state => state.style.asideScrollbarsStyle)
+  const darkMode = useSelector(state => state.style.darkMode)
+
+  const logoutItem = {
+    label: "Logout",
+    icon: mdiLogout,
+    color: "info",
+    isLogout: true,
+  };
+
+  return (
+    <aside className={`${className} zzz lg:py-2 lg:pl-2 w-60 fixed flex z-40 top-0 h-screen transition-position overflow-hidden`}>
+      <div
+        className={`lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900 ${asideStyle}`}
+      >
+        <div className={`flex flex-row h-14 items-center justify-between dark:bg-slate-900 ${asideBrandStyle}`}>
+          <div className="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
+            <b className="font-black">One</b>
+          </div>
+          <button className="hidden lg:inline-block xl:hidden p-3">
+            <BaseIcon path={mdiClose} />
+          </button>
+        </div>
+        <div
+          className={`flex-1 overflow-y-auto overflow-x-hidden ${darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle}`}
+        >
+          <AsideMenuList menu={menu} />
+        </div>
+        <ul>
+          <AsideMenuItem item={logoutItem} />
+        </ul>
+      </div>
+    </aside>
+  )
+}

components/asideMenuList.js

@@ -0,0 +1,15 @@
+import AsideMenuItem from "./asideMenuItem";
+
+export default function AsideMenuList({menu, isDropdownList=false, className=''}) {
+  return (
+    <ul className={className}>
+      {menu.map((item, index) => (
+        <AsideMenuItem 
+          key={index}
+          item={item}
+          isDropdownList={isDropdownList}
+        />
+      ))}
+    </ul>
+  )
+}

components/baseButton.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Link from 'next/link'
+import { getButtonColor } from '../src/colors';
+import BaseIcon from './baseIcon';
+
+export default function BaseButton({label, icon, iconSize, href, target, type=null, color, asAnchor=false, className, small=false, outline=false, active=false, disabled=false, roundedFull=false}) {
+  const componentClass = [
+    "inline-flex",
+    "cursor-pointer",
+    "justify-center",
+    "items-center",
+    "whitespace-nowrap",
+    "focus:outline-none",
+    "transition-colors",
+    "focus:ring",
+    "duration-150",
+    "border",
+    roundedFull ? "rounded-full" : "rounded",
+    getButtonColor(color, outline, !disabled, active),
+    className
+  ];
+
+  if (!label && icon) {
+    componentClass.push("p-1");
+  } else if (small) {
+    componentClass.push("text-sm", roundedFull ? "px-3 py-1" : "p-1");
+  } else {
+    componentClass.push("py-2", roundedFull ? "px-6" : "px-3");
+  }
+
+  if (disabled) {
+    componentClass.push(
+      "cursor-not-allowed",
+      outline ? "opacity-50" : "opacity-70"
+    );
+  }
+
+  const componentClassString = componentClass.join(' ')
+
+  const componentChildren = <>
+    { icon && <BaseIcon path={icon} size={iconSize} /> }
+    { label && <span className={small && icon ? 'px-1' : 'px-2'}>{label}</span> }
+  </>
+
+  if (href) {
+    return (<Link href={href} target={target} disabled={disabled} passHref>
+      <a className={componentClassString} disabled={disabled}>
+        {componentChildren}
+      </a>
+    </Link>)
+  }
+
+  return React.createElement(
+    asAnchor ? 'a' : 'button', 
+    { className: componentClassString, type: type ?? 'button', target, disabled },
+    componentChildren
+  )
+}

components/baseButtons.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function BaseButtons({noWrap=false, type='justify-start', mb='-mb-3', children}) {
+  const parentClass = [
+    "flex",
+    "items-center",
+    type,
+    noWrap ? "flex-nowrap" : "flex-wrap",
+    mb
+  ];
+
+  return <div className={parentClass}>{children}</div>
+}

components/baseDivider.js

@@ -0,0 +1,7 @@
+export default function BaseDivider({navBar=false}) {
+  const classAddon = navBar
+  ? 'hidden lg:block lg:my-0.5 dark:border-slate-700'
+  : 'my-6 -mx-6 dark:border-slate-800'
+
+  return <hr className={`${classAddon} border-t border-gray-100`} />
+}

components/baseIcon.js

@@ -0,0 +1,11 @@
+export default function BaseIcon({path, w='w-6', h='h-6', size, className}) {
+  const iconSize = size ?? 16
+
+  return (
+    <span className={`inline-flex justify-center items-center ${w} ${h} ${className}`}>
+      <svg viewBox="0 0 24 24" width={iconSize} height={iconSize} className="inline-block">
+        <path fill="currentColor" d={path} />
+      </svg>
+    </span>
+  )
+}

components/baseLevel.js

@@ -0,0 +1,13 @@
+export default function BaseLevel({mobile=false, type="justify-between", children}) {
+  const parentClass = `${type} items-center`;
+
+  const parentMobileClass = "flex";
+
+  const parentBaseClass = "block md:flex";
+
+  return (
+    <div className={`${parentClass} ${mobile ? parentMobileClass : parentBaseClass}`}>
+      {children}
+    </div>
+  )
+}

components/cardBox.js

@@ -0,0 +1,30 @@
+import React from "react"
+import CardBoxComponentBody from "./cardBoxComponentBody"
+import CardBoxComponentFooter from "./cardBoxComponentFooter"
+
+export default function CardBox({ rounded = 'rounded-2xl', flex='flex-col', className='', hasComponentLayout, hasTable, isForm, isHoverable, isModal, children, footer}) {
+  const componentClass = [
+    'bg-white flex',
+    className,
+    rounded,
+    flex,
+    isModal ? "dark:bg-slate-900" : "dark:bg-slate-900/70",
+  ]
+
+  if (isHoverable) {
+    componentClass.push("hover:shadow-lg transition-shadow duration-500")
+  }
+
+  return React.createElement(
+    isForm ? 'form' : 'div',
+    { className: componentClass.join(" ") },
+    hasComponentLayout
+      ? children
+      : (
+          <>
+            <CardBoxComponentBody noPadding={hasTable}>{children}</CardBoxComponentBody>
+            { footer && <CardBoxComponentFooter>{footer}</CardBoxComponentFooter> }
+          </>
+        )
+  )
+}