Taskforge design system (Untitled UI based)
@thetaskforge/design-system is the single copy used by every Taskforge frontend. Change a component here, tag a release, and bump it in the apps.
Folder: src/components/<group>/<name>/.
Using it in an app
- Install from npm:
npm install @thetaskforge/design-system - Keep imports as they are by aliasing
@/design-systemtonode_modules/@thetaskforge/design-system/srcintsconfig.json(paths) and the webpackresolve.alias. - Let webpack compile the package's TypeScript: include
node_modules/@thetaskforge/design-systemin the TS/babel rule. - In the app's
index.scss, import@thetaskforge/design-system/styles/globals.cssand add@source "../node_modules/@thetaskforge/design-system/src";so Tailwind sees the classes. - Add the peer dependencies in
package.jsonand mark themsingletonin Module Federation'sshared.
Note: Because this package is published to the public npm registry under the
@thetaskforgescope, no special Git tokens or repository credentials are required fornpm installin Docker, CI/CD, or Vercel.
Releasing a new version to npm
Method 1: Single command from terminal (Recommended)
Run any of the following:
npm run release:patch # e.g. 0.3.24 -> 0.3.25
npm run release:minor # e.g. 0.3.24 -> 0.4.0
npm run release:major # e.g. 0.3.24 -> 1.0.0
This automatically bumps package.json, commits, creates the git tag, and pushes to GitHub. The GitHub Actions workflow (.github/workflows/publish.yml) runs typechecks, tests, and publishes directly to npm.
Method 2: From GitHub Actions Web UI
- Go to the Actions tab in GitHub.
- Select Publish to npm from the left sidebar.
- Click Run workflow, choose
patch,minor, ormajor, and click Run workflow.
Method 3: Direct npm publish
npm publish
Shared libraries (Module Federation)
Every app lists react-aria-components, react-aria, react-stately and @internationalized/date as singleton shared libraries, next to React and React Router. That keeps one copy of the libraries holding the design system's contexts, so the host's router and overlay contexts reach components that come from another app. Keep their versions identical across apps.
Application (whole-screen pieces)
| Component | Use it for |
|---|---|
app-navigation | Sidebar, header and mobile navigation |
breadcrumbs/Breadcrumbs | The trail of pages above the current one |
page-header/PageHeader | Page title, description, badge, breadcrumbs and action buttons |
steps/Steps | Stages of a process (horizontal or vertical) |
metrics/MetricCard | A number with a label (and note, icon) |
table/Table | Data tables (scrollClassName, scrollOrientation options) |
tabs, pagination, date-picker, empty-state, loading-indicator, file-upload, carousel, charts | As named |
modals/ModalShell, modals/ConfirmActionModal | Dialogs and "Are you sure?" confirmations |
slideout-menus/SlideoutMenu, slideout-menus/Drawer | Side panels. Drawer stays mounted so it can slide, with title, subtitle and footer |
toast | Notices such as "Link copied" |
slideout-menus/DockedPanel | A non-modal panel beside the page (no backdrop) for the settings of what is selected |
floating-toolbar/FloatingToolbar, FloatingToolbarButton, FloatingToolbarDivider | A collapsible pill of icon actions floating over a canvas |
floating-action-button/FloatingActionButton, AnchoredPopup | A big round draggable button and the popup that opens beside it, flipping to stay on screen |
command-menu/CommandMenu | Searchable, sectioned list with a fixed search and a scrolling body |
workflow-canvas/PalettePanel, PaletteItem | Icon-only draggable shortcuts with tooltips |
workflow-canvas/WorkflowNodeCard, NodeHandle, CanvasGroup, EdgeLabel, CanvasPanel, ZoomControls | Pieces of a flow canvas: step cards, stage groups, connector labels, zoom |
workflow-canvas/CanvasGroup (states default / new / drop, isEditingName, menu), GroupMenu, CollapsedGroupCard | Stages: the box, naming it, drop highlight, its menu (Rename, colour, Collapse, Ungroup) and the folded card |
workflow-canvas/SelectionBox, SelectionBar, SelectionBarButton, SelectionBarDivider | The rectangle over picked steps and the dark bar above them (Group steps, Align, Delete) |
sortable-list/SortableList | Rows reordered by drag handle or keyboard |
condition-row/ConditionRow, ConditionJoin | A condition as a sentence, with And / Or |
problem-card/ProblemCard | One finding from a check, with a jump-to button |
version-row/VersionRow | Live, draft, past and grouped-autosave lines of a history |
timeline/Timeline | Coloured events along one line of time |
rich-text-editor/RichTextEditor | Small HTML message editor: bold, italic, link, list |
Base (small building blocks)
| Component | Use it for |
|---|---|
accordion/Accordion | Headings that open to show content |
badges/Badge, badges/StatusBadge | Labels. StatusBadge maps a status word to a colour (override with tones) |
buttons/Button, ButtonUtility, CloseButton | Actions, icon buttons |
input/Input, InputNumber, InputDate, PinInput, InputTags, CopyField | Fields. CopyField is the grey read-only field with a copy icon |
select/Select, ComboBox, MultiSelect, TagSelect, SelectNative | Pickers. ComboBox is the searchable one |
segmented/Segmented | Two-to-four option switch (Canvas / List, And / Or) |
reference-chip/ReferenceChip | A value, destination or missing reference shown as a chip |
code-block/CodeBlock | Read-only code with copy |
toggle/Toggle, toggle/ToggleRow | On/off switch, and a switch with title and explanation |
avatar, card, checkbox, dropdown, radio-buttons, slider, textarea, tags, tooltip, banner, button-group, progress-indicators, skeleton, scroll-area, form | As named |
Hooks / utils
use-breakpoint, use-clipboard, use-persisted-state, cx, timezones, anchored-placement/computeBesidePlacement, group-bounds/getGroupBounds, isCentreInside.
Rules
- Reach for these before writing a local component. If something is missing, add it here.
- Light mode only for mocks; use container queries rather than viewport variants inside builders and public pages.