Hybrid Core UI Lib

This library contains ui components which are developed based on Material UI v5.

Install

Install package with yarn

yarn add @hybridcore/ui

or with npm

npm install @hybridcore/ui

Develop locally

Component iteration via Storybook

For tight visual loops on a single component, no consumer project required:

yarn dev          # opens the Vite dev server with Storybook

Iterate against a real consumer (e.g. Smart Navigator) without publishing

We use yalc to link the lib into consumer projects locally, so changes show up in their dev server without a yarn version + npm publish round trip. Full rationale and gotchas in docs/plans/local-dev-flow.md.

One-time setup (per machine):

npm i -g yalc

Daily workflow — two terminals, two commands:

# terminal 1 — lib: rebuild + auto-push to every linked consumer on each save
cd shared/ui && yarn build:push

# terminal 2 — consumer (Smart Navigator): link the lib, then run the dev
# server under a watcher that auto-restarts on every yalc push
cd SmartNavigator/frontend && yarn link:ui && yarn dev:lib

Edit any file under lib/components/… → vite rebuilds → yalc push fires automatically → the consumer's dev:lib watcher detects the push, wipes Umi's mfsu cache, and restarts max dev. Browser auto-reloads. No manual rebuilds, pushes, or cache wipes.

Script reference

| Script | What it does | | ------------------- | -------------------------------------------------------------------------------------------------- | | yarn build | One-shot prod build (used by prepublishOnly). Does not push to yalc. | | yarn build:watch | vite build --watch only — re-rolls dist/ and types on each save. Does not push to yalc. | | yarn build:push | Same as build:watch plus an auto-yalc push after every successful rebuild. Use this for dev. |

The auto-push hook is implemented as a closeBundle plugin in vite.config.ts, gated by the YALC_PUSH=1 env var that the build:push script sets. yarn build stays pure so npm publishes never accidentally push to local consumers.

To register the lib in a consumer project for the first time, run yalc add @hybridcore/ui once inside the consumer. The Smart Navigator frontend wraps this in a yarn link:ui script — see its README.

Release

Versioning + publish is handled by the Azure pipeline. The prepublishOnly hook runs yarn build, so always commit a clean working tree before bumping.

yarn version patch    # or minor / major
git push --follow-tags

Documentation

• docs/COMPONENT_GUIDE.md — authoring rules (4-file structure, HC* prefix, theme augmentation block)
• docs/THEMING.md — consumer-facing override guide for any project using this lib
• docs/plans/ — cross-cutting initiative plans (e.g. local dev flow, exports standard)