DocSpace UI Library Documentation

The DocSpace UI Library (@sinups/ui-kit) provides a set of reusable components, utilities, and integrations for your application. This guide outlines the steps to integrate and use the library effectively in your project.

---

Table of Contents

0. Requirements
1. How to start
2. Developing mode

---

Requirements

- react-redux 9+
- @reduxjs/toolkit 2+
- @mantine/core ^7.6.1

How to start

0. Add env variable:

``zsh
VITE_API_BASE_URL=/api
`

1. Add the package link to your package.json to include the UI library locally:

`zsh
npm install @sinups/ui-kit
`

3. Extend mantine theme

`ts
import { theme as docspaceTheme } from '@sinups/ui-kit';

export const themeConfig = createTheme({
...docspaceTheme
// project custom settings...
});
`

2. Add styles file in root file like App.tsx right after mantine styles import.

`ts
import '@sinups/ui-kit/dist/ui-kit.css';
`

4. If component or widget uses translations add them to your i18n instance

`ts
import { translations } from '@sinups/ui-kit';

// Under init
Object.entries(translations).forEach(([language, resources]) => {
i18n.addResourceBundle(language, 'ds', resources);
});
`

5. If widget uses redux slice add it to your store declaration. For example:

`ts
import { notificationApi as notificationApiKit } from '@sinups/ui-kit';

// Add to reducers
{
//...
[notificationApiKit.reducerPath]: notificationApiKit.reducer,
/...
}

// Add to middlewares
[
//...
notificationApiKit.middleware
//...
]
`

Developing Mode

If you want to develop new component and widget you can link this library to you parent project and have it working in developing mode.

1. Add package link. Change package version to specific path to file. You can use pwd command inside project directory to get it.

`ts
"@sinups/ui-kit": "file:/home/quest76/ui-kit",
`

1. Add ts config alias (parent project) in tsconfig.json

`ts
{
compilerOptions: {
paths: {
"@sinups/ui-kit": ["/home/quest76/code/ui-kit/src"],
"@ds/": ["/home/quest76/code/ui-kit/src/"],
}
}
}
`

3. Add Vite aliases (parent project) in vite.config.ts

`ts
{
resolve: {
alias: {
'@sinups/ui-kit': '/home/quest76/code/ui-kit/src',
'@ds': '/home/quest76/code/ui-kit/src',
}
}
}
``