@buerokratt-ria/common-gui-components 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.
+## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
+
+## [0.0.1] - 07-02-2025
+
+- Initial common gui elements.

package/MAKING_CHANGES.md

@@ -0,0 +1,8 @@
+## Making Changes
+
+#### If you want to make changes to current export components:
+* 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,49 @@
+## Common GUI Components
+
+### 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/header: 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/packageName: 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/packageName')}`
+        },
+    }`
+
+## Using package
+* Importing components
+  * `import { ExportName } from '@buerokratt-ria/packageName/src/index'` for ExportedElement only
+* Make sure that App.tsx fetches initial user info and stores it in store that provided by application
+    * If you want to use local package, put created package to the root of react app and add depenency like "@buerokratt-ria/packageName": "file:buerokratt-ria-packageName-0.0.5.tgz" (use proper version)
+
+### Using Header component
+* Example of using header component  
+  <Header
+    user={useUserInfoStore.getState()}  
+  />
+
+* Using user store is critical for header to function since it contains information about user that would be shown in Header
+  * User store script in examples folder
+  * You must fetch initial data in App.tsx file and then delegate it to header for displaying
+
+### Implemented examples:
+* https://github.com/buerokratt/Training-Module

package/assets/logo-white.svg

@@ -0,0 +1,29 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1008_12214)">
+        <path d="M10 12.2221C9.85266 12.2221 9.71135 12.1636 9.60717 12.0594C9.50298 11.9552 9.44446 11.8139 9.44446 11.6665C9.44446 11.5192 9.50298 11.3779 9.60717 11.2737C9.71135 11.1695 9.85266 11.111 10 11.111C14.8177 11.111 18.8889 9.07844 18.8889 6.67175C18.8889 6.52441 18.9474 6.38311 19.0516 6.27892C19.1558 6.17473 19.2971 6.11621 19.4444 6.11621C19.5918 6.11621 19.7331 6.17473 19.8373 6.27892C19.9415 6.38311 20 6.52441 20 6.67175C20 9.78417 15.6076 12.2221 10 12.2221Z"
+              fill="white"/>
+        <path d="M19.4445 7.22668C19.2971 7.22668 19.1558 7.16814 19.0516 7.06395C18.9474 6.95977 18.8889 6.81846 18.8889 6.67112C18.8889 4.218 14.9631 2.22146 10.1367 2.22146C9.9894 2.22146 9.8481 2.16293 9.74391 2.05874C9.63972 1.95455 9.58118 1.81325 9.58118 1.66591C9.58118 1.51856 9.63972 1.37726 9.74391 1.27307C9.8481 1.16889 9.9894 1.11035 10.1367 1.11035C15.6676 1.11035 20 3.55306 20 6.67112C20 6.81846 19.9415 6.95977 19.8373 7.06395C19.7331 7.16814 19.5918 7.22668 19.4445 7.22668Z"
+              fill="white"/>
+        <path d="M0.555555 8.88887C0.408213 8.88887 0.266908 8.83033 0.162721 8.72615C0.0585338 8.62196 0 8.48065 0 8.33331C0 4.28383 4.45226 1.11108 10.1367 1.11108C10.2841 1.11108 10.4254 1.16962 10.5296 1.2738C10.6337 1.37799 10.6923 1.5193 10.6923 1.66664C10.6923 1.81398 10.6337 1.95529 10.5296 2.05947C10.4254 2.16366 10.2841 2.22219 10.1367 2.22219C5.15973 2.22219 1.11111 4.96395 1.11111 8.33331C1.11111 8.48065 1.05258 8.62196 0.948396 8.72615C0.844209 8.83033 0.702897 8.88887 0.555555 8.88887Z"
+              fill="white"/>
+        <path d="M0.555555 12.2277C0.408212 12.2277 0.266908 12.1692 0.162721 12.065C0.0585338 11.9609 0 11.8196 0 11.6722C0 7.61969 4.4744 4.44434 10.1858 4.44434C10.2587 4.44434 10.331 4.4587 10.3984 4.48662C10.4658 4.51453 10.527 4.55546 10.5786 4.60704C10.6302 4.65863 10.6711 4.71988 10.699 4.78729C10.727 4.85469 10.7413 4.92695 10.7413 4.9999C10.7413 5.07286 10.727 5.14509 10.699 5.21249C10.6711 5.2799 10.6302 5.34115 10.5786 5.39274C10.527 5.44433 10.4658 5.48525 10.3984 5.51317C10.331 5.54109 10.2587 5.55545 10.1858 5.55545C5.18317 5.55545 1.11111 8.29981 1.11111 11.6722C1.11111 11.7452 1.09674 11.8174 1.06882 11.8848C1.0409 11.9522 0.999984 12.0135 0.948396 12.065C0.896808 12.1166 0.835561 12.1576 0.768158 12.1855C0.700755 12.2134 0.628512 12.2277 0.555555 12.2277Z"
+              fill="white"/>
+        <path d="M10.1858 15.5556C4.56945 15.5556 0 12.3156 0 8.3334C0 8.18606 0.0585338 8.04473 0.162721 7.94054C0.266908 7.83635 0.408212 7.77783 0.555555 7.77783C0.702897 7.77783 0.844209 7.83635 0.948396 7.94054C1.05258 8.04473 1.11111 8.18606 1.11111 8.3334C1.11111 11.6463 5.26693 14.4445 10.1858 14.4445C10.3331 14.4445 10.4744 14.503 10.5786 14.6072C10.6828 14.7114 10.7413 14.8527 10.7413 15.0001C10.7413 15.1474 10.6828 15.2887 10.5786 15.3929C10.4744 15.4971 10.3331 15.5556 10.1858 15.5556Z"
+              fill="white"/>
+        <path d="M19.4445 10.5511C19.2971 10.5511 19.1558 10.4926 19.0517 10.3884C18.9475 10.2842 18.8889 10.1429 18.8889 9.99554C18.8889 7.54762 14.9849 5.55545 10.1858 5.55545C10.1129 5.55545 10.0406 5.54109 9.9732 5.51317C9.9058 5.48525 9.84457 5.44433 9.79298 5.39274C9.74139 5.34115 9.70047 5.2799 9.67256 5.21249C9.64464 5.14509 9.63025 5.07286 9.63025 4.9999C9.63025 4.92695 9.64464 4.85469 9.67256 4.78729C9.70047 4.71988 9.74139 4.65863 9.79298 4.60704C9.84457 4.55546 9.9058 4.51453 9.9732 4.48662C10.0406 4.4587 10.1129 4.44434 10.1858 4.44434C15.6893 4.44434 20.0005 6.88269 20.0005 9.99554C20.0005 10.0685 19.9861 10.1408 19.9581 10.2083C19.9302 10.2757 19.8892 10.3369 19.8376 10.3885C19.786 10.4401 19.7247 10.481 19.6572 10.5089C19.5898 10.5368 19.5175 10.5512 19.4445 10.5511Z"
+              fill="white"/>
+        <path d="M10 18.8889C4.48785 18.8889 0 15.6489 0 11.6667C0 11.5193 0.0585338 11.378 0.162721 11.2738C0.266908 11.1696 0.408213 11.1111 0.555555 11.1111C0.702897 11.1111 0.844209 11.1696 0.948396 11.2738C1.05258 11.378 1.11111 11.5193 1.11111 11.6667C1.11111 15.036 5.09896 17.7777 10 17.7777C10.1473 17.7777 10.2887 17.8363 10.3928 17.9405C10.497 18.0446 10.5556 18.186 10.5556 18.3333C10.5556 18.4807 10.497 18.6219 10.3928 18.7261C10.2887 18.8303 10.1473 18.8889 10 18.8889Z"
+              fill="white"/>
+        <path d="M10.1853 15.5556C10.038 15.5556 9.89666 15.4971 9.79247 15.3929C9.68828 15.2887 9.62976 15.1474 9.62976 15.0001C9.62976 14.8527 9.68828 14.7114 9.79247 14.6072C9.89666 14.5031 10.038 14.4445 10.1853 14.4445C14.9848 14.4445 18.8884 12.448 18.8884 9.99573C18.8884 9.84838 18.947 9.70708 19.0512 9.60289C19.1553 9.49871 19.2967 9.44019 19.444 9.44019C19.5913 9.44019 19.7326 9.49871 19.8368 9.60289C19.941 9.70708 19.9995 9.84838 19.9995 9.99573C20 13.1133 15.6888 15.5556 10.1853 15.5556Z"
+              fill="white"/>
+        <path d="M8.79381 8.88889C9.17734 8.88889 9.48825 8.57798 9.48825 8.19444C9.48825 7.81091 9.17734 7.5 8.79381 7.5C8.41028 7.5 8.09937 7.81091 8.09937 8.19444C8.09937 8.57798 8.41028 8.88889 8.79381 8.88889Z"
+              fill="white"/>
+        <path d="M11.2938 8.88889C11.6773 8.88889 11.9883 8.57798 11.9883 8.19444C11.9883 7.81091 11.6773 7.5 11.2938 7.5C10.9103 7.5 10.5994 7.81091 10.5994 8.19444C10.5994 8.57798 10.9103 8.88889 11.2938 8.88889Z"
+              fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_1008_12214">
+            <rect width="20" height="20" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/assets/logo.svg

@@ -0,0 +1,31 @@
+<svg width="168" height="50" viewBox="0 0 168 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_240_839)">
+        <path d="M25 30.5555C24.6316 30.5555 24.2784 30.4092 24.0179 30.1487C23.7574 29.8882 23.6111 29.535 23.6111 29.1666C23.6111 28.7982 23.7574 28.445 24.0179 28.1845C24.2784 27.924 24.6316 27.7777 25 27.7777C37.0443 27.7777 47.2222 22.6963 47.2222 16.6796C47.2222 16.3113 47.3686 15.958 47.629 15.6975C47.8895 15.4371 48.2428 15.2908 48.6111 15.2908C48.9795 15.2908 49.3327 15.4371 49.5932 15.6975C49.8537 15.958 50 16.3113 50 16.6796C50 24.4607 39.0191 30.5555 25 30.5555Z"
+              fill="#005AA3"/>
+        <path d="M48.6111 18.0664C48.2428 18.0664 47.8894 17.9201 47.629 17.6596C47.3685 17.3992 47.2222 17.0459 47.2222 16.6776C47.2222 10.5447 37.4078 5.55341 25.3418 5.55341C24.9734 5.55341 24.6202 5.40707 24.3597 5.14661C24.0992 4.88614 23.9529 4.53288 23.9529 4.16452C23.9529 3.79617 24.0992 3.4429 24.3597 3.18244C24.6202 2.92197 24.9734 2.77563 25.3418 2.77563C39.1688 2.77563 50 8.88242 50 16.6776C50 17.0459 49.8537 17.3992 49.5932 17.6596C49.3327 17.9201 48.9795 18.0664 48.6111 18.0664Z"
+              fill="#005AA3"/>
+        <path d="M1.38889 22.2223C1.02053 22.2223 0.667269 22.076 0.406802 21.8155C0.146335 21.555 0 21.2018 0 20.8334C0 10.7097 11.1307 2.77783 25.3418 2.77783C25.7102 2.77783 26.0634 2.92417 26.3239 3.18463C26.5844 3.4451 26.7307 3.79836 26.7307 4.16672C26.7307 4.53508 26.5844 4.88834 26.3239 5.14881C26.0634 5.40927 25.7102 5.55561 25.3418 5.55561C12.8993 5.55561 2.77778 12.41 2.77778 20.8334C2.77778 21.2018 2.63146 21.555 2.37099 21.8155C2.11052 22.076 1.75724 22.2223 1.38889 22.2223Z"
+              fill="#005AA3"/>
+        <path d="M1.38889 30.5696C1.02053 30.5696 0.667269 30.4233 0.406802 30.1628C0.146334 29.9024 0 29.5491 0 29.1808C0 19.0495 11.186 11.1111 25.4644 11.1111C25.6468 11.1111 25.8274 11.147 25.9959 11.2168C26.1644 11.2866 26.3175 11.3889 26.4465 11.5179C26.5755 11.6468 26.6778 11.8 26.7476 11.9685C26.8174 12.137 26.8533 12.3176 26.8533 12.5C26.8533 12.6824 26.8174 12.863 26.7476 13.0315C26.6778 13.2 26.5755 13.3531 26.4465 13.4821C26.3175 13.6111 26.1644 13.7134 25.9959 13.7832C25.8274 13.853 25.6468 13.8889 25.4644 13.8889C12.9579 13.8889 2.77777 20.7498 2.77777 29.1808C2.77777 29.3632 2.74186 29.5437 2.67206 29.7122C2.60226 29.8807 2.49996 30.0339 2.37099 30.1628C2.24202 30.2918 2.0889 30.3941 1.9204 30.4639C1.75189 30.5337 1.57128 30.5696 1.38889 30.5696Z"
+              fill="#005AA3"/>
+        <path d="M25.4644 38.8889C11.4236 38.8889 0 30.7889 0 20.8334C0 20.465 0.146334 20.1117 0.406802 19.8512C0.667269 19.5908 1.02053 19.4445 1.38889 19.4445C1.75724 19.4445 2.11052 19.5908 2.37099 19.8512C2.63146 20.1117 2.77777 20.465 2.77777 20.8334C2.77777 29.1157 13.1673 36.1111 25.4644 36.1111C25.8328 36.1111 26.186 36.2575 26.4465 36.5179C26.707 36.7784 26.8533 37.1317 26.8533 37.5C26.8533 37.8684 26.707 38.2216 26.4465 38.4821C26.186 38.7426 25.8328 38.8889 25.4644 38.8889Z"
+              fill="#005AA3"/>
+        <path d="M48.6111 26.378C48.2427 26.378 47.8895 26.2317 47.629 25.9712C47.3685 25.7107 47.2222 25.3575 47.2222 24.9891C47.2222 18.8693 37.462 13.8889 25.4644 13.8889C25.282 13.8889 25.1014 13.853 24.9329 13.7832C24.7644 13.7134 24.6113 13.6111 24.4823 13.4821C24.3534 13.3531 24.2511 13.2 24.1813 13.0315C24.1115 12.863 24.0755 12.6824 24.0755 12.5C24.0755 12.3176 24.1115 12.137 24.1813 11.9685C24.2511 11.8 24.3534 11.6468 24.4823 11.5179C24.6113 11.3889 24.7644 11.2866 24.9329 11.2168C25.1014 11.147 25.282 11.1111 25.4644 11.1111C39.2231 11.1111 50.0011 17.207 50.0011 24.9891C50.0011 25.1716 49.9651 25.3523 49.8952 25.5209C49.8254 25.6895 49.723 25.8426 49.5939 25.9716C49.4648 26.1006 49.3116 26.2029 49.143 26.2726C48.9743 26.3423 48.7936 26.3782 48.6111 26.378Z"
+              fill="#005AA3"/>
+        <path d="M25 47.2223C11.2196 47.2223 0 39.1223 0 29.1668C0 28.7984 0.146335 28.4451 0.406802 28.1846C0.667269 27.9241 1.02053 27.7778 1.38889 27.7778C1.75724 27.7778 2.11052 27.9241 2.37099 28.1846C2.63146 28.4451 2.77778 28.7984 2.77778 29.1668C2.77778 37.5901 12.7474 44.4445 25 44.4445C25.3684 44.4445 25.7216 44.5908 25.9821 44.8512C26.2426 45.1117 26.3889 45.465 26.3889 45.8334C26.3889 46.2018 26.2426 46.555 25.9821 46.8154C25.7216 47.0759 25.3684 47.2223 25 47.2223Z"
+              fill="#005AA3"/>
+        <path d="M25.4633 38.8889C25.095 38.8889 24.7417 38.7425 24.4812 38.482C24.2208 38.2216 24.0745 37.8683 24.0745 37.5C24.0745 37.1316 24.2208 36.7783 24.4812 36.5179C24.7417 36.2574 25.095 36.111 25.4633 36.111C37.462 36.111 47.2211 31.1197 47.2211 24.9891C47.2211 24.6207 47.3675 24.2675 47.628 24.007C47.8884 23.7465 48.2417 23.6002 48.6101 23.6002C48.9784 23.6002 49.3317 23.7465 49.5921 24.007C49.8526 24.2675 49.9989 24.6207 49.9989 24.9891C50 32.7831 39.222 38.8889 25.4633 38.8889Z"
+              fill="#005AA3"/>
+        <path d="M21.9846 22.2222C22.9434 22.2222 23.7207 21.4449 23.7207 20.4861C23.7207 19.5273 22.9434 18.75 21.9846 18.75C21.0258 18.75 20.2485 19.5273 20.2485 20.4861C20.2485 21.4449 21.0258 22.2222 21.9846 22.2222Z"
+              fill="#005AA3"/>
+        <path d="M28.2346 22.2222C29.1934 22.2222 29.9707 21.4449 29.9707 20.4861C29.9707 19.5273 29.1934 18.75 28.2346 18.75C27.2758 18.75 26.4985 19.5273 26.4985 20.4861C26.4985 21.4449 27.2758 22.2222 28.2346 22.2222Z"
+              fill="#005AA3"/>
+    </g>
+    <path d="M69.72 29.3V25.964C69.72 23.924 71.544 22.436 73.44 22.436C75.864 22.436 77.784 24.14 77.784 27.116C77.784 30.404 75.672 32.012 73.368 32.012C71.472 32.012 69.72 30.956 69.72 29.3ZM67.752 33.5H69.672V31.724H70.056C70.584 33.044 72.264 33.692 73.704 33.692C77.136 33.692 79.848 31.076 79.848 27.02C79.848 23.252 77.472 20.756 74.016 20.756C72.312 20.756 70.632 21.332 69.72 22.46V15.212H67.752V33.5ZM93.4616 21.02H91.5176V28.916C91.5176 30.764 89.2616 31.94 87.7976 31.94C85.7576 31.94 84.2696 30.86 84.2696 28.796V21.02H82.3256V28.964C82.3256 32.276 84.2936 33.668 87.1256 33.668C88.7816 33.668 90.5096 33.02 91.2776 31.292H91.6136V33.5H93.4616V21.02ZM83.5976 18.788H85.7816V16.364H83.5976V18.788ZM89.1656 18.788H91.3496V16.364H89.1656V18.788ZM103.605 22.652V20.924H101.877C100.437 20.924 99.5014 21.692 99.1654 23.204H98.8294V21.02H96.8134V33.5H98.9014V26.252C99.0454 24.164 100.389 22.652 101.877 22.652H103.605ZM104.154 27.308C104.154 31.244 106.65 33.836 110.466 33.836C114.354 33.836 116.826 31.268 116.826 27.236C116.826 23.276 114.258 20.732 110.466 20.732C106.698 20.732 104.154 23.348 104.154 27.308ZM106.194 27.308C106.194 24.116 108.162 22.388 110.466 22.388C112.914 22.388 114.786 24.116 114.786 27.308C114.786 30.332 112.89 32.18 110.466 32.18C108.162 32.18 106.194 30.308 106.194 27.308ZM123.991 27.068L129.847 21.62V21.02H127.951L121.495 27.26L127.807 33.5H130.159V32.9L123.991 27.068ZM119.479 33.5H121.447V15.212H119.479V33.5ZM139.137 22.652V20.924H137.409C135.969 20.924 135.033 21.692 134.697 23.204H134.361V21.02H132.345V33.5H134.433V26.252C134.577 24.164 135.921 22.652 137.409 22.652H139.137ZM148.962 29.588C148.962 31.292 146.682 32.108 145.362 32.108C143.514 32.108 142.242 31.412 142.242 30.044C142.242 28.676 143.274 27.98 145.746 27.524C146.394 27.38 147.93 27.164 148.986 26.972L148.962 29.612V29.588ZM140.226 30.068C140.226 32.228 142.074 33.836 144.546 33.836C146.226 33.836 147.594 33.308 148.65 32.012H148.962V33.5H150.93C150.93 30.74 150.954 28.484 150.954 25.7C150.954 22.676 148.938 20.756 145.65 20.756C143.634 20.756 142.218 21.476 141.138 22.364V24.116H141.498C142.698 23.06 143.73 22.484 145.602 22.484C147.306 22.484 148.53 23.492 148.866 24.908L148.674 25.244C147.81 25.364 145.962 25.652 145.122 25.82C142.17 26.516 140.226 27.5 140.226 30.068ZM152.938 22.604H154.906L154.882 29.876C154.882 32.708 155.842 33.5 157.978 33.5H159.586V31.988H158.338C157.402 31.988 156.754 31.676 156.754 30.044L156.802 22.604H159.802V21.02H156.826L156.85 16.724H154.93L154.906 21.02H152.938V22.604ZM160.415 22.604H162.383L162.359 29.876C162.359 32.708 163.319 33.5 165.455 33.5H167.063V31.988H165.815C164.879 31.988 164.231 31.676 164.231 30.044L164.279 22.604H167.279V21.02H164.303L164.327 16.724H162.407L162.383 21.02H160.415V22.604Z"
+          fill="#005AA3"/>
+    <defs>
+        <clipPath id="clip0_240_839">
+            <rect width="50" height="50" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/constants/config.ts

@@ -0,0 +1,12 @@
+export const EMERGENCY_NOTICE_LENGTH = 250;
+export const WELCOME_MESSAGE_LENGTH = 250;
+export const NO_CSA_MESSAGE_LENGTH = 250;
+export const OUTSIDE_WORKING_HOURS_MESSAGE_LENGTH = 250;
+export const USER_IDLE_STATUS_TIMEOUT = 300000; // milliseconds
+export const CHAT_INPUT_LENGTH = 500;
+export const POPUP_DURATION = 2; // seconds
+export const CHAT_HISTORY_PREFERENCES_KEY = 'chat-history-preferences';
+export const isHiddenFeaturesEnabled =
+    import.meta.env.REACT_APP_ENABLE_HIDDEN_FEATURES?.toLowerCase().trim() ==
+    'true' ||
+    import.meta.env.REACT_APP_ENABLE_HIDDEN_FEATURES?.toLowerCase().trim() == '1';

package/constants/index.ts

@@ -0,0 +1 @@
+export * from './config';

package/context/index.ts

@@ -0,0 +1 @@
+export * from './ToastContext';

package/context/toastContext.tsx

@@ -0,0 +1,60 @@
+import React, {
+    createContext,
+    FC,
+    PropsWithChildren,
+    ReactNode,
+    useMemo,
+    useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import * as RadixToast from '@radix-ui/react-toast';
+
+import { Toast } from '../ui-components';
+import { generateUEID } from '../utils/generateUEID';
+import { POPUP_DURATION } from '../constants';
+
+export type ToastType = {
+    type: 'info' | 'success' | 'error' | 'warning';
+    title: string;
+    message: ReactNode;
+};
+
+type ToastTypeWithId = ToastType & { id: string };
+
+export type ToastContextType = {
+    open: (toast: ToastType) => void;
+};
+
+export const ToastContext = createContext<ToastContextType>(null!);
+
+export const ToastProvider: FC<PropsWithChildren> = ({ children }) => {
+    const { t } = useTranslation();
+    const [toasts, setToasts] = useState<ToastTypeWithId[]>([]);
+    const open = (content: ToastType) => {
+        setToasts((prevState) => [
+            ...prevState,
+            { id: generateUEID(), ...content },
+        ]);
+    };
+    const close = (id: string) => {
+        setToasts((prevState) => prevState.filter((toast) => toast.id === id));
+    };
+
+    const contextValue = useMemo(() => ({ open }), []);
+
+    return (
+        <ToastContext.Provider value={contextValue}>
+            <RadixToast.Provider
+                swipeDirection='right'
+                label={t('global.notification') ?? 'Notification'}
+                duration={POPUP_DURATION * 1000}
+            >
+                {children}
+                {toasts.map((toast) => (
+                    <Toast key={toast.id} toast={toast} close={() => close(toast.id)} />
+                ))}
+                <RadixToast.Viewport className='toast__list' />
+            </RadixToast.Provider>
+        </ToastContext.Provider>
+    );
+};

package/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useDocumentEscapeListener';
+export * from './useToast';
+export * from './useAudio';

package/hooks/useAudio.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { Howl } from 'howler';
+import ding from '../assets/ding.mp3';
+import newMessageSound from '../assets/newMessageSound.mp3';
+
+export const useAudio = (audiosrc: string) => {
+  const [audio, setAudio] = useState<Howl | null>(null);
+
+  useEffect(() => {
+    const howl = new Howl({
+      src: audiosrc,
+    });
+
+    setAudio(howl);
+
+    return () => {
+      howl.unload();
+    }
+  }, []);
+
+  return [audio] as const;
+}
+
+export const useDing = () => {
+  return useAudio(ding);
+}
+
+export const useNewMessageSound = () => {
+  return useAudio(newMessageSound);
+}

package/hooks/useDocumentEscapeListener.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react';
+
+const useDocumentEscapeListener = (callback: () => void) => {
+    useLayoutEffect(() => {
+        const handleKeyUp = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                callback();
+            }
+        };
+
+        document.addEventListener('keyup', handleKeyUp);
+
+        return () => document.removeEventListener('keyup', handleKeyUp);
+    }, [callback]);
+};
+
+export default useDocumentEscapeListener;

package/hooks/useToast.tsx

@@ -0,0 +1,5 @@
+import React, { useContext } from 'react';
+
+import { ToastContext } from '../context';
+
+export const useToast = () => useContext(ToastContext);

package/i18n.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import commonEN from './translations/en/common.json';
+import commonET from './translations/et/common.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    debug: import.meta.env.NODE_ENV === 'development',
+    fallbackLng: 'et',
+    supportedLngs: ['et','en'],
+    resources: {
+      en: {
+        common: commonEN,
+      },
+      et: {
+        common: commonET,
+      },
+    },
+    defaultNS: 'common',
+  });
+
+export default i18n;

package/index.ts

@@ -0,0 +1,6 @@
+export * from "./ui-components";
+export * from "./hooks";
+export * from "./services";
+export * from "./store"
+export * from "./context";
+export { ChatHistory } from './templates/history-page';

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@buerokratt-ria/common-gui-components",
+  "version": "0.0.1",
+  "description": "Common GUI components and pre defined templates.",
+  "main": "index.ts",
+  "author": "ExiRai",
+  "license": "ISC",
+  "peerDependencies": {
+    "@buerokratt-ria/header": "^0.1.20",
+    "@fontsource/roboto": "^4.5.8",
+    "@formkit/auto-animate": "^1.0.0-beta.5",
+    "@fortaine/fetch-event-source": "^3.0.6",
+    "@radix-ui/react-accessible-icon": "^1.0.1",
+    "@radix-ui/react-collapsible": "^1.0.1",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tabs": "^1.0.1",
+    "@radix-ui/react-toast": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@tanstack/match-sorter-utils": "^8.7.2",
+    "@tanstack/react-query": "^4.20.4",
+    "@tanstack/react-table": "^8.7.4",
+    "axios": "^1.2.1",
+    "howler": "^2.2.4",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.29.3",
+    "downshift": "^7.0.5",
+    "esbuild": "^0.19.5",
+    "framer-motion": "^8.5.5",
+    "i18next": "^22.4.5",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "linkify-react": "^4.1.1",
+    "linkifyjs": "^4.1.1",
+    "lodash": "^4.17.21",
+    "markdown-to-jsx": "^7.5.0",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-cookie": "^4.1.1",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.41.5",
+    "react-i18next": "^12.1.1",
+    "react-icons": "^4.10.1",
+    "react-idle-timer": "^5.5.2",
+    "react-modal": "^3.16.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "^6.5.0",
+    "react-select": "^5.7.4",
+    "react-text-selection-popover": "^2.0.2",
+    "react-textarea-autosize": "^8.4.0",
+    "reactflow": "^11.4.0",
+    "regexify-string": "^1.0.19",
+    "rich-textarea": "^0.26.4",
+    "rxjs": "^7.8.1",
+    "timeago.js": "^4.0.2",
+    "use-debounce": "^10.0.1",
+    "usehooks-ts": "^2.9.1",
+    "uuid": "^9.0.0",
+    "zustand": "^4.4.4"
+  },
+  "devDependencies": {
+    "@buerokratt-ria/header": "^0.1.20",
+    "@fontsource/roboto": "^4.5.8",
+    "@formkit/auto-animate": "^1.0.0-beta.5",
+    "@fortaine/fetch-event-source": "^3.0.6",
+    "@radix-ui/react-accessible-icon": "^1.0.1",
+    "@radix-ui/react-collapsible": "^1.0.1",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tabs": "^1.0.1",
+    "@radix-ui/react-toast": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "@tanstack/match-sorter-utils": "^8.7.2",
+    "@tanstack/react-query": "^4.20.4",
+    "@tanstack/react-table": "^8.7.4",
+    "axios": "^1.2.1",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.29.3",
+    "downshift": "^7.0.5",
+    "esbuild": "^0.19.5",
+    "framer-motion": "^8.5.5",
+    "i18next": "^22.4.5",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "linkify-react": "^4.1.1",
+    "linkifyjs": "^4.1.1",
+    "lodash": "^4.17.21",
+    "markdown-to-jsx": "^7.5.0",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-cookie": "^4.1.1",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.41.5",
+    "react-i18next": "^12.1.1",
+    "react-icons": "^4.10.1",
+    "react-idle-timer": "^5.5.2",
+    "react-modal": "^3.16.1",
+    "react-redux": "^8.1.1",
+    "howler": "^2.2.4",
+    "react-router-dom": "^6.5.0",
+    "react-select": "^5.7.4",
+    "react-text-selection-popover": "^2.0.2",
+    "react-textarea-autosize": "^8.4.0",
+    "reactflow": "^11.4.0",
+    "regexify-string": "^1.0.19",
+    "rich-textarea": "^0.26.4",
+    "rxjs": "^7.8.1",
+    "timeago.js": "^4.0.2",
+    "use-debounce": "^10.0.1",
+    "usehooks-ts": "^2.9.1",
+    "uuid": "^9.0.0",
+    "zustand": "^4.4.4",
+    "@types/react": "^18.0.26",
+    "@types/react-cookies": "^0.1.3",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^5.7.3"
+  }
+}

package/project.json

@@ -0,0 +1,52 @@
+{
+  "name": "common-elements",
+  "sourceRoot": "common-elements/src",
+  "projectType": "library",
+  "tags": ["scope:common-elements"],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["common-elements/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nrwl/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "project": "./ng-package.json",
+        "outputPath": "dist/common-elements"
+      },
+      "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/services/api.ts

@@ -0,0 +1,74 @@
+import axios, { AxiosError } from 'axios';
+import { useTranslation } from "react-i18next";
+import { useEffect } from "react";
+
+const api = axios.create({
+    baseURL: import.meta.env.BASE_URL,
+    headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+    },
+    withCredentials: true,
+});
+
+const apiDev = axios.create({
+    baseURL: import.meta.env.REACT_APP_RUUTER_PRIVATE_API_URL,
+    headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+    },
+    withCredentials: true,
+});
+
+const AxiosInterceptor = ({ children }) => {
+    const { t } = useTranslation();
+
+    useEffect(() => {
+        const resInterceptor = (response: any) => {
+            import.meta.env.DEBUG_ENABLED && console.debug(response);
+
+            return response;
+        }
+
+        const errInterceptor = (error: any) => {
+            import.meta.env.DEBUG_ENABLED && console.debug(error);
+
+            let message = t('global.notificationErrorMsg');
+
+            return Promise.reject(new Error(message));
+        }
+
+        const apiInterceptor = api.interceptors.response.use(resInterceptor, errInterceptor);
+        const apiDevInterceptor = apiDev.interceptors.response.use(resInterceptor, errInterceptor);
+
+        return () => {
+            api.interceptors.response.eject(apiInterceptor);
+            apiDev.interceptors.response.eject(apiDevInterceptor);
+        };
+    }, [t]);
+
+    return children;
+}
+
+const handleRequestError = (error: AxiosError) => {
+    import.meta.env.DEBUG_ENABLED && console.debug(error);
+    if (error.response?.status === 401) {
+        // To be added: handle unauthorized requests
+    }
+    if (error.response?.status === 403) {
+        // To be added: handle forbidden requests
+    }
+    return Promise.reject(new Error(error.message));
+}
+
+api.interceptors.request.use(
+    (axiosRequest) => axiosRequest,
+    handleRequestError
+);
+
+apiDev.interceptors.request.use(
+    (axiosRequest) => axiosRequest,
+    handleRequestError
+);
+
+export { api, apiDev, AxiosInterceptor };

package/services/index.ts

@@ -0,0 +1,3 @@
+export * from './api'
+export * from './sse-service'
+export * from './users'

package/services/sse-service.ts

@@ -0,0 +1,30 @@
+const notificationNodeUrl = import.meta.env.REACT_APP_NOTIFICATION_NODE_URL;
+
+const sse = <T>(url: string, onMessage: (data: T) => void): EventSource => {
+    if (!notificationNodeUrl) {
+        console.error('Notification node url is not defined');
+        throw new Error('Notification node url is not defined');
+    }
+    const eventSource = new EventSource(
+        `${notificationNodeUrl}/sse/notifications${url}`
+    );
+
+    eventSource.onmessage = (event: MessageEvent) => {
+        if (event.data != undefined && event.data != 'undefined') {
+            const response = JSON.parse(event.data);
+            if (response != undefined) {
+                onMessage(response as T);
+            }
+        }
+    };
+
+    eventSource.onopen = () => {
+        console.log('SSE connection Opened');
+    };
+
+    eventSource.onerror = () => {};
+
+    return eventSource;
+};
+
+export default sse;