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:

VITE_API_BASE_URL=/api

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

npm install @sinups/ui-kit

3. Extend mantine theme

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.

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

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

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:

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.

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

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

{
  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

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