@weavix/tracker-components

Shared UI component library for Yandex Tracker plugins. Provides ready-made React components for selecting queues, fields, and meta entities (projects, portfolios, goals), displaying issue-type, priority, status, and entity icons, and building collapsible sections — all styled to match the Tracker design system.

Installation

pnpm add @weavix/tracker-components

Peer dependencies

| Package | Version | |---|---| | react, react-dom | ^18 | | @gravity-ui/uikit | ^7 | | @gravity-ui/icons | ^2 |

Component catalogue

Select components

| Component | Description | README | |---|---|---| | QueueSelect | Dropdown for choosing a Tracker queue. Supports static lists, async suggest, icons, loading states, and confirmation dialogs. | → README | | MetaEntitiesSelect | Suggest-based select for projects, portfolios, goals, or reports. Async item fetching, loading states, error display, clear button. | → README | | PluginFieldsSelect | Dropdown for choosing Tracker fields inside a plugin. Auto-groups fields by category, supports search, multi-select, submit/reset, loading states. | → README |

Icon components

| Component | Description | README | |---|---|---| | IssueTypeIcon | Icon for a Tracker issue type (task, bug, epic, …). | → README | | PriorityIcon | Icon for an issue priority level (blocker, critical, normal, …). Supports optional colored background. | → README | | StatusIcon | Icon for a Tracker issue status. Maps IssueStatus values to distinct icons and colors. | → README | | MetaEntityIcon | Dispatcher icon that renders the correct icon for any meta entity type (project, portfolio, goal, key result). | → README | | ProjectIcon | Colored icon for a project entity. Color is deterministically derived from the project ID. | → README | | PortfolioIcon | Colored icon for a portfolio entity. Color is deterministically derived from the portfolio ID. | → README | | GoalIcon | Colored icon for a goal entity. Color is deterministically derived from the goal ID. | → README | | KeyResultIcon | Icon for a key result entity, with a built-in tooltip. | → README |

Layout components

| Component | Description | README | |---|---|---| | TrackerDisclosure | Collapsible section with Tracker-specific styling. Extends Gravity UI Disclosure with configurable arrow position, size, and an optional toolbar slot. | → README |

Quick start

QueueSelect

import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

const queues: QueueInfo[] = [
    {key: 'DEV', display: 'Development'},
    {key: 'DESIGN', display: 'Design'},
];

<QueueSelect
    queues={queues}
    defaultQueue={queues[0]}
    onChange={(queue) => console.log(queue)}
/>;

→ Full documentation including async suggest and Tracker API integration: src/components/QueueSelect/README.md

MetaEntitiesSelect

import {MetaEntitiesSelect} from '@weavix/tracker-components';

<MetaEntitiesSelect
    getItems={(text) => fetchProjects(text)}
    onChange={(entity) => console.log('selected', entity)}
/>;

→ Full documentation including Tracker API integration: src/components/MetaEntitiesSelect/README.md

PluginFieldsSelect

import {PluginFieldsSelect} from '@weavix/tracker-components';
import type {PluginFieldsSelectField} from '@weavix/tracker-components';

const fields: PluginFieldsSelectField[] = [
    {id: 'summary', name: 'Summary', category: {id: '1', display: 'System Fields'}},
    {id: 'sprint', name: 'Sprint', category: {id: '2', display: 'Custom Fields'}},
];

<PluginFieldsSelect
    open={true}
    fields={fields}
    onOpenChange={setOpen}
    onItemSelect={(item) => console.log('selected', item)}
    onItemDeselect={(item) => console.log('deselected', item)}
/>;

→ Full documentation including 3 Tracker API fetch flows: src/components/PluginFieldsSelect/README.md

IssueTypeIcon

import {IssueTypeIcon} from '@weavix/tracker-components';

<IssueTypeIcon issueType="bug" />
<IssueTypeIcon issueType="epic" size={24} />

→ Full documentation: src/components/Icon/IssueTypeIcon/README.md

PriorityIcon

import {PriorityIcon} from '@weavix/tracker-components';

<PriorityIcon priority="critical" />
<PriorityIcon priority="blocker" showBackground backgroundSize={32} />

→ Full documentation: src/components/Icon/PriorityIcon/README.md

StatusIcon

import {StatusIcon} from '@weavix/tracker-components';

<StatusIcon statusType="inProgress" />
<StatusIcon statusType="done" size={24} title="Done" />

→ Full documentation: src/components/Icon/StatusIcon/README.md

MetaEntityIcon

import {MetaEntityIcon} from '@weavix/tracker-components';

// Automatically renders the correct icon based on entityType
<MetaEntityIcon entity={{entityType: 'project', id: 'proj-1', shortId: 42}} />
<MetaEntityIcon entity={{entityType: 'portfolio', id: 'port-1', shortId: 7}} size={24} />

→ Full documentation: src/components/Icon/MetaEntityIcon/README.md

ProjectIcon / PortfolioIcon / GoalIcon

import {ProjectIcon, PortfolioIcon, GoalIcon} from '@weavix/tracker-components';

<ProjectIcon projectId={123} />
<PortfolioIcon portfolioId="portfolio-abc" />
<GoalIcon goalId={456} />

→ ProjectIcon README · PortfolioIcon README · GoalIcon README

KeyResultIcon

import {KeyResultIcon} from '@weavix/tracker-components';

<KeyResultIcon size={16} />

→ Full documentation: src/components/Icon/KeyResultIcon/README.md

TrackerDisclosure

import {TrackerDisclosure} from '@weavix/tracker-components';

<TrackerDisclosure summary="Section title" defaultExpanded>
    Content goes here
</TrackerDisclosure>

→ Full documentation: src/components/TrackerDisclosure/README.md

Architecture notes

Data-agnostic pattern

All select components (QueueSelect, MetaEntitiesSelect, PluginFieldsSelect) are data-agnostic: they accept data via props and callbacks. You are responsible for fetching data from the Tracker API and passing it to the component. This keeps the components reusable and testable without a live API.

Tracker API integration

Each select component's README contains a dedicated Tracker API section with:

• The exact API endpoints to call
• Ready-to-copy fetch functions
• Complete working examples

Styling

Components use Gravity UI design tokens and BEM class names. Import the component CSS by ensuring your bundler processes .scss files from this package (the package declares sideEffects: ["*.scss"]).

Development

pnpm install
pnpm run build       # compile to build/
pnpm run typecheck   # TypeScript type check
pnpm run lint        # ESLint + Stylelint + Prettier
pnpm run test        # Jest unit tests

Storybook

pnpm run storybook   # starts at http://localhost:7008

Component stories live in __stories__/ directories inside each component folder.