@buerokratt-ria/menu 0.0.1

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All changes to this project will be documented in this file.
+
+## [0.0.1] - 07-12-2023
+
+- Initial package structure for menu.

package/MAKING_CHANGES.md

@@ -0,0 +1,8 @@
+## Making Changes
+
+#### If you want to make changes to export menu component:
+* Make necessary changes
+* Update version in file [package.json](package.json) 
+  * Template:  `major v.mid v.minor v`
+* Add brief description to [changelog file](CHANGELOG.md)
+* Proceed with deploying or testing package locally by information provided by [readme](README.md)

package/README.md

@@ -0,0 +1,70 @@
+## MainNavigation component
+
+### General information
+
+Changelog file could be found here [link](CHANGELOG.md)
+
+## Creating package
+
+To create npm package for future usage:
+* Navigate to the root directory of the package.
+* Run `npm pack` command, to create package file.
+    * If you made updates to the package please relate to this [file](MAKING_CHANGES.md) before creating package
+
+To publish created package:
+* Run `npm publish --access public`
+* Authorize in npm and package would be published
+
+## Adding dependency from remote
+- Since this package currently being deployed to @buerokratt-ria account therefore it would need to be related as @buerokratt-ria
+- Add to `package.json` @buerokratt-ria/menu: followed by version, list of available version could be found [here](CHANGELOG.md)
+
+## Adding dependency as local package
+- When you build the package file, put it in `root` directory of the application
+- Add to `package.json` @buerokratt-ria/header: file:name-of-the-generated-package
+  - If having import issues like `NOT FOUND` try adding to `vite.config.ts` 
+    `resolve: {
+    alias: {
+        '@buerokratt-ria': `${path.resolve(__dirname, 'node_modules/@buerokratt-ria/menu/src')}`
+        },
+    }`
+
+## Using package
+* Importing component
+  * `import { MainNavigation } from '@buerokratt-ria/menu/src'` for Header and Menu
+  * If you want to use local package, put created package to the root of react app and add dependency like "@buerokratt-ria/header": "file:buerokratt-ria-menu-0.0.5.tgz" (use proper version)
+### Using MainNavigation component
+  * In Layout component you need to provide fetching and caching the `menu.json` file, code snippet would be:  
+```
+    const CACHE_NAME = 'mainmenu-cache';
+    const [MainMenuItems, setMainMenuItems] = useState([])
+    const  {data, isLoading, status}  = useQuery({
+        queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
+        onSuccess: (res: any) => {
+            try {
+                setMainMenuItems(res);
+                localStorage.setItem(CACHE_NAME, JSON.stringify(res));
+            } catch (e) {
+                console.log(e);
+            }
+        },
+        onError: (error: any) => {
+            setMainMenuItems(getCache());
+        }
+
+    });
+
+    function getCache(): any {
+        const cache = localStorage.getItem(CACHE_NAME) || '{}';
+        return JSON.parse(cache);
+    }
+```
+  * Then pass this MainMenu items to menu component `<MainNavigation serviceId={import.meta.env.REACT_APP_SERVICE_ID.split(',')} items={MainMenuItems}/>`
+    * If you want to use only local file provided by package then pass empty array instead `[]`
+    * REACT_APP_SERVICE_ID set of values seperated by comma resembling current module, examples of this value could
+    be found in following links
+
+### Implemented examples:
+* https://github.com/buerokratt/Training-Module
+* https://github.com/buerokratt/Service-Module
+* https://github.com/buerokratt/Analytics-Module

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@buerokratt-ria/menu",
+  "version": "0.0.1",
+  "description": "Generic MainNavigation component that would be injected as dependency.",
+  "main": "index.js",
+  "scripts": {},
+  "author": "ExiRain",
+  "license": "ISC",
+  "peerDependencies": {
+    "@radix-ui/react-accessible-icon": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@tanstack/react-query": "^4.32.1",
+    "clsx": "^1.2.1",
+    "i18next": "^23.2.3",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "path": "^0.12.7",
+    "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.4",
+    "react-i18next": "^12.1.1",
+    "react-icons": "^4.10.1",
+    "react-idle-timer": "^5.7.2",
+    "react-router-dom": "^6.14.2",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.3.0",
+    "vite-plugin-dts": "^3.5.2",
+    "vite-plugin-svgr": "^3.2.0",
+    "zustand": "^4.4.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "@types/react": "^18.2.21",
+    "@buerokratt-ria/styles": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9"
+  }
+}

package/project.json

@@ -0,0 +1,52 @@
+{
+  "name": "header",
+  "sourceRoot": "header/src",
+  "projectType": "library",
+  "tags": ["scope:header"],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["header/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "project": "./ng-package.json",
+        "outputPath": "dist/header"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "./tsconfig.lib.prod.json",
+          "mode": "production"
+        },
+        "development": {
+          "tsConfig": "./tsconfig.lib.json",
+          "mode": "development"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nrwl/vite:test",
+      "outputs": ["{projectRoot}/coverage"],
+      "options": {
+        "passWithNoTests": true
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "angular",
+        "baseBranch": "main",
+        "push": true,
+        "noVerify": true,
+        "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
+        "skipCommitTypes": ["chore", "ci", "docs", "style", "test", "format"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export {
+    default as MainNavigation
+} from './menu';

package/src/menu/components/icons/icon/icon.tsx

@@ -0,0 +1,32 @@
+import React, {
+    CSSProperties,
+    forwardRef,
+    ReactNode,
+    StyleHTMLAttributes,
+} from 'react';
+import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
+import clsx from 'clsx';
+
+import '../icon.scss';
+
+type IconProps = StyleHTMLAttributes<CSSProperties> & {
+    label?: string | null;
+    icon: ReactNode;
+    size?: 'small' | 'medium';
+};
+
+const IconComponent = forwardRef<HTMLSpanElement, IconProps>(
+    ({ label, icon, size = 'small', ...rest }, ref) => {
+        const iconClasses = clsx('icon', `icon--${size}`);
+
+        return (
+            <AccessibleIcon.Root label={label ?? ''}>
+        <span ref={ref} className={iconClasses} style={rest.style}>
+          {icon}
+        </span>
+            </AccessibleIcon.Root>
+        );
+    }
+);
+
+export default IconComponent;

package/src/menu/components/icons/icon.scss

@@ -0,0 +1,17 @@
+@import '@buerokratt-ria/styles/styles/tools/spacing';
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &--small {
+    width: get-spacing(haapsalu);
+    height: get-spacing(haapsalu);
+  }
+
+  &--medium {
+    width: get-spacing(kuressaare);
+    height: get-spacing(kuressaare);
+  }
+}

package/src/menu/data/menu-structure.json

@@ -0,0 +1,343 @@
+[
+  {
+    "id": "conversations",
+    "label": {
+      "et": "Vestlused",
+      "en": "Conversations"
+    },
+    "path": "/chat",
+    "children": [
+      {
+        "label": {
+          "et": "Vastamata",
+          "en": "Unanswered"
+        },
+        "path": "/unanswered"
+      },
+      {
+        "label": {
+          "et": "Aktiivsed",
+          "en": "Active"
+        },
+        "path": "/active"
+      },
+      {
+        "label": {
+          "et": "Ajalugu",
+          "en": "History"
+        },
+        "path": "/history"
+      }
+    ]
+  },
+  {
+    "id": "training",
+    "label": {
+      "et": "Treening",
+      "en": "Training"
+    },
+    "path": "/training",
+    "children": [
+      {
+        "label": {
+          "et": "Treening",
+          "en": "Training"
+        },
+        "path": "/training",
+        "children": [
+          {
+            "label": {
+              "et": "Teemad",
+              "en": "Themes"
+            },
+            "path": "/training/intents"
+          },
+          {
+            "label": {
+              "et": "Avalikud teemad",
+              "en": "Public themes"
+            },
+            "path": "/training/common-intents"
+          },
+          {
+            "label": {
+              "et": "Teemade järeltreenimine",
+              "en": "Post training themes"
+            },
+            "path": "/training/intents-followup-training"
+          },
+          {
+            "label": {
+              "et": "Vastused",
+              "en": "Answers"
+            },
+            "path": "/training/responses"
+          },
+          {
+            "label": {
+              "et": "Kasutuslood",
+              "en": "User Stories"
+            },
+            "path": "/training/stories"
+          },
+          {
+            "label": {
+              "et": "Konfiguratsioon",
+              "en": "Configuration"
+            },
+            "path": "/training/configuration"
+          },
+          {
+            "label": {
+              "et": "Vormid",
+              "en": "Forms"
+            },
+            "path": "/training/forms"
+          },
+          {
+            "label": {
+              "et": "Mälukohad",
+              "en": "Slots"
+            },
+            "path": "/training/slots"
+          }
+        ]
+      },
+      {
+        "label": {
+          "et": "Ajaloolised vestlused",
+          "en": "Historical conversations"
+        },
+        "path": "/history",
+        "children": [
+          {
+            "label": {
+              "et": "Ajalugu",
+              "en": "History"
+            },
+            "path": "/history/history"
+          },
+          {
+            "label": {
+              "et": "Pöördumised",
+              "en": "Appeals"
+            },
+            "path": "/history/appeal"
+          }
+        ]
+      },
+      {
+        "label": {
+          "et": "Mudelipank ja analüütika",
+          "en": "Modelbank and analytics"
+        },
+        "path": "/analytics",
+        "children": [
+          {
+            "label": {
+              "et": "Teemade ülevaade",
+              "en": "Overview of topics"
+            },
+            "path": "/analytics/overview"
+          },
+          {
+            "label": {
+              "et": "Mudelite võrdlus",
+              "en": "Comparison of models"
+            },
+            "path": "/analytics/models"
+          },
+          {
+            "label": {
+              "et": "Testlood",
+              "en": "testTracks"
+            },
+            "path": "/analytics/testcases"
+          }
+        ]
+      },
+      {
+        "label": {
+          "et": "Treeni uus mudel",
+          "en": "Train new model"
+        },
+        "path": "/training/train-new-model"
+      }
+    ]
+  },
+  {
+    "id": "analytics",
+    "label": {
+      "et": "Analüütika",
+      "en": "Analytics"
+    },
+    "path": "/analytics",
+    "children": [
+      {
+        "label": {
+          "et": "Ülevaade",
+          "en": "Overview"
+        },
+        "path": "/overview"
+      },
+      {
+        "label": {
+          "et": "Vestlused",
+          "en": "Chats"
+        },
+        "path": "/chats"
+      },
+      {
+        "label": {
+          "et": "Bürokratt",
+          "en": "Burokratt"
+        },
+        "path": "/burokratt"
+      },
+      {
+        "label": {
+          "et": "Tagasiside",
+          "en": "Feedback"
+        },
+        "path": "/feedback"
+      },
+      {
+        "label": {
+          "et": "Nõustajad",
+          "en": "Advisors"
+        },
+        "path": "/advisors"
+      },
+      {
+        "label": {
+          "et": "Avaandmed",
+          "en": "Reports"
+        },
+        "path": "/reports"
+      }
+    ]
+  },
+  {
+    "id": "services",
+    "label": {
+      "et": "Teenused",
+      "en": "Services"
+    },
+    "path": "/services",
+    "children": [
+      {
+        "label": {
+          "et": "Ülevaade",
+          "en": "Overview"
+        },
+        "path": "/overview"
+      },
+      {
+        "label": {
+          "et": "Uus teenus",
+          "en": "New Service"
+        },
+        "path": "/newService"
+      },
+      {
+        "label": {
+          "et": "Teemade järeltreenimine",
+          "en": "Followup Training"
+        },
+        "path": "/followupTraining"
+      },
+      {
+        "label": {
+          "et": "Probleemsed teenused",
+          "en": "Faulty Services"
+        },
+        "path": "/faultyServices"
+      }
+    ]
+  },
+  {
+    "id": "settings",
+    "label": {
+      "et": "Haldus",
+      "en": "Administration"
+    },
+    "path": "/settings",
+    "children": [
+      {
+        "label": {
+          "et": "Kasutajad",
+          "en": "Users"
+        },
+        "path": "/users"
+      },
+      {
+        "label": {
+          "et": "Vestlusbot",
+          "en": "Chatbot"
+        },
+        "path": "/chatbot",
+        "children": [
+          {
+            "label": {
+              "et": "Seaded",
+              "en": "Settings"
+            },
+            "path": "/chatbot/settings"
+          },
+          {
+            "label": {
+              "et": "Tervitussõnum",
+              "en": "Welcome message"
+            },
+            "path": "/chatbot/welcome-message"
+          },
+          {
+            "label": {
+              "et": "Välimus ja käitumine",
+              "en": "Appearance and behavior"
+            },
+            "path": "/chatbot/appearance"
+          },
+          {
+            "label": {
+              "et": "Erakorralised teated",
+              "en": "Emergency notices"
+            },
+            "path": "/chatbot/emergency-notices"
+          }
+        ]
+      },
+      {
+        "label": {
+          "et": "Asutuse tööaeg",
+          "en": "Office opening hours"
+        },
+        "path": "/working-time"
+      },
+      {
+        "label": {
+          "et": "Sessiooni pikkus",
+          "en": "Session length"
+        },
+        "path": "/session-length"
+      }
+    ]
+  },
+  {
+    "id": "monitoring",
+    "label": {
+      "et": "Seire",
+      "en": "Monitoring"
+    },
+    "path": "/monitoring",
+    "children": [
+      {
+        "label": {
+          "et": "Aktiivaeg",
+          "en": "Working hours"
+        },
+        "path": "/uptime"
+      }
+    ]
+  }
+]

package/src/menu/index.tsx

@@ -0,0 +1,153 @@
+import React, {FC, MouseEvent, useEffect, useState} from 'react';
+
+import {NavLink, useLocation} from 'react-router-dom';
+import {MdClose, MdKeyboardArrowDown, MdMiscellaneousServices} from 'react-icons/md';
+import clsx from 'clsx';
+import { MdOutlineForum, MdOutlineAdb, MdOutlineEqualizer, MdSettings, MdOutlineMonitorWeight } from 'react-icons/md';
+import  Icon from './components/icons/icon/icon';
+import './main-navigation.scss';
+import { useQuery } from '@tanstack/react-query';
+import {useTranslation} from "react-i18next";
+import menuStructure from './data/menu-structure.json';
+
+interface MenuItem {
+    id?: string;
+    label: TranslatedLabel;
+    path?: string;
+    target?: '_blank' | '_self';
+    children?: MenuItem[];
+}
+
+interface TranslatedLabel {
+    [lang: string] : string;
+}
+
+const MainNavigation: FC<{items: MenuItem[], serviceId: string[]}> = ( {items, serviceId}) => {
+  if(!items.isArray || items.length === 0) {
+    items = menuStructure;
+  }
+
+  const { t, i18n } = useTranslation();
+  const currentlySelectedLanguage = i18n.language;
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
+  const menuData = [
+    {
+      id: 'conversations',
+      icon: <MdOutlineForum />,
+      url: import.meta.env.REACT_APP_CONVERSATIONS_BASE_URL,
+    },
+    {
+      id: 'training',
+      icon: <MdOutlineAdb />,
+      url: import.meta.env.REACT_APP_TRAINING_BASE_URL,
+    },
+    {
+      id: 'analytics',
+      icon: <MdOutlineEqualizer />,
+      url: import.meta.env.REACT_APP_ANALYTICS_BASE_URL,
+    },
+    {
+      id: "services",
+      icon: <MdMiscellaneousServices />,
+      url: import.meta.env.REACT_APP_SERVICES_BASE_URL,
+    },
+    {
+      id: 'settings',
+      icon: <MdSettings />,
+      url: import.meta.env.REACT_APP_SETTINGS_BASE_URL,
+    },
+    {
+      id: 'monitoring',
+      icon: <MdOutlineMonitorWeight />,
+      url: import.meta.env.REACT_APP_MONITORING_BASE_URL,
+    },
+  ];
+
+  let activeMenuId;
+
+  const { data } = useQuery({
+    queryKey: ['cs-get-user-role', 'prod'],
+    onSuccess: (res: any) => {
+      const filteredItems = items.filter((item) => {
+        const role = res.data.get_user[0].authorities[0]
+        switch (role) {
+          case 'ROLE_ADMINISTRATOR': return item.id
+          case 'ROLE_SERVICE_MANAGER': return item.id != 'settings' && item.id != 'training'
+          case 'ROLE_CUSTOMER_SUPPORT_AGENT': return item.id != 'settings' && item.id != 'analytics'
+          case 'ROLE_CHATBOT_TRAINER': return item.id != 'settings' && item.id != 'conversations'
+          case 'ROLE_ANALYST': return item.id == 'analytics'
+          case 'ROLE_UNAUTHENTICATED': return
+          default: return
+        }
+      }) ?? []
+      setMenuItems(filteredItems)
+    }
+
+  });
+
+  const location = useLocation();
+  const [navCollapsed, setNavCollapsed] = useState(false);
+
+  const handleNavToggle = (event: MouseEvent) => {
+    const isExpanded = event.currentTarget.getAttribute('aria-expanded') === 'true';
+    event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
+  };
+
+  const renderMenuTree = (menuItems: MenuItem[]) => {
+    return menuItems.map((menuItem) => (
+      <li key={menuItem.label[currentlySelectedLanguage]}>
+        {!!menuItem.children ? (
+          <>
+            <button
+              className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
+              aria-expanded={menuItem.path && (isSameRoot(menuItem)) ? 'true' : 'false'}
+              onClick={handleNavToggle}
+            >
+              { menuItem.id &&  (
+                <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} />
+              )}
+
+              <span>{menuItem.label[currentlySelectedLanguage]}</span>
+              <Icon icon={<MdKeyboardArrowDown />} />
+            </button>
+            <ul className='nav__submenu'>
+              {renderMenuTree(menuItem.children.map((item)  => ({id: menuItem.id, ...item})))}
+            </ul>
+          </>
+        ) : (
+
+          (serviceId.includes(menuItem.id)) ?
+            <NavLink to={menuItem.path || '#'}>{menuItem.label[currentlySelectedLanguage] }</NavLink> :
+            <a href={menuData.find(dataItem => dataItem.id === menuItem.id)?.url + menuItem.path}>{menuItem.label[currentlySelectedLanguage]}</a>
+
+        )}
+      </li>),
+    );
+  };
+
+  const base = window.location.pathname.split("/")[1];
+  const currentService = base === 'chat' ? serviceId : [base];
+  const isSameRoot = (menuItem) => {
+    let result = false;
+    if(currentService.includes(menuItem.id)){
+      result = menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
+    }
+    return result;
+  }
+
+  if (!menuItems) return null;
+
+  return (
+    <nav className={clsx('nav', { 'nav--collapsed': navCollapsed })}>
+      <button className='nav__menu-toggle' onClick={() => setNavCollapsed(!navCollapsed)}>
+        <Icon icon={<MdClose />} />
+        {t('mainMenu.closeMenu')}
+      </button>
+      <ul className='nav__menu'>
+        {renderMenuTree(menuItems)}
+      </ul>
+    </nav>
+  );
+};
+
+export default MainNavigation;

package/src/menu/main-navigation.scss

@@ -0,0 +1,119 @@
+@import '@buerokratt-ria/styles/styles/tools/spacing';
+@import '@buerokratt-ria/styles/styles/tools/color';
+@import '@buerokratt-ria/styles/styles/settings/variables/typography';
+
+.nav {
+  $self: &;
+  width: 208px;
+  background-color: get-color(sapphire-blue-10);
+  overflow: auto;
+  scrollbar-width: none;
+  transition: width .1s ease-out;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  li, a, .nav__toggle, .nav__menu-toggle {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  &__menu-toggle {
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: get-color(sapphire-blue-8);
+    }
+
+    &:active {
+      background-color: get-color(sapphire-blue-7);
+    }
+  }
+
+  a, .nav__toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    color: get-color(black-coral-0);
+    padding: 14px 8px 14px 32px;
+    box-shadow: inset 0 -1px 0 get-color(sapphire-blue-14);
+
+    span:not(.icon) {
+      flex: 1;
+      display: block;
+    }
+
+    &:hover {
+      background-color: get-color(sapphire-blue-8);
+    }
+
+    &:active {
+      background-color: get-color(sapphire-blue-7);
+    }
+
+    &.active {
+      font-weight: 700;
+    }
+
+    &:focus {
+    }
+  }
+
+  &__toggle {
+    &[aria-expanded=true] {
+      font-weight: 700;
+
+      .icon {
+        transform: rotate(180deg);
+      }
+
+      + ul {
+        display: block;
+      }
+    }
+
+    &.nav__toggle--icon {
+      padding-left: 8px;
+
+      .icon:first-child {
+        transform: none;
+      }
+    }
+  }
+
+  &__toggle-icon {
+    margin-left: auto;
+  }
+
+  &__menu-toggle {
+    display: flex;
+    align-items: center;
+    gap: get-spacing(paldiski);
+    width: 100%;
+    color: get-color(white);
+    padding: 14px 8px;
+    box-shadow: inset 0 -1px 0 get-color(sapphire-blue-14);
+  }
+
+  &__submenu {
+    display: none;
+
+    a, .nav__toggle {
+      background-color: get-color(sapphire-blue-14);
+      box-shadow: inset 0 -1px 0 get-color(sapphire-blue-17);
+    }
+
+    #{$self} {
+      &__submenu {
+        a {
+          background-color: get-color(sapphire-blue-17);
+          box-shadow: inset 0 -1px 0 get-color(black);
+          padding: 14px 48px 14px 40px;
+        }
+      }
+    }
+  }
+}

package/tsconfig.base.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "rootDir": ".",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "esnext",
+    "lib": ["es2017", "dom", "dom.Iterable"],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "baseUrl": ".",
+  },
+  "exclude": ["node_modules", "tmp"]
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "extends": "./tsconfig.base.json"
+}

package/tsconfig.spec.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,67 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import { join, path } from 'path';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      // Faster builds by skipping tests. Set this to false to enable type checking.
+      skipDiagnostics: true,
+    }),
+    react(),
+    tsconfigPaths({
+      root: './',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': `${path.resolve(__dirname, './src')}`,
+      '~@fontsource': path.resolve(__dirname, 'node_modules/@fontsource'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/main.scss";`,
+      },
+    },
+  },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'header',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      // external: ['react','react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+
+    },
+  },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../node_modules/.vitest',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});