@nethru/ui 1.0.0

package/dist/sidebar/SidebarContext.js

@@ -0,0 +1,118 @@
+import { createContext, useContext, useReducer } from "react";
+import { produce } from "immer";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SidebarContext = /*#__PURE__*/createContext();
+export function SidebarContextProvider({
+  menu,
+  icons,
+  children
+}) {
+  const [states, dispatch] = useReducer(reducer, initialStates);
+  return /*#__PURE__*/_jsx(SidebarContext.Provider, {
+    value: {
+      menu,
+      icons,
+      states,
+      dispatch
+    },
+    children: children
+  });
+}
+export function useSidebarContext() {
+  return useContext(SidebarContext);
+}
+export function getMenuGroupStates(states, id) {
+  return states.menuGroupsExpanded[id] !== undefined ? states.menuGroupsExpanded[id] : true;
+}
+export function getMenuTreeStates(states, id) {
+  return states.menuTrees[id] || emptyState();
+}
+function reducer(states, action) {
+  const {
+    id,
+    type
+  } = action;
+  switch (type) {
+    case 'secondaryMenuToggled':
+      return produce(states, draft => {
+        draft.menuClosed = !states.menuClosed;
+      });
+    case 'menuGroupExpanded':
+      return produce(states, draft => {
+        draft.menuGroupsExpanded[id] = action.expanded;
+      });
+    case 'treeItemSelected':
+      return produce(states, draft => {
+        for (const key in draft.menuTrees) {
+          draft.menuTrees[key].selected = [];
+        }
+        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
+        draft.menuTrees[id].selected = action.ids;
+      });
+    case 'treeItemExpanded':
+      return produce(states, draft => {
+        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
+        draft.menuTrees[id].expanded = [...action.ids];
+      });
+    case 'updateActiveItems':
+      return produce(states, draft => {
+        updateActiveItems(draft, action.menu, action.href);
+      });
+    default:
+      throw new Error(`Undefined Sidebar Action Type: ${JSON.stringify(action)}`);
+  }
+}
+function emptyState() {
+  return {
+    selected: [],
+    expanded: []
+  };
+}
+const initialStates = {
+  activePrimaryItem: undefined,
+  activeSecondaryItem: undefined,
+  menuClosed: false,
+  menuGroupsExpanded: {},
+  menuTrees: {}
+};
+function updateActiveItems(draft, menu, href) {
+  draft.activePrimaryItem = undefined;
+  draft.activeSecondaryItem = undefined;
+  for (let item of menu) {
+    if (item.href === href) {
+      draft.activePrimaryItem = item.id;
+      return;
+    }
+    if (updateActiveSection(item.sections)) {
+      draft.activePrimaryItem = item.id;
+      return;
+    }
+  }
+  function updateActiveSection(sections) {
+    if (!sections) return;
+    for (let section of sections) {
+      if (section.href === href) {
+        draft.activeSecondaryItem = section.id;
+        return true;
+      }
+      if (updateActiveSubmenuItems(section.id, section.menu)) {
+        draft.menuGroupsExpanded[section.id] = true;
+        return true;
+      }
+    }
+  }
+  function updateActiveSubmenuItems(id, submenu) {
+    if (!submenu) return;
+    for (let item of submenu) {
+      if (item.href === href) {
+        if (!(id in draft.menuTrees)) draft.menuTrees[id] = emptyState();
+        draft.activeSecondaryItem = item.id;
+        return true;
+      }
+      if (updateActiveSubmenuItems(id, item.submenu)) {
+        draft.menuTrees[id].expanded.push(item.id);
+        return true;
+      }
+    }
+  }
+}

package/dist/sidebar/css/primary.module.css

@@ -0,0 +1,80 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    width: var(--primary-menu-width);
+    height: 100%;
+    border-right: 1px solid #dee2e6;
+    z-index: 30;
+    transition-property: width background-color;
+    transition-duration: .2s;
+}
+.container:hover {
+    width: 240px;
+    background-color: #fff;
+    box-shadow: 1px 1px 12px #dadce0;
+}
+.container a {
+    text-decoration: none;
+    cursor: pointer;
+}
+.container a:first-child {
+    padding-top: 10px;
+}
+.container a:last-child {
+    padding-bottom: 10px;
+}
+
+.nav-item {
+    position: relative;
+    display: flex;
+    height: 48px;
+    align-items: center;
+    color: #495057;
+}
+.nav-item:hover {
+    /*border-radius: 0 48px 48px 0;*/
+    background-color: #e9ecef;
+}
+.nav-item.active {
+    /*color: #fff;*/
+    /*border-left: 5px solid #0d6efd;*/
+}
+.container:hover .nav-item.active {
+    /*border-radius: 0 48px 48px 0;*/
+    /*background-color: #0d6efd !important;*/
+}
+
+.highlight {
+    position: absolute;
+    left: 0px;
+    width: 5px;
+    height: 36px;
+    z-index: 100;
+    /*border-radius: 50%;*/
+    background-color: #0d6efd;
+    transition-property: height;
+    transition-duration: .2s;
+}
+.container:hover .highlight {
+    height: 48px;
+    /*display: none;*/
+}
+
+.icon {
+    margin: 4px 15px 0px 16px;
+}
+.icon > svg {
+    width: 24px;
+    height: 24px;
+}
+
+.text {
+    font-size: .9rem;
+    display: none;
+    white-space: nowrap;
+    overflow-x: hidden;
+}
+.container:hover .text {
+    display: block;
+}

package/dist/sidebar/css/sidebar.module.css

@@ -0,0 +1,50 @@
+.container {
+    display: flex;
+    position: relative;
+    background-color: var(--body-background-color);
+    transition: width .2s;
+}
+.container.opened {
+    width: calc(var(--primary-menu-width) + var(--secondary-menu-width));
+}
+.container.closed {
+    width: var(--primary-menu-width);
+}
+
+
+.secondary {
+    position: absolute;
+    left: var(--primary-menu-width);
+    height: 100%;
+    z-index: 0;
+    white-space: nowrap;
+    overflow-x: hidden;
+}
+.secondary.opened {
+    width: var(--secondary-menu-width);
+}
+.secondary.closed {
+    width: 0px;
+    overflow: hidden;
+}
+
+.toggler {
+    position: absolute;
+    bottom: 12px;
+    width: 24px;
+    height: 32px;
+    padding-top: 2px;
+    z-index: 15;
+    cursor: pointer;
+    transition: left .2s;
+}
+.toggler.opened {
+    left: 264px;
+}
+.toggler.closed {
+    left: var(--primary-menu-width);
+    background-color: #f1f3f4;
+    border: unset;
+    border-radius: 0 50% 50% 0/0 50% 50% 0;
+    box-shadow: 1px 1px 1px 1px #e8eaed;
+}

package/dist/variables.js

@@ -0,0 +1,6 @@
+export const variables = {
+  bodyBackgroundColor: '#f8f9fa',
+  gnbHeight: 64,
+  primaryMenuWidth: 56,
+  secondaryMenuWidth: 256
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@nethru/ui",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "files": [
+    "/dist"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/material": "^5.14.18",
+    "@mui/x-data-grid": "^6.18.2",
+    "@mui/x-date-pickers": "^6.18.2",
+    "@mui/x-tree-view": "^6.17.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "days": "^1.1.1",
+    "immer": "^10.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
+  },
+  "babel": {
+    "presets": [
+      ["@babel/preset-react", {"runtime": "automatic"}]
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.4",
+    "@babel/preset-react": "^7.23.3"
+  }
+}