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;
}

Responsive notes

Pagination does not switch layout on its own. The full variant needs room, so pass compact when the available width is below the minimum for the variant in use:

| Variant | Minimum width | | -------------------------------- | ------------- | | card-default with button group | 525 px | | page-default | 489 px | | card-default | 412 px | | page-minimal | 388 px |

Table takes the opposite approach and switches through its own breakpoint prop.

Accessibility notes

Components that render text for assistive technology accept a prop for it, so the consuming application supplies the string in its own language: contentAriaLabel (Table), ariaLabel (Pagination, SliderPagination, Loader), closeAriaLabel (modal headers) and loadingStatusText (ModalProcess).

Checkbox, Radio and Toggle render a wrapping <label> whose text comes from the label prop. When used without one — a row-selection checkbox, for example — pass aria-label, otherwise the control has no accessible name.

notify is a client-side API and Modal should not be rendered on the server: the kit targets browser rendering only.

Security

Props and untrusted data. Typography and Tooltip forward unrecognised props to the underlying DOM element. dangerouslySetInnerHTML is removed from their prop types, but do not build any prop value from untrusted input.

Links. ModalRow renders href as a link only when it is an absolute URL with an http, https, mailto or tel scheme and carries no embedded credentials. Anything else — including relative and scheme-relative URLs — degrades to plain text. Domain trust itself is the application's responsibility.

Sensitive fields. Inputs without a mask default to autoComplete="off" and spellCheck={false}, so recipient addresses, deposit notes and commitment strings are not offered to browser autofill or sent to remote spell-check services. Override this only where autofill is genuinely wanted.

Content Security Policy. The build extracts all CSS into styles.css and performs no runtime style injection, so the kit does not require style-src 'unsafe-inline'. The floating components set style.top and style.left as CSSOM properties rather than as a string style attribute, which is CSP-compatible.

Package integrity. Consumers can verify the registry signatures of an installed tree with:

npm audit signatures

Releases are published from Jenkins, which npm does not support as a provenance attestor — --provenance works only on GitHub Actions and GitLab CI/CD runners. Publishing with build provenance would require moving the publish step to one of those.

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.