Frontend

Installation Guide

1. Installing UNH-WEB package

The internal CLI tool built by AOH will be used to install the unh-web package. If you are using one of the latest versions of the Web base, the CLI tool is already part of the web base, and you can verify by checking if your package.json has the following:

"@mssfoobar/cli": "^1.0.3"

note

Do note that your CLI version may differ with the one above, as the one above is the latest version as of the time of writing this documentation.

warning

The CLI tool only works if you did not remove the aoh folder within the src/lib folder in the original web base. This is because it will install the unh package and duplicate them into the src/lib/aoh folder.

Run the following CLI command in the terminal inside your web directory.

npx cli install @mssfoobar/unh-web

You will be prompted to enter the path to your root folder, although the tool will attempt to auto-generate that path for you. Do check if it is accurate. If not, please enter the correct path to your root folder.

Afterwards, simply click enter, and the tool will start to install the unh-web package.

Once completed, you should see new files being generated in the src/lib/aoh/unh folder, as well as the routes/(private)/aoh/unh adn the routes/(public)/aoh/unh folder.

├── src
│    └── lib
│    │     └── aoh
│    │          ├── core
│    │ ...      └── unh
│    │               ├── api
│    │               ├── components
│    │               ├── helpers
│    │               ├── interfaces
│    │               ├── test
│    │               ├── constant.ts
│    │               ├── storybook.d.ts
│    │               └── utils.ts
│    │
│
└── routes
    ├── (private)
    │    ├── example
    │    │
    │    │── aoh
    │    │    └── unh
    │    │         ├── distributions
    │    │         ├── notification-templates
    │    │         └── settings
    │    │
             ...
    ├── (private)
    │    ├── example
    │    │
    │    │── aoh
    │    │    └── unh
    │    │         └── api
    │    │              └── ....
             ...

2. Install devDependencies

This module requires a certain set of devDependencies, therefore, please get them installed before running the project.

npm install -D zod
npm install -D sveltekit-superforms
npm install -D formsnap

3. Install dependencies

This module use Codemirror, Tiptap and Tanstack Table. Add the dependencies below into the dependencies object in your package.json, and save the file. Afterwards, run npm i or npm install to install.

"@codemirror/lang-html": "^6.4.9",
"@codemirror/language": "^6.10.3",
"@tanstack/table-core": "^8.20.5",
"@tiptap/core": "^2.9.1",
"@tiptap/extension-link": "^2.9.1",
"@tiptap/extension-placeholder": "^2.11.0",
"@tiptap/extension-underline": "^2.9.1",
"@tiptap/pm": "^2.9.1",
"@tiptap/starter-kit": "^2.9.1",
"codemirror": "^6.0.1",

4. Configuration

In the tailwind.config.ts file, add "lucide" in the addIconSelectors plugin and add a dynamic icon selector function like bellow:

plugins: [
    addIconSelectors(["mdi", "mdi-light", "lucide"]),
    addDynamicIconSelectors({
        prefix: "icon-thin",
        customise: (content) => {
            return content.replaceAll('stroke-width="2"', 'stroke-width="1"');
        },
    }),
    ...
],

Usage

The UNH module requires the user account to be assigned to a tenant in order to use the module. If you haven't done so, refer to this guide for more information.