npm package: @sinups/ui-kit
Description: 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.
Latest version: 0.1.13

# 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](#requirements)
1. [How to start](#how-to-start)
2. [Developing mode](#developing-mode)
3. [Commit helper](#commit-helper)

---

## 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',
    }
  }
}
```

## Commit Helper

The repository includes an interactive commit message generator based on `scripts/commit.sh`.

Available commands:

```bash
yarn commit:claude
yarn commit:codex
yarn commit:ai
```

What each command does:

- `yarn commit:claude` runs the helper with Claude prefill
- `yarn commit:codex` runs the helper with Codex prefill
- `yarn commit:ai` runs the helper in AI mode and uses Claude by default

Requirements:

- `claude` CLI must be installed for `commit:claude`
- `codex` CLI must be installed for `commit:codex`
- if the selected AI CLI is unavailable, the script falls back to manual mode

Typical flow:

1. Stage your changes with `git add ...`
2. Run one of the commands above
3. Optionally paste BFT/specification text into the terminal
4. Review or edit the suggested fields step by step
5. Confirm the preview and create the commit

What the script asks for:

- commit type emoji
- board/task id
- short title
- what changed
- why changed
- what was tested
- RC / REQ / OWNER / AC
- public description
- TEST / DOC / optional CR, DCR, ADR trailers

Behavior details:

- the script reads the current branch name and tries to detect the board id automatically
- it reads staged diff first; if nothing is staged, it uses the working tree diff for AI analysis
- on commit, if nothing is staged, it runs `git add -u` before `git commit`
- the last entered metadata is stored in `.commit-prefill.json` and reused for the next commit on the same branch

Useful notes:

- press `Enter` to accept the suggested or default value
- for multiline sections like `What changed`, enter one item per line and finish with an empty line
- when BFT text is provided, the AI tries to extract `RC`, `REQ`, `OWNER`, and `AC` automatically