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.
npm install @sinups/ui-kitThe 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.
---
0. Requirements
1. How to start
2. Developing mode
---
- react-redux 9+
- @reduxjs/toolkit 2+
- @mantine/core ^7.6.1
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
//...
]
`
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',
}
}
}