MixerX UI Kit

Company: DAI Project: MixerX Scope: Shared UI component library (@mixerx/uikit)

A React TypeScript UI kit for MixerX applications. Provides production-ready, accessible components with SCSS Modules, Storybook documentation, and dual-format (ESM + CJS) distribution via npm.

Components

Button, Checkbox, Dot, Dropdown, EditorToolbar, Input, Loader, Notification, Modal, Pagination, Radio, SliderPagination, Table, Tabs, Tag, Toggle, Tooltip, Typography.

Full documentation and interactive examples available in Storybook.

Tech Stack

• Framework: React 18 with TypeScript (strict mode)
• Styling: SCSS Modules + clsx
• Icons: @icon-park/react
• Font: IBM Plex Mono (@fontsource/ibm-plex-mono)
• Build: Rollup (ESM + CJS + .d.ts)
• Documentation: Storybook 8 (React + Vite) with A11y addon
• Testing: Jest + @testing-library/react + jest-axe
• Code Quality: ESLint, Prettier, TypeScript strict

Requirements

• Node.js: >= 18.0.0
• npm: >= 9.0.0

Getting Started

Install

npm install

Run Storybook

npm run storybook

Open http://localhost:6006.

Useful commands

npm run build            # Rollup build (ESM + CJS + types)
npm run storybook        # Storybook dev server (port 6006)
npm run build-storybook  # Static Storybook build
npm run test             # Jest tests (a11y)
npm run lint             # ESLint
npm run type-check       # TypeScript check
npm run format           # Prettier check
npm run format:fix       # Prettier fix

Installation (as dependency)

npm install @mixerx/uikit

Peer dependencies

npm install react react-dom

Styles

Component styles ship as a single CSS file and must be imported once at the application entry point:

import '@mixerx/uikit/styles.css';

Font

Components use IBM Plex Mono and expect the consumer to load it. Install the font package and import the weights used by the kit (200-700):

npm install @fontsource/ibm-plex-mono

import '@fontsource/ibm-plex-mono/200.css';
import '@fontsource/ibm-plex-mono/300.css';
import '@fontsource/ibm-plex-mono/400.css';
import '@fontsource/ibm-plex-mono/500.css';
import '@fontsource/ibm-plex-mono/600.css';
import '@fontsource/ibm-plex-mono/700.css';

Usage

import '@mixerx/uikit/styles.css';
import { Button, Input } from '@mixerx/uikit';

const App = () => (
  <div>
    <Button variant="primary" size="md" onClick={() => {}}>
      Click me
    </Button>
    <Input label="Email" placeholder="[email protected]" mask="email" />
  </div>
);

SCSS tokens

Design tokens (colors, typography, spacing) are exported as SCSS variables:

@use '@mixerx/uikit/styles/variables' as *;

.my-button {
  background: $color-primary-900;
  font-family: $font-family-primary;
  font-size: $text-md-size;
}

Branch rule naming

[feat/bug][YY][MM]/[jira-id]-[jira issue title]

• feat - for features
• bug - for bugs/fixes
• YY - year in 2 digits
• MM - month in 2 digits
• jira-id - jira identificator of issue like MXR-5

Example of branch name:

feat2512/mxr-17-frontend-prototype-version-for-ipfs

If you have one large task, branches can share the same name with a numeric suffix:

feat2512/mxr-17-frontend-prototype-version-for-ipfs-1
feat2512/mxr-17-frontend-prototype-version-for-ipfs-2

PullRequest rule naming

Get the Jira issue ID and use the format "JIRA-ID: Issue Title".

Example of PR name:

MXR-5: Frontend prototype version for IPFS

Branch cleanup

After merging a PR into develop, delete the feature branch.

Publishing

npm run build
npm publish --access public

Requires npm access to @mixerx organization with publish permissions.