Skip to content
erxesPublic

About

erxes design system: UI primitives, hooks, shared state and the Tailwind theme contract (npm: @erxes/ui)

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

@erxes/ui

The erxes design system: UI primitives (Button, Dialog, Combobox, RecordTable, Form, …), hooks, shared Jotai state and the Tailwind theme contract used by erxes core-ui and every plugin UI. It has no knowledge of erxes data; components that query the erxes API live in @erxes/ui-modules.

Install

erxes code imports this package as erxes-ui, so install it under that name with an npm alias:

pnpm add erxes-ui@npm:@erxes/ui@^1.0.0
# npm install erxes-ui@npm:@erxes/ui@^1.0.0

The package is versioned on its own (semver). erxes pins the exact version it is built with in its package.json; use the same version as your erxes deployment. Peer dependencies: react and react-dom 18, react-router-dom 7, @apollo/client 3, graphql 16, jotai 2 and react-i18next 15.

Use in a plugin UI

erxes core-ui provides erxes-ui to plugin remotes as a Module Federation singleton, so a remote declares it as shared and never bundles its own copy:

shared: {
  'erxes-ui': { singleton: true, import: false, requiredVersion: false },
}

Import from the package root (import { Button } from 'erxes-ui'). Deep imports such as erxes-ui/components/button don't match the shared key and would bundle a second, private copy.

Styles

A host that compiles Tailwind imports the theme contract and scans the compiled components for class names (paths are relative to the CSS file):

@import 'tailwindcss';
@import 'erxes-ui/theme.css';
@source '../node_modules/erxes-ui';

Development

pnpm install
pnpm build      # dist/: the publishable package (ES modules + declarations)
pnpm lint
pnpm test
pnpm typecheck  # lists the type errors the source currently carries

To try local changes in erxes, point the dependency at your checkout ("erxes-ui": "link:../ui/dist"), run pnpm install there, and rebuild here after each change.

Releasing

  1. Bump version in package.json following semver and merge to main.
  2. Push a matching tag, e.g. git tag v1.0.1 && git push origin v1.0.1.

The Release workflow checks the tag against package.json, runs the tests and publishes to npm with provenance through npm trusted publishing: the package's npm settings trust this repository's release.yml, so no token is stored. Versions with a prerelease suffix (1.1.0-beta.1) are published under the next dist-tag.

History

This package was developed in the erxes monorepo at frontend/libs/erxes-ui; its history was carried over. References like (erxes/erxes#1234) in older commit messages point to pull requests in erxes/erxes.

License

AGPL-3.0. See LICENSE.md.

About

erxes design system: UI primitives, hooks, shared state and the Tailwind theme contract (npm: @erxes/ui)

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages