bluesquare-components

A library of UI components to be used in Bluesquare apps.

Node.js and npm

Pinned to the same versions as IASO (node:22.18.0, npm@11.19.0) via package.json (engines + packageManager), .nvmrc, and .npmrc (engine-strict=true).

nvm install && nvm use   # or fnm/asdf
corepack enable
corepack prepare npm@11.19.0 --activate
npm ci

Making changes

If you make additions or changes to the library, run npm run clean && npm run build and commit the updated /dist folder before pushing.

Translations

Some components have built-in translations (Frenh and English), e.g. when hovering over an icon, that use react-intl. You can import the json files in your project from the node_modules and merge them with your own, e.g:

import fr from 'src/myTranslations'; 
import en from 'src/myTranslations'; 
import frLibrary from '../node_modules/bluesquare-components/dist/locale/fr.json';
import enLibrary from '../node_modules/bluesquare-components/dist/locale/en.json';

const messages = {
    fr: { ...fr, ...frLibrary },
    en: { ...en, ...enLibrary },
};

Depend on it locally

run npm run build-local to generate a tgz file.

In your application's package.json, add:

"bluesquare-components":"file:/local/path/to/lib/bluesquare-components-<version>.tgz"

Note that the .tgz file should be in a /lib folder

run npm i, or npm update bluesquare-components to update to the latest version if it's already installed.

Depend on the repository

In your application's package.json, add (IASO form):

"bluesquare-components": "github:BLSQ/bluesquare-components"

To install or update to the latest main (consumers with min-release-age=7 must bypass the cooldown for this git dependency):

npm install bluesquare-components@github:BLSQ/bluesquare-components --min-release-age=0

Optional commit pin:

"bluesquare-components": "github:BLSQ/bluesquare-components#<commit-sha>"

npm install bluesquare-components@github:BLSQ/bluesquare-components#<commit-sha> --min-release-age=0

Do not use npm update bluesquare-components for the git dependency — it will not reliably refresh the repo and will hit the release-age gate during git prepare.

Avoid git://github.com/... URLs (they may work locally but fail authentication in Docker/CI); prefer github:BLSQ/bluesquare-components.

With Docker

To depend on the repo, run npm run compile and push the dist folder, then depend on the library as mentioned above.

To depend on a local version of the library (if you need it inside the container):

• Run npm run build-local
• Build an image from the Dockerfile: docker build --tag <library-name> .
• Modify your package.json:

"bluesquare-components":"file:path/to/lib/compiled_file.tgz"

• In your project, run npm i
• Modify your project's Dockerfile to have a multi staged build in order to be able to copy the .tgz file in your container.
• Build your projects Docker image and start the container.

To update the dependency:

• Run npm run build-local
• Build an image from the Dockerfile: docker build --tag <library-name> .
• In your project, run npm update bluesquare-components (for a file: dependency) or, for a github: dependency: npm install bluesquare-components@github:BLSQ/bluesquare-components --min-release-age=0
• Update your project's Docker image
• Start the container

Publishing on npm?

Coming soon.

Credits

Comment component is slightly adapted from Hatem's CodeSandbox

LazyImage is taken from react-lazy-progressive-image, which is not maintained anymore